@chelone/vue 0.6.0 → 0.9.0

package/dist/components/rich-text-input/rich-text-image-form.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,95 @@
+import { useTranslate } from "../../i18n/use-translate.js";
+import button_default from "../ui/button.js";
+import input_default from "../ui/input.js";
+import { getRichTextImageConfig } from "./rich-text-image.js";
+import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, toDisplayString, unref, useTemplateRef, withCtx, withKeys, withModifiers } from "vue";
+import { isSafeImageSrc } from "@chelone/core";
+// src/components/rich-text-input/rich-text-image-form.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	"data-slot": "rich-text-image-form",
+	class: "flex flex-wrap items-center gap-2 border-t p-2"
+};
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = {
+	key: 0,
+	role: "alert",
+	class: "w-full text-destructive text-xs"
+};
+var rich_text_image_form_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "rich-text-image-form",
+	props: { editor: {} },
+	emits: ["close"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const fileInput = useTemplateRef("fileInput");
+		const translate = useTranslate();
+		const url = ref("");
+		const invalid = ref(false);
+		function apply() {
+			const src = url.value.trim();
+			if (!src) return;
+			const allowDataImages = getRichTextImageConfig(props.editor)?.rules.allowBase64 ?? false;
+			if (!isSafeImageSrc(src, { allowDataImages })) {
+				invalid.value = true;
+				return;
+			}
+			props.editor.chain().focus().setImages([{ src }]).run();
+			emit("close");
+		}
+		function choose(event) {
+			if (!(event.target instanceof HTMLInputElement)) return;
+			const files = Array.from(event.target.files ?? []);
+			event.target.value = "";
+			if (!files.length) return;
+			props.editor.chain().focus().setImages(files).run();
+			emit("close");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				createVNode(input_default, {
+					modelValue: url.value,
+					"onUpdate:modelValue": [_cache[0] || (_cache[0] = ($event) => url.value = $event), _cache[1] || (_cache[1] = ($event) => invalid.value = false)],
+					type: "text",
+					class: "min-w-48 flex-1",
+					"aria-label": unref(translate)("chelone.rich_text.image_url", { _: "Image URL" }),
+					"aria-invalid": invalid.value,
+					onKeydown: withKeys(withModifiers(apply, ["prevent"]), ["enter"])
+				}, null, 8, [
+					"modelValue",
+					"aria-label",
+					"aria-invalid",
+					"onKeydown"
+				]),
+				createVNode(button_default, {
+					size: "sm",
+					onClick: apply
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.rich_text.image_apply", { _: "Apply" })), 1)]),
+					_: 1
+				}),
+				createVNode(button_default, {
+					size: "sm",
+					variant: "outline",
+					onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {}, ["prevent"])),
+					onClick: _cache[3] || (_cache[3] = ($event) => fileInput.value?.click())
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(translate)("chelone.rich_text.image_upload", { _: "Upload" })), 1)]),
+					_: 1
+				}),
+				createElementVNode("input", {
+					ref_key: "fileInput",
+					ref: fileInput,
+					type: "file",
+					accept: "image/*",
+					multiple: "",
+					hidden: "",
+					"aria-label": unref(translate)("chelone.rich_text.image_upload", { _: "Upload" }),
+					onChange: choose
+				}, null, 40, _hoisted_2),
+				invalid.value ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(unref(translate)("chelone.rich_text.invalid_image_url", { _: "Enter a link to an image" })), 1)) : createCommentVNode("", true)
+			]);
+		};
+	}
+});
+export { rich_text_image_form_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/rich-text-input/rich-text-image-view.js

@@ -0,0 +1,4 @@
+import rich_text_image_view_vue_vue_type_script_setup_true_lang_default from "./rich-text-image-view.vue_vue_type_script_setup_true_lang.js";
+// src/components/rich-text-input/rich-text-image-view.vue
+var rich_text_image_view_default = rich_text_image_view_vue_vue_type_script_setup_true_lang_default;
+export { rich_text_image_view_default as default };

package/dist/components/rich-text-input/rich-text-image-view.vue.d.ts

@@ -0,0 +1,93 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    editor: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["editor"]>;
+        required: true;
+    };
+    node: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["node"]>;
+        required: true;
+    };
+    decorations: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["decorations"]>;
+        required: true;
+    };
+    selected: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["selected"]>;
+        required: true;
+    };
+    extension: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["extension"]>;
+        required: true;
+    };
+    getPos: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["getPos"]>;
+        required: true;
+    };
+    updateAttributes: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["updateAttributes"]>;
+        required: true;
+    };
+    deleteNode: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["deleteNode"]>;
+        required: true;
+    };
+    view: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["view"]>;
+        required: true;
+    };
+    innerDecorations: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["innerDecorations"]>;
+        required: true;
+    };
+    HTMLAttributes: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["HTMLAttributes"]>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    editor: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["editor"]>;
+        required: true;
+    };
+    node: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["node"]>;
+        required: true;
+    };
+    decorations: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["decorations"]>;
+        required: true;
+    };
+    selected: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["selected"]>;
+        required: true;
+    };
+    extension: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["extension"]>;
+        required: true;
+    };
+    getPos: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["getPos"]>;
+        required: true;
+    };
+    updateAttributes: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["updateAttributes"]>;
+        required: true;
+    };
+    deleteNode: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["deleteNode"]>;
+        required: true;
+    };
+    view: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["view"]>;
+        required: true;
+    };
+    innerDecorations: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["innerDecorations"]>;
+        required: true;
+    };
+    HTMLAttributes: {
+        type: import("vue").PropType<import("@tiptap/core").NodeViewProps["HTMLAttributes"]>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/rich-text-input/rich-text-image-view.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,222 @@
+import { useTranslate } from "../../i18n/use-translate.js";
+import button_default from "../ui/button.js";
+import { richTextImageActionIcons, richTextImageCloseIcon, richTextImageIcon, richTextImageSpinnerIcon } from "./rich-text-icons.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, onScopeDispose, openBlock, ref, renderList, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, watch, withCtx } from "vue";
+import { clampRichTextImageWidth, copyRichTextImage, downloadRichTextImage, isSafeImageSrc, richTextImageActions, richTextImageUploadState } from "@chelone/core";
+import { NodeViewWrapper, nodeViewProps } from "@tiptap/vue-3";
+// src/components/rich-text-input/rich-text-image-view.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"src",
+	"alt",
+	"title",
+	"width"
+];
+var _hoisted_2 = {
+	key: 1,
+	"data-slot": "rich-text-image-error",
+	class: "flex items-center gap-2 rounded-md border border-destructive/50 border-dashed px-3 py-2 text-destructive text-sm"
+};
+var _hoisted_3 = ["aria-label"];
+var _hoisted_4 = [
+	"data-side",
+	"aria-label",
+	"onKeydown",
+	"onPointerdown"
+];
+var _hoisted_5 = ["aria-label"];
+var _hoisted_6 = ["src", "alt"];
+var rich_text_image_view_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "rich-text-image-view",
+	props: nodeViewProps,
+	setup(__props) {
+		const props = __props;
+		const translate = useTranslate();
+		const image = useTemplateRef("image");
+		const overlay = useTemplateRef("overlay");
+		const viewing = ref(false);
+		const failedSrc = ref(null);
+		const dragWidth = ref();
+		let drag;
+		watch(viewing, async (open) => {
+			if (!open) return;
+			await nextTick();
+			overlay.value?.focus();
+		});
+		const closeOnEscape = (event) => {
+			if (event.key === "Escape") viewing.value = false;
+		};
+		document.addEventListener("keydown", closeOnEscape);
+		const revision = ref(0);
+		const uploads = richTextImageUploadState(props.editor);
+		const refresh = () => {
+			revision.value++;
+		};
+		props.editor.on("transaction", refresh);
+		uploads.listeners.add(refresh);
+		onScopeDispose(() => {
+			props.editor.off("transaction", refresh);
+			uploads.listeners.delete(refresh);
+			document.removeEventListener("keydown", closeOnEscape);
+			drag?.abort();
+		});
+		const editable = computed(() => {
+			revision.value;
+			return props.editor.isEditable;
+		});
+		const uploading = computed(() => {
+			revision.value;
+			return uploads.pending.has(props.node.attrs.src);
+		});
+		const source = computed(() => typeof props.node.attrs.src === "string" && isSafeImageSrc(props.node.attrs.src, { allowDataImages: true }) ? props.node.attrs.src : null);
+		const src = computed(() => source.value !== failedSrc.value ? source.value : null);
+		const width = computed(() => numericWidth(props.node.attrs.width));
+		const actions = computed(() => richTextImageActions.filter((action) => action.id === "remove" ? editable.value : src.value !== null));
+		function numericWidth(value) {
+			const parsed = typeof value === "string" ? Number.parseFloat(value) : value;
+			return typeof parsed === "number" && Number.isFinite(parsed) ? parsed : void 0;
+		}
+		function dragHandle(event, side) {
+			event.preventDefault();
+			drag?.abort();
+			const controller = new AbortController();
+			drag = controller;
+			const initial = numericWidth(props.node.attrs.width) ?? (image.value?.offsetWidth || 60);
+			const maximum = props.editor.view.dom.clientWidth || Number.POSITIVE_INFINITY;
+			const start = event.clientX;
+			const options = { signal: controller.signal };
+			let latest = initial;
+			window.addEventListener("pointermove", (move) => {
+				const change = (move.clientX - start) * (side === "left" ? -1 : 1);
+				latest = clampRichTextImageWidth(initial + change, {
+					min: 60,
+					max: maximum
+				});
+				dragWidth.value = latest;
+			}, options);
+			const finish = () => {
+				controller.abort();
+				drag = void 0;
+				dragWidth.value = void 0;
+				props.updateAttributes({ width: latest });
+			};
+			window.addEventListener("pointerup", finish, options);
+			window.addEventListener("pointercancel", finish, options);
+		}
+		function resize(event, side) {
+			if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+			event.preventDefault();
+			const pos = props.getPos();
+			const current = numericWidth((pos === void 0 ? props.node.attrs : props.editor.state.doc.nodeAt(pos)?.attrs)?.width) ?? (image.value?.offsetWidth || 60);
+			const step = event.key === "ArrowRight" === (side === "right") ? 10 : -10;
+			props.updateAttributes({ width: clampRichTextImageWidth(current + step, {
+				min: 60,
+				max: props.editor.view.dom.clientWidth || Number.POSITIVE_INFINITY
+			}) });
+		}
+		function handleLabel(side) {
+			return side === "left" ? translate("chelone.rich_text.image.resize_left", { _: "Resize image from the left edge" }) : translate("chelone.rich_text.image.resize_right", { _: "Resize image from the right edge" });
+		}
+		function run(action) {
+			if (action === "remove") {
+				props.deleteNode();
+				return;
+			}
+			const source = src.value;
+			if (!source) return;
+			if (action === "view") {
+				viewing.value = true;
+				return;
+			}
+			(action === "download" ? downloadRichTextImage(source, props.node.attrs.alt ?? "") : action === "copyImage" ? copyRichTextImage(source) : navigator.clipboard.writeText(source)).catch(() => {});
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(NodeViewWrapper), {
+				"data-slot": "rich-text-image",
+				"data-selected": _ctx.selected || void 0,
+				class: "group relative my-3 w-fit max-w-full"
+			}, {
+				default: withCtx(() => [
+					src.value ? (openBlock(), createElementBlock("img", {
+						key: 0,
+						ref_key: "image",
+						ref: image,
+						src: src.value,
+						alt: _ctx.node.attrs.alt ?? "",
+						title: _ctx.node.attrs.title ?? void 0,
+						width: dragWidth.value ?? width.value,
+						draggable: "",
+						"data-drag-handle": "",
+						class: normalizeClass(["h-auto max-w-full rounded-md", _ctx.selected && "ring-2 ring-ring"]),
+						onError: _cache[0] || (_cache[0] = ($event) => failedSrc.value = src.value)
+					}, null, 42, _hoisted_1)) : (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(), createBlock(resolveDynamicComponent(unref(richTextImageIcon)), { class: "size-4" })), createTextVNode(" " + toDisplayString(unref(translate)("chelone.rich_text.image.error", { _: "The image could not be loaded" })), 1)])),
+					uploading.value ? (openBlock(), createElementBlock("div", {
+						key: 2,
+						role: "status",
+						"aria-label": unref(translate)("chelone.rich_text.image.uploading", { _: "Uploading image" }),
+						class: "absolute inset-0 flex items-center justify-center rounded-md bg-background/60"
+					}, [(openBlock(), createBlock(resolveDynamicComponent(unref(richTextImageSpinnerIcon)), { class: "size-6 animate-spin" }))], 8, _hoisted_3)) : createCommentVNode("", true),
+					createElementVNode("div", {
+						"data-slot": "rich-text-image-actions",
+						class: normalizeClass(["absolute top-2 right-2 flex gap-1 rounded-md border bg-background p-1 opacity-0 shadow-sm focus-within:opacity-100 group-hover:opacity-100", _ctx.selected && "opacity-100"])
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(actions.value, (action) => {
+						return openBlock(), createBlock(button_default, {
+							key: action.id,
+							variant: "ghost",
+							size: "icon",
+							class: "size-8",
+							"aria-label": unref(translate)(action.labelKey, { _: action.defaultLabel }),
+							title: unref(translate)(action.labelKey, { _: action.defaultLabel }),
+							onClick: ($event) => run(action.id)
+						}, {
+							default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(richTextImageActionIcons)[action.id])))]),
+							_: 2
+						}, 1032, [
+							"aria-label",
+							"title",
+							"onClick"
+						]);
+					}), 128))], 2),
+					_ctx.selected && editable.value && src.value ? (openBlock(), createElementBlock(Fragment, { key: 3 }, renderList(["left", "right"], (side) => {
+						return createElementVNode("button", {
+							key: side,
+							type: "button",
+							"data-slot": "rich-text-image-handle",
+							"data-side": side,
+							"aria-label": handleLabel(side),
+							class: normalizeClass(["absolute top-1/2 h-10 w-2 -translate-y-1/2 cursor-ew-resize touch-none rounded-full border border-background bg-primary outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", side === "left" ? "-left-1" : "-right-1"]),
+							onKeydown: ($event) => resize($event, side),
+							onPointerdown: ($event) => dragHandle($event, side)
+						}, null, 42, _hoisted_4);
+					}), 64)) : createCommentVNode("", true),
+					(openBlock(), createBlock(Teleport, { to: "body" }, [viewing.value && src.value ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						ref_key: "overlay",
+						ref: overlay,
+						role: "dialog",
+						"aria-modal": "true",
+						"aria-label": _ctx.node.attrs.alt || unref(translate)("chelone.rich_text.image.view", { _: "View image" }),
+						tabindex: "-1",
+						"data-slot": "rich-text-image-overlay",
+						class: "fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4 outline-none",
+						onClick: _cache[2] || (_cache[2] = ($event) => viewing.value = false)
+					}, [createVNode(button_default, {
+						variant: "secondary",
+						size: "icon",
+						class: "absolute top-4 right-4 size-8",
+						"aria-label": unref(translate)("chelone.rich_text.image.close", { _: "Close" }),
+						onClick: _cache[1] || (_cache[1] = ($event) => viewing.value = false)
+					}, {
+						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(richTextImageCloseIcon))))]),
+						_: 1
+					}, 8, ["aria-label"]), createElementVNode("img", {
+						src: src.value,
+						alt: _ctx.node.attrs.alt ?? "",
+						class: "max-h-full max-w-full object-contain"
+					}, null, 8, _hoisted_6)], 8, _hoisted_5)) : createCommentVNode("", true)]))
+				]),
+				_: 1
+			}, 8, ["data-selected"]);
+		};
+	}
+});
+export { rich_text_image_view_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/rich-text-input/rich-text-image.d.ts

@@ -0,0 +1,17 @@
+import { type RichTextImageConfig, type RichTextImageInput } from "@chelone/core";
+import { type Editor } from "@tiptap/core";
+import { type ImageOptions } from "@tiptap/extension-image";
+interface Options extends ImageOptions {
+    config: () => RichTextImageConfig;
+}
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        richTextImages: {
+            setImages: (images: readonly RichTextImageInput[]) => ReturnType;
+        };
+    }
+}
+export declare const RichTextImage: import("@tiptap/core").Node<Options, any>;
+export declare function getRichTextImageConfig(editor: Editor): RichTextImageConfig | null;
+export declare function getRichTextHtml(editor: Editor): string;
+export { type RichTextImageOptions, resolveRichTextImageConfig, } from "@chelone/core";

package/dist/components/rich-text-input/rich-text-image.js

@@ -0,0 +1,160 @@
+import rich_text_image_view_default from "./rich-text-image-view.js";
+import { isRichTextImageConfigSource, isSafeImageSrc, prepareRichTextImages, resolveRichTextImageConfig, resolveRichTextImageConfig as resolveRichTextImageConfig$1, richTextImageAttributes, richTextImageUploadState, setRichTextImageUploading, storeRichTextImageFile } from "@chelone/core";
+import { Plugin } from "@tiptap/pm/state";
+import { VueNodeViewRenderer } from "@tiptap/vue-3";
+import { getHTMLFromFragment, isNodeEmpty, nodeInputRule } from "@tiptap/core";
+import Image, { inputRegex } from "@tiptap/extension-image";
+// src/components/rich-text-input/rich-text-image.ts
+function patch(editor, source, stored) {
+	richTextImageUploadState(editor).settled.set(source, stored);
+	if (editor.isDestroyed) return;
+	const transaction = editor.state.tr.setMeta("addToHistory", false);
+	editor.state.doc.descendants((node, pos) => {
+		if (node.type.name === "image" && node.attrs.src === source) transaction.setNodeMarkup(pos, void 0, {
+			...node.attrs,
+			...stored
+		});
+	});
+	if (transaction.docChanged) editor.view.dispatch(transaction);
+}
+async function upload(editor, file, src, config) {
+	setRichTextImageUploading(editor, src, true);
+	try {
+		patch(editor, src, await storeRichTextImageFile(file, config));
+	} catch (cause) {
+		patch(editor, src, {
+			src: null,
+			id: null
+		});
+		config.onImageError?.({
+			reason: "upload",
+			file,
+			cause
+		});
+	} finally {
+		setRichTextImageUploading(editor, src, false);
+		URL.revokeObjectURL(src);
+	}
+}
+var RichTextImage = Image.extend({
+	atom: true,
+	addOptions() {
+		return {
+			...this.parent?.(),
+			inline: false,
+			allowBase64: true,
+			HTMLAttributes: {},
+			resize: false,
+			config: () => resolveRichTextImageConfig(true)
+		};
+	},
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			...richTextImageAttributes()
+		};
+	},
+	parseHTML() {
+		return [{
+			tag: "img[src]",
+			getAttrs: (element) => typeof element !== "string" && isSafeImageSrc(element.getAttribute("src") ?? "", { allowDataImages: this.options.config().rules.allowBase64 }) ? null : false
+		}];
+	},
+	addNodeView() {
+		return VueNodeViewRenderer(rich_text_image_view_default);
+	},
+	addCommands() {
+		return {
+			setImage: (attrs) => ({ commands }) => isSafeImageSrc(attrs.src, { allowDataImages: this.options.config().rules.allowBase64 }) && commands.insertContent({
+				type: this.name,
+				attrs
+			}),
+			setImages: (images) => ({ commands, dispatch, editor }) => {
+				if (!dispatch) return images.length > 0;
+				const config = this.options.config();
+				const prepared = prepareRichTextImages(images, config);
+				const content = prepared.attributes.map((attrs) => ({
+					type: this.name,
+					attrs
+				}));
+				const inserted = content.length > 0 && commands.insertContent(content);
+				for (const item of prepared.uploads) if (inserted) upload(editor, item.file, item.blobUrl, config);
+				else URL.revokeObjectURL(item.blobUrl);
+				return inserted;
+			}
+		};
+	},
+	addInputRules() {
+		return [nodeInputRule({
+			find: inputRegex,
+			type: this.type,
+			getAttributes: (match) => {
+				const [, , alt, src, title] = match;
+				return src && isSafeImageSrc(src, { allowDataImages: this.options.config().rules.allowBase64 }) ? {
+					src,
+					alt,
+					title
+				} : false;
+			}
+		})];
+	},
+	addProseMirrorPlugins() {
+		const editor = this.editor;
+		const files = (list) => Array.from(list ?? []).filter((file) => file.type.startsWith("image/"));
+		return [new Plugin({
+			props: {
+				handlePaste: (_view, event) => {
+					const images = files(event.clipboardData?.files);
+					if (!images.length) return false;
+					event.preventDefault();
+					return editor.commands.setImages(images);
+				},
+				handleDrop: (view, event) => {
+					const images = files(event.dataTransfer?.files);
+					if (!images.length) return false;
+					event.preventDefault();
+					const position = view.posAtCoords({
+						left: event.clientX,
+						top: event.clientY
+					});
+					if (position) editor.commands.setTextSelection(position.pos);
+					return editor.commands.setImages(images);
+				}
+			},
+			appendTransaction: (transactions, _old, state) => {
+				if (!transactions.some((item) => item.docChanged)) return null;
+				const tr = state.tr.setMeta("addToHistory", false);
+				state.doc.descendants((node, pos) => {
+					if (node.type.name !== this.name) return;
+					const stored = richTextImageUploadState(editor).settled.get(node.attrs.src);
+					if (stored) tr.setNodeMarkup(pos, void 0, {
+						...node.attrs,
+						...stored
+					});
+				});
+				return tr.docChanged ? tr : null;
+			},
+			view: () => ({ destroy: () => {
+				for (const src of richTextImageUploadState(editor).pending) URL.revokeObjectURL(src);
+			} })
+		})];
+	}
+});
+function getRichTextImageConfig(editor) {
+	const options = editor.extensionManager.extensions.find((item) => item.name === RichTextImage.name)?.options;
+	return isRichTextImageConfigSource(options) ? options.config() : null;
+}
+function getRichTextHtml(editor) {
+	const ranges = [];
+	editor.state.doc.descendants((node, pos) => {
+		if (node.type.name === "image" && (typeof node.attrs.src !== "string" || node.attrs.src.startsWith("blob:"))) ranges.push({
+			pos,
+			length: node.nodeSize
+		});
+	});
+	if (!ranges.length) return editor.isEmpty ? "" : editor.getHTML();
+	const transaction = editor.state.tr;
+	for (const { pos, length } of ranges.reverse()) transaction.delete(pos, pos + length);
+	return isNodeEmpty(transaction.doc) ? "" : getHTMLFromFragment(transaction.doc.content, editor.schema);
+}
+export { RichTextImage, getRichTextHtml, getRichTextImageConfig, resolveRichTextImageConfig$1 as resolveRichTextImageConfig };

package/dist/components/rich-text-input/rich-text-input.js

@@ -0,0 +1,4 @@
+import rich_text_input_vue_vue_type_script_setup_true_lang_default from "./rich-text-input.vue_vue_type_script_setup_true_lang.js";
+// src/components/rich-text-input/rich-text-input.vue
+var rich_text_input_default = rich_text_input_vue_vue_type_script_setup_true_lang_default;
+export { rich_text_input_default as default };

package/dist/components/rich-text-input/rich-text-input.vue.d.ts

@@ -0,0 +1,56 @@
+import { type VNode } from "vue";
+import type { LooseRecord, SourceProp } from "@chelone/core";
+import type { Editor, EditorOptions } from "@tiptap/core";
+import type { RichTextImageOptions } from "@chelone/core";
+import type { SourceInputProps } from "../admin/inputs/source-input-props.js";
+/** Props for {@link RichTextInput}. */
+export interface RichTextInputProps<RecordType = LooseRecord, TPath extends SourceProp<RecordType> = SourceProp<RecordType>> extends SourceInputProps<RecordType, TPath> {
+    helperText?: string | false;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Shown while the editor is empty. */
+    placeholder?: string;
+    /** Image insertion and upload settings. False leaves images out of the default schema. */
+    images?: boolean | RichTextImageOptions;
+    /**
+     * Text color: `false` leaves out the color extension and the toolbar's Text
+     * color button. A color is stored as a `style` attribute with a palette
+     * `var(--rich-text-color-*)` value. Default `true`.
+     */
+    colors?: boolean;
+    /**
+     * Highlights code blocks in the editor with lowlight. `false` shows them
+     * plain. The stored HTML never has highlight markup either way. Default `true`.
+     */
+    codeHighlight?: boolean;
+    /**
+     * Extra tiptap editor options, spread last: `extensions` here replaces the
+     * default set. `onUpdate` and `onBlur` run after the input's own.
+     */
+    editorOptions?: Partial<EditorOptions>;
+    class?: string;
+}
+/** What the `#toolbar` slot receives. */
+export interface RichTextInputToolbarSlotProps {
+    editor: Editor;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <RecordType = LooseRecord, TPath extends SourceProp<RecordType> = SourceProp<RecordType>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<RichTextInputProps<RecordType, TPath>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        toolbar?: (scope: RichTextInputToolbarSlotProps) => VNode[];
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};