import warning from "../../_utils/warning.js";
import { useSenderContext } from "../context.js";
import Skill_default from "./Skill.js";
import { classNames } from "@v-c/util";
import { computed, createTextVNode, createVNode, defineComponent, nextTick, onBeforeUnmount, ref, render, watch } from "vue";
import { Dropdown, Input } from "antdv-next";
//#region components/sender/components/SlotTextArea.tsx
var SUPPORTED_INPUT_TYPES = new Set([
	"input",
	"select",
	"custom",
	"content"
]);
function stringifyValue(value) {
	if (value === void 0 || value === null) return "";
	if (typeof value === "string") return value;
	if (typeof value === "number" || typeof value === "boolean") return `${value}`;
	try {
		return JSON.stringify(value);
	} catch {
		return "";
	}
}
function getDefaultSlotValue(config) {
	if (!config.key) return void 0;
	const props = config.props ?? {};
	if (SUPPORTED_INPUT_TYPES.has(config.type)) return props.defaultValue ?? "";
	return props.value ?? props.label ?? "";
}
var SlotTextArea_default = /* @__PURE__ */ defineComponent({
	name: "SlotTextArea",
	setup(_, { expose }) {
		const senderCtx = useSenderContext();
		const editableRef = ref();
		const slotDomMap = ref(/* @__PURE__ */ new Map());
		const slotConfigMap = ref(/* @__PURE__ */ new Map());
		const slotValues = ref({});
		const mountedDomSet = ref(/* @__PURE__ */ new Set());
		const skillDomRef = ref(null);
		const currentSkillRef = ref(void 0);
		const lastSlotConfigRef = ref(void 0);
		const lastSkillRef = ref(void 0);
		const isComposing = ref(false);
		const keyLock = ref(false);
		const prefixCls = computed(() => senderCtx.value.prefixCls || "antd-sender");
		const mergeInputStyle = computed(() => ({
			...senderCtx.value.styles?.input,
			...getAutoSizeStyle()
		}));
		const getAutoSizeStyle = () => {
			const autoSize = senderCtx.value.autoSize;
			if (autoSize === true) return { height: "auto" };
			if (!autoSize || typeof autoSize !== "object") return {};
			const lineHeight = 22;
			return {
				minHeight: autoSize.minRows ? `${autoSize.minRows * lineHeight}px` : void 0,
				maxHeight: autoSize.maxRows ? `${autoSize.maxRows * lineHeight}px` : void 0,
				overflowY: "auto"
			};
		};
		const getNodeInfo = (targetNode) => {
			if (!targetNode?.dataset) return null;
			const slotKey = targetNode.dataset.slotKey;
			return {
				slotKey,
				skillKey: targetNode.dataset.skillKey,
				nodeType: targetNode.dataset.nodeType,
				slotConfig: slotKey ? slotConfigMap.value.get(slotKey) : void 0
			};
		};
		const unmountDom = (container) => {
			if (!container) return;
			render(null, container);
			mountedDomSet.value.delete(container);
		};
		const unmountAllPortals = () => {
			mountedDomSet.value.forEach((container) => {
				render(null, container);
			});
			mountedDomSet.value.clear();
		};
		const buildSkillSpan = (key) => {
			const span = document.createElement("span");
			span.setAttribute("contenteditable", "false");
			span.dataset.skillKey = key;
			span.dataset.placeholder = senderCtx.value.placeholder || "";
			span.className = `${prefixCls.value}-skill`;
			return span;
		};
		const buildSlotSpan = (key) => {
			const span = document.createElement("span");
			span.setAttribute("contenteditable", "false");
			span.dataset.slotKey = key;
			span.className = `${prefixCls.value}-slot`;
			return span;
		};
		const buildEditSlotSpan = (config) => {
			const span = document.createElement("span");
			span.setAttribute("contenteditable", senderCtx.value.readOnly ? "false" : "true");
			span.dataset.slotKey = config.key;
			span.className = `${prefixCls.value}-slot ${prefixCls.value}-slot-content`;
			return span;
		};
		const buildSpaceSpan = (slotKey, position) => {
			const span = document.createElement("span");
			span.setAttribute("contenteditable", "false");
			span.dataset.slotKey = slotKey;
			span.dataset.nodeType = "nbsp";
			span.className = `${prefixCls.value}-slot-${position} ${prefixCls.value}-slot-no-width`;
			span.textContent = "\xA0";
			return span;
		};
		const getNodeTextValue = (node) => {
			if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? "";
			if (node.nodeType !== Node.ELEMENT_NODE) return "";
			const element = node;
			const nodeInfo = getNodeInfo(element);
			if (!nodeInfo) return element.innerText || "";
			if (nodeInfo.skillKey) return "";
			if (nodeInfo.slotKey) {
				if (nodeInfo.nodeType === "nbsp") return " ";
				const config = nodeInfo.slotConfig;
				if (!config || config.type === "content") return element.innerText || "";
				const rawValue = slotValues.value[nodeInfo.slotKey];
				return config.formatResult?.(rawValue) ?? stringifyValue(rawValue);
			}
			return element.innerText || "";
		};
		const getEditorValue = () => {
			const editable = editableRef.value;
			const emptyResult = {
				value: "",
				slotConfig: [],
				skill: void 0
			};
			if (!editable) return emptyResult;
			const childNodes = editable.childNodes;
			if (childNodes.length === 0) return emptyResult;
			const textList = [];
			const currentSlotConfig = [];
			let currentSkill;
			childNodes.forEach((node) => {
				const textValue = getNodeTextValue(node);
				textList.push(textValue);
				if (node.nodeType === Node.TEXT_NODE) {
					if (textValue) currentSlotConfig.push({
						type: "text",
						value: textValue
					});
					return;
				}
				if (node.nodeType === Node.ELEMENT_NODE) {
					const info = getNodeInfo(node);
					if (!info) return;
					if (info.skillKey && currentSkillRef.value) currentSkill = currentSkillRef.value;
					if (info.slotKey && info.nodeType !== "nbsp") {
						const cfg = slotConfigMap.value.get(info.slotKey);
						if (cfg) currentSlotConfig.push({
							...cfg,
							value: textValue
						});
					}
				}
			});
			return {
				value: textList.join(""),
				slotConfig: currentSlotConfig,
				skill: currentSkill
			};
		};
		const updateSubmitDisabled = () => {
			const value = getEditorValue();
			senderCtx.value.setSubmitDisabled?.(!value.value && value.slotConfig.length === 0 && !value.skill);
		};
		const triggerValueChange = (event) => {
			const value = getEditorValue();
			senderCtx.value.onChange?.(value.value, event, value.slotConfig, value.skill);
			updateSkillEmptyStatus(value);
			updateSubmitDisabled();
		};
		const updateSlot = (key, value, event) => {
			slotValues.value = {
				...slotValues.value,
				[key]: value
			};
			const config = slotConfigMap.value.get(key);
			const dom = slotDomMap.value.get(key);
			if (config && dom && config.type !== "content") renderSlot(config, dom);
			triggerValueChange(event);
		};
		const buildSelectMenuItems = (options) => {
			return (options ?? []).map((option) => ({
				label: option,
				key: option
			}));
		};
		const renderSlot = (config, slotDom) => {
			if (!("key" in config) || !config.key) return;
			const slotValue = slotValues.value[config.key];
			let node = null;
			switch (config.type) {
				case "input":
					node = createVNode(Input, {
						"class": `${prefixCls.value}-slot-input`,
						"placeholder": config.props?.placeholder,
						"value": slotValue ?? "",
						"size": "small",
						"variant": "borderless",
						"readonly": senderCtx.value.readOnly,
						"disabled": senderCtx.value.disabled,
						"onKeydown": onInternalKeyDown,
						"onChange": (e) => {
							updateSlot(config.key, e?.target?.value ?? "", e);
						}
					}, null);
					break;
				case "select": {
					const displayValue = stringifyValue(slotValue);
					node = createVNode(Dropdown, {
						"disabled": senderCtx.value.readOnly || senderCtx.value.disabled,
						"trigger": ["click"],
						"menu": {
							items: buildSelectMenuItems(config.props?.options),
							selectable: true,
							selectedKeys: displayValue ? [displayValue] : [],
							onSelect: ({ key, domEvent }) => {
								updateSlot(config.key, key, domEvent);
							}
						}
					}, { default: () => [createVNode("span", { "class": classNames([`${prefixCls.value}-slot-select`, {
						placeholder: !displayValue,
						[`${prefixCls.value}-slot-select-selector-value`]: !!displayValue
					}]) }, [createVNode("span", {
						"data-placeholder": config.props?.placeholder,
						"class": `${prefixCls.value}-slot-select-value`
					}, [displayValue]), createVNode("span", { "class": `${prefixCls.value}-slot-select-arrow` }, [createTextVNode("▼")])])] });
					break;
				}
				case "tag":
					node = createVNode("span", { "class": `${prefixCls.value}-slot-tag` }, [config.props?.label ?? config.props?.value ?? ""]);
					break;
				case "custom":
					node = config.customRender?.(slotValue, (nextValue) => {
						updateSlot(config.key, nextValue);
					}, {
						disabled: senderCtx.value.disabled,
						readOnly: senderCtx.value.readOnly
					}, config);
					break;
				case "content":
					slotDom.innerText = stringifyValue(slotValue);
					slotDom.dataset.placeholder = config.props?.placeholder ?? "";
					return;
				default: return;
			}
			if (!node) return;
			mountedDomSet.value.add(slotDom);
			render(node, slotDom);
		};
		const buildSlotNodes = (configs) => {
			const list = [];
			configs.forEach((config) => {
				if (config.type === "text") {
					list.push(document.createTextNode(config.value || ""));
					return;
				}
				if (!("key" in config) || !config.key) {
					warning(false, "Sender", "Slot key is missing");
					return;
				}
				slotConfigMap.value.set(config.key, config);
				if (config.type === "content") {
					const before = buildSpaceSpan(config.key, "before");
					const slot = buildEditSlotSpan(config);
					const after = buildSpaceSpan(config.key, "after");
					slotValues.value[config.key] = slotValues.value[config.key] ?? getDefaultSlotValue(config);
					slot.innerText = stringifyValue(slotValues.value[config.key]);
					slot.dataset.placeholder = config.props?.placeholder ?? "";
					slotDomMap.value.set(`${config.key}_before`, before);
					slotDomMap.value.set(config.key, slot);
					slotDomMap.value.set(`${config.key}_after`, after);
					list.push(before, slot, after);
					return;
				}
				const slot = buildSlotSpan(config.key);
				slotValues.value[config.key] = slotValues.value[config.key] ?? getDefaultSlotValue(config);
				slotDomMap.value.set(config.key, slot);
				renderSlot(config, slot);
				list.push(slot);
			});
			return list;
		};
		const mergeSlotConfig = (configs) => {
			const nextValues = { ...slotValues.value };
			configs.forEach((config) => {
				if ("key" in config && config.key) {
					slotConfigMap.value.set(config.key, config);
					if (!(config.key in nextValues)) nextValues[config.key] = getDefaultSlotValue(config);
				}
			});
			slotValues.value = nextValues;
		};
		const clearEditor = () => {
			unmountAllPortals();
			slotDomMap.value.clear();
			slotConfigMap.value.clear();
			slotValues.value = {};
			currentSkillRef.value = void 0;
			if (skillDomRef.value) unmountDom(skillDomRef.value);
			skillDomRef.value = null;
			if (editableRef.value) editableRef.value.innerHTML = "";
		};
		const getSelection = () => {
			if (typeof window === "undefined") return null;
			return window.getSelection();
		};
		const setRange = (range, selection) => {
			selection.removeAllRanges();
			selection.addRange(range);
		};
		const setCursorPosition = (targetNode, offset, preventScroll) => {
			const editable = editableRef.value;
			if (!editable) return;
			editable.focus({ preventScroll });
			const selection = getSelection();
			if (!selection) return;
			const range = document.createRange();
			range.setStart(targetNode, offset);
			range.collapse(true);
			setRange(range, selection);
		};
		const setStartCursor = (preventScroll) => {
			const editable = editableRef.value;
			if (!editable) return;
			setCursorPosition(editable, skillDomRef.value ? 1 : 0, preventScroll);
		};
		const setEndCursor = (preventScroll) => {
			const editable = editableRef.value;
			if (!editable) return;
			editable.focus({ preventScroll });
			const selection = getSelection();
			if (!selection) return;
			const range = document.createRange();
			range.selectNodeContents(editable);
			range.collapse(false);
			setRange(range, selection);
		};
		const selectAll = (preventScroll) => {
			const editable = editableRef.value;
			if (!editable) return;
			editable.focus({ preventScroll });
			const selection = getSelection();
			if (!selection) return;
			const range = document.createRange();
			range.selectNodeContents(editable);
			if (skillDomRef.value) range.setStart(editable, 1);
			setRange(range, selection);
		};
		const focusSlot = (key, preventScroll) => {
			const editable = editableRef.value;
			if (!editable) return;
			const resolveTarget = (slotKey) => {
				const slotDom = slotDomMap.value.get(slotKey);
				const slotCfg = slotConfigMap.value.get(slotKey);
				if (!slotDom || !slotCfg) return null;
				if (slotCfg.type === "input") return slotDom.querySelector("input");
				if (slotCfg.type === "content") return slotDom;
				return null;
			};
			if (key) {
				const target = resolveTarget(key);
				if (target instanceof HTMLInputElement) {
					target.focus({ preventScroll });
					return;
				}
				if (target instanceof HTMLSpanElement) {
					setCursorPosition(target, 0, preventScroll);
					return;
				}
			}
			for (const node of Array.from(editable.childNodes)) {
				if (!(node instanceof HTMLElement)) continue;
				const slotKey = node.dataset.slotKey;
				const nodeType = node.dataset.nodeType;
				if (!slotKey || nodeType === "nbsp") continue;
				const target = resolveTarget(slotKey);
				if (target instanceof HTMLInputElement) {
					target.focus({ preventScroll });
					return;
				}
				if (target instanceof HTMLSpanElement) {
					setCursorPosition(target, 0, preventScroll);
					return;
				}
			}
			setEndCursor(preventScroll);
		};
		const removeSlot = (key, event) => {
			const editable = editableRef.value;
			if (!editable) return;
			editable.querySelectorAll(`[data-slot-key="${key}"]`).forEach((element) => {
				unmountDom(element);
				element.remove();
			});
			const nextValues = { ...slotValues.value };
			delete nextValues[key];
			slotValues.value = nextValues;
			slotConfigMap.value.delete(key);
			slotDomMap.value.delete(key);
			slotDomMap.value.delete(`${key}_before`);
			slotDomMap.value.delete(`${key}_after`);
			triggerValueChange(event);
		};
		const removeSkill = (triggerChange = true) => {
			const skillDom = skillDomRef.value;
			if (!skillDom) return;
			unmountDom(skillDom);
			skillDom.remove();
			skillDomRef.value = null;
			currentSkillRef.value = void 0;
			if (triggerChange) triggerValueChange();
		};
		const renderSkill = () => {
			const editable = editableRef.value;
			const skill = senderCtx.value.skill;
			if (!editable) return;
			if (!skill) {
				removeSkill(false);
				return;
			}
			let skillDom = skillDomRef.value;
			if (!skillDom) {
				skillDom = buildSkillSpan(skill.value);
				editable.insertBefore(skillDom, editable.firstChild);
				skillDomRef.value = skillDom;
			}
			currentSkillRef.value = skill;
			mountedDomSet.value.add(skillDom);
			render(createVNode(Skill_default, {
				"prefixCls": prefixCls.value,
				"skill": skill,
				"removeSkill": () => removeSkill(true)
			}, null), skillDom);
		};
		const updateSkillEmptyStatus = (value = getEditorValue()) => {
			const skillDom = skillDomRef.value;
			if (!skillDom) return;
			if (!value.value && value.slotConfig.length === 0 && !!senderCtx.value.placeholder) {
				skillDom.setAttribute("contenteditable", "true");
				skillDom.classList.add(`${prefixCls.value}-skill-empty`);
			} else {
				skillDom.setAttribute("contenteditable", "false");
				skillDom.classList.remove(`${prefixCls.value}-skill-empty`);
			}
		};
		const initFromSlotConfig = (configs) => {
			const editable = editableRef.value;
			if (!editable) return;
			clearEditor();
			const mergeConfigs = configs ?? [];
			mergeConfigs.forEach((config) => {
				if ("key" in config && config.key) {
					slotConfigMap.value.set(config.key, config);
					const defaultValue = getDefaultSlotValue(config);
					if (defaultValue !== void 0) slotValues.value[config.key] = defaultValue;
				}
			});
			buildSlotNodes(mergeConfigs).forEach((node) => {
				editable.appendChild(node);
			});
			renderSkill();
			nextTick(() => {
				triggerValueChange();
			});
		};
		const removeSpecificBRs = () => {
			if (senderCtx.value.submitType !== "enter") return;
			editableRef.value?.querySelectorAll("br").forEach((br) => br.remove());
		};
		const shouldSubmit = (event) => {
			const { key, shiftKey, ctrlKey, altKey, metaKey } = event;
			if (key !== "Enter") return false;
			const isModifierPressed = ctrlKey || altKey || metaKey;
			const submitType = senderCtx.value.submitType ?? "enter";
			return submitType === "enter" && !shiftKey && !isModifierPressed || submitType === "shiftEnter" && shiftKey && !isModifierPressed;
		};
		const findOuterContainer = (node) => {
			const editable = editableRef.value;
			if (!node || !editable) return null;
			let current = node;
			if (current.nodeType === Node.TEXT_NODE) current = current.parentNode;
			while (current && current !== editable) {
				if (current instanceof HTMLElement && current.tagName === "SPAN") return current;
				current = current.parentNode;
			}
			return null;
		};
		const handleBackspaceDelete = (event) => {
			const selection = getSelection();
			if (!selection || !selection.isCollapsed) return false;
			const editable = editableRef.value;
			if (!editable) return false;
			const anchorNode = selection.anchorNode;
			const offset = selection.anchorOffset;
			if (!anchorNode || !editable.contains(anchorNode)) return false;
			let previous;
			if (anchorNode === editable) {
				if (offset <= 0) return false;
				previous = editable.childNodes[offset - 1];
			} else {
				if (anchorNode.nodeType === Node.TEXT_NODE && offset > 0) return false;
				previous = (anchorNode.nodeType === Node.TEXT_NODE ? anchorNode.parentNode : anchorNode)?.previousSibling;
			}
			if (!(previous instanceof HTMLElement)) return false;
			const info = getNodeInfo(previous);
			if (info?.slotKey) {
				event.preventDefault();
				removeSlot(info.slotKey, event);
				return true;
			}
			if (info?.skillKey) {
				event.preventDefault();
				removeSkill(true);
				return true;
			}
			return false;
		};
		const onInternalKeyDown = (event) => {
			if (senderCtx.value.onKeyDown?.(event) === false || keyLock.value || isComposing.value) return;
			if (event.key === "Backspace" && handleBackspaceDelete(event)) return;
			if (shouldSubmit(event)) {
				event.preventDefault();
				keyLock.value = true;
				senderCtx.value.triggerSend?.();
				return;
			}
			if ((event.key === "a" || event.key === "A") && (event.ctrlKey || event.metaKey)) {
				event.preventDefault();
				selectAll(true);
			}
		};
		const onInternalKeyUp = (event) => {
			if (event.key === "Enter") keyLock.value = false;
			senderCtx.value.onKeyUp?.(event);
		};
		const normalizeSkillTextInput = () => {
			const editable = editableRef.value;
			const skillDom = skillDomRef.value;
			if (!editable || !skillDom) return;
			const selection = getSelection();
			const cursorNode = selection?.anchorNode && skillDom.contains(selection.anchorNode) ? selection.anchorNode : null;
			const cursorOffset = selection?.anchorOffset ?? 0;
			const wrapperCls = `${prefixCls.value}-skill-wrapper`;
			const textNodes = Array.from(skillDom.childNodes).filter((node) => {
				if (node instanceof HTMLElement && node.classList.contains(wrapperCls)) return false;
				return node.textContent;
			});
			const referenceNode = skillDom.nextSibling;
			textNodes.forEach((node) => {
				editable.insertBefore(node, referenceNode);
			});
			if (cursorNode && editable.contains(cursorNode)) {
				const range = document.createRange();
				const nextOffset = cursorNode.nodeType === Node.TEXT_NODE ? Math.min(cursorOffset, cursorNode.textContent?.length ?? 0) : Math.min(cursorOffset, cursorNode.childNodes.length);
				range.setStart(cursorNode, nextOffset);
				range.collapse(true);
				selection?.removeAllRanges();
				selection?.addRange(range);
			}
		};
		const onInternalInput = (event) => {
			removeSpecificBRs();
			normalizeSkillTextInput();
			triggerValueChange(event);
		};
		const onInternalPaste = (event) => {
			event.preventDefault();
			const files = event.clipboardData?.files;
			const text = event.clipboardData?.getData("text/plain") ?? "";
			if (!text && files?.length && senderCtx.value.onPasteFile) {
				senderCtx.value.onPasteFile(files);
				return;
			}
			if (text) {
				const selection = getSelection();
				if (selection && selection.rangeCount > 0) {
					const range = selection.getRangeAt(0);
					range.deleteContents();
					const textNode = document.createTextNode(text.replace(/\u200B/g, ""));
					range.insertNode(textNode);
					range.setStartAfter(textNode);
					range.collapse(true);
					selection.removeAllRanges();
					selection.addRange(range);
				}
			}
			onInternalInput(event);
			senderCtx.value.onPaste?.(event);
		};
		const onInternalSelect = () => {
			const selection = getSelection();
			const editable = editableRef.value;
			if (!selection || !editable) return;
			if (selection.focusNode === editable && selection.focusOffset === 0 && getEditorValue().skill) setCursorPosition(editable, 1);
		};
		const getRangeForInsert = (position = "cursor") => {
			const editable = editableRef.value;
			if (!editable) return null;
			const selection = getSelection();
			const range = document.createRange();
			if (position === "start") {
				const index = skillDomRef.value ? 1 : 0;
				range.setStart(editable, index);
				range.collapse(true);
				return {
					range,
					selection
				};
			}
			if (position === "end") {
				range.selectNodeContents(editable);
				range.collapse(false);
				return {
					range,
					selection
				};
			}
			if (selection && selection.rangeCount > 0 && editable.contains(selection.getRangeAt(0).startContainer)) {
				const currentRange = selection.getRangeAt(0).cloneRange();
				const outer = findOuterContainer(currentRange.startContainer);
				const outerInfo = outer ? getNodeInfo(outer) : null;
				if (outer && outerInfo?.slotKey && outerInfo.slotConfig?.type !== "content") {
					currentRange.setStartAfter(outer);
					currentRange.collapse(true);
				}
				return {
					range: currentRange,
					selection
				};
			}
			range.selectNodeContents(editable);
			range.collapse(false);
			return {
				range,
				selection
			};
		};
		const insert = (slotConfig, position = "cursor", replaceCharacters, preventScroll) => {
			const editable = editableRef.value;
			if (!editable || !slotConfig.length) return;
			mergeSlotConfig(slotConfig);
			const nodes = buildSlotNodes(slotConfig);
			if (!nodes.length) return;
			const insertContext = getRangeForInsert(position);
			if (!insertContext?.range) return;
			const { range, selection } = insertContext;
			editable.focus({ preventScroll });
			if (replaceCharacters) {
				if ((getSelection()?.toString() ?? "").endsWith(replaceCharacters)) range.setStart(range.startContainer, Math.max(0, range.startOffset - replaceCharacters.length));
			}
			range.deleteContents();
			nodes.forEach((node) => {
				range.insertNode(node);
				range.setStartAfter(node);
			});
			range.collapse(true);
			if (selection) {
				selection.removeAllRanges();
				selection.addRange(range);
			}
			onInternalInput();
		};
		const focus = (options) => {
			const cursor = options?.cursor ?? "end";
			if (cursor === "start") {
				setStartCursor(options?.preventScroll);
				return;
			}
			if (cursor === "all") {
				selectAll(options?.preventScroll);
				return;
			}
			if (cursor === "slot") {
				focusSlot(options?.key, options?.preventScroll);
				return;
			}
			setEndCursor(options?.preventScroll);
		};
		const clear = () => {
			clearEditor();
			renderSkill();
			onInternalInput();
		};
		expose({
			get nativeElement() {
				return editableRef.value ?? null;
			},
			focus,
			blur() {
				editableRef.value?.blur();
			},
			insert,
			clear,
			getValue: getEditorValue
		});
		const applySlotConfig = (configs, force = false) => {
			if (!force && configs === lastSlotConfigRef.value) return;
			lastSlotConfigRef.value = configs;
			initFromSlotConfig(configs);
		};
		watch(() => editableRef.value, (editable) => {
			if (!editable) return;
			applySlotConfig(senderCtx.value.slotConfig, true);
		}, { immediate: true });
		watch(() => senderCtx.value.slotConfig, (configs) => {
			applySlotConfig(configs);
		}, { immediate: true });
		watch(() => senderCtx.value.skill, (skill) => {
			if (skill === lastSkillRef.value && skillDomRef.value) return;
			lastSkillRef.value = skill;
			renderSkill();
			nextTick(() => {
				triggerValueChange();
			});
		}, { immediate: true });
		watch(() => senderCtx.value.readOnly, (readOnly) => {
			slotConfigMap.value.forEach((config, key) => {
				if (config.type === "content") slotDomMap.value.get(key)?.setAttribute("contenteditable", readOnly ? "false" : "true");
			});
		});
		onBeforeUnmount(() => {
			unmountAllPortals();
		});
		return () => {
			const inputCls = `${prefixCls.value}-input`;
			return createVNode("div", {
				"ref": editableRef,
				"role": "textbox",
				"tabindex": 0,
				"class": classNames([
					inputCls,
					`${inputCls}-slot`,
					senderCtx.value.classNames?.input
				]),
				"style": mergeInputStyle.value,
				"data-placeholder": senderCtx.value.placeholder,
				"contenteditable": !senderCtx.value.readOnly,
				"spellcheck": false,
				"onInput": onInternalInput,
				"onKeydown": onInternalKeyDown,
				"onKeyup": onInternalKeyUp,
				"onPaste": onInternalPaste,
				"onCut": onInternalInput,
				"onSelect": onInternalSelect,
				"onFocus": (e) => {
					senderCtx.value.onFocus?.(e);
				},
				"onBlur": (e) => {
					keyLock.value = false;
					senderCtx.value.onBlur?.(e);
				},
				"onCompositionstart": () => {
					isComposing.value = true;
				},
				"onCompositionend": () => {
					isComposing.value = false;
					keyLock.value = false;
				}
			}, null);
		};
	}
});
//#endregion
export { SlotTextArea_default as default };
