@edux-design/comments 0.1.4 → 0.3.0

package/src/elements/CommentMention.jsx

@@ -1,232 +0,0 @@
-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[],
- *  onQueryChange?: (query: string) => void,
- *  placeholder?: string,
- * }} CommentMentionProps
- */
-
-export const CommentMention = ({
-  peopleList = [],
-  onQueryChange,
-}) => {
-  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 lastQueryRef = useRef("");
-
-  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] ?? "";
-      if (onQueryChange && handleQuery !== lastQueryRef.current) {
-        lastQueryRef.current = handleQuery;
-        onQueryChange(handleQuery);
-      }
-      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;
-    if (onQueryChange && lastQueryRef.current !== "") {
-      lastQueryRef.current = "";
-      onQueryChange("");
-    }
-  }, [editor, editorContainerRef, onQueryChange]);
-
-  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;
-      if (onQueryChange && lastQueryRef.current !== "") {
-        lastQueryRef.current = "";
-        onQueryChange("");
-      }
-    },
-    [editor, onQueryChange]
-  );
-
-  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

@@ -1,150 +0,0 @@
-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();
-  });
-
-  it("emits mention queries when typing", () => {
-    const handleQueryChange = vi.fn();
-    render(
-      <CommentMention
-        peopleList={[{ id: "1", name: "Alex Johnson", handle: "alex" }]}
-        onQueryChange={handleQueryChange}
-      />
-    );
-
-    expect(handleQueryChange).toHaveBeenCalledWith("al");
-  });
-});

package/src/elements/CommentMentionExtension.jsx

@@ -1,56 +0,0 @@
-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

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

package/tsconfig.json

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