How to use the draft-js.Modifier.insertText 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 draft-js-plugins / draft-js-plugins / draft-js-emoji-plugin / src / modifiers / addEmoji.js View on Github external
let emojiEndPos = 0;
  let blockSize = 0;

  switch (mode) {
    case Mode.INSERT: {
      // in case text is selected it is removed and then the emoji is added
      const afterRemovalContentState = Modifier.removeRange(
        contentState,
        currentSelectionState,
        'backward'
      );

      // 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();

      break;
    }

    case Mode.REPLACE: {
      const { begin, end } = getSearchText(editorState, currentSelectionState);
github NDLANO / learningpath-frontend / src / components / editors / TagsEditor.js View on Github external
this.handleReturn = () => {
      const state = this.state.editorState;
      const content = state.getCurrentContent();
      const block = content.getBlocksAsArray()[0];
      const cursorPosition = state.getSelection().getEndOffset();

      // insert space after current tag
      let targetRange = this.newSelection(cursorPosition, cursorPosition, block.getKey());
      let newContentState = Modifier.insertText(content, targetRange, ' ');

      // create a new entity and apply it to the tag
      let startPos = cursorPosition == 0 ? 0 : this.findClosestTag(cursorPosition).end + 1;
      newContentState = this.applyTag(startPos, cursorPosition, newContentState);
      let newState = EditorState.push(state, newContentState, state.lastChangeType);

      // update the current state
      newState = EditorState.moveFocusToEnd(newState);
      this.onChange(newState);
      this.updateTags(newContentState);

      return true;
    };
github michelson / dante2 / src / editor / components / core / editor.js View on Github external
// close popovers
    if (currentBlock.getText().length !== 0) {
      //@closeInlineButton()
      this.closePopOvers()
    }

    // handle space on link
    const endOffset = selection.getEndOffset()
    const endKey = currentBlock.getEntityAt(endOffset - 1)
    const endEntityType = endKey && Entity.get(endKey).getType()
    const afterEndKey = currentBlock.getEntityAt(endOffset)
    const afterEndEntityType = afterEndKey && Entity.get(afterEndKey).getType()

    // will insert blank space when link found
    if (chars === ' ' && endEntityType === 'LINK' && afterEndEntityType !== 'LINK') {
      const newContentState = Modifier.insertText(editorState.getCurrentContent(), selection, ' ')
      const newEditorState = EditorState.push(editorState, newContentState, 'insert-characters')
      this.onChange(newEditorState)
      return true
    }

    // block transform
    if (blockType.indexOf('atomic') === 0) {
      return false
    }

    const blockLength = currentBlock.getLength()
    if (selection.getAnchorOffset() > 1 || blockLength > 1) {
      return false
    }

    const blockTo = this.props.character_convert_mapping[currentBlock.getText() + chars]
github draft-js-plugins / draft-js-plugins / draft-js-undo-plugin / src / UndoButton / __test__ / index.js View on Github external
it('removes disabled attribute from button if the getUndoStack is not empty', () => {
    const contentState = editorState.getCurrentContent();
    const SelectionState = editorState.getSelection();
    const newContent = Modifier.insertText(
      contentState,
      SelectionState,
      'hello'
    );
    const newEditorState = EditorState.push(
      editorState,
      newContent,
      'insert-text'
    );
    store = {
      getEditorState: () => newEditorState,
      setEditorState: onChange,
    };
    const result = shallow();
    expect(result.find('button'))
      .prop('disabled')
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 Khan / perseus / src / draft-utils.js View on Github external
const _surroundWithText = (contentState, block, left, right, text) => {
    let area = _createEmptySelection(block);
    let content = contentState;

    area = area.merge({anchorOffset: right, focusOffset: right});
    content = Modifier.insertText(content, area, text);

    area = area.merge({anchorOffset: left, focusOffset: left});
    content = Modifier.insertText(content, area, text);

    return content;
};
github Simon-Initiative / authoring-client / src / data / content / learning / contiguous.ts View on Github external
function appendText(contentBlock, contentState, text) {

  const targetRange = new SelectionState({
    anchorKey: contentBlock.key,
    focusKey: contentBlock.key,
    anchorOffset: contentBlock.text.length,
    focusOffset: contentBlock.text.length,
  });

  return Modifier.insertText(
    contentState,
    targetRange,
    text);
}