draft-js#Modifier JavaScript Examples
The following examples show how to use
draft-js#Modifier.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: ScriptEditor.jsx From Spoke with MIT License | 6 votes |
addCustomField(field) {
const textToInsert = delimit(field);
const { editorState } = this.state;
const selection = editorState.getSelection();
const contentState = editorState.getCurrentContent();
const newContentState = Modifier.insertText(
contentState,
selection,
textToInsert
);
const newEditorState = EditorState.push(
editorState,
newContentState,
"insert-fragment"
);
this.setState({ editorState: newEditorState }, this.focus);
}
Example #2
Source File: editorStateUtils.js From react-mui-draft-wysiwyg with MIT License | 6 votes |
toggleMappedInlineStyle = (editorState, styleKeys, newInlineStyle) => {
const selection = editorState.getSelection();
// Turn off the other mapped inline styled in selection
const newContentState = styleKeys.reduce(
(contentState, inlineStyle) =>
Modifier.removeInlineStyle(contentState, selection, inlineStyle),
editorState.getCurrentContent()
);
let newEditorState = EditorState.push(editorState, newContentState, 'change-inline-style');
const currentStyle = editorState.getCurrentInlineStyle();
if (selection.isCollapsed()) {
newEditorState = currentStyle.reduce((state, inlineStyle) => {
return RichUtils.toggleInlineStyle(state, inlineStyle);
}, newEditorState);
}
// If the inline style is being toggled on, apply it.
if (!currentStyle.has(newInlineStyle)) {
newEditorState = RichUtils.toggleInlineStyle(newEditorState, newInlineStyle);
}
return newEditorState;
}
Example #3
Source File: clearMention.js From spring-boot-ecommerce with Apache License 2.0 | 6 votes |
export default function clearMention(editorState) {
var selection = editorState.getSelection();
var searchWord = getSearchWord(editorState, selection);
var begin = searchWord.begin,
end = searchWord.end;
var replacedContent = Modifier.replaceText(editorState.getCurrentContent(), selection.merge({
anchorOffset: begin,
focusOffset: end
}), '', null);
var InsertSpaceContent = Modifier.insertText(replacedContent, replacedContent.getSelectionAfter(), ' ');
var newEditorState = EditorState.push(editorState, InsertSpaceContent, 'insert-mention');
return EditorState.forceSelection(newEditorState, InsertSpaceContent.getSelectionAfter());
}
Example #4
Source File: insertMention.js From spring-boot-ecommerce with Apache License 2.0 | 6 votes |
export default function insertMention(editorState, mention, data, mode) {
var entityMode = mode === 'immutable' ? 'IMMUTABLE' : 'MUTABLE';
var selection = editorState.getSelection();
var contentState = editorState.getCurrentContent();
contentState.createEntity('mention', entityMode, data || mention);
var searchWord = getSearchWord(editorState, selection);
var begin = searchWord.begin,
end = searchWord.end;
var replacedContent = Modifier.replaceText(contentState, selection.merge({
anchorOffset: begin,
focusOffset: end
}), mention, null, contentState.getLastCreatedEntityKey());
var InsertSpaceContent = Modifier.insertText(replacedContent, replacedContent.getSelectionAfter(), ' ');
var newEditorState = EditorState.push(editorState, InsertSpaceContent, 'insert-mention');
return EditorState.forceSelection(newEditorState, InsertSpaceContent.getSelectionAfter());
}
Example #5
Source File: EditorUtilities.js From wix-style-react with MIT License | 6 votes |
_attachLinkEntityToText = (editorState, { text, url }) => {
const contentState = editorState.getCurrentContent();
const selectionState = editorState.getSelection();
const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
url,
});
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const startPosition = selectionState.getStartOffset();
const endPosition = startPosition + text.length;
// A key for the block that containing the start of the selection range
const blockKey = selectionState.getStartKey();
// Replaces the content in specified selection range with text
const contentStateWithText = Modifier.replaceText(
contentState,
selectionState,
text,
);
const newSelectionState = new SelectionState({
anchorOffset: startPosition,
anchorKey: blockKey,
focusOffset: endPosition,
focusKey: blockKey,
});
const newEditorState = EditorState.push(
editorState,
contentStateWithText,
'insert-characters',
);
return RichUtils.toggleLink(newEditorState, newSelectionState, entityKey);
}
Example #6
Source File: EditorUtilities.js From wix-style-react with MIT License | 6 votes |
_removeEntityFromBlock = (editorState, contentBlock, entity) => {
const contentState = editorState.getCurrentContent();
const selectionState = editorState.getSelection();
let selectionWithEntity = null;
contentBlock.findEntityRanges(
character => character.getEntity() === entity,
(start, end) => {
// Creates a selection state that contains the whole text that's linked to the entity
selectionWithEntity = selectionState.merge({
anchorOffset: start,
focusOffset: end,
});
},
);
// Removes the linking between the text and entity
const contentStateWithoutEntity = Modifier.applyEntity(
contentState,
selectionWithEntity,
null,
);
const newEditorState = EditorState.push(
editorState,
contentStateWithoutEntity,
'apply-entity',
);
return RichUtils.toggleLink(newEditorState, selectionState, null);
}
Example #7
Source File: index.jsx From react-mui-draft-wysiwyg with MIT License | 5 votes |
function TextAlignControl() {
const editor = useEditor();
const editorFocus = useEditorFocus();
const [selectedTextAlign, setSelectedTextAlign] = React.useState(null);
React.useEffect(() => {
const selection = editor.editorState.getSelection();
const currentBlock = editor.editorState
.getCurrentContent()
.getBlockForKey(selection.getStartKey());
const blockData = currentBlock.getData();
if (blockData && blockData.get('textAlign')) {
setSelectedTextAlign(blockData.get('textAlign'));
} else {
setSelectedTextAlign(null);
}
}, [editor.editorState]);
const toggle = (textAlign) => {
setSelectedTextAlign(textAlign);
const { editorState } = editor;
const newContentState = Modifier.mergeBlockData(
editorState.getCurrentContent(),
editorState.getSelection(),
{ textAlign }
);
editor.onChange(EditorState.push(editorState, newContentState, 'change-block-data'));
editorFocus();
};
return (
<React.Fragment>
<ButtonControl
active={selectedTextAlign === 'left'}
onClick={() => toggle('left')}
text={editor.translate('controls.textAlign.actions.alignLeft')}>
<FormatAlignLeftIcon />
</ButtonControl>
<ButtonControl
active={selectedTextAlign === 'center'}
onClick={() => toggle('center')}
text={editor.translate('controls.textAlign.actions.alignCenter')}>
<FormatAlignCenterIcon />
</ButtonControl>
<ButtonControl
active={selectedTextAlign === 'right'}
onClick={() => toggle('right')}
text={editor.translate('controls.textAlign.actions.alignRight')}>
<FormatAlignRightIcon />
</ButtonControl>
<ButtonControl
active={selectedTextAlign === 'justify'}
onClick={() => toggle('justify')}
text={editor.translate('controls.textAlign.actions.justify')}>
<FormatAlignJustifyIcon />
</ButtonControl>
</React.Fragment>
);
}
Example #8
Source File: editorStateUtils.js From react-mui-draft-wysiwyg with MIT License | 5 votes |
applyEntityToCurrentSelection = (editorState, entityType, mutability, entityData) => {
const content = editorState.getCurrentContent();
const contentWithEntity = content.createEntity(entityType, mutability, entityData);
const entityKey = contentWithEntity.getLastCreatedEntityKey();
const selection = editorState.getSelection();
const contentStateWithEntity = Modifier.applyEntity(contentWithEntity, selection, entityKey);
return EditorState.push(editorState, contentStateWithEntity, 'apply-entity');
}
Example #9
Source File: handlePastedText.js From spring-boot-ecommerce with Apache License 2.0 | 5 votes |
export default function handlePastedText(text, html) {
if (html) {
var fragment = customHTML2Content(html);
var withImage = Modifier.replaceWithFragment(imageBlock, insertionTarget, fragment);
}
return 'not-handled';
}
Example #10
Source File: createImmutableMention.js From spring-boot-ecommerce with Apache License 2.0 | 5 votes |
export default function createImmutableMention() {
var callbacks = {
onChange: noop,
onUpArrow: noop,
onDownArrow: noop,
getEditorState: noop,
setEditorState: noop,
handleReturn: noop,
onBlur: noop
};
function _onChange(editorState) {
var selectionState = editorState.getSelection();
var currentContent = editorState.getCurrentContent();
var anchorKey = selectionState.getAnchorKey();
var currentContentBlock = currentContent.getBlockForKey(anchorKey);
if (selectionState.isCollapsed()) {
currentContent.createEntity('trigger', 'MUTABLE');
var end = selectionState.getEndOffset();
var start = end - 1;
var selectedText = currentContentBlock.getText().slice(start, end);
if (selectedText === '@') {
var updatedContent = Modifier.replaceText(currentContent, selectionState.merge({
anchorOffset: start,
focusOffset: end
}), '@', null, currentContent.getLastCreatedEntityKey());
return EditorState.push(editorState, updatedContent, 'insert-mention');
}
}
return editorState;
}
var componentProps = {
callbacks: callbacks,
mentionStore: mentionStore
};
return {
name: 'mention',
Suggestions: function Suggestions(props) {
return React.createElement(_Suggestions, _extends({}, props, componentProps, {
store: mentionStore
}));
},
decorators: [{
strategy: mentionTriggerStrategy,
component: function component(props) {
return React.createElement('span', _extends({}, props, { style: { color: 'red' } }));
}
}, {
strategy: mentionContentStrategy,
component: function component(props) {
return React.createElement(MentionContentComponent, _extends({}, props, { callbacks: callbacks }));
}
}],
onChange: function onChange(editorState) {
var updatedEditorState = _onChange(editorState);
return callbacks.onChange ? callbacks.onChange(updatedEditorState) : updatedEditorState;
},
callbacks: callbacks,
'export': exportContent
};
}
Example #11
Source File: plugin.js From react-mui-draft-wysiwyg with MIT License | 4 votes |
EditorImage = ({ src, width, height, contentState, block }) => {
const [anchorEl, setAnchorEl] = React.useState(null);
const [infoAnchorEl, setInfoAnchorEl] = React.useState(null);
const editor = useEditor();
const editorFocus = useEditorFocus();
const classes = useStyles();
const showOptions = (ev) => {
setAnchorEl(ev.currentTarget);
setInfoAnchorEl(ev.currentTarget);
};
const hideOptions = () => {
setAnchorEl(null);
setInfoAnchorEl(null);
};
const imageAlign = (ev, align) => {
ev.preventDefault();
ev.stopPropagation();
const imageSelection = SelectionState.createEmpty(block.getKey()).merge({
anchorKey: block.getKey(),
anchorOffset: 0,
focusKey: block.getKey(),
focusOffset: block.getLength(),
});
const newContentState = Modifier.setBlockData(contentState, imageSelection, {
textAlign: align,
});
editor.onChange(EditorState.push(editor.editorState, newContentState, 'change-block-data'));
editorFocus();
};
const removeImage = (ev) => {
ev.preventDefault();
ev.stopPropagation();
const imageSelection = SelectionState.createEmpty(block.getKey()).merge({
anchorKey: block.getKey(),
anchorOffset: 0,
focusKey: block.getKey(),
focusOffset: block.getLength(),
});
let newContentState = Modifier.removeRange(contentState, imageSelection, 'forward');
const blockMap = newContentState.getBlockMap().delete(block.getKey());
const firstBlock = newContentState.getFirstBlock();
const selectionToStart = SelectionState.createEmpty(firstBlock.getKey()).merge({
anchorKey: firstBlock.getKey(),
anchorOffset: 0,
focusKey: firstBlock.getKey(),
focusOffset: 0,
});
newContentState = newContentState.merge({ blockMap, selectionAfter: selectionToStart });
editor.onChange(EditorState.push(editor.editorState, newContentState, 'remove-range'));
editorFocus();
};
if (!src) return null;
return (
<React.Fragment>
<img alt={src} src={src} width={width} height={height} onClick={showOptions} />
<Popover
open={Boolean(infoAnchorEl)}
onClose={hideOptions}
anchorEl={infoAnchorEl}
anchorOrigin={{
vertical: 'top',
horizontal: 'right',
}}
transformOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}>
<Typography color="textSecondary" variant="body1" className={classes.imgInfo}>
{width} x {height}
</Typography>
</Popover>
<Popover
open={Boolean(anchorEl)}
onClose={hideOptions}
anchorEl={anchorEl}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
}}>
<ButtonGroup
size="small"
aria-label={editor.translate('controls.image.labels.editOptions')}>
<Button
onClick={(ev) => imageAlign(ev, 'left')}
title={editor.translate('controls.image.actions.alignLeft')}>
<ArrowLeftIcon />
<ImageIcon />
</Button>
<Button
onClick={(ev) => imageAlign(ev, 'center')}
title={editor.translate('controls.image.actions.alignCenter')}>
<ArrowLeftIcon />
<ImageIcon />
<ArrowRightIcon />
</Button>
<Button
onClick={(ev) => imageAlign(ev, 'right')}
title={editor.translate('controls.image.actions.alignRight')}>
<ImageIcon />
<ArrowRightIcon />
</Button>
<Button
onClick={() => {
hideOptions();
editor.showResizeImageDialog(block.getEntityAt(0));
}}
title={editor.translate('controls.image.actions.resize')}>
<PhotoSizeSelectLargeIcon />
</Button>
<Button
onClick={removeImage}
title={editor.translate('controls.image.actions.remove')}>
<DeleteIcon />
</Button>
</ButtonGroup>
</Popover>
</React.Fragment>
);
}
Example #12
Source File: index.js From spring-boot-ecommerce with Apache License 2.0 | 4 votes |
EditorCore = function (_React$Component) {
_inherits(EditorCore, _React$Component);
function EditorCore(props) {
_classCallCheck(this, EditorCore);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.cancelForceUpdateImmediate = function () {
clearImmediate(_this.forceUpdateImmediate);
_this.forceUpdateImmediate = null;
};
_this.handlePastedText = function (text, html) {
var editorState = _this.state.editorState;
if (html) {
var contentState = editorState.getCurrentContent();
var selection = editorState.getSelection();
var fragment = customHTML2Content(html, contentState);
var pastedContent = Modifier.replaceWithFragment(contentState, selection, fragment);
var newContent = pastedContent.merge({
selectionBefore: selection,
selectionAfter: pastedContent.getSelectionAfter().set('hasFocus', true)
});
_this.setEditorState(EditorState.push(editorState, newContent, 'insert-fragment'), true);
return 'handled';
}
return 'not-handled';
};
_this.plugins = List(List(props.plugins).flatten(true));
var editorState = void 0;
if (props.value !== undefined) {
if (props.value instanceof EditorState) {
editorState = props.value || EditorState.createEmpty();
} else {
editorState = EditorState.createEmpty();
}
} else {
editorState = EditorState.createEmpty();
}
editorState = _this.generatorDefaultValue(editorState);
_this.state = {
plugins: _this.reloadPlugins(),
editorState: editorState,
customStyleMap: {},
customBlockStyleMap: {},
compositeDecorator: null
};
if (props.value !== undefined) {
_this.controlledMode = true;
}
return _this;
}
EditorCore.ToEditorState = function ToEditorState(text) {
var createEmptyContentState = ContentState.createFromText(decodeContent(text) || '');
var editorState = EditorState.createWithContent(createEmptyContentState);
return EditorState.forceSelection(editorState, createEmptyContentState.getSelectionAfter());
};
EditorCore.prototype.getDefaultValue = function getDefaultValue() {
var _props = this.props,
defaultValue = _props.defaultValue,
value = _props.value;
return value || defaultValue;
};
EditorCore.prototype.Reset = function Reset() {
var defaultValue = this.getDefaultValue();
var contentState = defaultValue ? defaultValue.getCurrentContent() : ContentState.createFromText('');
var updatedEditorState = EditorState.push(this.state.editorState, contentState, 'remove-range');
this.setEditorState(EditorState.forceSelection(updatedEditorState, contentState.getSelectionBefore()));
};
EditorCore.prototype.SetText = function SetText(text) {
var createTextContentState = ContentState.createFromText(text || '');
var editorState = EditorState.push(this.state.editorState, createTextContentState, 'change-block-data');
this.setEditorState(EditorState.moveFocusToEnd(editorState), true);
};
EditorCore.prototype.getChildContext = function getChildContext() {
return {
getEditorState: this.getEditorState,
setEditorState: this.setEditorState
};
};
EditorCore.prototype.reloadPlugins = function reloadPlugins() {
var _this2 = this;
return this.plugins && this.plugins.size ? this.plugins.map(function (plugin) {
// 如果插件有 callbacks 方法,则认为插件已经加载。
if (plugin.callbacks) {
return plugin;
}
// 如果插件有 constructor 方法,则构造插件
if (plugin.hasOwnProperty('constructor')) {
var pluginConfig = _extends(_this2.props.pluginConfig, plugin.config || {}, defaultPluginConfig);
return plugin.constructor(pluginConfig);
}
// else 无效插件
console.warn('>> 插件: [', plugin.name, '] 无效。插件或许已经过期。');
return false;
}).filter(function (plugin) {
return plugin;
}).toArray() : [];
};
EditorCore.prototype.componentWillMount = function componentWillMount() {
var plugins = this.initPlugins().concat([toolbar]);
var customStyleMap = {};
var customBlockStyleMap = {};
var customBlockRenderMap = Map(DefaultDraftBlockRenderMap);
var toHTMLList = List([]);
// initialize compositeDecorator
var compositeDecorator = new CompositeDecorator(plugins.filter(function (plugin) {
return plugin.decorators !== undefined;
}).map(function (plugin) {
return plugin.decorators;
}).reduce(function (prev, curr) {
return prev.concat(curr);
}, []));
// initialize Toolbar
var toolbarPlugins = List(plugins.filter(function (plugin) {
return !!plugin.component && plugin.name !== 'toolbar';
}));
// load inline styles...
plugins.forEach(function (plugin) {
var styleMap = plugin.styleMap,
blockStyleMap = plugin.blockStyleMap,
blockRenderMap = plugin.blockRenderMap,
toHtml = plugin.toHtml;
if (styleMap) {
for (var key in styleMap) {
if (styleMap.hasOwnProperty(key)) {
customStyleMap[key] = styleMap[key];
}
}
}
if (blockStyleMap) {
for (var _key in blockStyleMap) {
if (blockStyleMap.hasOwnProperty(_key)) {
customBlockStyleMap[_key] = blockStyleMap[_key];
customBlockRenderMap = customBlockRenderMap.set(_key, {
element: null
});
}
}
}
if (toHtml) {
toHTMLList = toHTMLList.push(toHtml);
}
if (blockRenderMap) {
for (var _key2 in blockRenderMap) {
if (blockRenderMap.hasOwnProperty(_key2)) {
customBlockRenderMap = customBlockRenderMap.set(_key2, blockRenderMap[_key2]);
}
}
}
});
configStore.set('customStyleMap', customStyleMap);
configStore.set('customBlockStyleMap', customBlockStyleMap);
configStore.set('blockRenderMap', customBlockRenderMap);
configStore.set('customStyleFn', this.customStyleFn.bind(this));
configStore.set('toHTMLList', toHTMLList);
this.setState({
toolbarPlugins: toolbarPlugins,
compositeDecorator: compositeDecorator
});
this.setEditorState(EditorState.set(this.state.editorState, { decorator: compositeDecorator }), false, false);
};
EditorCore.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (this.forceUpdateImmediate) {
this.cancelForceUpdateImmediate();
}
if (this.controlledMode) {
var decorators = nextProps.value.getDecorator();
var editorState = decorators ? nextProps.value : EditorState.set(nextProps.value, { decorator: this.state.compositeDecorator });
this.setState({
editorState: editorState
});
}
};
EditorCore.prototype.componentWillUnmount = function componentWillUnmount() {
this.cancelForceUpdateImmediate();
};
// 处理 value
EditorCore.prototype.generatorDefaultValue = function generatorDefaultValue(editorState) {
var defaultValue = this.getDefaultValue();
if (defaultValue) {
return defaultValue;
}
return editorState;
};
EditorCore.prototype.getStyleMap = function getStyleMap() {
return configStore.get('customStyleMap');
};
EditorCore.prototype.setStyleMap = function setStyleMap(customStyleMap) {
configStore.set('customStyleMap', customStyleMap);
this.render();
};
EditorCore.prototype.initPlugins = function initPlugins() {
var _this3 = this;
var enableCallbacks = ['focus', 'getEditorState', 'setEditorState', 'getStyleMap', 'setStyleMap'];
return this.getPlugins().map(function (plugin) {
enableCallbacks.forEach(function (callbackName) {
if (plugin.callbacks.hasOwnProperty(callbackName)) {
plugin.callbacks[callbackName] = _this3[callbackName].bind(_this3);
}
});
return plugin;
});
};
EditorCore.prototype.focusEditor = function focusEditor(ev) {
this.refs.editor.focus(ev);
if (this.props.readOnly) {
this._focusDummy.focus();
}
if (this.props.onFocus) {
this.props.onFocus(ev);
}
};
EditorCore.prototype._focus = function _focus(ev) {
if (!ev || !ev.nativeEvent || !ev.nativeEvent.target) {
return;
}
if (document.activeElement && document.activeElement.getAttribute('contenteditable') === 'true') {
return;
}
return this.focus(ev);
};
EditorCore.prototype.focus = function focus(ev) {
var _this4 = this;
var event = ev && ev.nativeEvent;
if (event && event.target === this._editorWrapper) {
var editorState = this.state.editorState;
var selection = editorState.getSelection();
if (!selection.getHasFocus()) {
if (selection.isCollapsed()) {
return this.setState({
editorState: EditorState.moveSelectionToEnd(editorState)
}, function () {
_this4.focusEditor(ev);
});
}
}
}
this.focusEditor(ev);
};
EditorCore.prototype.getPlugins = function getPlugins() {
return this.state.plugins.slice();
};
EditorCore.prototype.getEventHandler = function getEventHandler() {
var _this5 = this;
var enabledEvents = ['onUpArrow', 'onDownArrow', 'handleReturn', 'onFocus', 'onBlur', 'onTab', 'handlePastedText'];
var eventHandler = {};
enabledEvents.forEach(function (event) {
eventHandler[event] = _this5.generatorEventHandler(event);
});
return eventHandler;
};
EditorCore.prototype.getEditorState = function getEditorState() {
var needFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
if (needFocus) {
this.refs.editor.focus();
}
return this.state.editorState;
};
EditorCore.prototype.setEditorState = function setEditorState(editorState) {
var _this6 = this;
var focusEditor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var triggerChange = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var newEditorState = editorState;
this.getPlugins().forEach(function (plugin) {
if (plugin.onChange) {
var updatedEditorState = plugin.onChange(newEditorState);
if (updatedEditorState) {
newEditorState = updatedEditorState;
}
}
});
if (this.props.onChange && triggerChange) {
this.props.onChange(newEditorState);
// close this issue https://github.com/ant-design/ant-design/issues/5788
// when onChange not take any effect
// `<Editor />` won't rerender cause no props is changed.
// add an timeout here,
// if props.onChange not trigger componentWillReceiveProps,
// we will force render Editor with previous editorState,
if (this.controlledMode) {
this.forceUpdateImmediate = setImmediate(function () {
return _this6.setState({
editorState: new EditorState(_this6.state.editorState.getImmutable())
});
});
}
}
if (!this.controlledMode) {
this.setState({ editorState: newEditorState }, focusEditor ? function () {
return setImmediate(function () {
return _this6.refs.editor.focus();
});
} : noop);
}
};
EditorCore.prototype.handleKeyBinding = function handleKeyBinding(ev) {
if (this.props.onKeyDown) {
ev.ctrlKey = hasCommandModifier(ev);
var keyDownResult = this.props.onKeyDown(ev);
if (keyDownResult) {
return keyDownResult;
}
return getDefaultKeyBinding(ev);
}
return getDefaultKeyBinding(ev);
};
EditorCore.prototype.handleKeyCommand = function handleKeyCommand(command) {
if (this.props.multiLines) {
return this.eventHandle('handleKeyBinding', command);
}
return command === 'split-block' ? 'handled' : 'not-handled';
};
EditorCore.prototype.getBlockStyle = function getBlockStyle(contentBlock) {
var customBlockStyleMap = configStore.get('customBlockStyleMap');
var type = contentBlock.getType();
if (customBlockStyleMap.hasOwnProperty(type)) {
return customBlockStyleMap[type];
}
return '';
};
EditorCore.prototype.blockRendererFn = function blockRendererFn(contentBlock) {
var blockRenderResult = null;
this.getPlugins().forEach(function (plugin) {
if (plugin.blockRendererFn) {
var result = plugin.blockRendererFn(contentBlock);
if (result) {
blockRenderResult = result;
}
}
});
return blockRenderResult;
};
EditorCore.prototype.eventHandle = function eventHandle(eventName) {
var _props2;
var plugins = this.getPlugins();
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key3 = 1; _key3 < _len; _key3++) {
args[_key3 - 1] = arguments[_key3];
}
for (var i = 0; i < plugins.length; i++) {
var plugin = plugins[i];
if (plugin.callbacks[eventName] && typeof plugin.callbacks[eventName] === 'function') {
var _plugin$callbacks;
var result = (_plugin$callbacks = plugin.callbacks)[eventName].apply(_plugin$callbacks, args);
if (result === true) {
return 'handled';
}
}
}
return this.props.hasOwnProperty(eventName) && (_props2 = this.props)[eventName].apply(_props2, args) === true ? 'handled' : 'not-handled';
};
EditorCore.prototype.generatorEventHandler = function generatorEventHandler(eventName) {
var _this7 = this;
return function () {
for (var _len2 = arguments.length, args = Array(_len2), _key4 = 0; _key4 < _len2; _key4++) {
args[_key4] = arguments[_key4];
}
return _this7.eventHandle.apply(_this7, [eventName].concat(args));
};
};
EditorCore.prototype.customStyleFn = function customStyleFn(styleSet) {
if (styleSet.size === 0) {
return {};
}
var plugins = this.getPlugins();
var resultStyle = {};
for (var i = 0; i < plugins.length; i++) {
if (plugins[i].customStyleFn) {
var styled = plugins[i].customStyleFn(styleSet);
if (styled) {
_extends(resultStyle, styled);
}
}
}
return resultStyle;
};
EditorCore.prototype.render = function render() {
var _classnames,
_this8 = this;
var _props3 = this.props,
prefixCls = _props3.prefixCls,
toolbars = _props3.toolbars,
style = _props3.style,
readOnly = _props3.readOnly,
multiLines = _props3.multiLines;
var _state = this.state,
editorState = _state.editorState,
toolbarPlugins = _state.toolbarPlugins;
var customStyleMap = configStore.get('customStyleMap');
var blockRenderMap = configStore.get('blockRenderMap');
var eventHandler = this.getEventHandler();
var Toolbar = toolbar.component;
var cls = classnames((_classnames = {}, _classnames[prefixCls + '-editor'] = true, _classnames.readonly = readOnly, _classnames.oneline = !multiLines, _classnames));
return React.createElement(
'div',
{ style: style, className: cls, onClick: this._focus.bind(this) },
React.createElement(Toolbar, { editorState: editorState, prefixCls: prefixCls, className: prefixCls + '-toolbar', plugins: toolbarPlugins, toolbars: toolbars }),
React.createElement(
'div',
{ className: prefixCls + '-editor-wrapper', ref: function ref(ele) {
return _this8._editorWrapper = ele;
}, style: style, onClick: function onClick(ev) {
return ev.preventDefault();
} },
React.createElement(Editor, _extends({}, this.props, eventHandler, { ref: 'editor', customStyleMap: customStyleMap, customStyleFn: this.customStyleFn.bind(this), editorState: editorState, handleKeyCommand: this.handleKeyCommand.bind(this), keyBindingFn: this.handleKeyBinding.bind(this), onChange: this.setEditorState.bind(this), blockStyleFn: this.getBlockStyle.bind(this), blockRenderMap: blockRenderMap, handlePastedText: this.handlePastedText, blockRendererFn: this.blockRendererFn.bind(this) })),
readOnly ? React.createElement('input', { style: focusDummyStyle, ref: function ref(ele) {
return _this8._focusDummy = ele;
}, onBlur: eventHandler.onBlur }) : null,
this.props.children
)
);
};
return EditorCore;
}(React.Component)