feat: formatting buttons

2025-12-12 04:15:25 +00:00 · 2025-07-09 03:11:51 +04:00 · 2025-07-09 03:11:51 +04:00 · c2ac797650
commit c2ac797650
parent 9a3a0070d6
17 changed files with 468 additions and 1 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -19,7 +19,9 @@
 				"@sveltejs/adapter-node": "^2.0.0",
 				"@sveltejs/svelte-virtual-list": "^3.0.1",
 				"@tiptap/core": "^2.11.9",
+				"@tiptap/extension-bubble-menu": "^2.25.0",
 				"@tiptap/extension-code-block-lowlight": "^2.11.9",
+				"@tiptap/extension-floating-menu": "^2.25.0",
 				"@tiptap/extension-highlight": "^2.10.0",
 				"@tiptap/extension-placeholder": "^2.10.0",
 				"@tiptap/extension-table": "^2.12.0",
@ -29,6 +31,7 @@
 				"@tiptap/extension-task-item": "^2.25.0",
 				"@tiptap/extension-task-list": "^2.25.0",
 				"@tiptap/extension-typography": "^2.10.0",
+				"@tiptap/extension-underline": "^2.25.0",
 				"@tiptap/pm": "^2.11.7",
 				"@tiptap/starter-kit": "^2.10.0",
 				"@xyflow/svelte": "^0.1.19",
@ -2952,6 +2955,23 @@
 				"@tiptap/core": "^2.7.0"
 			}
 		},
+		"node_modules/@tiptap/extension-bubble-menu": {
+			"version": "2.25.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.25.0.tgz",
+			"integrity": "sha512-BnbfQWRXJDDy9/x/0Atu2Nka5ZAMyXLDFqzSLMAXqXSQcG6CZRTSNRgOCnjpda6Hq2yCtq7l/YEoXkbHT1ZZdQ==",
+			"license": "MIT",
+			"dependencies": {
+				"tippy.js": "^6.3.7"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0",
+				"@tiptap/pm": "^2.7.0"
+			}
+		},
 		"node_modules/@tiptap/extension-bullet-list": {
 			"version": "2.10.0",
 			"resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.10.0.tgz",
@ -3036,6 +3056,23 @@
 				"@tiptap/pm": "^2.7.0"
 			}
 		},
+		"node_modules/@tiptap/extension-floating-menu": {
+			"version": "2.25.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.25.0.tgz",
+			"integrity": "sha512-hPZ5SNpI14smTz4GpWQXTnxmeICINYiABSgXcsU5V66tik9OtxKwoCSR/gpU35esaAFUVRdjW7+sGkACLZD5AQ==",
+			"license": "MIT",
+			"dependencies": {
+				"tippy.js": "^6.3.7"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0",
+				"@tiptap/pm": "^2.7.0"
+			}
+		},
 		"node_modules/@tiptap/extension-gapcursor": {
 			"version": "2.10.0",
 			"resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.10.0.tgz",
@ -3315,6 +3352,19 @@
 				"@tiptap/core": "^2.7.0"
 			}
 		},
+		"node_modules/@tiptap/extension-underline": {
+			"version": "2.25.0",
+			"resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-2.25.0.tgz",
+			"integrity": "sha512-RqXkWSMJyllfsDukugDzWEZfWRUOgcqzuMWC40BnuDUs4KgdRA0nhVUWJbLfUEmXI0UVqN5OwYTTAdhaiF7kjQ==",
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/ueberdosis"
+			},
+			"peerDependencies": {
+				"@tiptap/core": "^2.7.0"
+			}
+		},
 		"node_modules/@tiptap/pm": {
 			"version": "2.11.7",
 			"resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.11.7.tgz",
--- a/package.json
+++ b/package.json
@ -63,7 +63,9 @@
 		"@sveltejs/adapter-node": "^2.0.0",
 		"@sveltejs/svelte-virtual-list": "^3.0.1",
 		"@tiptap/core": "^2.11.9",
+		"@tiptap/extension-bubble-menu": "^2.25.0",
 		"@tiptap/extension-code-block-lowlight": "^2.11.9",
+		"@tiptap/extension-floating-menu": "^2.25.0",
 		"@tiptap/extension-highlight": "^2.10.0",
 		"@tiptap/extension-placeholder": "^2.10.0",
 		"@tiptap/extension-table": "^2.12.0",
@ -73,6 +75,7 @@
 		"@tiptap/extension-task-item": "^2.25.0",
 		"@tiptap/extension-task-list": "^2.25.0",
 		"@tiptap/extension-typography": "^2.10.0",
+		"@tiptap/extension-underline": "^2.25.0",
 		"@tiptap/pm": "^2.11.7",
 		"@tiptap/starter-kit": "^2.10.0",
 		"@xyflow/svelte": "^0.1.19",
--- a/src/app.css
+++ b/src/app.css
@ -488,3 +488,7 @@ input[type='number'] {
 .tiptap tr {
 	@apply bg-white dark:bg-gray-900 dark:border-gray-850 text-xs;
 }
+
+.tippy-box[data-theme~='transparent'] {
+	@apply bg-transparent p-0 m-0;
+}
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@ -1058,6 +1058,7 @@
 												}}
 												json={true}
 												messageInput={true}
+												showFormattingButtons={false}
 												insertPromptAsRichText={$settings?.insertPromptAsRichText ?? false}
 												shiftEnter={!($settings?.ctrlEnterToSend ?? false) &&
 													(!$mobile ||
--- a/src/lib/components/common/RichTextInput.svelte
+++ b/src/lib/components/common/RichTextInput.svelte
@ -23,9 +23,10 @@
 		}
 	});

-	import { onMount, onDestroy, tick } from 'svelte';
+	import { onMount, onDestroy, tick, getContext } from 'svelte';
 	import { createEventDispatcher } from 'svelte';

+	const i18n = getContext('i18n');
 	const eventDispatch = createEventDispatcher();

 	import { Fragment, DOMParser } from 'prosemirror-model';
@ -39,6 +40,7 @@
 	import TableHeader from '@tiptap/extension-table-header';
 	import TableCell from '@tiptap/extension-table-cell';

+	import Underline from '@tiptap/extension-underline';
 	import TaskItem from '@tiptap/extension-task-item';
 	import TaskList from '@tiptap/extension-task-list';

@ -47,10 +49,16 @@
 	import StarterKit from '@tiptap/starter-kit';
 	import Highlight from '@tiptap/extension-highlight';
 	import Typography from '@tiptap/extension-typography';
+
+	import BubbleMenu from '@tiptap/extension-bubble-menu';
+	import FloatingMenu from '@tiptap/extension-floating-menu';
+
 	import { all, createLowlight } from 'lowlight';

 	import { PASTED_TEXT_CHARACTER_LIMIT } from '$lib/constants';

+	import FormattingButtons from './RichTextInput/FormattingButtons.svelte';
+
 	export let oncompositionstart = (e) => {};
 	export let oncompositionend = (e) => {};
 	export let onChange = (e) => {};
@ -69,6 +77,8 @@
 	export let raw = false;
 	export let editable = true;

+	export let showFormattingButtons = true;
+
 	export let preserveBreaks = false;
 	export let generateAutoCompletion: Function = async () => null;
 	export let autocomplete = false;
@ -77,6 +87,8 @@
 	export let largeTextAsFile = false;
 	export let insertPromptAsRichText = false;

+	let floatingMenuElement = null;
+	let bubbleMenuElement = null;
 	let element;
 	let editor;

@ -447,6 +459,7 @@
 				}),
 				Highlight,
 				Typography,
+				Underline,
 				Placeholder.configure({ placeholder }),
 				Table.configure({ resizable: true }),
 				TableRow,
@ -473,6 +486,31 @@
 								}
 							})
 						]
+					: []),
+
+				...(showFormattingButtons
+					? [
+							BubbleMenu.configure({
+								element: bubbleMenuElement,
+								tippyOptions: {
+									duration: 100,
+									arrow: false,
+									placement: 'top',
+									theme: 'transparent',
+									offset: [0, 2]
+								}
+							}),
+							FloatingMenu.configure({
+								element: floatingMenuElement,
+								tippyOptions: {
+									duration: 100,
+									arrow: false,
+									placement: 'top-start',
+									theme: 'transparent',
+									offset: [-10, 2]
+								}
+							})
+						]
 					: [])
 			],
 			content: content,
@ -738,4 +776,14 @@
 	};
 </script>

+{#if showFormattingButtons}
+	<div bind:this={bubbleMenuElement} class="p-0">
+		<FormattingButtons {editor} />
+	</div>
+
+	<div bind:this={floatingMenuElement} class="p-0">
+		<FormattingButtons {editor} />
+	</div>
+{/if}
+
 <div bind:this={element} class="relative w-full min-w-full h-full min-h-fit {className}" />
--- a/src/lib/components/common/RichTextInput/FormattingButtons.svelte
+++ b/src/lib/components/common/RichTextInput/FormattingButtons.svelte
@ -0,0 +1,153 @@
+<script>
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
+	export let editor = null;
+
+	import Bold from '$lib/components/icons/Bold.svelte';
+	import CodeBracket from '$lib/components/icons/CodeBracket.svelte';
+	import H1 from '$lib/components/icons/H1.svelte';
+	import H2 from '$lib/components/icons/H2.svelte';
+	import H3 from '$lib/components/icons/H3.svelte';
+	import Italic from '$lib/components/icons/Italic.svelte';
+	import ListBullet from '$lib/components/icons/ListBullet.svelte';
+	import NumberedList from '$lib/components/icons/NumberedList.svelte';
+	import QueueList from '$lib/components/icons/QueueList.svelte';
+	import Strikethrough from '$lib/components/icons/Strikethrough.svelte';
+	import Underline from '$lib/components/icons/Underline.svelte';
+	import Tooltip from '../Tooltip.svelte';
+</script>
+
+<div class="flex gap-0.5 p-0.5 rounded-lg shadow-lg dark:bg-gray-800 min-w-fit">
+	<Tooltip placement="top" content={$i18n.t('H1')}>
+		<button
+			on:click={() => editor?.chain().focus().toggleHeading({ level: 1 }).run()}
+			class="{editor?.isActive('heading', { level: 1 })
+				? 'bg-gray-50 dark:bg-gray-700'
+				: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
+			type="button"
+		>
+			<H1 />
+		</button>
+	</Tooltip>
+
+	<Tooltip placement="top" content={$i18n.t('H2')}>
+		<button
+			on:click={() => editor?.chain().focus().toggleHeading({ level: 2 }).run()}
+			class="{editor?.isActive('heading', { level: 2 })
+				? 'bg-gray-50 dark:bg-gray-700'
+				: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
+			type="button"
+		>
+			<H2 />
+		</button>
+	</Tooltip>
+
+	<Tooltip placement="top" content={$i18n.t('H3')}>
+		<button
+			on:click={() => editor?.chain().focus().toggleHeading({ level: 3 }).run()}
+			class="{editor?.isActive('heading', { level: 3 })
+				? 'bg-gray-50 dark:bg-gray-700'
+				: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
+			type="button"
+		>
+			<H3 />
+		</button>
+	</Tooltip>
+
+	<Tooltip placement="top" content={$i18n.t('Bullet List')}>
+		<button
+			on:click={() => editor?.chain().focus().toggleBulletList().run()}
+			class="{editor?.isActive('bulletList')
+				? 'bg-gray-50 dark:bg-gray-700'
+				: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
+			type="button"
+		>
+			<ListBullet />
+		</button>
+	</Tooltip>
+
+	<Tooltip placement="top" content={$i18n.t('Ordered List')}>
+		<button
+			on:click={() => editor?.chain().focus().toggleOrderedList().run()}
+			class="{editor?.isActive('orderedList')
+				? 'bg-gray-50 dark:bg-gray-700'
+				: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
+			type="button"
+		>
+			<NumberedList />
+		</button>
+	</Tooltip>
+
+	<Tooltip placement="top" content={$i18n.t('Task List')}>
+		<button
+			on:click={() => editor?.chain().focus().toggleTaskList().run()}
+			class="{editor?.isActive('taskList')
+				? 'bg-gray-50 dark:bg-gray-700'
+				: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
+			type="button"
+		>
+			<QueueList />
+		</button>
+	</Tooltip>
+
+	<Tooltip placement="top" content={$i18n.t('Bold')}>
+		<button
+			on:click={() => editor?.chain().focus().toggleBold().run()}
+			class="{editor?.isActive('bold')
+				? 'bg-gray-50 dark:bg-gray-700'
+				: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
+			type="button"
+		>
+			<Bold />
+		</button>
+	</Tooltip>
+
+	<Tooltip placement="top" content={$i18n.t('Italic')}>
+		<button
+			on:click={() => editor?.chain().focus().toggleItalic().run()}
+			class="{editor?.isActive('italic')
+				? 'bg-gray-50 dark:bg-gray-700'
+				: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
+			type="button"
+		>
+			<Italic />
+		</button>
+	</Tooltip>
+
+	<Tooltip placement="top" content={$i18n.t('Underline')}>
+		<button
+			on:click={() => editor?.chain().focus().toggleUnderline().run()}
+			class="{editor?.isActive('underline')
+				? 'bg-gray-50 dark:bg-gray-700'
+				: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
+			type="button"
+		>
+			<Underline />
+		</button>
+	</Tooltip>
+
+	<Tooltip placement="top" content={$i18n.t('Strikethrough')}>
+		<button
+			on:click={() => editor?.chain().focus().toggleStrike().run()}
+			class="{editor?.isActive('strike')
+				? 'bg-gray-50 dark:bg-gray-700'
+				: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
+			type="button"
+		>
+			<Strikethrough />
+		</button>
+	</Tooltip>
+
+	<Tooltip placement="top" content={$i18n.t('Code Block')}>
+		<button
+			on:click={() => editor?.chain().focus().toggleCodeBlock().run()}
+			class="{editor?.isActive('codeBlock')
+				? 'bg-gray-50 dark:bg-gray-700'
+				: ''} hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg p-1.5 transition-all"
+			type="button"
+		>
+			<CodeBracket />
+		</button>
+	</Tooltip>
+</div>
--- a/src/lib/components/icons/Bold.svelte
+++ b/src/lib/components/icons/Bold.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linejoin="round"
+		d="M6.75 3.744h-.753v8.25h7.125a4.125 4.125 0 0 0 0-8.25H6.75Zm0 0v.38m0 16.122h6.747a4.5 4.5 0 0 0 0-9.001h-7.5v9h.753Zm0 0v-.37m0-15.751h6a3.75 3.75 0 1 1 0 7.5h-6m0-7.5v7.5m0 0v8.25m0-8.25h6.375a4.125 4.125 0 0 1 0 8.25H6.75m.747-15.38h4.875a3.375 3.375 0 0 1 0 6.75H7.497v-6.75Zm0 7.5h5.25a3.75 3.75 0 0 1 0 7.5h-5.25v-7.5Z"
+	/>
+</svg>
--- a/src/lib/components/icons/CodeBracket.svelte
+++ b/src/lib/components/icons/CodeBracket.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"
+	/>
+</svg>
--- a/src/lib/components/icons/H1.svelte
+++ b/src/lib/components/icons/H1.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501m4.501-8.627 2.25-1.5v10.126m0 0h-2.25m2.25 0h2.25"
+	/>
+</svg>
--- a/src/lib/components/icons/H2.svelte
+++ b/src/lib/components/icons/H2.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M21.75 19.5H16.5v-1.609a2.25 2.25 0 0 1 1.244-2.012l2.89-1.445c.651-.326 1.116-.955 1.116-1.683 0-.498-.04-.987-.118-1.463-.135-.825-.835-1.422-1.668-1.489a15.202 15.202 0 0 0-3.464.12M2.243 4.492v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501"
+	/>
+</svg>
--- a/src/lib/components/icons/H3.svelte
+++ b/src/lib/components/icons/H3.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M20.905 14.626a4.52 4.52 0 0 1 .738 3.603c-.154.695-.794 1.143-1.504 1.208a15.194 15.194 0 0 1-3.639-.104m4.405-4.707a4.52 4.52 0 0 0 .738-3.603c-.154-.696-.794-1.144-1.504-1.209a15.19 15.19 0 0 0-3.639.104m4.405 4.708H18M2.243 4.493v7.5m0 0v7.502m0-7.501h10.5m0-7.5v7.5m0 0v7.501"
+	/>
+</svg>
--- a/src/lib/components/icons/Italic.svelte
+++ b/src/lib/components/icons/Italic.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M5.248 20.246H9.05m0 0h3.696m-3.696 0 5.893-16.502m0 0h-3.697m3.697 0h3.803"
+	/>
+</svg>
--- a/src/lib/components/icons/ListBullet.svelte
+++ b/src/lib/components/icons/ListBullet.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
+	/>
+</svg>
--- a/src/lib/components/icons/NumberedList.svelte
+++ b/src/lib/components/icons/NumberedList.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M8.242 5.992h12m-12 6.003H20.24m-12 5.999h12M4.117 7.495v-3.75H2.99m1.125 3.75H2.99m1.125 0H5.24m-1.92 2.577a1.125 1.125 0 1 1 1.591 1.59l-1.83 1.83h2.16M2.99 15.745h1.125a1.125 1.125 0 0 1 0 2.25H3.74m0-.002h.375a1.125 1.125 0 0 1 0 2.25H2.99"
+	/>
+</svg>
--- a/src/lib/components/icons/QueueList.svelte
+++ b/src/lib/components/icons/QueueList.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 0 1 0-3.75Z"
+	/>
+</svg>
--- a/src/lib/components/icons/Strikethrough.svelte
+++ b/src/lib/components/icons/Strikethrough.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M12 12a8.912 8.912 0 0 1-.318-.079c-1.585-.424-2.904-1.247-3.76-2.236-.873-1.009-1.265-2.19-.968-3.301.59-2.2 3.663-3.29 6.863-2.432A8.186 8.186 0 0 1 16.5 5.21M6.42 17.81c.857.99 2.176 1.812 3.761 2.237 3.2.858 6.274-.23 6.863-2.431.233-.868.044-1.779-.465-2.617M3.75 12h16.5"
+	/>
+</svg>
--- a/src/lib/components/icons/Underline.svelte
+++ b/src/lib/components/icons/Underline.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M17.995 3.744v7.5a6 6 0 1 1-12 0v-7.5m-2.25 16.502h16.5"
+	/>
+</svg>