Sanitize and href-ify user input

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) =>

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) {
+    const href = url && getUrl(url)
-      editor
+    if (href) {
-        .chain()
+      editor.chain().focus().extendMarkRange('link').setLink({ href }).run()
-        .focus()
-        .extendMarkRange('link')
-        .setLink({ href: url })
-        .run()
     }
   }