Mutate Draft-js editor state to add new link entity with draft-js-linkify-plugin

linkify-editor-state.ts

import { EditorState, Modifier, SelectionState, ContentBlock } from 'draft-js'
import * as linkifyIt from 'linkify-it'

const linkify = linkifyIt()
// tslint:disable-next-line:no-var-requires
linkify.tlds(require('tlds'))

const findLinks = (
  contentBlock: ContentBlock,
  callback: (firstIndex: number, lastIndex: number, href: string) => void
) => {
  const contentBlockText = contentBlock.get('text')
  const links = linkify.match(contentBlockText)
  if (typeof links !== 'undefined' && links !== null) {
    for (const link of links) {
      callback(link.index, link.lastIndex, link.url)
    }
  }
}

const linkifyEditorState = (editorState: EditorState): EditorState => {
  const contentState = editorState.getCurrentContent()
  const blocks = contentState.getBlockMap()
  let newContentState = contentState

  blocks.forEach(block => {
    const plainText = block.getText()

    const addEntityToLink = (start: number, end: number, href: string) => {
      const existingEntityKey = block.getEntityAt(start)
      if (existingEntityKey) {
        // avoid manipulation in case the link already has an entity
        const entity = contentState.getEntity(existingEntityKey)
        if (entity && entity.getType() === 'LINK' && entity.getData().href === href) {
          return
        }
      }

      const selection = editorState
        .getSelection()
        .set('anchorOffset', start)
        .set('focusOffset', end)

      const linkText = plainText.substring(start, end)
      const contentStateWithEntity = contentState.createEntity('LINK', 'IMMUTABLE', { text: linkText, href })
      const entityKey = contentStateWithEntity.getLastCreatedEntityKey()
      if (selection instanceof SelectionState) {
        newContentState = Modifier.replaceText(newContentState, selection, linkText, null, entityKey)
      }
    }

    findLinks(block, addEntityToLink)
  })

  if (!newContentState.equals(contentState)) {
    return EditorState.push(editorState, newContentState, 'apply-entity')
  }

  return editorState
}

export default linkifyEditorState

  onChange = (editorState: EditorState) => {
    this.setState({ editorState: linkifyEditorState(editorState) })
  }

new version fixes google.co issue when last m skips

Hi @anders0l, seems not working properly when combined with https://www.draft-js-plugins.com/plugin/anchor