Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support inline style with underscore in value #22

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Support inline style with underscore in value #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 4 additions & 8 deletions build/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,6 @@ var _lodash = require('lodash.camelcase');

var _lodash2 = _interopRequireDefault(_lodash);

var _lodash3 = require('lodash.snakecase');

var _lodash4 = _interopRequireDefault(_lodash3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
Expand Down Expand Up @@ -198,7 +194,7 @@ var currentStyle = function currentStyle(prefix) {
var createCustomStyles = exports.createCustomStyles = function createCustomStyles(prefix, conf) {
return conf.reduce(function (acc, prop) {
var camelCased = (0, _lodash2.default)(prop);
var newPrefix = '' + prefix + (0, _lodash4.default)(prop).toUpperCase() + '_';
var newPrefix = '' + prefix + camelCased + '_';
var copy = _extends({}, acc);
copy[camelCased] = {
add: addStyle(newPrefix),
Expand Down Expand Up @@ -250,7 +246,7 @@ var createInlineStyleExportObject = exports.createInlineStyleExportObject = func
}));
}

var regex = new RegExp(prefix + '(.+)_(.+)');
var regex = new RegExp(prefix + '([^_]+)_(.+)');
var match = style.match(regex);

// no matches
Expand All @@ -259,10 +255,10 @@ var createInlineStyleExportObject = exports.createInlineStyleExportObject = func
}

// custom styles
var css = match[1].toLowerCase();
var css = match[1];
var value = match[2];
var inlineStyle = _defineProperty({}, style, {
style: _defineProperty({}, (0, _lodash2.default)(css), value)
style: _defineProperty({}, css, value)
});

return Object.assign({}, acc, inlineStyle);
Expand Down
9 changes: 4 additions & 5 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { EditorState, Modifier, convertToRaw, DefaultDraftInlineStyle } from 'draft-js';
import { Map } from 'immutable';
import camelCase from 'lodash.camelcase';
import snakeCase from 'lodash.snakecase';

const DEFAULT_PREFIX = 'CUSTOM_';

Expand Down Expand Up @@ -161,7 +160,7 @@ const currentStyle = prefix => editorState => {
export const createCustomStyles = (prefix, conf) => {
return conf.reduce((acc, prop) => {
const camelCased = camelCase(prop);
const newPrefix = `${prefix}${snakeCase(prop).toUpperCase()}_`;
const newPrefix = `${prefix}${camelCased}_`;
const copy = { ...acc };
copy[camelCased] = {
add: addStyle(newPrefix),
Expand Down Expand Up @@ -212,7 +211,7 @@ export const createInlineStyleExportObject = (prefix, customStyleMap) => (acc, s
});
}

const regex = new RegExp(`${prefix}(.+)_(.+)`);
const regex = new RegExp(`${prefix}([^_]+)_(.+)`);
const match = style.match(regex);

// no matches
Expand All @@ -221,12 +220,12 @@ export const createInlineStyleExportObject = (prefix, customStyleMap) => (acc, s
}

// custom styles
const css = match[1].toLowerCase();
const css = match[1];
const value = match[2];
const inlineStyle = {
[style]: {
style: {
[camelCase(css)]: value,
[css]: value,
},
},
};
Expand Down
78 changes: 49 additions & 29 deletions tests/index.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ describe('add()', () => {
const inlineStyleRanges = blockInlineStyleRanges(newEditorState, 0);
expect(inlineStyleRanges).to.deep.equal([
{
style: 'CUSTOM_COLOR_red',
style: 'CUSTOM_color_red',
length: 5,
offset: 0,
}]);
Expand All @@ -68,7 +68,7 @@ describe('add()', () => {
const inlineStyleRanges = blockInlineStyleRanges(newEditorState2, 0);
expect(inlineStyleRanges).to.deep.equal([
{
style: 'CUSTOM_COLOR_green',
style: 'CUSTOM_color_green',
length: 5,
offset: 0,
}]);
Expand All @@ -80,7 +80,7 @@ describe('add()', () => {
.toEditorState();
const newEditorState = styles.color.add(editorState, 'red');
const override = newEditorState.getInlineStyleOverride();
expect(override.toJS()).to.deep.equal(OrderedSet(['CUSTOM_COLOR_red']).toJS());
expect(override.toJS()).to.deep.equal(OrderedSet(['CUSTOM_color_red']).toJS());
});
it('should add a 2 of the same prefixed styles to the same collapsed selection and show only the latest style', () => {
const editorState = new Raw()
Expand All @@ -90,7 +90,7 @@ describe('add()', () => {
const newEditorState = styles.color.add(editorState, 'red');
const newEditorState2 = styles.color.add(newEditorState, 'blue');
const override = newEditorState2.getInlineStyleOverride();
expect(override.toJS()).to.deep.equal(OrderedSet(['CUSTOM_COLOR_blue']).toJS());
expect(override.toJS()).to.deep.equal(OrderedSet(['CUSTOM_color_blue']).toJS());
});
it('should add 2 of the different prefixed styles to the same collapsed selection and show both', () => {
const editorState = new Raw()
Expand All @@ -100,7 +100,7 @@ describe('add()', () => {
const newEditorState = styles.color.add(editorState, 'red');
const newEditorState2 = styles.fontSize.add(newEditorState, '12px');
const override = newEditorState2.getInlineStyleOverride();
expect(override.toJS()).to.deep.equal(OrderedSet(['CUSTOM_COLOR_red', 'CUSTOM_FONT_SIZE_12px']).toJS());
expect(override.toJS()).to.deep.equal(OrderedSet(['CUSTOM_color_red', 'CUSTOM_fontSize_12px']).toJS());
});
it('should add 2 different colors and undo redo them one by one', () => {
const editorState = new Raw()
Expand All @@ -113,23 +113,23 @@ describe('add()', () => {
const inlineStyleRanges = blockInlineStyleRanges(newEditorState2, 0);
expect(inlineStyleRanges).to.deep.equal([
{
style: 'CUSTOM_COLOR_green',
style: 'CUSTOM_color_green',
length: 5,
offset: 0,
}]);

const newEditorState3 = EditorState.undo(newEditorState2);
expect(blockInlineStyleRanges(newEditorState3, 0)).to.deep.equal([
{
style: 'CUSTOM_COLOR_red',
style: 'CUSTOM_color_red',
length: 5,
offset: 0,
}]);

const newEditorState4 = EditorState.redo(newEditorState3);
expect(blockInlineStyleRanges(newEditorState4, 0)).to.deep.equal([
{
style: 'CUSTOM_COLOR_green',
style: 'CUSTOM_color_green',
length: 5,
offset: 0,
}]);
Expand Down Expand Up @@ -168,7 +168,7 @@ describe('toggle()', () => {
// Add styles
expect(addedInlineStyleRanges).to.deep.equal([
{
style: 'CUSTOM_COLOR_red',
style: 'CUSTOM_color_red',
length: 5,
offset: 0,
}]);
Expand All @@ -188,7 +188,7 @@ describe('toggle()', () => {
const inlineStyleRanges = blockInlineStyleRanges(newEditorState, 0);
const inlineStyleOverride = newEditorState.getInlineStyleOverride();
expect(inlineStyleRanges).to.deep.equal([]);
expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_COLOR_red']);
expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_color_red']);
});
it('should add and remove inlineStyleOverride to collapsed selection', () => {
const editorState = new Raw()
Expand All @@ -214,7 +214,7 @@ describe('toggle()', () => {
const inlineStyleRanges = blockInlineStyleRanges(newEditorState2, 0);
const inlineStyleOverride = newEditorState2.getInlineStyleOverride();
expect(inlineStyleRanges).to.deep.equal([]);
expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_COLOR_blue']);
expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_color_blue']);
});
it('should add 3 color styles, only blue should be set as inlineStyleOverride', () => {
const editorState = new Raw()
Expand All @@ -228,7 +228,7 @@ describe('toggle()', () => {
const inlineStyleRanges = blockInlineStyleRanges(newEditorState3, 0);
const inlineStyleOverride = newEditorState3.getInlineStyleOverride();
expect(inlineStyleRanges).to.deep.equal([]);
expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_COLOR_blue']);
expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_color_blue']);
});
it('should add 2 different styles, only color blue and font-size 12px should be set as inlineStyleOverride', () => {
const editorState = new Raw()
Expand All @@ -243,7 +243,7 @@ describe('toggle()', () => {
const inlineStyleRanges = blockInlineStyleRanges(newEditorState4, 0);
const inlineStyleOverride = newEditorState4.getInlineStyleOverride();
expect(inlineStyleRanges).to.deep.equal([]);
expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_FONT_SIZE_12px', 'CUSTOM_COLOR_green']);
expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_fontSize_12px', 'CUSTOM_color_green']);
});
it('should add 2 different colors and undo redo them one by one', () => {
const editorState = new Raw()
Expand All @@ -256,23 +256,23 @@ describe('toggle()', () => {
const inlineStyleRanges = blockInlineStyleRanges(newEditorState2, 0);
expect(inlineStyleRanges).to.deep.equal([
{
style: 'CUSTOM_COLOR_green',
style: 'CUSTOM_color_green',
length: 5,
offset: 0,
}]);

const newEditorState3 = EditorState.undo(newEditorState2);
expect(blockInlineStyleRanges(newEditorState3, 0)).to.deep.equal([
{
style: 'CUSTOM_COLOR_red',
style: 'CUSTOM_color_red',
length: 5,
offset: 0,
}]);

const newEditorState4 = EditorState.redo(newEditorState3);
expect(blockInlineStyleRanges(newEditorState4, 0)).to.deep.equal([
{
style: 'CUSTOM_COLOR_green',
style: 'CUSTOM_color_green',
length: 5,
offset: 0,
}]);
Expand All @@ -283,7 +283,7 @@ describe('customStyleFn()', () => {
const config = ['color'];
const { customStyleFn } = createStyles(config);
it('should create a css object from a string', () => {
const result = customStyleFn(OrderedSet(['CUSTOM_COLOR_red']));
const result = customStyleFn(OrderedSet(['CUSTOM_color_red']));
expect(result).to.deep.equal({ color: 'red' });
});
});
Expand All @@ -303,7 +303,7 @@ describe('current()', () => {
});

describe('exporter()', () => {
const config = ['color', 'background-color'];
const config = ['color', 'background-color', 'font-family'];
const customStyleMap = {
MARK: {
backgroundColor: 'Yellow',
Expand All @@ -321,12 +321,12 @@ describe('exporter()', () => {
const newEditorState2 = styles.backgroundColor.add(newEditorState, 'green');
const inlineStyles = exporter(newEditorState2);
expect(inlineStyles).to.deep.equal({
'CUSTOM_COLOR_#FF0000': {
'CUSTOM_color_#FF0000': {
style: {
color: '#FF0000',
},
},
CUSTOM_BACKGROUND_COLOR_green: {
CUSTOM_backgroundColor_green: {
style: {
backgroundColor: 'green',
},
Expand All @@ -344,7 +344,7 @@ describe('exporter()', () => {
const newEditorState3 = styles.backgroundColor.add(newEditorState2, 'green');
const inlineStyles = exporter(newEditorState3);
expect(inlineStyles).to.deep.equal({
CUSTOM_COLOR_red: {
CUSTOM_color_red: {
style: {
color: 'red',
},
Expand All @@ -354,7 +354,7 @@ describe('exporter()', () => {
fontWeight: 'bold',
},
},
CUSTOM_BACKGROUND_COLOR_green: {
CUSTOM_backgroundColor_green: {
style: {
backgroundColor: 'green',
},
Expand All @@ -373,7 +373,7 @@ describe('exporter()', () => {
const newEditorState4 = styles.backgroundColor.add(newEditorState3, 'green');
const inlineStyles = exporter(newEditorState4);
expect(inlineStyles).to.deep.equal({
CUSTOM_COLOR_red: {
CUSTOM_color_red: {
style: {
color: 'red',
},
Expand All @@ -383,7 +383,7 @@ describe('exporter()', () => {
fontWeight: 'bold',
},
},
CUSTOM_BACKGROUND_COLOR_green: {
CUSTOM_backgroundColor_green: {
style: {
backgroundColor: 'green',
},
Expand All @@ -401,7 +401,7 @@ describe('exporter()', () => {
const newEditorState3 = styles.backgroundColor.add(newEditorState2, 'green');
const inlineStyles = exporter(newEditorState3);
expect(inlineStyles).to.deep.equal({
CUSTOM_COLOR_red: {
CUSTOM_color_red: {
style: {
color: 'red',
},
Expand All @@ -412,7 +412,7 @@ describe('exporter()', () => {
fontStyle: 'italic',
},
},
CUSTOM_BACKGROUND_COLOR_green: {
CUSTOM_backgroundColor_green: {
style: {
backgroundColor: 'green',
},
Expand All @@ -431,7 +431,7 @@ describe('exporter()', () => {
const newEditorState4 = styles.backgroundColor.add(newEditorState3, 'green');
const inlineStyles = exporter(newEditorState4);
expect(inlineStyles).to.deep.equal({
CUSTOM_COLOR_red: {
CUSTOM_color_red: {
style: {
color: 'red',
},
Expand All @@ -447,7 +447,7 @@ describe('exporter()', () => {
fontStyle: 'italic',
},
},
CUSTOM_BACKGROUND_COLOR_green: {
CUSTOM_backgroundColor_green: {
style: {
backgroundColor: 'green',
},
Expand Down Expand Up @@ -481,13 +481,33 @@ describe('exporter()', () => {
fontWeight: 'bold',
},
},
CUSTOM_COLOR_green: {
CUSTOM_color_green: {
style: {
color: 'green',
},
},
});
});
it('should properly process inline styles with underscore in value', () => {
const editorState = new Raw()
.addBlock('block 1')
.anchorKey(0)
.focusKey(5)
.toEditorState();
const toggleInlineStyle = (
_editorState,
style
) => RichUtils.toggleInlineStyle(_editorState, style);
const newEditorState1 = styles.fontFamily.add(editorState, 'KaiTi_GB2312');
const inlineStyles = exporter(newEditorState1);
expect(inlineStyles).to.deep.equal({
CUSTOM_fontFamily_KaiTi_GB2312: {
style: {
fontFamily: 'KaiTi_GB2312',
},
},
});
});
});

describe('validatePrefix()', () => {
Expand Down