@ai-group/chat-sdk 3.7.0 → 3.7.1-alpha10

package/dist/cjs/components/XAdkSender/InlineTagInput.js

@@ -0,0 +1,759 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/XAdkSender/InlineTagInput.tsx
+var InlineTagInput_exports = {};
+__export(InlineTagInput_exports, {
+  default: () => InlineTagInput_default
+});
+module.exports = __toCommonJS(InlineTagInput_exports);
+var import_react = require("react");
+var import_client = require("react-dom/client");
+var import_styles = require("./styles");
+var import_markdownResource = require("../../utils/markdownResource");
+var import_jsx_runtime = require("react/jsx-runtime");
+var MENTION_ATTR = "data-xadk-inline-mention-id";
+var CARET_TEXT = "​";
+var createTextNode = (text) => document.createTextNode(text);
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? import_react.useEffect : import_react.useLayoutEffect;
+var normalizeText = (text) => text.replace(/\u200B/g, "").replace(/\u00a0/g, " ");
+var getPlainLength = (text) => normalizeText(text).length;
+var toRawOffset = (text, plainOffset) => {
+  let current = 0;
+  for (let i = 0; i < text.length; i++) {
+    if (current >= plainOffset)
+      return i;
+    if (text[i] !== CARET_TEXT)
+      current += 1;
+  }
+  return text.length;
+};
+var InlineTagInput = (0, import_react.forwardRef)(
+  ({
+    value,
+    mentions,
+    defaultInputParts,
+    placeholder,
+    disabled,
+    onChange,
+    onMentionsChange,
+    onKeyDown,
+    onKeyUp,
+    renderMention
+  }, ref) => {
+    const styles = (0, import_styles.useStyles)();
+    const editorRef = (0, import_react.useRef)(null);
+    const latestMentionsRef = (0, import_react.useRef)(mentions);
+    const tagRootMapRef = (0, import_react.useRef)(/* @__PURE__ */ new WeakMap());
+    const composingRef = (0, import_react.useRef)(false);
+    const lastInsertedCaretRef = (0, import_react.useRef)(null);
+    const savedRangeRef = (0, import_react.useRef)(null);
+    const defaultInputPartsAppliedRef = (0, import_react.useRef)(false);
+    const skipEmptyCleanupOnceRef = (0, import_react.useRef)(false);
+    const structuralCleanupFrameRef = (0, import_react.useRef)(null);
+    const [hasContent, setHasContent] = (0, import_react.useState)(
+      () => Boolean(value || mentions.length)
+    );
+    const lastEmittedStateRef = (0, import_react.useRef)({
+      value,
+      mentionIds: mentions.map((mention) => mention.id).join("|")
+    });
+    (0, import_react.useEffect)(() => {
+      latestMentionsRef.current = mentions;
+    }, [mentions]);
+    const getOrderedMentions = (0, import_react.useCallback)(() => {
+      const editor = editorRef.current;
+      if (!editor)
+        return [];
+      const mentionMap = new Map(
+        latestMentionsRef.current.map((mention) => [mention.id, mention])
+      );
+      return Array.from(editor.querySelectorAll(`[${MENTION_ATTR}]`)).map(
+        (node) => mentionMap.get(
+          node.dataset.xadkInlineMentionId || ""
+        )
+      ).filter(Boolean);
+    }, []);
+    const getPlainText = (0, import_react.useCallback)(() => {
+      const editor = editorRef.current;
+      if (!editor)
+        return "";
+      let text = "";
+      editor.childNodes.forEach((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          text += node.textContent || "";
+        }
+      });
+      return normalizeText(text);
+    }, []);
+    const getParts = (0, import_react.useCallback)(() => {
+      const editor = editorRef.current;
+      if (!editor)
+        return [];
+      const mentionMap = new Map(
+        latestMentionsRef.current.map((mention) => [mention.id, mention])
+      );
+      const parts = [];
+      editor.childNodes.forEach((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          const text = normalizeText(node.textContent || "");
+          if (text)
+            parts.push({ type: "text", text });
+          return;
+        }
+        if (node instanceof HTMLElement && node.hasAttribute(MENTION_ATTR)) {
+          const mentionId = node.dataset.xadkInlineMentionId || "";
+          const mention = mentionMap.get(mentionId);
+          if (mention)
+            parts.push({ type: "mention", mention });
+        }
+      });
+      return parts;
+    }, []);
+    const emitChange = (0, import_react.useCallback)(() => {
+      const nextValue = getPlainText();
+      const nextMentions = getOrderedMentions();
+      setHasContent(Boolean(nextValue || nextMentions.length));
+      lastEmittedStateRef.current = {
+        value: nextValue,
+        mentionIds: nextMentions.map((mention) => mention.id).join("|")
+      };
+      onChange(nextValue);
+      onMentionsChange(nextMentions);
+    }, [getOrderedMentions, getPlainText, onChange, onMentionsChange]);
+    const removeTextRange = (0, import_react.useCallback)(
+      (node, start, end) => {
+        const text = node.textContent || "";
+        node.textContent = `${text.slice(0, start)}${text.slice(end)}`;
+        if (!node.textContent)
+          node.remove();
+      },
+      []
+    );
+    const removeMentionNode = (0, import_react.useCallback)(
+      (node) => {
+        var _a, _b, _c;
+        const previous = node.previousSibling;
+        const next = node.nextSibling;
+        (_a = tagRootMapRef.current.get(node)) == null ? void 0 : _a.unmount();
+        node.remove();
+        if ((next == null ? void 0 : next.nodeType) === Node.TEXT_NODE) {
+          const text = next.textContent || "";
+          const caretLength = ((_b = text.match(/^\u200B+/)) == null ? void 0 : _b[0].length) || 0;
+          if (caretLength > 0) {
+            removeTextRange(next, 0, caretLength);
+            return;
+          }
+        }
+        if ((previous == null ? void 0 : previous.nodeType) === Node.TEXT_NODE) {
+          const text = previous.textContent || "";
+          const spaceLength = ((_c = text.match(/\s+$/)) == null ? void 0 : _c[0].length) || 0;
+          if (spaceLength > 0) {
+            removeTextRange(
+              previous,
+              text.length - spaceLength,
+              text.length
+            );
+          }
+        }
+      },
+      [removeTextRange]
+    );
+    const removeMentionById = (0, import_react.useCallback)(
+      (id) => {
+        const editor = editorRef.current;
+        const node = Array.from(
+          (editor == null ? void 0 : editor.querySelectorAll(`[${MENTION_ATTR}]`)) || []
+        ).find(
+          (item) => item.dataset.xadkInlineMentionId === id
+        );
+        if (node) {
+          removeMentionNode(node);
+        }
+        emitChange();
+        editor == null ? void 0 : editor.focus();
+      },
+      [emitChange, removeMentionNode]
+    );
+    const buildMentionNode = (0, import_react.useCallback)(
+      (mention) => {
+        const span = document.createElement("span");
+        span.setAttribute("contenteditable", "false");
+        span.setAttribute(MENTION_ATTR, mention.id);
+        span.dataset.xadkInlineMentionId = mention.id;
+        span.dataset.xadkInlineMentionType = mention.type;
+        span.className = styles.inlineTag;
+        if (renderMention) {
+          const root = (0, import_client.createRoot)(span);
+          tagRootMapRef.current.set(span, root);
+          root.render(
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderMention(mention, {
+              onRemove: () => removeMentionById(mention.id)
+            }) })
+          );
+        } else {
+          const label = document.createElement("span");
+          label.className = "xadk-inline-tag-label";
+          label.textContent = mention.displayName || mention.label;
+          const close = document.createElement("span");
+          close.className = "xadk-inline-tag-close";
+          close.innerHTML = "×";
+          close.onclick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            removeMentionById(mention.id);
+          };
+          span.append(label, close);
+        }
+        return span;
+      },
+      [removeMentionById, renderMention, styles.inlineTag]
+    );
+    const renderPartsToEditor = (0, import_react.useCallback)(
+      (parts) => {
+        const editor = editorRef.current;
+        if (!editor)
+          return;
+        editor.querySelectorAll(`[${MENTION_ATTR}]`).forEach((node) => {
+          var _a;
+          (_a = tagRootMapRef.current.get(node)) == null ? void 0 : _a.unmount();
+        });
+        editor.innerHTML = "";
+        parts.forEach((part) => {
+          if (part.type === "text") {
+            if (part.text)
+              editor.appendChild(createTextNode(part.text));
+            return;
+          }
+          const mention = part.type === "mention" ? part.mention : part.tag;
+          editor.append(buildMentionNode(mention), createTextNode(CARET_TEXT));
+        });
+      },
+      [buildMentionNode]
+    );
+    const setCursorAtTextEnd = (0, import_react.useCallback)((node) => {
+      var _a;
+      const range = document.createRange();
+      const selection = window.getSelection();
+      range.setStart(node, ((_a = node.textContent) == null ? void 0 : _a.length) || 0);
+      range.collapse(true);
+      selection == null ? void 0 : selection.removeAllRanges();
+      selection == null ? void 0 : selection.addRange(range);
+      savedRangeRef.current = range.cloneRange();
+    }, []);
+    const saveSelectionRange = (0, import_react.useCallback)(() => {
+      const editor = editorRef.current;
+      const selection = window.getSelection();
+      if (!editor || !selection || selection.rangeCount === 0)
+        return;
+      const range = selection.getRangeAt(0);
+      if (!editor.contains(range.startContainer) || !editor.contains(range.endContainer)) {
+        return;
+      }
+      savedRangeRef.current = range.cloneRange();
+    }, []);
+    const restoreCursorAfterInsert = (0, import_react.useCallback)(
+      (node) => {
+        const editor = editorRef.current;
+        if (!editor || !editor.contains(node))
+          return;
+        editor.focus();
+        setCursorAtTextEnd(node);
+      },
+      [setCursorAtTextEnd]
+    );
+    const isMentionNode = (node) => node instanceof HTMLElement && node.hasAttribute(MENTION_ATTR);
+    const isOnlyCaretText = (text) => normalizeText(text) === "";
+    const getMentionBeforeRange = (range) => {
+      const container = range.startContainer;
+      if (container.nodeType === Node.TEXT_NODE) {
+        const text = container.textContent || "";
+        const beforeCursor = text.slice(0, range.startOffset);
+        if (isOnlyCaretText(beforeCursor) && isMentionNode(container.previousSibling)) {
+          return container.previousSibling;
+        }
+      }
+      if (container instanceof HTMLElement) {
+        const previous = container.childNodes[range.startOffset - 1];
+        if (isMentionNode(previous))
+          return previous;
+        if ((previous == null ? void 0 : previous.nodeType) === Node.TEXT_NODE && isOnlyCaretText(previous.textContent || "") && isMentionNode(previous.previousSibling)) {
+          return previous.previousSibling;
+        }
+      }
+      return null;
+    };
+    const getMentionAfterRange = (range) => {
+      const container = range.startContainer;
+      if (container.nodeType === Node.TEXT_NODE) {
+        const text = container.textContent || "";
+        const afterCursor = text.slice(range.startOffset);
+        if (isOnlyCaretText(afterCursor) && isMentionNode(container.nextSibling)) {
+          return container.nextSibling;
+        }
+      }
+      if (container instanceof HTMLElement) {
+        const next = container.childNodes[range.startOffset];
+        if (isMentionNode(next))
+          return next;
+        if ((next == null ? void 0 : next.nodeType) === Node.TEXT_NODE && isOnlyCaretText(next.textContent || "") && isMentionNode(next.nextSibling)) {
+          return next.nextSibling;
+        }
+      }
+      return null;
+    };
+    const moveCursorAroundMention = (0, import_react.useCallback)(
+      (mention, direction) => {
+        var _a, _b;
+        const editor = editorRef.current;
+        const selection = window.getSelection();
+        if (!editor || !selection || !editor.contains(mention))
+          return;
+        const range = document.createRange();
+        if (direction === "before") {
+          const previous = mention.previousSibling;
+          if ((previous == null ? void 0 : previous.nodeType) === Node.TEXT_NODE) {
+            range.setStart(previous, ((_a = previous.textContent) == null ? void 0 : _a.length) || 0);
+          } else {
+            range.setStartBefore(mention);
+          }
+        } else {
+          const next = mention.nextSibling;
+          if ((next == null ? void 0 : next.nodeType) === Node.TEXT_NODE) {
+            const leadingCaretLength = ((_b = (next.textContent || "").match(/^\u200B+/)) == null ? void 0 : _b[0].length) || 0;
+            range.setStart(next, leadingCaretLength);
+          } else {
+            range.setStartAfter(mention);
+          }
+        }
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        savedRangeRef.current = range.cloneRange();
+      },
+      []
+    );
+    const getOffsetInEditor = (0, import_react.useCallback)(() => {
+      const editor = editorRef.current;
+      const selection = window.getSelection();
+      if (!editor || !selection || selection.rangeCount === 0)
+        return 0;
+      const range = selection.getRangeAt(0);
+      let offset = 0;
+      let found = false;
+      const visit = (node) => {
+        if (found)
+          return;
+        if (node === range.startContainer) {
+          if (node.nodeType === Node.TEXT_NODE) {
+            offset += getPlainLength(
+              (node.textContent || "").slice(0, range.startOffset)
+            );
+          }
+          found = true;
+          return;
+        }
+        if (node instanceof HTMLElement && node.hasAttribute(MENTION_ATTR))
+          return;
+        if (node.nodeType === Node.TEXT_NODE) {
+          offset += getPlainLength(node.textContent || "");
+          return;
+        }
+        node.childNodes.forEach(visit);
+      };
+      editor.childNodes.forEach(visit);
+      return offset;
+    }, []);
+    const getNodeIndex = (node) => {
+      let index = 0;
+      let current = node;
+      while (current.previousSibling) {
+        index += 1;
+        current = current.previousSibling;
+      }
+      return index;
+    };
+    const replaceTextRange = (0, import_react.useCallback)((start, end) => {
+      const editor = editorRef.current;
+      if (!editor)
+        return null;
+      let offset = 0;
+      let insertRange = null;
+      const nodes = Array.from(editor.childNodes);
+      nodes.forEach((node) => {
+        if (node.nodeType !== Node.TEXT_NODE)
+          return;
+        const text = node.textContent || "";
+        const nodeStart = offset;
+        const plainLength = getPlainLength(text);
+        const nodeEnd = offset + plainLength;
+        offset = nodeEnd;
+        if (nodeEnd <= start || nodeStart >= end)
+          return;
+        const rawStart = toRawOffset(text, Math.max(0, start - nodeStart));
+        const rawEnd = toRawOffset(text, Math.max(0, end - nodeStart));
+        const keepLeft = text.slice(0, rawStart);
+        const keepRight = text.slice(rawEnd);
+        const parent = node.parentNode;
+        const nodeIndex = getNodeIndex(node);
+        node.textContent = `${keepLeft}${keepRight}`;
+        if (!insertRange) {
+          insertRange = document.createRange();
+          if (node.textContent) {
+            insertRange.setStart(node, rawStart);
+          } else if (parent) {
+            insertRange.setStart(parent, nodeIndex);
+          }
+          insertRange.collapse(true);
+        }
+        if (!node.textContent)
+          node.remove();
+      });
+      return insertRange;
+    }, []);
+    const cleanupCaretTextNodes = (0, import_react.useCallback)(() => {
+      const editor = editorRef.current;
+      if (!editor)
+        return;
+      Array.from(editor.childNodes).forEach((node) => {
+        if (node.nodeType !== Node.TEXT_NODE)
+          return;
+        const text = node.textContent || "";
+        if (!text) {
+          node.remove();
+          return;
+        }
+        if (text && normalizeText(text) === "") {
+          node.textContent = CARET_TEXT;
+        }
+      });
+    }, []);
+    const cleanupEmptyStructuralNodes = (0, import_react.useCallback)(() => {
+      const editor = editorRef.current;
+      const selection = window.getSelection();
+      if (!editor)
+        return;
+      Array.from(editor.children).forEach((node) => {
+        if (node.hasAttribute(MENTION_ATTR))
+          return;
+        if (node.querySelector(`[${MENTION_ATTR}]`))
+          return;
+        if (normalizeText(node.textContent || ""))
+          return;
+        const range = (selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0) : null;
+        const nodeIndex = getNodeIndex(node);
+        const containsCursor = Boolean(
+          range && range.collapsed && (range.startContainer === node || node.contains(range.startContainer) || range.startContainer === editor && (range.startOffset === nodeIndex || range.startOffset === nodeIndex + 1))
+        );
+        if (containsCursor && selection) {
+          const caretNode = createTextNode(CARET_TEXT);
+          node.replaceWith(caretNode);
+          const nextRange = document.createRange();
+          nextRange.setStart(caretNode, CARET_TEXT.length);
+          nextRange.collapse(true);
+          selection.removeAllRanges();
+          selection.addRange(nextRange);
+          savedRangeRef.current = nextRange.cloneRange();
+          return;
+        }
+        node.remove();
+      });
+    }, []);
+    (0, import_react.useEffect)(() => {
+      const editor = editorRef.current;
+      if (!editor)
+        return;
+      const handleNativeDelete = (event) => {
+        if (!(event instanceof InputEvent))
+          return;
+        if (!event.inputType.startsWith("delete"))
+          return;
+        if (structuralCleanupFrameRef.current !== null) {
+          window.cancelAnimationFrame(structuralCleanupFrameRef.current);
+        }
+        structuralCleanupFrameRef.current = window.requestAnimationFrame(() => {
+          structuralCleanupFrameRef.current = null;
+          cleanupEmptyStructuralNodes();
+          cleanupCaretTextNodes();
+        });
+      };
+      editor.addEventListener("input", handleNativeDelete);
+      return () => editor.removeEventListener("input", handleNativeDelete);
+    }, [cleanupCaretTextNodes, cleanupEmptyStructuralNodes]);
+    const insertMention = (0, import_react.useCallback)(
+      (mention, replace) => {
+        const editor = editorRef.current;
+        if (!editor)
+          return;
+        const selectionBeforeFocus = window.getSelection();
+        const activeRangeBeforeFocus = (selectionBeforeFocus == null ? void 0 : selectionBeforeFocus.rangeCount) && editor.contains(selectionBeforeFocus.getRangeAt(0).startContainer) ? selectionBeforeFocus.getRangeAt(0).cloneRange() : null;
+        const savedRangeBeforeFocus = savedRangeRef.current && editor.contains(savedRangeRef.current.startContainer) ? savedRangeRef.current.cloneRange() : null;
+        const rangeBeforeFocus = activeRangeBeforeFocus || savedRangeBeforeFocus;
+        editor.focus();
+        latestMentionsRef.current = [
+          ...latestMentionsRef.current.filter((item) => item.id !== mention.id),
+          mention
+        ];
+        let insertRange = null;
+        if (replace) {
+          insertRange = replaceTextRange(replace.start, replace.end);
+          cleanupCaretTextNodes();
+        }
+        const isSemanticallyEmpty = !getPlainText() && !editor.querySelector(`[${MENTION_ATTR}]`);
+        if (isSemanticallyEmpty) {
+          editor.innerHTML = "";
+          savedRangeRef.current = null;
+          insertRange = null;
+        }
+        const mentionNode = buildMentionNode(mention);
+        const caretNode = createTextNode(CARET_TEXT);
+        const range = insertRange || rangeBeforeFocus;
+        if (range && editor.contains(range.startContainer)) {
+          const fragment = document.createDocumentFragment();
+          fragment.append(mentionNode, caretNode);
+          range.insertNode(fragment);
+        } else {
+          editor.append(mentionNode, caretNode);
+        }
+        cleanupCaretTextNodes();
+        lastInsertedCaretRef.current = caretNode;
+        setCursorAtTextEnd(caretNode);
+        emitChange();
+        window.requestAnimationFrame(() => {
+          if (lastInsertedCaretRef.current === caretNode) {
+            restoreCursorAfterInsert(caretNode);
+          }
+        });
+      },
+      [
+        buildMentionNode,
+        cleanupCaretTextNodes,
+        emitChange,
+        getPlainText,
+        replaceTextRange,
+        restoreCursorAfterInsert,
+        setCursorAtTextEnd
+      ]
+    );
+    (0, import_react.useEffect)(() => {
+      document.addEventListener("selectionchange", saveSelectionRange);
+      return () => {
+        document.removeEventListener("selectionchange", saveSelectionRange);
+      };
+    }, [saveSelectionRange]);
+    (0, import_react.useEffect)(
+      () => () => {
+        if (structuralCleanupFrameRef.current !== null) {
+          window.cancelAnimationFrame(structuralCleanupFrameRef.current);
+        }
+      },
+      []
+    );
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        focus: () => {
+          var _a;
+          return (_a = editorRef.current) == null ? void 0 : _a.focus();
+        },
+        getText: getPlainText,
+        getParts,
+        getCursorOffset: getOffsetInEditor,
+        insertMention,
+        insertTag: insertMention
+      }),
+      [getOffsetInEditor, getParts, getPlainText, insertMention]
+    );
+    useIsomorphicLayoutEffect(() => {
+      const editor = editorRef.current;
+      if (!editor)
+        return;
+      if (!defaultInputPartsAppliedRef.current && (defaultInputParts == null ? void 0 : defaultInputParts.length) && !value && mentions.length === 0) {
+        defaultInputPartsAppliedRef.current = true;
+        skipEmptyCleanupOnceRef.current = true;
+        renderPartsToEditor(defaultInputParts);
+        emitChange();
+        return;
+      }
+      const incomingMentionIds = mentions.map((mention) => mention.id).join("|");
+      const lastEmittedState = lastEmittedStateRef.current;
+      const isInternalControlledEcho = value === lastEmittedState.value && incomingMentionIds === lastEmittedState.mentionIds;
+      if (isInternalControlledEcho && editor.childNodes.length > 0)
+        return;
+      renderPartsToEditor([
+        ...value ? [{ type: "text", text: value }] : [],
+        ...mentions.map((mention) => ({ type: "mention", mention }))
+      ]);
+      setHasContent(Boolean(value || mentions.length));
+      const lastTextNode = Array.from(editor.childNodes).reverse().find((node) => node.nodeType === Node.TEXT_NODE);
+      if (document.activeElement === editor && lastTextNode) {
+        setCursorAtTextEnd(lastTextNode);
+      }
+    }, [
+      defaultInputParts,
+      emitChange,
+      renderPartsToEditor,
+      setCursorAtTextEnd,
+      mentions,
+      value
+    ]);
+    useIsomorphicLayoutEffect(() => {
+      const editor = editorRef.current;
+      if (!editor)
+        return;
+      if (skipEmptyCleanupOnceRef.current) {
+        skipEmptyCleanupOnceRef.current = false;
+        return;
+      }
+      if (!value && mentions.length === 0 && editor.childNodes.length > 0) {
+        editor.querySelectorAll(`[${MENTION_ATTR}]`).forEach((node) => {
+          var _a;
+          (_a = tagRootMapRef.current.get(node)) == null ? void 0 : _a.unmount();
+        });
+        editor.innerHTML = "";
+      }
+    }, [mentions.length, value]);
+    const handleInput = () => {
+      if (!composingRef.current) {
+        cleanupEmptyStructuralNodes();
+        cleanupCaretTextNodes();
+        emitChange();
+        if (structuralCleanupFrameRef.current !== null) {
+          window.cancelAnimationFrame(structuralCleanupFrameRef.current);
+        }
+        structuralCleanupFrameRef.current = window.requestAnimationFrame(() => {
+          structuralCleanupFrameRef.current = null;
+          cleanupEmptyStructuralNodes();
+          cleanupCaretTextNodes();
+        });
+      }
+    };
+    const handlePaste = (event) => {
+      event.preventDefault();
+      const editor = editorRef.current;
+      if (!editor)
+        return;
+      const text = event.clipboardData.getData("text/plain");
+      if (!text)
+        return;
+      const parts = (0, import_markdownResource.parseMarkdownResourceLinksAsParts)(text);
+      const selection = window.getSelection();
+      const range = (selection == null ? void 0 : selection.rangeCount) && editor.contains(selection.getRangeAt(0).startContainer) ? selection.getRangeAt(0) : null;
+      const fragment = document.createDocumentFragment();
+      let lastTextNode = null;
+      for (const part of parts) {
+        if (part.type === "text") {
+          lastTextNode = createTextNode(part.text);
+          fragment.append(lastTextNode);
+          continue;
+        }
+        latestMentionsRef.current = [
+          ...latestMentionsRef.current,
+          part.mention
+        ];
+        fragment.append(buildMentionNode(part.mention));
+        lastTextNode = createTextNode(CARET_TEXT);
+        fragment.append(lastTextNode);
+      }
+      if (range) {
+        range.deleteContents();
+        range.insertNode(fragment);
+      } else {
+        editor.append(fragment);
+      }
+      cleanupCaretTextNodes();
+      if (lastTextNode)
+        setCursorAtTextEnd(lastTextNode);
+      emitChange();
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        const selection = window.getSelection();
+        if (selection == null ? void 0 : selection.rangeCount) {
+          const range = selection.getRangeAt(0);
+          if (range.collapsed) {
+            const targetMention = event.key === "ArrowLeft" ? getMentionBeforeRange(range) : getMentionAfterRange(range);
+            if (targetMention) {
+              event.preventDefault();
+              moveCursorAroundMention(
+                targetMention,
+                event.key === "ArrowLeft" ? "before" : "after"
+              );
+              return;
+            }
+          }
+        }
+      }
+      if (event.key === "Backspace" || event.key === "Delete") {
+        const selection = window.getSelection();
+        if (selection == null ? void 0 : selection.rangeCount) {
+          const range = selection.getRangeAt(0);
+          if (range.collapsed) {
+            const targetMention = event.key === "Backspace" ? getMentionBeforeRange(range) : getMentionAfterRange(range);
+            if (targetMention) {
+              event.preventDefault();
+              removeMentionById(
+                targetMention.dataset.xadkInlineMentionId || ""
+              );
+              return;
+            }
+          }
+        }
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const showPlaceholder = !hasContent;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.inlineInputWrapper, children: [
+      showPlaceholder && placeholder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.inlinePlaceholder, children: placeholder }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref: editorRef,
+          className: styles.inlineInput,
+          contentEditable: !disabled,
+          suppressContentEditableWarning: true,
+          role: "textbox",
+          "aria-multiline": "true",
+          onInput: handleInput,
+          onPaste: handlePaste,
+          onKeyDown: handleKeyDown,
+          onKeyUp: (event) => {
+            cleanupEmptyStructuralNodes();
+            cleanupCaretTextNodes();
+            saveSelectionRange();
+            onKeyUp == null ? void 0 : onKeyUp(event);
+          },
+          onMouseUp: saveSelectionRange,
+          onFocus: saveSelectionRange,
+          onCompositionStart: () => {
+            composingRef.current = true;
+            setHasContent(true);
+          },
+          onCompositionEnd: () => {
+            composingRef.current = false;
+            emitChange();
+          },
+          "data-cursor-offset": getOffsetInEditor()
+        }
+      )
+    ] });
+  }
+);
+InlineTagInput.displayName = "InlineTagInput";
+var InlineTagInput_default = InlineTagInput;
+//# sourceMappingURL=InlineTagInput.js.map