@shtabapp/ui-kit 1.84.0 → 1.85.1

package/dist/components/SInlineInput/utils/useCursorManagement.js

@@ -0,0 +1,122 @@
+import { nextTick } from "vue";
+//#region src/components/SInlineInput/utils/useCursorManagement.ts
+/**
+* Composable для управления курсором в contenteditable.
+* Надежно работает, даже если браузер или расширения разбили текст на несколько узлов.
+*
+* @param elementRef - Ref на contenteditable элемент
+* @returns Методы для работы с курсором
+*/
+var useCursorManagement = (elementRef) => {
+	const isEditableActive = (activeElement, editable) => {
+		return activeElement === editable || activeElement instanceof Node && editable.contains(activeElement);
+	};
+	/**
+	* Получает текущую позицию курсора (смещение в символах от начала всего текста).
+	* @returns offset или 0 если недоступно
+	*/
+	const getCursorOffset = () => {
+		const selection = window.getSelection();
+		if (!selection?.rangeCount || !elementRef.value || !elementRef.value.contains(selection.anchorNode)) return 0;
+		const range = selection.getRangeAt(0);
+		const preCaretRange = range.cloneRange();
+		preCaretRange.selectNodeContents(elementRef.value);
+		preCaretRange.setEnd(range.endContainer, range.endOffset);
+		return preCaretRange.toString().length;
+	};
+	/**
+	* Устанавливает курсор на позицию в символах.
+	* @param offset - Позиция (0 = начало, length = конец)
+	* @param useNextTick - Асинхронно после Vue-обновления (для watch/input)
+	*/
+	const setCursorOffset = async (offset, useNextTick = false) => {
+		if (useNextTick) await nextTick();
+		if (!elementRef.value) return;
+		const root = elementRef.value;
+		const activeElement = document.activeElement;
+		if (!isEditableActive(activeElement, root)) return;
+		const selection = window.getSelection();
+		if (!selection) return;
+		const totalTextContent = root.textContent || "";
+		const safeOffset = Math.max(0, Math.min(offset, totalTextContent.length));
+		let charCount = 0;
+		const nodeStack = [root];
+		let foundNode = null;
+		let localOffset = 0;
+		while (nodeStack.length > 0) {
+			const node = nodeStack.pop();
+			if (node.nodeType === Node.TEXT_NODE) {
+				const textLength = node.textContent?.length || 0;
+				if (charCount + textLength >= safeOffset) {
+					foundNode = node;
+					localOffset = safeOffset - charCount;
+					break;
+				}
+				charCount += textLength;
+			} else {
+				const children = node.childNodes;
+				for (let i = children.length - 1; i >= 0; i--) {
+					const childNode = children[i];
+					if (childNode) nodeStack.push(childNode);
+				}
+			}
+		}
+		const range = document.createRange();
+		if (foundNode) try {
+			range.setStart(foundNode, localOffset);
+			range.collapse(true);
+		} catch (e) {
+			console.warn("Cursor positioning failed:", e);
+			range.selectNodeContents(root);
+			range.collapse(false);
+		}
+		else {
+			range.selectNodeContents(root);
+			range.collapse(false);
+		}
+		selection.removeAllRanges();
+		selection.addRange(range);
+	};
+	const setCursorToEnd = () => setCursorOffset(Infinity);
+	const setCursorToStart = () => setCursorOffset(0);
+	const isCollapsedRangeAtEnd = (element, range) => {
+		const endRange = document.createRange();
+		endRange.selectNodeContents(element);
+		endRange.collapse(false);
+		return range.compareBoundaryPoints(Range.END_TO_END, endRange) === 0;
+	};
+	const scrollToHorizontalEnd = (element) => {
+		element.scrollLeft = element.scrollWidth - element.clientWidth;
+	};
+	/**
+	* Горизонтально прокручивает contenteditable к свёрнутой каретке.
+	* При несвёрнутом выделении скролл не меняется (например Ctrl+A).
+	*/
+	const scrollCaretIntoView = () => {
+		const element = elementRef.value;
+		if (!element) return;
+		const selection = window.getSelection();
+		if (!selection?.rangeCount || !selection.isCollapsed) return;
+		if (!selection.anchorNode || !element.contains(selection.anchorNode)) return;
+		const range = selection.getRangeAt(0);
+		const caretClientRects = range.getClientRects();
+		const caretRect = caretClientRects.length > 0 ? caretClientRects[caretClientRects.length - 1] : range.getBoundingClientRect();
+		if ((!caretRect || caretRect.width === 0 && caretRect.height === 0 && caretRect.left === 0 && caretRect.right === 0) && isCollapsedRangeAtEnd(element, range)) {
+			scrollToHorizontalEnd(element);
+			return;
+		}
+		if (!caretRect) return;
+		const elementRect = element.getBoundingClientRect();
+		if (caretRect.right > elementRect.right) element.scrollLeft += caretRect.right - elementRect.right;
+		else if (caretRect.left < elementRect.left) element.scrollLeft -= elementRect.left - caretRect.left;
+	};
+	return {
+		getCursorOffset,
+		setCursorOffset,
+		setCursorToEnd,
+		setCursorToStart,
+		scrollCaretIntoView
+	};
+};
+//#endregion
+export { useCursorManagement };

package/dist/components/SInlineInput/utils/useInlineInput.cjs

@@ -0,0 +1,309 @@
+const require_inlineInputTextPatterns = require("./inlineInputTextPatterns.cjs");
+const require_useStringHistory = require("./useStringHistory.cjs");
+const require_useCursorManagement = require("./useCursorManagement.cjs");
+let vue = require("vue");
+let _vueuse_core = require("@vueuse/core");
+//#region src/components/SInlineInput/utils/useInlineInput.ts
+/**
+* Composable для управления contenteditable элементом с поддержкой v-model.
+*
+* Решает проблемы:
+* 1. Исчезновение высоты элемента при пустом тексте (через ZWS).
+* 2. Синхронизация позиции каретки при внешних обновлениях.
+* 3. Очистка "мусорных" тегов (br, div), которые добавляют браузеры.
+*/
+var useInlineInput = (modelValue, options = {}) => {
+	const multiline = (0, vue.computed)(() => (0, vue.toValue)(options).multiline ?? false);
+	const maxLength = (0, vue.computed)(() => {
+		const limit = (0, vue.toValue)(options).maxLength;
+		if (typeof limit !== "number" || !Number.isFinite(limit) || limit <= 0) return;
+		return limit;
+	});
+	const editableRef = (0, vue.ref)(null);
+	const isPlaceholderVisible = (0, vue.ref)(true);
+	/**
+	* Флаг, указывающий, что изменение произошло внутри компонента (ввод пользователя).
+	* Нужен для предотвращения лишних обновлений DOM из watcher-а.
+	*/
+	const isLocalUpdate = (0, vue.ref)(false);
+	const isHistoryNavigation = (0, vue.ref)(false);
+	const { setCursorToEnd, getCursorOffset, setCursorOffset, scrollCaretIntoView } = require_useCursorManagement.useCursorManagement(editableRef);
+	const { undo, redo, commit, commitDebounced } = require_useStringHistory.useStringHistory(modelValue, { autoCommit: false });
+	let selectAllScrollLeft = null;
+	let isOutsidePointerDown = false;
+	const isPointerInsideRoot = (target) => {
+		const element = editableRef.value;
+		if (!element) return false;
+		const root = element.closest(".s-ui-inline-input");
+		return root instanceof Element && target instanceof Node && root.contains(target);
+	};
+	const rejectFocusAfterOutsidePointer = () => {
+		if (!isOutsidePointerDown) return false;
+		isOutsidePointerDown = false;
+		editableRef.value?.blur();
+		return true;
+	};
+	(0, _vueuse_core.useEventListener)(document, "mousedown", (event) => {
+		const element = editableRef.value;
+		if (!element) return;
+		isOutsidePointerDown = !isPointerInsideRoot(event.target);
+		if (isOutsidePointerDown && document.activeElement === element) element.blur();
+	}, { capture: true });
+	const scrollCaretIfSingleLine = () => {
+		if (multiline.value) return;
+		scrollCaretIntoView();
+	};
+	(0, _vueuse_core.useEventListener)(document, "selectionchange", () => {
+		if (multiline.value || !editableRef.value) return;
+		if (document.activeElement !== editableRef.value) return;
+		if (selectAllScrollLeft !== null) {
+			editableRef.value.scrollLeft = selectAllScrollLeft;
+			selectAllScrollLeft = null;
+			return;
+		}
+		scrollCaretIntoView();
+	});
+	/**
+	* Очищает сырой текст из DOM для сохранения в модель.
+	* Удаляет ZWS и нормализует переносы строк.
+	*/
+	const cleanValue = (value) => {
+		let cleaned = value.replace(require_inlineInputTextPatterns.ZERO_WIDTH_SPACE_GLOBAL_PATTERN, "");
+		if (!multiline.value) cleaned = cleaned.replace(require_inlineInputTextPatterns.LINE_BREAK_SEQUENCE_PATTERN, " ");
+		return cleaned;
+	};
+	/**
+	* Проверяет, является ли значение пустым (с учётом zero-space)
+	*/
+	const isEmpty = (value) => {
+		return cleanValue(value).length === 0;
+	};
+	/** Обрезает строку до maxlength (после cleanValue). */
+	const clampToMaxLength = (value) => {
+		if (maxLength.value === void 0 || value.length <= maxLength.value) return value;
+		return value.slice(0, maxLength.value);
+	};
+	/** Длина выделенного внутри поля текста после cleanValue (для замены при вставке). */
+	const getSelectedCleanedLength = () => {
+		const element = editableRef.value;
+		const selection = window.getSelection();
+		if (!element || !selection?.rangeCount || !selection.anchorNode) return 0;
+		if (!element.contains(selection.anchorNode)) return 0;
+		return cleanValue(selection.toString()).length;
+	};
+	/** Сколько символов ещё можно вставить с учётом лимита и текущего выделения. */
+	const getAvailableLengthForInsert = () => {
+		if (maxLength.value === void 0 || !editableRef.value) return Number.POSITIVE_INFINITY;
+		const currentLength = cleanValue(editableRef.value.textContent || "").length;
+		const selectedLength = getSelectedCleanedLength();
+		return Math.max(0, maxLength.value - currentLength + selectedLength);
+	};
+	/** true, если печатный символ превысит maxlength без замены выделения. */
+	const wouldExceedMaxLengthOnKeydown = (event) => {
+		if (maxLength.value === void 0) return false;
+		if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return false;
+		return getAvailableLengthForInsert() <= 0;
+	};
+	/** Синхронизирует DOM с v-model: ZWS, cleanValue, maxlength, placeholder, позиция каретки. */
+	const syncModel = () => {
+		if (!editableRef.value) return {
+			changed: false,
+			content: "",
+			cursor: 0
+		};
+		if ((editableRef.value.textContent || "") === "") {
+			editableRef.value.textContent = "​";
+			setCursorToEnd();
+		}
+		const currentText = editableRef.value.textContent || "";
+		const cleanedText = cleanValue(currentText);
+		const clampedText = clampToMaxLength(cleanedText);
+		const wasTruncated = cleanedText !== clampedText;
+		if (wasTruncated) editableRef.value.textContent = clampedText.length > 0 ? clampedText : "​";
+		isPlaceholderVisible.value = clampedText.length === 0;
+		const hasChanged = modelValue.value !== clampedText;
+		if (hasChanged) modelValue.value = clampedText;
+		let currentCursor = getCursorOffset();
+		if (currentText.startsWith("​") && currentCursor > 0) currentCursor -= 1;
+		if (wasTruncated) {
+			currentCursor = Math.min(currentCursor, clampedText.length);
+			setCursorOffset(currentCursor);
+		}
+		return {
+			changed: hasChanged || wasTruncated,
+			content: clampedText,
+			cursor: currentCursor
+		};
+	};
+	/**
+	* Основной обработчик ввода.
+	* Гарантирует наличие ZWS, если поле опустело.
+	*/
+	const handleInput = () => {
+		isLocalUpdate.value = true;
+		const { changed, content, cursor } = syncModel();
+		if (changed) commitDebounced(content, cursor, { type: "input" });
+		(0, vue.nextTick)(() => {
+			scrollCaretIfSingleLine();
+			isLocalUpdate.value = false;
+		});
+	};
+	/**
+	* При фокусе гарантируем, что ZWS на месте и каретка стоит правильно.
+	*/
+	const handleFocus = () => {
+		if (rejectFocusAfterOutsidePointer()) return;
+		if (!editableRef.value) return;
+		if (!cleanValue(editableRef.value.textContent || "")) {
+			if (editableRef.value.textContent !== "​") editableRef.value.textContent = "​";
+			setCursorToEnd();
+		}
+	};
+	/**
+	* При потере фокуса просто обновляем видимость плейсхолдера.
+	*/
+	const handleBlur = () => {
+		if (!editableRef.value) return;
+		isPlaceholderVisible.value = isEmpty(editableRef.value.textContent || "");
+	};
+	/**
+	* Обработка вставки из буфера обмена (Paste).
+	* Очищает форматирование и соблюдает лимиты.
+	*/
+	const handlePaste = async (event) => {
+		event.preventDefault();
+		let pastedText = event.clipboardData?.getData("text/plain") || "";
+		const availableLength = getAvailableLengthForInsert();
+		if (availableLength <= 0) return;
+		if (pastedText.length > availableLength) pastedText = pastedText.slice(0, availableLength);
+		if (!multiline.value) pastedText = pastedText.replace(require_inlineInputTextPatterns.LINE_BREAK_SEQUENCE_PATTERN, " ");
+		const cleanedText = pastedText.trim().replace(require_inlineInputTextPatterns.CONSECUTIVE_WHITESPACE_PATTERN, " ");
+		if (!cleanedText) return;
+		const selection = window.getSelection();
+		if (!selection || !selection.rangeCount) return;
+		isLocalUpdate.value = true;
+		const range = selection.getRangeAt(0);
+		range.deleteContents();
+		const textNode = document.createTextNode(cleanedText);
+		range.insertNode(textNode);
+		range.setStartAfter(textNode);
+		range.setEndAfter(textNode);
+		selection.removeAllRanges();
+		selection.addRange(range);
+		const { changed, content, cursor } = syncModel();
+		if (changed) commit(content, cursor, { type: "paste" });
+		if (!multiline.value) await setCursorOffset(cursor);
+		await (0, vue.nextTick)();
+		scrollCaretIfSingleLine();
+		isLocalUpdate.value = false;
+	};
+	/**
+	* Обработка клавиш: блок maxlength, Enter в однострочном режиме, Undo/Redo.
+	*/
+	const handleKeydown = (event) => {
+		const isCtrlPressed = event.ctrlKey || event.metaKey;
+		const isShiftPressed = event.shiftKey;
+		if (wouldExceedMaxLengthOnKeydown(event)) {
+			event.preventDefault();
+			return;
+		}
+		if (!multiline.value && (event.key === "Enter" || event.key === "NumpadEnter")) {
+			event.preventDefault();
+			return;
+		}
+		if (!multiline.value && isCtrlPressed && event.code === "KeyA" && editableRef.value) {
+			selectAllScrollLeft = editableRef.value.scrollLeft;
+			return;
+		}
+		if (isCtrlPressed && event.code === "KeyZ") {
+			event.preventDefault();
+			isHistoryNavigation.value = true;
+			const result = isShiftPressed ? redo() : undo();
+			if (result) (0, vue.nextTick)(() => {
+				setCursorOffset(result.cursorPosition ?? result.content.length);
+				(0, vue.nextTick)(scrollCaretIfSingleLine);
+				isHistoryNavigation.value = false;
+			});
+			else isHistoryNavigation.value = false;
+		}
+	};
+	/** Фокусирует contenteditable при клике по обёртке. */
+	const handleWrapperClick = () => {
+		if (editableRef.value && document.activeElement !== editableRef.value) editableRef.value.focus();
+	};
+	/** Убирает переносы из DOM и модели при переходе в однострочный режим. */
+	const flattenToSingleLine = () => {
+		if (!editableRef.value || multiline.value) return;
+		isLocalUpdate.value = true;
+		const cleaned = clampToMaxLength(cleanValue(editableRef.value.innerText || editableRef.value.textContent || ""));
+		modelValue.value = cleaned;
+		editableRef.value.textContent = cleaned.length > 0 ? cleaned : "​";
+		isPlaceholderVisible.value = cleaned.length === 0;
+		(0, vue.nextTick)(() => {
+			isLocalUpdate.value = false;
+		});
+	};
+	/** При выключении multiline схлопывает уже введённые переносы строк. */
+	(0, vue.watch)(multiline, (isMultiline, wasMultiline) => {
+		if (isMultiline || !wasMultiline) return;
+		flattenToSingleLine();
+	});
+	/** Обрезает текст при уменьшении maxlength. */
+	const enforceMaxLength = () => {
+		if (!editableRef.value || modelValue.value === void 0) return;
+		isLocalUpdate.value = true;
+		syncModel();
+		(0, vue.nextTick)(() => {
+			isLocalUpdate.value = false;
+		});
+	};
+	/** При уменьшении maxlength обрезает уже введённый текст. */
+	(0, vue.watch)(maxLength, (limit, previousLimit) => {
+		if (limit === void 0 || previousLimit !== void 0 && limit >= previousLimit) return;
+		enforceMaxLength();
+	});
+	const applyModelValueToDom = async (newValue) => {
+		if (isLocalUpdate.value) return;
+		if (!editableRef.value) return;
+		const clampedValue = clampToMaxLength(newValue);
+		const currentContent = editableRef.value.textContent || "";
+		if (cleanValue(currentContent) !== clampedValue || clampedValue === "" && currentContent !== "​") {
+			editableRef.value.textContent = clampedValue === "" ? "​" : clampedValue;
+			isPlaceholderVisible.value = clampedValue === "";
+			if (clampedValue !== newValue) {
+				isLocalUpdate.value = true;
+				modelValue.value = clampedValue;
+				(0, vue.nextTick)(() => {
+					isLocalUpdate.value = false;
+				});
+			}
+			if (document.activeElement === editableRef.value && !isHistoryNavigation.value) {
+				await (0, vue.nextTick)();
+				setCursorToEnd();
+			}
+		}
+	};
+	(0, vue.onMounted)(async () => {
+		await (0, vue.nextTick)();
+		applyModelValueToDom(modelValue.value);
+	});
+	(0, vue.watch)(editableRef, (element) => {
+		if (!element) return;
+		applyModelValueToDom(modelValue.value);
+	});
+	(0, vue.watch)(modelValue, (newValue) => {
+		applyModelValueToDom(newValue);
+	});
+	return {
+		editableRef,
+		isPlaceholderVisible,
+		handleInput,
+		handleFocus,
+		handleBlur,
+		handlePaste,
+		handleKeydown,
+		handleWrapperClick
+	};
+};
+//#endregion
+exports.useInlineInput = useInlineInput;