TypeScript draft-js.EditorState类代码示例

  return function toggleBlockStyle(styleName: string) {
    const { getEditorState, setEditorState } = callbacks;
    const editorState = getEditorState();
    const currentBlock = getSelectedBlock(editorState);
    const blockTypedContent = Modifier.setBlockType(
      editorState.getCurrentContent(),
      editorState.getSelection(),
      styleName
    );

    setEditorState(
      EditorState.push(editorState, blockTypedContent, 'apply-block-type')
    );

  }

    onSelect(query: string, text: string) {
        const selection = this.core.getSelection();
        const offset = selection.getAnchorOffset() - 1;
        const content = this.core.getCurrentContent();
        const block_text = content.getBlockForKey(selection.getAnchorKey()).getText();
        const idx = block_text.lastIndexOf(query, offset);

        if (idx === -1 || (idx + query.length < offset)) {
            log.error('Invalid selection:', selection);
            return this;
        }

        const next_selection = selection.merge({
            anchorOffset: idx,
            focusOffset: idx + query.length,
        }) as SelectionState;
        const next_content = Modifier.replaceText(content, next_selection, text);
        const next_editor = EditorState.forceSelection(
            EditorState.push(
                this.core,
                next_content,
                'insert-characters'
            ),
            next_content.getSelectionAfter()
        );

        return new TweetEditorState(
            next_editor,
            this.is_open,
            this.keymaps,
            this.in_reply_to_status
        );
    }

export const getSelectionDetails = (editorState: EditorState) => {
  // Returns some commonly used selection attrs
  const selection = editorState.getSelection()
  const content = editorState.getCurrentContent()

  const anchorKey = selection.getAnchorKey()
  const anchorOffset = selection.getAnchorOffset()
  const anchorBlock = content.getBlockForKey(anchorKey)
  const anchorType = anchorBlock.getType()

  const beforeKey = content.getKeyBefore(anchorKey)
  const blockBefore = content.getBlockForKey(beforeKey)

  const isFirstBlock = !blockBefore
  const isFirstCharacter = selection.getStartOffset() === 0
  const isLastBlock = content.getLastBlock().getKey() === anchorKey
  const isLastCharacter = selection.getStartOffset() === anchorBlock.getLength()

  return {
    anchorKey,
    anchorOffset,
    anchorType,
    isFirstBlock,
    isFirstCharacter,
    isLastBlock,
    isLastCharacter,
  }
}

export function removeHighlight(editorState, styleName) {
    const highlightsState = getHighlightsState(editorState);

    if (highlightsState.highlightsData[styleName] === undefined) {
        return editorState;
    }

    const nextHighlightsStyleMap = {...highlightsState.highlightsStyleMap};

    delete nextHighlightsStyleMap[styleName];

    const nextHighlightsData = {...highlightsState.highlightsData};

    delete nextHighlightsData[styleName];

    const newHighlightsState = {
        lastHighlightIds: highlightsState.lastHighlightIds,
        highlightsStyleMap: nextHighlightsStyleMap,
        highlightsData: nextHighlightsData,
    };

    let newEditorState = clearInlineStyles(
        editorState,
        getDraftSelectionForEntireContent(editorState),
        [styleName],
    );

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

    return newEditorState;
}

export function changeEditorSelection(editorState, startOffset, endOffset, force) {
    const selection = editorState.getSelection();
    const {block: startBlock, newOffset: newStartOffset} = getBlockAndOffset(
        editorState, selection, startOffset, false);
    const {block: endBlock, newOffset: newEndOffset} = getBlockAndOffset(
        editorState, selection, endOffset, true);

    if (startBlock == null || endBlock == null) {
        return editorState;
    }

    const newSelection = selection.merge({
        anchorOffset: newStartOffset,
        anchorKey: startBlock.getKey(),
        focusOffset: newEndOffset,
        focusKey: endBlock.getKey(),
        isBackward: false,
    });

    if (force) {
        return EditorState.forceSelection(editorState, newSelection);
    }

    return EditorState.acceptSelection(editorState, newSelection);
}

export const removeBlocks = (editorState: EditorState) => {
  return Modifier.setBlockType(
    editorState.getCurrentContent(),
    editorState.getSelection(),
    "unstyled"
  )
}

 setTextToEditor(text: string) {
     return EditorState.moveSelectionToEnd(
         EditorState.push(
             this.core,
             ContentState.createFromText(text),
             'insert-characters'
         )
     );
 }

 (start, end) => {
     editorState = EditorState.acceptSelection(editorState, selection.merge({
         isBackward: false,
         anchorOffset: start,
         focusOffset: end,
     }));
     editorState = addHighlight(editorState, type, data, single);
     editorState = EditorState.push(editorState, editorState.getCurrentContent(), 'change-block-data');
     editorState = EditorState.acceptSelection(editorState, selection);
 });

export function initEditorState(trystup='') {
  const {contentState} = renderDraftJS(trystup.trim())
  const specs = [
    {  strategy: findLinkEntities,  component: Link  }, 
    {  strategy: findFieldEntities, component: Field } 
  ]
  const decorators = new CompositeDecorator(specs)
  let editorState = EditorState.createWithContent(contentState, decorators)
  editorState = EditorState.moveSelectionToEnd(editorState) 
  return editorState
}

export function modifyInlineStyle(
  editor: EditorState, selection: SelectionState, {apply, remove}: {apply?: string, remove?: string}
) {
  let content = editor.getCurrentContent()
  if (remove) {
    content = Modifier.removeInlineStyle(content, selection, remove)
  }
  if (apply) {
    content = Modifier.applyInlineStyle(content, selection, apply)
  }

  return EditorState.push(editor, content, 'change-inline-style')
}

export const insertPastedState = (
  pastedState: EditorState,
  editorState: EditorState
) => {
  const blockMap = pastedState.getCurrentContent().getBlockMap()

  // Merge blockMap from pasted text into existing content
  const modifiedContent = Modifier.replaceWithFragment(
    editorState.getCurrentContent(),
    editorState.getSelection(),
    blockMap
  )
  // Create a new editorState from merged content
  return EditorState.push(editorState, modifiedContent, "insert-fragment")
}

export default function getCurrentEntity(editorState: EditorState) {
  let entity;
  const selection = editorState.getSelection();
  let start = selection.getStartOffset();
  let end = selection.getEndOffset();
  if (start === end && start === 0) {
    end = -1;
  } else if (start === end) {
    start = start - 1;
  }
  const block = getSelectedBlock(editorState);
  for (let i = start; i < end; i++) {
    const currentEntity = block.getEntityAt(i);
    if (!currentEntity) {
      entity = undefined;
      break;
    }
    if (i === start) {
      entity = currentEntity;
    } else {
      if (entity !== currentEntity) {
        entity = undefined;
        break;
      }
    }
  }
  return entity;
}

  .when(createComment, (state: DocumentState, {text}) => {
    const selection = flipIfBackwards(state.editor.getSelection())
    const id = state.comments.length
    const entityKey = Entity.create('Comment', 'MUTABLE', {id})
    let content = state.editor.getCurrentContent()
    if (selection.getAnchorKey() === selection.getFocusKey()) {
      const start = selection.getAnchorOffset()
      const end = selection.getFocusOffset()
      let block = content.getBlockForKey(selection.getAnchorKey())
      let chars = block.getCharacterList()

      for (let i = start; i < end; i++) {
        let metadata = chars.get(i)
        metadata = CharacterMetadata.applyEntity(metadata, entityKey)
        metadata = CharacterMetadata.applyStyle(metadata, 'comment')
        chars = chars.set(i, metadata)
      }

      block = block.set('characterList', chars)
      content = content.set('blockMap', content.getBlockMap().set(block.getKey(), block))
    }

    const comment = {id, entityKey, selection, text}

    return Object.assign({}, state, {
      editor: EditorState.push(state.editor, content, 'apply-entity'),
      creatingComment: null,
      comments: [...state.comments, comment],
    })
  })

export default function getCurrentInlineStyle(editorState: EditorState) {
  if (editorState === inlineStyleCache.editorState) {
    return inlineStyleCache.value;
  }
  inlineStyleCache.editorState = editorState;
  inlineStyleCache.value = editorState.getCurrentInlineStyle();
  return inlineStyleCache.value;
}

export function addEditorStateToObject(shape: PubShape) {
  const contentState = stateFromHTML(shape.text, {
    customInlineFn: importTextStyle,
  });
  shape.editorState = EditorState.createWithContent(contentState);
  shape.isEditing = false;
  return shape;
}