superdesk/superdesk-client-core

View on GitHub
scripts/core/editor3/helpers/inlineStyles.ts

Summary

Maintainability
A
1 hr
Test Coverage
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;
}