Add typing, pasting links (#646)

common/package.json

@@ -9,6 +9,7 @@
   "sideEffects": false,
   "dependencies": {
     "@tiptap/extension-image": "2.0.0-beta.30",
+    "@tiptap/extension-link": "2.0.0-beta.43",
     "@tiptap/starter-kit": "2.0.0-beta.190",
     "lodash": "4.17.21"
   },

common/util/parse.ts

@@ -19,6 +19,7 @@ import { Strike } from '@tiptap/extension-strike'
 import { Text } from '@tiptap/extension-text'
 // other tiptap extensions
 import { Image } from '@tiptap/extension-image'
+import { Link } from '@tiptap/extension-link'
 
 export function parseTags(text: string) {
   const regex = /(?:^|\s)(?:[#][a-z0-9_]+)/gi
@@ -68,6 +69,7 @@ export const exhibitExts = [
   Text,
 
   Image,
+  Link,
 ]
 // export const exhibitExts = [StarterKit as unknown as Extension, Image]
 

functions/package.json

@@ -26,6 +26,7 @@
     "@google-cloud/functions-framework": "3.1.2",
     "@tiptap/core": "2.0.0-beta.181",
     "@tiptap/extension-image": "2.0.0-beta.30",
+    "@tiptap/extension-link": "2.0.0-beta.43",
     "@tiptap/starter-kit": "2.0.0-beta.190",
     "firebase-admin": "10.0.0",
     "firebase-functions": "3.21.2",

web/components/editor.tsx

@@ -10,6 +10,7 @@ import {
 } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import { Image } from '@tiptap/extension-image'
+import { Link } from '@tiptap/extension-link'
 import clsx from 'clsx'
 import { useEffect } from 'react'
 import { Linkify } from './linkify'
@@ -18,8 +19,12 @@ import { useMutation } from 'react-query'
 import { exhibitExts } from 'common/util/parse'
 import { FileUploadButton } from './file-upload-button'
 
-const proseClass =
-  'prose prose-sm prose-p:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none'
+const proseClass = clsx(
+  'prose prose-sm prose-p:my-0 prose-li:my-0 prose-blockquote:not-italic max-w-none',
+  // link styles mostly copied from site-link.ts
+  'prose-a:no-underline prose-a:!text-indigo-700',
+  'prose-a:z-10 prose-a:break-words hover:prose-a:underline hover:prose-a:decoration-indigo-400 prose-a:hover:decoration-2'
+)
 
 export function useTextEditor(props: {
   placeholder?: string
@@ -47,6 +52,7 @@ export function useTextEditor(props: {
       }),
       CharacterCount.configure({ limit: max }),
       Image,
+      Link,
     ],
     content: defaultValue,
   })

web/package.json

@@ -26,6 +26,7 @@
     "@react-query-firebase/firestore": "0.4.2",
     "@tiptap/extension-character-count": "2.0.0-beta.31",
     "@tiptap/extension-image": "2.0.0-beta.30",
+    "@tiptap/extension-link": "2.0.0-beta.43",
     "@tiptap/extension-placeholder": "2.0.0-beta.53",
     "@tiptap/react": "2.0.0-beta.114",
     "@tiptap/starter-kit": "2.0.0-beta.190",

yarn.lock

@@ -2984,6 +2984,15 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.0.0-beta.28.tgz#bf88ecae64c8f2f69f1f508b802c1efd7454a84e"
   integrity sha512-/pKRiCfewh7nqiXRD3N4hQHfGrGNOiWPFYZfY35bSpvTms7PDb/MF7xT1CWW23hSpY31BBS+R/a66vlR/gqu7Q==
 
+"@tiptap/extension-link@2.0.0-beta.43":
+  version "2.0.0-beta.43"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-link/-/extension-link-2.0.0-beta.43.tgz#c123a2170dd50d075b9fe7fb91d86d23f778ffb0"
+  integrity sha512-AYueqfTW713KGVfWSWhVbj4ObeWudgawikm3m0uYcKSdsAz/CfEvOD2/NA0uyQzlxmYLA6Pf8HMxoKGN+O4Cmg==
+  dependencies:
+    linkifyjs "^3.0.5"
+    prosemirror-model "1.18.1"
+    prosemirror-state "1.4.1"
+
 "@tiptap/extension-list-item@^2.0.0-beta.23":
   version "2.0.0-beta.23"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.23.tgz#6d1ac7235462b0bcee196f42bb1871669480b843"
@@ -7769,6 +7778,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+linkifyjs@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-3.0.5.tgz#99e51a3a0c0e232fcb63ebb89eea3ff923378f34"
+  integrity sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg==
+
 loader-runner@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"