diff --git a/common/util/parse.ts b/common/util/parse.ts index 4fac3225..0bbd5cd9 100644 --- a/common/util/parse.ts +++ b/common/util/parse.ts @@ -23,8 +23,15 @@ import { Link } from '@tiptap/extension-link' import { Mention } from '@tiptap/extension-mention' import Iframe from './tiptap-iframe' import TiptapTweet from './tiptap-tweet-type' +import { find } from 'linkifyjs' import { uniq } from 'lodash' +/** get first url in text. like "notion.so " -> "http://notion.so"; "notion" -> null */ +export function getUrl(text: string) { + const results = find(text, 'url') + return results.length ? results[0].href : null +} + export function parseTags(text: string) { const regex = /(?:^|\s)(?:[#][a-z0-9_]+)/gi const matches = (text.match(regex) || []).map((match) => diff --git a/web/components/editor.tsx b/web/components/editor.tsx index 2b605a92..745fc3c5 100644 --- a/web/components/editor.tsx +++ b/web/components/editor.tsx @@ -37,6 +37,7 @@ import { Tooltip } from './tooltip' import BoldIcon from 'web/lib/icons/bold-icon' import ItalicIcon from 'web/lib/icons/italic-icon' import LinkIcon from 'web/lib/icons/link-icon' +import { getUrl } from 'common/util/parse' const DisplayImage = Image.configure({ HTMLAttributes: { @@ -160,13 +161,9 @@ function FloatingMenu(props: { editor: Editor | null }) { const isLink = editor.isActive('link') const setLink = () => { - if (url) { - editor - .chain() - .focus() - .extendMarkRange('link') - .setLink({ href: url }) - .run() + const href = url && getUrl(url) + if (href) { + editor.chain().focus().extendMarkRange('link').setLink({ href }).run() } }