@mantine-vue/tiptap 3.4.0 → 3.6.0

package/cjs/index.cjs

@@ -25,6 +25,9 @@ let _mantine_vue_core = require("@mantine-vue/core");
 let vue = require("vue");
 let _tiptap_vue_3 = require("@tiptap/vue-3");
 let _mantine_vue_hooks = require("@mantine-vue/hooks");
+let _tiptap_pm_model = require("@tiptap/pm/model");
+let _tiptap_pm_state = require("@tiptap/pm/state");
+let _tiptap_pm_transform = require("@tiptap/pm/transform");
 let _tiptap_extension_link = require("@tiptap/extension-link");
 _tiptap_extension_link = __toESM(_tiptap_extension_link);
 //#region src/labels.ts
@@ -79,6 +82,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",
@@ -95,23 +99,24 @@ var DEFAULT_LABELS = {
 //#region src/RichTextEditor.context.ts
 var [provideRichTextEditorContext, useRichTextEditorContext] = (0, _mantine_vue_core.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
@@ -135,6 +140,14 @@ var RichTextEditor_default = /* @__PURE__ */ (0, vue.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 },
@@ -151,8 +164,7 @@ var RichTextEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			name: "RichTextEditor",
 			classes: RichTextEditor_module_default,
 			props,
-			className: attrs.class,
-			style: attrs.style,
+			attrs,
 			classNames: props.classNames,
 			styles: props.styles,
 			vars: props.vars,
@@ -193,6 +205,12 @@ var RichTextEditor_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			},
 			get variant() {
 				return props.variant;
+			},
+			get onImageUpload() {
+				return props.onImageUpload;
+			},
+			get onImageUploadError() {
+				return props.onImageUploadError;
 			}
 		});
 		return (_ctx, _cache) => {
@@ -541,7 +559,7 @@ var RichTextEditorColorControl_default = /* @__PURE__ */ (0, vue.defineComponent
 var RichTextEditorColorControl = (0, _mantine_vue_core.factory)(RichTextEditorColorControl_default, { 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.vue
 var RichTextEditorIcon_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -568,7 +586,7 @@ var RichTextEditorIcon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("path", {
 					key: path,
 					d: path
-				}, null, 8, _hoisted_1);
+				}, null, 8, _hoisted_1$1);
 			}), 128))], 16);
 		};
 	}
@@ -842,6 +860,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.vue
 var RichTextEditorColorPickerControl_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -1469,6 +1493,466 @@ var RichTextEditorInvisibleCharactersControl_default = /* @__PURE__ */ (0, vue.d
 	}
 });
 //#endregion
+//#region src/extensions/UploadImage.ts
+var FAILED_UPLOAD_REMOVAL_DELAY = 3e3;
+var uploadImagePluginKey = new _tiptap_pm_state.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 _tiptap_pm_model.Fragment.fromArray(nodes);
+	};
+	const content = mapFragment(slice.content);
+	return {
+		slice: pending.length > 0 ? new _tiptap_pm_model.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 _tiptap_pm_model.Fragment.fromArray(nodes);
+	};
+	return new _tiptap_pm_model.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 _tiptap_pm_state.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 = (0, _tiptap_pm_transform.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__ */ (0, vue.defineComponent)({
+	name: "RichTextEditorImageUploadControl",
+	inheritAttrs: false,
+	__name: "RichTextEditorImageUploadControl",
+	props: {
+		accept: { default: "image/*" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		icon: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = (0, vue.useAttrs)();
+		const ctx = useRichTextEditorContext();
+		const input = (0, vue.ref)(null);
+		const usable = (0, vue.computed)(() => !!ctx.editor && !ctx.editor.isDestroyed && ctx.editor.isEditable);
+		const disabled = (0, vue.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 (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [(0, vue.createVNode)(RichTextEditorControlBase_default, (0, vue.mergeProps)((0, vue.unref)(attrs), {
+				icon: props.icon || (0, vue.unref)(IconPhoto),
+				disabled: disabled.value,
+				interactive: true,
+				variant: (0, vue.unref)(ctx).variant,
+				"aria-label": (0, vue.unref)(ctx).labels.imageUploadControlLabel,
+				title: (0, vue.unref)(ctx).labels.imageUploadControlLabel,
+				onClick: open
+			}), null, 16, [
+				"icon",
+				"disabled",
+				"variant",
+				"aria-label",
+				"title"
+			]), (0, vue.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",
@@ -1915,7 +2399,8 @@ var RichTextEditor = (0, _mantine_vue_core.factory)(RichTextEditor_default, {
 	TableMergeCells: TableMergeCellsControl,
 	TableSplitCell: TableSplitCellControl,
 	Details: RichTextEditorDetailsControl_default,
-	InvisibleCharacters: RichTextEditorInvisibleCharactersControl_default
+	InvisibleCharacters: RichTextEditorInvisibleCharactersControl_default,
+	ImageUpload: RichTextEditorImageUploadControl
 });
 //#endregion
 //#region src/extensions/Link.ts
@@ -1965,6 +2450,7 @@ exports.RichTextEditorColorPickerControl = RichTextEditorColorPickerControl;
 exports.RichTextEditorControl = RichTextEditorControl;
 exports.RichTextEditorControlBase = RichTextEditorControlBase;
 exports.RichTextEditorDetailsControl = RichTextEditorDetailsControl_default;
+exports.RichTextEditorImageUploadControl = RichTextEditorImageUploadControl;
 exports.RichTextEditorInvisibleCharactersControl = RichTextEditorInvisibleCharactersControl_default;
 exports.RichTextEditorLinkControl = RichTextEditorLinkControl;
 exports.RichTextEditorSourceCodeControl = RichTextEditorSourceCodeControl;
@@ -1991,7 +2477,12 @@ exports.UndoControl = UndoControl;
 exports.UnlinkControl = UnlinkControl;
 exports.UnsetColorControl = UnsetColorControl;
 exports.createControl = createControl;
+exports.getImageFiles = getImageFiles;
 exports.getTaskListExtension = getTaskListExtension;
+exports.getUploadImageExtension = getUploadImageExtension;
+exports.getUploadImageExtensionOptions = getUploadImageExtensionOptions;
+exports.insertImageFilesWithUpload = insertImageFilesWithUpload;
+exports.insertImageWithUpload = insertImageWithUpload;
 exports.useRichTextEditorContext = useRichTextEditorContext;
 
 //# sourceMappingURL=index.cjs.map