@foxui/text 0.4.0

package/dist/components/rich-text-editor/RichTextEditorMenu.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { cn, Toggle, toggleVariants, Tooltip } from '@foxui/core';
+	import type { Editor } from '@tiptap/core';
+	import Select from './Select.svelte';
+	import type { RichTextTypes } from '.';
+
+	let {
+		editor,
+		isBold,
+		isImage,
+		isItalic,
+		isUnderline,
+		isStrikethrough,
+		isLink,
+		clickedLink,
+		selectedType = $bindable('paragraph'),
+		ref = $bindable(null),
+		processImageFile,
+		switchTo
+	}: {
+		editor: Editor | null;
+		isBold: boolean;
+		isImage: boolean;
+		isItalic: boolean;
+		isUnderline: boolean;
+		isStrikethrough: boolean;
+		isLink: boolean;
+		clickedLink: () => void;
+		selectedType: RichTextTypes;
+		ref: HTMLElement | null;
+		processImageFile: (file: File, input: HTMLInputElement) => void;
+		switchTo: (value: RichTextTypes) => void;
+	} = $props();
+
+	$inspect(isBold);
+
+	function handleFileProcess(event: Event) {
+		const input = event.target as HTMLInputElement;
+		if (!input.files?.length) return;
+		const file = input.files[0];
+		if (!file || !file.type.startsWith('image/')) return;
+		processImageFile(file, input);
+	}
+
+	let fileInput = $state<HTMLInputElement | null>(null);
+
+</script>
+
+<div
+	bind:this={ref}
+	class="bg-base-50 dark:bg-base-900 border-base-500/20 dark:border-base-700/20 relative hidden w-fit rounded-2xl border px-1 py-1 shadow-lg backdrop-blur-sm"
+>
+	<Select
+		onValueChange={(value) => {
+			switchTo(value as RichTextTypes);
+		}}
+		type="single"
+		items={[
+			{ value: 'paragraph', label: 'Text' },
+			{ value: 'heading-1', label: 'Heading 1' },
+			{ value: 'heading-2', label: 'Heading 2' },
+			{ value: 'heading-3', label: 'Heading 3' },
+			{ value: 'blockquote', label: 'Blockquote' },
+			{ value: 'code', label: 'Code Block' },
+			{ value: 'bullet-list', label: 'Bullet List' },
+			{ value: 'ordered-list', label: 'Ordered List' }
+		]}
+		bind:value={selectedType}
+	/>
+	<!-- <Tooltip withContext text="Bold" delayDuration={0}>
+		{#snippet child({ props })} -->
+	<Toggle
+		size="sm"
+		onclick={() => editor?.chain().focus().toggleBold().run()}
+		bind:pressed={() => isBold, (bold) => {}}
+	>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+			<path
+				fill-rule="evenodd"
+				d="M5.246 3.744a.75.75 0 0 1 .75-.75h7.125a4.875 4.875 0 0 1 3.346 8.422 5.25 5.25 0 0 1-2.97 9.58h-7.5a.75.75 0 0 1-.75-.75V3.744Zm7.125 6.75a2.625 2.625 0 0 0 0-5.25H8.246v5.25h4.125Zm-4.125 2.251v6h4.5a3 3 0 0 0 0-6h-4.5Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+
+		<span class="sr-only">Bold</span>
+	</Toggle>
+	<!-- {/snippet}
+	</Tooltip> -->
+	<Toggle
+		size="sm"
+		onclick={() => editor?.chain().focus().toggleItalic().run()}
+		bind:pressed={() => isItalic, (italic) => {}}
+	>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+			<path
+				fill-rule="evenodd"
+				d="M10.497 3.744a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-3.275l-5.357 15.002h2.632a.75.75 0 1 1 0 1.5h-7.5a.75.75 0 1 1 0-1.5h3.275l5.357-15.002h-2.632a.75.75 0 0 1-.75-.75Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+
+		<span class="sr-only">Italic</span>
+	</Toggle>
+
+	<Toggle
+		size="sm"
+		onclick={() => editor?.chain().focus().toggleUnderline().run()}
+		bind:pressed={() => isUnderline, (underline) => {}}
+	>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+			<path
+				fill-rule="evenodd"
+				d="M5.995 2.994a.75.75 0 0 1 .75.75v7.5a5.25 5.25 0 1 0 10.5 0v-7.5a.75.75 0 0 1 1.5 0v7.5a6.75 6.75 0 1 1-13.5 0v-7.5a.75.75 0 0 1 .75-.75Zm-3 17.252a.75.75 0 0 1 .75-.75h16.5a.75.75 0 0 1 0 1.5h-16.5a.75.75 0 0 1-.75-.75Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+
+		<span class="sr-only">Underline</span>
+	</Toggle>
+
+	<Toggle
+		size="sm"
+		onclick={() => editor?.chain().focus().toggleStrike().run()}
+		bind:pressed={() => isStrikethrough, (strikethrough) => {}}
+	>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+			<path
+				fill-rule="evenodd"
+				d="M9.657 4.728c-1.086.385-1.766 1.057-1.979 1.85-.214.8.046 1.733.81 2.616.746.862 1.93 1.612 3.388 2.003.07.019.14.037.21.053h8.163a.75.75 0 0 1 0 1.5h-8.24a.66.66 0 0 1-.02 0H3.75a.75.75 0 0 1 0-1.5h4.78a7.108 7.108 0 0 1-1.175-1.074C6.372 9.042 5.849 7.61 6.229 6.19c.377-1.408 1.528-2.38 2.927-2.876 1.402-.497 3.127-.55 4.855-.086A8.937 8.937 0 0 1 16.94 4.6a.75.75 0 0 1-.881 1.215 7.437 7.437 0 0 0-2.436-1.14c-1.473-.394-2.885-.331-3.966.052Zm6.533 9.632a.75.75 0 0 1 1.03.25c.592.974.846 2.094.55 3.2-.378 1.408-1.529 2.38-2.927 2.876-1.402.497-3.127.55-4.855.087-1.712-.46-3.168-1.354-4.134-2.47a.75.75 0 0 1 1.134-.982c.746.862 1.93 1.612 3.388 2.003 1.473.394 2.884.331 3.966-.052 1.085-.384 1.766-1.056 1.978-1.85.169-.628.046-1.33-.381-2.032a.75.75 0 0 1 .25-1.03Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+
+		<span class="sr-only">Strikethrough</span>
+	</Toggle>
+
+	<Toggle
+		size="sm"
+		onclick={() => {
+			clickedLink();
+		}}
+		bind:pressed={() => isLink, (link) => {}}
+	>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+			<path
+				fill-rule="evenodd"
+				d="M19.902 4.098a3.75 3.75 0 0 0-5.304 0l-4.5 4.5a3.75 3.75 0 0 0 1.035 6.037.75.75 0 0 1-.646 1.353 5.25 5.25 0 0 1-1.449-8.45l4.5-4.5a5.25 5.25 0 1 1 7.424 7.424l-1.757 1.757a.75.75 0 1 1-1.06-1.06l1.757-1.757a3.75 3.75 0 0 0 0-5.304Zm-7.389 4.267a.75.75 0 0 1 1-.353 5.25 5.25 0 0 1 1.449 8.45l-4.5 4.5a5.25 5.25 0 1 1-7.424-7.424l1.757-1.757a.75.75 0 1 1 1.06 1.06l-1.757 1.757a3.75 3.75 0 1 0 5.304 5.304l4.5-4.5a3.75 3.75 0 0 0-1.035-6.037.75.75 0 0 1-.354-1Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+
+		<span class="sr-only">Link</span>
+	</Toggle>
+
+	<!-- <Toggle
+		size="sm"
+		onclick={() => {
+			fileInput?.click();
+		}}
+		bind:pressed={() => isImage, (image) => {}}
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			><rect width="18" height="18" x="3" y="3" rx="2" ry="2" /><circle cx="9" cy="9" r="2" /><path
+				d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"
+			/></svg
+		>
+	</Toggle> -->
+
+	<input
+		type="file"
+		accept="image/*"
+		class="hidden"
+		onchange={handleFileProcess}
+		tabindex="-1"
+		bind:this={fileInput}
+	/>
+</div>

package/dist/components/rich-text-editor/RichTextEditorMenu.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Editor } from '@tiptap/core';
+import type { RichTextTypes } from '.';
+type $$ComponentProps = {
+    editor: Editor | null;
+    isBold: boolean;
+    isImage: boolean;
+    isItalic: boolean;
+    isUnderline: boolean;
+    isStrikethrough: boolean;
+    isLink: boolean;
+    clickedLink: () => void;
+    selectedType: RichTextTypes;
+    ref: HTMLElement | null;
+    processImageFile: (file: File, input: HTMLInputElement) => void;
+    switchTo: (value: RichTextTypes) => void;
+};
+declare const RichTextEditorMenu: import("svelte").Component<$$ComponentProps, {}, "ref" | "selectedType">;
+type RichTextEditorMenu = ReturnType<typeof RichTextEditorMenu>;
+export default RichTextEditorMenu;

package/dist/components/rich-text-editor/RichTextLink.d.ts

@@ -0,0 +1,13 @@
+import type { LinkOptions } from '@tiptap/extension-link';
+/**
+ * The options available to customize the `RichTextLink` extension.
+ */
+type RichTextLinkOptions = LinkOptions;
+/**
+ * Custom extension that extends the built-in `Link` extension to add additional input/paste rules
+ * for converting the Markdown link syntax (i.e. `[Doist](https://doist.com)`) into links, and also
+ * adds support for the `title` attribute.
+ */
+declare const RichTextLink: import("@tiptap/core").Mark<LinkOptions, any>;
+export { RichTextLink };
+export type { RichTextLinkOptions };

package/dist/components/rich-text-editor/RichTextLink.js

@@ -0,0 +1,105 @@
+// from https://github.com/Doist/typist/blob/main/src/extensions/rich-text/rich-text-link.ts
+import { InputRule, markInputRule, markPasteRule, PasteRule } from '@tiptap/core';
+import { Link } from '@tiptap/extension-link';
+/**
+ * The input regex for Markdown links with title support, and multiple quotation marks (required
+ * in case the `Typography` extension is being included).
+ */
+const inputRegex = /(?:^|\s)\[([^\]]*)?\]\((\S+)(?: ["“](.+)["”])?\)$/i;
+/**
+ * The paste regex for Markdown links with title support, and multiple quotation marks (required
+ * in case the `Typography` extension is being included).
+ */
+const pasteRegex = /(?:^|\s)\[([^\]]*)?\]\((\S+)(?: ["“](.+)["”])?\)/gi;
+/**
+ * Input rule built specifically for the `Link` extension, which ignores the auto-linked URL in
+ * parentheses (e.g., `(https://doist.dev)`).
+ *
+ * @see https://github.com/ueberdosis/tiptap/discussions/1865
+ */
+function linkInputRule(config) {
+    const defaultMarkInputRule = markInputRule(config);
+    return new InputRule({
+        find: config.find,
+        handler(props) {
+            const { tr } = props.state;
+            defaultMarkInputRule.handler(props);
+            tr.setMeta('preventAutolink', true);
+        }
+    });
+}
+/**
+ * Paste rule built specifically for the `Link` extension, which ignores the auto-linked URL in
+ * parentheses (e.g., `(https://doist.dev)`). This extension was inspired from the multiple
+ * implementations found in a Tiptap discussion at GitHub.
+ *
+ * @see https://github.com/ueberdosis/tiptap/discussions/1865
+ */
+function linkPasteRule(config) {
+    const defaultMarkPasteRule = markPasteRule(config);
+    return new PasteRule({
+        find: config.find,
+        handler(props) {
+            const { tr } = props.state;
+            defaultMarkPasteRule.handler(props);
+            tr.setMeta('preventAutolink', true);
+        }
+    });
+}
+/**
+ * Custom extension that extends the built-in `Link` extension to add additional input/paste rules
+ * for converting the Markdown link syntax (i.e. `[Doist](https://doist.com)`) into links, and also
+ * adds support for the `title` attribute.
+ */
+const RichTextLink = Link.extend({
+    inclusive: false,
+    addOptions() {
+        return {
+            ...this.parent?.(),
+            openOnClick: 'whenNotEditable'
+        };
+    },
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            title: {
+                default: null
+            }
+        };
+    },
+    addInputRules() {
+        return [
+            linkInputRule({
+                find: inputRegex,
+                type: this.type,
+                // We need to use `pop()` to remove the last capture groups from the match to
+                // satisfy Tiptap's `markPasteRule` expectation of having the content as the last
+                // capture group in the match (this makes the attribute order important)
+                getAttributes(match) {
+                    return {
+                        title: match.pop()?.trim(),
+                        href: match.pop()?.trim()
+                    };
+                }
+            })
+        ];
+    },
+    addPasteRules() {
+        return [
+            linkPasteRule({
+                find: pasteRegex,
+                type: this.type,
+                // We need to use `pop()` to remove the last capture groups from the match to
+                // satisfy Tiptap's `markInputRule` expectation of having the content as the last
+                // capture group in the match (this makes the attribute order important)
+                getAttributes(match) {
+                    return {
+                        title: match.pop()?.trim(),
+                        href: match.pop()?.trim()
+                    };
+                }
+            })
+        ];
+    }
+});
+export { RichTextLink };

package/dist/components/rich-text-editor/Select.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { Button, cn, toggleVariants } from '@foxui/core';
+	import { Select, type WithoutChildren } from 'bits-ui';
+	import Icon from './Icon.svelte';
+
+	type Props = WithoutChildren<Select.RootProps> & {
+		placeholder?: string;
+		items: { value: string; label: string; disabled?: boolean }[];
+		contentProps?: WithoutChildren<Select.ContentProps>;
+	};
+
+	let { value = $bindable(), items, contentProps, placeholder, ...restProps }: Props = $props();
+</script>
+
+<Select.Root bind:value={value as never} {...restProps}>
+	<Select.Trigger>
+		{#snippet child({ props })}
+			<button {...props} class={cn(toggleVariants({ size: 'sm' }), 'gap-1')}>
+				{#if value}
+					<Icon name={value as any} />
+				{:else}
+					<span class="size-3.5">?</span>
+				{/if}
+
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="!size-2.5"
+				>
+					<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+				</svg>
+			</button>
+		{/snippet}
+	</Select.Trigger>
+	<Select.Portal>
+		<Select.Content
+			{...contentProps}
+			class={cn(
+				'bg-base-50/50 border-base-500/20 overflow-hidden rounded-2xl border shadow-lg backdrop-blur-xl',
+				'dark:bg-base-900/50 dark:border-base-500/10',
+				'motion-safe:animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+				contentProps?.class
+			)}
+			sideOffset={6}
+		>
+			<Select.ScrollUpButton>up</Select.ScrollUpButton>
+			<Select.Viewport class="divide-base-300/30 dark:divide-base-800 divide-y text-sm">
+				{#each items as { value, label, disabled } (value)}
+					<Select.Item {value} {label} {disabled}>
+						{#snippet children({ selected })}
+							<div
+								class={cn(
+									'text-base-900 dark:text-base-200 group relative isolate flex min-w-28 cursor-pointer items-center gap-3 px-3 py-2 font-medium [&_svg]:size-3.5',
+									selected
+										? 'text-accent-700 dark:text-accent-400 bg-accent-500/10'
+										: 'hover:bg-accent-500/10'
+								)}
+							>
+								<Icon name={value as any} />
+								{label}
+							</div>
+						{/snippet}
+					</Select.Item>
+				{/each}
+			</Select.Viewport>
+			<Select.ScrollDownButton>down</Select.ScrollDownButton>
+		</Select.Content>
+	</Select.Portal>
+</Select.Root>

package/dist/components/rich-text-editor/Select.svelte.d.ts

@@ -0,0 +1,13 @@
+import { Select, type WithoutChildren } from 'bits-ui';
+type Props = WithoutChildren<Select.RootProps> & {
+    placeholder?: string;
+    items: {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }[];
+    contentProps?: WithoutChildren<Select.ContentProps>;
+};
+declare const Select: import("svelte").Component<Props, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/rich-text-editor/code.css

@@ -0,0 +1,142 @@
+/* Basic editor styles */
+.tiptap {
+	:first-child {
+		margin-top: 0;
+	}
+
+	pre {
+		background: var(--color-base-200);
+		border-radius: 1rem;
+		color: var(--color-base-900);
+		font-family: 'JetBrainsMono', monospace;
+		border: 1px solid var(--color-base-300);
+		margin: 1.5rem 0;
+		padding: 0.75rem 1rem;
+
+		code {
+			background: none;
+			color: inherit;
+			font-size: 0.8rem;
+			padding: 0;
+		}
+
+		/* Code styling */
+		.hljs-comment,
+		.hljs-quote {
+			color: var(--color-base-500);
+		}
+
+		.hljs-variable,
+		.hljs-template-variable,
+		.hljs-attribute,
+		.hljs-tag,
+		.hljs-regexp,
+		.hljs-link,
+		.hljs-name,
+		.hljs-selector-id,
+		.hljs-selector-class {
+			color: var(--color-accent-600);
+		}
+
+		.hljs-number,
+		.hljs-meta,
+		.hljs-built_in,
+		.hljs-builtin-name,
+		.hljs-literal,
+		.hljs-type,
+		.hljs-params {
+			color: oklch(from var(--color-accent-600) l c calc(h + 30));
+		}
+
+		.hljs-string,
+		.hljs-symbol,
+		.hljs-bullet {
+			color: oklch(from var(--color-accent-600) l c calc(h + 60));
+		}
+
+		.hljs-title,
+		.hljs-section {
+			color: oklch(from var(--color-accent-700) l c calc(h + 15));
+		}
+
+		.hljs-keyword,
+		.hljs-selector-tag {
+			color: oklch(from var(--color-accent-700) l c calc(h + 45));
+		}
+
+		.hljs-emphasis {
+			font-style: italic;
+		}
+
+		.hljs-strong {
+			font-weight: 700;
+		}
+	}
+}
+
+.dark .tiptap {
+	pre {
+		background: var(--color-base-900);
+		color: var(--color-base-200);
+		border: 1px solid var(--color-base-800);
+
+		code {
+			background: none;
+			color: inherit;
+			font-size: 0.8rem;
+			padding: 0;
+		}
+
+		/* Code styling */
+		.hljs-comment,
+		.hljs-quote {
+			color: var(--color-base-400);
+		}
+
+		.hljs-variable,
+		.hljs-template-variable,
+		.hljs-attribute,
+		.hljs-tag,
+		.hljs-regexp,
+		.hljs-link,
+		.hljs-name,
+		.hljs-selector-id,
+		.hljs-selector-class {
+			color: var(--color-accent-400);
+		}
+
+		.hljs-number,
+		.hljs-meta,
+		.hljs-built_in,
+		.hljs-builtin-name,
+		.hljs-literal,
+		.hljs-type,
+		.hljs-params {
+			color: oklch(from var(--color-accent-400) l c calc(h + 30));
+		}
+
+		.hljs-string,
+		.hljs-symbol,
+		.hljs-bullet {
+			color: oklch(from var(--color-accent-400) l c calc(h + 60));
+		}
+
+		.hljs-title,
+		.hljs-section {
+			color: oklch(from var(--color-accent-300) l c calc(h + 15));
+		}
+
+		.hljs-keyword,
+		.hljs-selector-tag {
+			color: oklch(from var(--color-accent-300) l c calc(h + 45));
+		}
+
+		.hljs-emphasis {
+			font-style: italic;
+		}
+
+		.hljs-strong {
+			font-weight: 700;
+		}
+	}
+}

package/dist/components/rich-text-editor/image-upload/ImageUploadComponent.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { NodeViewProps } from '@tiptap/core';
+	import { onMount } from 'svelte';
+	import { NodeViewWrapper } from 'svelte-tiptap';
+
+	let props: NodeViewProps = $props();
+
+	let progress = $state(0);
+
+	const handleUpload = async (files?: File[]) => {
+		console.log(props.node, props.node.attrs);
+
+		const url = await props.extension.options.upload(files, (event) => {
+			console.log('progress', event);
+			progress = event.progress;
+		});
+
+		if (url) {
+			const pos = props.getPos();
+			const filename = files?.[0]?.name.replace(/\.[^/.]+$/, '') || 'unknown';
+
+			props.deleteNode();
+			props.editor
+				.chain()
+				.focus()
+				.insertContentAt(pos, [
+					{
+						type: 'image',
+						attrs: { src: props.node.attrs.preview, alt: filename, title: filename }
+					}
+				])
+				.run();
+		}
+	};
+
+	onMount(() => {
+		console.log('node', props);
+		handleUpload();
+	});
+</script>
+
+<NodeViewWrapper class="relative">
+	<img src={props.node.attrs.preview} alt="Upload preview" class="" />
+	<div class="absolute left-0 right-0 bottom-0 h-1 bg-accent-500/30">
+		<div class="h-full bg-accent-500 transition-all duration-300" style="width: {progress * 100}%"></div>
+	</div>
+</NodeViewWrapper>

package/dist/components/rich-text-editor/image-upload/ImageUploadComponent.svelte.d.ts

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

package/dist/components/rich-text-editor/image-upload/ImageUploadNode.d.ts

@@ -0,0 +1,45 @@
+import { Node } from '@tiptap/core';
+export type UploadFunction = (file: File, onProgress?: (event: {
+    progress: number;
+}) => void, abortSignal?: AbortSignal) => Promise<string>;
+export interface ImageUploadNodeOptions {
+    /**
+     * Acceptable file types for upload.
+     * @default 'image/*'
+     */
+    accept?: string;
+    /**
+     * Maximum number of files that can be uploaded.
+     * @default 1
+     */
+    limit?: number;
+    /**
+     * Maximum file size in bytes (0 for unlimited).
+     * @default 0
+     */
+    maxSize?: number;
+    /**
+     * Preview image URL.
+     */
+    preview?: string;
+    /**
+     * Function to handle the upload process.
+     */
+    upload?: UploadFunction;
+    /**
+     * Callback for upload errors.
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Callback for successful uploads.
+     */
+    onSuccess?: (url: string) => void;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        imageUpload: {
+            setImageUploadNode: (options?: ImageUploadNodeOptions) => ReturnType;
+        };
+    }
+}
+export declare const ImageUploadNode: Node<ImageUploadNodeOptions, any>;