help with links as entities plugin-to-be
See original GitHub issueI’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.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:2
- Comments:5
Top Results From Across the Web
Links in HTML documents - W3C
Since links may point to documents encoded with different character encodings, the A and LINK elements support the charset attribute.
Read more >Attaching Hyperlinks to Entities - 2020 - DraftSight Help
The Hyperlink command attaches a hyperlink to an entity or modifies an existing hyperlink. Hyperlinks provide jumps to Web sites, email addresses, ...
Read more >Links to Features within ETO in Reports - ETO Help Center
Step 1 – Choose a page you want to link to. In this example, we will work through linking to a TouchPoint response...
Read more >Create or edit a hyperlink - Microsoft Support
Microsoft 365 automatically converts the address into a link. In addition to webpages, you can create links to existing or new files on...
Read more >pfsense docker - Gympansen Factory |
I have recently installed a wake on lan plugin to be able to turn on my PC ... forum TrueNAS Core 12. pfsense...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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:https://gist.github.com/bengotow/63462490660da6bfea8d92b3124e09ee
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.