@mantine-vue/tiptap 3.4.0 → 3.6.0

package/esm/index.mjs

@@ -2,6 +2,9 @@ import { ActionIcon, Box, Button, ColorPicker, ColorSwatch, Group, Popover, Simp
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, watch, withCtx } from "vue";
 import { EditorContent } from "@tiptap/vue-3";
 import { useDisclosure } from "@mantine-vue/hooks";
+import { Fragment as Fragment$1, Slice } from "@tiptap/pm/model";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { dropPoint } from "@tiptap/pm/transform";
 import TipTapLink from "@tiptap/extension-link";
 //#region src/labels.ts
 var DEFAULT_LABELS = {
@@ -55,6 +58,7 @@ var DEFAULT_LABELS = {
 	tableSplitCellControlLabel: "Split cell",
 	detailsControlLabel: "Toggle collapsible section",
 	invisibleCharactersControlLabel: "Toggle invisible characters",
+	imageUploadControlLabel: "Upload image",
 	linkEditorInputLabel: "Enter URL",
 	linkEditorInputPlaceholder: "https://example.com/",
 	linkEditorExternalLink: "Open link in a new tab",
@@ -71,23 +75,24 @@ var DEFAULT_LABELS = {
 //#region src/RichTextEditor.context.ts
 var [provideRichTextEditorContext, useRichTextEditorContext] = createSafeContext("RichTextEditor component was not found in tree");
 var RichTextEditor_module_default = {
-	root: "_root_1avnr_1",
-	Typography: "_Typography_1avnr_19",
-	content: "_content_1avnr_47",
-	linkEditorDropdown: "_linkEditorDropdown_1avnr_292",
-	tableInsertDropdown: "_tableInsertDropdown_1avnr_296",
-	tableInsertGrid: "_tableInsertGrid_1avnr_301",
-	tableInsertCell: "_tableInsertCell_1avnr_307",
-	tableInsertLabel: "_tableInsertLabel_1avnr_324",
-	control: "_control_1avnr_331",
-	controlIcon: "_controlIcon_1avnr_406",
-	controlsGroup: "_controlsGroup_1avnr_411",
-	linkEditor: "_linkEditor_1avnr_292",
-	linkEditorInput: "_linkEditorInput_1avnr_440",
-	linkEditorExternalControl: "_linkEditorExternalControl_1avnr_446",
-	linkEditorSave: "_linkEditorSave_1avnr_476",
-	toolbar: "_toolbar_1avnr_481",
-	taskList: "_taskList_1avnr_515"
+	root: "_root_1jng1_1",
+	"mantine-upload-image-pulse": "_mantine-upload-image-pulse_1jng1_1",
+	Typography: "_Typography_1jng1_64",
+	content: "_content_1jng1_92",
+	linkEditorDropdown: "_linkEditorDropdown_1jng1_337",
+	tableInsertDropdown: "_tableInsertDropdown_1jng1_341",
+	tableInsertGrid: "_tableInsertGrid_1jng1_346",
+	tableInsertCell: "_tableInsertCell_1jng1_352",
+	tableInsertLabel: "_tableInsertLabel_1jng1_369",
+	control: "_control_1jng1_376",
+	controlIcon: "_controlIcon_1jng1_451",
+	controlsGroup: "_controlsGroup_1jng1_456",
+	linkEditor: "_linkEditor_1jng1_337",
+	linkEditorInput: "_linkEditorInput_1jng1_485",
+	linkEditorExternalControl: "_linkEditorExternalControl_1jng1_491",
+	linkEditorSave: "_linkEditorSave_1jng1_521",
+	toolbar: "_toolbar_1jng1_526",
+	taskList: "_taskList_1jng1_560"
 };
 //#endregion
 //#region src/RichTextEditor.vue
@@ -111,6 +116,14 @@ var RichTextEditor_default = /* @__PURE__ */ defineComponent({
 		},
 		labels: { default: void 0 },
 		variant: { default: "default" },
+		onImageUpload: {
+			type: Function,
+			default: void 0
+		},
+		onImageUploadError: {
+			type: Function,
+			default: void 0
+		},
 		classNames: { default: void 0 },
 		styles: { default: void 0 },
 		vars: { default: void 0 },
@@ -127,8 +140,7 @@ var RichTextEditor_default = /* @__PURE__ */ defineComponent({
 			name: "RichTextEditor",
 			classes: RichTextEditor_module_default,
 			props,
-			className: attrs.class,
-			style: attrs.style,
+			attrs,
 			classNames: props.classNames,
 			styles: props.styles,
 			vars: props.vars,
@@ -169,6 +181,12 @@ var RichTextEditor_default = /* @__PURE__ */ defineComponent({
 			},
 			get variant() {
 				return props.variant;
+			},
+			get onImageUpload() {
+				return props.onImageUpload;
+			},
+			get onImageUploadError() {
+				return props.onImageUploadError;
 			}
 		});
 		return (_ctx, _cache) => {
@@ -511,7 +529,7 @@ var RichTextEditorColorControl = factory(/* @__PURE__ */ defineComponent({
 }), { classes: RichTextEditor_module_default });
 //#endregion
 //#region src/icons/RichTextEditorIcon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["d"];
+var _hoisted_1$1 = ["d"];
 //#endregion
 //#region src/icons/RichTextEditorIcon.ts
 var RichTextEditorIcon = factory(/* @__PURE__ */ defineComponent({
@@ -538,7 +556,7 @@ var RichTextEditorIcon = factory(/* @__PURE__ */ defineComponent({
 				return openBlock(), createElementBlock("path", {
 					key: path,
 					d: path
-				}, null, 8, _hoisted_1);
+				}, null, 8, _hoisted_1$1);
 			}), 128))], 16);
 		};
 	}
@@ -809,6 +827,12 @@ var IconPilcrow = createIcon("IconPilcrow", [
 	path("M17 4v16"),
 	path("M19 4h-9.5a4.5 4.5 0 0 0 0 9h3.5")
 ]);
+var IconPhoto = createIcon("IconPhoto", [
+	path("M15 8h.01"),
+	path("M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"),
+	path("M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"),
+	path("M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3")
+]);
 //#endregion
 //#region src/RichTextEditorControl/RichTextEditorColorPickerControl.ts
 var RichTextEditorColorPickerControl = factory(/* @__PURE__ */ defineComponent({
@@ -1427,6 +1451,466 @@ var RichTextEditorInvisibleCharactersControl_default = /* @__PURE__ */ defineCom
 	}
 });
 //#endregion
+//#region src/extensions/UploadImage.ts
+var FAILED_UPLOAD_REMOVAL_DELAY = 3e3;
+var uploadImagePluginKey = new PluginKey("uploadImage");
+var settledUploads = /* @__PURE__ */ new WeakMap();
+var missingExtensionWarned = false;
+function warnMissingUploadExtension() {
+	if (missingExtensionWarned) return;
+	missingExtensionWarned = true;
+	console.warn("[@mantine-vue/tiptap] Image upload requires the image extension created with getUploadImageExtension");
+}
+function getSettledUploads(view) {
+	let settled = settledUploads.get(view);
+	if (!settled) {
+		settled = /* @__PURE__ */ new Map();
+		settledUploads.set(view, settled);
+	}
+	return settled;
+}
+function findUploadNode(doc, uploadId) {
+	let result = null;
+	doc.descendants((node, pos) => {
+		if (result) return false;
+		if (node.type.name === "image" && node.attrs.uploadId === uploadId) {
+			result = {
+				node,
+				pos
+			};
+			return false;
+		}
+		return true;
+	});
+	return result;
+}
+function revokeBlobUrl(upload) {
+	if (upload.blobUrl) {
+		URL.revokeObjectURL(upload.blobUrl);
+		upload.blobUrl = null;
+	}
+}
+function settleUploadNode(tr, pos, node, upload) {
+	if (upload.status === "success") return tr.setNodeMarkup(pos, void 0, {
+		...node.attrs,
+		...upload.attrs,
+		uploading: false,
+		uploadError: false,
+		uploadId: null
+	});
+	return tr.setNodeMarkup(pos, void 0, {
+		...node.attrs,
+		uploading: false,
+		uploadError: true
+	});
+}
+function scheduleFailedUploadRemoval(view, uploadId, upload) {
+	upload.removalTimer = setTimeout(() => {
+		upload.removalTimer = null;
+		revokeBlobUrl(upload);
+		if (view.isDestroyed) return;
+		const found = findUploadNode(view.state.doc, uploadId);
+		if (found) {
+			getSettledUploads(view).delete(uploadId);
+			view.dispatch(view.state.tr.delete(found.pos, found.pos + found.node.nodeSize).setMeta("addToHistory", false));
+		}
+	}, FAILED_UPLOAD_REMOVAL_DELAY);
+}
+function repairSettledUploads(view, transactions, newState) {
+	if (!view || !transactions.some((tr) => tr.docChanged)) return null;
+	const settled = settledUploads.get(view);
+	if (!settled || settled.size === 0) return null;
+	let tr = null;
+	newState.doc.descendants((node, pos) => {
+		if (node.type.name !== "image") return true;
+		const upload = node.attrs.uploadId ? settled.get(node.attrs.uploadId) : void 0;
+		if (!upload) return false;
+		if (upload.status === "success") {
+			tr = settleUploadNode(tr ?? newState.tr, pos, node, upload);
+			settled.delete(node.attrs.uploadId);
+			return false;
+		}
+		if (!node.attrs.uploadError) tr = settleUploadNode(tr ?? newState.tr, pos, node, upload);
+		if (!upload.removalTimer) scheduleFailedUploadRemoval(view, node.attrs.uploadId, upload);
+		return false;
+	});
+	return tr ? tr.setMeta("addToHistory", false) : null;
+}
+function createUploadId() {
+	return Math.random().toString(36).slice(2, 10);
+}
+function startUpload(view, file, blobUrl, uploadId, options) {
+	options.onImageUpload(file).then((result) => {
+		if (blobUrl) URL.revokeObjectURL(blobUrl);
+		if (view.isDestroyed) return;
+		const upload = {
+			status: "success",
+			attrs: typeof result === "string" ? { src: result } : result
+		};
+		const found = findUploadNode(view.state.doc, uploadId);
+		if (!found) {
+			getSettledUploads(view).set(uploadId, upload);
+			return;
+		}
+		view.dispatch(settleUploadNode(view.state.tr, found.pos, found.node, upload).setMeta("addToHistory", false));
+	}).catch((error) => {
+		options.onImageUploadError?.(file, error);
+		const upload = {
+			status: "error",
+			blobUrl,
+			removalTimer: null
+		};
+		if (view.isDestroyed) {
+			revokeBlobUrl(upload);
+			return;
+		}
+		getSettledUploads(view).set(uploadId, upload);
+		const found = findUploadNode(view.state.doc, uploadId);
+		if (!found) {
+			revokeBlobUrl(upload);
+			return;
+		}
+		view.dispatch(settleUploadNode(view.state.tr, found.pos, found.node, upload).setMeta("addToHistory", false));
+		scheduleFailedUploadRemoval(view, uploadId, upload);
+	});
+}
+function getImageFiles(files) {
+	return Array.from(files ?? []).filter((file) => file.type.startsWith("image/"));
+}
+function insertImageFilesWithUpload(view, files, pos, options) {
+	if (files.length === 0) return;
+	const { schema } = view.state;
+	if (!schema.nodes.image?.spec.attrs?.uploadId) {
+		warnMissingUploadExtension();
+		return;
+	}
+	const uploads = files.map((file) => ({
+		file,
+		blobUrl: URL.createObjectURL(file),
+		uploadId: createUploadId()
+	}));
+	view.dispatch(view.state.tr.insert(pos, uploads.map(({ blobUrl, uploadId }) => schema.nodes.image.create({
+		src: blobUrl,
+		uploading: true,
+		uploadError: false,
+		uploadId
+	}))));
+	uploads.forEach(({ file, blobUrl, uploadId }) => {
+		startUpload(view, file, blobUrl, uploadId, options);
+	});
+}
+function insertImageWithUpload(view, file, pos, options) {
+	insertImageFilesWithUpload(view, [file], pos, options);
+}
+function isDataUrl(src) {
+	return /^data:/i.test(src);
+}
+function getExtensionFromMimeType(type) {
+	return (type.split("/")[1] ?? "").split("+")[0] || "bin";
+}
+function dataUrlToFile(src) {
+	const separator = src.indexOf(",");
+	if (separator === -1) throw new Error("Invalid data URL");
+	const header = src.slice(5, separator);
+	const data = src.slice(separator + 1);
+	const [type = "", ...params] = header.split(";");
+	const mimeType = type || "application/octet-stream";
+	const bytes = params.includes("base64") ? Uint8Array.from(atob(data), (char) => char.charCodeAt(0)) : new TextEncoder().encode(decodeURIComponent(data));
+	return new File([bytes], `pasted-image.${getExtensionFromMimeType(mimeType)}`, { type: mimeType });
+}
+function getRemoteFileName(src, type) {
+	let name = "";
+	try {
+		name = decodeURIComponent(new URL(src, window.location.href).pathname.split("/").pop() ?? "");
+	} catch {
+		name = "";
+	}
+	if (!name) return `pasted-image.${getExtensionFromMimeType(type)}`;
+	return name.includes(".") ? name : `${name}.${getExtensionFromMimeType(type)}`;
+}
+async function remoteUrlToFile(src) {
+	const response = await fetch(src);
+	if (!response.ok) throw new Error(`Failed to fetch image: ${response.status}`);
+	const blob = await response.blob();
+	const type = blob.type || "application/octet-stream";
+	return new File([blob], getRemoteFileName(src, type), { type });
+}
+async function pastedImageToFile(src) {
+	return isDataUrl(src) ? dataUrlToFile(src) : remoteUrlToFile(src);
+}
+function restoreImageNode(view, uploadId, src) {
+	if (view.isDestroyed) return;
+	const upload = {
+		status: "success",
+		attrs: { src }
+	};
+	const found = findUploadNode(view.state.doc, uploadId);
+	if (!found) {
+		getSettledUploads(view).set(uploadId, upload);
+		return;
+	}
+	view.dispatch(settleUploadNode(view.state.tr, found.pos, found.node, upload).setMeta("addToHistory", false));
+}
+function shouldUploadPastedImage(node, options) {
+	if (node.type.name !== "image" || node.attrs.uploadId || typeof node.attrs.src !== "string") return false;
+	return options.shouldUploadPastedImage ? options.shouldUploadPastedImage(node.attrs.src) : isDataUrl(node.attrs.src);
+}
+function mapPastedSlice(slice, options) {
+	const pending = [];
+	const mapFragment = (fragment) => {
+		const nodes = [];
+		fragment.forEach((node) => {
+			if (shouldUploadPastedImage(node, options)) {
+				const uploadId = createUploadId();
+				pending.push({
+					uploadId,
+					src: node.attrs.src
+				});
+				nodes.push(node.type.create({
+					...node.attrs,
+					uploading: true,
+					uploadError: false,
+					uploadId
+				}, null, node.marks));
+				return;
+			}
+			nodes.push(node.content.size > 0 ? node.copy(mapFragment(node.content)) : node);
+		});
+		return Fragment$1.fromArray(nodes);
+	};
+	const content = mapFragment(slice.content);
+	return {
+		slice: pending.length > 0 ? new Slice(content, slice.openStart, slice.openEnd) : slice,
+		pending
+	};
+}
+function stripImages(slice) {
+	const stripFragment = (fragment) => {
+		const nodes = [];
+		fragment.forEach((node) => {
+			if (node.type.name === "image") return;
+			nodes.push(node.content.size > 0 ? node.copy(stripFragment(node.content)) : node);
+		});
+		return Fragment$1.fromArray(nodes);
+	};
+	return new Slice(stripFragment(slice.content), slice.openStart, slice.openEnd);
+}
+function startPastedUploads(view, pending, options) {
+	pending.forEach(({ uploadId, src }) => {
+		pastedImageToFile(src).then((file) => startUpload(view, file, null, uploadId, options), () => restoreImageNode(view, uploadId, src));
+	});
+}
+function getBlockInsertPos(state) {
+	const { $from } = state.selection;
+	if (state.schema.nodes.image?.isInline || !$from.parent.isTextblock) return $from.pos;
+	if ($from.parentOffset === 0) return $from.before();
+	if ($from.parentOffset === $from.parent.content.size) return $from.after();
+	return $from.pos;
+}
+function hasUploadImageNode(view) {
+	return Boolean(view.state.schema.nodes.image?.spec.attrs?.uploadId);
+}
+function getUploadImageExtensionOptions(editor) {
+	const extension = editor?.extensionManager?.extensions?.find((item) => item.name === "image");
+	return {
+		onImageUpload: extension?.options?.onImageUpload,
+		onImageUploadError: extension?.options?.onImageUploadError
+	};
+}
+function getUploadImageExtension(TipTapImage, options) {
+	return TipTapImage.extend({
+		addOptions() {
+			return {
+				...this.parent?.(),
+				onImageUpload: options.onImageUpload,
+				onImageUploadError: options.onImageUploadError,
+				shouldUploadPastedImage: options.shouldUploadPastedImage
+			};
+		},
+		parseHTML() {
+			return [{ tag: "img[src]" }];
+		},
+		addAttributes() {
+			return {
+				...this.parent?.(),
+				uploading: {
+					default: false,
+					renderHTML: (attrs) => attrs.uploading ? { "data-uploading": "" } : {}
+				},
+				uploadError: {
+					default: false,
+					renderHTML: (attrs) => attrs.uploadError ? { "data-upload-error": "" } : {}
+				},
+				uploadId: {
+					default: null,
+					renderHTML: () => ({})
+				}
+			};
+		},
+		addNodeView() {
+			const parentNodeView = this.parent?.();
+			return (props) => {
+				const { node, HTMLAttributes } = props;
+				if (!node.attrs.uploading && !node.attrs.uploadError) {
+					if (parentNodeView) return parentNodeView(props);
+					const img = document.createElement("img");
+					Object.entries(HTMLAttributes).forEach(([key, value]) => {
+						if (value !== null && value !== void 0) img.setAttribute(key, String(value));
+					});
+					img.src = node.attrs.src;
+					return { dom: img };
+				}
+				const isInline = this.options?.inline;
+				const wrapper = document.createElement(isInline ? "span" : "div");
+				wrapper.classList.add("mantine-upload-image-wrapper");
+				if (node.attrs.uploading) wrapper.setAttribute("data-uploading", "");
+				if (node.attrs.uploadError) wrapper.setAttribute("data-upload-error", "");
+				const img = document.createElement("img");
+				Object.entries(HTMLAttributes).forEach(([key, value]) => {
+					if (value !== null && value !== void 0 && key !== "data-uploading" && key !== "data-upload-error") img.setAttribute(key, String(value));
+				});
+				img.src = node.attrs.src;
+				if (node.attrs.alt) img.alt = node.attrs.alt;
+				if (node.attrs.title) img.title = node.attrs.title;
+				wrapper.appendChild(img);
+				return { dom: wrapper };
+			};
+		},
+		addProseMirrorPlugins() {
+			const uploadOptions = {
+				onImageUpload: this.options.onImageUpload,
+				onImageUploadError: this.options.onImageUploadError,
+				shouldUploadPastedImage: this.options.shouldUploadPastedImage
+			};
+			let editorView = null;
+			return [new Plugin({
+				key: uploadImagePluginKey,
+				view(view) {
+					editorView = view;
+					return { destroy: () => {
+						editorView = null;
+					} };
+				},
+				appendTransaction(transactions, _oldState, newState) {
+					return repairSettledUploads(editorView, transactions, newState);
+				},
+				props: {
+					handleDrop(view, event, slice, moved) {
+						if (!event.dataTransfer || !uploadOptions.onImageUpload) return false;
+						const files = getImageFiles(event.dataTransfer.files);
+						const pos = view.posAtCoords({
+							left: event.clientX,
+							top: event.clientY
+						});
+						if (files.length > 0) {
+							event.preventDefault();
+							if (pos) insertImageFilesWithUpload(view, files, pos.pos, uploadOptions);
+							return true;
+						}
+						if (moved || !pos || !hasUploadImageNode(view)) return false;
+						const mapped = mapPastedSlice(slice, uploadOptions);
+						if (mapped.pending.length === 0) return false;
+						event.preventDefault();
+						const insertPos = dropPoint(view.state.doc, pos.pos, mapped.slice) ?? pos.pos;
+						view.dispatch(view.state.tr.replaceRange(insertPos, insertPos, mapped.slice).setMeta("uiEvent", "drop"));
+						startPastedUploads(view, mapped.pending, uploadOptions);
+						return true;
+					},
+					handlePaste(view, event, slice) {
+						if (!event.clipboardData || !uploadOptions.onImageUpload) return false;
+						const files = getImageFiles(event.clipboardData.files);
+						if (files.length > 0) {
+							event.preventDefault();
+							const text = stripImages(slice);
+							if (text.content.size > 0 && text.content.textBetween(0, text.content.size)) view.dispatch(view.state.tr.replaceSelection(text).setMeta("paste", true).setMeta("uiEvent", "paste"));
+							insertImageFilesWithUpload(view, files, getBlockInsertPos(view.state), uploadOptions);
+							return true;
+						}
+						if (!hasUploadImageNode(view)) return false;
+						const mapped = mapPastedSlice(slice, uploadOptions);
+						if (mapped.pending.length === 0) return false;
+						event.preventDefault();
+						view.dispatch(view.state.tr.replaceSelection(mapped.slice).scrollIntoView().setMeta("paste", true).setMeta("uiEvent", "paste"));
+						startPastedUploads(view, mapped.pending, uploadOptions);
+						return true;
+					}
+				}
+			})];
+		}
+	});
+}
+//#endregion
+//#region src/RichTextEditorControl/RichTextEditorImageUploadControl.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["accept"];
+//#endregion
+//#region src/RichTextEditorControl/RichTextEditorImageUploadControl.ts
+var RichTextEditorImageUploadControl = /* @__PURE__ */ defineComponent({
+	name: "RichTextEditorImageUploadControl",
+	inheritAttrs: false,
+	__name: "RichTextEditorImageUploadControl",
+	props: {
+		accept: { default: "image/*" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		icon: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const ctx = useRichTextEditorContext();
+		const input = ref(null);
+		const usable = computed(() => !!ctx.editor && !ctx.editor.isDestroyed && ctx.editor.isEditable);
+		const disabled = computed(() => !usable.value || props.disabled);
+		function open(event) {
+			const handler = attrs.onClick;
+			if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
+			else handler?.(event);
+			if (!event.defaultPrevented) input.value?.click();
+		}
+		function change(event) {
+			const target = event.currentTarget;
+			const files = getImageFiles(target.files);
+			if (!files.length || !ctx.editor || !usable.value) return;
+			const extension = getUploadImageExtensionOptions(ctx.editor);
+			const onImageUpload = ctx.onImageUpload ?? extension.onImageUpload;
+			if (!onImageUpload) return;
+			const { view } = ctx.editor;
+			insertImageFilesWithUpload(view, files, view.state.selection.from, {
+				onImageUpload,
+				onImageUploadError: ctx.onImageUploadError ?? extension.onImageUploadError
+			});
+			target.value = "";
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(RichTextEditorControlBase_default, mergeProps(unref(attrs), {
+				icon: props.icon || unref(IconPhoto),
+				disabled: disabled.value,
+				interactive: true,
+				variant: unref(ctx).variant,
+				"aria-label": unref(ctx).labels.imageUploadControlLabel,
+				title: unref(ctx).labels.imageUploadControlLabel,
+				onClick: open
+			}), null, 16, [
+				"icon",
+				"disabled",
+				"variant",
+				"aria-label",
+				"title"
+			]), createElementVNode("input", {
+				ref_key: "input",
+				ref: input,
+				type: "file",
+				accept: props.accept,
+				multiple: "",
+				hidden: "",
+				onChange: change
+			}, null, 40, _hoisted_1)], 64);
+		};
+	}
+});
+//#endregion
 //#region src/RichTextEditorControl/controls.ts
 var BoldControl = createControl({
 	label: "boldControlLabel",
@@ -1864,7 +2348,8 @@ var RichTextEditor = factory(RichTextEditor_default, {
 	TableMergeCells: TableMergeCellsControl,
 	TableSplitCell: TableSplitCellControl,
 	Details: RichTextEditorDetailsControl_default,
-	InvisibleCharacters: RichTextEditorInvisibleCharactersControl_default
+	InvisibleCharacters: RichTextEditorInvisibleCharactersControl_default,
+	ImageUpload: RichTextEditorImageUploadControl
 });
 //#endregion
 //#region src/extensions/Link.ts
@@ -1885,6 +2370,6 @@ var getTaskListExtension = (TipTapTaskList) => TipTapTaskList.extend({ addKeyboa
 	}
 }) }).configure({ HTMLAttributes: { class: `${RichTextEditor_module_default.taskList} mantine-RichTextEditor-taskList` } });
 //#endregion
-export { AlignCenterControl, AlignJustifyControl, AlignLeftControl, AlignRightControl, BlockquoteControl, BoldControl, BulletListControl, ClearFormattingControl, CodeBlockControl, CodeControl, DEFAULT_LABELS, H1Control, H2Control, H3Control, H4Control, H5Control, H6Control, HighlightControl, HrControl, ItalicControl, Link, OrderedListControl, RedoControl, RichTextEditor, RichTextEditorColorControl, RichTextEditorColorPickerControl, RichTextEditorControl, RichTextEditorControlBase, RichTextEditorDetailsControl_default as RichTextEditorDetailsControl, RichTextEditorInvisibleCharactersControl_default as RichTextEditorInvisibleCharactersControl, RichTextEditorLinkControl, RichTextEditorSourceCodeControl, RichTextEditorTableInsertControl_default as RichTextEditorTableInsertControl, StrikeThroughControl, SubscriptControl, SuperscriptControl, TableColumnAfterControl, TableColumnBeforeControl, TableColumnDeleteControl, TableDeleteControl, TableMergeCellsControl, TableRowAfterControl, TableRowBeforeControl, TableRowDeleteControl, TableSplitCellControl, TableToggleHeaderColumnControl, TableToggleHeaderRowControl, TaskListControl, TaskListLiftControl, TaskListSinkControl, UnderlineControl, UndoControl, UnlinkControl, UnsetColorControl, createControl, getTaskListExtension, useRichTextEditorContext };
+export { AlignCenterControl, AlignJustifyControl, AlignLeftControl, AlignRightControl, BlockquoteControl, BoldControl, BulletListControl, ClearFormattingControl, CodeBlockControl, CodeControl, DEFAULT_LABELS, H1Control, H2Control, H3Control, H4Control, H5Control, H6Control, HighlightControl, HrControl, ItalicControl, Link, OrderedListControl, RedoControl, RichTextEditor, RichTextEditorColorControl, RichTextEditorColorPickerControl, RichTextEditorControl, RichTextEditorControlBase, RichTextEditorDetailsControl_default as RichTextEditorDetailsControl, RichTextEditorImageUploadControl, RichTextEditorInvisibleCharactersControl_default as RichTextEditorInvisibleCharactersControl, RichTextEditorLinkControl, RichTextEditorSourceCodeControl, RichTextEditorTableInsertControl_default as RichTextEditorTableInsertControl, StrikeThroughControl, SubscriptControl, SuperscriptControl, TableColumnAfterControl, TableColumnBeforeControl, TableColumnDeleteControl, TableDeleteControl, TableMergeCellsControl, TableRowAfterControl, TableRowBeforeControl, TableRowDeleteControl, TableSplitCellControl, TableToggleHeaderColumnControl, TableToggleHeaderRowControl, TaskListControl, TaskListLiftControl, TaskListSinkControl, UnderlineControl, UndoControl, UnlinkControl, UnsetColorControl, createControl, getImageFiles, getTaskListExtension, getUploadImageExtension, getUploadImageExtensionOptions, insertImageFilesWithUpload, insertImageWithUpload, useRichTextEditorContext };
 
 //# sourceMappingURL=index.mjs.map