From 664e55a40bc3369445ff2753ce82228e219c980a Mon Sep 17 00:00:00 2001 From: Sinclair Chen Date: Wed, 13 Jul 2022 15:56:15 -0700 Subject: [PATCH] Add typing, pasting links (#646) --- common/package.json | 1 + common/util/parse.ts | 2 ++ functions/package.json | 1 + web/components/editor.tsx | 10 ++++++++-- web/package.json | 1 + yarn.lock | 14 ++++++++++++++ 6 files changed, 27 insertions(+), 2 deletions(-) diff --git a/common/package.json b/common/package.json index 25992cb6..6f0f5b29 100644 --- a/common/package.json +++ b/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" }, diff --git a/common/util/parse.ts b/common/util/parse.ts index 48b68fdd..94b5ab7f 100644 --- a/common/util/parse.ts +++ b/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] diff --git a/functions/package.json b/functions/package.json index d7ebb663..f8657516 100644 --- a/functions/package.json +++ b/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", diff --git a/web/components/editor.tsx b/web/components/editor.tsx index bd4d97c0..3ec0663b 100644 --- a/web/components/editor.tsx +++ b/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, }) diff --git a/web/package.json b/web/package.json index f81950bf..f8e1881b 100644 --- a/web/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index e84f3616..6fcdf53a 100644 --- a/yarn.lock +++ b/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"