help with links as entities plugin-to-be

I’m following up on @jarsbe’s work started in #302. I began with this gist but cannot figure out why the selection state seems broken. After parsing a link, all typing occurs after it, regardless of cursor position. I’m fairly new to draft and was hoping someone could see something I don’t, especially since other folks seemed to have gotten it working according to the comments in the gist.

Can anyone see what I’m doing wrong?

The original gist

// gist from https://gist.github.com/jarsbe/af55f3705add9d9ec34fd0cb25ef2f67
import { EditorState, Modifier, Entity, SelectionState } from 'draft-js'
import linkifyIt from 'linkify-it'
import tlds from 'tlds'

const linkify = linkifyIt()

linkify.tlds(tlds)

const linkifyEditorState = (editorState) => {
  const contentState = editorState.getCurrentContent()
  const blocks = contentState.getBlockMap()

  let newContentState = contentState

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

    const addEntityToLink = (start, end) => {
      const existingEntityKey = block.getEntityAt(start)
      if (existingEntityKey) {
        // avoid manipulation in case the link already has an entity
        const entity = Entity.get(existingEntityKey)
        if (entity && entity.get('type') === 'link') {
          return
        }
      }

      const selection = SelectionState.createEmpty(block.getKey())
                                      .set('anchorOffset', start)
                                      .set('focusOffset', end)
      const linkText = plainText.substring(start, end)
      const entityKey = Entity.create('LINK', 'IMMUTABLE', { url: linkText })
      newContentState = Modifier.replaceText(
        newContentState,
        selection,
        linkText,
        null,
        entityKey
      )
    }

    findLinks(block, addEntityToLink)
  })

  if (!newContentState.equals(contentState)) {
    return EditorState.push(
      editorState,
      newContentState,
      'convert-to-links'
    )
  }

  return editorState
}

const findLinks = (contentBlock, callback) => {
  const links = linkify.match(contentBlock.get('text'))
  if (typeof links !== 'undefined' && links !== null) {
    for (let i = 0; i < links.length; i++) {
      callback(links[i].index, links[i].lastIndex)
    }
  }
}

export default linkifyEditorState

How I’m using it

import linkifyEditorState from 'path/to/gist/above';

const linkifyEntityPlugin = {
  // following the documented plugin pattern https://github.com/draft-js-plugins/draft-js-plugins/blob/master/HOW_TO_CREATE_A_PLUGIN.md#onchange
  onChange: linkifyEditorState 
};

const plugins = [
  undoPlugin,
  counterPlugin,
  linkifyEntityPlugin,
];

// plugins is then passed into an <Editor>

I’m using the 2.0.0-beta9 version of draft-js-plugins-editor.

[bengotow]

Hey folks—if anyone is still looking to do this, I needed link entities to be created and updated as the user edited the text and created this draft-js-plugin. In addition to automatically managing the link entity beneath the user’s cursor, it also:

• provides a way to set an “explicit” link entity on the selected text, which the autolinker will not modify (so the user can explicitly link the text bla.com to foo.com).
• provides a way to manually unlink URLs and prevent the autolinker from relinking them. (via a url: null state on the entity).

https://gist.github.com/bengotow/63462490660da6bfea8d92b3124e09ee

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.