scripts/core/editor3/helpers/inlineStyles.ts
import {EditorState, SelectionState, Modifier} from 'draft-js';
/**
* @type {Object}
* @description Maps server 'editorFormat' options to Draft inline styles.
*/
export const inlineStyles = {
bold: 'BOLD',
italic: 'ITALIC',
underline: 'UNDERLINE',
subscript: 'SUBSCRIPT',
superscript: 'SUPERSCRIPT',
strikethrough: 'STRIKETHROUGH',
};
export const acceptedInlineStyles = Object.values(inlineStyles);
/**
* Sanitize given content state on paste
*
* @param {ContentState} content
* @param {Array} inlineStyles
* @returns {ContentState}
*/
export function sanitizeContent(editorState, styles = acceptedInlineStyles) {
let contentState = editorState.getCurrentContent();
const ignoreStyle = (style) => styles.indexOf(style) === -1;
const getSelection = (block, start, end) => SelectionState.createEmpty(block.getKey()).merge({
anchorOffset: start,
focusOffset: end,
});
let nextEditorState = editorState;
contentState.getBlockMap().forEach((block) => {
// remove extra styles
block.findStyleRanges(
(character) => character.getStyle().some(ignoreStyle),
(start, end) => {
const selection = getSelection(block, start, end);
const inlineStyle = block.getInlineStyleAt(start).find(ignoreStyle);
contentState = Modifier.removeInlineStyle(contentState, selection as SelectionState, inlineStyle);
},
);
});
nextEditorState = EditorState.push(
nextEditorState,
contentState,
'change-inline-style',
);
nextEditorState = EditorState.push(
nextEditorState,
contentState,
'apply-entity',
);
return nextEditorState;
}