How to use the draft-js.RichUtils.toggleLink 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-air-toolbar-plugin / legacy-src / actions / custom.js View on Github external
toggle: (block, action, editorState, setEditorState) => {
      const selection = editorState.getSelection();
      if (selection.isCollapsed()) {
        return;
      }

      if (action.active(block, editorState)) {
        setEditorState(RichUtils.toggleLink(editorState, selection, null));
      } else {
        const href = window.prompt('Enter a URL'); // eslint-disable-line no-alert
        const entityKey = Entity.create('link', 'MUTABLE', { href });
        setEditorState(RichUtils.toggleLink(editorState, selection, entityKey));
      }
    },
  },
github medialab / website / admin / src / components / entities / link.js View on Github external
);
      entityKey = this.props.entityKey;
    }
    else {
      contentWithEntity = content.createEntity(
        entityType.type,
        'MUTABLE',
        option
      );
      entityKey = contentWithEntity.getLastCreatedEntityKey();
    }
    const newEditorState = EditorState.set(
      editorState,
      {currentContent: contentWithEntity}
    );
    const nextState = RichUtils.toggleLink(
      newEditorState,
      newEditorState.getSelection(),
      entityKey
    );
    // Avoid a redundant bug with Draftjs and Firefox.
    if (this.input) {
      this.input.blur();
    }
    return onComplete(nextState);
  };
github Foundry376 / Mailspring / app / internal_packages / composer / lib / linkify-plugin.jsx View on Github external
export function editorStateSettingLink(editorState, selection, data) {
  const contentState = editorState.getCurrentContent();
  const entityKey = getCurrentLinkEntityKey(editorState);

  let nextEditorState = editorState;

  if (!entityKey) {
    const contentStateWithEntity = contentState.createEntity(ENTITY_TYPE, '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 strues / boldr / src / cms / common / components / BoldrEditor / BoldrEditor.js View on Github external
_removeLink: Function = (): void => {
    const { editorState } = this.state;
    const selection = editorState.getSelection();

    (this: any).onChange(RichUtils.toggleLink(editorState, selection, null));
  }
github niuware / mui-rte / src / MUIRichTextEditor.tsx View on Github external
const removeLink = () => {
        const selection = editorState.getSelection()
        updateStateForPopover(RichUtils.toggleLink(editorState, selection, null))
    }
github niuware / mui-rte / src / MUIRichTextEditor.tsx View on Github external
const contentState = editorState.getCurrentContent()
        let replaceEditorState = null
        const data = {
            url: url
        }

        if (urlKey) {
            contentState.replaceEntityData(urlKey, data)
            replaceEditorState = EditorState.push(editorState, contentState, "apply-entity")
        }
        else {
            const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', data)
            const entityKey = contentStateWithEntity.getLastCreatedEntityKey()
            const newEditorState = EditorState.set(editorState, { currentContent: contentStateWithEntity })
            replaceEditorState = RichUtils.toggleLink(
                newEditorState,
                newEditorState.getSelection(),
                entityKey)
        }
        updateStateForPopover(replaceEditorState)
    }
github artsy / positron / src / client / components / rich_text / utils / text_stripping.js View on Github external
export const makePlainText = (editorState) => {
  const selection = editorState.getSelection()

  const noLinks = RichUtils.toggleLink(editorState, selection, null)
  const unstyled = RichUtils.toggleBlockType(noLinks, 'unstyled')

  const currentBlocks = unstyled.getCurrentContent().getBlocksAsArray()
  const plainBlocks = currentBlocks.map((contentBlock) => {
    return stripCharacterStyles(contentBlock)
  })

  const newContent = ContentState.createFromBlockArray(plainBlocks)
  const newState = EditorState.push(editorState, newContent, null)

  return newState
}
github artsy / positron / src / client / apps / edit / components / content / sections / text / index.jsx View on Github external
removeLink = () => {
    const { editorState } = this.state
    const selection = editorState.getSelection()

    const state = {
      editorState,
      plugin: null,
      showUrlInput: false,
      url: ''
    }
    if (!selection.isCollapsed()) {
      state.editorState = RichUtils.toggleLink(editorState, selection, null)
    }
    this.setState(state)
  }
github draft-js-plugins / draft-js-plugins / draft-js-anchor-plugin / src / utils / EditorUtils.js View on Github external
createLinkAtSelection(editorState, url) {
    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 Uscreen-video / atomic-builder / app / Editor / draft / Toolbar / Buttons.js View on Github external
unlink() {
    if (!this.selection.isCollapsed()) {
      this.props.onChange(RichUtils.toggleLink(this.props.editorState, this.selection, null));
    }
  }