TypeScript draft-js.RichUtils類代碼示例

 return function toggleStyle(styleName: string) {
   const {getEditorState, setEditorState} = callbacks;
   const editorState = getEditorState();
   const selection = editorState.getSelection();
   setEditorState(RichUtils.toggleInlineStyle(
     getEditorState(),
     styleName
   ));
 }

export function resetHighlightForCurrentSelection(editorState, style) {
    const type = getHighlightType(style);
    const selection = editorState.getSelection();
    const content = editorState.getCurrentContent();
    const block = content.getBlockForKey(selection.getStartKey());
    const offset = selection.getStartOffset() === block.getLength() - 1 ? 1 : 0;
    const styleBefore = getHighlightStyleAtOffset(editorState, [type], selection, -1);
    const styleAfter = getHighlightStyleAtOffset(editorState, [type], selection, offset, true);

    if (styleBefore !== style && styleAfter !== style) {
        return removeHighlight(editorState, style);
    }

    return RichUtils.toggleInlineStyle(editorState, style);
}

export const removeLinks = (editorState: EditorState) => {
  return RichUtils.toggleLink(editorState, editorState.getSelection(), null)
}

export function addHighlight(editorState, type, data, single = false) {
    let nextEditorState = editorState;

    const initialSelection = nextEditorState.getSelection().merge({
        hasFocus: true,
    });

    const highlightsState = getHighlightsState(nextEditorState);

    if (highlightTypeValid(type) !== true) {
        throw new Error('Highlight type invalid');
    }

    if (single && selectionHasType(editorState, type)) {
        return editorState;
    }

    let newIndex = 0;

    if (highlightsState.lastHighlightIds && has(highlightsState.lastHighlightIds, type)) {
        newIndex = highlightsState.lastHighlightIds[type] + 1;
    }
    const styleName = type + '-' + newIndex;

    const newHighlightsState = {
        lastHighlightIds: {
            ...highlightsState.lastHighlightIds,
            [type]: newIndex,
        },
        highlightsStyleMap: {
            ...highlightsState.highlightsStyleMap,
            [styleName]: availableHighlights[type],
        },
        highlightsData: {
            ...highlightsState.highlightsData,
            [styleName]: {
                ...data,
                type,
            },
        },
    };

    nextEditorState = RichUtils.toggleInlineStyle(nextEditorState, styleName);

    // prevent recording the changes to undo stack so user doesn't have to undo twice
    // for the highlight to be completelly(both inline styles and related data) undone
    nextEditorState = EditorState.set(nextEditorState, {allowUndo: false});

    nextEditorState = setHighlightsState(nextEditorState, newHighlightsState);

    // make sure the cursor is at the right position after undo
    // it used to always end up at the position 0 of the first block
    // when undoing after changing block data with `allowUndo` set to false
    nextEditorState = EditorState.push(
        nextEditorState,
        nextEditorState.getCurrentContent().set('selectionBefore', initialSelection),
        'change-block-data',
    );

    // restore focus lost after clicking a toolbar action or entering highlight data OR pushing editorState
    // so the selection is visible after undo
    nextEditorState = EditorState.acceptSelection(
        nextEditorState,
        initialSelection,
    );

    nextEditorState = EditorState.set(nextEditorState, {allowUndo: true});

    return nextEditorState;
}