@edux-design/comments 0.1.4 → 0.3.0

package/dist/index.js

@@ -50,7 +50,10 @@ var CommentContext = (0, import_react.createContext)({
   resolved: false
 });
 var useCommentContext = () => (0, import_react.useContext)(CommentContext);
-var Comment = (0, import_react.forwardRef)(function Comment2({
+var flattenReplies = (children) => import_react.default.Children.toArray(children).flatMap(
+  (child) => (0, import_react.isValidElement)(child) && child.type === import_react.default.Fragment ? flattenReplies(child.props.children) : [child]
+);
+function CommentComponent({
   author = "Author",
   timestamp,
   avatar,
@@ -68,10 +71,7 @@ var Comment = (0, import_react.forwardRef)(function Comment2({
 }, ref) {
   const childArray = import_react.default.Children.toArray(children);
   const actionsSlot = childArray.find(
-    (child) => {
-      var _a;
-      return (0, import_react.isValidElement)(child) && (child.type === CommentActions || ((_a = child.type) == null ? void 0 : _a.displayName) === "Comment.Actions");
-    }
+    (child) => (0, import_react.isValidElement)(child) && (child.type === CommentActions || child.type?.displayName === "Comment.Actions")
   );
   const bodyNodes = childArray.filter((child) => child !== actionsSlot);
   const bodyContent = body ?? bodyNodes;
@@ -79,9 +79,11 @@ var Comment = (0, import_react.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 = (0, import_react.useMemo)(
-    () => import_react.default.Children.toArray(replies).filter(
+    () => flattenReplies(replies).filter(
       (reply) => reply !== null && reply !== void 0 && reply !== false
     ),
     [replies]
@@ -93,49 +95,55 @@ var Comment = (0, import_react.forwardRef)(function Comment2({
     setShowAllReplies(!shouldCollapseReplies);
   }, [shouldCollapseReplies]);
   const visibleReplies = shouldCollapseReplies && !showAllReplies ? [replyItems[replyCount - 1]] : replyItems;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommentContext.Provider, { value: { editable, onResolve, resolved: isResolved }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    CommentContext.Provider,
     {
-      ref,
-      className: (0, import_utils.cx)(
-        "flex gap-12 rounded-default border p-12",
-        resolvedVariant,
-        className
-      ),
-      "data-variant": variant,
-      ...props,
-      children: [
-        shouldRenderAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0", children: avatar ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatars.Avatar, { name: resolvedAvatarName, size: "small", ...avatarProps }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-6", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate text-sm font-semibold text-fg-base", children: author }),
-            timestamp && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-fg-subtle", children: timestamp })
-          ] }),
-          hasBodyContent && !isResolved ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-6 text-sm leading-relaxed text-fg-base", children: bodyContent }) : null,
-          isResolved ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-6 text-xs font-semibold uppercase tracking-wide text-fg-success-base", children: "Resolved" }) : null,
-          actionsSlot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-8", children: actionsSlot }) : null,
-          replies && !isResolved ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-10 border-l border-border-minimal pl-12", children: [
-            shouldCollapseReplies && !showAllReplies && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          ref,
+          className: (0, import_utils.cx)(
+            "flex gap-12 rounded-default border p-12",
+            resolvedVariant,
+            className
+          ),
+          "data-variant": variant,
+          ...props,
+          children: [
+            shouldRenderAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0", children: avatar ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatars.Avatar, { name: resolvedAvatarName, size: "small", ...avatarProps }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-6", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate text-sm font-semibold text-fg-base", children: author }),
+                timestamp && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs text-fg-subtle", children: timestamp })
+              ] }),
+              hasBodyContent && !isResolved ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-6 text-sm leading-relaxed text-fg-base", children: bodyContent }) : null,
+              isResolved ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-6 text-xs font-semibold uppercase tracking-wide text-fg-success-base", children: "Resolved" }) : null,
+              actionsSlot ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-8", children: actionsSlot }) : null,
+              replies && !isResolved ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-[40px] border-l border-border-minimal pl-[20px]", children: [
+                shouldCollapseReplies && !showAllReplies && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
   "div",
   {
@@ -195,10 +203,13 @@ var CommentResolve = ({
     }
   );
 };
-Comment.Actions = CommentActions;
-Comment.Reply = CommentReply;
-Comment.Edit = CommentEdit;
-Comment.Resolve = CommentResolve;
+var Comment = Object.assign((0, import_react.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";
@@ -220,9 +231,8 @@ var import_react3 = require("@tiptap/react");
 var import_mentions = require("@edux-design/mentions");
 var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsx)(
     import_react3.NodeViewWrapper,
     {
@@ -265,6 +275,11 @@ var CommentMentionExtension = import_core.Node.create({
       label
     ];
   },
+  renderText({ node }) {
+    const handle = node.attrs.handle || "";
+    const label = node.attrs.label || "";
+    return `@${handle || label || "mention"}`;
+  },
   addNodeView() {
     return (0, import_react3.ReactNodeViewRenderer)(MentionNodeView);
   }
@@ -282,87 +297,237 @@ var useCommentComposer = () => {
   }
   return context;
 };
-var CommentComposer = (0, import_react4.forwardRef)(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 = (0, import_react4.useRef)(null);
+  const formRef = (0, import_react4.useRef)(null);
+  const pendingFocusRef = (0, import_react4.useRef)(null);
+  const handledShortcutEvents = (0, import_react4.useRef)(/* @__PURE__ */ new WeakSet());
+  const callbacks = (0, import_react4.useRef)({ onChange, onValueChange });
+  callbacks.current = { onChange, onValueChange };
+  const pendingEchoesRef = (0, import_react4.useRef)([]);
+  const controlledRef = (0, import_react4.useRef)(false);
+  controlledRef.current = value !== void 0 || richValue !== void 0;
+  const placeholderRef = (0, import_react4.useRef)(placeholder);
+  placeholderRef.current = placeholder;
+  const [hasValue, setHasValue] = (0, import_react4.useState)(Boolean(richValue || value?.trim()));
+  const locked = disabled || isSubmitting;
+  const editorAttributes = (0, import_react4.useMemo)(
+    () => ({
+      ...suppliedEditorAttributes,
+      "data-comment-editor": "true",
+      role: "textbox",
+      "aria-label": editorLabel,
+      "aria-multiline": "true",
+      "aria-disabled": String(locked),
+      class: (0, import_utils2.cx)(
+        "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 = (0, import_react5.useEditor)({
+    immediatelyRender: false,
     extensions: [
       import_starter_kit.default,
       CommentMentionExtension,
-      import_extension_placeholder.default.configure({
-        placeholder
-      })
+      import_extension_placeholder.default.configure({ placeholder: () => placeholderRef.current })
     ],
-    content: value ?? "",
-    editable: !disabled,
-    editorProps: {
-      attributes: {
-        class: (0, import_utils2.cx)(
-          "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 = (0, import_react4.useRef)(null);
+  (0, import_react4.useImperativeHandle)(ref, () => containerRef.current, []);
+  (0, import_react4.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]
+  );
   (0, import_react4.useEffect)(() => {
-    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]);
   (0, import_react4.useEffect)(() => {
     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]);
+  (0, import_react4.useEffect)(() => {
+    if (editor) setHasValue(!readValue(editor).isEmpty);
+  }, [editor]);
+  (0, import_react4.useEffect)(() => {
+    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 = (0, import_react4.useMemo)(
     () => ({
       editor,
       placeholder,
+      editable: !locked,
       editorContainerRef: containerRef
     }),
-    [editor, placeholder]
+    [editor, placeholder, locked]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CommentComposerContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "form",
     {
+      ...props,
+      ref: formRef,
+      "data-comment-surface": "composer",
+      "aria-busy": isSubmitting || void 0,
       className: (0, import_utils2.cx)(
         "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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "shrink-0", children: avatar ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_avatars2.Avatar, { size: "small", ...avatarProps }) }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "min-w-0 flex-1", children: [
@@ -377,11 +542,11 @@ var CommentComposer = (0, import_react4.forwardRef)(function CommentComposer2({
                   size: "small",
                   isSecondary: true,
                   onClick: onCancel,
-                  disabled: disabled || isSubmitting,
+                  disabled: locked,
                   children: cancelLabel
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_buttons.Button, { type: "submit", size: "small", disabled: isSubmitDisabled, children: isSubmitting ? "Posting..." : submitLabel })
+              !externalSubmit && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_buttons.Button, { type: "submit", size: "small", disabled: isSubmitDisabled, children: isSubmitting ? submittingLabel : submitLabel })
             ] })
           ] })
         ] }),
@@ -389,45 +554,108 @@ var CommentComposer = (0, import_react4.forwardRef)(function CommentComposer2({
       ]
     }
   ) });
-});
+}
+var CommentComposer = (0, import_react4.forwardRef)(CommentComposerComponent);
 
 // src/elements/CommentMention.jsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_menus = require("@edux-design/menus");
 var import_avatars3 = require("@edux-design/avatars");
+
+// src/elements/useMentionPortalContainer.js
+var import_react6 = require("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] = (0, import_react6.useState)(void 0);
+  (0, import_react6.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
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CommentMention = ({
   peopleList = [],
-  onQueryChange
+  onQueryChange,
+  portalContainer
 }) => {
-  const { editor, editorContainerRef } = useCommentComposer();
-  const [menuOpen, setMenuOpen] = (0, import_react6.useState)(false);
-  const [query, setQuery] = (0, import_react6.useState)("");
-  const [range, setRange] = (0, import_react6.useState)(null);
-  const [anchorStyle, setAnchorStyle] = (0, import_react6.useState)({ left: 0, top: 0 });
-  const menuListRef = (0, import_react6.useRef)(null);
-  const rangeRef = (0, import_react6.useRef)(null);
-  const lastQueryRef = (0, import_react6.useRef)("");
-  const peopleByHandle = (0, import_react6.useMemo)(
-    () => new Map(peopleList.map((person) => [person.handle.toLowerCase(), person])),
-    [peopleList]
+  const { editor, editorContainerRef, editable = true } = useCommentComposer();
+  const [menuOpen, setMenuOpen] = (0, import_react7.useState)(false);
+  const mentionPortalContainer = useMentionPortalContainer(
+    editorContainerRef,
+    portalContainer,
+    menuOpen
   );
-  const filteredPeople = (0, import_react6.useMemo)(() => {
+  const [query, setQuery] = (0, import_react7.useState)("");
+  const [anchorStyle, setAnchorStyle] = (0, import_react7.useState)({ left: 0, top: 0 });
+  const menuListRef = (0, import_react7.useRef)(null);
+  const rangeRef = (0, import_react7.useRef)(null);
+  const lastQueryRef = (0, import_react7.useRef)("");
+  const dismissedRangeRef = (0, import_react7.useRef)(null);
+  const focusFrameRef = (0, import_react7.useRef)(null);
+  const focusTimeoutRef = (0, import_react7.useRef)(null);
+  const dismissMenu = (0, import_react7.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 = (0, import_react7.useMemo)(() => {
     if (!query) return peopleList;
     const lowered = query.toLowerCase();
     return peopleList.filter(
       (person) => person.handle.toLowerCase().startsWith(lowered)
     );
   }, [peopleList, query]);
-  const updateMenuState = (0, import_react6.useCallback)(() => {
-    var _a, _b;
-    if (!editor) return;
-    const { from } = editor.state.selection;
+  const updateMenuState = (0, import_react7.useCallback)(() => {
+    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");
@@ -439,13 +667,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,
@@ -456,16 +683,16 @@ var CommentMention = ({
     }
     setMenuOpen(false);
     setQuery("");
-    setRange(null);
     rangeRef.current = null;
     if (onQueryChange && lastQueryRef.current !== "") {
       lastQueryRef.current = "";
       onQueryChange("");
     }
-  }, [editor, editorContainerRef, onQueryChange]);
-  const handleSelectPerson = (0, import_react6.useCallback)(
+  }, [editor, editorContainerRef, onQueryChange, editable]);
+  const handleSelectPerson = (0, import_react7.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);
@@ -485,23 +712,36 @@ 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]
   );
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(
+    () => () => {
+      cancelAnimationFrame(focusFrameRef.current);
+      clearTimeout(focusTimeoutRef.current);
+    },
+    [editor]
+  );
+  (0, import_react7.useEffect)(() => {
     if (!editor) return;
     updateMenuState();
     editor.on("transaction", updateMenuState);
@@ -511,27 +751,32 @@ var CommentMention = ({
       editor.off("selectionUpdate", updateMenuState);
     };
   }, [editor, updateMenuState]);
-  (0, import_react6.useEffect)(() => {
-    var _a;
+  (0, import_react7.useEffect)(() => {
     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 menuContent = (0, import_react6.useMemo)(
+    const dom = editor.view?.dom;
+    dom?.addEventListener("keydown", handleKeyDown, true);
+    return () => dom?.removeEventListener("keydown", handleKeyDown, true);
+  }, [editor, menuOpen, dismissMenu]);
+  const menuContent = (0, import_react7.useMemo)(
     () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_menus.Menu,
       {
@@ -542,6 +787,7 @@ var CommentMention = ({
           {
             type: "button",
             "aria-hidden": true,
+            tabIndex: -1,
             className: "absolute h-1 w-1 opacity-0",
             style: {
               left: `${anchorStyle.left}px`,
@@ -559,34 +805,56 @@ var CommentMention = ({
           sideOffset: 4,
           avoidCollisions: true,
           collisionPadding: 12,
+          container: mentionPortalContainer,
           onCloseAutoFocus: (event) => event.preventDefault()
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_menus.MenuList, { ref: menuListRef, className: "min-w-[220px]", children: filteredPeople.map((person) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          import_menus.MenuItem,
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          import_menus.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__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex items-center gap-8", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_avatars3.Avatar, { size: "small", ...person.avatarProps }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex flex-col", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sm text-fg-base", children: person.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-xs text-fg-subtle", children: [
-                  "@",
-                  person.handle
+            children: filteredPeople.map((person) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_menus.MenuItem,
+              {
+                onMouseDown: (event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  handleSelectPerson(person);
+                },
+                onClick: () => handleSelectPerson(person),
+                onPointerDown: (event) => event.preventDefault(),
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex items-center gap-8", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_avatars3.Avatar, { size: "small", ...person.avatarProps }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sm text-fg-base", children: person.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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;