@sdata/web-vue 3.18.0 → 3.19.0

package/es/rich-text-editor/rich-text-editor.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,630 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import { useI18n } from "../locale/index.js";
+import _objectWithoutProperties from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectWithoutProperties.js";
+import { $createInlineComponentNode, $isInlineComponentNode, InlineComponentNode } from "./nodes/inline-component-node.js";
+import rich_text_node_renderer_default from "./rich-text-node-renderer.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, getCurrentInstance, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, watch, withCtx } from "vue";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { createEmptyHistoryState, registerHistory } from "@lexical/history";
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { $convertFromMarkdownString, $convertToMarkdownString, TRANSFORMERS } from "@lexical/markdown";
+import { HeadingNode, QuoteNode, registerRichText } from "@lexical/rich-text";
+import { $createLineBreakNode, $createParagraphNode, $createTextNode, $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isLineBreakNode, $isRangeSelection, $isTextNode, $nodesOfType, $setSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, REDO_COMMAND, SKIP_SCROLL_INTO_VIEW_TAG, UNDO_COMMAND, createEditor } from "lexical";
+//#region components/rich-text-editor/rich-text-editor.vue?vue&type=script&setup=true&lang.ts
+var _excluded = ["position", "replaceCharacters"];
+var _excluded2 = ["position", "replaceCharacters"];
+var _excluded3 = ["selection", "preventScroll"];
+var _hoisted_1 = [
+	"aria-label",
+	"aria-disabled",
+	"aria-readonly",
+	"spellcheck",
+	"contenteditable"
+];
+var rich_text_editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, { name: "RichTextEditor" }), {}, {
+	__name: "rich-text-editor",
+	props: {
+		modelValue: {},
+		defaultValue: {},
+		editorConfig: {},
+		plugins: { default: () => [] },
+		transformers: { default: () => TRANSFORMERS },
+		placeholder: {},
+		disabled: { type: Boolean },
+		readonly: { type: Boolean },
+		history: {
+			type: Boolean,
+			default: true
+		},
+		historyDelay: { default: 300 },
+		historyMaxDepth: { default: null },
+		autoSize: {
+			type: [Boolean, Object],
+			default: true
+		},
+		spellcheck: {
+			type: Boolean,
+			default: true
+		},
+		ariaLabel: {},
+		classNames: { default: () => ({}) },
+		styles: { default: () => ({}) }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"update",
+		"ready",
+		"focus",
+		"blur",
+		"error"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useI18n();
+		const resolvedAriaLabel = computed(() => {
+			var _props$ariaLabel;
+			return (_props$ariaLabel = props.ariaLabel) !== null && _props$ariaLabel !== void 0 ? _props$ariaLabel : t("richTextEditor.ariaLabel");
+		});
+		const instance = getCurrentInstance();
+		const hasStateListeners = () => {
+			var _instance$vnode$props, _instance$vnode$props2;
+			return Boolean((instance === null || instance === void 0 || (_instance$vnode$props = instance.vnode.props) === null || _instance$vnode$props === void 0 ? void 0 : _instance$vnode$props["onUpdate:modelValue"]) || (instance === null || instance === void 0 || (_instance$vnode$props2 = instance.vnode.props) === null || _instance$vnode$props2 === void 0 ? void 0 : _instance$vnode$props2.onChange));
+		};
+		const prefixCls = getPrefixCls("rich-text-editor");
+		const containerRef = shallowRef();
+		const rootRef = shallowRef();
+		const editorRef = shallowRef(null);
+		const isEmpty = shallowRef(true);
+		const canUndo = shallowRef(false);
+		const canRedo = shallowRef(false);
+		const cleanups = [];
+		let lastSerialized = "";
+		let applyingExternalValue = false;
+		const componentHosts = shallowRef([]);
+		const rootClass = computed(() => [
+			prefixCls,
+			props.classNames.root,
+			{
+				[`${prefixCls}-disabled`]: props.disabled,
+				[`${prefixCls}-readonly`]: props.readonly,
+				[`${prefixCls}-focusable`]: !props.disabled && !props.readonly
+			}
+		]);
+		const contentStyle = computed(() => {
+			if (!props.autoSize) return {};
+			if (props.autoSize === true) return { minHeight: "1.5715em" };
+			return {
+				minHeight: props.autoSize.minRows ? `${props.autoSize.minRows}lh` : void 0,
+				maxHeight: props.autoSize.maxRows ? `${props.autoSize.maxRows}lh` : void 0,
+				overflowY: props.autoSize.maxRows ? "auto" : void 0
+			};
+		});
+		const serializeEditorState = (editorState) => editorState.toJSON();
+		const serializeValue = (value) => JSON.stringify(value);
+		const withDiscreteUpdate = (options) => _objectSpread2({ discrete: true }, options);
+		const updateEmptyState = (editorState) => {
+			isEmpty.value = editorState.read(() => $getRoot().getTextContentSize() === 0 && $nodesOfType(InlineComponentNode).length === 0);
+		};
+		const refreshComponentHosts = () => {
+			const editor = editorRef.value;
+			if (!editor) return;
+			const hosts = [];
+			editor.getEditorState().read(() => {
+				for (const node of $nodesOfType(InlineComponentNode)) {
+					const nodeKey = node.getKey();
+					const element = editor.getElementByKey(nodeKey);
+					if (element) {
+						element.classList.toggle(`${prefixCls}-component-selected`, node.isSelected());
+						hosts.push({
+							nodeKey,
+							element,
+							node: node.getData(),
+							editor
+						});
+					}
+				}
+			});
+			componentHosts.value = hosts;
+		};
+		const handleUpdate = (payload) => {
+			const editor = editorRef.value;
+			if (!editor) return;
+			const context = {
+				editor,
+				editorState: payload.editorState,
+				tags: payload.tags
+			};
+			emit("update", context);
+			updateEmptyState(payload.editorState);
+			queueMicrotask(refreshComponentHosts);
+			if (payload.dirtyElements.size === 0 && payload.dirtyLeaves.size === 0) return;
+			if (props.modelValue === void 0 && !hasStateListeners()) return;
+			const value = serializeEditorState(payload.editorState);
+			lastSerialized = serializeValue(value);
+			if (!applyingExternalValue) {
+				emit("update:modelValue", value);
+				emit("change", value, context);
+			}
+		};
+		const createContentNodes = (content) => {
+			const nodes = [];
+			for (const item of content) {
+				if (typeof item !== "string") {
+					nodes.push($createInlineComponentNode(item));
+					continue;
+				}
+				item.split("\n").forEach((line, index) => {
+					if (index) nodes.push($createLineBreakNode());
+					if (line) nodes.push($createTextNode(line));
+				});
+			}
+			return nodes;
+		};
+		const setContent = (content, options) => {
+			var _editorRef$value;
+			(_editorRef$value = editorRef.value) === null || _editorRef$value === void 0 || _editorRef$value.update(() => {
+				const paragraph = $createParagraphNode();
+				paragraph.append(...createContentNodes(content));
+				$getRoot().clear().append(paragraph);
+				paragraph.selectEnd();
+			}, withDiscreteUpdate(options));
+		};
+		const setPlainText = (text, options) => {
+			setContent([text], options);
+		};
+		const getContent = () => {
+			var _editorRef$value$getE, _editorRef$value2;
+			return (_editorRef$value$getE = (_editorRef$value2 = editorRef.value) === null || _editorRef$value2 === void 0 ? void 0 : _editorRef$value2.getEditorState().read(() => {
+				const content = [];
+				const appendText = (value) => {
+					if (!value) return;
+					const previous = content.at(-1);
+					if (typeof previous === "string") content[content.length - 1] = previous + value;
+					else content.push(value);
+				};
+				const visit = (node) => {
+					if ($isTextNode(node)) {
+						appendText(node.getTextContent());
+						return;
+					}
+					if ($isLineBreakNode(node)) {
+						appendText("\n");
+						return;
+					}
+					if ($isInlineComponentNode(node)) {
+						content.push(node.getData());
+						return;
+					}
+					if ($isElementNode(node)) node.getChildren().forEach(visit);
+				};
+				$getRoot().getChildren().forEach((node, index) => {
+					if (index) appendText("\n");
+					visit(node);
+				});
+				return content;
+			})) !== null && _editorRef$value$getE !== void 0 ? _editorRef$value$getE : [];
+		};
+		const insertContent = (content, options = {}) => {
+			var _editorRef$value3;
+			const { position = "cursor", replaceCharacters } = options, updateOptions = _objectWithoutProperties(options, _excluded);
+			(_editorRef$value3 = editorRef.value) === null || _editorRef$value3 === void 0 || _editorRef$value3.update(() => {
+				const root = $getRoot();
+				if (position === "start") root.selectStart();
+				if (position === "end") root.selectEnd();
+				const selection = $getSelection();
+				if ($isRangeSelection(selection)) {
+					if (replaceCharacters && selection.isCollapsed()) {
+						const anchorNode = selection.anchor.getNode();
+						const offset = selection.anchor.offset;
+						if ($isTextNode(anchorNode) && anchorNode.getTextContent().slice(0, offset).endsWith(replaceCharacters)) {
+							const start = offset - replaceCharacters.length;
+							anchorNode.spliceText(start, replaceCharacters.length, "", true);
+							anchorNode.select(start, start);
+						}
+					}
+					selection.insertNodes(createContentNodes(content));
+					return;
+				}
+				const paragraph = $createParagraphNode();
+				paragraph.append(...createContentNodes(content));
+				root.append(paragraph);
+				paragraph.selectEnd();
+			}, withDiscreteUpdate(updateOptions));
+		};
+		const setJSON = (value, options) => {
+			const editor = editorRef.value;
+			if (!editor) return;
+			try {
+				const editorState = editor.parseEditorState(value);
+				editor.setEditorState(editorState, options);
+				lastSerialized = JSON.stringify(editorState.toJSON());
+			} catch (error) {
+				var _props$editorConfig, _props$editorConfig$o;
+				const normalizedError = error instanceof Error ? error : new Error(String(error));
+				emit("error", normalizedError);
+				(_props$editorConfig = props.editorConfig) === null || _props$editorConfig === void 0 || (_props$editorConfig$o = _props$editorConfig.onError) === null || _props$editorConfig$o === void 0 || _props$editorConfig$o.call(_props$editorConfig, normalizedError);
+			}
+		};
+		const applyInitialValue = () => {
+			const defaultValue = props.defaultValue;
+			if (props.modelValue) {
+				setJSON(props.modelValue, { tag: "sd-rich-text-initial" });
+				return;
+			}
+			if (Array.isArray(defaultValue)) {
+				setContent(defaultValue, { tag: "sd-rich-text-initial" });
+				return;
+			}
+			if (typeof defaultValue === "string") {
+				setPlainText(defaultValue, { tag: "sd-rich-text-initial" });
+				return;
+			}
+			if (defaultValue) {
+				setJSON(defaultValue, { tag: "sd-rich-text-initial" });
+				return;
+			}
+			setPlainText("", { tag: "sd-rich-text-initial" });
+		};
+		const updateComponent = (nodeKey, value, options) => {
+			var _editorRef$value4;
+			(_editorRef$value4 = editorRef.value) === null || _editorRef$value4 === void 0 || _editorRef$value4.update(() => {
+				const node = $getNodeByKey(nodeKey);
+				if ($isInlineComponentNode(node)) node.setValue(value);
+			}, withDiscreteUpdate(options));
+		};
+		const removeComponent = (nodeKey, options) => {
+			var _editorRef$value5;
+			(_editorRef$value5 = editorRef.value) === null || _editorRef$value5 === void 0 || _editorRef$value5.update(() => {
+				const node = $getNodeByKey(nodeKey);
+				if ($isInlineComponentNode(node)) node.remove();
+			}, withDiscreteUpdate(options));
+		};
+		const insertText = (text, options = {}) => {
+			var _editorRef$value6;
+			const { position = "cursor", replaceCharacters } = options, updateOptions = _objectWithoutProperties(options, _excluded2);
+			(_editorRef$value6 = editorRef.value) === null || _editorRef$value6 === void 0 || _editorRef$value6.update(() => {
+				const root = $getRoot();
+				if (position === "start") root.selectStart();
+				if (position === "end") root.selectEnd();
+				const selection = $getSelection();
+				if ($isRangeSelection(selection)) {
+					if (replaceCharacters && selection.isCollapsed()) {
+						const anchorNode = selection.anchor.getNode();
+						const offset = selection.anchor.offset;
+						if ($isTextNode(anchorNode) && anchorNode.getTextContent().slice(0, offset).endsWith(replaceCharacters)) {
+							const start = offset - replaceCharacters.length;
+							anchorNode.spliceText(start, replaceCharacters.length, "", true);
+							anchorNode.select(start, start);
+						}
+					}
+					selection.insertText(text);
+					return;
+				}
+				const paragraph = $createParagraphNode().append($createTextNode(text));
+				root.append(paragraph);
+				paragraph.selectEnd();
+			}, withDiscreteUpdate(updateOptions));
+		};
+		const insertComponent = (data, options) => insertContent([data], options);
+		const clear = () => {
+			setPlainText("", { tag: "sd-rich-text-clear" });
+		};
+		const getJSON = () => {
+			var _editorRef$value7;
+			return (_editorRef$value7 = editorRef.value) === null || _editorRef$value7 === void 0 ? void 0 : _editorRef$value7.getEditorState().toJSON();
+		};
+		const getText = () => {
+			var _editorRef$value$getE2, _editorRef$value8;
+			return (_editorRef$value$getE2 = (_editorRef$value8 = editorRef.value) === null || _editorRef$value8 === void 0 ? void 0 : _editorRef$value8.getEditorState().read(() => $getRoot().getTextContent())) !== null && _editorRef$value$getE2 !== void 0 ? _editorRef$value$getE2 : "";
+		};
+		const getHTML = () => {
+			var _editor$getEditorStat;
+			const editor = editorRef.value;
+			return (_editor$getEditorStat = editor === null || editor === void 0 ? void 0 : editor.getEditorState().read(() => $generateHtmlFromNodes(editor))) !== null && _editor$getEditorStat !== void 0 ? _editor$getEditorStat : "";
+		};
+		const setHTML = (html, options) => {
+			const editor = editorRef.value;
+			if (!editor) return;
+			editor.update(() => {
+				const dom = new DOMParser().parseFromString(html, "text/html");
+				const nodes = $generateNodesFromDOM(editor, dom);
+				$getRoot().clear().append(...nodes);
+			}, withDiscreteUpdate(options));
+		};
+		const getMarkdown = (transformers = props.transformers) => {
+			var _editorRef$value$getE3, _editorRef$value9;
+			return (_editorRef$value$getE3 = (_editorRef$value9 = editorRef.value) === null || _editorRef$value9 === void 0 ? void 0 : _editorRef$value9.getEditorState().read(() => $convertToMarkdownString([...transformers]))) !== null && _editorRef$value$getE3 !== void 0 ? _editorRef$value$getE3 : "";
+		};
+		const setMarkdown = (markdown, transformers = props.transformers, options) => {
+			var _editorRef$value10;
+			(_editorRef$value10 = editorRef.value) === null || _editorRef$value10 === void 0 || _editorRef$value10.update(() => $convertFromMarkdownString(markdown, [...transformers]), withDiscreteUpdate(options));
+		};
+		const formatText = (format) => {
+			var _editorRef$value$disp, _editorRef$value11;
+			return (_editorRef$value$disp = (_editorRef$value11 = editorRef.value) === null || _editorRef$value11 === void 0 ? void 0 : _editorRef$value11.dispatchCommand(FORMAT_TEXT_COMMAND, format)) !== null && _editorRef$value$disp !== void 0 ? _editorRef$value$disp : false;
+		};
+		const undo = () => {
+			var _editorRef$value$disp2, _editorRef$value12;
+			return (_editorRef$value$disp2 = (_editorRef$value12 = editorRef.value) === null || _editorRef$value12 === void 0 ? void 0 : _editorRef$value12.dispatchCommand(UNDO_COMMAND, void 0)) !== null && _editorRef$value$disp2 !== void 0 ? _editorRef$value$disp2 : false;
+		};
+		const redo = () => {
+			var _editorRef$value$disp3, _editorRef$value13;
+			return (_editorRef$value$disp3 = (_editorRef$value13 = editorRef.value) === null || _editorRef$value13 === void 0 ? void 0 : _editorRef$value13.dispatchCommand(REDO_COMMAND, void 0)) !== null && _editorRef$value$disp3 !== void 0 ? _editorRef$value$disp3 : false;
+		};
+		function dispatchCommand(command, payload) {
+			var _editorRef$value$disp4, _editorRef$value14;
+			return (_editorRef$value$disp4 = (_editorRef$value14 = editorRef.value) === null || _editorRef$value14 === void 0 ? void 0 : _editorRef$value14.dispatchCommand(command, payload)) !== null && _editorRef$value$disp4 !== void 0 ? _editorRef$value$disp4 : false;
+		}
+		const warnNotReady = (method) => {
+			console.warn(`[RichTextEditor] ${method}() was called before the editor is ready; call it after the \`ready\` event.`);
+		};
+		function registerCommand(command, listener, priority) {
+			var _editorRef$value$regi, _editorRef$value15;
+			if (!editorRef.value) warnNotReady("registerCommand");
+			return (_editorRef$value$regi = (_editorRef$value15 = editorRef.value) === null || _editorRef$value15 === void 0 ? void 0 : _editorRef$value15.registerCommand(command, listener, priority)) !== null && _editorRef$value$regi !== void 0 ? _editorRef$value$regi : (() => {});
+		}
+		const registerUpdateListener = (listener) => {
+			var _editorRef$value$regi2, _editorRef$value16;
+			if (!editorRef.value) warnNotReady("registerUpdateListener");
+			return (_editorRef$value$regi2 = (_editorRef$value16 = editorRef.value) === null || _editorRef$value16 === void 0 ? void 0 : _editorRef$value16.registerUpdateListener(listener)) !== null && _editorRef$value$regi2 !== void 0 ? _editorRef$value$regi2 : (() => {});
+		};
+		const registerMutationListener = (klass, listener, options) => {
+			var _editorRef$value$regi3, _editorRef$value17;
+			if (!editorRef.value) warnNotReady("registerMutationListener");
+			return (_editorRef$value$regi3 = (_editorRef$value17 = editorRef.value) === null || _editorRef$value17 === void 0 ? void 0 : _editorRef$value17.registerMutationListener(klass, listener, options)) !== null && _editorRef$value$regi3 !== void 0 ? _editorRef$value$regi3 : (() => {});
+		};
+		function registerNodeTransform(klass, listener) {
+			var _editorRef$value$regi4, _editorRef$value18;
+			if (!editorRef.value) warnNotReady("registerNodeTransform");
+			return (_editorRef$value$regi4 = (_editorRef$value18 = editorRef.value) === null || _editorRef$value18 === void 0 ? void 0 : _editorRef$value18.registerNodeTransform(klass, listener)) !== null && _editorRef$value$regi4 !== void 0 ? _editorRef$value$regi4 : (() => {});
+		}
+		onMounted(() => {
+			var _props$editorConfig$n, _props$editorConfig2, _props$editorConfig$n2, _props$editorConfig3, _props$editorConfig5;
+			if (!rootRef.value) return;
+			const configuredNodes = (_props$editorConfig$n = (_props$editorConfig2 = props.editorConfig) === null || _props$editorConfig2 === void 0 ? void 0 : _props$editorConfig2.nodes) !== null && _props$editorConfig$n !== void 0 ? _props$editorConfig$n : [];
+			const editor = createEditor(_objectSpread2(_objectSpread2({}, props.editorConfig), {}, {
+				namespace: (_props$editorConfig$n2 = (_props$editorConfig3 = props.editorConfig) === null || _props$editorConfig3 === void 0 ? void 0 : _props$editorConfig3.namespace) !== null && _props$editorConfig$n2 !== void 0 ? _props$editorConfig$n2 : "SdRichTextEditor",
+				editable: !props.disabled && !props.readonly,
+				nodes: [
+					HeadingNode,
+					QuoteNode,
+					CodeNode,
+					CodeHighlightNode,
+					ListNode,
+					ListItemNode,
+					LinkNode,
+					AutoLinkNode,
+					InlineComponentNode,
+					...configuredNodes
+				],
+				onError: (error) => {
+					var _props$editorConfig4, _props$editorConfig4$;
+					emit("error", error);
+					(_props$editorConfig4 = props.editorConfig) === null || _props$editorConfig4 === void 0 || (_props$editorConfig4$ = _props$editorConfig4.onError) === null || _props$editorConfig4$ === void 0 || _props$editorConfig4$.call(_props$editorConfig4, error);
+				},
+				theme: _objectSpread2({
+					paragraph: `${prefixCls}-paragraph`,
+					quote: `${prefixCls}-quote`,
+					heading: {
+						h1: `${prefixCls}-heading-h1`,
+						h2: `${prefixCls}-heading-h2`,
+						h3: `${prefixCls}-heading-h3`,
+						h4: `${prefixCls}-heading-h4`,
+						h5: `${prefixCls}-heading-h5`,
+						h6: `${prefixCls}-heading-h6`
+					},
+					list: {
+						listitem: `${prefixCls}-list-item`,
+						nested: { listitem: `${prefixCls}-list-item-nested` },
+						ol: `${prefixCls}-list-ordered`,
+						ul: `${prefixCls}-list-unordered`
+					},
+					link: `${prefixCls}-link`,
+					code: `${prefixCls}-code`,
+					text: {
+						bold: `${prefixCls}-text-bold`,
+						italic: `${prefixCls}-text-italic`,
+						underline: `${prefixCls}-text-underline`,
+						strikethrough: `${prefixCls}-text-strikethrough`,
+						code: `${prefixCls}-text-code`
+					}
+				}, (_props$editorConfig5 = props.editorConfig) === null || _props$editorConfig5 === void 0 ? void 0 : _props$editorConfig5.theme)
+			}));
+			editorRef.value = editor;
+			editor.setRootElement(rootRef.value);
+			cleanups.push(registerRichText(editor));
+			cleanups.push(editor.registerUpdateListener(handleUpdate));
+			cleanups.push(editor.registerCommand(CAN_UNDO_COMMAND, (value) => {
+				canUndo.value = value;
+				return false;
+			}, COMMAND_PRIORITY_LOW), editor.registerCommand(CAN_REDO_COMMAND, (value) => {
+				canRedo.value = value;
+				return false;
+			}, COMMAND_PRIORITY_LOW));
+			if (props.history) cleanups.push(registerHistory(editor, createEmptyHistoryState(), props.historyDelay, Date.now, void 0, props.historyMaxDepth));
+			for (const plugin of props.plugins) {
+				const cleanup = plugin(editor, { rootElement: rootRef.value });
+				if (cleanup) cleanups.push(cleanup);
+			}
+			applyInitialValue();
+			emit("ready", editor);
+			nextTick(refreshComponentHosts);
+		});
+		watch(() => props.modelValue, (value) => {
+			if (!value || !editorRef.value) return;
+			if (serializeValue(value) === lastSerialized) return;
+			applyingExternalValue = true;
+			setJSON(value, { tag: "sd-rich-text-external" });
+			queueMicrotask(() => {
+				applyingExternalValue = false;
+			});
+		}, { deep: true });
+		watch(() => [props.disabled, props.readonly], ([disabled, readonly]) => {
+			var _editorRef$value19;
+			(_editorRef$value19 = editorRef.value) === null || _editorRef$value19 === void 0 || _editorRef$value19.setEditable(!disabled && !readonly);
+		});
+		onBeforeUnmount(() => {
+			var _cleanups$pop, _editorRef$value20;
+			while (cleanups.length) (_cleanups$pop = cleanups.pop()) === null || _cleanups$pop === void 0 || _cleanups$pop();
+			(_editorRef$value20 = editorRef.value) === null || _editorRef$value20 === void 0 || _editorRef$value20.setRootElement(null);
+			editorRef.value = null;
+			componentHosts.value = [];
+		});
+		__expose({
+			get editor() {
+				return editorRef.value;
+			},
+			get editorState() {
+				var _editorRef$value$getE4, _editorRef$value21;
+				return (_editorRef$value$getE4 = (_editorRef$value21 = editorRef.value) === null || _editorRef$value21 === void 0 ? void 0 : _editorRef$value21.getEditorState()) !== null && _editorRef$value$getE4 !== void 0 ? _editorRef$value$getE4 : null;
+			},
+			get rootElement() {
+				var _rootRef$value;
+				return (_rootRef$value = rootRef.value) !== null && _rootRef$value !== void 0 ? _rootRef$value : null;
+			},
+			get canUndo() {
+				return canUndo.value;
+			},
+			get canRedo() {
+				return canRedo.value;
+			},
+			focus: (callback, options = {}) => {
+				const { selection, preventScroll } = options, focusOptions = _objectWithoutProperties(options, _excluded3);
+				const editor = editorRef.value;
+				if (preventScroll) {
+					editor === null || editor === void 0 || editor.update(() => {
+						const root = $getRoot();
+						if (selection === "start") root.selectStart();
+						else if (selection === "end") root.selectEnd();
+						else if (selection === "all") root.select(0, root.getChildrenSize());
+						else {
+							const currentSelection = $getSelection();
+							if (currentSelection) $setSelection(currentSelection.clone());
+							else if (root.getChildrenSize()) if (focusOptions.defaultSelection === "rootStart") root.selectStart();
+							else root.selectEnd();
+						}
+					}, {
+						discrete: true,
+						onUpdate: callback,
+						tag: SKIP_SCROLL_INTO_VIEW_TAG
+					});
+					return;
+				}
+				if (selection) editor === null || editor === void 0 || editor.update(() => {
+					const root = $getRoot();
+					if (selection === "start") root.selectStart();
+					if (selection === "end") root.selectEnd();
+					if (selection === "all") root.select(0, root.getChildrenSize());
+				}, { discrete: true });
+				editor === null || editor === void 0 || editor.focus(callback, focusOptions);
+			},
+			blur: () => {
+				var _editorRef$value22;
+				return (_editorRef$value22 = editorRef.value) === null || _editorRef$value22 === void 0 ? void 0 : _editorRef$value22.blur();
+			},
+			clear,
+			undo,
+			redo,
+			getJSON,
+			setJSON,
+			getContent,
+			setContent,
+			insertContent,
+			getText,
+			getHTML,
+			setHTML,
+			getMarkdown,
+			setMarkdown,
+			insertText,
+			insertComponent,
+			updateComponent,
+			removeComponent,
+			formatText,
+			read: (callback) => {
+				var _editorRef$value23;
+				return (_editorRef$value23 = editorRef.value) === null || _editorRef$value23 === void 0 ? void 0 : _editorRef$value23.getEditorState().read(callback);
+			},
+			update: (callback, options) => {
+				var _editorRef$value24;
+				return (_editorRef$value24 = editorRef.value) === null || _editorRef$value24 === void 0 ? void 0 : _editorRef$value24.update(callback, options);
+			},
+			dispatchCommand,
+			registerCommand,
+			registerUpdateListener,
+			registerMutationListener,
+			registerNodeTransform
+		});
+		return (_ctx, _cache) => {
+			var _props$styles, _props$classNames, _props$styles2, _props$classNames2, _props$styles3;
+			return openBlock(), createElementBlock("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: normalizeClass(rootClass.value),
+				style: normalizeStyle((_props$styles = __props.styles) === null || _props$styles === void 0 ? void 0 : _props$styles.root)
+			}, [
+				createElementVNode("div", {
+					ref_key: "rootRef",
+					ref: rootRef,
+					class: normalizeClass([`${unref(prefixCls)}-content`, (_props$classNames = __props.classNames) === null || _props$classNames === void 0 ? void 0 : _props$classNames.content]),
+					style: normalizeStyle([contentStyle.value, (_props$styles2 = __props.styles) === null || _props$styles2 === void 0 ? void 0 : _props$styles2.content]),
+					role: "textbox",
+					"aria-multiline": "true",
+					"aria-label": resolvedAriaLabel.value,
+					"aria-disabled": __props.disabled || void 0,
+					"aria-readonly": __props.readonly || void 0,
+					spellcheck: __props.spellcheck,
+					contenteditable: !__props.disabled && !__props.readonly,
+					onFocus: _cache[0] || (_cache[0] = ($event) => emit("focus", $event)),
+					onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event))
+				}, null, 46, _hoisted_1),
+				isEmpty.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass([`${unref(prefixCls)}-placeholder`, (_props$classNames2 = __props.classNames) === null || _props$classNames2 === void 0 ? void 0 : _props$classNames2.placeholder]),
+					style: normalizeStyle((_props$styles3 = __props.styles) === null || _props$styles3 === void 0 ? void 0 : _props$styles3.placeholder),
+					"aria-hidden": "true"
+				}, [renderSlot(_ctx.$slots, "placeholder", {}, () => [createTextVNode(toDisplayString(__props.placeholder), 1)])], 6)) : createCommentVNode("", true),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(componentHosts.value, (host) => {
+					var _props$classNames3, _props$styles4;
+					return openBlock(), createBlock(Teleport, {
+						key: host.nodeKey,
+						to: host.element
+					}, [createElementVNode("span", {
+						class: normalizeClass((_props$classNames3 = __props.classNames) === null || _props$classNames3 === void 0 ? void 0 : _props$classNames3.component),
+						style: normalizeStyle((_props$styles4 = __props.styles) === null || _props$styles4 === void 0 ? void 0 : _props$styles4.component)
+					}, [_ctx.$slots[`node-${host.node.name}`] ? renderSlot(_ctx.$slots, `node-${host.node.name}`, {
+						nodeKey: host.nodeKey,
+						node: host.node,
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						update: (value) => updateComponent(host.nodeKey, value),
+						remove: () => removeComponent(host.nodeKey),
+						editor: host.editor
+					}, void 0, void 0, 0) : (openBlock(), createBlock(rich_text_node_renderer_default, {
+						key: 1,
+						node: host.node,
+						disabled: __props.disabled,
+						readonly: __props.readonly,
+						onUpdate: ($event) => updateComponent(host.nodeKey, $event),
+						onRemove: ($event) => removeComponent(host.nodeKey)
+					}, {
+						default: withCtx(() => [createElementVNode("span", { class: normalizeClass(`${unref(prefixCls)}-component-fallback`) }, toDisplayString(host.node.textValue), 3)]),
+						_: 2
+					}, 1032, [
+						"node",
+						"disabled",
+						"readonly",
+						"onUpdate",
+						"onRemove"
+					]))], 6)], 8, ["to"]);
+				}), 128))
+			], 6);
+		};
+	}
+}));
+//#endregion
+export { rich_text_editor_vue_vue_type_script_setup_true_lang_default as default };

package/es/rich-text-editor/rich-text-node-renderer.js

@@ -0,0 +1,5 @@
+import rich_text_node_renderer_vue_vue_type_script_setup_true_lang_default from "./rich-text-node-renderer.vue_vue_type_script_setup_true_lang.js";
+//#region components/rich-text-editor/rich-text-node-renderer.vue
+var rich_text_node_renderer_default = rich_text_node_renderer_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { rich_text_node_renderer_default as default };

package/es/rich-text-editor/rich-text-node-renderer.vue.d.ts

@@ -0,0 +1,28 @@
+import type { JsonValue } from 'type-fest';
+import type { RichTextEditorComponentNodeSnapshot } from './types';
+type __VLS_Props = {
+    node: RichTextEditorComponentNodeSnapshot;
+    disabled?: boolean;
+    readonly?: boolean;
+};
+declare var __VLS_10: {}, __VLS_27: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_27) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    update: (value: JsonValue) => any;
+    remove: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdate?: ((value: JsonValue) => any) | undefined;
+    onRemove?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};