@edux-design/comments 0.1.1

package/src/elements/CommentMention.jsx

@@ -0,0 +1,217 @@
+import React, { useMemo, useState, useCallback, useEffect, useRef } from "react";
+import { Menu, MenuList, MenuItem } from "@edux-design/menus";
+import { Avatar } from "@edux-design/avatars";
+import { useCommentComposer } from "./CommentComposer";
+
+/**
+ * @typedef {{
+ *  id: string,
+ *  name: string,
+ *  handle: string,
+ *  avatarProps?: import("@edux-design/avatars").AvatarProps,
+ * }} CommentMentionPerson
+ */
+
+/**
+ * @typedef {{
+ *  peopleList: CommentMentionPerson[],
+ *  placeholder?: string,
+ * }} CommentMentionProps
+ */
+
+export const CommentMention = ({
+  peopleList = [],
+}) => {
+  const { editor, editorContainerRef } = useCommentComposer();
+
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [range, setRange] = useState(null);
+  const [anchorStyle, setAnchorStyle] = useState({ left: 0, top: 0 });
+  const menuListRef = useRef(null);
+  const rangeRef = useRef(null);
+
+  const peopleByHandle = useMemo(
+    () => new Map(peopleList.map((person) => [person.handle.toLowerCase(), person])),
+    [peopleList]
+  );
+
+  const filteredPeople = useMemo(() => {
+    if (!query) return peopleList;
+    const lowered = query.toLowerCase();
+    return peopleList.filter((person) =>
+      person.handle.toLowerCase().startsWith(lowered)
+    );
+  }, [peopleList, query]);
+
+  const updateMenuState = useCallback(() => {
+    if (!editor) return;
+    const { from } = editor.state.selection;
+    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");
+    const match = textBefore.match(/@([\w-]*)$/);
+
+    if (match) {
+      const handleQuery = match[1] ?? "";
+      setQuery(handleQuery);
+      setMenuOpen(true);
+      const fromPos = pos - match[0].length;
+      const nextRange = { from: fromPos, to: pos };
+      setRange(nextRange);
+      rangeRef.current = nextRange;
+      const coords = editor.view.coordsAtPos(fromPos);
+      const containerRect = editorContainerRef?.current?.getBoundingClientRect?.();
+      if (containerRect) {
+        setAnchorStyle({
+          left: coords.left - containerRect.left + 12,
+          top: coords.bottom - containerRect.top + 4,
+        });
+      }
+      return;
+    }
+
+    setMenuOpen(false);
+    setQuery("");
+    setRange(null);
+    rangeRef.current = null;
+  }, [editor]);
+
+  const handleSelectPerson = useCallback(
+    (person) => {
+      if (!editor || !rangeRef.current) return;
+      const selectionRange = rangeRef.current;
+      editor.commands.focus();
+      editor.commands.setTextSelection(selectionRange);
+      editor.commands.insertContentAt(
+        selectionRange,
+        [
+          {
+            type: "commentMention",
+            attrs: {
+              id: person.id,
+              handle: person.handle,
+              label: person.name,
+            },
+          },
+          { type: "text", text: " " },
+        ],
+        { updateSelection: false }
+      );
+
+      const nextPos = selectionRange.from + 2;
+      requestAnimationFrame(() => {
+        editor.commands.setTextSelection(nextPos);
+        editor.view.focus();
+        setTimeout(() => editor.view.focus(), 0);
+      });
+      setMenuOpen(false);
+      setQuery("");
+      setRange(null);
+      rangeRef.current = null;
+    },
+    [editor]
+  );
+
+  useEffect(() => {
+    if (!editor) return;
+    updateMenuState();
+    editor.on("transaction", updateMenuState);
+    editor.on("selectionUpdate", updateMenuState);
+    return () => {
+      editor.off("transaction", updateMenuState);
+      editor.off("selectionUpdate", updateMenuState);
+    };
+  }, [editor, updateMenuState]);
+
+  useEffect(() => {
+    if (!editor) return;
+    const handleKeyDown = (event) => {
+      if (!menuOpen) return;
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+
+      event.preventDefault();
+      const list = menuListRef.current;
+      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;
+      items[targetIndex]?.focus();
+    };
+
+    const dom = editor.view?.dom;
+    dom?.addEventListener("keydown", handleKeyDown);
+    return () => dom?.removeEventListener("keydown", handleKeyDown);
+  }, [editor, menuOpen]);
+
+  const menuContent = useMemo(
+    () => (
+      <Menu
+        open={menuOpen && filteredPeople.length > 0}
+        onOpenChange={setMenuOpen}
+        button={
+          <button
+            type="button"
+            aria-hidden
+            className="absolute h-1 w-1 opacity-0"
+            style={{
+              left: `${anchorStyle.left}px`,
+              top: `${anchorStyle.top}px`,
+              pointerEvents: "none",
+            }}
+          />
+        }
+        align="start"
+        side="bottom"
+        trapFocus={false}
+        disableOutsidePointerEvents={false}
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        contentProps={{
+          sideOffset: 4,
+          avoidCollisions: true,
+          collisionPadding: 12,
+          onCloseAutoFocus: (event) => event.preventDefault(),
+        }}
+      >
+        <MenuList ref={menuListRef} className="min-w-[220px]">
+          {filteredPeople.map((person) => (
+            <MenuItem
+              key={person.id}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                handleSelectPerson(person);
+              }}
+              onClick={() => handleSelectPerson(person)}
+              onPointerDown={(event) => event.preventDefault()}
+            >
+              <span className="flex items-center gap-8">
+                <Avatar size="small" {...person.avatarProps} />
+                <span className="flex flex-col">
+                  <span className="text-sm text-fg-base">{person.name}</span>
+                  <span className="text-xs text-fg-subtle">
+                    @{person.handle}
+                  </span>
+                </span>
+              </span>
+            </MenuItem>
+          ))}
+        </MenuList>
+      </Menu>
+    ),
+    [filteredPeople, handleSelectPerson, menuOpen]
+  );
+
+  if (!editor) return null;
+
+  return menuContent;
+};

package/src/elements/CommentMention.test.jsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+const insertContentAt = vi.fn();
+const setTextSelection = vi.fn();
+const focus = vi.fn();
+const viewFocus = vi.fn();
+
+const editorMock = {
+  state: {
+    selection: {
+      from: 10,
+      $from: {
+        parent: {
+          isTextblock: true,
+          textBetween: () => "Hello @al",
+        },
+        parentOffset: 9,
+        pos: 10,
+      },
+    },
+  },
+  view: {
+    dom: document.createElement("div"),
+    coordsAtPos: () => ({ left: 100, bottom: 120 }),
+    focus: viewFocus,
+  },
+  commands: {
+    focus,
+    setTextSelection,
+    insertContentAt,
+  },
+  on: vi.fn(),
+  off: vi.fn(),
+};
+
+const containerRef = {
+  current: {
+    getBoundingClientRect: () => ({ left: 50, top: 50 }),
+  },
+};
+
+vi.mock("@edux-design/menus", () => ({
+  Menu: ({ children, button }) => (
+    <div>
+      {button}
+      {children}
+    </div>
+  ),
+  MenuList: React.forwardRef(({ children }, ref) => (
+    <div ref={ref} tabIndex={0}>
+      {children}
+    </div>
+  )),
+  MenuItem: ({ children, onMouseDown, onClick }) => (
+    <div
+      data-testid="menu-item"
+      data-menu-item
+      tabIndex={-1}
+      onMouseDown={onMouseDown}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  ),
+}));
+
+vi.mock("@edux-design/avatars", () => ({
+  Avatar: () => <div data-testid="avatar" />,
+}));
+
+vi.mock("@edux-design/mentions", () => ({
+  Mention: ({ children }) => <span>{children}</span>,
+}));
+
+vi.mock("./CommentComposer", () => ({
+  useCommentComposer: () => ({
+    editor: editorMock,
+    editorContainerRef: containerRef,
+  }),
+}));
+
+import { CommentMention } from "./CommentMention";
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+describe("CommentMention", () => {
+  it("inserts a mention and focuses the editor on selection", () => {
+    render(
+      <CommentMention
+        peopleList={[{ id: "1", name: "Alex Johnson", handle: "alex" }]}
+      />
+    );
+
+    const item = screen.getByTestId("menu-item");
+    fireEvent.mouseDown(item);
+
+    expect(focus).toHaveBeenCalled();
+    expect(setTextSelection).toHaveBeenCalled();
+    expect(insertContentAt).toHaveBeenCalled();
+    expect(viewFocus).toHaveBeenCalled();
+  });
+
+  it("positions the menu trigger relative to the cursor", () => {
+    render(
+      <CommentMention
+        peopleList={[{ id: "1", name: "Alex Johnson", handle: "alex" }]}
+      />
+    );
+
+    const trigger = screen.getByRole("button", { hidden: true });
+    expect(trigger.style.left).toBe("62px");
+    expect(trigger.style.top).toBe("74px");
+  });
+
+  it("moves focus to menu items on arrow key", () => {
+    render(
+      <CommentMention
+        peopleList={[
+          { id: "1", name: "Alex Johnson", handle: "alex" },
+          { id: "2", name: "Priya Singh", handle: "priya" },
+        ]}
+      />
+    );
+
+    const items = screen.getAllByTestId("menu-item");
+    const focusSpy = vi.spyOn(items[0], "focus");
+
+    fireEvent.keyDown(editorMock.view.dom, { key: "ArrowDown" });
+
+    expect(focusSpy).toHaveBeenCalled();
+  });
+});

package/src/elements/CommentMentionExtension.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Node, mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer, NodeViewWrapper } from "@tiptap/react";
+import { Mention } from "@edux-design/mentions";
+
+const MentionNodeView = ({ node }) => {
+  const handle = node.attrs?.handle ?? "";
+  const label = node.attrs?.label ?? "";
+  return (
+    <NodeViewWrapper
+      as="span"
+      className="inline-flex items-center align-middle -translate-y-2"
+    >
+      <Mention handle={handle} size="small">
+        @{handle} · {label}
+      </Mention>
+    </NodeViewWrapper>
+  );
+};
+
+export const CommentMentionExtension = Node.create({
+  name: "commentMention",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: false,
+
+  addAttributes() {
+    return {
+      id: { default: null },
+      handle: { default: "" },
+      label: { default: "" },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "span[data-comment-mention]" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const handle = HTMLAttributes.handle || "";
+    const label = HTMLAttributes.label || `@${handle}`;
+    return [
+      "span",
+      mergeAttributes(HTMLAttributes, {
+        "data-comment-mention": "true",
+        "data-handle": handle,
+      }),
+      label,
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(MentionNodeView);
+  },
+});

package/src/index.js

@@ -0,0 +1,3 @@
+export { Comment } from "./elements/Comment";
+export { CommentComposer } from "./elements/CommentComposer";
+export { CommentMention } from "./elements/CommentMention";

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "jsx": "react-jsx",
+    "outDir": "dist"
+  }
+}