How to use the draft-js.EditorState.forceSelection 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 chaskiq / chaskiq / app / javascript / src / editor / components / editor.js View on Github external
// Setting cursor position after inserting to content
    const s = this.state.editorState.getSelection()
    const c = editorState.getCurrentContent()
    const focusOffset = s.getFocusOffset()
    const anchorKey = s.getAnchorKey()

    let selectionState = SelectionState.createEmpty(s.getAnchorKey())

    // console.log anchorKey, focusOffset
    selectionState = selectionState.merge({
      anchorOffset: focusOffset,
      focusKey: anchorKey,
      focusOffset
    })

    let newState = EditorState.forceSelection(newEditorState, selectionState)

    return this.onChange(newState)
  }
github icelab / draft-js-autolist-plugin / src / index.js View on Github external
handleReturn (e, editorState, { setEditorState }) {
      let content = editorState.getCurrentContent()

      // Retrieve current block
      const selection = editorState.getSelection()
      const blockKey = selection.getStartKey()
      let block = content.getBlockForKey(blockKey)
      const blockType = block.getType()

      // If it’s a list-item and it’s empty, toggle its blockType (which should
      // make it 'unstyled')
      if (/list-item/.test(blockType) && block.getText() === '') {
        editorState = RichUtils.toggleBlockType(editorState, blockType)
        content = editorState.getCurrentContent()
        editorState = EditorState.forceSelection(editorState, content.getSelectionAfter())
        setEditorState(editorState)
        return 'handled'
      }
      return 'not-handled'
    },
github webRunes / WRIO-InternetOS / src / CoreEditor / utils / entitytools.js View on Github external
static constructSocial(editorState, blockKey, blockData, insertEmpty = true) {
    let entityKey;
    if (blockData["@type"] == "ImageObject") {
      entityKey = this.createImageSocialEntity(
        blockData.contentUrl,
        blockData.name,
        blockData.description
      );
    } else {
      entityKey = this.createImageSocialEntity(
        blockData.sharedContent.url,
        blockData.sharedContent.headline,
        blockData.sharedContent.about
      );
    }
    const _editorState = EditorState.forceSelection(
      editorState,
      SelectionState.createEmpty(blockKey)
    ); // We are creating entity in wrong place!!!
    return EntityTools.insertEntityKeyIntoAtomicBlock(
      _editorState,
      entityKey,
      insertEmpty
    );
  }
github draft-js-plugins / draft-js-plugins / draft-js-focus-plugin / src / index.js View on Github external
editorState,
            editorState.getSelection()
          );
        }
      }

      const currentBlockMapKeys = getBlockMapKeys(
        contentState,
        selection.getStartKey(),
        selection.getEndKey()
      );
      if (currentBlockMapKeys.some(key => focusableBlockKeys.includes(key))) {
        lastSelection = selection;
        // By forcing the selection the editor will trigger the blockRendererFn which is
        // necessary for the blockProps containing isFocus to be passed down again.
        return EditorState.forceSelection(
          editorState,
          editorState.getSelection()
        );
      }

      return editorState;
    },
github michelson / dante2 / src / editor / components / blocks / image.js View on Github external
updateDataSelection = ()=> {
    const { getEditorState, setEditorState } = this.props.blockProps
    const newselection = getEditorState().getSelection().merge({
      anchorKey: this.props.block.getKey(),
      focusKey: this.props.block.getKey()
    })

    return setEditorState(EditorState.forceSelection(getEditorState(), newselection))
  }
github microsoft / workbooks / Clients / Xamarin.Interactive.Client.Web / ClientApp / components / WorkbookEditor.tsx View on Github external
setSelection(anchorKey: string, offset: number) {
        offset = offset | 0
        const selection = SelectionState.createEmpty(anchorKey)
            .set("anchorOffset", 0)

        this.onChange(EditorState.forceSelection(this.state.editorState, selection as SelectionState))
    }
github draft-js-plugins / draft-js-plugins / draft-js-plugins-editor / src / modifiers / moveToStartOfSelectedBlock.js View on Github external
const moveToEndOfSelectedBlock = (editorState, onChange) => {
  if (onChange === undefined) return;
  const selection = editorState.getSelection();
  if (selection.getAnchorOffset() !== 0 || selection.getFocusOffset() !== 0) {
    const newSelection = selection.merge({
      anchorOffset: 0,
      focusOffset: 0,
    });
    const newEditorState = EditorState.forceSelection(editorState, newSelection);
    onChange(newEditorState);
  }
};
github draft-js-plugins / draft-js-plugins / draft-js-plugins-utils / src / index.js View on Github external
createLinkAtSelection(editorState: EditorState, url: string): EditorState {
    const contentState = editorState
      .getCurrentContent()
      .createEntity('LINK', 'MUTABLE', { url });
    const entityKey = contentState.getLastCreatedEntityKey();
    const withLink = RichUtils.toggleLink(
      editorState,
      editorState.getSelection(),
      entityKey
    );
    return EditorState.forceSelection(withLink, editorState.getSelection());
  },
github niuware / mui-rte / src / MUIRichTextEditor.tsx View on Github external
const data = {
            url: url,
            width: width,
            height: height,
            alignment: alignment,
            type: type
        }

        if (urlKey) {
            contentState.replaceEntityData(urlKey, data)
            const newEditorState = EditorState.push(editorState, contentState, "apply-entity")
            updateStateForPopover(EditorState.forceSelection(newEditorState, newEditorState.getCurrentContent().getSelectionAfter()))
        }
        else {
            const newEditorState = insertAtomicBlock("IMAGE", data)
            updateStateForPopover(EditorState.forceSelection(newEditorState, newEditorState.getCurrentContent().getSelectionAfter()))
        }
        setFocusMediaKey("")
    }
github draft-js-plugins / draft-js-plugins / legacy / draft-js-entity-props-plugin / src / index.js View on Github external
const setEntityDataFn = (contentBlock, { getEditorState, setEditorState }) => (data) => {
  const entityKey = contentBlock.getEntityAt(0);
  if (entityKey) {
    const editorState = getEditorState();
    const contentState = editorState.getCurrentContent();
    contentState.mergeEntityData(entityKey, { ...data });
    setEditorState(EditorState.forceSelection(editorState, editorState.getSelection()));
  }
};