@edux-design/comments 0.1.4 → 0.3.0

package/dist/index.mjs

@@ -21,7 +21,10 @@ var CommentContext = createContext({
   resolved: false
 });
 var useCommentContext = () => useContext(CommentContext);
-var Comment = forwardRef(function Comment2({
+var flattenReplies = (children) => React.Children.toArray(children).flatMap(
+  (child) => isValidElement(child) && child.type === React.Fragment ? flattenReplies(child.props.children) : [child]
+);
+function CommentComponent({
   author = "Author",
   timestamp,
   avatar,
@@ -39,10 +42,7 @@ var Comment = forwardRef(function Comment2({
 }, ref) {
   const childArray = React.Children.toArray(children);
   const actionsSlot = childArray.find(
-    (child) => {
-      var _a;
-      return isValidElement(child) && (child.type === CommentActions || ((_a = child.type) == null ? void 0 : _a.displayName) === "Comment.Actions");
-    }
+    (child) => isValidElement(child) && (child.type === CommentActions || child.type?.displayName === "Comment.Actions")
   );
   const bodyNodes = childArray.filter((child) => child !== actionsSlot);
   const bodyContent = body ?? bodyNodes;
@@ -50,9 +50,11 @@ var Comment = forwardRef(function Comment2({
   const isResolved = resolved || variant === "resolved";
   const resolvedVariant = VARIANT_STYLES[isResolved ? "resolved" : variant] ?? VARIANT_STYLES.default;
   const resolvedAvatarName = avatarName ?? (typeof author === "string" ? author : void 0);
-  const shouldRenderAvatar = Boolean(avatar || avatarProps || resolvedAvatarName);
+  const shouldRenderAvatar = Boolean(
+    avatar || avatarProps || resolvedAvatarName
+  );
   const replyItems = useMemo(
-    () => React.Children.toArray(replies).filter(
+    () => flattenReplies(replies).filter(
       (reply) => reply !== null && reply !== void 0 && reply !== false
     ),
     [replies]
@@ -64,49 +66,55 @@ var Comment = forwardRef(function Comment2({
     setShowAllReplies(!shouldCollapseReplies);
   }, [shouldCollapseReplies]);
   const visibleReplies = shouldCollapseReplies && !showAllReplies ? [replyItems[replyCount - 1]] : replyItems;
-  return /* @__PURE__ */ jsx(CommentContext.Provider, { value: { editable, onResolve, resolved: isResolved }, children: /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    CommentContext.Provider,
     {
-      ref,
-      className: cx(
-        "flex gap-12 rounded-default border p-12",
-        resolvedVariant,
-        className
-      ),
-      "data-variant": variant,
-      ...props,
-      children: [
-        shouldRenderAvatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar ?? /* @__PURE__ */ jsx(Avatar, { name: resolvedAvatarName, size: "small", ...avatarProps }) }),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-fg-base", children: author }),
-            timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-fg-subtle", children: timestamp })
-          ] }),
-          hasBodyContent && !isResolved ? /* @__PURE__ */ jsx("div", { className: "mt-6 text-sm leading-relaxed text-fg-base", children: bodyContent }) : null,
-          isResolved ? /* @__PURE__ */ jsx("div", { className: "mt-6 text-xs font-semibold uppercase tracking-wide text-fg-success-base", children: "Resolved" }) : null,
-          actionsSlot ? /* @__PURE__ */ jsx("div", { className: "mt-8", children: actionsSlot }) : null,
-          replies && !isResolved ? /* @__PURE__ */ jsxs("div", { className: "mt-10 border-l border-border-minimal pl-12", children: [
-            shouldCollapseReplies && !showAllReplies && /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                className: "mb-8 text-xs font-semibold text-fg-info-base",
-                onClick: () => setShowAllReplies(true),
-                "aria-expanded": showAllReplies,
-                children: [
-                  "Show all ",
-                  replyCount,
-                  " replies"
-                ]
-              }
-            ),
-            visibleReplies
-          ] }) : null
-        ] })
-      ]
+      value: { editable, onResolve, resolved: isResolved },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cx(
+            "flex gap-12 rounded-default border p-12",
+            resolvedVariant,
+            className
+          ),
+          "data-variant": variant,
+          ...props,
+          children: [
+            shouldRenderAvatar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: avatar ?? /* @__PURE__ */ jsx(Avatar, { name: resolvedAvatarName, size: "small", ...avatarProps }) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-fg-base", children: author }),
+                timestamp && /* @__PURE__ */ jsx("span", { className: "text-xs text-fg-subtle", children: timestamp })
+              ] }),
+              hasBodyContent && !isResolved ? /* @__PURE__ */ jsx("div", { className: "mt-6 text-sm leading-relaxed text-fg-base", children: bodyContent }) : null,
+              isResolved ? /* @__PURE__ */ jsx("div", { className: "mt-6 text-xs font-semibold uppercase tracking-wide text-fg-success-base", children: "Resolved" }) : null,
+              actionsSlot ? /* @__PURE__ */ jsx("div", { className: "mt-8", children: actionsSlot }) : null,
+              replies && !isResolved ? /* @__PURE__ */ jsxs("div", { className: "mt-[40px] border-l border-border-minimal pl-[20px]", children: [
+                shouldCollapseReplies && !showAllReplies && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "mb-8 text-xs font-semibold text-fg-info-base",
+                    onClick: () => setShowAllReplies(true),
+                    "aria-expanded": showAllReplies,
+                    children: [
+                      "Show all ",
+                      replyCount,
+                      " replies"
+                    ]
+                  }
+                ),
+                visibleReplies
+              ] }) : null
+            ] })
+          ]
+        }
+      )
     }
-  ) });
-});
+  );
+}
 var CommentActions = ({ children, className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
@@ -166,10 +174,13 @@ var CommentResolve = ({
     }
   );
 };
-Comment.Actions = CommentActions;
-Comment.Reply = CommentReply;
-Comment.Edit = CommentEdit;
-Comment.Resolve = CommentResolve;
+var Comment = Object.assign(forwardRef(CommentComponent), {
+  Actions: CommentActions,
+  Reply: CommentReply,
+  Edit: CommentEdit,
+  Resolve: CommentResolve
+});
+Comment.displayName = "Comment";
 CommentActions.displayName = "Comment.Actions";
 CommentReply.displayName = "Comment.Reply";
 CommentEdit.displayName = "Comment.Edit";
@@ -182,7 +193,9 @@ import React3, {
   useRef,
   createContext as createContext2,
   useContext as useContext2,
-  useEffect as useEffect2
+  useEffect as useEffect2,
+  useImperativeHandle,
+  useState as useState2
 } from "react";
 import { cx as cx2 } from "@edux-design/utils";
 import { Avatar as Avatar2 } from "@edux-design/avatars";
@@ -198,9 +211,8 @@ import { ReactNodeViewRenderer, NodeViewWrapper } from "@tiptap/react";
 import { Mention } from "@edux-design/mentions";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var MentionNodeView = ({ node }) => {
-  var _a, _b;
-  const handle = ((_a = node.attrs) == null ? void 0 : _a.handle) ?? "";
-  const label = ((_b = node.attrs) == null ? void 0 : _b.label) ?? "";
+  const handle = node.attrs?.handle ?? "";
+  const label = node.attrs?.label ?? "";
   return /* @__PURE__ */ jsx2(
     NodeViewWrapper,
     {
@@ -243,6 +255,11 @@ var CommentMentionExtension = Node.create({
       label
     ];
   },
+  renderText({ node }) {
+    const handle = node.attrs.handle || "";
+    const label = node.attrs.label || "";
+    return `@${handle || label || "mention"}`;
+  },
   addNodeView() {
     return ReactNodeViewRenderer(MentionNodeView);
   }
@@ -260,87 +277,237 @@ var useCommentComposer = () => {
   }
   return context;
 };
-var CommentComposer = forwardRef2(function CommentComposer2({
+function readValue(editor) {
+  const mentions = [];
+  editor.state.doc.descendants((node) => {
+    if (node.type.name === "commentMention") {
+      mentions.push({
+        id: node.attrs.id ?? null,
+        handle: node.attrs.handle ?? "",
+        label: node.attrs.label ?? ""
+      });
+    }
+  });
+  const legacyText = editor.getText();
+  const text = editor.getText({
+    blockSeparator: "\n",
+    textSerializers: {
+      commentMention: ({ node }) => {
+        const { handle = "", label = "" } = node.attrs;
+        return label ? `@${handle} \xB7 ${label}` : `@${handle}`;
+      }
+    }
+  }).replace(/\u00a0/g, " ").replace(/[\u200b-\u200d\ufeff]/g, "").replace(/\r?\n/g, " ");
+  return {
+    text,
+    legacyText,
+    html: editor.getHTML(),
+    json: editor.getJSON(),
+    mentions,
+    isEmpty: !text.trim()
+  };
+}
+function stringContent(value, format) {
+  if (format !== "text") return value;
+  return {
+    type: "doc",
+    content: value.split(/\r?\n/).map((line) => ({
+      type: "paragraph",
+      ...line ? { content: [{ type: "text", text: line }] } : {}
+    }))
+  };
+}
+function CommentComposerComponent({
   value,
+  valueFormat = "html",
+  richValue,
   onChange,
+  onValueChange,
   onSubmit,
   onCancel,
+  composerRef,
+  editorLabel = "Comment",
+  editorAttributes: suppliedEditorAttributes,
+  autoFocus = false,
+  externalSubmit = false,
+  submitOnModEnter = false,
   placeholder = "Write a comment...",
   rows = 4,
   disabled = false,
   isSubmitting = false,
   submitLabel = "Post",
+  submittingLabel = "Posting...",
   cancelLabel = "Cancel",
   avatar,
   avatarProps,
   actions,
   className,
   children,
+  onKeyDown,
+  onKeyDownCapture,
   ...props
 }, ref) {
-  const hasValue = value === void 0 ? true : Boolean(value && value.trim().length);
-  const isSubmitDisabled = disabled || isSubmitting || !hasValue;
+  const containerRef = useRef(null);
+  const formRef = useRef(null);
+  const pendingFocusRef = useRef(null);
+  const handledShortcutEvents = useRef(/* @__PURE__ */ new WeakSet());
+  const callbacks = useRef({ onChange, onValueChange });
+  callbacks.current = { onChange, onValueChange };
+  const pendingEchoesRef = useRef([]);
+  const controlledRef = useRef(false);
+  controlledRef.current = value !== void 0 || richValue !== void 0;
+  const placeholderRef = useRef(placeholder);
+  placeholderRef.current = placeholder;
+  const [hasValue, setHasValue] = useState2(Boolean(richValue || value?.trim()));
+  const locked = disabled || isSubmitting;
+  const editorAttributes = useMemo2(
+    () => ({
+      ...suppliedEditorAttributes,
+      "data-comment-editor": "true",
+      role: "textbox",
+      "aria-label": editorLabel,
+      "aria-multiline": "true",
+      "aria-disabled": String(locked),
+      class: cx2(
+        "w-full bg-bg-base text-fg-base border-2 rounded-md border-border-base",
+        "outline-none transition-all duration-300 ease-in-out motion-reduce:transition-none",
+        "pl-[20px] py-12 font-normal text-base leading-relaxed overflow-y-auto",
+        "focus:shadow-focus focus-visible:shadow-focus",
+        locked && "bg-bg-subtle border-border-subtle text-fg-inactive"
+      ),
+      style: `height: ${Math.max(1, rows) * 30}px`
+    }),
+    [editorLabel, locked, rows, suppliedEditorAttributes]
+  );
+  const isSubmitDisabled = locked || !hasValue;
   const editor = useEditor({
+    immediatelyRender: false,
     extensions: [
       StarterKit,
       CommentMentionExtension,
-      Placeholder.configure({
-        placeholder
-      })
+      Placeholder.configure({ placeholder: () => placeholderRef.current })
     ],
-    content: value ?? "",
-    editable: !disabled,
-    editorProps: {
-      attributes: {
-        class: cx2(
-          "w-full bg-white border-2 rounded-md border-border-base",
-          "outline-none transition-all duration-300 ease-in-out",
-          "pl-5 py-3 font-normal text-base leading-relaxed",
-          "h-[120px] overflow-y-auto",
-          "focus:shadow-focus focus-visible:shadow-focus",
-          disabled && "bg-bg-subtle border-border-subtle text-fg-inactive"
-        )
-      }
-    },
+    content: richValue ?? stringContent(value ?? "", valueFormat),
+    editable: !locked,
+    editorProps: { attributes: editorAttributes },
     onUpdate: ({ editor: editor2 }) => {
-      onChange == null ? void 0 : onChange({ target: { value: editor2.getText() } });
+      const next = readValue(editor2);
+      if (controlledRef.current && (callbacks.current.onChange || callbacks.current.onValueChange)) {
+        pendingEchoesRef.current.push(next);
+        if (pendingEchoesRef.current.length > 100)
+          pendingEchoesRef.current.shift();
+      }
+      setHasValue(!next.isEmpty);
+      callbacks.current.onChange?.({ target: { value: next.legacyText } });
+      callbacks.current.onValueChange?.(next);
     }
   });
-  const containerRef = useRef(null);
+  useImperativeHandle(ref, () => containerRef.current, []);
+  useImperativeHandle(
+    composerRef,
+    () => ({
+      focus: (position = "end") => {
+        if (locked) return false;
+        if (!editor) {
+          pendingFocusRef.current = position;
+          return true;
+        }
+        return editor.commands.focus(position);
+      },
+      clear: () => !locked && Boolean(editor?.commands.clearContent(true)),
+      getValue: () => editor ? readValue(editor) : null,
+      submit: () => {
+        if (!locked) formRef.current?.requestSubmit();
+      }
+    }),
+    [editor, locked]
+  );
   useEffect2(() => {
-    if (typeof ref === "function") {
-      ref(containerRef.current);
-    } else if (ref) {
-      ref.current = containerRef.current;
-    }
-  }, [ref]);
+    if (!editor) return;
+    editor.setEditable(!locked, false);
+    editor.setOptions({
+      editorProps: {
+        ...editor.options.editorProps,
+        attributes: editorAttributes
+      }
+    });
+  }, [editor, locked, editorAttributes, placeholder]);
   useEffect2(() => {
     if (!editor) return;
-    if (value === "") {
-      editor.commands.clearContent();
+    const next = richValue ?? value;
+    if (next === void 0) return;
+    const current = readValue(editor);
+    const echoIndex = pendingEchoesRef.current.findIndex(
+      (snapshot) => richValue !== void 0 ? JSON.stringify(snapshot.json) === JSON.stringify(richValue) : snapshot.text === value || snapshot.legacyText === value
+    );
+    if (echoIndex !== -1) {
+      pendingEchoesRef.current.splice(0, echoIndex + 1);
+      setHasValue(!current.isEmpty);
+      return;
     }
-  }, [editor, value]);
+    pendingEchoesRef.current = [];
+    const equal = richValue !== void 0 ? JSON.stringify(current.json) === JSON.stringify(richValue) : current.text === value || current.legacyText === value;
+    if (!equal)
+      editor.commands.setContent(
+        richValue ?? stringContent(value, valueFormat),
+        { emitUpdate: false }
+      );
+    setHasValue(!readValue(editor).isEmpty);
+  }, [editor, value, richValue, valueFormat]);
+  useEffect2(() => {
+    if (editor) setHasValue(!readValue(editor).isEmpty);
+  }, [editor]);
+  useEffect2(() => {
+    if (!editor || locked) return;
+    if (!autoFocus && pendingFocusRef.current === null) return;
+    const position = pendingFocusRef.current ?? "end";
+    pendingFocusRef.current = null;
+    const frame = requestAnimationFrame(() => {
+      if (!editor.isDestroyed && editor.isEditable)
+        editor.commands.focus(position);
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [editor, autoFocus, locked]);
   const contextValue = useMemo2(
     () => ({
       editor,
       placeholder,
+      editable: !locked,
       editorContainerRef: containerRef
     }),
-    [editor, placeholder]
+    [editor, placeholder, locked]
   );
   return /* @__PURE__ */ jsx3(CommentComposerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs3(
     "form",
     {
+      ...props,
+      ref: formRef,
+      "data-comment-surface": "composer",
+      "aria-busy": isSubmitting || void 0,
       className: cx2(
         "relative flex gap-12 rounded-default border border-border-minimal bg-bg-base p-12",
         className
       ),
+      onKeyDown: (event) => {
+        if (!handledShortcutEvents.current.has(event.nativeEvent))
+          onKeyDown?.(event);
+      },
+      onKeyDownCapture: (event) => {
+        onKeyDownCapture?.(event);
+        if (!event.defaultPrevented && submitOnModEnter && !event.nativeEvent.isComposing && (event.ctrlKey || event.metaKey) && event.key === "Enter") {
+          handledShortcutEvents.current.add(event.nativeEvent);
+          onKeyDown?.(event);
+          if (event.defaultPrevented) return;
+          event.preventDefault();
+          if (!locked && editor && !readValue(editor).isEmpty)
+            formRef.current?.requestSubmit();
+        }
+      },
       onSubmit: (event) => {
         event.preventDefault();
-        if (isSubmitDisabled) return;
-        onSubmit == null ? void 0 : onSubmit(event);
+        if (!locked && editor && !readValue(editor).isEmpty)
+          onSubmit?.(event);
       },
-      ...props,
       children: [
         (avatar || avatarProps) && /* @__PURE__ */ jsx3("div", { className: "shrink-0", children: avatar ?? /* @__PURE__ */ jsx3(Avatar2, { size: "small", ...avatarProps }) }),
         /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
@@ -355,11 +522,11 @@ var CommentComposer = forwardRef2(function CommentComposer2({
                   size: "small",
                   isSecondary: true,
                   onClick: onCancel,
-                  disabled: disabled || isSubmitting,
+                  disabled: locked,
                   children: cancelLabel
                 }
               ),
-              /* @__PURE__ */ jsx3(Button, { type: "submit", size: "small", disabled: isSubmitDisabled, children: isSubmitting ? "Posting..." : submitLabel })
+              !externalSubmit && /* @__PURE__ */ jsx3(Button, { type: "submit", size: "small", disabled: isSubmitDisabled, children: isSubmitting ? submittingLabel : submitLabel })
             ] })
           ] })
         ] }),
@@ -367,29 +534,97 @@ var CommentComposer = forwardRef2(function CommentComposer2({
       ]
     }
   ) });
-});
+}
+var CommentComposer = forwardRef2(CommentComposerComponent);
 
 // src/elements/CommentMention.jsx
-import React4, { useMemo as useMemo3, useState as useState2, useCallback, useEffect as useEffect3, useRef as useRef2 } from "react";
+import React4, {
+  useMemo as useMemo3,
+  useState as useState4,
+  useCallback,
+  useEffect as useEffect3,
+  useRef as useRef2
+} from "react";
 import { Menu, MenuList, MenuItem } from "@edux-design/menus";
 import { Avatar as Avatar3 } from "@edux-design/avatars";
+
+// src/elements/useMentionPortalContainer.js
+import { useLayoutEffect, useState as useState3 } from "react";
+function resolveMentionPortalContainer(anchor, override) {
+  const document = anchor?.ownerDocument;
+  if (!document || !anchor.isConnected) return void 0;
+  if (override === null) return void 0;
+  if (override?.isConnected && override.ownerDocument === document)
+    return override;
+  const dialog = anchor.closest(
+    '[role="dialog"], [role="alertdialog"], dialog'
+  );
+  return dialog?.isConnected ? dialog : void 0;
+}
+function useMentionPortalContainer(anchorRef, override, active) {
+  const [container, setContainer] = useState3(void 0);
+  useLayoutEffect(() => {
+    let disposed = false;
+    let observer;
+    let observedDocument;
+    const refresh = () => {
+      if (disposed) return;
+      const anchor = anchorRef?.current;
+      const next = resolveMentionPortalContainer(anchor, override);
+      setContainer((previous) => previous === next ? previous : next);
+      const document = anchor?.ownerDocument;
+      if (!active || observedDocument === document) return;
+      observer?.disconnect();
+      observedDocument = document;
+      const MutationObserver = document?.defaultView?.MutationObserver;
+      if (MutationObserver && document.documentElement) {
+        observer = new MutationObserver(refresh);
+        observer.observe(document.documentElement, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ["role"]
+        });
+      }
+    };
+    refresh();
+    return () => {
+      disposed = true;
+      observer?.disconnect();
+    };
+  }, [anchorRef, override, active]);
+  return container;
+}
+
+// src/elements/CommentMention.jsx
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var CommentMention = ({
   peopleList = [],
-  onQueryChange
+  onQueryChange,
+  portalContainer
 }) => {
-  const { editor, editorContainerRef } = useCommentComposer();
-  const [menuOpen, setMenuOpen] = useState2(false);
-  const [query, setQuery] = useState2("");
-  const [range, setRange] = useState2(null);
-  const [anchorStyle, setAnchorStyle] = useState2({ left: 0, top: 0 });
+  const { editor, editorContainerRef, editable = true } = useCommentComposer();
+  const [menuOpen, setMenuOpen] = useState4(false);
+  const mentionPortalContainer = useMentionPortalContainer(
+    editorContainerRef,
+    portalContainer,
+    menuOpen
+  );
+  const [query, setQuery] = useState4("");
+  const [anchorStyle, setAnchorStyle] = useState4({ left: 0, top: 0 });
   const menuListRef = useRef2(null);
   const rangeRef = useRef2(null);
   const lastQueryRef = useRef2("");
-  const peopleByHandle = useMemo3(
-    () => new Map(peopleList.map((person) => [person.handle.toLowerCase(), person])),
-    [peopleList]
-  );
+  const dismissedRangeRef = useRef2(null);
+  const focusFrameRef = useRef2(null);
+  const focusTimeoutRef = useRef2(null);
+  const dismissMenu = useCallback(() => {
+    const activeRange = rangeRef.current;
+    dismissedRangeRef.current = activeRange ? `${activeRange.from}:${activeRange.to}` : null;
+    setMenuOpen(false);
+    if (editor && !editor.isDestroyed && editor.isEditable !== false)
+      editor.view.focus();
+  }, [editor]);
   const filteredPeople = useMemo3(() => {
     if (!query) return peopleList;
     const lowered = query.toLowerCase();
@@ -398,14 +633,15 @@ var CommentMention = ({
     );
   }, [peopleList, query]);
   const updateMenuState = useCallback(() => {
-    var _a, _b;
-    if (!editor) return;
-    const { from } = editor.state.selection;
+    if (!editor || !editable || editor.isEditable === false) {
+      setMenuOpen(false);
+      rangeRef.current = null;
+      return;
+    }
     const { parent, parentOffset, pos } = editor.state.selection.$from;
     if (!parent.isTextblock) {
       setMenuOpen(false);
       setQuery("");
-      setRange(null);
       return;
     }
     const textBefore = parent.textBetween(0, parentOffset, "\n", "\0");
@@ -417,13 +653,12 @@ var CommentMention = ({
         onQueryChange(handleQuery);
       }
       setQuery(handleQuery);
-      setMenuOpen(true);
       const fromPos = pos - match[0].length;
       const nextRange = { from: fromPos, to: pos };
-      setRange(nextRange);
+      setMenuOpen(dismissedRangeRef.current !== `${fromPos}:${pos}`);
       rangeRef.current = nextRange;
       const coords = editor.view.coordsAtPos(fromPos);
-      const containerRect = (_b = (_a = editorContainerRef == null ? void 0 : editorContainerRef.current) == null ? void 0 : _a.getBoundingClientRect) == null ? void 0 : _b.call(_a);
+      const containerRect = editorContainerRef?.current?.getBoundingClientRect?.();
       if (containerRect) {
         setAnchorStyle({
           left: coords.left - containerRect.left + 12,
@@ -434,16 +669,16 @@ var CommentMention = ({
     }
     setMenuOpen(false);
     setQuery("");
-    setRange(null);
     rangeRef.current = null;
     if (onQueryChange && lastQueryRef.current !== "") {
       lastQueryRef.current = "";
       onQueryChange("");
     }
-  }, [editor, editorContainerRef, onQueryChange]);
+  }, [editor, editorContainerRef, onQueryChange, editable]);
   const handleSelectPerson = useCallback(
     (person) => {
-      if (!editor || !rangeRef.current) return;
+      if (!editor || !editable || editor.isEditable === false || !rangeRef.current)
+        return;
       const selectionRange = rangeRef.current;
       editor.commands.focus();
       editor.commands.setTextSelection(selectionRange);
@@ -463,21 +698,34 @@ var CommentMention = ({
         { updateSelection: false }
       );
       const nextPos = selectionRange.from + 2;
-      requestAnimationFrame(() => {
+      editor.view.focus();
+      cancelAnimationFrame(focusFrameRef.current);
+      clearTimeout(focusTimeoutRef.current);
+      focusFrameRef.current = requestAnimationFrame(() => {
+        if (editor.isDestroyed || editor.isEditable === false) return;
         editor.commands.setTextSelection(nextPos);
         editor.view.focus();
-        setTimeout(() => editor.view.focus(), 0);
+        focusTimeoutRef.current = setTimeout(() => {
+          if (!editor.isDestroyed && editor.isEditable !== false)
+            editor.view.focus();
+        }, 0);
       });
       setMenuOpen(false);
       setQuery("");
-      setRange(null);
       rangeRef.current = null;
       if (onQueryChange && lastQueryRef.current !== "") {
         lastQueryRef.current = "";
         onQueryChange("");
       }
     },
-    [editor, onQueryChange]
+    [editor, onQueryChange, editable]
+  );
+  useEffect3(
+    () => () => {
+      cancelAnimationFrame(focusFrameRef.current);
+      clearTimeout(focusTimeoutRef.current);
+    },
+    [editor]
   );
   useEffect3(() => {
     if (!editor) return;
@@ -490,25 +738,30 @@ var CommentMention = ({
     };
   }, [editor, updateMenuState]);
   useEffect3(() => {
-    var _a;
     if (!editor) return;
     const handleKeyDown = (event) => {
-      var _a2;
       if (!menuOpen) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        dismissMenu();
+        return;
+      }
       if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
       event.preventDefault();
+      event.stopPropagation();
       const list = menuListRef.current;
-      const items = list == null ? void 0 : list.querySelectorAll("[data-menu-item]");
-      if (!list || !(items == null ? void 0 : items.length)) return;
+      const items = list?.querySelectorAll("[data-menu-item]");
+      if (!list || !items?.length) return;
       list.focus();
       const direction = event.key === "ArrowDown" ? 1 : -1;
       const targetIndex = direction === 1 ? 0 : items.length - 1;
-      (_a2 = items[targetIndex]) == null ? void 0 : _a2.focus();
+      items[targetIndex]?.focus();
     };
-    const dom = (_a = editor.view) == null ? void 0 : _a.dom;
-    dom == null ? void 0 : dom.addEventListener("keydown", handleKeyDown);
-    return () => dom == null ? void 0 : dom.removeEventListener("keydown", handleKeyDown);
-  }, [editor, menuOpen]);
+    const dom = editor.view?.dom;
+    dom?.addEventListener("keydown", handleKeyDown, true);
+    return () => dom?.removeEventListener("keydown", handleKeyDown, true);
+  }, [editor, menuOpen, dismissMenu]);
   const menuContent = useMemo3(
     () => /* @__PURE__ */ jsx4(
       Menu,
@@ -520,6 +773,7 @@ var CommentMention = ({
           {
             type: "button",
             "aria-hidden": true,
+            tabIndex: -1,
             className: "absolute h-1 w-1 opacity-0",
             style: {
               left: `${anchorStyle.left}px`,
@@ -537,34 +791,56 @@ var CommentMention = ({
           sideOffset: 4,
           avoidCollisions: true,
           collisionPadding: 12,
+          container: mentionPortalContainer,
           onCloseAutoFocus: (event) => event.preventDefault()
         },
-        children: /* @__PURE__ */ jsx4(MenuList, { ref: menuListRef, className: "min-w-[220px]", children: filteredPeople.map((person) => /* @__PURE__ */ jsx4(
-          MenuItem,
+        children: /* @__PURE__ */ jsx4(
+          MenuList,
           {
-            onMouseDown: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              handleSelectPerson(person);
+            ref: menuListRef,
+            className: "min-w-[220px]",
+            onKeyDownCapture: (event) => {
+              if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                dismissMenu();
+              }
             },
-            onClick: () => handleSelectPerson(person),
-            onPointerDown: (event) => event.preventDefault(),
-            children: /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-8", children: [
-              /* @__PURE__ */ jsx4(Avatar3, { size: "small", ...person.avatarProps }),
-              /* @__PURE__ */ jsxs4("span", { className: "flex flex-col", children: [
-                /* @__PURE__ */ jsx4("span", { className: "text-sm text-fg-base", children: person.name }),
-                /* @__PURE__ */ jsxs4("span", { className: "text-xs text-fg-subtle", children: [
-                  "@",
-                  person.handle
+            children: filteredPeople.map((person) => /* @__PURE__ */ jsx4(
+              MenuItem,
+              {
+                onMouseDown: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  handleSelectPerson(person);
+                },
+                onClick: () => handleSelectPerson(person),
+                onPointerDown: (event) => event.preventDefault(),
+                children: /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-8", children: [
+                  /* @__PURE__ */ jsx4(Avatar3, { size: "small", ...person.avatarProps }),
+                  /* @__PURE__ */ jsxs4("span", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsx4("span", { className: "text-sm text-fg-base", children: person.name }),
+                    /* @__PURE__ */ jsxs4("span", { className: "text-xs text-fg-subtle", children: [
+                      "@",
+                      person.handle
+                    ] })
+                  ] })
                 ] })
-              ] })
-            ] })
-          },
-          person.id
-        )) })
+              },
+              person.id
+            ))
+          }
+        )
       }
     ),
-    [filteredPeople, handleSelectPerson, menuOpen]
+    [
+      filteredPeople,
+      handleSelectPerson,
+      menuOpen,
+      anchorStyle,
+      dismissMenu,
+      mentionPortalContainer
+    ]
   );
   if (!editor) return null;
   return menuContent;