How to use the draft-js.EditorState.push function in draft-js

To help you get started, we’ve selected a few draft-js examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github artsy / positron / src / client / components / draft / paragraph / utils / utils.js View on Github external
export const insertPastedState = (pastedState, editorState) => {
  /**
   * Merges a state created from pasted text into editorState
   */
  const blockMap = pastedState.getCurrentContent().blockMap

  // 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'
  )
}
github mozilla / hubs / src / react-components / tweet-dialog.js View on Github external
// deciding on the position to insert emoji
  const targetSelection = afterRemovalContentState.getSelectionAfter();

  emojiAddedContent = Modifier.insertText(afterRemovalContentState, targetSelection, emoji, null, entityKey);

  emojiEndPos = targetSelection.getAnchorOffset();
  const blockKey = targetSelection.getAnchorKey();
  blockSize = contentState.getBlockForKey(blockKey).getLength();

  // If the emoji is inserted at the end, a space is appended right after for
  // a smooth writing experience.
  if (emojiEndPos === blockSize) {
    emojiAddedContent = Modifier.insertText(emojiAddedContent, emojiAddedContent.getSelectionAfter(), " ");
  }

  const newEditorState = EditorState.push(editorState, emojiAddedContent, "insert-emoji");
  return EditorState.forceSelection(newEditorState, emojiAddedContent.getSelectionAfter());
};
github strues / boldr / packages / editor / src / components / Controls / Link / Link.js View on Github external
let newEditorState = EditorState.push(editorState, contentState, 'insert-characters');

    // insert a blank space after link
    selection = newEditorState.getSelection().merge({
      anchorOffset: selection.get('anchorOffset') + linkTitle.length,
      focusOffset: selection.get('anchorOffset') + linkTitle.length,
    });
    newEditorState = EditorState.acceptSelection(newEditorState, selection);
    contentState = Modifier.insertText(
      newEditorState.getCurrentContent(),
      selection,
      ' ',
      newEditorState.getCurrentInlineStyle(),
      undefined,
    );
    onChange(EditorState.push(newEditorState, contentState, 'insert-characters'));
    this.doCollapse();
  };
  props: Props;
github strapi / strapi / packages / strapi-plugin-content-manager / admin / src / components / Wysiwyg / utils.js View on Github external
if (selection.isCollapsed()) {
    newContentState = Modifier.insertText(
      contentState,
      selection,
      DEFAULT_INDENTATION,
    );
  } else {
    newContentState = Modifier.replaceText(
      contentState,
      selection,
      DEFAULT_INDENTATION,
    );
  }

  return EditorState.push(
    editorState,
    newContentState,
    'insert-characters'
  );
}
github draft-js-plugins / next / examples / emoji-example / src / index.js View on Github external
insertEmoji = (emoji, searchText) => {
    const { editorState } = this.state
    const selection = editorState.getSelection()

    this.setState({
      editorState: EditorState.push(
        editorState,
        Modifier.replaceText(
          editorState.getCurrentContent(),
          selection.merge({
            anchorOffset: selection.getAnchorOffset() - searchText.length,
          }),
          emoji.char
        )
      ),
    })
  }
github michelson / dante2 / src / components / core / editor.js View on Github external
handleTXTPaste(text, html) {
    const currentBlock = getCurrentBlock(this.state.editorState)

    let { editorState } = this.state

    switch (currentBlock.getType()) {
      case "image":case "video":case "placeholder":
        const newContent = Modifier.replaceText(editorState.getCurrentContent(), new SelectionState({
          anchorKey: currentBlock.getKey(),
          anchorOffset: 0,
          focusKey: currentBlock.getKey(),
          focusOffset: 2
        }), text)

        editorState = EditorState.push(editorState, newContent, 'replace-text')

        this.onChange(editorState)

        return true
      default:
        return false
    }
  }
github metrue / YoYo / client / src / index.jsx View on Github external
reset() {
    const editorState = EditorState.push(this.state.editorState, ContentState.createFromText(''))
    this.setState({ editorState, publishing: false })
  }
github getguesstimate / guesstimate-app / src / components / distributions / editor / TextForm / TextInput.js View on Github external
addText(text, maintainCursorPosition = true, replaceLength = 0) {
    const selection = this.state.editorState.getSelection()
    const content = this.state.editorState.getCurrentContent()

    let baseEditorState
    if (replaceLength > 0) {
      const replaceSelection = selection.merge({anchorOffset: this.cursorPosition(), focusOffset: this.cursorPosition() + replaceLength})
      baseEditorState = EditorState.push(this.state.editorState, Modifier.replaceText(content, replaceSelection, text), 'paste')
    } else {
      baseEditorState = EditorState.push(this.state.editorState, Modifier.insertText(content, selection, text), 'paste')
    }

    if (!maintainCursorPosition) { return baseEditorState }

    const cursorPosition = selection.getFocusOffset()
    const newSelectionState = selection.merge({focusOffset: cursorPosition})
    return EditorState.forceSelection(baseEditorState, newSelectionState)
  }
github ld-x / last-draft / src / utils / insertDataBlock.js View on Github external
]

  const fragment = BlockMapBuilder.createFromArray(fragmentArray)

  const withAtomicBlock = Modifier.replaceWithFragment(
    asAtomicBlock,
    insertionTarget,
    fragment
  )

  const newContent = withAtomicBlock.merge({
    selectionBefore: selectionState,
    selectionAfter: withAtomicBlock.getSelectionAfter().set('hasFocus', true)
  })

  return EditorState.push(editorState, newContent, 'insert-fragment')
}