feat: Add underline (#5)

* feat: Add underline

* fix: Fix underline bug

package.json

@@ -50,6 +50,7 @@
 		"@tiptap/extension-link": "^2.1.16",
 		"@tiptap/extension-placeholder": "^2.1.16",
 		"@tiptap/extension-text-align": "^2.1.16",
+		"@tiptap/extension-underline": "^2.5.4",
 		"@tiptap/extension-youtube": "^2.5.4",
 		"@tiptap/pm": "^2.1.16",
 		"@tiptap/starter-kit": "^2.1.16",

src/lib/editor/editor.svelte

@@ -33,7 +33,8 @@
 		Undo,
 		ScreenShare,
 		ScreenShareOff,
-		MonitorPlay
+		MonitorPlay,
+		Underline
 	} from 'lucide-svelte';
 	import {
 		addImage,
@@ -179,6 +180,14 @@
 			>
 				<Italic class="h-4 w-4" />
 			</Button>
+			<Button
+				on:click={() => editor.chain().focus().toggleUnderline().run()}
+				disabled={!editor.can().chain().focus().toggleUnderline().run()}
+				variant={editor.isActive('underline') ? 'default' : 'secondary'}
+				class="mx-0.5 h-8 px-2"
+			>
+				<Underline class="h-4 w-4" />
+			</Button>
 			<Button
 				on:click={() => editor.chain().focus().toggleStrike().run()}
 				disabled={!editor.can().chain().focus().toggleStrike().run()}
@@ -408,6 +417,13 @@
 		>
 			<Strikethrough class="h-4 w-4" />
 		</Button>
+		<Button
+			on:click={() => editor.chain().focus().toggleUnderline().run()}
+			variant={editor.isActive('underline') ? 'default' : 'secondary'}
+			class="h-8 px-2"
+		>
+			<Underline class="h-4 w-4" />
+		</Button>
 		<Button
 			on:click={() => editor.chain().focus().toggleCode().run()}
 			variant={editor.isActive('code') ? 'default' : 'secondary'}

src/lib/editor/extensions.ts

@@ -5,6 +5,7 @@ import TextAlign from "@tiptap/extension-text-align";
 import StarterKit from "@tiptap/starter-kit";
 import Image from '@tiptap/extension-image';
 import Youtube from "@tiptap/extension-youtube";
+import Underline from "@tiptap/extension-underline";
 
 export function getExtensions(bubbleMenu: HTMLElement) {
   return [
@@ -25,6 +26,7 @@ export function getExtensions(bubbleMenu: HTMLElement) {
     Placeholder,
     Youtube.configure({
       inline: true
-    })
+    }),
+    Underline
   ];
 }

src/lib/editor/sharing.ts

@@ -7,6 +7,7 @@ import StarterKit from "@tiptap/starter-kit";
 import Link from "@tiptap/extension-link";
 import Image from '@tiptap/extension-image';
 import Youtube from "@tiptap/extension-youtube";
+import Underline from "@tiptap/extension-underline";
 
 export function getExtensionsOnSharing(provider: HocuspocusProvider, bubbleMenu: HTMLElement) {
   return [
@@ -32,6 +33,7 @@ export function getExtensionsOnSharing(provider: HocuspocusProvider, bubbleMenu:
     Placeholder,
     Youtube.configure({
       inline: true
-    })
+    }),
+    Underline
   ]
 }