@mythrantic/svelte-rich-text 1.0.1 → 1.2.0

package/README.md

@@ -1,3 +1,5 @@
+[![Open in Coder](https://coder.valiantlynx.com/open-in-coder.svg)](https://coder.valiantlynx.com/templates/docker/workspace?param.git_repo=git@github.com:mythrantic/svelte-rich-text.git)
+
 # Valiant Rich Text Svelte Component
 
 ![valiantlynx logo](./static/valiantlynx.jpg)

package/dist/components/AGENTS.md

@@ -0,0 +1 @@
+the edra folder is for rich text editor mcp. it not part of the project currently. and more of a feature idea in progress.

package/dist/components/ValiantRichText/commands/index.d.ts

@@ -0,0 +1 @@
+export { default as ToolBarCommands } from './toolbar-commands.js';

package/dist/components/ValiantRichText/commands/index.js

@@ -0,0 +1 @@
+export { default as ToolBarCommands } from './toolbar-commands.js';

package/dist/components/ValiantRichText/commands/toolbar-commands.d.ts

@@ -0,0 +1,3 @@
+import type { EdraToolBarCommands } from './types.js';
+declare const commands: Record<string, EdraToolBarCommands[]>;
+export default commands;

package/dist/components/ValiantRichText/commands/toolbar-commands.js

@@ -0,0 +1,501 @@
+import { isMac } from '../utils.js';
+import Undo from '@lucide/svelte/icons/undo-2';
+import Redo from '@lucide/svelte/icons/redo-2';
+import Heading1 from '@lucide/svelte/icons/heading-1';
+import Heading2 from '@lucide/svelte/icons/heading-2';
+import Heading3 from '@lucide/svelte/icons/heading-3';
+import Heading4 from '@lucide/svelte/icons/heading-4';
+import Link from '@lucide/svelte/icons/link-2';
+import Bold from '@lucide/svelte/icons/bold';
+import Italic from '@lucide/svelte/icons/italic';
+import Underline from '@lucide/svelte/icons/underline';
+import StrikeThrough from '@lucide/svelte/icons/strikethrough';
+import Quote from '@lucide/svelte/icons/quote';
+import Code from '@lucide/svelte/icons/code';
+import Superscript from '@lucide/svelte/icons/superscript';
+import Subscript from '@lucide/svelte/icons/subscript';
+import AlignLeft from '@lucide/svelte/icons/align-left';
+import AlignCenter from '@lucide/svelte/icons/align-center';
+import AlignRight from '@lucide/svelte/icons/align-right';
+import AlighJustify from '@lucide/svelte/icons/align-justify';
+import List from '@lucide/svelte/icons/list';
+import ListOrdered from '@lucide/svelte/icons/list-ordered';
+import ListChecks from '@lucide/svelte/icons/list-checks';
+import Image from '@lucide/svelte/icons/image';
+import Video from '@lucide/svelte/icons/video';
+import Audio from '@lucide/svelte/icons/audio-lines';
+import IFrame from '@lucide/svelte/icons/code-xml';
+import Table from '@lucide/svelte/icons/table';
+import Radical from '@lucide/svelte/icons/radical';
+import SquareRadical from '@lucide/svelte/icons/square-radical';
+import { isTextSelection } from '@tiptap/core';
+import Pilcrow from '@lucide/svelte/icons/pilcrow';
+const commands = {
+    'undo-redo': [
+        {
+            icon: Undo,
+            name: 'undo',
+            tooltip: 'Undo',
+            shortCut: `${isMac ? '⌘' : 'Ctrl+'}Z`,
+            onClick: (editor) => {
+                editor.chain().focus().undo().run();
+            },
+            clickable: (editor) => {
+                return editor.can().undo();
+            }
+        },
+        {
+            icon: Redo,
+            name: 'redo',
+            tooltip: 'Redo',
+            shortCut: `${isMac ? '⌘' : 'Ctrl+'}Y`,
+            onClick: (editor) => {
+                editor.chain().focus().redo().run();
+            },
+            clickable: (editor) => {
+                return editor.can().redo();
+            }
+        }
+    ],
+    headings: [
+        {
+            icon: Heading1,
+            name: 'h1',
+            tooltip: 'Heading 1',
+            shortCut: `${isMac ? '⌘⌥' : 'Ctrl+Alt+'}1`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleHeading({ level: 1 }).run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).setHeading({ level: 1 }).run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleHeading({ level: 1 });
+            },
+            isActive: (editor) => {
+                return editor.isActive('heading', { level: 1 });
+            }
+        },
+        {
+            icon: Heading2,
+            name: 'h2',
+            tooltip: 'Heading 2',
+            shortCut: `${isMac ? '⌘⌥' : 'Ctrl+Alt+'}2`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleHeading({ level: 2 }).run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).setHeading({ level: 2 }).run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleHeading({ level: 2 });
+            },
+            isActive: (editor) => {
+                return editor.isActive('heading', { level: 2 });
+            }
+        },
+        {
+            icon: Heading3,
+            name: 'h3',
+            tooltip: 'Heading 3',
+            shortCut: `${isMac ? '⌘⌥' : 'Ctrl+Alt+'}3`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleHeading({ level: 3 }).run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).setHeading({ level: 3 }).run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleHeading({ level: 3 });
+            },
+            isActive: (editor) => {
+                return editor.isActive('heading', { level: 3 });
+            }
+        },
+        {
+            icon: Heading4,
+            name: 'h4',
+            tooltip: 'Heading 4',
+            shortCut: `${isMac ? '⌘⌥' : 'Ctrl+Alt+'}4`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleHeading({ level: 4 }).run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).setHeading({ level: 4 }).run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleHeading({ level: 4 });
+            },
+            isActive: (editor) => {
+                return editor.isActive('heading', { level: 4 });
+            }
+        }
+    ],
+    'text-formatting': [
+        {
+            icon: Link,
+            name: 'link',
+            tooltip: 'Link',
+            onClick: (editor) => {
+                if (editor.isActive('link')) {
+                    editor.chain().focus().unsetLink().run();
+                }
+                else {
+                    const url = window.prompt('Enter the URL of the link:');
+                    if (url) {
+                        editor.chain().focus().toggleLink({ href: url }).run();
+                    }
+                }
+            },
+            isActive: (editor) => {
+                return editor.isActive('link');
+            }
+        },
+        {
+            icon: Pilcrow,
+            name: 'paragraph',
+            tooltip: 'Paragraph',
+            shortCut: `${isMac ? '⌘⇧' : 'Ctrl+Shift+'}0`,
+            onClick: (editor) => {
+                editor.chain().focus().setParagraph().run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).setParagraph().run();
+            },
+            clickable: (editor) => {
+                return editor.can().setParagraph();
+            },
+            isActive: (editor) => {
+                return editor.isActive('paragraph');
+            }
+        },
+        {
+            icon: Bold,
+            name: 'bold',
+            tooltip: 'Bold',
+            shortCut: `${isMac ? '⌘' : 'Ctrl+'}B`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleBold().run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).setMark('bold').run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleBold();
+            },
+            isActive: (editor) => {
+                return editor.isActive('bold');
+            }
+        },
+        {
+            icon: Italic,
+            name: 'italic',
+            tooltip: 'Italic',
+            shortCut: `${isMac ? '⌘' : 'Ctrl+'}I`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleItalic().run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).setMark('italic').run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleItalic();
+            },
+            isActive: (editor) => {
+                return editor.isActive('italic');
+            }
+        },
+        {
+            icon: Underline,
+            name: 'underline',
+            tooltip: 'Underline',
+            shortCut: `${isMac ? '⌘' : 'Ctrl+'}U`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleUnderline().run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).setMark('underline').run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleUnderline();
+            },
+            isActive: (editor) => {
+                return editor.isActive('underline');
+            }
+        },
+        {
+            icon: StrikeThrough,
+            name: 'strikethrough',
+            tooltip: 'Strikethrough',
+            shortCut: `${isMac ? '⌘⇧' : 'Ctrl+Shift+'}S`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleStrike().run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).setMark('strike').run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleStrike();
+            },
+            isActive: (editor) => {
+                return editor.isActive('strike');
+            }
+        },
+        {
+            icon: Quote,
+            name: 'blockQuote',
+            tooltip: 'BlockQuote',
+            shortCut: `${isMac ? '⌘⇧' : 'Ctrl+Shift+'}B`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleBlockquote().run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).toggleBlockquote().run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleBlockquote();
+            },
+            isActive: (editor) => {
+                return editor.isActive('blockquote');
+            }
+        },
+        {
+            icon: Code,
+            name: 'code',
+            tooltip: 'Inline Code',
+            shortCut: `${isMac ? '⌘' : 'Ctrl+'}E`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleCode().run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).toggleCodeBlock().run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleCode();
+            },
+            isActive: (editor) => {
+                return editor.isActive('code');
+            }
+        },
+        {
+            icon: Superscript,
+            name: 'superscript',
+            tooltip: 'Superscript',
+            shortCut: `${isMac ? '⌘' : 'Ctrl+'}.`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleSuperscript().run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleSuperscript();
+            },
+            isActive: (editor) => {
+                return editor.isActive('superscript');
+            }
+        },
+        {
+            icon: Subscript,
+            name: 'subscript',
+            tooltip: 'Subscript',
+            shortCut: `${isMac ? '⌘' : 'Ctrl+'},`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleSubscript().run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleSubscript();
+            },
+            isActive: (editor) => {
+                return editor.isActive('subscript');
+            }
+        }
+    ],
+    alignment: [
+        {
+            icon: AlignLeft,
+            name: 'align-left',
+            tooltip: 'Align Left',
+            shortCut: `${isMac ? '⌘⇧' : 'Ctrl+Shift+'}L`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleTextAlign('left').run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleTextAlign('left');
+            },
+            isActive: (editor) => editor.isActive({ textAlign: 'left' })
+        },
+        {
+            icon: AlignCenter,
+            name: 'align-center',
+            tooltip: 'Align Center',
+            shortCut: `${isMac ? '⌘⇧' : 'Ctrl+Shift+'}E`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleTextAlign('center').run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleTextAlign('center');
+            },
+            isActive: (editor) => editor.isActive({ textAlign: 'center' })
+        },
+        {
+            icon: AlignRight,
+            name: 'align-right',
+            tooltip: 'Align Right',
+            shortCut: `${isMac ? '⌘⇧' : 'Ctrl+Shift+'}R`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleTextAlign('right').run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleTextAlign('right');
+            },
+            isActive: (editor) => editor.isActive({ textAlign: 'right' })
+        },
+        {
+            icon: AlighJustify,
+            name: 'align-justify',
+            tooltip: 'Align Justify',
+            shortCut: `${isMac ? '⌘⇧' : 'Ctrl+Shift+'}J`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleTextAlign('justify').run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleTextAlign('justify');
+            },
+            isActive: (editor) => editor.isActive({ textAlign: 'justify' })
+        }
+    ],
+    lists: [
+        {
+            icon: List,
+            name: 'bulletList',
+            tooltip: 'Bullet List',
+            shortCut: `${isMac ? '⌘⇧' : 'Ctrl+Shift+'}8`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleBulletList().run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).toggleBulletList().run();
+            },
+            isActive: (editor) => editor.isActive('bulletList')
+        },
+        {
+            icon: ListOrdered,
+            name: 'orderedList',
+            tooltip: 'Ordered List',
+            shortCut: `${isMac ? '⌘⇧' : 'Ctrl+Shift+'}7`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleOrderedList().run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).toggleOrderedList().run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleOrderedList();
+            },
+            isActive: (editor) => {
+                return editor.isActive('orderedList');
+            }
+        },
+        {
+            icon: ListChecks,
+            name: 'taskList',
+            tooltip: 'Task List',
+            shortCut: `${isMac ? '⌘⇧' : 'Ctrl+Shift+'}9`,
+            onClick: (editor) => {
+                editor.chain().focus().toggleTaskList().run();
+            },
+            turnInto: (editor, pos) => {
+                editor.chain().setNodeSelection(pos).toggleTaskList().run();
+            },
+            clickable: (editor) => {
+                return editor.can().toggleTaskList();
+            },
+            isActive: (editor) => {
+                return editor.isActive('taskList');
+            }
+        }
+    ],
+    media: [
+        {
+            icon: Image,
+            name: 'image-placeholder',
+            tooltip: 'Image Placeholder',
+            onClick: (editor) => {
+                editor.chain().focus().insertImagePlaceholder().run();
+            },
+            isActive: (editor) => editor.isActive('image-placeholder')
+        },
+        {
+            icon: Video,
+            name: 'video-placeholder',
+            tooltip: 'Video Placeholder',
+            onClick: (editor) => {
+                editor.chain().focus().insertVideoPlaceholder().run();
+            },
+            isActive: (editor) => editor.isActive('video-placeholder')
+        },
+        {
+            icon: Audio,
+            name: 'audio-placeholder',
+            tooltip: 'Audio Placeholder',
+            onClick: (editor) => {
+                editor.chain().focus().insertAudioPlaceholder().run();
+            },
+            isActive: (editor) => editor.isActive('audio-placeholder')
+        },
+        {
+            icon: IFrame,
+            name: 'iframe-placeholder',
+            tooltip: 'IFrame Placeholder',
+            onClick: (editor) => {
+                editor.chain().focus().insertIFramePlaceholder().run();
+            },
+            isActive: (editor) => editor.isActive('iframe-placeholder')
+        }
+    ],
+    table: [
+        {
+            icon: Table,
+            name: 'table',
+            tooltip: 'Table',
+            onClick: (editor) => {
+                if (editor.isActive('table')) {
+                    const del = confirm('Do you really want to delete this table??');
+                    if (del) {
+                        editor.chain().focus().deleteTable().run();
+                        return;
+                    }
+                }
+                editor.chain().focus().insertTable({ cols: 3, rows: 3, withHeaderRow: false }).run();
+            },
+            isActive: (editor) => editor.isActive('table')
+        }
+    ],
+    math: [
+        {
+            icon: Radical,
+            name: 'mathematics',
+            tooltip: 'Inline Expression',
+            onClick: (editor) => {
+                let latex = 'a^2 + b^2 = c^2';
+                const chain = editor.chain().focus();
+                if (isTextSelection(editor.view.state.selection)) {
+                    const { from, to } = editor.view.state.selection;
+                    latex = editor.view.state.doc.textBetween(from, to);
+                    chain.deleteRange({ from, to });
+                }
+                chain.insertInlineMath({ latex }).run();
+            },
+            isActive: (editor) => editor.isActive('inlineMath')
+        },
+        {
+            icon: SquareRadical,
+            name: 'mathematics',
+            tooltip: 'Block Expression',
+            onClick: (editor) => {
+                const latex = 'a^2 + b^2 = c^2';
+                editor.chain().focus().insertBlockMath({ latex }).run();
+            },
+            isActive: (editor) => editor.isActive('blockMath')
+        }
+    ]
+};
+export default commands;

package/dist/components/ValiantRichText/commands/types.d.ts

@@ -0,0 +1,12 @@
+import type { Editor } from '@tiptap/core';
+import { Icon } from '@lucide/svelte';
+export interface EdraToolBarCommands {
+    name: string;
+    icon: typeof Icon;
+    tooltip?: string;
+    shortCut?: string;
+    onClick?: (editor: Editor) => void;
+    turnInto?: (editor: Editor, pos: number) => void;
+    isActive?: (editor: Editor) => boolean;
+    clickable?: (editor: Editor) => boolean;
+}

package/dist/components/ValiantRichText/commands/types.js

@@ -0,0 +1 @@
+import { Icon } from '@lucide/svelte';

package/dist/components/ValiantRichText/components/BubbleMenu.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { onMount, type Snippet } from 'svelte';
+	import { BubbleMenuPlugin, type BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+	import type { Editor } from '@tiptap/core';
+
+	type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+
+	interface Props
+		extends Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> {
+		editor?: Editor;
+		children?: Snippet<[]>;
+		class?: string;
+		style?: string;
+		pluginKey?: string;
+		updateDelay?: number;
+		resizeDelay?: number;
+	}
+
+	let {
+		editor,
+		shouldShow = null,
+		class: className = '',
+		style = '',
+		children,
+		updateDelay,
+		resizeDelay,
+		pluginKey = 'bubbleMenu',
+		options,
+		...restProps
+	}: Props = $props();
+
+	let element = $state<HTMLElement>();
+
+	onMount(() => {
+		if (!element) return;
+
+		element.style.position = 'absolute';
+		element.style.visibility = 'hidden';
+
+		if (!editor || editor.isDestroyed) {
+			console.warn('BubbleMenu component does not have editor prop or editor is destroyed.');
+			return;
+		}
+
+		const plugin = BubbleMenuPlugin({
+			pluginKey,
+			editor,
+			element,
+			shouldShow,
+			updateDelay,
+			resizeDelay,
+			options
+		});
+
+		editor.registerPlugin(plugin);
+
+		return () => {
+			if (editor && !editor.isDestroyed) {
+				editor.unregisterPlugin(pluginKey);
+			}
+		};
+	});
+</script>
+
+<div bind:this={element} class={`bubble-menu-wrapper ${className}`} {style} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/components/ValiantRichText/components/BubbleMenu.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type Snippet } from 'svelte';
+import { type BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu';
+import type { Editor } from '@tiptap/core';
+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 BubbleMenu: $$__sveltets_2_IsomorphicComponent<Pick<Partial<Omit<Pick<Partial<BubbleMenuPluginProps>, "pluginKey"> & Omit<BubbleMenuPluginProps, "pluginKey">, "element">>, "editor"> & Omit<Omit<Pick<Partial<BubbleMenuPluginProps>, "pluginKey"> & Omit<BubbleMenuPluginProps, "pluginKey">, "element">, "editor"> & {
+    editor?: Editor;
+    children?: Snippet<[]>;
+    class?: string;
+    style?: string;
+    pluginKey?: string;
+    updateDelay?: number;
+    resizeDelay?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type BubbleMenu = InstanceType<typeof BubbleMenu>;
+export default BubbleMenu;

package/dist/components/ValiantRichText/components/DragHandle.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { Editor } from '@tiptap/core';
+	import { onMount } from 'svelte';
+	import GripVertical from '@lucide/svelte/icons/grip-vertical';
+	import { DragHandlePlugin } from '../extensions/drag-handle/index.js';
+
+	interface Props {
+		editor: Editor;
+	}
+
+	const { editor }: Props = $props();
+
+	const pluginKey = 'globalDragHandle';
+
+	onMount(() => {
+		const plugin = DragHandlePlugin({
+			pluginKey: pluginKey,
+			dragHandleWidth: 20,
+			scrollTreshold: 100,
+			dragHandleSelector: '.drag-handle',
+			excludedTags: ['pre', 'code', 'table p'],
+			customNodes: []
+		});
+		editor.registerPlugin(plugin);
+		return () => editor.unregisterPlugin(pluginKey);
+	});
+</script>
+
+<div class="drag-handle">
+	<GripVertical />
+</div>

package/dist/components/{viewBlocks/viewImage.svelte.d.ts → ValiantRichText/components/DragHandle.svelte.d.ts}

@@ -1,3 +1,4 @@
+import type { Editor } from '@tiptap/core';
 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;
@@ -11,12 +12,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ViewImage: $$__sveltets_2_IsomorphicComponent<{
-    base64: string;
-    caption: string;
-    name: string;
+declare const DragHandle: $$__sveltets_2_IsomorphicComponent<{
+    editor: Editor;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ViewImage = InstanceType<typeof ViewImage>;
-export default ViewImage;
+}, {}, {}, "">;
+type DragHandle = InstanceType<typeof DragHandle>;
+export default DragHandle;