@figlinq/react-chart-editor/lib/components/widgets/text_editors/RichText/DraftCommands.js

plotly.js chart editor react component UI

import{EditorState,Entity,RichUtils,SelectionState}from"draft-js";import{removeRange}from"draft-js/lib/DraftModifier";import{BOLD,ITALIC,SUPERSCRIPT,SUBSCRIPT,LINK}from"./configuration";function selectionHasLink(editorState,selection){if(selection.isCollapsed()){return false}return cursorHasLink(editorState,selection)}export function cursorHasLink(editorState,selection){const entity=getEntityByKey(getEntityKeyAt(editorState,selection));return Boolean(entity&&entity.get("type")===LINK)}export function getEntityByKey(entityKey){if(!entityKey){return null}return Entity.get(entityKey)}export function getEntityKeyAt(editorState,selection){if(!selection){return null}const blockStartKey=selection.getStartKey();const selectionOffset=selection.getStartOffset();const contentState=editorState.getCurrentContent();const block=contentState.getBlockForKey(blockStartKey);return block.getEntityAt(selectionOffset)}export function handleKeyCommand(editorState,command){switch(command){case"split-block":return insertSoftNewline(editorState);case"bold":return toggleInlineStyle(editorState,BOLD);case"italic":return toggleInlineStyle(editorState,ITALIC);default:return false}}export function insertSoftNewline(editorState){let newEditorState=editorState;const currentStyleSet=newEditorState.getCurrentInlineStyle();newEditorState=currentStyleSet.reduce((reducedEditorState,style)=>RichUtils.toggleInlineStyle(reducedEditorState,style),newEditorState);const selectionState=newEditorState.getSelection();const selectionStart=selectionState.getStartOffset();const selectionEnd=selectionState.getEndOffset();if(selectionEnd-selectionStart!==0){const contentState=removeRange(newEditorState.getCurrentContent(),selectionState,"back");newEditorState=EditorState.push(newEditorState,contentState,"backspace-character")}return RichUtils.insertSoftNewline(newEditorState)}export function toggleInlineStyle(editorState,inlineStyle){if(inlineStyle===LINK){return toggleLink(editorState)}const updatedEditorState=toggleMutuallyExclusiveStyles(editorState,inlineStyle);return RichUtils.toggleInlineStyle(updatedEditorState,inlineStyle)}export function toggleLink(editorState){const selection=editorState.getSelection();if(selectionHasLink(editorState,selection)){return RichUtils.toggleLink(editorState,selection,null)}const entityKey=Entity.create(LINK,"MUTABLE",{url:""});return RichUtils.toggleLink(editorState,selection,entityKey)}export function toggleMutuallyExclusiveStyles(editorState,inlineStyle){const currentStyleSet=editorState.getCurrentInlineStyle();if(inlineStyle===SUBSCRIPT&&currentStyleSet.includes(SUPERSCRIPT)){return RichUtils.toggleInlineStyle(editorState,SUPERSCRIPT)}if(inlineStyle===SUPERSCRIPT&&currentStyleSet.includes(SUBSCRIPT)){return RichUtils.toggleInlineStyle(editorState,SUBSCRIPT)}return editorState}
//# sourceMappingURL=DraftCommands.js.map