@widgetic/design-system 0.3.68

package/dist/components/shad-editor/custom/Extentions/SmilieReplacer.js

@@ -0,0 +1,131 @@
+import { Extension, textInputRule } from '@tiptap/core';
+export const SmilieReplacer = Extension.create({
+    name: 'smilieReplacer',
+    addInputRules() {
+        return [
+            textInputRule({ find: /-___- $/, replace: '😑 ' }),
+            textInputRule({ find: /:'-\) $/, replace: '😂 ' }),
+            textInputRule({ find: /':-\) $/, replace: '😅 ' }),
+            textInputRule({ find: /':-D $/, replace: '😅 ' }),
+            textInputRule({ find: />:-\) $/, replace: '😆 ' }),
+            textInputRule({ find: /-__- $/, replace: '😑 ' }),
+            textInputRule({ find: /':-\( $/, replace: '😓 ' }),
+            textInputRule({ find: /:'-\( $/, replace: '😢 ' }),
+            textInputRule({ find: />:-\( $/, replace: '😠 ' }),
+            textInputRule({ find: /O:-\) $/, replace: '😇 ' }),
+            textInputRule({ find: /0:-3 $/, replace: '😇 ' }),
+            textInputRule({ find: /0:-\) $/, replace: '😇 ' }),
+            textInputRule({ find: /0;\^\) $/, replace: '😇 ' }),
+            textInputRule({ find: /O;-\) $/, replace: '😇 ' }),
+            textInputRule({ find: /0;-\) $/, replace: '😇 ' }),
+            textInputRule({ find: /O:-3 $/, replace: '😇 ' }),
+            textInputRule({ find: /:'\) $/, replace: '😂 ' }),
+            textInputRule({ find: /:-D $/, replace: '😃 ' }),
+            textInputRule({ find: /':\) $/, replace: '😅 ' }),
+            textInputRule({ find: /'=\) $/, replace: '😅 ' }),
+            textInputRule({ find: /':D $/, replace: '😅 ' }),
+            textInputRule({ find: /'=D $/, replace: '😅 ' }),
+            textInputRule({ find: />:\) $/, replace: '😆 ' }),
+            textInputRule({ find: />;\) $/, replace: '😆 ' }),
+            textInputRule({ find: />=\) $/, replace: '😆 ' }),
+            textInputRule({ find: /;-\) $/, replace: '😉 ' }),
+            textInputRule({ find: /\*-\) $/, replace: '😉 ' }),
+            textInputRule({ find: /;-\] $/, replace: '😉 ' }),
+            textInputRule({ find: /;\^\) $/, replace: '😉 ' }),
+            textInputRule({ find: /B-\) $/, replace: '😎 ' }),
+            textInputRule({ find: /8-\) $/, replace: '😎 ' }),
+            textInputRule({ find: /B-D $/, replace: '😎 ' }),
+            textInputRule({ find: /8-D $/, replace: '😎 ' }),
+            textInputRule({ find: /:-\* $/, replace: '😘 ' }),
+            textInputRule({ find: /:\^\* $/, replace: '😘 ' }),
+            textInputRule({ find: /:-\) $/, replace: '🙂 ' }),
+            textInputRule({ find: /-_- $/, replace: '😑 ' }),
+            textInputRule({ find: /:-X $/, replace: '😶 ' }),
+            textInputRule({ find: /:-# $/, replace: '😶 ' }),
+            textInputRule({ find: /:-x $/, replace: '😶 ' }),
+            textInputRule({ find: />.< $/, replace: '😣 ' }),
+            textInputRule({ find: /:-O $/, replace: '😮 ' }),
+            textInputRule({ find: /:-o $/, replace: '😮 ' }),
+            textInputRule({ find: /O_O $/, replace: '😮 ' }),
+            textInputRule({ find: />:O $/, replace: '😮 ' }),
+            textInputRule({ find: /:-P $/, replace: '😛 ' }),
+            textInputRule({ find: /:-p $/, replace: '😛 ' }),
+            textInputRule({ find: /:-Þ $/, replace: '😛 ' }),
+            textInputRule({ find: /:-þ $/, replace: '😛 ' }),
+            textInputRule({ find: /:-b $/, replace: '😛 ' }),
+            textInputRule({ find: />:P $/, replace: '😜 ' }),
+            textInputRule({ find: /X-P $/, replace: '😜 ' }),
+            textInputRule({ find: /x-p $/, replace: '😜 ' }),
+            textInputRule({ find: /':\( $/, replace: '😓 ' }),
+            textInputRule({ find: /'=\( $/, replace: '😓 ' }),
+            textInputRule({ find: />:\\ $/, replace: '😕 ' }),
+            textInputRule({ find: />:\/ $/, replace: '😕 ' }),
+            textInputRule({ find: /:-\/ $/, replace: '😕 ' }),
+            textInputRule({ find: /:-. $/, replace: '😕 ' }),
+            textInputRule({ find: />:\[ $/, replace: '😞 ' }),
+            textInputRule({ find: /:-\( $/, replace: '😞 ' }),
+            textInputRule({ find: /:-\[ $/, replace: '😞 ' }),
+            textInputRule({ find: /:'\( $/, replace: '😢 ' }),
+            textInputRule({ find: /;-\( $/, replace: '😢 ' }),
+            textInputRule({ find: /#-\) $/, replace: '😵 ' }),
+            textInputRule({ find: /%-\) $/, replace: '😵 ' }),
+            textInputRule({ find: /X-\) $/, replace: '😵 ' }),
+            textInputRule({ find: />:\( $/, replace: '😠 ' }),
+            textInputRule({ find: /0:3 $/, replace: '😇 ' }),
+            textInputRule({ find: /0:\) $/, replace: '😇 ' }),
+            textInputRule({ find: /O:\) $/, replace: '😇 ' }),
+            textInputRule({ find: /O=\) $/, replace: '😇 ' }),
+            textInputRule({ find: /O:3 $/, replace: '😇 ' }),
+            textInputRule({ find: /<\/3 $/, replace: '💔 ' }),
+            textInputRule({ find: /:D $/, replace: '😃 ' }),
+            textInputRule({ find: /=D $/, replace: '😃 ' }),
+            textInputRule({ find: /;\) $/, replace: '😉 ' }),
+            textInputRule({ find: /\*\) $/, replace: '😉 ' }),
+            textInputRule({ find: /;\] $/, replace: '😉 ' }),
+            textInputRule({ find: /;D $/, replace: '😉 ' }),
+            textInputRule({ find: /B\) $/, replace: '😎 ' }),
+            textInputRule({ find: /8\) $/, replace: '😎 ' }),
+            textInputRule({ find: /:\* $/, replace: '😘 ' }),
+            textInputRule({ find: /=\* $/, replace: '😘 ' }),
+            textInputRule({ find: /:\) $/, replace: '🙂 ' }),
+            textInputRule({ find: /=\] $/, replace: '🙂 ' }),
+            textInputRule({ find: /=\) $/, replace: '🙂 ' }),
+            textInputRule({ find: /:\] $/, replace: '🙂 ' }),
+            textInputRule({ find: /:X $/, replace: '😶 ' }),
+            textInputRule({ find: /:# $/, replace: '😶 ' }),
+            textInputRule({ find: /=X $/, replace: '😶 ' }),
+            textInputRule({ find: /=x $/, replace: '😶 ' }),
+            textInputRule({ find: /:x $/, replace: '😶 ' }),
+            textInputRule({ find: /=# $/, replace: '😶 ' }),
+            textInputRule({ find: /:O $/, replace: '😮 ' }),
+            textInputRule({ find: /:o $/, replace: '😮 ' }),
+            textInputRule({ find: /:P $/, replace: '😛 ' }),
+            textInputRule({ find: /=P $/, replace: '😛 ' }),
+            textInputRule({ find: /:p $/, replace: '😛  ' }),
+            textInputRule({ find: /=p $/, replace: '😛 ' }),
+            textInputRule({ find: /:Þ $/, replace: '😛 ' }),
+            textInputRule({ find: /:þ $/, replace: '😛 ' }),
+            textInputRule({ find: /:b $/, replace: '😛 ' }),
+            textInputRule({ find: /d: $/, replace: '😛 ' }),
+            textInputRule({ find: /:\/ $/, replace: '😕 ' }),
+            textInputRule({ find: /:\\ $/, replace: '😕 ' }),
+            textInputRule({ find: /=\/ $/, replace: '😕 ' }),
+            textInputRule({ find: /=\\ $/, replace: '😕 ' }),
+            textInputRule({ find: /:L $/, replace: '😕 ' }),
+            textInputRule({ find: /=L $/, replace: '😕 ' }),
+            textInputRule({ find: /:\( $/, replace: '😞 ' }),
+            textInputRule({ find: /:\[ $/, replace: '😞 ' }),
+            textInputRule({ find: /=\( $/, replace: '😞 ' }),
+            textInputRule({ find: /;\( $/, replace: '😢 ' }),
+            textInputRule({ find: /D: $/, replace: '😨 ' }),
+            textInputRule({ find: /:\$ $/, replace: '😳 ' }),
+            textInputRule({ find: /=\$ $/, replace: '😳 ' }),
+            textInputRule({ find: /#\) $/, replace: '😵 ' }),
+            textInputRule({ find: /%\) $/, replace: '😵 ' }),
+            textInputRule({ find: /X\) $/, replace: '😵 ' }),
+            textInputRule({ find: /:@ $/, replace: '😠 ' }),
+            textInputRule({ find: /<3 $/, replace: '❤️ ' }),
+            textInputRule({ find: /\/shrug $/, replace: '¯\\_(ツ)_/¯' })
+        ];
+    }
+});

package/dist/components/shad-editor/custom/code-extended.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { NodeViewWrapper, NodeViewContent } from 'svelte-tiptap';
+	import type { NodeViewProps } from '@tiptap/core';
+	import { Button, buttonVariants } from '../../ui/button/index.js';
+	import { onMount } from 'svelte';
+	const { node, editor, selected, deleteNode, updateAttributes, extension }: NodeViewProps =
+		$props();
+	import { Copy, Check, ChevronDown } from 'lucide-svelte';
+	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
+
+	let preRef: HTMLPreElement;
+
+	let isCopying = $state(false);
+
+	const languages = extension.options.lowlight.listLanguages().sort();
+
+	let defaultLanguage = $state(node.attrs.language);
+
+	onMount(() => {
+		console.log(node);
+	});
+
+	function copyCode() {
+		isCopying = true;
+		navigator.clipboard.writeText(preRef.innerText);
+		setTimeout(() => {
+			isCopying = false;
+		}, 1000);
+	}
+</script>
+
+<NodeViewWrapper
+	class="code-wrapper group relative rounded bg-muted p-6 dark:bg-muted/20"
+	draggable
+>
+	<DropdownMenu.Root>
+		<DropdownMenu.Trigger
+			contenteditable="false"
+			class={buttonVariants({
+				variant: 'ghost',
+				size: 'sm',
+				class:
+					'absolute left-2 top-2 h-4 rounded px-1 py-2 text-xs capitalize text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100'
+			})}
+			>{defaultLanguage}
+			<ChevronDown class="!size-3" />
+		</DropdownMenu.Trigger>
+		<DropdownMenu.Content class="h-60 w-40 overflow-auto" contenteditable="false">
+			{#each languages as language}
+				<DropdownMenu.Item
+					contenteditable="false"
+					data-current={defaultLanguage === language}
+					class="capitalize data-[current=true]:bg-muted"
+					onclick={() => {
+						defaultLanguage = language;
+						updateAttributes({ language: defaultLanguage });
+					}}
+				>
+					<span>{language}</span>
+				</DropdownMenu.Item>
+			{/each}
+		</DropdownMenu.Content>
+	</DropdownMenu.Root>
+	<Button
+		variant="ghost"
+		class="absolute right-2 top-2 size-4 p-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+		onclick={copyCode}
+	>
+		{#if isCopying}
+			<Check class="size-3 text-green-500" />
+		{:else}
+			<Copy class="size-3" />
+		{/if}
+	</Button>
+	<pre bind:this={preRef}>
+		<NodeViewContent as="code" class={`language-${defaultLanguage}`} {...node.attrs} />	
+	</pre>
+</NodeViewWrapper>

package/dist/components/shad-editor/custom/code-extended.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/core';
+declare const CodeExtended: import("svelte").Component<NodeViewProps, {}, "">;
+type CodeExtended = ReturnType<typeof CodeExtended>;
+export default CodeExtended;

package/dist/components/shad-editor/custom/image-extended-component.svelte

@@ -0,0 +1,251 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import { NodeViewWrapper } from 'svelte-tiptap';
+	import type { NodeViewProps } from '@tiptap/core';
+	import { cn } from '../../../utils.js';
+	import { Button, buttonVariants } from '../../ui/button/index.js';
+	import {
+		AlignCenter,
+		AlignLeft,
+		AlignRight,
+		EllipsisVertical,
+		CopyIcon,
+		Fullscreen,
+		Trash,
+		Captions
+	} from 'lucide-svelte';
+	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
+	import { duplicateContent } from './utils.js';
+
+	const { node, editor, selected, deleteNode, updateAttributes }: NodeViewProps = $props();
+
+	const minWidth = 150;
+
+	let imgRef: HTMLImageElement;
+	let nodeRef: HTMLDivElement;
+
+	let resizing = $state(false);
+	let resizingInitialWidth = $state(0);
+	let resizingInitialMouseX = $state(0);
+	let resizingPosition = $state<'left' | 'right'>('left');
+	let openedMore = $state(false);
+
+	function handleResizingPosition(e: MouseEvent, position: 'left' | 'right') {
+		startResize(e);
+		resizingPosition = position;
+	}
+
+	function startResize(e: MouseEvent) {
+		e.preventDefault();
+		resizing = true;
+		resizingInitialMouseX = e.clientX;
+		if (imgRef) resizingInitialWidth = imgRef.offsetWidth;
+	}
+
+	function resize(e: MouseEvent) {
+		if (!resizing) return;
+		let dx = e.clientX - resizingInitialMouseX;
+		if (resizingPosition === 'left') {
+			dx = resizingInitialMouseX - e.clientX;
+		}
+		const newWidth = Math.max(resizingInitialWidth + dx, minWidth);
+		const parentWidth = nodeRef?.parentElement?.offsetWidth || 0;
+		if (newWidth < parentWidth) {
+			updateAttributes({ width: newWidth });
+		}
+	}
+
+	function endResize() {
+		resizing = false;
+		resizingInitialMouseX = 0;
+		resizingInitialWidth = 0;
+	}
+
+	function handleTouchStart(e: TouchEvent, position: 'left' | 'right') {
+		e.preventDefault();
+		resizing = true;
+		resizingPosition = position;
+		resizingInitialMouseX = e.touches[0].clientX;
+		if (imgRef) resizingInitialWidth = imgRef.offsetWidth;
+	}
+
+	function handleTouchMove(e: TouchEvent) {
+		if (!resizing) return;
+		let dx = e.touches[0].clientX - resizingInitialMouseX;
+		if (resizingPosition === 'left') {
+			dx = resizingInitialMouseX - e.touches[0].clientX;
+		}
+		const newWidth = Math.max(resizingInitialWidth + dx, minWidth);
+		const parentWidth = nodeRef?.parentElement?.offsetWidth || 0;
+		if (newWidth < parentWidth) {
+			updateAttributes({ width: newWidth });
+		}
+	}
+
+	function handleTouchEnd() {
+		resizing = false;
+		resizingInitialMouseX = 0;
+		resizingInitialWidth = 0;
+	}
+
+	onMount(() => {
+		// Attach id to nodeRef
+		nodeRef = document.getElementById('resizable-container') as HTMLDivElement;
+
+		// Mouse events
+		window.addEventListener('mousemove', resize);
+		window.addEventListener('mouseup', endResize);
+		// Touch events
+		window.addEventListener('touchmove', handleTouchMove);
+		window.addEventListener('touchend', handleTouchEnd);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('mousemove', resize);
+		window.removeEventListener('mouseup', endResize);
+		window.removeEventListener('touchmove', handleTouchMove);
+		window.removeEventListener('touchend', handleTouchEnd);
+	});
+</script>
+
+<NodeViewWrapper
+	id="resizable-container"
+	class={cn(
+		'relative flex flex-col rounded-md border-2 border-transparent',
+		selected ? 'border-muted-foreground' : '',
+		node.attrs.align === 'left' && 'left-0 -translate-x-0',
+		node.attrs.align === 'center' && 'left-1/2 -translate-x-1/2',
+		node.attrs.align === 'right' && 'left-full -translate-x-full'
+	)}
+	style={`width: ${node.attrs.width}px`}
+>
+	<div class={cn('group relative flex flex-col rounded-md', resizing && '')}>
+		<img
+			bind:this={imgRef}
+			src={node.attrs.src}
+			alt={node.attrs.alt}
+			title={node.attrs.title}
+			class="m-0 object-cover"
+		/>
+		{#if node.attrs.title !== null && node.attrs.title.trim() !== ''}
+			<input
+				value={node.attrs.title}
+				type="text"
+				class="my-1 w-full bg-transparent text-center text-sm text-muted-foreground outline-none"
+				onchange={(e) => {
+					if (e.target === null) return;
+					//@ts-ignore
+					updateAttributes({ title: e.target.value });
+				}}
+			/>
+		{/if}
+
+		{#if editor?.isEditable}
+			<div
+				role="button"
+				tabindex="0"
+				aria-label="Back"
+				class="absolute inset-y-0 z-20 flex w-[25px] cursor-col-resize items-center justify-start p-2"
+				style="left: 0px"
+				onmousedown={(event: MouseEvent) => {
+					handleResizingPosition(event, 'left');
+				}}
+				ontouchstart={(event: TouchEvent) => {
+					handleTouchStart(event, 'left');
+				}}
+			>
+				<div
+					class="z-20 h-[70px] w-1 rounded-xl border bg-muted opacity-0 transition-all group-hover:opacity-100"
+				></div>
+			</div>
+
+			<div
+				role="button"
+				tabindex="0"
+				aria-label="Back"
+				class="absolute inset-y-0 z-20 flex w-[25px] cursor-col-resize items-center justify-end p-2"
+				style="right: 0px"
+				onmousedown={(event: MouseEvent) => {
+					handleResizingPosition(event, 'right');
+				}}
+				ontouchstart={(event: TouchEvent) => {
+					handleTouchStart(event, 'right');
+				}}
+			>
+				<div
+					class="z-20 h-[70px] w-1 rounded-xl border bg-muted opacity-0 transition-all group-hover:opacity-100"
+				></div>
+			</div>
+			<div
+				class={cn(
+					'absolute right-4 top-2 flex items-center gap-1 rounded border bg-background p-1 opacity-0 transition-opacity',
+					!resizing && 'group-hover:opacity-100',
+					openedMore && 'opacity-100'
+				)}
+			>
+				<Button
+					variant="ghost"
+					class={cn('size-6 p-0', node.attrs.align === 'left' && 'bg-muted')}
+					onclick={() => updateAttributes({ align: 'left' })}
+				>
+					<AlignLeft class="size-4" />
+				</Button>
+				<Button
+					variant="ghost"
+					class={cn('size-6 p-0', node.attrs.align === 'center' && 'bg-muted')}
+					onclick={() => updateAttributes({ align: 'center' })}
+				>
+					<AlignCenter class="size-4" />
+				</Button>
+				<Button
+					variant="ghost"
+					class={cn('size-6 p-0', node.attrs.align === 'right' && 'bg-muted')}
+					onclick={() => updateAttributes({ align: 'right' })}
+				>
+					<AlignRight class="size-4" />
+				</Button>
+				<DropdownMenu.Root bind:open={openedMore} onOpenChange={(value) => (openedMore = value)}>
+					<DropdownMenu.Trigger class={buttonVariants({ variant: 'ghost', class: 'size-6 p-0' })}>
+						<EllipsisVertical class="size-4" />
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content align="start" alignOffset={-90} class="mt-1 overflow-auto text-sm">
+						<DropdownMenu.Item
+							onclick={() => {
+								if (node.attrs.title === null || node.attrs.title.trim() === '')
+									updateAttributes({
+										title: 'Image Caption'
+									});
+							}}
+						>
+							<Captions class="mr-1 size-4" /> Caption
+						</DropdownMenu.Item>
+						<DropdownMenu.Item
+							onclick={() => {
+								duplicateContent(editor);
+							}}
+						>
+							<CopyIcon class="mr-1 size-4" /> Duplicate
+						</DropdownMenu.Item>
+						<DropdownMenu.Item
+							onclick={() => {
+								updateAttributes({
+									width: 'fit-content'
+								});
+							}}
+						>
+							<Fullscreen class="mr-1 size-4" /> Full Screen
+						</DropdownMenu.Item>
+						<DropdownMenu.Item
+							onclick={() => {
+								deleteNode();
+							}}
+							class="text-destructive"
+						>
+							<Trash class="mr-1 size-4" /> Delete
+						</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+			</div>
+		{/if}
+	</div>
+</NodeViewWrapper>

package/dist/components/shad-editor/custom/image-extended-component.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NodeViewProps } from '@tiptap/core';
+declare const ImageExtendedComponent: import("svelte").Component<NodeViewProps, {}, "">;
+type ImageExtendedComponent = ReturnType<typeof ImageExtendedComponent>;
+export default ImageExtendedComponent;

package/dist/components/shad-editor/custom/utils.d.ts

@@ -0,0 +1,5 @@
+import type { Editor } from '@tiptap/core';
+import { Node } from '@tiptap/pm/model';
+import { DecorationSet } from '@tiptap/pm/view';
+export default function (doc: Node): DecorationSet;
+export declare const duplicateContent: (editor: Editor) => void;

package/dist/components/shad-editor/custom/utils.js

@@ -0,0 +1,35 @@
+import { Node } from '@tiptap/pm/model';
+import { Decoration, DecorationSet } from '@tiptap/pm/view';
+export default function (doc) {
+    const hexColor = /(#[0-9a-f]{3,6})\b/gi;
+    const decorations = [];
+    doc.descendants((node, position) => {
+        if (!node.text) {
+            return;
+        }
+        Array.from(node.text.matchAll(hexColor)).forEach((match) => {
+            const color = match[0];
+            const index = match.index || 0;
+            const from = position + index;
+            const to = from + color.length;
+            const decoration = Decoration.inline(from, to, {
+                class: 'color',
+                style: `--color: ${color}`
+            });
+            decorations.push(decoration);
+        });
+    });
+    return DecorationSet.create(doc, decorations);
+}
+export const duplicateContent = (editor) => {
+    const { view } = editor;
+    const { state } = view;
+    const { selection } = state;
+    editor
+        .chain()
+        .insertContentAt(selection.to, selection.content().content.firstChild?.toJSON(), {
+        updateSelection: true
+    })
+        .focus(selection.to)
+        .run();
+};

package/dist/components/shad-editor/editor-toolbar.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { type Editor } from '@tiptap/core';
+	import Undo from './icons/undo.svelte';
+	import Redo from './icons/redo.svelte';
+	import { Separator } from '../ui/separator/index.js';
+	import Bold from './icons/bold.svelte';
+	import Italic from './icons/italic.svelte';
+	import Underline from './icons/underline.svelte';
+	import Strikethrough from './icons/strikethrough.svelte';
+	import Link from './icons/link.svelte';
+	import Code from './icons/code.svelte';
+	import BlockQuote from './icons/block-quote.svelte';
+	import Subscript from './icons/subscript.svelte';
+	import ButtleList from './icons/buttle-list.svelte';
+	import OrderedList from './icons/ordered-list.svelte';
+	import TaskList from './icons/task-list.svelte';
+	import Highlighter from './icons/highlighter.svelte';
+	import Superscript from './icons/superscript.svelte';
+	import Textcolor from './icons/textcolor.svelte';
+	import Align from './icons/textalign.svelte';
+	import Quickcolor from './icons/quickcolor.svelte';
+	import Table from './icons/table.svelte';
+	import Image from './icons/image.svelte';
+	import Text from './icons/text.svelte';
+	import SearchReplace from './icons/search-replace.svelte';
+
+	interface Props {
+		editor: Editor;
+		class?: string;
+	}
+
+	let { class: className = '', editor }: Props = $props();
+</script>
+
+<div class="{className ? className + ' ' : ''} shad-editor-toolbar flex w-full items-center overflow-auto border-b p-1 *:mx-1">
+	<Undo {editor} />
+	<Redo {editor} />
+	<Separator orientation="vertical" class="h-fit" />
+	<Text {editor} />
+	<Bold {editor} />
+	<Italic {editor} />
+	<Underline {editor} />
+	<Strikethrough {editor} />
+	<Align {editor} />
+	<Link {editor} />
+	<Code {editor} />
+	<BlockQuote {editor} />
+	<Subscript {editor} />
+	<Superscript {editor} />
+	<ButtleList {editor} />
+	<OrderedList {editor} />
+	<TaskList {editor} />
+	<Image {editor} />
+	<Table {editor} />
+	<Textcolor {editor} />
+	<Highlighter {editor} />
+	<Quickcolor {editor} />
+	<SearchReplace {editor} />
+</div>

package/dist/components/shad-editor/editor-toolbar.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Editor } from '@tiptap/core';
+interface Props {
+    editor: Editor;
+    class?: string;
+}
+declare const EditorToolbar: import("svelte").Component<Props, {}, "">;
+type EditorToolbar = ReturnType<typeof EditorToolbar>;
+export default EditorToolbar;