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

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

@@ -25,10 +25,12 @@ 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 TAG_ATTR = "data-xadk-inline-tag-id";
+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) => {
@@ -44,30 +46,48 @@ var toRawOffset = (text, plainOffset) => {
 var InlineTagInput = (0, import_react.forwardRef)(
   ({
     value,
-    tags,
+    mentions,
+    defaultInputParts,
     placeholder,
     disabled,
     onChange,
-    onTagsChange,
+    onMentionsChange,
     onKeyDown,
     onKeyUp,
-    renderTag
+    renderMention
   }, ref) => {
     const styles = (0, import_styles.useStyles)();
     const editorRef = (0, import_react.useRef)(null);
-    const latestTagsRef = (0, import_react.useRef)(tags);
+    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)(() => {
-      latestTagsRef.current = tags;
-    }, [tags]);
-    const getOrderedTags = (0, import_react.useCallback)(() => {
+      latestMentionsRef.current = mentions;
+    }, [mentions]);
+    const getOrderedMentions = (0, import_react.useCallback)(() => {
       const editor = editorRef.current;
       if (!editor)
         return [];
-      const tagMap = new Map(latestTagsRef.current.map((tag) => [tag.id, tag]));
-      return Array.from(editor.querySelectorAll(`[${TAG_ATTR}]`)).map((node) => tagMap.get(node.dataset.xadkInlineTagId || "")).filter(Boolean);
+      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;
@@ -81,17 +101,51 @@ var InlineTagInput = (0, import_react.forwardRef)(
       });
       return normalizeText(text);
     }, []);
-    const emitChange = (0, import_react.useCallback)(() => {
-      onChange(getPlainText());
-      onTagsChange(getOrderedTags());
-    }, [getOrderedTags, getPlainText, onChange, onTagsChange]);
-    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 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 removeTagNode = (0, import_react.useCallback)(
+    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;
@@ -110,56 +164,87 @@ var InlineTagInput = (0, import_react.forwardRef)(
           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(
+              previous,
+              text.length - spaceLength,
+              text.length
+            );
           }
         }
       },
       [removeTextRange]
     );
-    const removeTagById = (0, import_react.useCallback)(
+    const removeMentionById = (0, import_react.useCallback)(
       (id) => {
         const editor = editorRef.current;
-        const node = Array.from((editor == null ? void 0 : editor.querySelectorAll(`[${TAG_ATTR}]`)) || []).find(
-          (item) => item.dataset.xadkInlineTagId === id
+        const node = Array.from(
+          (editor == null ? void 0 : editor.querySelectorAll(`[${MENTION_ATTR}]`)) || []
+        ).find(
+          (item) => item.dataset.xadkInlineMentionId === id
         );
         if (node) {
-          removeTagNode(node);
+          removeMentionNode(node);
         }
         emitChange();
         editor == null ? void 0 : editor.focus();
       },
-      [emitChange, removeTagNode]
+      [emitChange, removeMentionNode]
     );
-    const buildTagNode = (0, import_react.useCallback)(
-      (tag) => {
+    const buildMentionNode = (0, import_react.useCallback)(
+      (mention) => {
         const span = document.createElement("span");
         span.setAttribute("contenteditable", "false");
-        span.setAttribute(TAG_ATTR, tag.id);
-        span.dataset.xadkInlineTagId = tag.id;
+        span.setAttribute(MENTION_ATTR, mention.id);
+        span.dataset.xadkInlineMentionId = mention.id;
+        span.dataset.xadkInlineMentionType = mention.type;
         span.className = styles.inlineTag;
-        if (renderTag) {
+        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: renderTag(tag, { onRemove: () => removeTagById(tag.id) }) })
+            /* @__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 = 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();
-            removeTagById(tag.id);
+            removeMentionById(mention.id);
           };
           span.append(label, close);
         }
         return span;
       },
-      [removeTagById, renderTag, styles.inlineTag]
+      [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;
@@ -169,6 +254,18 @@ var InlineTagInput = (0, import_react.forwardRef)(
       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) => {
@@ -180,46 +277,77 @@ var InlineTagInput = (0, import_react.forwardRef)(
       },
       [setCursorAtTextEnd]
     );
-    const isTagNode = (node) => node instanceof HTMLElement && node.hasAttribute(TAG_ATTR);
+    const isMentionNode = (node) => node instanceof HTMLElement && node.hasAttribute(MENTION_ATTR);
     const isOnlyCaretText = (text) => normalizeText(text) === "";
-    const getTagBeforeRange = (range) => {
+    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) && isTagNode(container.previousSibling)) {
+        if (isOnlyCaretText(beforeCursor) && isMentionNode(container.previousSibling)) {
           return container.previousSibling;
         }
       }
       if (container instanceof HTMLElement) {
         const previous = container.childNodes[range.startOffset - 1];
-        if (isTagNode(previous))
+        if (isMentionNode(previous))
           return previous;
-        if ((previous == null ? void 0 : previous.nodeType) === Node.TEXT_NODE && isOnlyCaretText(previous.textContent || "") && isTagNode(previous.previousSibling)) {
+        if ((previous == null ? void 0 : previous.nodeType) === Node.TEXT_NODE && isOnlyCaretText(previous.textContent || "") && isMentionNode(previous.previousSibling)) {
           return previous.previousSibling;
         }
       }
       return null;
     };
-    const getTagAfterRange = (range) => {
+    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) && isTagNode(container.nextSibling)) {
+        if (isOnlyCaretText(afterCursor) && isMentionNode(container.nextSibling)) {
           return container.nextSibling;
         }
       }
       if (container instanceof HTMLElement) {
         const next = container.childNodes[range.startOffset];
-        if (isTagNode(next))
+        if (isMentionNode(next))
           return next;
-        if ((next == null ? void 0 : next.nodeType) === Node.TEXT_NODE && isOnlyCaretText(next.textContent || "") && isTagNode(next.nextSibling)) {
+        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();
@@ -240,7 +368,7 @@ var InlineTagInput = (0, import_react.forwardRef)(
           found = true;
           return;
         }
-        if (node instanceof HTMLElement && node.hasAttribute(TAG_ATTR))
+        if (node instanceof HTMLElement && node.hasAttribute(MENTION_ATTR))
           return;
         if (node.nodeType === Node.TEXT_NODE) {
           offset += getPlainLength(node.textContent || "");
@@ -315,31 +443,92 @@ var InlineTagInput = (0, import_react.forwardRef)(
         }
       });
     }, []);
-    const insertTag = (0, import_react.useCallback)(
-      (tag, replace) => {
+    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();
-        latestTagsRef.current = [
-          ...latestTagsRef.current.filter((item) => item.id !== tag.id),
-          tag
+        latestMentionsRef.current = [
+          ...latestMentionsRef.current.filter((item) => item.id !== mention.id),
+          mention
         ];
         let insertRange = null;
         if (replace) {
           insertRange = replaceTextRange(replace.start, replace.end);
           cleanupCaretTextNodes();
         }
-        const tagNode = buildTagNode(tag);
+        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 selection = window.getSelection();
-        const range = insertRange || ((selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0) : null);
+        const range = insertRange || rangeBeforeFocus;
         if (range && editor.contains(range.startContainer)) {
           const fragment = document.createDocumentFragment();
-          fragment.append(tagNode, caretNode);
+          fragment.append(mentionNode, caretNode);
           range.insertNode(fragment);
         } else {
-          editor.append(tagNode, caretNode);
+          editor.append(mentionNode, caretNode);
         }
         cleanupCaretTextNodes();
         lastInsertedCaretRef.current = caretNode;
@@ -352,78 +541,175 @@ var InlineTagInput = (0, import_react.forwardRef)(
         });
       },
       [
-        buildTagNode,
+        buildMentionNode,
         cleanupCaretTextNodes,
         emitChange,
+        getPlainText,
         replaceTextRange,
         restoreCursorAfterInsert,
         setCursorAtTextEnd
       ]
     );
-    (0, import_react.useImperativeHandle)(ref, () => ({
-      focus: () => {
-        var _a;
-        return (_a = editorRef.current) == null ? void 0 : _a.focus();
-      },
-      getText: getPlainText,
-      getCursorOffset: getOffsetInEditor,
-      insertTag
-    }), [getOffsetInEditor, getPlainText, insertTag]);
-    (0, import_react.useEffect)(() => {
-      const editor = editorRef.current;
-      if (!editor || editor.childNodes.length > 0)
-        return;
-      if (value)
-        editor.appendChild(createTextNode(value));
-      tags.forEach((tag) => editor.append(buildTagNode(tag), createTextNode(CARET_TEXT)));
-    }, []);
     (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;
-      const existingNodes = Array.from(editor.querySelectorAll(`[${TAG_ATTR}]`));
-      const nextTagMap = new Map(tags.map((tag) => [tag.id, tag]));
-      const existingIds = new Set(
-        existingNodes.map((node) => node.dataset.xadkInlineTagId || "")
-      );
-      existingNodes.forEach((node) => {
-        const tagId = node.dataset.xadkInlineTagId || "";
-        if (!nextTagMap.has(tagId)) {
-          removeTagNode(node);
-        }
-      });
-      tags.forEach((tag) => {
-        if (existingIds.has(tag.id))
-          return;
-        editor.append(buildTagNode(tag), createTextNode(CARET_TEXT));
-      });
-    }, [buildTagNode, removeTagNode, tags]);
-    (0, import_react.useEffect)(() => {
+      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 (!value && tags.length === 0 && editor.childNodes.length > 0) {
-        editor.querySelectorAll(`[${TAG_ATTR}]`).forEach((node) => {
+      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 = "";
       }
-    }, [tags.length, value]);
+    }, [mentions.length, value]);
     const handleInput = () => {
-      if (!composingRef.current)
+      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 targetTag = event.key === "Backspace" ? getTagBeforeRange(range) : getTagAfterRange(range);
-            if (targetTag) {
+            const targetMention = event.key === "Backspace" ? getMentionBeforeRange(range) : getMentionAfterRange(range);
+            if (targetMention) {
               event.preventDefault();
-              removeTagById(targetTag.dataset.xadkInlineTagId || "");
+              removeMentionById(
+                targetMention.dataset.xadkInlineMentionId || ""
+              );
               return;
             }
           }
@@ -431,29 +717,41 @@ var InlineTagInput = (0, import_react.forwardRef)(
       }
       onKeyDown == null ? void 0 : onKeyDown(event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.inlineInputWrapper, "data-placeholder": placeholder, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ref: editorRef,
-        className: styles.inlineInput,
-        contentEditable: !disabled,
-        suppressContentEditableWarning: true,
-        role: "textbox",
-        "aria-multiline": "true",
-        onInput: handleInput,
-        onKeyDown: handleKeyDown,
-        onKeyUp,
-        onCompositionStart: () => {
-          composingRef.current = true;
-        },
-        onCompositionEnd: () => {
-          composingRef.current = false;
-          emitChange();
-        },
-        "data-empty": !getPlainText() && getOrderedTags().length === 0,
-        "data-cursor-offset": getOffsetInEditor()
-      }
-    ) });
+    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";