feat: Links in Super notes will get auto-linked when they're pasted or typed
This commit is contained in:
@@ -209,8 +209,7 @@ function useFloatingLinkEditorToolbar(editor: LexicalEditor, anchorElem: HTMLEle
|
|||||||
const linkParent = $findMatchingParent(node, $isLinkNode)
|
const linkParent = $findMatchingParent(node, $isLinkNode)
|
||||||
const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode)
|
const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode)
|
||||||
|
|
||||||
// We don't want this menu to open for auto links.
|
if (linkParent != null || autoLinkParent != null) {
|
||||||
if (linkParent != null && autoLinkParent == null) {
|
|
||||||
setIsLink(true)
|
setIsLink(true)
|
||||||
} else {
|
} else {
|
||||||
setIsLink(false)
|
setIsLink(false)
|
||||||
|
|||||||
@@ -1,9 +1,29 @@
|
|||||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||||
|
import { AutoLinkPlugin as LexicalAutoLinkPlugin } from '@lexical/react/LexicalAutoLinkPlugin'
|
||||||
import { COMMAND_PRIORITY_EDITOR, KEY_MODIFIER_COMMAND, $getSelection } from 'lexical'
|
import { COMMAND_PRIORITY_EDITOR, KEY_MODIFIER_COMMAND, $getSelection } from 'lexical'
|
||||||
import { useEffect } from 'react'
|
import { useEffect } from 'react'
|
||||||
import { TOGGLE_LINK_COMMAND } from '@lexical/link'
|
import { TOGGLE_LINK_COMMAND } from '@lexical/link'
|
||||||
import { mergeRegister } from '@lexical/utils'
|
import { mergeRegister } from '@lexical/utils'
|
||||||
|
|
||||||
|
const URL_MATCHER =
|
||||||
|
/((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/
|
||||||
|
|
||||||
|
const MATCHERS = [
|
||||||
|
(text: string) => {
|
||||||
|
const match = URL_MATCHER.exec(text)
|
||||||
|
if (match === null) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
const fullMatch = match[0]
|
||||||
|
return {
|
||||||
|
index: match.index,
|
||||||
|
length: fullMatch.length,
|
||||||
|
text: fullMatch,
|
||||||
|
url: fullMatch.startsWith('http') ? fullMatch : `https://${fullMatch}`,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
export default function AutoLinkPlugin(): JSX.Element | null {
|
export default function AutoLinkPlugin(): JSX.Element | null {
|
||||||
const [editor] = useLexicalComposerContext()
|
const [editor] = useLexicalComposerContext()
|
||||||
|
|
||||||
@@ -27,5 +47,9 @@ export default function AutoLinkPlugin(): JSX.Element | null {
|
|||||||
)
|
)
|
||||||
}, [editor])
|
}, [editor])
|
||||||
|
|
||||||
return null
|
return (
|
||||||
|
<>
|
||||||
|
<LexicalAutoLinkPlugin matchers={MATCHERS} />
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user