@widgetic/design-system 0.3.68

package/dist/components/shad-editor/icons/text.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import {
+		Heading1,
+		Heading2,
+		Heading3,
+		Pilcrow,
+		FileJson,
+		ChevronDown,
+		Check,
+		Minus
+	} from 'lucide-svelte';
+	import { type Editor } from '@tiptap/core';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
+	import Button from '../../ui/button/button.svelte';
+
+	let { editor }: { editor: Editor } = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger>
+					<Button variant="ghost" size="sm" class="h-8">
+						{#if editor.isActive('heading', { level: 1 })}
+							<Heading1 />
+						{:else if editor.isActive('heading', { level: 2 })}
+							<Heading2 />
+						{:else if editor.isActive('heading', { level: 3 })}
+							<Heading3 />
+						{:else if editor.isActive('paragraph')}
+							<Pilcrow />
+						{:else if editor.isActive('codeBlock')}
+							<FileJson />
+						{:else}
+							<Minus />
+						{/if}
+						<ChevronDown class="!size-3 text-muted-foreground" />
+					</Button>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content class="w-56">
+					<DropdownMenu.Item
+						onclick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+						closeOnSelect={false}
+					>
+						<Heading1 /> Heading 1
+						{#if editor.isActive('heading', { level: 1 })}
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+						{/if}
+					</DropdownMenu.Item>
+					<DropdownMenu.Item
+						onclick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+						closeOnSelect={false}
+					>
+						<Heading2 /> Heading 2
+						{#if editor.isActive('heading', { level: 2 })}
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+						{/if}
+					</DropdownMenu.Item>
+					<DropdownMenu.Item
+						onclick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+						closeOnSelect={false}
+					>
+						<Heading3 /> Heading 3
+						{#if editor.isActive('heading', { level: 3 })}
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+						{/if}
+					</DropdownMenu.Item>
+					<DropdownMenu.Item
+						onclick={() => editor.chain().focus().setParagraph().run()}
+						closeOnSelect={false}
+					>
+						<Pilcrow /> Paragraph
+						{#if editor.isActive('paragraph')}
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+						{/if}
+					</DropdownMenu.Item>
+					<DropdownMenu.Item
+						onclick={() => editor.chain().focus().toggleCodeBlock().run()}
+						closeOnSelect={false}
+					>
+						<FileJson /> Code Block
+						{#if editor.isActive('codeBlock')}
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+						{/if}
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Text Formatting</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/text.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const Text: import("svelte").Component<$$ComponentProps, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/dist/components/shad-editor/icons/textalign.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import {
+		AlignCenter,
+		AlignLeft,
+		AlignRight,
+		AlignJustify,
+		ChevronDown,
+		Check
+	} from 'lucide-svelte';
+	import { type Editor } from '@tiptap/core';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import * as DropdownMenu from '../../ui/dropdown-menu/index.js';
+	import Button from '../../ui/button/button.svelte';
+
+	let { editor }: { editor: Editor } = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger>
+					<Button variant="ghost" size="sm" class="h-8">
+						{#if editor.isActive({ textAlign: 'left' })}
+							<AlignLeft />
+						{:else if editor.isActive({ textAlign: 'center' })}
+							<AlignCenter />
+						{:else if editor.isActive({ textAlign: 'right' })}
+							<AlignRight />
+						{:else if editor.isActive({ textAlign: 'justify' })}
+							<AlignJustify />
+						{:else}
+							<AlignLeft />
+						{/if}
+						<ChevronDown class="!size-3 text-muted-foreground" />
+					</Button>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content class="w-56">
+					<DropdownMenu.Item
+						onclick={() => editor.chain().focus().setTextAlign('left').run()}
+						closeOnSelect={false}
+					>
+						<AlignLeft /> Align Left
+						{#if editor.isActive({ textAlign: 'left' })}
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+						{/if}
+					</DropdownMenu.Item>
+					<DropdownMenu.Item
+						onclick={() => editor.chain().focus().setTextAlign('center').run()}
+						closeOnSelect={false}
+					>
+						<AlignCenter /> Align Center
+						{#if editor.isActive({ textAlign: 'center' })}
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+						{/if}
+					</DropdownMenu.Item>
+					<DropdownMenu.Item
+						onclick={() => editor.chain().focus().setTextAlign('right').run()}
+						closeOnSelect={false}
+					>
+						<AlignRight /> Align Right
+						{#if editor.isActive({ textAlign: 'right' })}
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+						{/if}
+					</DropdownMenu.Item>
+					<DropdownMenu.Item
+						onclick={() => editor.chain().focus().setTextAlign('justify').run()}
+						closeOnSelect={false}
+					>
+						<AlignJustify /> Align Justify
+						{#if editor.isActive({ textAlign: 'justify' })}
+							<Check class="absolute right-2 !size-3 text-muted-foreground" />
+						{/if}
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Text Alignment</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/textalign.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const Textalign: import("svelte").Component<$$ComponentProps, {}, "">;
+type Textalign = ReturnType<typeof Textalign>;
+export default Textalign;

package/dist/components/shad-editor/icons/textcolor.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { Baseline } from 'lucide-svelte';
+	import { X } from 'lucide-svelte';
+	import { ChevronDown } from 'lucide-svelte';
+	import { type Editor } from '@tiptap/core';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { cn } from '../../../utils.js';
+	import * as Popover from '../../ui/popover/index.js';
+	import { mode } from 'mode-watcher';
+	import ColorPicker from 'svelte-awesome-color-picker';
+
+	interface Props {
+		editor: Editor;
+		color?: string;
+	}
+
+	let { editor, color = $bindable('') }: Props = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Popover.Root>
+				<Popover.Trigger>
+					<Button
+						variant="ghost"
+						size="sm"
+						class={cn('h-8', editor.isActive('textStyle') && 'bg-muted')}
+						onclick={() => editor.chain().focus()}
+					>
+						<Baseline />
+						<ChevronDown class="!size-3 text-muted-foreground" />
+					</Button>
+				</Popover.Trigger>
+				<Popover.Content class="bg-popover shadow-lg *:my-2">
+					<div class="flex items-center justify-between">
+						<h1 class="text-[1.2rem] font-bold">Pick a text color</h1>
+						<Popover.Close>
+							<X class="size-4 text-muted-foreground" />
+						</Popover.Close>
+					</div>
+					<div class:dark={$mode === 'dark'}>
+						<ColorPicker
+							bind:hex={color}
+							sliderDirection="vertical"
+							isTextInput={false}
+							isAlpha
+							on:input={(event) => {
+								if (event.detail.hex === undefined) return;
+								color = event.detail.hex;
+								editor.chain().focus().setColor(color).run();
+							}}
+							isDialog={false}
+							--picker-indicator-size="1rem"
+							--input-size="1rem"
+						/>
+					</div>
+					<div class="flex items-center justify-end gap-2">
+						<Button
+							variant="outline"
+							size="sm"
+							class="border-destructive text-destructive hover:bg-destructive hover:text-foreground"
+							onclick={() => editor.chain().focus().unsetColor().run()}
+							>Remove Color
+						</Button>
+					</div>
+				</Popover.Content>
+			</Popover.Root>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Text Color</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/textcolor.svelte.d.ts

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

package/dist/components/shad-editor/icons/underline.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Underline } from 'lucide-svelte';
+	import { type Editor } from '@tiptap/core';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import { Button } from '../../ui/button/index.js';
+	import { cn } from '../../../utils.js';
+
+	let { editor }: { editor: Editor } = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Button
+				variant="ghost"
+				class={cn('size-8', editor.isActive('underline') && 'bg-muted')}
+				onclick={() => editor.chain().focus().toggleUnderline().run()}
+			>
+				<Underline />
+			</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Underline (⌘U)</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/underline.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Underline } from 'lucide-svelte';
+import { type Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const Underline: import("svelte").Component<$$ComponentProps, {}, "">;
+type Underline = ReturnType<typeof Underline>;
+export default Underline;

package/dist/components/shad-editor/icons/undo.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Undo } from 'lucide-svelte';
+	import { type Editor } from '@tiptap/core';
+	import * as Tooltip from '../../ui/tooltip/index.js';
+	import { Button } from '../../ui/button/index.js';
+
+	let { editor }: { editor: Editor } = $props();
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			<Button
+				variant="ghost"
+				class="size-8 p-0"
+				onclick={() => editor.chain().focus().undo().run()}
+				disabled={!editor.can().chain().focus().undo().run()}
+			>
+				<Undo />
+			</Button>
+		</Tooltip.Trigger>
+		<Tooltip.Content>
+			<p>Undo (⌘Z)</p>
+		</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

package/dist/components/shad-editor/icons/undo.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Undo } from 'lucide-svelte';
+import { type Editor } from '@tiptap/core';
+type $$ComponentProps = {
+    editor: Editor;
+};
+declare const Undo: import("svelte").Component<$$ComponentProps, {}, "">;
+type Undo = ReturnType<typeof Undo>;
+export default Undo;

package/dist/components/shad-editor/index.d.ts

@@ -0,0 +1,4 @@
+import ShadEditor from './shad-editor.svelte';
+export { ShadEditor };
+export { type Editor as TipTapEditor } from '@tiptap/core';
+export { type Level as TipTapEditorLevel } from '@tiptap/extension-heading';

package/dist/components/shad-editor/index.js

@@ -0,0 +1,5 @@
+import ShadEditor from './shad-editor.svelte';
+export { ShadEditor };
+// export Editor and Level from '@tiptap';
+export {} from '@tiptap/core';
+export {} from '@tiptap/extension-heading';

package/dist/components/shad-editor/onedark.css

@@ -0,0 +1,87 @@
+/* One Dark and Light Theme for Highlight.js using Tailwind CSS */
+.tiptap pre code {
+	@apply text-[#383a42] dark:text-[#abb2bf];
+}
+
+/* Comment */
+.hljs-comment,
+.hljs-quote {
+	@apply italic text-[#a0a1a7] dark:text-[#5c6370];
+}
+
+/* Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-regexp,
+.hljs-deletion {
+	@apply text-[#e45649] dark:text-[#e06c75];
+}
+
+/* Orange */
+.hljs-number,
+.hljs-built_in,
+.hljs-literal,
+.hljs-type,
+.hljs-params,
+.hljs-meta,
+.hljs-link {
+	@apply text-[#986801] dark:text-[#d19a66];
+}
+
+/* Yellow */
+.hljs-attribute {
+	@apply text-[#c18401] dark:text-[#e5c07b];
+}
+
+/* Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+	@apply text-[#50a14f] dark:text-[#98c379];
+}
+
+/* Blue */
+.hljs-title,
+.hljs-section {
+	@apply text-[#4078f2] dark:text-[#61afef];
+}
+
+/* Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+	@apply text-[#a626a4] dark:text-[#c678dd];
+}
+
+/* Cyan */
+.hljs-emphasis {
+	@apply italic text-[#0184bc] dark:text-[#56b6c2];
+}
+
+.hljs-strong {
+	@apply font-bold;
+}
+
+/* Base styles */
+.hljs-doctag,
+.hljs-formula {
+	@apply text-[#a626a4] dark:text-[#c678dd];
+}
+
+.hljs-attr,
+.hljs-subst {
+	@apply text-[#383a42] dark:text-[#abb2bf];
+}
+
+/* Line highlights */
+.hljs-addition {
+	@apply bg-[#e6ffed] dark:bg-[#283428];
+}
+
+.hljs-deletion {
+	@apply bg-[#ffeef0] dark:bg-[#342828];
+}

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

@@ -0,0 +1,153 @@
+<script lang="ts">
+	import './editor.css';
+
+	import { Editor, type Content } from '@tiptap/core';
+	import StarterKit from '@tiptap/starter-kit';
+	import { onDestroy, onMount } from 'svelte';
+	import EditorToolbar from './editor-toolbar.svelte';
+	import { cn } from '../../utils.js';
+
+	import { Subscript } from '@tiptap/extension-subscript';
+	import { Superscript } from '@tiptap/extension-superscript';
+	import { Underline } from '@tiptap/extension-underline';
+	import { Link } from '@tiptap/extension-link';
+	import TaskList from '@tiptap/extension-task-list';
+	import TaskItem from '@tiptap/extension-task-item';
+	import TextStyle from '@tiptap/extension-text-style';
+	import Color from '@tiptap/extension-color';
+	import Highlight from '@tiptap/extension-highlight';
+	import Typography from '@tiptap/extension-typography';
+	import TextAlign from '@tiptap/extension-text-align';
+
+	import { SmilieReplacer } from './custom/Extentions/SmilieReplacer.js';
+	import { ColorHighlighter } from './custom/Extentions/ColorHighlighter.js';
+	import Table from '@tiptap/extension-table';
+	import TableRow from '@tiptap/extension-table-row';
+	import TableHeader from '@tiptap/extension-table-header';
+	import TableCell from '@tiptap/extension-table-cell';
+	import { ImageExtension } from './custom/Extentions/ImageExtention.js';
+	import { SvelteNodeViewRenderer } from 'svelte-tiptap';
+	import CodeExtended from './custom/code-extended.svelte';
+
+	// Lowlight
+	import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
+	import { all, createLowlight } from 'lowlight';
+	import './onedark.css';
+	import SearchAndReplace from './custom/Extentions/SearchAndReplace.js';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher<{
+		mount: { editor: Editor };
+		update: { html: string };
+	}>();
+
+	interface Props {
+		class?: string;
+		style?: string;
+		content?: Content;
+		showToolbar?: boolean;
+	}
+
+	let { class: className = '', style = '', content = $bindable(null), showToolbar = true }: Props = $props();
+
+	const lowlight = createLowlight(all);
+
+	let editor: Editor | undefined = $state();
+	let element: HTMLElement | undefined = $state();
+
+	onMount(() => {
+		editor = new Editor({
+			element,
+			content,
+			editorProps: {
+				attributes: {
+					class:
+						'm-auto p-2 focus:outline-none flex-1 prose text-foreground min-w-full max-h-full overflow-auto dark:prose-invert *:my-2'
+				}
+			},
+			extensions: [
+				StarterKit.configure({
+					orderedList: {
+						HTMLAttributes: {
+							class: 'list-decimal'
+						}
+					},
+					bulletList: {
+						HTMLAttributes: {
+							class: 'list-disc'
+						}
+					},
+					heading: {
+						levels: [1, 2, 3, 4],
+						HTMLAttributes: {
+							class: 'tiptap-heading'
+						}
+					}
+				}),
+				Typography,
+				TextStyle,
+				Color.configure({
+					types: ['textStyle']
+				}),
+				TextAlign.configure({
+					types: ['heading', 'paragraph']
+				}),
+				Highlight.configure({ multicolor: true }),
+				Underline,
+				Superscript,
+				Subscript,
+				Link.configure({
+					openOnClick: false,
+					autolink: true,
+					defaultProtocol: 'https',
+					HTMLAttributes: {
+						target: '_blank',
+						rel: 'noopener noreferrer'
+					}
+				}),
+				TaskList,
+				TaskItem.configure({
+					nested: true
+				}),
+				SearchAndReplace,
+				CodeBlockLowlight.configure({
+					lowlight
+				}).extend({
+					name: 'customCodeBlock',
+					addNodeView() {
+						return SvelteNodeViewRenderer(CodeExtended);
+					}
+				}),
+				SmilieReplacer,
+				ColorHighlighter,
+				Table.configure({
+					allowTableNodeSelection: true,
+					resizable: true
+				}),
+				TableRow,
+				TableHeader,
+				TableCell,
+				ImageExtension
+			],
+			autofocus: true,
+			onUpdate: ({ editor }) => {
+				const html = editor.getHTML();
+				content = html;
+				dispatch('update', { html });
+			}
+		});
+
+		dispatch('mount', { editor });
+	});
+
+	onDestroy(() => {
+		if (editor) editor.destroy();
+	});
+</script>
+
+<div class={cn('flex flex-col rounded border', className)} style={style}>
+	{#if editor && showToolbar}
+		<EditorToolbar {editor} class='shad-editor-toolbar' />
+	{/if}
+	<div bind:this={element} spellcheck="false" class="shad-editor-content h-full w-full flex-1 overflow-auto"></div>
+</div>

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

@@ -0,0 +1,34 @@
+import './editor.css';
+import { Editor, type Content } from '@tiptap/core';
+import './onedark.css';
+interface Props {
+    class?: string;
+    style?: string;
+    content?: Content;
+    showToolbar?: boolean;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ShadEditor: $$__sveltets_2_IsomorphicComponent<Props, {
+    mount: CustomEvent<{
+        editor: Editor;
+    }>;
+    update: CustomEvent<{
+        html: string;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "content">;
+type ShadEditor = InstanceType<typeof ShadEditor>;
+export default ShadEditor;