How to use the draft-js.EditorState.set 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 researchspace / researchspace / researchspace / web / src / main / components / annotations / AnnotationTextEditorComponent.ts View on Github external
}
    const selection = editorState.getSelection();
    const contentState = editorState.getCurrentContent();
    const cursorKey = selection.getAnchorKey();
    const cursorOffset = selection.getAnchorOffset();
    const entityKey = contentState.getBlockForKey(cursorKey).getEntityAt(cursorOffset);

    let newEditorState;
    if (selection.isCollapsed() && entityKey !== null) {
      // we update href only if no selection and cursor in link
      Entity.mergeData(entityKey, {url: urlValue});
      newEditorState = editorState;
    } else {
      const newEntityKey = Entity.create('LINK', 'MUTABLE', {url: urlValue});
      const contentStateWithEntity = Modifier.applyEntity(contentState, selection, newEntityKey);
      newEditorState = EditorState.set(editorState, {currentContent: contentStateWithEntity});
    }

    this.onChange(newEditorState);
    this.hideLinkEditor();
  }
github imshengli / rich-editor / src / tools / toggle-link.js View on Github external
const linkInfo = this.state.dialog || {};
    const { text, href } = linkInfo;
    const selectionState = editorState.getSelection();
    const currentContent = editorState.getCurrentContent();
    if (!selectionState.isCollapsed()) {
        // Has selected text
        const startKey = selectionState.getStartKey();
        const startOffset = selectionState.getStartOffset();
        const blockWithLinkAtBeginning = currentContent.getBlockForKey(startKey);
        const linkKey = blockWithLinkAtBeginning.getEntityAt(startOffset);

        const contentStateWithEntity = currentContent.createEntity('LINK', 'MUTABLE', {                 url: dialogInfo.href,
            text: dialogInfo.text
        });
        const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
        const newEditorState = EditorState.set(editorState, { currentContent: contentStateWithEntity });
        this.setState({
            editorState: RichUtils.toggleLink(newEditorState, newEditorState.getSelection(),entityKey)
        }, () => {
            this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle));
            setTimeout(() => {
                this.refs.richEditor.focus();
            }, 10);
        });
        return true;
    } else {
        const contentStateBlankEntity = Entity.create('LINK', 'MUTABLE', {
            url: dialogInfo.href,
            text: dialogInfo.text
        });
        const textWithEntity = Modifier.insertText(currentContent, selectionState, dialogInfo.text, null, contentStateBlankEntity);
        this.setState({
github LessWrong2 / Lesswrong2 / packages / lesswrong / components / async / editor-plugins / linkifyPlugin.js View on Github external
export function editorStateSettingLink(editorState, selection, data) {
  const contentState = editorState.getCurrentContent();
  const entityKey = getCurrentLinkEntityKey(editorState);

  let nextEditorState

  if (!entityKey) {
    const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', data);
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
    nextEditorState = EditorState.set(editorState, { currentContent: contentStateWithEntity });
    nextEditorState = RichUtils.toggleLink(nextEditorState, selection, entityKey);
  } else {
    nextEditorState = EditorState.set(editorState, {
      currentContent: editorState.getCurrentContent().replaceEntityData(entityKey, data),
    });
    // this is a hack that forces the editor to update
    // https://github.com/facebook/draft-js/issues/1047
    nextEditorState = EditorState.forceSelection(nextEditorState, editorState.getSelection());
  }

  return nextEditorState;
}
github meriadec / overdraft / src / Overdraft.js View on Github external
applyLink = href => {
    let { editorState } = this.state
    const contentState = editorState.getCurrentContent()
    const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', { href })
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey()
    editorState = EditorState.set(editorState, { currentContent: contentStateWithEntity })
    this.edit(RichUtils.toggleLink(editorState, editorState.getSelection(), entityKey))
  }
github getguesstimate / guesstimate-app / src / components / distributions / editor / TextForm / TextInput.js View on Github external
withExtraDecorators(editorState, extraDecorators) {
    return EditorState.set(editorState, {decorator: new CompositeDecorator(this.decoratorList(extraDecorators))})
  }
  updateDecorators() { this.setState({editorState: this.withExtraDecorators(this.state.editorState)}) }
github jpuri / react-draft-wysiwyg / js / src / components / Editor / index.js View on Github external
createEditorState = (compositeDecorator) => {
    let editorState;
    if (hasProperty(this.props, 'editorState')) {
      if (this.props.editorState) {
        editorState = EditorState.set(this.props.editorState, { decorator: compositeDecorator });
      }
    } else if (hasProperty(this.props, 'defaultEditorState')) {
      if (this.props.defaultEditorState) {
        editorState = EditorState.set(
          this.props.defaultEditorState,
          { decorator: compositeDecorator },
        );
      }
    } else if (hasProperty(this.props, 'contentState')) {
      if (this.props.contentState) {
        const contentState = convertFromRaw(this.props.contentState);
        editorState = EditorState.createWithContent(contentState, compositeDecorator);
        editorState = EditorState.moveSelectionToEnd(editorState);
      }
    } else if (hasProperty(this.props, 'defaultContentState')
      || hasProperty(this.props, 'initialContentState')) {
      let contentState = this.props.defaultContentState || this.props.initialContentState;
      if (contentState) {
        contentState = convertFromRaw(contentState);
        editorState = EditorState.createWithContent(contentState, compositeDecorator);
github draft-js-plugins / draft-js-plugins / draft-js-plugins-editor / src / Editor / index.js View on Github external
UNSAFE_componentWillMount() {
    const decorator = resolveDecorators(
      this.props,
      this.getEditorState,
      this.onChange
    );

    const editorState = EditorState.set(this.props.editorState, { decorator });
    this.onChange(moveSelectionToEnd(editorState));
  }
github facebook / draft-js / examples / draft-0-10-0 / tex / js / modifiers / insertTeXBlock.js View on Github external
export function insertTeXBlock(editorState) {
  const contentState = editorState.getCurrentContent();
  const nextFormula = count++ % examples.length;
  const contentStateWithEntity = contentState.createEntity(
    'TOKEN',
    'IMMUTABLE',
    {content: examples[nextFormula]},
  );
  const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
  const newEditorState = EditorState.set(
    editorState,
    {currentContent: contentStateWithEntity},
  );
  return AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' ');
}
github Simon-Initiative / authoring-client / src / editors / content / common / draft / commands / insert.ts View on Github external
execute(editorState: EditorState, context, services): Promise {

    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity(
      this.type,
      'IMMUTABLE',
      this.data);

    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
    const newEditorState = EditorState.set(
      editorState,
      { currentContent: contentStateWithEntity },
    );

    return Promise.resolve(AtomicBlockUtils.insertAtomicBlock(
      newEditorState,
      entityKey,
      ' '));
  }
}
github thibaudcolas / draftjs-filters / src / lib / normalize.js View on Github external
export const resetBlockType = (
  editorState: EditorState,
  enabledTypes: Array,
) => {
  const content = editorState.getCurrentContent()
  const blockMap = content.getBlockMap()

  const changedBlocks = blockMap
    .filter((block) => !enabledTypes.includes(block.getType()))
    .map((block) => block.set("type", UNSTYLED))

  if (changedBlocks.size !== 0) {
    return EditorState.set(editorState, {
      currentContent: content.merge({
        blockMap: blockMap.merge(changedBlocks),
      }),
    })
  }

  return editorState
}