Browse Source

enh: rich text input link

Timothy Jaeryang Baek 3 months ago
parent
commit
6ee4274b3b
4 changed files with 32 additions and 2 deletions
  1. 24 0
      package-lock.json
  2. 1 0
      package.json
  3. 2 2
      src/app.css
  4. 5 0
      src/lib/components/common/RichTextInput.svelte

+ 24 - 0
package-lock.json

@@ -23,6 +23,7 @@
 				"@tiptap/extension-code-block-lowlight": "^2.11.9",
 				"@tiptap/extension-floating-menu": "^2.25.0",
 				"@tiptap/extension-highlight": "^2.10.0",
+				"@tiptap/extension-link": "^2.25.0",
 				"@tiptap/extension-placeholder": "^2.10.0",
 				"@tiptap/extension-table": "^2.12.0",
 				"@tiptap/extension-table-cell": "^2.12.0",
@@ -3167,6 +3168,23 @@
 				"@tiptap/core": "^2.7.0"
 			}
 		},
+		"node_modules/@tiptap/extension-link": {
+			"version": "2.25.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-2.25.0.tgz",
+			"integrity": "sha512-jNd+1Fd7wiIbxlS51weBzyDtBEBSVzW0cgzdwOzBYQtPJueRyXNNVERksyinDuVgcfvEWgmNZUylgzu7mehnEg==",
+			"license": "MIT",
+			"dependencies": {
+				"linkifyjs": "^4.2.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0",
+				"@tiptap/pm": "^2.7.0"
+			}
+		},
 		"node_modules/@tiptap/extension-list-item": {
 			"version": "2.10.0",
 			"resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.10.0.tgz",
@@ -8443,6 +8461,12 @@
 				"uc.micro": "^2.0.0"
 			}
 		},
+		"node_modules/linkifyjs": {
+			"version": "4.3.1",
+			"resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.1.tgz",
+			"integrity": "sha512-DRSlB9DKVW04c4SUdGvKK5FR6be45lTU9M76JnngqPeeGDqPwYc0zdUErtsNVMtxPXgUWV4HbXbnC4sNyBxkYg==",
+			"license": "MIT"
+		},
 		"node_modules/listr2": {
 			"version": "3.14.0",
 			"resolved": "https://registry.npmjs.org/listr2/-/listr2-3.14.0.tgz",

+ 1 - 0
package.json

@@ -67,6 +67,7 @@
 		"@tiptap/extension-code-block-lowlight": "^2.11.9",
 		"@tiptap/extension-floating-menu": "^2.25.0",
 		"@tiptap/extension-highlight": "^2.10.0",
+		"@tiptap/extension-link": "^2.25.0",
 		"@tiptap/extension-placeholder": "^2.10.0",
 		"@tiptap/extension-table": "^2.12.0",
 		"@tiptap/extension-table-cell": "^2.12.0",

+ 2 - 2
src/app.css

@@ -65,11 +65,11 @@ textarea::placeholder {
 }
 
 .input-prose {
-	@apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-0.5 whitespace-pre-line;
+	@apply prose dark:prose-invert prose-headings:font-semibold prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-1 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-0.5 whitespace-pre-line;
 }
 
 .input-prose-sm {
-	@apply prose dark:prose-invert prose-headings:font-medium prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-0 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-1 whitespace-pre-line text-sm;
+	@apply prose dark:prose-invert prose-headings:font-medium prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg prose-hr:my-4 prose-hr:border-gray-100 prose-hr:dark:border-gray-800 prose-p:my-1 prose-img:my-1 prose-headings:my-2 prose-pre:my-0 prose-table:my-1 prose-blockquote:my-0 prose-ul:my-1 prose-ol:my-1 prose-li:my-1 whitespace-pre-line text-sm;
 }
 
 .markdown-prose {

+ 5 - 0
src/lib/components/common/RichTextInput.svelte

@@ -65,6 +65,7 @@
 	import TableHeader from '@tiptap/extension-table-header';
 	import TableCell from '@tiptap/extension-table-cell';
 
+	import Link from '@tiptap/extension-link';
 	import Underline from '@tiptap/extension-underline';
 	import TaskItem from '@tiptap/extension-task-item';
 	import TaskList from '@tiptap/extension-task-list';
@@ -482,6 +483,10 @@
 				Highlight,
 				Typography,
 				Underline,
+				Link.configure({
+					openOnClick: true,
+					linkOnPaste: true
+				}),
 				Placeholder.configure({ placeholder }),
 				Table.configure({ resizable: true }),
 				TableRow,