@tulip-systems/core 0.8.3 → 0.9.0

package/dist/src/components/common/status.mjs

@@ -0,0 +1,55 @@
+import { cn } from "../../lib/utils/cn.mjs";
+import { Badge } from "../ui/badge.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/common/status.tsx
+/**
+* Create status config
+*/
+const createStatusConfig = (config) => config;
+/**
+* Find the status object from the config
+* @param {TStatus[]} values
+* @param {string} status
+* @returns {TStatus | undefined}
+*/
+function findStatus(values, status) {
+	return values.find((s) => s.value === status);
+}
+/**
+* Create status variants
+* @param {TStatus[]} values
+* @returns {Record<string, string>}
+*/
+function createStatusVariants(values) {
+	return values.reduce((acc, { value, className }) => {
+		acc[value] = className;
+		return acc;
+	}, {});
+}
+/**
+* Status column
+*/
+function StatusField(props) {
+	const status = findStatus(props.config, props.status ?? "");
+	if (!status) return /* @__PURE__ */ jsx("div", {});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex items-center gap-2", props.variants({ status: status.value })),
+		children: [/* @__PURE__ */ jsx(status.icon, { className: cn("size-4", props.variants({ status: status.value })) }), /* @__PURE__ */ jsx("span", { children: status.label })]
+	});
+}
+/**
+* Status badge
+*/
+function StatusBadge(props) {
+	const status = findStatus(props.config, props.status ?? "");
+	if (!status) return /* @__PURE__ */ jsx("div", {});
+	return /* @__PURE__ */ jsxs(Badge, {
+		variant: "outline",
+		className: cn("flex items-center gap-2", props.variants({ status: status.value })),
+		children: [/* @__PURE__ */ jsx(status.icon, { className: cn("size-3", props.variants({ status: status.value })) }), /* @__PURE__ */ jsx("span", { children: status.label })]
+	});
+}
+
+//#endregion
+export { StatusBadge, StatusField, createStatusConfig, createStatusVariants, findStatus };

package/dist/src/components/editor/components/content.client.d.mts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/editor/components/content.client.d.ts
+declare function EditorContent(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { EditorContent };

package/dist/src/components/editor/components/content.client.mjs

@@ -0,0 +1,16 @@
+"use client";
+
+import { TooltipProvider } from "../../ui/tooltip.client.mjs";
+import { EditorContext } from "./editor.client.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { EditorContent } from "@tiptap/react";
+
+//#region src/components/editor/components/content.client.tsx
+function EditorContent$1() {
+	const { editor } = useContext(EditorContext);
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(EditorContent, { editor }) });
+}
+
+//#endregion
+export { EditorContent$1 as EditorContent };

package/dist/src/components/editor/components/editor.client.d.mts

@@ -0,0 +1,48 @@
+import { EditorExtensionsConfig, EditorExtensionsConfigResult } from "../lib/extensions.mjs";
+import { EditorJSONContent } from "../lib/types.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as react from "react";
+import { PropsWithChildren } from "react";
+import { Content, Editor, EditorOptions } from "@tiptap/react";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/editor/components/editor.client.d.ts
+/**
+ * Editor context
+ */
+type EditorContextValue = {
+  editor: Editor;
+  extensions: EditorExtensionsConfigResult;
+};
+declare const EditorContext: react.Context<EditorContextValue>;
+/**
+ * Editor variants
+ */
+declare const editorVariants: (props?: ({
+  variant?: "default" | "table" | "preview" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+/**
+ * Editor context provider
+ */
+type EditorProps = VariantProps<typeof editorVariants> & Pick<EditorOptions["editorProps"], "attributes"> & PropsWithChildren<{
+  value?: Content;
+  extensions?: Partial<EditorExtensionsConfig>;
+  onUpdate?: (value: EditorJSONContent) => void;
+  onBlur?: (value: EditorJSONContent) => void;
+  disabled?: boolean;
+  className?: string;
+}>;
+declare function Editor$1({
+  value,
+  extensions,
+  onUpdate,
+  onBlur,
+  disabled,
+  variant,
+  className,
+  children,
+  attributes
+}: EditorProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { Editor$1 as Editor, EditorContext, EditorProps, editorVariants };

package/dist/src/components/editor/components/editor.client.mjs

@@ -0,0 +1,55 @@
+"use client";
+
+import { cn } from "../../../lib/utils/cn.mjs";
+import { editorExtensionsConfigToExtensions, flattenEditorExtensionsConfig } from "../lib/extensions.mjs";
+import { editorImageVariants, editorProseVariants } from "../lib/variants.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { createContext } from "react";
+import { useEditor } from "@tiptap/react";
+
+//#region src/components/editor/components/editor.client.tsx
+const EditorContext = createContext({});
+/**
+* Editor variants
+*/
+const editorVariants = cva("", {
+	variants: { variant: {
+		default: "border-input rounded-lg border [&_.editor-content]:p-3 [&_.editor-content[contenteditable='false']]:pointer-events-none [&_.editor-content[contenteditable='false']]:cursor-not-allowed [&_.editor-content[contenteditable='false']]:opacity-50",
+		table: "[&_.editor-content[contenteditable='false']]:pointer-events-none [&_.editor-content[contenteditable='false']]:cursor-not-allowed [&_.editor-content[contenteditable='false']]:opacity-50",
+		preview: "bg-transparent [&_.editor-content]:p-0 [&_.editor-content]:min-h-0"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Editor$1({ value, extensions, onUpdate, onBlur, disabled, variant, className, children, attributes }) {
+	const editor = useEditor({
+		extensions: editorExtensionsConfigToExtensions(extensions),
+		content: value,
+		onUpdate: ({ editor }) => onUpdate?.(editor.getJSON()),
+		onBlur: ({ editor }) => onBlur?.(editor.getJSON()),
+		editable: !disabled,
+		injectCSS: false,
+		immediatelyRender: false,
+		editorProps: {
+			transformPastedHTML: (html) => html.replace(/<img.*?>/g, ""),
+			attributes: {
+				...attributes,
+				class: cn("editor-content text-sm max-w-full focus:outline-none", editorProseVariants(), editorImageVariants(), className)
+			}
+		}
+	});
+	if (!editor) return null;
+	return /* @__PURE__ */ jsx(EditorContext.Provider, {
+		value: {
+			editor,
+			extensions: flattenEditorExtensionsConfig(extensions)
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className: editorVariants({ variant }),
+			children
+		})
+	});
+}
+
+//#endregion
+export { Editor$1 as Editor, EditorContext, editorVariants };

package/dist/src/components/editor/components/menu-nodes.client.mjs

@@ -0,0 +1,92 @@
+import { Button } from "../../ui/button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu.client.mjs";
+import { EditorContext } from "./editor.client.mjs";
+import { ChevronDown, Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon, Heading5Icon, ListIcon, ListOrderedIcon, TextIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+
+//#region src/components/editor/components/menu-nodes.client.tsx
+const blocks = [
+	{
+		label: "Paragraaf",
+		icon: TextIcon,
+		selected: (editor) => editor.isActive("paragraph"),
+		handler: (editor) => editor.commands.setParagraph(),
+		hidden: (extensions) => !extensions.paragraph
+	},
+	{
+		label: "Titel 1",
+		icon: Heading1Icon,
+		selected: (editor) => editor.isActive("heading", { level: 1 }),
+		handler: (editor) => editor.commands.setHeading({ level: 1 }),
+		hidden: (extensions) => !extensions.heading
+	},
+	{
+		label: "Titel 2",
+		icon: Heading2Icon,
+		selected: (editor) => editor.isActive("heading", { level: 2 }),
+		handler: (editor) => editor.commands.setHeading({ level: 2 }),
+		hidden: (extensions) => !extensions.heading
+	},
+	{
+		label: "Titel 3",
+		icon: Heading3Icon,
+		selected: (editor) => editor.isActive("heading", { level: 3 }),
+		handler: (editor) => editor.commands.setHeading({ level: 3 }),
+		hidden: (extensions) => !extensions.heading
+	},
+	{
+		label: "Titel 4",
+		icon: Heading4Icon,
+		selected: (editor) => editor.isActive("heading", { level: 4 }),
+		handler: (editor) => editor.commands.setHeading({ level: 4 }),
+		hidden: (extensions) => !extensions.heading
+	},
+	{
+		label: "Titel 5",
+		icon: Heading5Icon,
+		selected: (editor) => editor.isActive("heading", { level: 5 }),
+		handler: (editor) => editor.commands.setHeading({ level: 5 }),
+		hidden: (extensions) => !extensions.heading
+	},
+	{
+		label: "Numbered List",
+		icon: ListOrderedIcon,
+		selected: (editor) => editor.isActive("orderedList"),
+		handler: (editor) => editor.commands.toggleOrderedList(),
+		hidden: (extensions) => !extensions.orderedList
+	},
+	{
+		label: "Bulleted List",
+		icon: ListIcon,
+		selected: (editor) => editor.isActive("bulletList"),
+		handler: (editor) => editor.commands.toggleBulletList(),
+		hidden: (extensions) => !extensions.bulletList
+	}
+];
+function EditorMenuNodes() {
+	const { editor, extensions } = useContext(EditorContext);
+	const selectedBlock = blocks.find((block) => block.selected(editor));
+	const Icon = selectedBlock?.icon;
+	const filteredBlocks = blocks.filter((block) => !block.hidden(extensions));
+	if (filteredBlocks.length === 0) return null;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "outline",
+			size: "sm",
+			className: "flex items-center gap-8 p-2",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2",
+				children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "size-3.5" }), selectedBlock?.label ?? "Select a block"]
+			}), /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5" })]
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, { children: filteredBlocks.map(({ label, icon: Icon, handler }) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+		onClick: () => handler(editor),
+		className: "flex items-center gap-2",
+		children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "size-3.5" }), label]
+	}, label)) })] });
+}
+
+//#endregion
+export { EditorMenuNodes };

package/dist/src/components/editor/components/menu.client.d.mts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+import { BubbleMenu } from "@tiptap/react/menus";
+
+//#region src/components/editor/components/menu.client.d.ts
+declare function EditorMenuFixed(props: React.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+declare function EditorMenuBubble(props: ComponentProps<typeof BubbleMenu>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { EditorMenuBubble, EditorMenuFixed };

package/dist/src/components/editor/components/menu.client.mjs

@@ -0,0 +1,168 @@
+import { cn } from "../../../lib/utils/cn.mjs";
+import { Button } from "../../ui/button.mjs";
+import { EditorContext } from "./editor.client.mjs";
+import { ColorPicker } from "../../ui/color-picker.client.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.client.mjs";
+import { EditorMenuNodes } from "./menu-nodes.client.mjs";
+import { BaselineIcon, BoldIcon, EraserIcon, ItalicIcon, PaintBucketIcon, RedoIcon, StrikethroughIcon, UnderlineIcon, UndoIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { BubbleMenu } from "@tiptap/react/menus";
+
+//#region src/components/editor/components/menu.client.tsx
+function EditorMenuFixed(props) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("z-10 overflow-auto border-input border-b bg-muted/30 p-2", props.className),
+		children: /* @__PURE__ */ jsxs(EditorMenuContent, { children: [
+			/* @__PURE__ */ jsx(EditorMenuUndoRedo, {}),
+			/* @__PURE__ */ jsx(EditorMenuNodes, {}),
+			/* @__PURE__ */ jsx(EditorMenuMarks, {}),
+			/* @__PURE__ */ jsx(EditorMenuColor, {})
+		] })
+	});
+}
+function EditorMenuBubble(props) {
+	const { editor } = useContext(EditorContext);
+	return /* @__PURE__ */ jsx(BubbleMenu, {
+		...props,
+		editor,
+		options: {
+			...props.options,
+			strategy: "fixed"
+		},
+		className: cn("z-10 rounded-lg border border-input bg-muted p-2", props.className),
+		children: /* @__PURE__ */ jsx(EditorMenuContent, { children: /* @__PURE__ */ jsx(EditorMenuMarks, {}) })
+	});
+}
+function EditorMenuContent(props) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-6",
+		children: props.children
+	});
+}
+/**
+* Editor menu undo/redo
+*/
+function EditorMenuUndoRedo() {
+	const { editor, extensions } = useContext(EditorContext);
+	if (!extensions.undoRedo) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [/* @__PURE__ */ jsx(Button, {
+			onClick: () => editor.commands.undo(),
+			disabled: !editor?.can().undo(),
+			type: "button",
+			"aria-label": "Undo",
+			size: "icon",
+			className: "p-2",
+			variant: "outline",
+			children: /* @__PURE__ */ jsx(UndoIcon, { className: "size-3.5" })
+		}), /* @__PURE__ */ jsx(Button, {
+			onClick: () => editor.commands.redo(),
+			disabled: !editor?.can().redo(),
+			type: "button",
+			"aria-label": "Redo",
+			size: "icon",
+			className: "p-2",
+			variant: "outline",
+			children: /* @__PURE__ */ jsx(RedoIcon, { className: "size-3.5" })
+		})]
+	});
+}
+/**
+* Editor menu marks
+*/
+function EditorMenuMarks() {
+	const { editor, extensions } = useContext(EditorContext);
+	if (!extensions.bold && !extensions.italic && !extensions.underline && !extensions.strike) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [
+			extensions.bold && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon",
+				variant: editor?.isActive("bold") ? "secondary" : "outline",
+				onClick: () => editor.chain().focus().toggleBold().run(),
+				className: "border",
+				children: /* @__PURE__ */ jsx(BoldIcon, { className: "h-3.5 w-3.5" })
+			}),
+			extensions.italic && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon",
+				variant: editor?.isActive("italic") ? "secondary" : "outline",
+				onClick: () => editor.chain().focus().toggleItalic().run(),
+				className: "border",
+				children: /* @__PURE__ */ jsx(ItalicIcon, { className: "size-3.5" })
+			}),
+			extensions.underline && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon",
+				variant: editor?.isActive("underline") ? "secondary" : "outline",
+				onClick: () => editor.chain().focus().toggleUnderline().run(),
+				className: "border",
+				children: /* @__PURE__ */ jsx(UnderlineIcon, { className: "size-3.5" })
+			}),
+			extensions.strike && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon",
+				variant: editor?.isActive("strike") ? "secondary" : "outline",
+				onClick: () => editor.chain().focus().toggleStrike().run(),
+				className: "border",
+				children: /* @__PURE__ */ jsx(StrikethroughIcon, { className: "size-3.5" })
+			})
+		]
+	});
+}
+/**
+* Editor menu alignment
+*/
+function EditorMenuColor() {
+	const { editor, extensions } = useContext(EditorContext);
+	if (!extensions.color && !extensions.highlight) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [
+			extensions.color && /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					size: "icon",
+					variant: "outline",
+					children: /* @__PURE__ */ jsx(BaselineIcon, { className: "size-3.5" })
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				className: "w-fit p-0",
+				children: /* @__PURE__ */ jsx(ColorPicker, { onValueChange: (color) => editor.chain().focus().setColor(color).run() })
+			})] }),
+			extensions.highlight && /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx(Button, {
+					size: "icon",
+					variant: "outline",
+					disabled: !editor?.can().setHighlight(),
+					children: /* @__PURE__ */ jsx(PaintBucketIcon, { className: "size-3.5" })
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				className: "w-fit p-0",
+				children: /* @__PURE__ */ jsx(ColorPicker, { onValueChange: (color) => editor.chain().focus().setHighlight({ color }).run() })
+			})] }),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon",
+				variant: "outline",
+				className: "border",
+				onClick: () => {
+					editor.commands.unsetColor();
+					editor.commands.unsetHighlight();
+				},
+				children: /* @__PURE__ */ jsx(EraserIcon, { className: "h-4 w-4" })
+			})
+		]
+	});
+}
+/**
+* Editor menu image
+*/
+
+//#endregion
+export { EditorMenuBubble, EditorMenuFixed };

package/dist/src/components/editor/extensions/file-handler/extension.d.mts

@@ -0,0 +1,20 @@
+import { FileHandlerOptions } from "@tiptap/extension-file-handler";
+import "@tiptap/core";
+
+//#region src/components/editor/extensions/file-handler/extension.d.ts
+interface FileHandlerOptions$1 extends FileHandlerOptions {
+  /**
+   * Callback function invoked when a image reference is removed from the editor. Receives the node ID of the removed node.
+   * @type {(assetId: string) => void}
+   * @default undefined
+   **/
+  onReferenceRemoved?: (assetId: string) => void;
+  /**
+   * Callback function invoked when a image reference is added to the editor. Receives the node ID of the added node.
+   * @type {(assetId: string) => void}
+   * @default undefined
+   **/
+  onReferenceAdded?: (assetId: string) => void;
+}
+//#endregion
+export { FileHandlerOptions$1 as FileHandlerOptions };

package/dist/src/components/editor/extensions/file-handler/extension.mjs

@@ -0,0 +1,39 @@
+"use client";
+
+import { collectImageIds, diffIds } from "./utils.mjs";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { FileHandler } from "@tiptap/extension-file-handler";
+
+//#region src/components/editor/extensions/file-handler/extension.ts
+/**
+* File Handler extension for Tiptap Editor
+*/
+const FileHandler$1 = FileHandler.extend({
+	addOptions() {
+		return {
+			...this.parent?.(),
+			onReferenceRemoved: void 0,
+			onReferenceAdded: void 0
+		};
+	},
+	addProseMirrorPlugins() {
+		const parent = this.parent?.() ?? [];
+		const key = new PluginKey("fileHandlerItemTracker");
+		return [...parent, new Plugin({
+			key,
+			appendTransaction: (trs, oldState, newState) => {
+				if (!trs.some((tr) => tr.docChanged)) return null;
+				const onReferenceRemoved = this.options.onReferenceRemoved;
+				const onReferenceAdded = this.options.onReferenceAdded;
+				if (!onReferenceRemoved && !onReferenceAdded) return null;
+				const { removed, added } = diffIds(collectImageIds(oldState.doc), collectImageIds(newState.doc));
+				for (const id of removed) onReferenceRemoved?.(id);
+				for (const id of added) onReferenceAdded?.(id);
+				return null;
+			}
+		})];
+	}
+});
+
+//#endregion
+export { FileHandler$1 as FileHandler };

package/dist/src/components/editor/extensions/file-handler/strategy.d.mts

@@ -0,0 +1,26 @@
+import { FileHandlerOptions } from "./extension.mjs";
+import { PresignUploadInput, StorageAsset } from "../../../../modules/storage/lib/validators.mjs";
+import { UploadClient, UploadHooks } from "../../../../modules/storage/lib/upload.client.mjs";
+
+//#region src/components/editor/extensions/file-handler/strategy.d.ts
+/**
+ * Handle File Handler props
+ */
+type CreateFileHandlerUploadStrategyProps = {
+  variables: Pick<PresignUploadInput, "visibility" | "metadata">;
+  uploadClient: UploadClient;
+  uploadHooks?: UploadHooks;
+  allowedMimeTypes?: string[];
+  onUploadCompleted?: (asset: StorageAsset) => Promise<void> | void;
+  onUploadFailed?: (error: unknown) => Promise<void> | void;
+};
+declare function createFileHandlerUploadStrategy({
+  variables,
+  uploadClient,
+  uploadHooks,
+  onUploadCompleted,
+  onUploadFailed,
+  allowedMimeTypes
+}: CreateFileHandlerUploadStrategyProps): FileHandlerOptions;
+//#endregion
+export { createFileHandlerUploadStrategy };

package/dist/src/components/editor/extensions/file-handler/strategy.mjs

@@ -0,0 +1,110 @@
+import { TextSelection } from "@tiptap/pm/state";
+
+//#region src/components/editor/extensions/file-handler/strategy.ts
+function createFileHandlerUploadStrategy({ variables, uploadClient, uploadHooks, onUploadCompleted, onUploadFailed, allowedMimeTypes }) {
+	const handleUpload = async (editor, files, startPos) => {
+		const insertPos = startPos;
+		for (const file of files) {
+			/**
+			* Prepare upload
+			*/
+			const input = uploadClient.prepareUpload({
+				file,
+				...variables
+			});
+			const imageType = editor.schema.nodes.image;
+			if (!imageType) {
+				console.error("Image type not found");
+				return;
+			}
+			try {
+				/**
+				* Create skeleton node
+				*/
+				const skeletonNode = editor.schema.nodes.skeleton?.create({
+					imageNodeId: input.uploadId,
+					width: 500,
+					height: 500
+				});
+				/**
+				* Insert skeleton node into the document
+				*/
+				if (skeletonNode) {
+					const tr = editor.state.tr.insert(insertPos, skeletonNode);
+					tr.setSelection(TextSelection.create(tr.doc, insertPos + skeletonNode.nodeSize));
+					tr.setMeta("addToHistory", false);
+					editor.view.dispatch(tr);
+				}
+				/**
+				* Upload the file
+				*/
+				const asset = await uploadClient.upload(input, uploadHooks);
+				/**
+				* Replace skeleton with image node
+				*/
+				const replacedTr = editor.state.tr;
+				let replaced = false;
+				replacedTr.doc.descendants((node, pos) => {
+					if (node.type.name === "skeleton" && node.attrs?.imageNodeId === input.uploadId) {
+						const imageNode = imageType.create({
+							assetId: asset.id,
+							alt: file.name,
+							fileName: file.name,
+							width: node.attrs.width ?? 500
+						});
+						replacedTr.replaceWith(pos, pos + node.nodeSize, imageNode);
+						replaced = true;
+						return false;
+					}
+				});
+				if (replaced) editor.view.dispatch(replacedTr);
+				else {
+					const tr = editor.state.tr;
+					const imageNode = imageType.create({
+						assetId: asset.id,
+						alt: file.name,
+						fileName: file.name,
+						width: 500
+					});
+					tr.insert(insertPos, imageNode);
+					editor.view.dispatch(tr);
+				}
+				await onUploadCompleted?.(asset);
+			} catch (err) {
+				console.error("Upload error:", err);
+				/**
+				* Remove the pending image node from the document
+				*/
+				const tr = editor.state.tr;
+				tr.doc.descendants((node, pos) => {
+					if (node.type.name === "skeleton" && node.attrs?.imageNodeId === input.uploadId) {
+						tr.delete(pos, pos + node.nodeSize);
+						return false;
+					}
+				});
+				editor.view.dispatch(tr);
+				await onUploadFailed?.(err);
+			}
+		}
+	};
+	return {
+		allowedMimeTypes,
+		onDrop: async (editor, files, pos) => {
+			await handleUpload(editor, files, pos);
+		},
+		onPaste: async (editor, files, htmlContent) => {
+			if (htmlContent?.length) return;
+			const startPos = editor.state.selection.anchor;
+			await handleUpload(editor, files, startPos);
+		},
+		onReferenceRemoved: async (assetId) => {
+			await uploadClient.deleteAsset(assetId);
+		},
+		onReferenceAdded: async (assetId) => {
+			await uploadClient.restoreAsset(assetId);
+		}
+	};
+}
+
+//#endregion
+export { createFileHandlerUploadStrategy };