fix(editor): prevent stuck list after pasting plain text

marked.parse() emits a trailing newline that became a whitespace text
node at the body level, which parseSlice converted into a spurious
paragraph at the end of the target — inside a list item this blocked
the "Enter exits list" behavior since splitListItem's empty-last-block
check never fired.
Strip whitespace-only text nodes between block elements before parsing
the slice, and place the cursor at the end of the inserted content.
Also extend transformPasted to drop trailing hardBreaks and whitespace
text nodes for the HTML-clipboard path.

apps/client/package.json

@@ -7,89 +7,78 @@
     "build": "tsc && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\"",
-    "test": "vitest run",
-    "test:watch": "vitest"
+    "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.ts\""
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "1.8.1",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "2.1.5",
-    "@atlaskit/pragmatic-drag-and-drop-flourish": "2.0.15",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@atlaskit/pragmatic-drag-and-drop-live-region": "1.3.4",
-    "@casl/react": "5.0.1",
+    "@casl/react": "^5.0.1",
     "@docmost/editor-ext": "workspace:*",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@excalidraw/excalidraw": "0.18.0-3a5ef40",
-    "@mantine/core": "8.3.18",
-    "@mantine/dates": "8.3.18",
-    "@mantine/form": "8.3.18",
-    "@mantine/hooks": "8.3.18",
-    "@mantine/modals": "8.3.18",
-    "@mantine/notifications": "8.3.18",
-    "@mantine/spotlight": "8.3.18",
-    "@slidoapp/emoji-mart": "5.8.7",
-    "@slidoapp/emoji-mart-data": "1.2.4",
-    "@slidoapp/emoji-mart-react": "1.1.5",
-    "@tabler/icons-react": "3.40.0",
+    "@mantine/core": "^8.3.18",
+    "@mantine/dates": "^8.3.18",
+    "@mantine/form": "^8.3.18",
+    "@mantine/hooks": "^8.3.18",
+    "@mantine/modals": "^8.3.18",
+    "@mantine/notifications": "^8.3.18",
+    "@mantine/spotlight": "^8.3.18",
+    "@tabler/icons-react": "^3.40.0",
     "@tanstack/react-query": "5.90.17",
-    "@tanstack/react-virtual": "3.13.24",
-    "alfaaz": "1.1.0",
+    "alfaaz": "^1.1.0",
     "axios": "1.16.0",
-    "blueimp-load-image": "5.16.0",
-    "clsx": "2.1.1",
-    "file-saver": "2.0.5",
-    "highlightjs-sap-abap": "0.3.0",
+    "blueimp-load-image": "^5.16.0",
+    "clsx": "^2.1.1",
+    "emoji-mart": "^5.6.0",
+    "file-saver": "^2.0.5",
+    "highlightjs-sap-abap": "^0.3.0",
     "i18next": "25.10.1",
     "i18next-http-backend": "3.0.6",
-    "jotai": "2.18.1",
-    "jotai-optics": "0.4.0",
-    "js-cookie": "3.0.5",
-    "jwt-decode": "4.0.0",
+    "jotai": "^2.18.1",
+    "jotai-optics": "^0.4.0",
+    "js-cookie": "^3.0.5",
+    "jwt-decode": "^4.0.0",
     "katex": "0.16.40",
-    "lowlight": "3.3.0",
-    "mantine-form-zod-resolver": "1.3.0",
-    "mermaid": "11.15.0",
-    "mitt": "3.0.1",
+    "lowlight": "^3.3.0",
+    "mantine-form-zod-resolver": "^1.3.0",
+    "mermaid": "^11.13.0",
+    "mitt": "^3.0.1",
     "posthog-js": "1.372.2",
-    "react": "18.3.1",
+    "react": "^18.3.1",
+    "react-arborist": "3.4.0",
     "react-clear-modal": "^2.0.18",
     "react-dom": "^18.3.1",
-    "react-drawio": "1.0.7",
-    "react-error-boundary": "6.1.1",
-    "react-helmet-async": "3.0.0",
+    "react-drawio": "^1.0.7",
+    "react-error-boundary": "^6.1.1",
+    "react-helmet-async": "^3.0.0",
     "react-i18next": "16.5.8",
-    "react-router-dom": "7.13.1",
-    "semver": "7.7.4",
-    "socket.io-client": "4.8.3",
-    "zod": "4.3.6"
+    "react-router-dom": "^7.13.1",
+    "semver": "^7.7.4",
+    "socket.io-client": "^4.8.3",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@eslint/js": "9.28.0",
-    "@tanstack/eslint-plugin-query": "5.94.4",
-    "@testing-library/jest-dom": "6.6.0",
-    "@testing-library/react": "16.1.0",
-    "@types/blueimp-load-image": "5.16.6",
-    "@types/file-saver": "2.0.7",
-    "@types/js-cookie": "3.0.6",
-    "@types/katex": "0.16.8",
+    "@eslint/js": "^9.28.0",
+    "@tanstack/eslint-plugin-query": "^5.94.4",
+    "@types/blueimp-load-image": "^5.16.6",
+    "@types/file-saver": "^2.0.7",
+    "@types/js-cookie": "^3.0.6",
+    "@types/katex": "^0.16.8",
     "@types/node": "22.19.1",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "6.0.1",
-    "eslint": "9.28.0",
-    "eslint-plugin-react": "7.37.5",
-    "eslint-plugin-react-hooks": "7.0.1",
-    "eslint-plugin-react-refresh": "0.5.2",
-    "globals": "15.13.0",
-    "jsdom": "25.0.0",
-    "optics-ts": "2.4.1",
-    "postcss": "8.5.14",
-    "postcss-preset-mantine": "1.18.0",
-    "postcss-simple-vars": "7.0.1",
-    "prettier": "3.8.1",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.57.1",
-    "vite": "8.0.5",
-    "vitest": "4.1.6"
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.28.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^15.13.0",
+    "optics-ts": "^2.4.1",
+    "postcss": "^8.5.12",
+    "postcss-preset-mantine": "^1.18.0",
+    "postcss-simple-vars": "^7.0.1",
+    "prettier": "^3.8.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.57.1",
+    "vite": "8.0.5"
   }
 }

apps/client/public/locales/en-US/translation.json

@@ -286,19 +286,6 @@
   "Add row above": "Add row above",
   "Add row below": "Add row below",
   "Delete table": "Delete table",
-  "Add column left": "Add column left",
-  "Add column right": "Add column right",
-  "Clear cell": "Clear cell",
-  "Clear cells": "Clear cells",
-  "Toggle header cell": "Toggle header cell",
-  "Toggle header column": "Toggle header column",
-  "Toggle header row": "Toggle header row",
-  "Move column left": "Move column left",
-  "Move column right": "Move column right",
-  "Move row down": "Move row down",
-  "Move row up": "Move row up",
-  "Sort A → Z": "Sort A → Z",
-  "Sort Z → A": "Sort Z → A",
   "Info": "Info",
   "Note": "Note",
   "Success": "Success",
@@ -1010,8 +997,5 @@
   "No pages with this label": "No pages with this label",
   "Pages tagged with this label will appear here.": "Pages tagged with this label will appear here.",
   "No pages match your search.": "No pages match your search.",
-  "Updated {{date}}": "Updated {{date}}",
-  "Cell actions": "Cell actions",
-  "Column actions": "Column actions",
-  "Row actions": "Row actions"
+  "Updated {{date}}": "Updated {{date}}"
 }

apps/client/src/components/ui/emoji-picker.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useState } from "react";
+import React, { ReactNode, useState } from "react";
 import {
   ActionIcon,
   Popover,
@@ -7,24 +7,9 @@ import {
 } from "@mantine/core";
 import { useClickOutside, useDisclosure, useWindowEvent } from "@mantine/hooks";
 import { Suspense } from "react";
+const Picker = React.lazy(() => import("@emoji-mart/react"));
 import { useTranslation } from "react-i18next";
 
-// Load the picker module AND the emoji data in parallel inside the lazy
-// resolution, then bind the data into the component. React.lazy only finishes
-// suspending once both are in memory, so the Suspense boundary hides the
-// Remove button until the Picker can render with real content.
-const Picker = React.lazy(async () => {
-  const [pickerModule, dataModule] = await Promise.all([
-    import("@slidoapp/emoji-mart-react"),
-    import("@slidoapp/emoji-mart-data"),
-  ]);
-  const PickerComp = pickerModule.default;
-  const data = dataModule.default;
-  return {
-    default: (props: any) => <PickerComp {...props} data={data} />,
-  };
-});
-
 export interface EmojiPickerInterface {
   onEmojiSelect: (emoji: any) => void;
   icon: ReactNode;
@@ -34,7 +19,6 @@ export interface EmojiPickerInterface {
     size?: string;
     variant?: string;
     c?: string;
-    tabIndex?: number;
   };
 }
 
@@ -66,38 +50,6 @@ function EmojiPicker({
     }
   });
 
-  // emoji-mart's built-in autoFocus calls .focus() without preventScroll, which
-  // makes the browser scroll every scrollable ancestor of the search input to
-  // bring it on screen — including the page editor's scroll container, so the
-  // page jumps to the top whenever the picker is opened from a scrolled-down
-  // position. The search input lives inside the <em-emoji-picker> custom
-  // element's shadow root, so we poll for it after the dropdown mounts and
-  // focus it ourselves with preventScroll.
-  useEffect(() => {
-    if (!opened || !dropdown) return;
-    let cancelled = false;
-    let rafId = 0;
-    const tryFocus = (attempts: number) => {
-      if (cancelled) return;
-      const pickerEl = dropdown.querySelector("em-emoji-picker");
-      const input = pickerEl?.shadowRoot?.querySelector<HTMLInputElement>(
-        'input[type="search"]',
-      );
-      if (input) {
-        input.focus({ preventScroll: true });
-        return;
-      }
-      if (attempts < 60) {
-        rafId = requestAnimationFrame(() => tryFocus(attempts + 1));
-      }
-    };
-    rafId = requestAnimationFrame(() => tryFocus(0));
-    return () => {
-      cancelled = true;
-      cancelAnimationFrame(rafId);
-    };
-  }, [opened, dropdown]);
-
   const handleEmojiSelect = (emoji) => {
     onEmojiSelect(emoji);
     handlers.close();
@@ -122,7 +74,6 @@ function EmojiPicker({
           c={actionIconProps?.c || "gray"}
           variant={actionIconProps?.variant || "transparent"}
           size={actionIconProps?.size}
-          tabIndex={actionIconProps?.tabIndex}
           onClick={handlers.toggle}
           aria-label={t("Pick emoji")}
           aria-haspopup="dialog"
@@ -134,6 +85,7 @@ function EmojiPicker({
       <Suspense fallback={null}>
         <Popover.Dropdown bg="000" style={{ border: "none" }} ref={setDropdown}>
           <Picker
+            data={async () => (await import("@emoji-mart/data")).default}
             onEmojiSelect={handleEmojiSelect}
             perLine={8}
             skinTonePosition="search"

apps/client/src/features/editor/components/emoji-menu/utils.ts

@@ -21,7 +21,7 @@ let _emojiIndex: EmojiIndexEntry[] | null = null;
 
 export const buildEmojiIndex = async (): Promise<EmojiIndexEntry[]> => {
   if (_emojiIndex) return _emojiIndex;
-  const { default: data } = await import('@slidoapp/emoji-mart-data');
+  const { default: data } = await import("@emoji-mart/data");
   _emojiIndex = (Object.values((data as any).emojis) as any[])
     .filter((e) => e.id && e.name && e.skins?.[0]?.native)
     .map((e) => ({
@@ -74,7 +74,7 @@ let _cats: EmojiCategory[] | null = null;
 export const getEmojiCategories = async (): Promise<EmojiCategory[]> => {
   if (_cats) return _cats;
   const [{ default: data }, index] = await Promise.all([
-    import("@slidoapp/emoji-mart-data"),
+    import("@emoji-mart/data"),
     buildEmojiIndex(),
   ]);
   const byId = new Map(index.map((e) => [e.id, e]));

apps/client/src/features/editor/components/fixed-toolbar/fixed-toolbar.module.css

@@ -3,7 +3,7 @@
   top: calc(var(--app-shell-header-offset, 0rem) + 45px);
   inset-inline-start: var(--app-shell-navbar-offset, 0rem);
   inset-inline-end: var(--app-shell-aside-offset, 0rem);
-  z-index: 99;
+  z-index: 50;
   display: flex;
   align-items: center;
   background: var(--mantine-color-body);

apps/client/src/features/editor/components/fixed-toolbar/fixed-toolbar.tsx

@@ -28,7 +28,6 @@ export const FixedToolbar: FC = () => {
     <>
       <div
         className={classes.fixedToolbar}
-        data-fixed-toolbar="true"
         role="toolbar"
         aria-label="Editor toolbar"
         onMouseDown={(e) => e.preventDefault()}

apps/client/src/features/editor/components/mention/mention-list.tsx

@@ -3,6 +3,7 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -35,7 +36,7 @@ import {
   usePageQuery,
 } from "@/features/page/queries/page-query";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
-import { treeModel } from "@/features/page/tree/model/tree-model";
+import { SimpleTree } from "react-arborist";
 import { SpaceTreeNode } from "@/features/page/tree/types";
 import { useTranslation } from "react-i18next";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
@@ -52,6 +53,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   const [renderItems, setRenderItems] = useState<MentionSuggestionItem[]>([]);
   const { t } = useTranslation();
   const [data, setData] = useAtom(treeDataAtom);
+  const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
   const createPageMutation = useCreatePageMutation();
   const emit = useQueryEmit();
   const isInCommentContext = props.isInCommentContext ?? false;
@@ -218,20 +220,20 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     try {
       createdPage = await createPageMutation.mutateAsync(payload);
       const parentId = page.id || null;
-      const newNode: SpaceTreeNode = {
+      const data = {
         id: createdPage.id,
         slugId: createdPage.slugId,
         name: createdPage.title,
         position: createdPage.position,
         spaceId: createdPage.spaceId,
         parentPageId: createdPage.parentPageId,
-        hasChildren: false,
         children: [],
-      };
+      } as any;
 
-      const lastIndex = data.length;
+      const lastIndex = tree.data.length;
 
-      setData(treeModel.insert(data, parentId, newNode, lastIndex));
+      tree.create({ parentId, index: lastIndex, data });
+      setData(tree.data);
 
       props.command({
         id: uuid7(),
@@ -249,7 +251,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
           payload: {
             parentId,
             index: lastIndex,
-            data: newNode,
+            data,
           },
         });
       }, 50);

apps/client/src/features/editor/components/table/handle/cell-chevron.tsx

@@ -1,126 +0,0 @@
-import React, { useCallback, useEffect } from "react";
-import type { Editor } from "@tiptap/react";
-import { useEditorState } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { TextSelection } from "@tiptap/pm/state";
-import { columnResizingPluginKey } from "@tiptap/pm/tables";
-import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
-import { Menu, UnstyledButton } from "@mantine/core";
-import { IconChevronDown } from "@tabler/icons-react";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { isCellSelection } from "@docmost/editor-ext";
-import { CellChevronMenu } from "./menus/cell-chevron-menu";
-import classes from "./handle.module.css";
-
-interface CellChevronProps {
-  editor: Editor;
-  cellPos: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export const CellChevron = React.memo(function CellChevron({
-  editor,
-  cellPos,
-  tableNode,
-  tablePos,
-}: CellChevronProps) {
-  const { t } = useTranslation();
-  const cellDom = editor.view.nodeDOM(cellPos) as HTMLElement | null;
-
-  const { refs, floatingStyles, middlewareData } = useFloating({
-    placement: "top-end",
-    // crossAxis pulls the chevron INWARD from the cell's right edge. We need
-    // enough inset that we don't overlap PM-tables' column-resize hot zone
-    // (~5px wide around the column boundary). Without this, hovering near the
-    // column edge picks up the chevron's `cursor: pointer` instead of
-    // `col-resize`, and a drag near the edge clicks the chevron.
-    middleware: [offset({ mainAxis: -22, crossAxis: -10 }), hide()],
-    whileElementsMounted: autoUpdate,
-    strategy: "absolute",
-  });
-  const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
-
-  useEffect(() => {
-    refs.setReference(cellDom);
-  }, [cellDom, refs]);
-
-  // Hide the chevron while the user is resizing a column. PM-tables sets
-  // `activeHandle > -1` whenever the mouse is near a column boundary OR
-  // actively dragging it. Either way we don't want the chevron in the way.
-  const isResizingColumn = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) return false;
-      const state = columnResizingPluginKey.getState(ctx.editor.state) as
-        | { activeHandle: number }
-        | undefined;
-      return !!state && state.activeHandle > -1;
-    },
-  });
-
-  const onOpen = useCallback(() => {
-    const current = editor.state.selection;
-
-    // Preserve an existing multi-cell CellSelection that already covers
-    // this cell so merge etc. operate on the user's whole range.
-    let preserveExisting = false;
-    if (isCellSelection(current)) {
-      current.forEachCell((_node, pos) => {
-        if (pos === cellPos) preserveExisting = true;
-      });
-    }
-
-    if (!preserveExisting) {
-      // Drop a collapsed cursor inside the cell rather than a single-cell
-      // CellSelection — PM-tables paints the latter as a text-range
-      // highlight on the cell content.
-      try {
-        const $inside = editor.state.doc.resolve(cellPos + 1);
-        const sel = TextSelection.near($inside, 1);
-        editor.view.dispatch(editor.state.tr.setSelection(sel));
-      } catch {}
-    }
-    editor.commands.freezeHandles();
-  }, [editor, cellPos]);
-
-  const onClose = useCallback(() => {
-    editor.commands.unfreezeHandles();
-  }, [editor]);
-
-  if (!cellDom) return null;
-  if (isResizingColumn) return null;
-
-  return (
-    <Menu
-      position="bottom-end"
-      onOpen={onOpen}
-      onClose={onClose}
-      withinPortal
-      shadow="md"
-    >
-      <Menu.Target>
-        <UnstyledButton
-          ref={refs.setFloating}
-          style={{
-            ...floatingStyles,
-            ...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
-          }}
-          className={clsx(classes.cellChevron)}
-          aria-label={t("Cell actions")}
-        >
-          <IconChevronDown size={14} />
-        </UnstyledButton>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <CellChevronMenu
-          editor={editor}
-          cellPos={cellPos}
-          tableNode={tableNode}
-          tablePos={tablePos}
-        />
-      </Menu.Dropdown>
-    </Menu>
-  );
-});

apps/client/src/features/editor/components/table/handle/column-handle.tsx

@@ -1,127 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
-import { Menu } from "@mantine/core";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { useTableHandleDrag } from "./hooks/use-table-handle-drag";
-import { useColumnRowMenuLifecycle } from "./hooks/use-column-row-menu-lifecycle";
-import { ColumnHandleMenu } from "./menus/column-handle-menu";
-import classes from "./handle.module.css";
-
-interface ColumnHandleProps {
-  editor: Editor;
-  index: number;
-  anchorPos: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export const ColumnHandle = React.memo(function ColumnHandle({
-  editor,
-  index,
-  anchorPos,
-  tableNode,
-  tablePos,
-}: ColumnHandleProps) {
-  const { t } = useTranslation();
-  // Hold the cell DOM in a ref-backed state so we never unmount the handle
-  // mid-drag. A remote edit can transiently flip `nodeDOM(anchorPos)` to null
-  // (the plugin re-emits `hoveringCell` with the mapped pos a tick later);
-  // unmounting the source element here would make pragmatic-dnd silently
-  // abort the active drag.
-  const lookupCellDom = editor.view.nodeDOM(anchorPos) as HTMLElement | null;
-  const [cellDom, setCellDom] = useState<HTMLElement | null>(lookupCellDom);
-  const lastCellDomRef = useRef<HTMLElement | null>(lookupCellDom);
-  useEffect(() => {
-    if (lookupCellDom && lookupCellDom !== lastCellDomRef.current) {
-      lastCellDomRef.current = lookupCellDom;
-      setCellDom(lookupCellDom);
-    }
-  }, [lookupCellDom]);
-
-  const [handleEl, setHandleEl] = useState<HTMLDivElement | null>(null);
-
-  const { refs, floatingStyles, middlewareData } = useFloating({
-    placement: "top",
-    middleware: [offset(-4), hide()],
-    whileElementsMounted: autoUpdate,
-  });
-  const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
-
-  useEffect(() => {
-    refs.setReference(cellDom);
-  }, [cellDom, refs]);
-
-  // `cellDom` is inside the table, so `closest('.tableWrapper')` finds the
-  // wrapper for this drag's auto-scroll. The handle itself lives in a
-  // floating layer outside the editor DOM, so we can't walk up from it.
-  const wrapper = cellDom?.closest<HTMLElement>(".tableWrapper") ?? null;
-
-  const [menuOpened, setMenuOpened] = useState(false);
-  const closeMenu = useCallback(() => setMenuOpened(false), []);
-  useTableHandleDrag(editor, "col", handleEl, wrapper, closeMenu);
-
-  const { onOpen, onClose } = useColumnRowMenuLifecycle({
-    editor,
-    orientation: "col",
-    index,
-    tableNode,
-    tablePos,
-  });
-
-  if (!cellDom) return null;
-
-  return (
-    <Menu
-      opened={menuOpened}
-      onChange={setMenuOpened}
-      position="bottom-start"
-      onOpen={onOpen}
-      onClose={onClose}
-      withinPortal
-      shadow="md"
-    >
-      <Menu.Target>
-        <div
-          ref={(node) => {
-            refs.setFloating(node);
-            setHandleEl(node);
-          }}
-          style={{
-            ...floatingStyles,
-            ...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
-          }}
-          className={clsx(classes.handle, classes.columnHandle)}
-          role="button"
-          tabIndex={0}
-          aria-label={t("Column actions")}
-        >
-          <span style={{ pointerEvents: "none", display: "inline-flex" }}>
-            <GripIcon />
-          </span>
-        </div>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <ColumnHandleMenu
-          editor={editor}
-          index={index}
-          tableNode={tableNode}
-          tablePos={tablePos}
-        />
-      </Menu.Dropdown>
-    </Menu>
-  );
-});
-
-function GripIcon() {
-  return (
-    <svg viewBox="0 0 10 10" width="14" height="14" aria-hidden>
-      <path
-        fill="currentColor"
-        d="M3,2 A1,1 0 1 1 3,0 A1,1 0 0 1 3,2 Z M3,6 A1,1 0 1 1 3,4 A1,1 0 0 1 3,6 Z M3,10 A1,1 0 1 1 3,8 A1,1 0 0 1 3,10 Z M7,2 A1,1 0 1 1 7,0 A1,1 0 0 1 7,2 Z M7,6 A1,1 0 1 1 7,4 A1,1 0 0 1 7,6 Z M7,10 A1,1 0 1 1 7,8 A1,1 0 0 1 7,10 Z"
-      />
-    </svg>
-  );
-}

apps/client/src/features/editor/components/table/handle/handle.module.css

@@ -1,108 +0,0 @@
-.handle {
-  position: absolute;
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  color: rgba(55, 53, 47, 0.45);
-  background: var(--mantine-color-body);
-  border: 1px solid rgba(55, 53, 47, 0.12);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-  cursor: grab;
-  padding: 0;
-  transition: background-color 120ms ease, color 120ms ease;
-
-  @mixin dark {
-    color: rgba(255, 255, 255, 0.55);
-    background: var(--mantine-color-dark-7);
-    border-color: rgba(255, 255, 255, 0.12);
-  }
-}
-
-.handle:hover {
-  background: light-dark(
-    var(--mantine-color-gray-1),
-    var(--mantine-color-dark-5)
-  );
-  color: light-dark(
-    var(--mantine-color-gray-7),
-    var(--mantine-color-dark-0)
-  );
-}
-
-.handle:active {
-  cursor: grabbing;
-}
-
-.columnHandle {
-  width: 28px;
-  height: 16px;
-}
-
-.columnHandle svg {
-  transform: rotate(90deg);
-}
-
-.rowHandle {
-  width: 16px;
-  height: 28px;
-}
-
-@media (max-width: 600px) {
-  .handle {
-    display: none;
-  }
-}
-
-.cellChevron {
-  position: absolute;
-  z-index: 50;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: light-dark(
-    var(--mantine-color-gray-7),
-    var(--mantine-color-dark-1)
-  );
-  background: light-dark(
-    var(--mantine-color-gray-1),
-    var(--mantine-color-dark-5)
-  );
-  border: 1px solid rgba(55, 53, 47, 0.12);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-  cursor: pointer;
-  padding: 0;
-  transition: background-color 120ms ease, color 120ms ease;
-
-  @mixin dark {
-    border-color: rgba(255, 255, 255, 0.12);
-  }
-}
-
-.cellChevron:hover {
-  background: light-dark(
-    var(--mantine-color-gray-2),
-    var(--mantine-color-dark-4)
-  );
-  color: light-dark(
-    var(--mantine-color-gray-8),
-    var(--mantine-color-dark-0)
-  );
-}
-
-@media (max-width: 600px) {
-  .cellChevron {
-    display: none;
-  }
-}
-
-@media print {
-  .handle,
-  .cellChevron {
-    display: none !important;
-  }
-}

apps/client/src/features/editor/components/table/handle/hooks/use-column-row-menu-lifecycle.ts

@@ -1,40 +0,0 @@
-import { useCallback } from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { buildRowOrColumnSelection, Orientation } from "../lib/select-row-column";
-
-interface Args {
-  editor: Editor;
-  orientation: Orientation;
-  index: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export function useColumnRowMenuLifecycle({
-  editor,
-  orientation,
-  index,
-  tableNode,
-  tablePos,
-}: Args) {
-  const onOpen = useCallback(() => {
-    const selection = buildRowOrColumnSelection(
-      editor.state,
-      tableNode,
-      tablePos,
-      orientation,
-      index,
-    );
-    const tr = editor.state.tr;
-    if (selection) tr.setSelection(selection);
-    editor.view.dispatch(tr);
-    editor.commands.freezeHandles();
-  }, [editor, orientation, index, tableNode, tablePos]);
-
-  const onClose = useCallback(() => {
-    editor.commands.unfreezeHandles();
-  }, [editor]);
-
-  return { onOpen, onClose };
-}

apps/client/src/features/editor/components/table/handle/hooks/use-table-clear.ts

@@ -1,54 +0,0 @@
-import { useCallback } from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { TableMap } from "@tiptap/pm/tables";
-
-type Scope =
-  | { kind: "col"; index: number }
-  | { kind: "row"; index: number }
-  | { kind: "cell"; cellPos: number };
-
-export function useTableClear(
-  editor: Editor,
-  tableNode: ProseMirrorNode,
-  tablePos: number,
-  scope: Scope,
-) {
-  return useCallback(() => {
-    const tr = editor.state.tr;
-    const tableStart = tablePos + 1;
-    const map = TableMap.get(tableNode);
-    const paragraph = editor.schema.nodes.paragraph;
-    if (!paragraph) return;
-
-    const cellOffsets: number[] = [];
-
-    if (scope.kind === "col") {
-      for (let row = 0; row < map.height; row++) {
-        cellOffsets.push(map.map[row * map.width + scope.index]);
-      }
-    } else if (scope.kind === "row") {
-      for (let col = 0; col < map.width; col++) {
-        cellOffsets.push(map.map[scope.index * map.width + col]);
-      }
-    }
-
-    const targets =
-      scope.kind === "cell"
-        ? [scope.cellPos]
-        : Array.from(new Set(cellOffsets)).map((o) => tableStart + o);
-
-    // Process in reverse position order so earlier replacements don't shift later ones.
-    targets.sort((a, b) => b - a);
-
-    for (const cellPos of targets) {
-      const node = tr.doc.nodeAt(cellPos);
-      if (!node) continue;
-      const start = cellPos + 1;
-      const end = cellPos + node.nodeSize - 1;
-      tr.replaceWith(start, end, paragraph.create());
-    }
-
-    if (tr.docChanged) editor.view.dispatch(tr);
-  }, [editor, tableNode, tablePos, scope]);
-}

apps/client/src/features/editor/components/table/handle/hooks/use-table-handle-drag.ts

@@ -1,79 +0,0 @@
-import { useEffect } from "react";
-import type { Editor } from "@tiptap/react";
-import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { disableNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview";
-import {
-  autoScrollForElements,
-  autoScrollWindowForElements,
-} from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
-import { getTableHandlePluginSpec } from "@docmost/editor-ext";
-
-// Uses pragmatic-drag-and-drop instead of native HTML5 DnD because the native
-// dragstart→dragover→drop lifecycle was being silently cancelled
-export function useTableHandleDrag(
-  editor: Editor,
-  orientation: "col" | "row",
-  element: HTMLElement | null,
-  wrapper: HTMLElement | null,
-  onDragStart?: () => void,
-) {
-  useEffect(() => {
-    if (!element) return;
-
-    return combine(
-      draggable({
-        element,
-        getInitialData: () => ({ type: `table-${orientation}` }),
-        onGenerateDragPreview: ({ nativeSetDragImage }) => {
-          // We render our own floating preview via PreviewController, so hide
-          // the native drag image entirely.
-          disableNativeDragPreview({ nativeSetDragImage });
-        },
-        onDragStart: ({ location }) => {
-          // The menu (if open from a prior click on the handle) won't dismiss
-          // on its own — pragmatic-dnd swallows the events Mantine listens for.
-          onDragStart?.();
-          const spec = getTableHandlePluginSpec(editor);
-          if (!spec) return;
-          const { clientX, clientY } = location.initial.input;
-          spec.startDragFromHandle(orientation, clientX, clientY);
-        },
-        onDrag: ({ location }) => {
-          const spec = getTableHandlePluginSpec(editor);
-          if (!spec) return;
-          const { clientX, clientY } = location.current.input;
-          spec.updateDragPosition(clientX, clientY);
-        },
-        onDrop: ({ location }) => {
-          const spec = getTableHandlePluginSpec(editor);
-          if (!spec) return;
-          const { clientX, clientY } = location.current.input;
-          // Make sure the final position is recorded before committing the drop.
-          spec.updateDragPosition(clientX, clientY);
-          spec.commitDrop();
-          spec.endDrag();
-        },
-      }),
-      // Wrapper owns horizontal auto-scroll (it has `overflow-x: auto`);
-      // window owns vertical. Locking each axis prevents the window's
-      // horizontal auto-scroll from running when the cursor approaches
-      // the viewport edge — without the cap, the preview's `left` follows
-      // the cursor past the viewport, the page widens to contain it, the
-      // plugin scrolls the now-wider page further, and the loop never
-      // ends.
-      // Only the column handle registers wrapper auto-scroll (rows can't
-      // scroll horizontally) — registering twice on the same wrapper
-      // triggers a dev-mode warning from pragmatic-dnd-auto-scroll.
-      orientation === "col" &&
-      wrapper &&
-      !wrapper.classList.contains("tableWrapperNoOverflow")
-        ? autoScrollForElements({
-            element: wrapper,
-            getAllowedAxis: () => "horizontal",
-          })
-        : () => {},
-      autoScrollWindowForElements({ getAllowedAxis: () => "vertical" }),
-    );
-  }, [editor, orientation, element, wrapper, onDragStart]);
-}

apps/client/src/features/editor/components/table/handle/hooks/use-table-handle-state.ts

@@ -1,23 +0,0 @@
-import type { Editor } from "@tiptap/react";
-import { useEditorState } from "@tiptap/react";
-import { TableDndKey, TableHandleState } from "@docmost/editor-ext";
-
-const FALLBACK: TableHandleState = {
-  hoveringCell: null,
-  tableNode: null,
-  tablePos: null,
-  dragging: null,
-  frozen: false,
-};
-
-export function useTableHandleState(editor: Editor | null): TableHandleState {
-  const state = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) return null;
-      return TableDndKey.getState(ctx.editor.state) ?? null;
-    },
-  });
-
-  return state ?? FALLBACK;
-}

apps/client/src/features/editor/components/table/handle/hooks/use-table-move-row-column.ts

@@ -1,50 +0,0 @@
-import { useCallback, useMemo } from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { TableMap } from "@tiptap/pm/tables";
-import { moveColumn, moveRow } from "@docmost/editor-ext";
-
-export type MoveDirection = "left" | "right" | "up" | "down";
-
-export function useTableMoveRowColumn(
-  editor: Editor,
-  orientation: "col" | "row",
-  index: number,
-  direction: MoveDirection,
-  tableNode: ProseMirrorNode,
-  tablePos: number,
-) {
-  const target =
-    direction === "left" || direction === "up" ? index - 1 : index + 1;
-
-  const maxIndex = useMemo(() => {
-    const map = TableMap.get(tableNode);
-    return orientation === "col" ? map.width - 1 : map.height - 1;
-  }, [tableNode, orientation]);
-
-  const canMove = target >= 0 && target <= maxIndex;
-
-  const handleMove = useCallback(() => {
-    if (!canMove) return;
-    const tr = editor.state.tr;
-    const moved =
-      orientation === "col"
-        ? moveColumn({
-            tr,
-            originIndex: index,
-            targetIndex: target,
-            select: true,
-            pos: tablePos + 1,
-          })
-        : moveRow({
-            tr,
-            originIndex: index,
-            targetIndex: target,
-            select: true,
-            pos: tablePos + 1,
-          });
-    if (moved) editor.view.dispatch(tr);
-  }, [editor, orientation, index, target, tablePos, canMove]);
-
-  return { canMove, handleMove };
-}

apps/client/src/features/editor/components/table/handle/hooks/use-table-sort.ts

@@ -1,100 +0,0 @@
-import { useCallback, useMemo } from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import {
-  convertArrayOfRowsToTableNode,
-  convertTableNodeToArrayOfRows,
-  transpose,
-} from "@docmost/editor-ext";
-import {
-  getCellSortText,
-  isCellEmpty,
-  isHeaderCell,
-  type SortDirection,
-  type SortableItem,
-  sortItems,
-  weaveItems,
-} from "../lib/sort-cells";
-
-interface Args {
-  editor: Editor;
-  orientation: "col" | "row";
-  index: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-  direction: SortDirection;
-}
-
-function tableHasMergedCells(tableNode: ProseMirrorNode): boolean {
-  for (let r = 0; r < tableNode.childCount; r++) {
-    const row = tableNode.child(r);
-    for (let c = 0; c < row.childCount; c++) {
-      const { colspan = 1, rowspan = 1 } = row.child(c).attrs;
-      if (colspan > 1 || rowspan > 1) return true;
-    }
-  }
-  return false;
-}
-
-function isAllHeader(cells: (ProseMirrorNode | null)[]): boolean {
-  return cells.every((c) => c !== null && isHeaderCell(c));
-}
-
-export function useTableSort({
-  editor,
-  orientation,
-  index,
-  tableNode,
-  tablePos,
-  direction,
-}: Args) {
-  const canSort = useMemo(() => {
-    if (tableHasMergedCells(tableNode)) return false;
-
-    const rows = convertTableNodeToArrayOfRows(tableNode);
-    const axes = orientation === "col" ? rows : transpose(rows);
-    if (axes.length < 2) return false;
-
-    return axes.some((cells) => {
-      if (isAllHeader(cells)) return false;
-      const sortCell = cells[index];
-      return !!sortCell && !isCellEmpty(sortCell);
-    });
-  }, [tableNode, orientation, index]);
-
-  const handleSort = useCallback(() => {
-    if (!canSort) return;
-
-    const rows = convertTableNodeToArrayOfRows(tableNode);
-    const axes = orientation === "col" ? rows : transpose(rows);
-
-    const items: SortableItem<(ProseMirrorNode | null)[]>[] = axes.map(
-      (cells, originalOrder) => {
-        const sortCell = cells[index];
-        return {
-          payload: cells,
-          text: sortCell ? getCellSortText(sortCell) : "",
-          isHeader: isAllHeader(cells),
-          isEmpty: !sortCell || isCellEmpty(sortCell),
-          originalOrder,
-        };
-      },
-    );
-
-    const dataItems = items.filter((it) => !it.isHeader);
-    const sortedData = sortItems(dataItems, direction);
-    const woven = weaveItems(items, sortedData);
-
-    const newAxes = woven.map((it) => it.payload);
-    const newRows = orientation === "col" ? newAxes : transpose(newAxes);
-
-    const newTable = convertArrayOfRowsToTableNode(tableNode, newRows);
-
-    const tr = editor.state.tr;
-    tr.replaceWith(tablePos, tablePos + tableNode.nodeSize, newTable);
-
-    if (tr.docChanged) editor.view.dispatch(tr);
-  }, [editor, tableNode, tablePos, orientation, index, direction, canSort]);
-
-  return { canSort, handleSort };
-}

apps/client/src/features/editor/components/table/handle/lib/select-row-column.ts

@@ -1,34 +0,0 @@
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import type { EditorState } from "@tiptap/pm/state";
-import { CellSelection, TableMap } from "@tiptap/pm/tables";
-
-export type Orientation = "col" | "row";
-
-export function buildRowOrColumnSelection(
-  state: EditorState,
-  tableNode: ProseMirrorNode,
-  tablePos: number,
-  orientation: Orientation,
-  index: number,
-): CellSelection | null {
-  const map = TableMap.get(tableNode);
-  const tableStart = tablePos + 1;
-
-  if (orientation === "col") {
-    if (index < 0 || index >= map.width) return null;
-    const firstCellPos = tableStart + map.map[index];
-    const lastCellPos =
-      tableStart + map.map[(map.height - 1) * map.width + index];
-    const $first = state.doc.resolve(firstCellPos);
-    const $last = state.doc.resolve(lastCellPos);
-    return CellSelection.colSelection($first, $last);
-  }
-
-  if (index < 0 || index >= map.height) return null;
-  const firstCellPos = tableStart + map.map[index * map.width];
-  const lastCellPos =
-    tableStart + map.map[index * map.width + (map.width - 1)];
-  const $first = state.doc.resolve(firstCellPos);
-  const $last = state.doc.resolve(lastCellPos);
-  return CellSelection.rowSelection($first, $last);
-}

apps/client/src/features/editor/components/table/handle/lib/sort-cells.ts

@@ -1,57 +0,0 @@
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-
-export type SortDirection = "asc" | "desc";
-
-export interface SortableItem<T> {
-  payload: T;
-  text: string;
-  isHeader: boolean;
-  isEmpty: boolean;
-  originalOrder: number;
-}
-
-const HEADER_TYPE_NAMES = new Set(["tableHeader", "table_header"]);
-
-export function isHeaderCell(node: ProseMirrorNode): boolean {
-  if (HEADER_TYPE_NAMES.has(node.type.name)) return true;
-  return node.attrs?.header === true;
-}
-
-export function getCellSortText(node: ProseMirrorNode): string {
-  let text = "";
-  node.descendants((child) => {
-    if (child.isText) text += child.text ?? "";
-    return true;
-  });
-  return text.trim().toLowerCase();
-}
-
-export function isCellEmpty(node: ProseMirrorNode): boolean {
-  return getCellSortText(node) === "";
-}
-
-export const collator = new Intl.Collator(undefined, {
-  sensitivity: "base",
-  numeric: true,
-});
-
-export function sortItems<T>(
-  data: SortableItem<T>[],
-  direction: SortDirection,
-): SortableItem<T>[] {
-  return [...data].sort((a, b) => {
-    if (a.isEmpty && !b.isEmpty) return 1;
-    if (!a.isEmpty && b.isEmpty) return -1;
-    if (a.isEmpty && b.isEmpty) return a.originalOrder - b.originalOrder;
-    const cmp = collator.compare(a.text, b.text);
-    return direction === "asc" ? cmp : -cmp;
-  });
-}
-
-export function weaveItems<T>(
-  all: SortableItem<T>[],
-  sortedData: SortableItem<T>[],
-): SortableItem<T>[] {
-  const dataQueue = [...sortedData];
-  return all.map((item) => (item.isHeader ? item : dataQueue.shift()!));
-}

apps/client/src/features/editor/components/table/handle/menus/alignment-submenu.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-import type { Editor } from "@tiptap/react";
-import { Menu } from "@mantine/core";
-import {
-  IconAlignCenter,
-  IconAlignLeft,
-  IconAlignRight,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-
-interface AlignmentSubmenuProps {
-  editor: Editor;
-}
-
-export const AlignmentSubmenu = React.memo(function AlignmentSubmenu({
-  editor,
-}: AlignmentSubmenuProps) {
-  const { t } = useTranslation();
-
-  return (
-    <Menu.Sub position="right-start">
-      <Menu.Sub.Target>
-        <Menu.Sub.Item leftSection={<IconAlignLeft size={16} />}>
-          {t("Text alignment")}
-        </Menu.Sub.Item>
-      </Menu.Sub.Target>
-      <Menu.Sub.Dropdown>
-        <Menu.Item
-          leftSection={<IconAlignLeft size={16} />}
-          onClick={() => editor.chain().focus().setTextAlign("left").run()}
-        >
-          {t("Align left")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconAlignCenter size={16} />}
-          onClick={() => editor.chain().focus().setTextAlign("center").run()}
-        >
-          {t("Align center")}
-        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconAlignRight size={16} />}
-          onClick={() => editor.chain().focus().setTextAlign("right").run()}
-        >
-          {t("Align right")}
-        </Menu.Item>
-      </Menu.Sub.Dropdown>
-    </Menu.Sub>
-  );
-});

apps/client/src/features/editor/components/table/handle/menus/cell-chevron-menu.tsx

@@ -1,154 +0,0 @@
-import React from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { ColorSwatch, Menu } from "@mantine/core";
-import {
-  IconBoxMargin,
-  IconColumnInsertRight,
-  IconColumnRemove,
-  IconEraser,
-  IconPalette,
-  IconRowInsertBottom,
-  IconRowRemove,
-  IconSquareToggle,
-  IconTableRow,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { useTableClear } from "../hooks/use-table-clear";
-import { TABLE_COLORS } from "../../table-background-color";
-import { AlignmentSubmenu } from "./alignment-submenu";
-
-interface CellChevronMenuProps {
-  editor: Editor;
-  cellPos: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export const CellChevronMenu = React.memo(function CellChevronMenu({
-  editor,
-  cellPos,
-  tableNode,
-  tablePos,
-}: CellChevronMenuProps) {
-  const { t } = useTranslation();
-
-  const clearCell = useTableClear(editor, tableNode, tablePos, {
-    kind: "cell",
-    cellPos,
-  });
-
-  const setBackground = (color: string, name: string) => {
-    editor
-      .chain()
-      .focus()
-      .updateAttributes("tableCell", {
-        backgroundColor: color || null,
-        backgroundColorName: color ? name : null,
-      })
-      .updateAttributes("tableHeader", {
-        backgroundColor: color || null,
-        backgroundColorName: color ? name : null,
-      })
-      .run();
-  };
-
-  return (
-    <>
-      <Menu.Sub position="right-start">
-        <Menu.Sub.Target>
-          <Menu.Sub.Item leftSection={<IconPalette size={16} />}>
-            {t("Background color")}
-          </Menu.Sub.Item>
-        </Menu.Sub.Target>
-        <Menu.Sub.Dropdown>
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "repeat(4, 1fr)",
-              gap: 8,
-              padding: 8,
-            }}
-          >
-            {TABLE_COLORS.map((c) => (
-              <button
-                key={c.name}
-                type="button"
-                onClick={() => setBackground(c.color, c.name)}
-                aria-label={t(c.name)}
-                style={{
-                  border: "none",
-                  background: "transparent",
-                  padding: 0,
-                  cursor: "pointer",
-                }}
-              >
-                <ColorSwatch
-                  color={c.color || "#ffffff"}
-                  size={22}
-                  style={{
-                    border: c.color === "" ? "1px solid #e5e7eb" : undefined,
-                  }}
-                />
-              </button>
-            ))}
-          </div>
-        </Menu.Sub.Dropdown>
-      </Menu.Sub>
-
-      <AlignmentSubmenu editor={editor} />
-
-      <Menu.Item
-        leftSection={<IconBoxMargin size={16} />}
-        onClick={() => editor.chain().focus().mergeCells().run()}
-        disabled={!editor.can().mergeCells()}
-      >
-        {t("Merge cells")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconSquareToggle size={16} />}
-        onClick={() => editor.chain().focus().splitCell().run()}
-        disabled={!editor.can().splitCell()}
-      >
-        {t("Split cell")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconTableRow size={16} />}
-        onClick={() => editor.chain().focus().toggleHeaderCell().run()}
-      >
-        {t("Toggle header cell")}
-      </Menu.Item>
-
-      <Menu.Divider />
-
-      <Menu.Item
-        leftSection={<IconColumnInsertRight size={16} />}
-        onClick={() => editor.chain().focus().addColumnAfter().run()}
-      >
-        {t("Add column right")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconRowInsertBottom size={16} />}
-        onClick={() => editor.chain().focus().addRowAfter().run()}
-      >
-        {t("Add row below")}
-      </Menu.Item>
-
-      <Menu.Item leftSection={<IconEraser size={16} />} onClick={clearCell}>
-        {t("Clear cell")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconColumnRemove size={16} />}
-        onClick={() => editor.chain().focus().deleteColumn().run()}
-      >
-        {t("Delete column")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconRowRemove size={16} />}
-        onClick={() => editor.chain().focus().deleteRow().run()}
-      >
-        {t("Delete row")}
-      </Menu.Item>
-    </>
-  );
-});

apps/client/src/features/editor/components/table/handle/menus/column-handle-menu.tsx

@@ -1,177 +0,0 @@
-import React from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { ColorSwatch, Menu } from "@mantine/core";
-import { TABLE_COLORS } from "../../table-background-color";
-import {
-  IconArrowLeft,
-  IconArrowRight,
-  IconColumnInsertLeft,
-  IconColumnInsertRight,
-  IconColumnRemove,
-  IconEraser,
-  IconPalette,
-  IconSortAscendingLetters,
-  IconSortDescendingLetters,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { useTableMoveRowColumn } from "../hooks/use-table-move-row-column";
-import { useTableClear } from "../hooks/use-table-clear";
-import { useTableSort } from "../hooks/use-table-sort";
-import { AlignmentSubmenu } from "./alignment-submenu";
-
-interface ColumnHandleMenuProps {
-  editor: Editor;
-  index: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export const ColumnHandleMenu = React.memo(function ColumnHandleMenu({
-  editor,
-  index,
-  tableNode,
-  tablePos,
-}: ColumnHandleMenuProps) {
-  const { t } = useTranslation();
-
-  const moveLeft = useTableMoveRowColumn(editor, "col", index, "left", tableNode, tablePos);
-  const moveRight = useTableMoveRowColumn(editor, "col", index, "right", tableNode, tablePos);
-  const clearCol = useTableClear(editor, tableNode, tablePos, {
-    kind: "col",
-    index,
-  });
-
-  const setBackground = (color: string, name: string) => {
-    editor
-      .chain()
-      .focus()
-      .updateAttributes("tableCell", {
-        backgroundColor: color || null,
-        backgroundColorName: color ? name : null,
-      })
-      .updateAttributes("tableHeader", {
-        backgroundColor: color || null,
-        backgroundColorName: color ? name : null,
-      })
-      .run();
-  };
-
-  const sortAsc = useTableSort({
-    editor,
-    orientation: "col",
-    index,
-    tableNode,
-    tablePos,
-    direction: "asc",
-  });
-  const sortDesc = useTableSort({
-    editor,
-    orientation: "col",
-    index,
-    tableNode,
-    tablePos,
-    direction: "desc",
-  });
-
-  return (
-    <>
-      <Menu.Item
-        leftSection={<IconSortAscendingLetters size={16} />}
-        onClick={sortAsc.handleSort}
-        disabled={!sortAsc.canSort}
-      >
-        {t("Sort A → Z")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconSortDescendingLetters size={16} />}
-        onClick={sortDesc.handleSort}
-        disabled={!sortDesc.canSort}
-      >
-        {t("Sort Z → A")}
-      </Menu.Item>
-      <Menu.Divider />
-
-      <Menu.Sub position="right-start">
-        <Menu.Sub.Target>
-          <Menu.Sub.Item leftSection={<IconPalette size={16} />}>
-            {t("Background color")}
-          </Menu.Sub.Item>
-        </Menu.Sub.Target>
-        <Menu.Sub.Dropdown>
-          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, padding: 8 }}>
-            {TABLE_COLORS.map((c) => (
-              <button
-                key={c.name}
-                type="button"
-                onClick={() => setBackground(c.color, c.name)}
-                aria-label={t(c.name)}
-                style={{
-                  border: "none",
-                  background: "transparent",
-                  padding: 0,
-                  cursor: "pointer",
-                }}
-              >
-                <ColorSwatch
-                  color={c.color || "#ffffff"}
-                  size={22}
-                  style={{ border: c.color === "" ? "1px solid #e5e7eb" : undefined }}
-                />
-              </button>
-            ))}
-          </div>
-        </Menu.Sub.Dropdown>
-      </Menu.Sub>
-
-      <AlignmentSubmenu editor={editor} />
-
-      <Menu.Divider />
-
-      <Menu.Item
-        leftSection={<IconColumnInsertLeft size={16} />}
-        onClick={() => editor.chain().focus().addColumnBefore().run()}
-      >
-        {t("Add column left")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconColumnInsertRight size={16} />}
-        onClick={() => editor.chain().focus().addColumnAfter().run()}
-      >
-        {t("Add column right")}
-      </Menu.Item>
-
-      <Menu.Divider />
-
-      <Menu.Item
-        leftSection={<IconEraser size={16} />}
-        onClick={clearCol}
-      >
-        {t("Clear cells")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconColumnRemove size={16} />}
-        onClick={() => editor.chain().focus().deleteColumn().run()}
-      >
-        {t("Delete column")}
-      </Menu.Item>
-
-      <Menu.Divider />
-
-      <Menu.Item
-        leftSection={<IconArrowLeft size={16} />}
-        onClick={moveLeft.handleMove}
-        disabled={!moveLeft.canMove}
-      >
-        {t("Move column left")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconArrowRight size={16} />}
-        onClick={moveRight.handleMove}
-        disabled={!moveRight.canMove}
-      >
-        {t("Move column right")}
-      </Menu.Item>
-    </>
-  );
-});

apps/client/src/features/editor/components/table/handle/menus/row-handle-menu.tsx

@@ -1,138 +0,0 @@
-import React from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { ColorSwatch, Menu } from "@mantine/core";
-import { TABLE_COLORS } from "../../table-background-color";
-import {
-  IconArrowDown,
-  IconArrowUp,
-  IconEraser,
-  IconPalette,
-  IconRowInsertBottom,
-  IconRowInsertTop,
-  IconRowRemove,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { useTableMoveRowColumn } from "../hooks/use-table-move-row-column";
-import { useTableClear } from "../hooks/use-table-clear";
-import { AlignmentSubmenu } from "./alignment-submenu";
-
-interface RowHandleMenuProps {
-  editor: Editor;
-  index: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export const RowHandleMenu = React.memo(function RowHandleMenu({
-  editor,
-  index,
-  tableNode,
-  tablePos,
-}: RowHandleMenuProps) {
-  const { t } = useTranslation();
-
-  const setBackground = (color: string, name: string) => {
-    editor
-      .chain()
-      .focus()
-      .updateAttributes("tableCell", {
-        backgroundColor: color || null,
-        backgroundColorName: color ? name : null,
-      })
-      .updateAttributes("tableHeader", {
-        backgroundColor: color || null,
-        backgroundColorName: color ? name : null,
-      })
-      .run();
-  };
-
-  const moveUp = useTableMoveRowColumn(editor, "row", index, "up", tableNode, tablePos);
-  const moveDown = useTableMoveRowColumn(editor, "row", index, "down", tableNode, tablePos);
-  const clearRow = useTableClear(editor, tableNode, tablePos, {
-    kind: "row",
-    index,
-  });
-
-  return (
-    <>
-      <Menu.Sub position="right-start">
-        <Menu.Sub.Target>
-          <Menu.Sub.Item leftSection={<IconPalette size={16} />}>
-            {t("Background color")}
-          </Menu.Sub.Item>
-        </Menu.Sub.Target>
-        <Menu.Sub.Dropdown>
-          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, padding: 8 }}>
-            {TABLE_COLORS.map((c) => (
-              <button
-                key={c.name}
-                type="button"
-                onClick={() => setBackground(c.color, c.name)}
-                aria-label={t(c.name)}
-                style={{
-                  border: "none",
-                  background: "transparent",
-                  padding: 0,
-                  cursor: "pointer",
-                }}
-              >
-                <ColorSwatch
-                  color={c.color || "#ffffff"}
-                  size={22}
-                  style={{ border: c.color === "" ? "1px solid #e5e7eb" : undefined }}
-                />
-              </button>
-            ))}
-          </div>
-        </Menu.Sub.Dropdown>
-      </Menu.Sub>
-
-      <AlignmentSubmenu editor={editor} />
-
-      <Menu.Divider />
-
-      <Menu.Item
-        leftSection={<IconRowInsertTop size={16} />}
-        onClick={() => editor.chain().focus().addRowBefore().run()}
-      >
-        {t("Add row above")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconRowInsertBottom size={16} />}
-        onClick={() => editor.chain().focus().addRowAfter().run()}
-      >
-        {t("Add row below")}
-      </Menu.Item>
-
-      <Menu.Divider />
-
-      <Menu.Item leftSection={<IconEraser size={16} />} onClick={clearRow}>
-        {t("Clear cells")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconRowRemove size={16} />}
-        onClick={() => editor.chain().focus().deleteRow().run()}
-      >
-        {t("Delete row")}
-      </Menu.Item>
-
-      <Menu.Divider />
-
-      <Menu.Item
-        leftSection={<IconArrowUp size={16} />}
-        onClick={moveUp.handleMove}
-        disabled={!moveUp.canMove}
-      >
-        {t("Move row up")}
-      </Menu.Item>
-      <Menu.Item
-        leftSection={<IconArrowDown size={16} />}
-        onClick={moveDown.handleMove}
-        disabled={!moveDown.canMove}
-      >
-        {t("Move row down")}
-      </Menu.Item>
-    </>
-  );
-});

apps/client/src/features/editor/components/table/handle/row-handle.tsx

@@ -1,122 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import type { Editor } from "@tiptap/react";
-import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { useFloating, offset, autoUpdate, hide } from "@floating-ui/react";
-import { Menu } from "@mantine/core";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { useTableHandleDrag } from "./hooks/use-table-handle-drag";
-import { useColumnRowMenuLifecycle } from "./hooks/use-column-row-menu-lifecycle";
-import { RowHandleMenu } from "./menus/row-handle-menu";
-import classes from "./handle.module.css";
-
-interface RowHandleProps {
-  editor: Editor;
-  index: number;
-  anchorPos: number;
-  tableNode: ProseMirrorNode;
-  tablePos: number;
-}
-
-export const RowHandle = React.memo(function RowHandle({
-  editor,
-  index,
-  anchorPos,
-  tableNode,
-  tablePos,
-}: RowHandleProps) {
-  const { t } = useTranslation();
-  // See ColumnHandle for the rationale: keep the last valid cell DOM cached
-  // so the handle div stays mounted across stale-anchor renders, otherwise
-  // pragmatic-dnd silently aborts an in-flight drag.
-  const lookupCellDom = editor.view.nodeDOM(anchorPos) as HTMLElement | null;
-  const [cellDom, setCellDom] = useState<HTMLElement | null>(lookupCellDom);
-  const lastCellDomRef = useRef<HTMLElement | null>(lookupCellDom);
-  useEffect(() => {
-    if (lookupCellDom && lookupCellDom !== lastCellDomRef.current) {
-      lastCellDomRef.current = lookupCellDom;
-      setCellDom(lookupCellDom);
-    }
-  }, [lookupCellDom]);
-
-  const [handleEl, setHandleEl] = useState<HTMLDivElement | null>(null);
-
-  const { refs, floatingStyles, middlewareData } = useFloating({
-    placement: "left",
-    middleware: [offset(-4), hide()],
-    whileElementsMounted: autoUpdate,
-  });
-  const isReferenceHidden = !!middlewareData.hide?.referenceHidden;
-
-  useEffect(() => {
-    refs.setReference(cellDom);
-  }, [cellDom, refs]);
-
-  const wrapper = cellDom?.closest<HTMLElement>(".tableWrapper") ?? null;
-
-  const [menuOpened, setMenuOpened] = useState(false);
-  const closeMenu = useCallback(() => setMenuOpened(false), []);
-  useTableHandleDrag(editor, "row", handleEl, wrapper, closeMenu);
-
-  const { onOpen, onClose } = useColumnRowMenuLifecycle({
-    editor,
-    orientation: "row",
-    index,
-    tableNode,
-    tablePos,
-  });
-
-  if (!cellDom) return null;
-
-  return (
-    <Menu
-      opened={menuOpened}
-      onChange={setMenuOpened}
-      position="right-start"
-      onOpen={onOpen}
-      onClose={onClose}
-      withinPortal
-      shadow="md"
-    >
-      <Menu.Target>
-        <div
-          ref={(node) => {
-            refs.setFloating(node);
-            setHandleEl(node);
-          }}
-          style={{
-            ...floatingStyles,
-            ...(isReferenceHidden ? { visibility: "hidden" as const } : {}),
-          }}
-          className={clsx(classes.handle, classes.rowHandle)}
-          role="button"
-          tabIndex={0}
-          aria-label={t("Row actions")}
-        >
-          <span style={{ pointerEvents: "none", display: "inline-flex" }}>
-            <GripIcon />
-          </span>
-        </div>
-      </Menu.Target>
-      <Menu.Dropdown>
-        <RowHandleMenu
-          editor={editor}
-          index={index}
-          tableNode={tableNode}
-          tablePos={tablePos}
-        />
-      </Menu.Dropdown>
-    </Menu>
-  );
-});
-
-function GripIcon() {
-  return (
-    <svg viewBox="0 0 10 10" width="14" height="14" aria-hidden>
-      <path
-        fill="currentColor"
-        d="M3,2 A1,1 0 1 1 3,0 A1,1 0 0 1 3,2 Z M3,6 A1,1 0 1 1 3,4 A1,1 0 0 1 3,6 Z M3,10 A1,1 0 1 1 3,8 A1,1 0 0 1 3,10 Z M7,2 A1,1 0 1 1 7,0 A1,1 0 0 1 7,2 Z M7,6 A1,1 0 1 1 7,4 A1,1 0 0 1 7,6 Z M7,10 A1,1 0 1 1 7,8 A1,1 0 0 1 7,10 Z"
-      />
-    </svg>
-  );
-}

apps/client/src/features/editor/components/table/handle/table-handles-layer.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-import type { Editor } from "@tiptap/react";
-import { useTableHandleState } from "./hooks/use-table-handle-state";
-import { ColumnHandle } from "./column-handle";
-import { RowHandle } from "./row-handle";
-import { CellChevron } from "./cell-chevron";
-
-interface TableHandlesLayerProps {
-  editor: Editor | null;
-}
-
-export const TableHandlesLayer = React.memo(function TableHandlesLayer({
-  editor,
-}: TableHandlesLayerProps) {
-  const state = useTableHandleState(editor);
-
-  if (!editor || !editor.isEditable) return null;
-  if (!state.hoveringCell || !state.tableNode || state.tablePos == null) return null;
-
-  return (
-    <>
-      <ColumnHandle
-        editor={editor}
-        index={state.hoveringCell.colIndex}
-        anchorPos={state.hoveringCell.colFirstCellPos}
-        tableNode={state.tableNode!}
-        tablePos={state.tablePos!}
-      />
-      <RowHandle
-        editor={editor}
-        index={state.hoveringCell.rowIndex}
-        anchorPos={state.hoveringCell.rowFirstCellPos}
-        tableNode={state.tableNode!}
-        tablePos={state.tablePos!}
-      />
-      <CellChevron
-        editor={editor}
-        cellPos={state.hoveringCell.cellPos}
-        tableNode={state.tableNode!}
-        tablePos={state.tablePos!}
-      />
-    </>
-  );
-});

apps/client/src/features/editor/components/table/table-background-color.tsx

@@ -22,7 +22,7 @@ interface TableBackgroundColorProps {
   editor: Editor | null;
 }
 
-export const TABLE_COLORS: TableColorItem[] = [
+const TABLE_COLORS: TableColorItem[] = [
   { name: "Default", color: "" },
   { name: "Blue", color: "#b4d5ff" },
   { name: "Green", color: "#acf5d2" },

apps/client/src/features/editor/components/table/table-menu.tsx

@@ -104,12 +104,12 @@ export const TableMenu = React.memo(
           element.style.zIndex = "99";
         }}
         options={{
-          placement: "bottom",
+          placement: "top",
           offset: {
             mainAxis: 15,
           },
           flip: {
-            fallbackPlacements: ["bottom", "top"],
+            fallbackPlacements: ["top", "bottom"],
             padding: { top: 35 + 15, left: 8, right: 8, bottom: -Infinity },
             boundary: editor.options.element as HTMLElement,
           },

apps/client/src/features/editor/components/table/table-text-alignment.tsx

@@ -86,11 +86,11 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
       transitionProps={{ transition: "pop" }}
     >
       <Popover.Target>
-        <Tooltip label={t("Text align")} withArrow>
+        <Tooltip label={t("Text alignment")} withArrow>
           <ActionIcon
             variant="subtle"
             size="lg"
-            aria-label={t("Text align")}
+            aria-label={t("Text alignment")}
             onClick={() => setOpened(!opened)}
           >
             <activeItem.icon size={18} />

apps/client/src/features/editor/extensions/drag-handle.ts

@@ -60,23 +60,6 @@ function nodeDOMAtCoords(
   options: GlobalDragHandleOptions,
   view: EditorView,
 ) {
-  // Custom nodes (transclusion, …) render via tiptap's React node-view
-  // renderer, which emits `class="react-renderer node-${name}"` on the
-  // live wrapper — the `data-type` attribute is for static HTML
-  // serialization only. Match both so we cover live and parsed DOM.
-  // Inside a custom node, also match plain `p` so the first paragraph
-  // (which doesn't match `:not(:first-child)`) still gets its own
-  // handle; only hovers on the custom node's padding/border fall
-  // through to the wrapper.
-  const customSelectors = options.customNodes.flatMap((node) => [
-    `[data-type=${node}]`,
-    `.node-${node}`,
-  ]);
-  const customParagraphSelectors = options.customNodes.flatMap((node) => [
-    `[data-type=${node}] p`,
-    `.node-${node} p`,
-  ]);
-
   const selectors = [
     "li",
     "p:not(:first-child)",
@@ -88,13 +71,7 @@ function nodeDOMAtCoords(
     "h4",
     "h5",
     "h6",
-    // Tables nested in another block (toggle, transclusion, …) have a
-    // wrapper that isn't a direct child of .ProseMirror, so the
-    // parent-check below skips it. Match the wrapper explicitly so the
-    // handle shows up even with empty cells.
-    ".tableWrapper",
-    ...customParagraphSelectors,
-    ...customSelectors,
+    ...options.customNodes.map((node) => `[data-type=${node}]`),
   ].join(", ");
   return document
     .elementsFromPoint(coords.x, coords.y)
@@ -122,22 +99,6 @@ function nodePosAtDOM(
   })?.inside;
 }
 
-function isCustomNodeDOM(
-  elem: Element | null | undefined,
-  options: GlobalDragHandleOptions,
-): boolean {
-  if (!elem) return false;
-  for (const name of options.customNodes) {
-    if (
-      elem.getAttribute("data-type") === name ||
-      elem.classList.contains(`node-${name}`)
-    ) {
-      return true;
-    }
-  }
-  return false;
-}
-
 function calcNodePos(pos: number, view: EditorView) {
   const $pos = view.state.doc.resolve(pos);
   if ($pos.depth > 1) return $pos.before($pos.depth);
@@ -176,6 +137,7 @@ export function DragHandlePlugin(
 
     const nodePos = view.state.doc.resolve(fromSelectionPos);
 
+    // Check if nodePos points to the top level node
     if (nodePos.node().type.name === "doc") differentNodeSelected = true;
     else {
       const nodeSelection = NodeSelection.create(
@@ -204,46 +166,14 @@ export function DragHandlePlugin(
     } else {
       selection = NodeSelection.create(view.state.doc, draggedNodePos);
 
-      const $sel = view.state.doc.resolve(selection.from);
-
-      if (isCustomNodeDOM(node, options)) {
-        // The drag landed on a custom-node container (transclusion etc.).
-        // Walk up to the matching node so the drag moves the whole
-        // container, not whatever inner element the click landed on.
-        const customTypes = new Set(options.customNodes);
-        for (let d = $sel.depth; d > 0; d--) {
-          if (customTypes.has($sel.node(d).type.name)) {
-            selection = NodeSelection.create(
-              view.state.doc,
-              $sel.before(d),
-            );
-            break;
-          }
-        }
-      } else {
-        // If the selected node lives inside a table (at any nesting
-        // depth), promote to the whole table — the global drag handle is
-        // meant to move the table as a single block, not a row/cell. The
-        // earlier tableRow-only check only worked when the table sat at
-        // the doc root; once wrapped in another node (toggle, layout,
-        // etc.) the selection lands on a cell/paragraph and that check
-        // never fired.
-        let tableDepth = -1;
-        for (let d = $sel.depth; d > 0; d--) {
-          if ($sel.node(d).type.name === "table") {
-            tableDepth = d;
-            break;
-          }
-        }
-        if (tableDepth > 0) {
-          selection = NodeSelection.create(
-            view.state.doc,
-            $sel.before(tableDepth),
-          );
-        } else if ((selection as NodeSelection).node.type.isInline) {
-          // Inline node (e.g. mention): walk up to the parent block.
-          selection = NodeSelection.create(view.state.doc, $sel.before());
-        }
+      // if inline node is selected, e.g mention -> go to the parent node to select the whole node
+      // if table row is selected, go to the parent node to select the whole node
+      if (
+        (selection as NodeSelection).node.type.isInline ||
+        (selection as NodeSelection).node.type.name === "tableRow"
+      ) {
+        let $pos = view.state.doc.resolve(selection.from);
+        selection = NodeSelection.create(view.state.doc, $pos.before());
       }
     }
     view.dispatch(view.state.tr.setSelection(selection));
@@ -383,27 +313,6 @@ export function DragHandlePlugin(
             return;
           }
 
-          const isCustomNode = isCustomNodeDOM(node, options);
-
-          // Custom nodes pin the handle to the inner NodeViewWrapper's top-left:
-          // the natural anchor sits in transient/empty space outside the visible block.
-          if (isCustomNode) {
-            // tiptap React node-views emit an outer `.react-renderer` whose first
-            // child is the visible NodeViewWrapper; walk to that outer first since
-            // `node` may be either the outer or an inner element with data-type.
-            const rendererOuter =
-              (node.closest(".react-renderer") as HTMLElement | null) ?? node;
-            const inner =
-              (rendererOuter.firstElementChild as HTMLElement | null) ??
-              rendererOuter;
-            const innerRect = absoluteRect(inner);
-            if (!dragHandleElement) return;
-            dragHandleElement.style.left = `${innerRect.left + 4}px`;
-            dragHandleElement.style.top = `${innerRect.top + 4}px`;
-            showDragHandle();
-            return;
-          }
-
           const compStyle = window.getComputedStyle(node);
           const parsedLineHeight = parseInt(compStyle.lineHeight, 10);
           const lineHeight = isNaN(parsedLineHeight)
@@ -419,13 +328,6 @@ export function DragHandlePlugin(
           if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
             rect.left -= options.dragHandleWidth;
           }
-          // Tables: clear the table's own row-drag handle so the two
-          // grips don't stack on each other. `nodeDOMAtCoords` returns
-          // the wrapper for top-level hovers (wrapper is direct child of
-          // .ProseMirror) and a descendant for deeper hovers — cover both.
-          if (node.closest(".tableWrapper")) {
-            rect.left -= options.dragHandleWidth;
-          }
           rect.width = options.dragHandleWidth;
 
           if (!dragHandleElement) return;

apps/client/src/features/editor/extensions/extensions.ts

@@ -45,9 +45,6 @@ import {
   SearchAndReplace,
   Mention,
   TableDndExtension,
-  TableHandleCommandsExtension,
-  TableHeaderPin,
-  TableReadonlySort,
   Subpages,
   Heading,
   Highlight,
@@ -59,7 +56,6 @@ import {
   Status,
   TransclusionSource,
   TransclusionReference,
-  TableView,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -263,16 +259,11 @@ export const mainExtensions = [
     resizable: true,
     lastColumnResizable: true,
     allowTableNodeSelection: true,
-    cellMinWidth: 49,
-    View: TableView,
   }),
   TableRow,
   TableCell,
   TableHeader,
   TableDndExtension,
-  TableHandleCommandsExtension,
-  TableHeaderPin,
-  TableReadonlySort,
   MathInline.configure({
     view: MathInlineView,
   }),

apps/client/src/features/editor/extensions/markdown-clipboard.ts

@@ -81,6 +81,7 @@ export const MarkdownClipboard = Extension.create({
 
             const parsed = markdownToHtml(text.replace(/\n+$/, ""));
             const body = elementFromString(parsed);
+            stripBlockLevelWhitespaceNodes(body);
             normalizeTableColumnWidths(body);
 
             const contentNodes = DOMParser.fromSchema(
@@ -91,7 +92,7 @@ export const MarkdownClipboard = Extension.create({
 
             tr.replaceRange(from, to, contentNodes);
             const insertEnd = tr.mapping.map(from, 1);
-            tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(from, insertEnd - 2)), -1));
+            tr.setSelection(TextSelection.near(tr.doc.resolve(insertEnd), -1));
             tr.setMeta('paste', true)
             view.dispatch(tr);
             return true;
@@ -104,21 +105,28 @@ export const MarkdownClipboard = Extension.create({
           transformPasted: (slice) => {
             let { content, openStart, openEnd } = slice;
 
-            // Remove trailing paragraphs that contain only whitespace
-            while (content.childCount > 1) {
-              const lastChild = content.lastChild;
-              if (
-                lastChild?.type.name === "paragraph" &&
-                lastChild.textContent.trim() === ""
-              ) {
-                const children = [];
-                for (let i = 0; i < content.childCount - 1; i++) {
-                  children.push(content.child(i));
-                }
-                content = Fragment.from(children);
-              } else {
-                break;
+            const isTrailingNoise = (node: any) => {
+              if (!node) return false;
+              if (node.type.name === "hardBreak") return true;
+              if (node.isText && (node.text ?? "").trim() === "") return true;
+              if (node.type.name === "paragraph") {
+                let onlyNoise = true;
+                node.content.forEach((c: any) => {
+                  if (c.type.name === "hardBreak") return;
+                  if (c.isText && (c.text ?? "").trim() === "") return;
+                  onlyNoise = false;
+                });
+                return onlyNoise;
               }
+              return false;
+            };
+
+            while (content.childCount > 1 && isTrailingNoise(content.lastChild)) {
+              const children = [];
+              for (let i = 0; i < content.childCount - 1; i++) {
+                children.push(content.child(i));
+              }
+              content = Fragment.from(children);
             }
 
             if (content !== slice.content) {
@@ -140,6 +148,21 @@ function elementFromString(value) {
   return new window.DOMParser().parseFromString(wrappedValue, "text/html").body;
 }
 
+// marked.parse() emits "<p>...</p>\n<p>...</p>\n" — those literal newlines
+// become whitespace text nodes that parseSlice (preserveWhitespace: true)
+// converts into spurious empty paragraphs at the insertion site. Inside a
+// list item the trailing one prevents Enter from exiting the list.
+function stripBlockLevelWhitespaceNodes(body: HTMLElement): void {
+  Array.from(body.childNodes).forEach((node) => {
+    if (
+      node.nodeType === 3 /* TEXT_NODE */ &&
+      (node.textContent ?? "").trim() === ""
+    ) {
+      body.removeChild(node);
+    }
+  });
+}
+
 const DEFAULT_PASTE_COL_WIDTH_PX = 150;
 
 function parsePixelWidth(el: Element): number | null {

apps/client/src/features/editor/page-editor.tsx

@@ -44,7 +44,6 @@ import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubbl
 import { ReadonlyBubbleMenu } from "@/features/editor/components/bubble-menu/readonly-bubble-menu";
 import TableCellMenu from "@/features/editor/components/table/table-cell-menu.tsx";
 import TableMenu from "@/features/editor/components/table/table-menu.tsx";
-import { TableHandlesLayer } from "@/features/editor/components/table/handle/table-handles-layer";
 import ImageMenu from "@/features/editor/components/image/image-menu.tsx";
 import CalloutMenu from "@/features/editor/components/callout/callout-menu.tsx";
 import VideoMenu from "@/features/editor/components/video/video-menu.tsx";
@@ -425,7 +424,7 @@ export default function PageEditor({
                 <EditorLinkMenu editor={editor} />
                 <EditorBubbleMenu editor={editor} />
                 <TableMenu editor={editor} />
-                <TableHandlesLayer editor={editor} />
+                <TableCellMenu editor={editor} appendTo={menuContainerRef} />
                 <ImageMenu editor={editor} />
                 <VideoMenu editor={editor} />
                 <PdfMenu editor={editor} />

apps/client/src/features/editor/styles/core.css

@@ -203,8 +203,7 @@
     }
   }
 
-  &.resize-cursor,
-  &.resize-cursor * {
+  .resize-cursor {
     cursor: ew-resize;
     cursor: col-resize;
   }

apps/client/src/features/editor/styles/table.css

@@ -15,8 +15,7 @@
 }
 
 .table-dnd-drop-indicator {
-  background-color: var(--mantine-color-blue-5);
-  z-index: 3;
+  background-color: #adf;
 }
 
 .ProseMirror {
@@ -58,14 +57,13 @@
     }
 
     .column-resize-handle {
-      background-color: var(--mantine-color-blue-5);
+      background-color: #adf;
       bottom: -1px;
       position: absolute;
-      right: -1px;
+      right: -2px;
       pointer-events: none;
       top: 0;
-      width: 2px;
-      z-index: 3;
+      width: 4px;
     }
 
     .selectedCell:after {
@@ -131,139 +129,6 @@
   }
 }
 
-
-/* Header-row pinning. Two CSS paths, picked by `header-pin/controller.ts`:
-   - native sticky (preferred): wrapper drops its overflow constraint so
-     `position: sticky` on the row can resolve against the document scroll.
-   - transform fallback: wrapper keeps `overflow-x: auto` for horizontal
-     scrolling; the row is positioned imperatively per scroll frame.
-
-   `--editor-pin-offset` is published to :root by `pinOffsetWatcher` in
-   `header-pin/offset.ts`, measured against the lowest fixed surface above
-   the editor (app shell header, page header, fixed toolbar). */
-
-.tableWrapper.tableWrapperNoOverflow,
-.tableWrapper.tableWrapperNoOverflow table {
-  overflow: visible;
-}
-
-.tableWrapper.tableHeaderPinned table tr:first-child {
-  z-index: 2;
-}
-
-.tableWrapper.tableWrapperNoOverflow.tableHeaderPinned table tr:first-child {
-  position: sticky;
-  top: var(--editor-pin-offset, 90px);
-}
-
-.tableWrapper.tableHeaderPinned:not(.tableWrapperNoOverflow) table tr:first-child {
-  position: relative;
-  transform: translateY(var(--table-pin-offset, 0px));
-}
-
-@media print {
-  .tableWrapper.tableHeaderPinned table tr:first-child {
-    position: static;
-    transform: none;
-  }
-}
-
-.tableReadonlySortChevron {
-  /* Anchor to the cell's right edge, vertically centered with the cell
-     content. The cell content (a <p>) is block-level so an inline chevron
-     would wrap to a new line; absolute positioning takes it out of flow. */
-  position: absolute;
-  top: 50%;
-  right: 6px;
-  transform: translateY(-50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  background: light-dark(
-    rgba(55, 53, 47, 0.08),
-    rgba(255, 255, 255, 0.08)
-  );
-  color: light-dark(
-    rgba(55, 53, 47, 0.55),
-    rgba(255, 255, 255, 0.55)
-  );
-  user-select: none;
-  cursor: pointer;
-  z-index: 1;
-  /* Hidden by default; revealed on header-cell hover or when this column is
-     the active sort (see selectors below). */
-  opacity: 0;
-  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
-}
-
-.ProseMirror table th:hover .tableReadonlySortChevron,
-.tableReadonlySortChevron[data-sort] {
-  opacity: 1;
-}
-
-.ProseMirror table th:has(.tableReadonlySortChevron) {
-  padding-right: 30px;
-}
-
-.tableReadonlySortChevron:hover {
-  background: light-dark(
-    rgba(55, 53, 47, 0.16),
-    rgba(255, 255, 255, 0.16)
-  );
-}
-
-/* Immediate tooltip on the chevron — same style language as the rest of the
-   app (small, dark, rounded), unlike the native `title` tooltip which only
-   appears after a long delay. */
-.tableReadonlySortChevron::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  /* Below the chevron — placing it above the cell hits the table's
-     overflow clipping (the wrapper has `overflow-x: auto` which forces
-     `overflow-y: auto` per spec). */
-  top: calc(100% + 6px);
-  right: 0;
-  padding: 4px 8px;
-  border-radius: 4px;
-  background: var(--mantine-color-dark-7);
-  color: var(--mantine-color-white);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.4;
-  white-space: nowrap;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 120ms ease;
-  z-index: 10;
-}
-
-.tableReadonlySortChevron:hover::after {
-  opacity: 1;
-}
-
-.tableReadonlySortChevron svg {
-  display: block;
-}
-
-.tableReadonlySortChevron[data-sort="asc"],
-.tableReadonlySortChevron[data-sort="desc"] {
-  background: light-dark(
-    var(--mantine-color-blue-1),
-    var(--mantine-color-blue-9)
-  );
-  color: light-dark(
-    var(--mantine-color-blue-7),
-    var(--mantine-color-blue-2)
-  );
-}
-
-.tableReadonlySortChevron[data-sort="asc"] svg {
-  transform: rotate(180deg);
-}
-
 .editor-container:has(.table-dnd-drop-indicator[data-dragging="true"]) {
   .prosemirror-dropcursor-block {
     display: none;

apps/client/src/features/page/components/header/page-header-menu.tsx

@@ -29,7 +29,7 @@ import { buildPageUrl } from "@/features/page/page.utils.ts";
 import { notifications } from "@mantine/notifications";
 import { getAppUrl } from "@/lib/config.ts";
 import { extractPageSlugId } from "@/lib";
-import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
+import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
 import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
 import { PageWidthToggle } from "@/features/user/components/page-width-pref.tsx";
 import { Trans, useTranslation } from "react-i18next";
@@ -134,7 +134,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
     pageId: extractPageSlugId(pageSlug),
   });
   const { openDeleteModal } = useDeletePageModal();
-  const { handleDelete } = useTreeMutation(page?.spaceId ?? "");
+  const [tree] = useAtom(treeApiAtom);
   const [exportOpened, { open: openExportModal, close: closeExportModal }] =
     useDisclosure(false);
   const [
@@ -183,7 +183,7 @@ function PageActionMenu({ readOnly }: PageActionMenuProps) {
   };
 
   const handleDeletePage = () => {
-    openDeleteModal({ onConfirm: () => handleDelete(page.id) });
+    openDeleteModal({ onConfirm: () => tree?.delete(page.id) });
   };
 
   const handleToggleFavorite = () => {

apps/client/src/features/page/components/header/page-header.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 export default function PageHeader({ readOnly }: Props) {
   return (
-    <div className={classes.header} data-page-header="true">
+    <div className={classes.header}>
       <Group justify="space-between" h="100%" px="md" wrap="nowrap" className={classes.group}>
         <Breadcrumb />
 

apps/client/src/features/page/queries/page-query.ts

@@ -37,7 +37,7 @@ import { validate as isValidUuid } from "uuid";
 import { useTranslation } from "react-i18next";
 import { useAtom } from "jotai";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
-import { treeModel } from "@/features/page/tree/model/tree-model";
+import { SimpleTree } from "react-arborist";
 import { SpaceTreeNode } from "@/features/page/tree/types";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
 
@@ -170,8 +170,11 @@ export function useRestorePageMutation() {
     onSuccess: async (restoredPage) => {
       notifications.show({ message: "Page restored successfully" });
 
+      // Add the restored page back to the tree
+      const treeApi = new SimpleTree<SpaceTreeNode>(treeData);
+
       // Check if the page already exists in the tree (it shouldn't)
-      if (!treeModel.find(treeData, restoredPage.id)) {
+      if (!treeApi.find(restoredPage.id)) {
         // Create the tree node data with hasChildren from backend
         const nodeData: SpaceTreeNode = {
           id: restoredPage.id,
@@ -190,17 +193,24 @@ export function useRestorePageMutation() {
         let index = 0;
 
         if (parentId) {
-          const parentNode = treeModel.find(treeData, parentId);
+          const parentNode = treeApi.find(parentId);
           if (parentNode) {
             index = parentNode.children?.length || 0;
           }
         } else {
           // Root level page
-          index = treeData.length;
+          index = treeApi.data.length;
         }
 
         // Add the node to the tree
-        setTreeData(treeModel.insert(treeData, parentId, nodeData, index));
+        treeApi.create({
+          parentId,
+          index,
+          data: nodeData,
+        });
+
+        // Update the tree data
+        setTreeData(treeApi.data);
 
         // Emit websocket event to sync with other users
         setTimeout(() => {

apps/client/src/features/page/tree/atoms/open-tree-nodes-atom.ts

@@ -1,5 +0,0 @@
-import { atom } from "jotai";
-
-export type OpenMap = Record<string, boolean>;
-
-export const openTreeNodesAtom = atom<OpenMap>({});

apps/client/src/features/page/tree/atoms/tree-api-atom.ts

@@ -0,0 +1,5 @@
+import { atom } from "jotai";
+import { TreeApi } from "react-arborist";
+import { SpaceTreeNode } from "../types";
+
+export const treeApiAtom = atom<TreeApi<SpaceTreeNode> | null>(null);

apps/client/src/features/page/tree/components/doc-tree-drag-preview.module.css

@@ -1,26 +0,0 @@
-.preview {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 10px;
-    border-radius: 6px;
-    font-size: 13px;
-    font-weight: 500;
-    background-color: light-dark(
-        var(--mantine-color-white),
-        var(--mantine-color-dark-6)
-    );
-    color: light-dark(
-        var(--mantine-color-gray-9),
-        var(--mantine-color-dark-0)
-    );
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
-    border: 1px solid light-dark(
-        var(--mantine-color-gray-3),
-        var(--mantine-color-dark-4)
-    );
-    max-width: 260px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}

apps/client/src/features/page/tree/components/doc-tree-drag-preview.tsx

@@ -1,9 +0,0 @@
-import styles from './doc-tree-drag-preview.module.css';
-
-type Props = {
-  label: string;
-};
-
-export function DocTreeDragPreview({ label }: Props) {
-  return <div className={styles.preview}>{label || 'Untitled'}</div>;
-}

apps/client/src/features/page/tree/components/doc-tree-drop-indicator.tsx

@@ -1,39 +0,0 @@
-import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import styles from '../styles/tree.module.css';
-
-type Props = {
-  instruction: Instruction;
-  indentPx: number;
-};
-
-export function DocTreeDropIndicator({ instruction, indentPx }: Props) {
-  const blocked = instruction.type === 'instruction-blocked';
-  const inst = blocked ? instruction.desired : instruction;
-
-  const style = {
-    ['--drop-line-indent' as never]: `${indentPx}px`,
-  } as React.CSSProperties;
-
-  if (inst.type === 'reorder-above') {
-    return (
-      <div
-        className={styles.dropLine}
-        data-edge="top"
-        data-blocked={blocked || undefined}
-        style={style}
-      />
-    );
-  }
-  if (inst.type === 'reorder-below') {
-    return (
-      <div
-        className={styles.dropLine}
-        data-edge="bottom"
-        data-blocked={blocked || undefined}
-        style={style}
-      />
-    );
-  }
-  // 'combine' (make-child) is rendered via [data-receiving-drop] on the row itself.
-  return null;
-}

apps/client/src/features/page/tree/components/doc-tree-row.tsx

@@ -1,398 +0,0 @@
-import {
-  memo,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type ReactNode,
-} from 'react';
-import { createRoot } from 'react-dom/client';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import {
-  draggable,
-  dropTargetForElements,
-} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
-import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
-import {
-  attachInstruction,
-  extractInstruction,
-  type Instruction,
-  type ItemMode,
-} from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import { triggerPostMoveFlash } from '@atlaskit/pragmatic-drag-and-drop-flourish/trigger-post-move-flash';
-import * as liveRegion from '@atlaskit/pragmatic-drag-and-drop-live-region';
-
-import type { TreeNode, DropOp } from '../model/tree-model.types';
-import { treeModel } from '../model/tree-model';
-import { DocTreeDropIndicator } from './doc-tree-drop-indicator';
-import { DocTreeDragPreview } from './doc-tree-drag-preview';
-import type { RenderRowProps } from './doc-tree';
-import styles from '../styles/tree.module.css';
-
-type Props<T extends object> = {
-  node: TreeNode<T>;
-  level: number;
-  isLastSibling: boolean;
-  openIds: ReadonlySet<string>;
-  selectedId?: string;
-  // Roving tabindex: the single row that currently carries tabIndex={0}.
-  activeId?: string;
-  renderRow: (props: RenderRowProps<T>) => ReactNode;
-  indentPerLevel: number;
-  onMove: (sourceId: string, op: DropOp) => void | Promise<void>;
-  onToggle: (id: string, isOpen: boolean) => void;
-  readOnly: boolean;
-  disableDrag?: (node: TreeNode<T>) => boolean;
-  disableDrop?: (node: TreeNode<T>) => boolean;
-  getDragLabel: (node: TreeNode<T>) => string;
-  contextId: symbol;
-  registerRowElement: (id: string, el: HTMLElement | null) => void;
-  // Stable accessor — calling it returns the latest tree. Avoids passing the
-  // tree itself as a prop (which would break memo and re-run every row's DnD
-  // useEffect on every mutation).
-  getRootData: () => TreeNode<T>[];
-};
-
-const DRAG_TYPE = 'doc-tree-item';
-const AUTO_EXPAND_MS = 500;
-
-function DocTreeRowInner<T extends object>(props: Props<T>) {
-  const {
-    node,
-    level,
-    isLastSibling,
-    openIds,
-    selectedId,
-    activeId,
-    renderRow,
-    indentPerLevel,
-    onMove,
-    onToggle,
-    readOnly,
-    disableDrag,
-    disableDrop,
-    getDragLabel,
-    contextId,
-    registerRowElement,
-    getRootData,
-  } = props;
-
-  const isOpen = openIds.has(node.id);
-  // "Has children" includes both already-loaded children AND the consumer's
-  // own server-side flag (`hasChildren` is a docmost convention on
-  // SpaceTreeNode / SharedPageTreeNode). The flag lets the chevron and the
-  // auto-expand timer recognize unloaded subtrees so the consumer's lazy-load
-  // (via onToggle) can populate them on demand.
-  const hasLoadedChildren = !!node.children && node.children.length > 0;
-  const declaredHasChildren =
-    (node as { hasChildren?: boolean }).hasChildren === true;
-  const hasChildren = hasLoadedChildren || declaredHasChildren;
-  const isSelected = selectedId === node.id;
-
-  const rowRef = useRef<HTMLElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-  const [instruction, setInstruction] = useState<Instruction | null>(null);
-  const autoExpandTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const cancelAutoExpand = useCallback(() => {
-    if (autoExpandTimerRef.current) {
-      clearTimeout(autoExpandTimerRef.current);
-      autoExpandTimerRef.current = null;
-    }
-  }, []);
-
-  const toggleOpen = useCallback(() => {
-    onToggle(node.id, !isOpen);
-  }, [onToggle, node.id, isOpen]);
-
-  useEffect(() => {
-    registerRowElement(node.id, rowRef.current);
-    return () => registerRowElement(node.id, null);
-  }, [registerRowElement, node.id]);
-
-  // Restore lazy-loaded children when the row mounts open but its children
-  // aren't loaded (e.g. cross-space page move drops a node into a new tree
-  // that still has its id in openIds). Calling onToggle(id, true) is
-  // idempotent for open state and triggers the consumer's lazy-load.
-  useEffect(() => {
-    if (isOpen && declaredHasChildren && !hasLoadedChildren) {
-      onToggle(node.id, true);
-    }
-  }, [isOpen, declaredHasChildren, hasLoadedChildren, node.id, onToggle]);
-
-  useEffect(() => {
-    const el = rowRef.current;
-    if (!el || readOnly) return;
-    const dragDisabled = disableDrag?.(node) ?? false;
-    const dropDisabled = disableDrop?.(node) ?? false;
-
-    const cleanups: Array<() => void> = [];
-
-    if (!dragDisabled) {
-      cleanups.push(
-        draggable({
-          element: el,
-          getInitialData: () => ({
-            id: node.id,
-            type: DRAG_TYPE,
-            uniqueContextId: contextId,
-            isOpenOnDragStart: isOpen,
-          }),
-          onGenerateDragPreview: ({ nativeSetDragImage }) => {
-            setCustomNativeDragPreview({
-              nativeSetDragImage,
-              getOffset: pointerOutsideOfPreview({ x: '16px', y: '8px' }),
-              render: ({ container }) => {
-                const root = createRoot(container);
-                root.render(<DocTreeDragPreview label={getDragLabel(node)} />);
-                return () => root.unmount();
-              },
-            });
-          },
-          onDragStart: () => setIsDragging(true),
-          onDrop: () => setIsDragging(false),
-        }),
-      );
-    }
-
-    if (!dropDisabled) {
-      const mode: ItemMode =
-        isOpen && hasChildren
-          ? 'expanded'
-          : isLastSibling
-            ? 'last-in-group'
-            : 'standard';
-      // Always block 'reparent' (out of scope per spec).
-      // Block 'reorder-below' when the row is open with children — ambiguous gesture,
-      // force users to drop into the folder via 'make-child' instead.
-      const block: Instruction['type'][] = ['reparent'];
-      if (isOpen && hasChildren) block.push('reorder-below');
-
-      cleanups.push(
-        dropTargetForElements({
-          element: el,
-          canDrop: ({ source }) =>
-            source.data.type === DRAG_TYPE &&
-            source.data.uniqueContextId === contextId &&
-            source.data.id !== node.id &&
-            !treeModel.isDescendant(
-              getRootData(),
-              source.data.id as string,
-              node.id,
-            ),
-          getData: ({ input, element }) =>
-            attachInstruction(
-              { id: node.id, type: DRAG_TYPE },
-              {
-                input,
-                element,
-                currentLevel: level,
-                indentPerLevel,
-                mode,
-                block,
-              },
-            ),
-          onDrag: ({ self }) => {
-            const inst = extractInstruction(self.data);
-            setInstruction(inst);
-            // Auto-expand on hover over any collapsed row that has children,
-            // regardless of the specific instruction type. Reorder-before and
-            // reorder-after also benefit: once expanded, the user can see the
-            // children and refine their drop target.
-            if (
-              inst &&
-              hasChildren &&
-              !isOpen &&
-              !autoExpandTimerRef.current
-            ) {
-              autoExpandTimerRef.current = setTimeout(() => {
-                onToggle(node.id, true);
-                autoExpandTimerRef.current = null;
-              }, AUTO_EXPAND_MS);
-            }
-          },
-          onDragLeave: () => {
-            setInstruction(null);
-            cancelAutoExpand();
-          },
-          onDrop: ({ source, self }) => {
-            setInstruction(null);
-            cancelAutoExpand();
-            const inst = extractInstruction(self.data);
-            if (!inst || inst.type === 'instruction-blocked') return;
-            const sourceId = source.data.id as string;
-            const op: DropOp =
-              inst.type === 'reorder-above'
-                ? { kind: 'reorder-before', targetId: node.id }
-                : inst.type === 'reorder-below'
-                  ? { kind: 'reorder-after', targetId: node.id }
-                  : inst.type === 'make-child'
-                    ? { kind: 'make-child', targetId: node.id }
-                    : null!;
-            if (!op) return;
-            onMove(sourceId, op);
-            triggerPostMoveFlash(el);
-            const liveTree = getRootData();
-            const parentName =
-              op.kind === 'make-child'
-                ? getDragLabel(node)
-                : (() => {
-                    const sib = treeModel.siblingsOf(liveTree, op.targetId);
-                    const parent = sib?.parentId
-                      ? treeModel.find(liveTree, sib.parentId)
-                      : null;
-                    return parent ? getDragLabel(parent) : 'root';
-                  })();
-            const sourceNode = treeModel.find(liveTree, sourceId);
-            const sourceLabel = sourceNode
-              ? getDragLabel(sourceNode)
-              : 'item';
-            liveRegion.announce(`Moved ${sourceLabel} under ${parentName}.`);
-            // After a make-child drop, expand this row so the user sees the
-            // just-dropped child — especially important when the row had no
-            // children before (chevron just appeared) so the drop would
-            // otherwise be invisible.
-            if (op.kind === 'make-child') onToggle(node.id, true);
-            if (source.data.isOpenOnDragStart) onToggle(sourceId, true);
-          },
-        }),
-      );
-    }
-
-    return combine(...cleanups);
-  }, [
-    node,
-    level,
-    isOpen,
-    hasChildren,
-    isLastSibling,
-    readOnly,
-    disableDrag,
-    disableDrop,
-    contextId,
-    indentPerLevel,
-    getDragLabel,
-    onMove,
-    onToggle,
-    getRootData,
-    cancelAutoExpand,
-  ]);
-
-  useEffect(() => () => cancelAutoExpand(), [cancelAutoExpand]);
-
-  const effectiveInst =
-    instruction?.type === 'instruction-blocked'
-      ? instruction.desired
-      : instruction;
-  const blocked = instruction?.type === 'instruction-blocked';
-  const receivingDrop: 'before' | 'after' | 'make-child' | null = (() => {
-    if (!effectiveInst) return null;
-    if (effectiveInst.type === 'reorder-above') return 'before';
-    if (effectiveInst.type === 'reorder-below') return 'after';
-    if (effectiveInst.type === 'make-child') return 'make-child';
-    return null;
-  })();
-
-  // Treeitem semantics ride on the row's focusable element (the consumer's
-  // <a>). The outer <li> is presentational layout. aria-label uses the row's
-  // label so the SR's accessible name is just the page title, not the
-  // concatenation of inner action-button aria-labels.
-  const treeItemProps = {
-    role: 'treeitem' as const,
-    'aria-level': level + 1,
-    'aria-expanded': hasChildren ? isOpen : undefined,
-    'aria-selected': isSelected ? (true as const) : undefined,
-    'aria-current': isSelected ? ('page' as const) : undefined,
-    'aria-label': getDragLabel(node),
-    'data-row-id': node.id,
-  };
-
-  return (
-    <div
-      className={styles.rowWrapper}
-      style={{ paddingLeft: level * indentPerLevel }}
-    >
-      <div
-        className={styles.node}
-        data-dragging={isDragging || undefined}
-        data-selected={isSelected || undefined}
-        data-receiving-drop={
-          receivingDrop === 'make-child'
-            ? blocked
-              ? 'make-child-blocked'
-              : 'make-child'
-            : undefined
-        }
-      >
-        {renderRow({
-          node,
-          level,
-          isOpen,
-          hasChildren,
-          isSelected,
-          isDragging,
-          isReceivingDrop: receivingDrop,
-          rowRef,
-          tabIndex: activeId === node.id ? 0 : -1,
-          treeItemProps,
-          toggleOpen,
-        })}
-      </div>
-      {instruction && (
-        <DocTreeDropIndicator
-          instruction={instruction}
-          indentPx={level * indentPerLevel}
-        />
-      )}
-    </div>
-  );
-}
-
-// Custom memo comparator. The default shallow compare re-renders every row
-// when `openIds` (a Set) or `selectedId` (a string) on the parent changes,
-// because all rows receive the same reference via {...props} spread. With 1K
-// rows that's a perceptible stall on every expand and every navigate.
-//
-// Resolve openIds / selectedId per-row: only re-render if THIS row's own
-// open-state or selected-state actually flipped. Everything else uses
-// reference equality (callbacks are useCallback-stable from the parent).
-function arePropsEqual<T extends object>(
-  prev: Props<T>,
-  next: Props<T>,
-): boolean {
-  if (prev.node !== next.node) return false;
-  if (prev.level !== next.level) return false;
-  if (prev.isLastSibling !== next.isLastSibling) return false;
-  if (prev.readOnly !== next.readOnly) return false;
-  if (prev.contextId !== next.contextId) return false;
-  if (prev.indentPerLevel !== next.indentPerLevel) return false;
-  if (prev.renderRow !== next.renderRow) return false;
-  if (prev.onMove !== next.onMove) return false;
-  if (prev.onToggle !== next.onToggle) return false;
-  if (prev.disableDrag !== next.disableDrag) return false;
-  if (prev.disableDrop !== next.disableDrop) return false;
-  if (prev.getDragLabel !== next.getDragLabel) return false;
-  if (prev.registerRowElement !== next.registerRowElement) return false;
-  if (prev.getRootData !== next.getRootData) return false;
-
-  const id = next.node.id;
-  // openIds: only this row's own membership matters.
-  if (prev.openIds.has(id) !== next.openIds.has(id)) return false;
-  // selectedId: re-render only the rows whose isSelected actually flipped.
-  const wasSelected = prev.selectedId === id;
-  const isSelected = next.selectedId === id;
-  if (wasSelected !== isSelected) return false;
-  // activeId: same trick — only the outgoing and incoming active rows
-  // re-render when the user moves focus through the tree.
-  const wasActive = prev.activeId === id;
-  const isActive = next.activeId === id;
-  if (wasActive !== isActive) return false;
-
-  return true;
-}
-
-export const DocTreeRow = memo(
-  DocTreeRowInner,
-  arePropsEqual,
-) as typeof DocTreeRowInner;

apps/client/src/features/page/tree/components/doc-tree.tsx

@@ -1,541 +0,0 @@
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-  type Ref,
-} from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
-import type { TreeNode, DropOp } from '../model/tree-model.types';
-import { treeModel } from '../model/tree-model';
-import { DocTreeRow } from './doc-tree-row';
-import styles from '../styles/tree.module.css';
-
-export type RenderRowProps<T extends object> = {
-  node: TreeNode<T>;
-  level: number;
-  isOpen: boolean;
-  hasChildren: boolean;
-  isSelected: boolean;
-  isDragging: boolean;
-  isReceivingDrop: 'before' | 'after' | 'make-child' | null;
-
-  rowRef: Ref<HTMLElement>;
-  // Roving tabindex: exactly one row in the tree carries tabIndex={0} (the
-  // active row); every other row gets tabIndex={-1}. Consumers must spread
-  // this onto the same element they wire rowRef to.
-  tabIndex: 0 | -1;
-  // Treeitem semantics for the row's focusable element. Consumers MUST spread
-  // these onto the same element rowRef points at, so the focused element IS
-  // the treeitem. This makes screen readers announce "treeitem" (not "link")
-  // and replaces the descendant-text accname with the row's label, so action
-  // button labels inside the row don't get concatenated.
-  treeItemProps: {
-    role: 'treeitem';
-    'aria-level': number;
-    'aria-expanded'?: boolean;
-    'aria-selected'?: true;
-    'aria-current'?: 'page';
-    'aria-label': string;
-    'data-row-id': string;
-  };
-  toggleOpen: () => void;
-};
-
-export type DocTreeProps<T extends object> = {
-  data: TreeNode<T>[];
-  openIds: ReadonlySet<string>;
-  selectedId?: string;
-
-  renderRow: (props: RenderRowProps<T>) => ReactNode;
-  indentPerLevel?: number;
-  rowHeight?: number;
-  emptyState?: ReactNode;
-
-  onMove: (sourceId: string, op: DropOp) => void | Promise<void>;
-  onToggle: (id: string, isOpen: boolean) => void;
-  onSelect?: (id: string) => void;
-
-  readOnly?: boolean;
-  disableDrag?: (node: TreeNode<T>) => boolean;
-  disableDrop?: (node: TreeNode<T>) => boolean;
-
-  getDragLabel: (node: TreeNode<T>) => string;
-  uniqueContextId?: symbol;
-
-  // Accessible name for the tree itself (e.g. "Pages"). Rendered as
-  // aria-label on the <ul role="tree"> so screen readers announce what
-  // collection of items the user has entered.
-  'aria-label'?: string;
-};
-
-export type DocTreeApi = {
-  select: (
-    id: string,
-    opts?: { scrollIntoView?: boolean; focus?: boolean },
-  ) => void;
-  scrollTo: (id: string) => void;
-  focus: (id: string) => void;
-};
-
-type FlatRow<T extends object> = {
-  node: TreeNode<T>;
-  level: number;
-  isLastSibling: boolean;
-};
-
-// DFS-walk the tree, emitting only the visible nodes (root nodes always, plus
-// the descendants of nodes whose id is in `openIds`). Each emitted row carries
-// the precomputed `level` and `isLastSibling` it needs.
-function flattenVisible<T extends object>(
-  data: TreeNode<T>[],
-  openIds: ReadonlySet<string>,
-): FlatRow<T>[] {
-  const out: FlatRow<T>[] = [];
-  const walk = (nodes: TreeNode<T>[], level: number) => {
-    for (let i = 0; i < nodes.length; i++) {
-      const node = nodes[i];
-      out.push({ node, level, isLastSibling: i === nodes.length - 1 });
-      if (openIds.has(node.id) && node.children?.length) {
-        walk(node.children, level + 1);
-      }
-    }
-  };
-  walk(data, 0);
-  return out;
-}
-
-type RowElementMap = Map<string, HTMLElement>;
-
-function DocTreeInner<T extends object>(
-  props: DocTreeProps<T>,
-  ref: Ref<DocTreeApi>,
-) {
-  const {
-    data,
-    openIds,
-    selectedId,
-    renderRow,
-    indentPerLevel = 16,
-    rowHeight = 32,
-    onMove,
-    onToggle,
-    onSelect,
-    readOnly = false,
-    disableDrag,
-    disableDrop,
-    getDragLabel,
-    uniqueContextId,
-    emptyState,
-    'aria-label': ariaLabel,
-  } = props;
-
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const rowElementsRef = useRef<RowElementMap>(new Map());
-  // Set by the keyboard handler when the navigation target hasn't been
-  // virtualized yet. Consumed by registerRowElement when the row mounts.
-  const pendingFocusIdRef = useRef<string | null>(null);
-  // Typeahead state: accumulated buffer, plus the timer that clears it after
-  // ~500ms of no typing. Refs only — no re-render needed per keystroke.
-  const typeaheadBufferRef = useRef('');
-  const typeaheadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  // Roving tabindex: the row most-recently focused by the user. Falls back
-  // to selectedId, then to the first visible row, when the tracked id is
-  // gone from the flat list (e.g. its branch was collapsed).
-  const [activeId, setActiveId] = useState<string | undefined>(undefined);
-  const contextId = useMemo(
-    () => uniqueContextId ?? Symbol('doc-tree'),
-    [uniqueContextId],
-  );
-
-  const registerRowElement = useCallback(
-    (id: string, el: HTMLElement | null) => {
-      if (el) {
-        rowElementsRef.current.set(id, el);
-        if (pendingFocusIdRef.current === id) {
-          pendingFocusIdRef.current = null;
-          // rAF lets the virtualizer settle layout/transform before focus,
-          // so the freshly-scrolled-in row is actually painted in view.
-          requestAnimationFrame(() => el.focus());
-        }
-      } else {
-        rowElementsRef.current.delete(id);
-      }
-    },
-    [],
-  );
-
-  // Stable live tree accessor — keeps the row useEffect deps stable across
-  // tree mutations.
-  const rootDataRef = useRef(data);
-  rootDataRef.current = data;
-  const getRootData = useCallback(() => rootDataRef.current, []);
-
-  // Flat visible list drives virtualization. Re-flattens on data or openIds
-  // change — cheap O(N) walk of the loaded tree.
-  const flat = useMemo(
-    () => flattenVisible(data, openIds),
-    [data, openIds],
-  );
-
-  // Membership lookup for the flat list. Used to validate activeId/selectedId
-  // before promoting them to the effective active row.
-  const flatIds = useMemo(() => new Set(flat.map((r) => r.node.id)), [flat]);
-
-  // Effective active row for tabindex purposes. Prefers user-focused row,
-  // then the currently selected page, then the first visible row. The user's
-  // arrow / Home / End / typeahead navigation updates activeId via the focus
-  // event delegated on the <ul>; explicit clicks also flow through focus.
-  const effectiveActiveId = useMemo(() => {
-    if (activeId && flatIds.has(activeId)) return activeId;
-    if (selectedId && flatIds.has(selectedId)) return selectedId;
-    return flat[0]?.node.id;
-  }, [activeId, selectedId, flatIds, flat]);
-
-  const virtualizer = useVirtualizer({
-    count: flat.length,
-    getScrollElement: () => scrollRef.current,
-    estimateSize: () => rowHeight,
-    overscan: 10,
-  });
-
-  useImperativeHandle(
-    ref,
-    (): DocTreeApi => ({
-      select: (id, opts) => {
-        onSelect?.(id);
-        const idx = flat.findIndex((r) => r.node.id === id);
-        if (idx >= 0 && opts?.scrollIntoView) {
-          virtualizer.scrollToIndex(idx, { align: 'auto' });
-        }
-        if (opts?.focus) rowElementsRef.current.get(id)?.focus();
-      },
-      scrollTo: (id) => {
-        const idx = flat.findIndex((r) => r.node.id === id);
-        if (idx >= 0) virtualizer.scrollToIndex(idx, { align: 'auto' });
-      },
-      focus: (id) => {
-        rowElementsRef.current.get(id)?.focus();
-      },
-    }),
-    [onSelect, flat, virtualizer],
-  );
-
-  // Auto-scroll the container during drag so users can target rows currently
-  // scrolled off-screen. Scoped to drags originating in this DocTree instance
-  // via uniqueContextId.
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    return autoScrollForElements({
-      element: el,
-      canScroll: ({ source }) =>
-        source.data.uniqueContextId === contextId,
-    });
-  }, [contextId]);
-
-  // Scroll the selected row into view when it enters the flat list. If the
-  // row is already fully visible, leave the user's scroll position alone —
-  // only scroll when it's off-screen, and when we do, center it for context.
-  // Deep pages may not be in flat at the moment selectedId changes (ancestors
-  // still lazy-loading); the effect re-fires once flat contains the row.
-  // Guarded by a ref so subsequent flat changes don't fight manual scroll.
-  const lastScrolledIdRef = useRef<string | undefined>(undefined);
-  useEffect(() => {
-    if (!selectedId) {
-      lastScrolledIdRef.current = undefined;
-      return;
-    }
-    if (lastScrolledIdRef.current === selectedId) return;
-    const idx = flat.findIndex((r) => r.node.id === selectedId);
-    if (idx < 0) return;
-
-    const containerHeight = scrollRef.current?.clientHeight ?? 0;
-    const scrollOffset = virtualizer.scrollOffset ?? 0;
-    const item = virtualizer
-      .getVirtualItems()
-      .find((v) => v.index === idx);
-    const isFullyVisible =
-      !!item &&
-      item.start >= scrollOffset &&
-      item.start + item.size <= scrollOffset + containerHeight;
-
-    if (!isFullyVisible) {
-      virtualizer.scrollToIndex(idx, { align: 'center' });
-    }
-    lastScrolledIdRef.current = selectedId;
-  }, [selectedId, flat, virtualizer]);
-
-  // Keyboard navigation handler — single delegated listener on the <ul role="tree">.
-  // The focused row is identified by walking up the DOM to the nearest element
-  // carrying data-row-id, so this works whether the user has focused the row
-  // itself or one of its inner buttons (chevron, +). No per-row re-renders;
-  // focus is moved via .focus() on the registered element, with a pending-id
-  // hand-off when the target row is currently virtualized out of view.
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLUListElement>) => {
-      // Ctrl/Alt/Meta are reserved for browser/OS shortcuts; bail out.
-      // Shift is allowed through so typeahead can match capital letters.
-      if (e.altKey || e.ctrlKey || e.metaKey) return;
-      const isNavKey =
-        !e.shiftKey &&
-        (e.key === 'ArrowDown' ||
-          e.key === 'ArrowUp' ||
-          e.key === 'ArrowLeft' ||
-          e.key === 'ArrowRight' ||
-          e.key === 'Home' ||
-          e.key === 'End');
-      // Star expands all sibling subtrees of the focused row (WAI-ARIA tree
-      // pattern). Allowed with Shift since on most keyboards Shift+8 is how
-      // "*" is produced. Handled separately from typeahead.
-      const isStarKey = e.key === '*';
-      // Space activates the focused row — same effect as clicking it. Native
-      // <a> doesn't get this for free (only <button> does), so we wire it up
-      // explicitly to satisfy the WAI-ARIA tree pattern.
-      const isActivateKey = e.key === ' ';
-      // Single printable character → typeahead. e.key.length === 1 excludes
-      // multi-char names like "ArrowDown", "Enter", "Tab", etc.
-      const isTypeahead =
-        e.key.length === 1 && !isNavKey && !isStarKey && !isActivateKey;
-      if (!isNavKey && !isTypeahead && !isStarKey && !isActivateKey) return;
-
-      const target = e.target as HTMLElement;
-      if (target.matches('input, textarea, [contenteditable="true"]')) return;
-      const rowEl = target.closest('[data-row-id]');
-      if (!rowEl) return;
-      const id = rowEl.getAttribute('data-row-id');
-      if (!id) return;
-
-      const idx = flat.findIndex((r) => r.node.id === id);
-      if (idx < 0) return;
-
-      const focusByIndex = (targetIdx: number) => {
-        if (targetIdx < 0 || targetIdx >= flat.length) return;
-        const targetId = flat[targetIdx].node.id;
-        const existing = rowElementsRef.current.get(targetId);
-        if (existing) {
-          existing.focus();
-        } else {
-          pendingFocusIdRef.current = targetId;
-          virtualizer.scrollToIndex(targetIdx, { align: 'auto' });
-        }
-      };
-
-      // Space activates the focused row by synthesizing a click on the
-      // registered row element (its <a> Link). Skip if focus is on an inner
-      // button (chevron, +, menu) — those handle Space via native button
-      // semantics, and intercepting here would block their default behavior.
-      if (isActivateKey) {
-        const registered = rowElementsRef.current.get(id);
-        if (target === registered) {
-          e.preventDefault();
-          registered.click();
-        }
-        return;
-      }
-
-      // Typeahead: accumulate printable chars, jump to next row whose label
-      // starts with the buffer. Same-letter presses cycle through matches; a
-      // multi-char buffer searches from the current row so the user can
-      // refine the prefix. Buffer resets after ~500ms of no typing.
-      if (isTypeahead) {
-        e.preventDefault();
-        const wasEmpty = typeaheadBufferRef.current.length === 0;
-        typeaheadBufferRef.current = (
-          typeaheadBufferRef.current + e.key
-        ).toLowerCase();
-        const buffer = typeaheadBufferRef.current;
-        if (typeaheadTimerRef.current) {
-          clearTimeout(typeaheadTimerRef.current);
-        }
-        typeaheadTimerRef.current = setTimeout(() => {
-          typeaheadBufferRef.current = '';
-          typeaheadTimerRef.current = null;
-        }, 500);
-        // Single-char buffer cycles to the next match (start at idx + 1);
-        // multi-char buffer can keep matching the current row.
-        const startIdx = wasEmpty ? (idx + 1) % flat.length : idx;
-        for (let i = 0; i < flat.length; i++) {
-          const probeIdx = (startIdx + i) % flat.length;
-          const label = getDragLabel(flat[probeIdx].node).toLowerCase();
-          if (label.startsWith(buffer)) {
-            focusByIndex(probeIdx);
-            break;
-          }
-        }
-        return;
-      }
-
-      const row = flat[idx];
-      const hasChildren =
-        (row.node.children && row.node.children.length > 0) ||
-        (row.node as { hasChildren?: boolean }).hasChildren === true;
-      const isOpen = openIds.has(row.node.id);
-
-      // Asterisk: expand every sibling subtree at the focused row's level.
-      // Walks the authoritative tree (not flat, which only carries visible
-      // rows) so we also expand siblings whose own subtree is currently
-      // collapsed. Focus and selection stay put per the WAI-ARIA pattern.
-      if (isStarKey) {
-        e.preventDefault();
-        const info = treeModel.siblingsOf(rootDataRef.current, row.node.id);
-        if (info) {
-          for (const sib of info.siblings) {
-            const sibHasChildren =
-              (sib.children && sib.children.length > 0) ||
-              (sib as { hasChildren?: boolean }).hasChildren === true;
-            if (sibHasChildren && !openIds.has(sib.id)) {
-              onToggle(sib.id, true);
-            }
-          }
-        }
-        return;
-      }
-
-      switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault();
-          focusByIndex(idx + 1);
-          break;
-        case 'ArrowUp':
-          e.preventDefault();
-          focusByIndex(idx - 1);
-          break;
-        case 'ArrowRight':
-          e.preventDefault();
-          if (hasChildren && !isOpen) {
-            onToggle(row.node.id, true);
-          } else if (
-            isOpen &&
-            row.node.children &&
-            row.node.children.length > 0
-          ) {
-            focusByIndex(idx + 1);
-          }
-          break;
-        case 'ArrowLeft': {
-          e.preventDefault();
-          if (isOpen && hasChildren) {
-            onToggle(row.node.id, false);
-          } else {
-            // Move to parent — first preceding row with smaller level.
-            // Bounded by sibling-count to parent in the flat list; tree depth
-            // and sibling counts are small in practice.
-            const currentLevel = row.level;
-            for (let i = idx - 1; i >= 0; i--) {
-              if (flat[i].level < currentLevel) {
-                focusByIndex(i);
-                break;
-              }
-            }
-          }
-          break;
-        }
-        case 'Home':
-          e.preventDefault();
-          focusByIndex(0);
-          break;
-        case 'End':
-          e.preventDefault();
-          focusByIndex(flat.length - 1);
-          break;
-      }
-    },
-    [flat, openIds, onToggle, virtualizer, getDragLabel],
-  );
-
-  // Clear the typeahead timer if the component unmounts mid-buffer.
-  useEffect(
-    () => () => {
-      if (typeaheadTimerRef.current) clearTimeout(typeaheadTimerRef.current);
-    },
-    [],
-  );
-
-  // Event-delegated focus tracking — when any descendant (a row's Link, or an
-  // inner action button) gains focus, mark the enclosing row as active. Keeps
-  // tabIndex aligned with the user's current position whether they got there
-  // by click, arrow nav, or focusByIndex's programmatic .focus() call.
-  const handleFocusIn = useCallback(
-    (e: React.FocusEvent<HTMLUListElement>) => {
-      const rowEl = (e.target as HTMLElement).closest('[data-row-id]');
-      const id = rowEl?.getAttribute('data-row-id');
-      if (id) setActiveId(id);
-    },
-    [],
-  );
-
-  if (data.length === 0 && emptyState) {
-    return <div className={styles.treeContainer}>{emptyState}</div>;
-  }
-
-  const virtualItems = virtualizer.getVirtualItems();
-  const totalSize = virtualizer.getTotalSize();
-
-  return (
-    <div ref={scrollRef} className={styles.treeContainer}>
-      <ul
-        role="tree"
-        aria-label={ariaLabel}
-        onKeyDown={handleKeyDown}
-        onFocus={handleFocusIn}
-        style={{
-          position: 'relative',
-          height: totalSize,
-          margin: 0,
-          padding: 0,
-          listStyle: 'none',
-        }}
-      >
-        {virtualItems.map((virtualItem) => {
-          const row = flat[virtualItem.index];
-          return (
-            <li
-              key={row.node.id}
-              // role="none" — the treeitem role lives on the focusable child
-              // (the row's <a>), so screen readers announce "treeitem" on
-              // navigation. The <li> is just layout glue.
-              role="none"
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                transform: `translateY(${virtualItem.start}px)`,
-              }}
-            >
-              <DocTreeRow
-                node={row.node}
-                level={row.level}
-                isLastSibling={row.isLastSibling}
-                openIds={openIds}
-                selectedId={selectedId}
-                activeId={effectiveActiveId}
-                renderRow={renderRow}
-                indentPerLevel={indentPerLevel}
-                onMove={onMove}
-                onToggle={onToggle}
-                readOnly={readOnly}
-                disableDrag={disableDrag}
-                disableDrop={disableDrop}
-                getDragLabel={getDragLabel}
-                contextId={contextId}
-                registerRowElement={registerRowElement}
-                getRootData={getRootData}
-              />
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}
-
-export const DocTree = forwardRef(DocTreeInner) as <T extends object>(
-  props: DocTreeProps<T> & { ref?: Ref<DocTreeApi> },
-) => ReturnType<typeof DocTreeInner>;

apps/client/src/features/page/tree/components/space-tree-node-menu.tsx

@@ -1,259 +0,0 @@
-import { useAtom } from "jotai";
-import { useTranslation } from "react-i18next";
-import { useParams } from "react-router-dom";
-import { ActionIcon, Menu, rem } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { notifications } from "@mantine/notifications";
-import {
-  IconArrowRight,
-  IconCopy,
-  IconDotsVertical,
-  IconFileExport,
-  IconLink,
-  IconStar,
-  IconStarFilled,
-  IconTrash,
-} from "@tabler/icons-react";
-
-import ExportModal from "@/components/common/export-modal";
-import MovePageModal from "@/features/page/components/move-page-modal.tsx";
-import CopyPageModal from "@/features/page/components/copy-page-modal.tsx";
-import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
-import { duplicatePage } from "@/features/page/services/page-service.ts";
-import { useClipboard } from "@/hooks/use-clipboard";
-import { getAppUrl } from "@/lib/config.ts";
-import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
-import {
-  useFavoriteIds,
-  useAddFavoriteMutation,
-  useRemoveFavoriteMutation,
-} from "@/features/favorite/queries/favorite-query";
-
-import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
-import { treeModel } from "@/features/page/tree/model/tree-model";
-import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
-import type { SpaceTreeNode } from "@/features/page/tree/types.ts";
-
-export interface NodeMenuProps {
-  node: SpaceTreeNode;
-  canEdit: boolean;
-}
-
-export function NodeMenu({ node, canEdit }: NodeMenuProps) {
-  const { t } = useTranslation();
-  const clipboard = useClipboard({ timeout: 500 });
-  const { spaceSlug } = useParams();
-  const { openDeleteModal } = useDeletePageModal();
-  const { handleDelete } = useTreeMutation(node.spaceId);
-  const [data, setData] = useAtom(treeDataAtom);
-  const emit = useQueryEmit();
-  const [exportOpened, { open: openExportModal, close: closeExportModal }] =
-    useDisclosure(false);
-  const [
-    movePageModalOpened,
-    { open: openMovePageModal, close: closeMoveSpaceModal },
-  ] = useDisclosure(false);
-  const [
-    copyPageModalOpened,
-    { open: openCopyPageModal, close: closeCopySpaceModal },
-  ] = useDisclosure(false);
-  const favoriteIds = useFavoriteIds("page", node.spaceId);
-  const addFavorite = useAddFavoriteMutation();
-  const removeFavorite = useRemoveFavoriteMutation();
-  const isFavorited = favoriteIds.has(node.id);
-
-  const handleCopyLink = () => {
-    const pageUrl =
-      getAppUrl() + buildPageUrl(spaceSlug, node.slugId, node.name);
-    clipboard.copy(pageUrl);
-    notifications.show({ message: t("Link copied") });
-  };
-
-  const handleDuplicatePage = async () => {
-    try {
-      const duplicatedPage = await duplicatePage({ pageId: node.id });
-
-      // figure out parent + insertion index
-      const siblings = treeModel.siblingsOf(data, node.id);
-      const parentId = siblings?.parentId ?? null;
-      const currentIndex = siblings?.index ?? 0;
-      const newIndex = currentIndex + 1;
-
-      const treeNodeData: SpaceTreeNode = {
-        id: duplicatedPage.id,
-        slugId: duplicatedPage.slugId,
-        name: duplicatedPage.title,
-        position: duplicatedPage.position,
-        spaceId: duplicatedPage.spaceId,
-        parentPageId: duplicatedPage.parentPageId,
-        icon: duplicatedPage.icon,
-        hasChildren: duplicatedPage.hasChildren,
-        canEdit: true,
-        children: [],
-      };
-
-      setData((prev) =>
-        treeModel.insert(prev, parentId, treeNodeData, newIndex),
-      );
-
-      setTimeout(() => {
-        emit({
-          operation: "addTreeNode",
-          spaceId: node.spaceId,
-          payload: {
-            parentId,
-            index: newIndex,
-            data: treeNodeData,
-          },
-        });
-      }, 50);
-
-      notifications.show({ message: t("Page duplicated successfully") });
-    } catch (err: any) {
-      notifications.show({
-        message: err?.response?.data?.message || "An error occurred",
-        color: "red",
-      });
-    }
-  };
-
-  return (
-    <>
-      <Menu shadow="md" width={200}>
-        <Menu.Target>
-          <ActionIcon
-            variant="transparent"
-            c="gray"
-            aria-label={t("Page menu")}
-            tabIndex={-1}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-            }}
-          >
-            <IconDotsVertical
-              style={{ width: rem(20), height: rem(20) }}
-              stroke={2}
-            />
-          </ActionIcon>
-        </Menu.Target>
-
-        <Menu.Dropdown>
-          <Menu.Item
-            leftSection={<IconLink size={16} />}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              handleCopyLink();
-            }}
-          >
-            {t("Copy link")}
-          </Menu.Item>
-
-          <Menu.Item
-            leftSection={
-              isFavorited ? <IconStarFilled size={16} /> : <IconStar size={16} />
-            }
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              if (isFavorited) {
-                removeFavorite.mutate({ type: "page", pageId: node.id });
-              } else {
-                addFavorite.mutate({ type: "page", pageId: node.id });
-              }
-            }}
-          >
-            {isFavorited ? t("Remove from favorites") : t("Add to favorites")}
-          </Menu.Item>
-
-          <Menu.Item
-            leftSection={<IconFileExport size={16} />}
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              openExportModal();
-            }}
-          >
-            {t("Export page")}
-          </Menu.Item>
-
-          {canEdit && (
-            <>
-              <Menu.Item
-                leftSection={<IconCopy size={16} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  handleDuplicatePage();
-                }}
-              >
-                {t("Duplicate")}
-              </Menu.Item>
-
-              <Menu.Item
-                leftSection={<IconArrowRight size={16} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  openMovePageModal();
-                }}
-              >
-                {t("Move")}
-              </Menu.Item>
-
-              <Menu.Item
-                leftSection={<IconCopy size={16} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  openCopyPageModal();
-                }}
-              >
-                {t("Copy to space")}
-              </Menu.Item>
-
-              <Menu.Divider />
-              <Menu.Item
-                c="red"
-                leftSection={<IconTrash size={16} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  openDeleteModal({
-                    onConfirm: () => handleDelete(node.id),
-                  });
-                }}
-              >
-                {t("Move to trash")}
-              </Menu.Item>
-            </>
-          )}
-        </Menu.Dropdown>
-      </Menu>
-
-      <MovePageModal
-        pageId={node.id}
-        slugId={node.slugId}
-        currentSpaceSlug={spaceSlug}
-        onClose={closeMoveSpaceModal}
-        open={movePageModalOpened}
-      />
-
-      <CopyPageModal
-        pageId={node.id}
-        currentSpaceSlug={spaceSlug}
-        onClose={closeCopySpaceModal}
-        open={copyPageModalOpened}
-      />
-
-      <ExportModal
-        type="page"
-        id={node.id}
-        open={exportOpened}
-        onClose={closeExportModal}
-      />
-    </>
-  );
-}

apps/client/src/features/page/tree/components/space-tree-row.tsx

@@ -1,288 +0,0 @@
-import { useRef } from "react";
-import { Link, useParams } from "react-router-dom";
-import { useAtom } from "jotai";
-import { useTranslation } from "react-i18next";
-import { ActionIcon, rem } from "@mantine/core";
-import {
-  IconChevronDown,
-  IconChevronRight,
-  IconFileDescription,
-  IconPlus,
-  IconPointFilled,
-} from "@tabler/icons-react";
-
-import EmojiPicker from "@/components/ui/emoji-picker.tsx";
-import { queryClient } from "@/main.tsx";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
-import { getPageById } from "@/features/page/services/page-service.ts";
-import {
-  useUpdatePageMutation,
-  fetchAllAncestorChildren,
-} from "@/features/page/queries/page-query.ts";
-import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
-import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
-import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
-
-import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
-import { treeModel } from "@/features/page/tree/model/tree-model";
-import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
-import type { SpaceTreeNode } from "@/features/page/tree/types.ts";
-import type { RenderRowProps } from "./doc-tree";
-import { NodeMenu } from "./space-tree-node-menu";
-import classes from "@/features/page/tree/styles/tree.module.css";
-import { updateTreeNodeIcon } from "@/features/page/tree/utils/utils.ts";
-
-type SpaceTreeRowProps = RenderRowProps<SpaceTreeNode> & {
-  readOnly: boolean;
-};
-
-export function SpaceTreeRow({
-  node,
-  isOpen,
-  hasChildren,
-  toggleOpen,
-  rowRef,
-  tabIndex,
-  treeItemProps,
-  readOnly,
-}: SpaceTreeRowProps) {
-  const { t } = useTranslation();
-  const { spaceSlug } = useParams();
-  const updatePageMutation = useUpdatePageMutation();
-  const [, setTreeData] = useAtom(treeDataAtom);
-  const emit = useQueryEmit();
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
-  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
-
-  const canEdit = !readOnly && node.canEdit !== false;
-  const pageUrl = buildPageUrl(spaceSlug, node.slugId, node.name);
-
-  const prefetchPage = () => {
-    timerRef.current = setTimeout(async () => {
-      const page = await queryClient.fetchQuery({
-        queryKey: ["pages", node.id],
-        queryFn: () => getPageById({ pageId: node.id }),
-        staleTime: 5 * 60 * 1000,
-      });
-      if (page?.slugId) {
-        queryClient.setQueryData(["pages", page.slugId], page);
-      }
-    }, 150);
-  };
-
-  const cancelPagePrefetch = () => {
-    if (timerRef.current) {
-      window.clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-  };
-
-  const handleUpdateNodeIcon = (nodeId: string, newIcon: string | null) => {
-    setTreeData((prev) =>
-      updateTreeNodeIcon(prev, nodeId, newIcon),
-    );
-  };
-
-  const handleEmojiIconClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-
-  const handleEmojiSelect = (emoji: { native: string }) => {
-    handleUpdateNodeIcon(node.id, emoji.native);
-    updatePageMutation
-      .mutateAsync({ pageId: node.id, icon: emoji.native })
-      .then((data) => {
-        setTimeout(() => {
-          emit({
-            operation: "updateOne",
-            spaceId: node.spaceId,
-            entity: ["pages"],
-            id: node.id,
-            payload: { icon: emoji.native, parentPageId: data.parentPageId },
-          });
-        }, 50);
-      });
-  };
-
-  const handleRemoveEmoji = () => {
-    handleUpdateNodeIcon(node.id, null);
-    updatePageMutation.mutateAsync({ pageId: node.id, icon: null });
-
-    setTimeout(() => {
-      emit({
-        operation: "updateOne",
-        spaceId: node.spaceId,
-        entity: ["pages"],
-        id: node.id,
-        payload: { icon: null },
-      });
-    }, 50);
-  };
-
-  const handleLoadChildren = async () => {
-    if (!node.hasChildren) return;
-    try {
-      const childrenTree = await fetchAllAncestorChildren({
-        pageId: node.id,
-        spaceId: node.spaceId,
-      });
-      setTreeData((prev) =>
-        treeModel.appendChildren(prev, node.id, childrenTree),
-      );
-    } catch (error) {
-      console.error("Failed to fetch children:", error);
-    }
-  };
-
-  return (
-    <Link
-      ref={rowRef as React.Ref<HTMLAnchorElement>}
-      to={pageUrl}
-      className={classes.node}
-      tabIndex={tabIndex}
-      {...treeItemProps}
-      onClick={() => {
-        if (mobileSidebarOpened) {
-          toggleMobileSidebar();
-        }
-      }}
-      onMouseEnter={prefetchPage}
-      onMouseLeave={cancelPagePrefetch}
-    >
-      <PageArrow
-        isOpen={isOpen}
-        hasChildren={hasChildren}
-        onToggle={toggleOpen}
-      />
-
-      <div onClick={handleEmojiIconClick} style={{ marginRight: "4px" }}>
-        <EmojiPicker
-          onEmojiSelect={handleEmojiSelect}
-          icon={
-            node.icon ? node.icon : <IconFileDescription size="18" />
-          }
-          readOnly={!canEdit}
-          removeEmojiAction={handleRemoveEmoji}
-          actionIconProps={{ tabIndex: -1 }}
-        />
-      </div>
-
-      <span className={classes.text}>{node.name || t("untitled")}</span>
-
-      <div className={classes.actions}>
-        <NodeMenu node={node} canEdit={canEdit} />
-
-        {canEdit && (
-          <CreateNode
-            node={node}
-            isOpen={isOpen}
-            hasChildren={hasChildren}
-            onToggle={toggleOpen}
-            onExpandTree={handleLoadChildren}
-          />
-        )}
-      </div>
-    </Link>
-  );
-}
-
-interface PageArrowProps {
-  isOpen: boolean;
-  hasChildren: boolean;
-  onToggle: () => void;
-}
-
-function PageArrow({ isOpen, hasChildren, onToggle }: PageArrowProps) {
-  const { t } = useTranslation();
-
-  if (!hasChildren) {
-    return (
-      <span
-        aria-hidden
-        style={{
-          width: 20,
-          height: 20,
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "var(--mantine-color-gray-6)",
-          flexShrink: 0,
-        }}
-      >
-        <IconPointFilled size={8} />
-      </span>
-    );
-  }
-
-  return (
-    <ActionIcon
-      size={20}
-      variant="subtle"
-      c="gray"
-      aria-label={isOpen ? t("Collapse") : t("Expand")}
-      aria-expanded={isOpen}
-      tabIndex={-1}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onToggle();
-      }}
-    >
-      {isOpen ? (
-        <IconChevronDown stroke={2} size={18} />
-      ) : (
-        <IconChevronRight stroke={2} size={18} />
-      )}
-    </ActionIcon>
-  );
-}
-
-interface CreateNodeProps {
-  node: SpaceTreeNode;
-  isOpen: boolean;
-  hasChildren: boolean;
-  onToggle: () => void;
-  onExpandTree: () => Promise<void> | void;
-}
-
-function CreateNode({
-  node,
-  isOpen,
-  hasChildren,
-  onToggle,
-  onExpandTree,
-}: CreateNodeProps) {
-  const { t } = useTranslation();
-  const { handleCreate } = useTreeMutation(node.spaceId);
-
-  async function handleClickCreate() {
-    if (node.hasChildren && !hasChildren) {
-      // Expand and lazy-load before creating a child. handleCreate reads the
-      // latest tree imperatively (via useStore) so we no longer need a
-      // setTimeout to wait for React to rerun the closure with fresh data.
-      if (!isOpen) onToggle();
-      await onExpandTree();
-    } else if (!isOpen) {
-      onToggle();
-    }
-    handleCreate(node.id);
-  }
-
-  return (
-    <ActionIcon
-      variant="transparent"
-      c="gray"
-      aria-label={t("Create page")}
-      tabIndex={-1}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        handleClickCreate();
-      }}
-    >
-      <IconPlus style={{ width: rem(20), height: rem(20) }} stroke={2} />
-    </ActionIcon>
-  );
-}

apps/client/src/features/page/tree/components/space-tree.tsx

@@ -1,47 +1,110 @@
-import { useAtom } from "jotai";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useParams } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-import { Text } from "@mantine/core";
+import {
+  NodeApi,
+  NodeRendererProps,
+  Tree,
+  TreeApi,
+  SimpleTree,
+} from "react-arborist";
+import { atom, useAtom } from "jotai";
+import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
 import {
   fetchAllAncestorChildren,
   useGetRootSidebarPagesQuery,
   usePageQuery,
+  useUpdatePageMutation,
 } from "@/features/page/queries/page-query.ts";
+import { useEffect, useRef, useState } from "react";
+import { Link, useParams } from "react-router-dom";
 import classes from "@/features/page/tree/styles/tree.module.css";
-import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
-import { openTreeNodesAtom } from "@/features/page/tree/atoms/open-tree-nodes-atom.ts";
+import { ActionIcon, Box, Menu, rem, Text } from "@mantine/core";
+import {
+  IconArrowRight,
+  IconChevronDown,
+  IconChevronRight,
+  IconCopy,
+  IconDotsVertical,
+  IconFileDescription,
+  IconFileExport,
+  IconLink,
+  IconPlus,
+  IconPointFilled,
+  IconStar,
+  IconStarFilled,
+  IconTrash,
+} from "@tabler/icons-react";
+import {
+  appendNodeChildrenAtom,
+  treeDataAtom,
+} from "@/features/page/tree/atoms/tree-data-atom.ts";
+import clsx from "clsx";
+import EmojiPicker from "@/components/ui/emoji-picker.tsx";
 import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
 import {
+  appendNodeChildren,
   buildTree,
   buildTreeWithChildren,
   mergeRootTrees,
+  updateTreeNodeIcon,
 } from "@/features/page/tree/utils/utils.ts";
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
-import { treeModel } from "@/features/page/tree/model/tree-model";
-import { getPageBreadcrumbs } from "@/features/page/services/page-service.ts";
-import { IPage } from "@/features/page/types/page.types.ts";
+import {
+  getPageBreadcrumbs,
+  getPageById,
+  getSidebarPages,
+} from "@/features/page/services/page-service.ts";
+import { IPage, SidebarPagesParams } from "@/features/page/types/page.types.ts";
+import { queryClient } from "@/main.tsx";
+import { OpenMap } from "react-arborist/dist/main/state/open-slice";
+import { useDisclosure, useElementSize, useMergedRef } from "@mantine/hooks";
+import { useClipboard } from "@/hooks/use-clipboard";
+import { dfs } from "react-arborist/dist/module/utils";
+import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
+import { buildPageUrl } from "@/features/page/page.utils.ts";
+import { notifications } from "@mantine/notifications";
+import { getAppUrl } from "@/lib/config.ts";
 import { extractPageSlugId } from "@/lib";
-import { DocTree } from "./doc-tree";
-import { SpaceTreeRow } from "./space-tree-row";
+import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
+import { useTranslation } from "react-i18next";
+import ExportModal from "@/components/common/export-modal";
+import MovePageModal from "../../components/move-page-modal.tsx";
+import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
+import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
+import CopyPageModal from "../../components/copy-page-modal.tsx";
+import { duplicatePage } from "../../services/page-service.ts";
+import { useFavoriteIds, useAddFavoriteMutation, useRemoveFavoriteMutation } from "@/features/favorite/queries/favorite-query";
 
 interface SpaceTreeProps {
   spaceId: string;
   readOnly: boolean;
 }
 
+const openTreeNodesAtom = atom<OpenMap>({});
+
 export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
   const { t } = useTranslation();
   const { pageSlug } = useParams();
-  const [data, setData] = useAtom(treeDataAtom);
-  const { handleMove } = useTreeMutation(spaceId);
+  const { data, setData, controllers } =
+    useTreeMutation<TreeApi<SpaceTreeNode>>(spaceId);
   const {
     data: pagesData,
     hasNextPage,
     fetchNextPage,
     isFetching,
-  } = useGetRootSidebarPagesQuery({ spaceId });
-  const [openTreeNodes, setOpenTreeNodes] = useAtom(openTreeNodesAtom);
+  } = useGetRootSidebarPagesQuery({
+    spaceId,
+  });
+  const [, setTreeApi] = useAtom<TreeApi<SpaceTreeNode>>(treeApiAtom);
+  const treeApiRef = useRef<TreeApi<SpaceTreeNode>>();
+  const [openTreeNodes, setOpenTreeNodes] = useAtom<OpenMap>(openTreeNodesAtom);
+  const rootElement = useRef<HTMLDivElement>();
+  const [isRootReady, setIsRootReady] = useState(false);
+  const { ref: sizeRef, width, height } = useElementSize();
+  const mergedRef = useMergedRef((element) => {
+    rootElement.current = element;
+    if (element && !isRootReady) {
+      setIsRootReady(true);
+    }
+  }, sizeRef);
   const [isDataLoaded, setIsDataLoaded] = useState(false);
   const spaceIdRef = useRef(spaceId);
   spaceIdRef.current = spaceId;
@@ -60,24 +123,23 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
   }, [hasNextPage, fetchNextPage, isFetching, spaceId]);
 
   useEffect(() => {
-    if (!pagesData?.pages || hasNextPage) return;
+    if (pagesData?.pages && !hasNextPage) {
+      const allItems = pagesData.pages.flatMap((page) => page.items);
+      const treeData = buildTree(allItems);
 
-    const allItems = pagesData.pages.flatMap((page) => page.items);
-    const treeData = buildTree(allItems);
+      setData((prev) => {
+        // fresh space; full reset
+        if (prev.length === 0 || prev[0]?.spaceId !== spaceId) {
+          setIsDataLoaded(true);
+          setOpenTreeNodes({});
+          return treeData;
+        }
 
-    setData((prev) => {
-      // Keep nodes belonging to other spaces — filteredData filters by spaceId
-      // for rendering, so accumulating is safe. Preserves lazy-loaded children
-      // and open-state when the user returns to a previously-visited space.
-      const otherSpaces = prev.filter((n) => n?.spaceId !== spaceId);
-      const currentSpace = prev.filter((n) => n?.spaceId === spaceId);
-      const refreshed =
-        currentSpace.length > 0
-          ? mergeRootTrees(currentSpace, treeData)
-          : treeData;
-      return [...otherSpaces, ...refreshed];
-    });
-    setIsDataLoaded(true);
+        // same space; append only missing roots
+        setIsDataLoaded(true);
+        return mergeRootTrees(prev, treeData);
+      });
+    }
   }, [pagesData, hasNextPage, spaceId]);
 
   useEffect(() => {
@@ -86,7 +148,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
     const fetchData = async () => {
       if (isDataLoaded && currentPage) {
         // check if pageId node is present in the tree
-        const node = treeModel.find(data, currentPage.id);
+        const node = dfs(treeApiRef.current?.root, currentPage.id);
         if (node) {
           // if node is found, no need to traverse its ancestors
           return;
@@ -98,12 +160,14 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
 
         if (spaceIdRef.current !== effectSpaceId) return;
 
-        if (ancestors && ancestors.length > 1) {
+        if (ancestors && ancestors?.length > 1) {
           let flatTreeItems = [...buildTree(ancestors)];
 
           const fetchAndUpdateChildren = async (ancestor: IPage) => {
             // we don't want to fetch the children of the opened page
-            if (ancestor.id === currentPage.id) return;
+            if (ancestor.id === currentPage.id) {
+              return;
+            }
             const children = await fetchAllAncestorChildren({
               pageId: ancestor.id,
               spaceId: ancestor.spaceId,
@@ -121,6 +185,7 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
             fetchAndUpdateChildren(ancestor),
           );
 
+          // Wait for all fetch operations to complete
           Promise.all(fetchPromises).then(() => {
             if (spaceIdRef.current !== effectSpaceId) return;
 
@@ -130,24 +195,15 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
             const rootChild = ancestorsTree[0];
 
             // attach built ancestors to tree using functional updater
+            // to avoid stale closure overwriting the current tree data
             setData((currentData) =>
-              treeModel.appendChildren(
-                currentData,
-                rootChild.id,
-                rootChild.children ?? [],
-              ),
+              appendNodeChildren(currentData, rootChild.id, rootChild.children),
             );
 
-            // open all ancestors of the current page. DocTree picks up the
-            // selectedId change and scrolls the row into view on its own once
-            // flat contains it.
-            setOpenTreeNodes((prev) => {
-              const next = { ...prev };
-              for (const a of ancestors) {
-                if (a.id !== currentPage.id) next[a.id] = true;
-              }
-              return next;
-            });
+            setTimeout(() => {
+              // focus on node and open all parents
+              treeApiRef.current?.select(currentPage.id);
+            }, 100);
           });
         }
       }
@@ -156,76 +212,556 @@ export default function SpaceTree({ spaceId, readOnly }: SpaceTreeProps) {
     fetchData();
   }, [isDataLoaded, currentPage?.id]);
 
-  const openIds = useMemo(
-    () => new Set(Object.keys(openTreeNodes).filter((k) => openTreeNodes[k])),
-    [openTreeNodes],
-  );
+  useEffect(() => {
+    if (currentPage?.id) {
+      setTimeout(() => {
+        // focus on node and open all parents
+        treeApiRef.current?.select(currentPage.id, { align: "auto" });
+      }, 200);
+    } else {
+      treeApiRef.current?.deselectAll();
+    }
+  }, [currentPage?.id]);
 
-  const handleToggle = useCallback(
-    async (id: string, isOpen: boolean) => {
-      setOpenTreeNodes((prev) => ({ ...prev, [id]: isOpen }));
-      if (isOpen) {
-        const node = treeModel.find(data, id) as SpaceTreeNode | null;
-        if (
-          node?.hasChildren &&
-          (!node.children || node.children.length === 0)
-        ) {
-          const fetched = await fetchAllAncestorChildren({
-            pageId: id,
-            spaceId: node.spaceId,
-          });
-          setData((prev) => treeModel.appendChildren(prev, id, fetched));
-        }
-      }
-    },
-    [data, setOpenTreeNodes, setData],
-  );
+  // Clean up tree API on unmount
+  useEffect(() => {
+    return () => {
+      // @ts-ignore
+      setTreeApi(null);
+    };
+  }, [setTreeApi]);
 
-  const filteredData = useMemo(
-    () => data.filter((node) => node?.spaceId === spaceId),
-    [data, spaceId],
-  );
-
-  // Stable callbacks for DocTree. Without these, every parent render recreates
-  // the props and tears down every row's draggable/dropTarget subscription,
-  // defeating memo(DocTreeRow).
-  const renderRow = useCallback(
-    (rowProps: Parameters<typeof SpaceTreeRow>[0]) => (
-      <SpaceTreeRow {...rowProps} readOnly={readOnly} />
-    ),
-    [readOnly],
-  );
-  const disableDragDrop = useCallback(
-    (n: SpaceTreeNode) => n.canEdit === false,
-    [],
-  );
-  const getDragLabel = useCallback(
-    (n: SpaceTreeNode) => n.name || t("untitled"),
-    [t],
-  );
+  const filteredData = data.filter((node) => node?.spaceId === spaceId);
 
   return (
-    <div className={classes.treeContainer}>
+    <div ref={mergedRef} className={classes.treeContainer}>
       {isDataLoaded && filteredData.length === 0 && (
         <Text size="xs" c="dimmed" py="xs" px="sm">
           {t("No pages yet")}
         </Text>
       )}
-      {isDataLoaded && filteredData.length > 0 && (
-        <DocTree<SpaceTreeNode>
+      {isRootReady && rootElement.current && (
+        <Tree
           data={filteredData}
-          openIds={openIds}
-          selectedId={currentPage?.id}
-          renderRow={renderRow}
-          onMove={handleMove}
-          onToggle={handleToggle}
-          readOnly={readOnly}
-          disableDrag={disableDragDrop}
-          disableDrop={disableDragDrop}
-          getDragLabel={getDragLabel}
-          aria-label={t("Pages")}
-        />
+          disableDrag={
+            readOnly
+              ? true
+              : (data) => {
+                  return data.canEdit === false;
+                }
+          }
+          disableDrop={
+            readOnly
+              ? true
+              : ({ parentNode }) => parentNode?.data?.canEdit === false
+          }
+          disableEdit={readOnly ? true : (data) => data.canEdit === false}
+          {...controllers}
+          width={width}
+          height={rootElement.current.clientHeight}
+          ref={(ref) => {
+            treeApiRef.current = ref;
+            if (ref) {
+              //@ts-ignore
+              setTreeApi(ref);
+            }
+          }}
+          openByDefault={false}
+          disableMultiSelection={true}
+          className={classes.tree}
+          rowClassName={classes.row}
+          rowHeight={30}
+          overscanCount={10}
+          dndRootElement={rootElement.current}
+          onToggle={() => {
+            setOpenTreeNodes(treeApiRef.current?.openState);
+          }}
+          initialOpenState={openTreeNodes}
+        >
+          {Node}
+        </Tree>
       )}
     </div>
   );
 }
+
+function Node({ node, style, dragHandle, tree }: NodeRendererProps<any>) {
+  const { t } = useTranslation();
+  const updatePageMutation = useUpdatePageMutation();
+  const [treeData, setTreeData] = useAtom(treeDataAtom);
+  const [, appendChildren] = useAtom(appendNodeChildrenAtom);
+  const emit = useQueryEmit();
+  const { spaceSlug } = useParams();
+  const timerRef = useRef(null);
+  const [mobileSidebarOpened] = useAtom(mobileSidebarAtom);
+  const toggleMobileSidebar = useToggleSidebar(mobileSidebarAtom);
+
+  const prefetchPage = () => {
+    timerRef.current = setTimeout(async () => {
+      const page = await queryClient.fetchQuery({
+        queryKey: ["pages", node.data.id],
+        queryFn: () => getPageById({ pageId: node.data.id }),
+        staleTime: 5 * 60 * 1000,
+      });
+      if (page?.slugId) {
+        queryClient.setQueryData(["pages", page.slugId], page);
+      }
+    }, 150);
+  };
+
+  const cancelPagePrefetch = () => {
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  };
+
+  async function handleLoadChildren(node: NodeApi<SpaceTreeNode>) {
+    if (!node.data.hasChildren) return;
+    // in conflict with use-query-subscription.ts => case "addTreeNode","moveTreeNode" etc with websocket
+    // if (node.data.children && node.data.children.length > 0) {
+    //   return;
+    // }
+
+    try {
+      const params: SidebarPagesParams = {
+        pageId: node.data.id,
+        spaceId: node.data.spaceId,
+      };
+
+      const childrenTree = await fetchAllAncestorChildren(params);
+
+      appendChildren({
+        parentId: node.data.id,
+        children: childrenTree,
+      });
+    } catch (error) {
+      console.error("Failed to fetch children:", error);
+    }
+  }
+
+  const handleUpdateNodeIcon = (nodeId: string, newIcon: string) => {
+    const updatedTree = updateTreeNodeIcon(treeData, nodeId, newIcon);
+    setTreeData(updatedTree);
+  };
+
+  const handleEmojiIconClick = (e: any) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleEmojiSelect = (emoji: { native: string }) => {
+    handleUpdateNodeIcon(node.id, emoji.native);
+    updatePageMutation
+      .mutateAsync({ pageId: node.id, icon: emoji.native })
+      .then((data) => {
+        setTimeout(() => {
+          emit({
+            operation: "updateOne",
+            spaceId: node.data.spaceId,
+            entity: ["pages"],
+            id: node.id,
+            payload: { icon: emoji.native, parentPageId: data.parentPageId },
+          });
+        }, 50);
+      });
+  };
+
+  const handleRemoveEmoji = () => {
+    handleUpdateNodeIcon(node.id, null);
+    updatePageMutation.mutateAsync({ pageId: node.id, icon: null });
+
+    setTimeout(() => {
+      emit({
+        operation: "updateOne",
+        spaceId: node.data.spaceId,
+        entity: ["pages"],
+        id: node.id,
+        payload: { icon: null },
+      });
+    }, 50);
+  };
+
+  if (
+    node.willReceiveDrop &&
+    node.isClosed &&
+    (node.children.length > 0 || node.data.hasChildren)
+  ) {
+    handleLoadChildren(node);
+    setTimeout(() => {
+      if (node.state.willReceiveDrop) {
+        node.open();
+      }
+    }, 650);
+  }
+
+  const pageUrl = buildPageUrl(spaceSlug, node.data.slugId, node.data.name);
+
+  return (
+    <>
+      <Box
+        style={style}
+        className={clsx(classes.node, node.state)}
+        component={Link}
+        to={pageUrl}
+        // @ts-ignore
+        ref={dragHandle}
+        onClick={() => {
+          if (mobileSidebarOpened) {
+            toggleMobileSidebar();
+          }
+        }}
+        onMouseEnter={prefetchPage}
+        onMouseLeave={cancelPagePrefetch}
+      >
+        <PageArrow node={node} onExpandTree={() => handleLoadChildren(node)} />
+
+        <div onClick={handleEmojiIconClick} style={{ marginRight: "4px" }}>
+          <EmojiPicker
+            onEmojiSelect={handleEmojiSelect}
+            icon={
+              node.data.icon ? (
+                node.data.icon
+              ) : (
+                <IconFileDescription size="18" />
+              )
+            }
+            readOnly={
+              tree.props.disableEdit === true || node.data.canEdit === false
+            }
+            removeEmojiAction={handleRemoveEmoji}
+          />
+        </div>
+
+        <span className={classes.text}>{node.data.name || t("untitled")}</span>
+
+        <div className={classes.actions}>
+          <NodeMenu node={node} treeApi={tree} spaceId={node.data.spaceId} />
+
+          {tree.props.disableEdit !== true && node.data.canEdit !== false && (
+            <CreateNode
+              node={node}
+              treeApi={tree}
+              onExpandTree={() => handleLoadChildren(node)}
+            />
+          )}
+        </div>
+      </Box>
+    </>
+  );
+}
+
+interface CreateNodeProps {
+  node: NodeApi<SpaceTreeNode>;
+  treeApi: TreeApi<SpaceTreeNode>;
+  onExpandTree?: () => void;
+}
+
+function CreateNode({ node, treeApi, onExpandTree }: CreateNodeProps) {
+  const { t } = useTranslation();
+
+  function handleCreate() {
+    if (node.data.hasChildren && node.children.length === 0) {
+      node.toggle();
+      onExpandTree();
+
+      setTimeout(() => {
+        treeApi?.create({ type: "internal", parentId: node.id, index: 0 });
+      }, 500);
+    } else {
+      treeApi?.create({ type: "internal", parentId: node.id });
+    }
+  }
+
+  return (
+    <ActionIcon
+      variant="transparent"
+      c="gray"
+      aria-label={t("Create page")}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleCreate();
+      }}
+    >
+      <IconPlus style={{ width: rem(20), height: rem(20) }} stroke={2} />
+    </ActionIcon>
+  );
+}
+
+interface NodeMenuProps {
+  node: NodeApi<SpaceTreeNode>;
+  treeApi: TreeApi<SpaceTreeNode>;
+  spaceId: string;
+}
+
+function NodeMenu({ node, treeApi, spaceId }: NodeMenuProps) {
+  const { t } = useTranslation();
+  const clipboard = useClipboard({ timeout: 500 });
+  const { spaceSlug } = useParams();
+  const { openDeleteModal } = useDeletePageModal();
+  const [data, setData] = useAtom(treeDataAtom);
+  const emit = useQueryEmit();
+  const [exportOpened, { open: openExportModal, close: closeExportModal }] =
+    useDisclosure(false);
+  const [
+    movePageModalOpened,
+    { open: openMovePageModal, close: closeMoveSpaceModal },
+  ] = useDisclosure(false);
+  const [
+    copyPageModalOpened,
+    { open: openCopyPageModal, close: closeCopySpaceModal },
+  ] = useDisclosure(false);
+  const favoriteIds = useFavoriteIds("page", spaceId);
+  const addFavorite = useAddFavoriteMutation();
+  const removeFavorite = useRemoveFavoriteMutation();
+  const isFavorited = favoriteIds.has(node.data.id);
+
+  const handleCopyLink = () => {
+    const pageUrl =
+      getAppUrl() + buildPageUrl(spaceSlug, node.data.slugId, node.data.name);
+    clipboard.copy(pageUrl);
+    notifications.show({ message: t("Link copied") });
+  };
+
+  const handleDuplicatePage = async () => {
+    try {
+      const duplicatedPage = await duplicatePage({
+        pageId: node.id,
+      });
+
+      // Find the index of the current node
+      const parentId =
+        node.parent?.id === "__REACT_ARBORIST_INTERNAL_ROOT__"
+          ? null
+          : node.parent?.id;
+      const siblings = parentId ? node.parent.children : treeApi?.props.data;
+      const currentIndex =
+        siblings?.findIndex((sibling) => sibling.id === node.id) || 0;
+      const newIndex = currentIndex + 1;
+
+      // Add the duplicated page to the tree
+      const treeNodeData: SpaceTreeNode = {
+        id: duplicatedPage.id,
+        slugId: duplicatedPage.slugId,
+        name: duplicatedPage.title,
+        position: duplicatedPage.position,
+        spaceId: duplicatedPage.spaceId,
+        parentPageId: duplicatedPage.parentPageId,
+        icon: duplicatedPage.icon,
+        hasChildren: duplicatedPage.hasChildren,
+        canEdit: true,
+        children: [],
+      };
+
+      // Update local tree
+      const simpleTree = new SimpleTree(data);
+      simpleTree.create({
+        parentId,
+        index: newIndex,
+        data: treeNodeData,
+      });
+      setData(simpleTree.data);
+
+      // Emit socket event
+      setTimeout(() => {
+        emit({
+          operation: "addTreeNode",
+          spaceId: spaceId,
+          payload: {
+            parentId,
+            index: newIndex,
+            data: treeNodeData,
+          },
+        });
+      }, 50);
+
+      notifications.show({
+        message: t("Page duplicated successfully"),
+      });
+    } catch (err) {
+      notifications.show({
+        message: err.response?.data.message || "An error occurred",
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <>
+      <Menu shadow="md" width={200}>
+        <Menu.Target>
+          <ActionIcon
+            variant="transparent"
+            c="gray"
+            aria-label={t("Page menu")}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }}
+          >
+            <IconDotsVertical
+              style={{ width: rem(20), height: rem(20) }}
+              stroke={2}
+            />
+          </ActionIcon>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          <Menu.Item
+            leftSection={<IconLink size={16} />}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleCopyLink();
+            }}
+          >
+            {t("Copy link")}
+          </Menu.Item>
+
+          <Menu.Item
+            leftSection={isFavorited ? <IconStarFilled size={16} /> : <IconStar size={16} />}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (isFavorited) {
+                removeFavorite.mutate({ type: "page", pageId: node.data.id });
+              } else {
+                addFavorite.mutate({ type: "page", pageId: node.data.id });
+              }
+            }}
+          >
+            {isFavorited ? t("Remove from favorites") : t("Add to favorites")}
+          </Menu.Item>
+
+          <Menu.Item
+            leftSection={<IconFileExport size={16} />}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              openExportModal();
+            }}
+          >
+            {t("Export page")}
+          </Menu.Item>
+
+          {treeApi.props.disableEdit !== true &&
+            node.data.canEdit !== false && (
+              <>
+                <Menu.Item
+                  leftSection={<IconCopy size={16} />}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleDuplicatePage();
+                  }}
+                >
+                  {t("Duplicate")}
+                </Menu.Item>
+
+                <Menu.Item
+                  leftSection={<IconArrowRight size={16} />}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    openMovePageModal();
+                  }}
+                >
+                  {t("Move")}
+                </Menu.Item>
+
+                <Menu.Item
+                  leftSection={<IconCopy size={16} />}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    openCopyPageModal();
+                  }}
+                >
+                  {t("Copy to space")}
+                </Menu.Item>
+
+                <Menu.Divider />
+                <Menu.Item
+                  c="red"
+                  leftSection={<IconTrash size={16} />}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    openDeleteModal({ onConfirm: () => treeApi?.delete(node) });
+                  }}
+                >
+                  {t("Move to trash")}
+                </Menu.Item>
+              </>
+            )}
+        </Menu.Dropdown>
+      </Menu>
+
+      <MovePageModal
+        pageId={node.id}
+        slugId={node.data.slugId}
+        currentSpaceSlug={spaceSlug}
+        onClose={closeMoveSpaceModal}
+        open={movePageModalOpened}
+      />
+
+      <CopyPageModal
+        pageId={node.id}
+        currentSpaceSlug={spaceSlug}
+        onClose={closeCopySpaceModal}
+        open={copyPageModalOpened}
+      />
+
+      <ExportModal
+        type="page"
+        id={node.id}
+        open={exportOpened}
+        onClose={closeExportModal}
+      />
+    </>
+  );
+}
+
+interface PageArrowProps {
+  node: NodeApi<SpaceTreeNode>;
+  onExpandTree?: () => void;
+}
+
+function PageArrow({ node, onExpandTree }: PageArrowProps) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (node.isOpen) {
+      onExpandTree();
+    }
+  }, []);
+
+  return (
+    <ActionIcon
+      size={20}
+      variant="subtle"
+      c="gray"
+      aria-label={node.isOpen ? t("Collapse") : t("Expand")}
+      aria-expanded={node.isInternal ? node.isOpen : undefined}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        node.toggle();
+        onExpandTree();
+      }}
+    >
+      {node.isInternal ? (
+        node.children && (node.children.length > 0 || node.data.hasChildren) ? (
+          node.isOpen ? (
+            <IconChevronDown stroke={2} size={18} />
+          ) : (
+            <IconChevronRight stroke={2} size={18} />
+          )
+        ) : (
+          <IconPointFilled size={8} />
+        )
+      ) : null}
+    </ActionIcon>
+  );
+}

apps/client/src/features/page/tree/hooks/drop-op-to-move-payload.test.ts

@@ -1,100 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import type { SpaceTreeNode } from '@/features/page/tree/types';
-import { dropOpToMovePayload } from './drop-op-to-move-payload';
-
-vi.mock('fractional-indexing-jittered', () => ({
-  generateJitteredKeyBetween: (a: string | null, b: string | null) =>
-    `${a ?? 'START'}|${b ?? 'END'}`,
-}));
-
-const n = (id: string, position: string, children?: SpaceTreeNode[]): SpaceTreeNode =>
-  ({ id, position, children, name: id } as unknown as SpaceTreeNode);
-
-const tree: SpaceTreeNode[] = [
-  n('a', 'A', [n('a1', 'AA'), n('a2', 'AB')]),
-  n('b', 'B'),
-];
-
-describe('dropOpToMovePayload', () => {
-  it('reorder-before computes parentId + position between prev and target', () => {
-    const p = dropOpToMovePayload(tree, 'a2', {
-      kind: 'reorder-before',
-      targetId: 'a1',
-    });
-    expect(p).toEqual({ pageId: 'a2', parentPageId: 'a', position: 'START|AA' });
-  });
-
-  it('reorder-after computes position between target and next', () => {
-    const p = dropOpToMovePayload(tree, 'a1', {
-      kind: 'reorder-after',
-      targetId: 'a2',
-    });
-    expect(p).toEqual({ pageId: 'a1', parentPageId: 'a', position: 'AB|END' });
-  });
-
-  it('make-child appends with position after last child', () => {
-    const p = dropOpToMovePayload(tree, 'b', {
-      kind: 'make-child',
-      targetId: 'a',
-    });
-    expect(p).toEqual({ pageId: 'b', parentPageId: 'a', position: 'AB|END' });
-  });
-
-  it('reorder-before at root: parentPageId is null', () => {
-    const p = dropOpToMovePayload(tree, 'b', {
-      kind: 'reorder-before',
-      targetId: 'a',
-    });
-    expect(p).toEqual({ pageId: 'b', parentPageId: null, position: 'START|A' });
-  });
-
-  // Regression: when source is already adjacent to target, the BEFORE-tree
-  // treats source itself as the target's neighbor and falls back to null,
-  // producing an unbounded fractional key that overshoots other siblings.
-  // The fix uses the AFTER-tree, where source occupies its destination slot
-  // surrounded by its REAL neighbors.
-  it('reorder-after when source is immediately after target uses post-move neighbors', () => {
-    const adjacent: SpaceTreeNode[] = [
-      n('a', 'A'),
-      n('b', 'AB'),
-      n('c', 'B'),
-      n('d', 'BC'),
-    ];
-    const p = dropOpToMovePayload(adjacent, 'b', {
-      kind: 'reorder-after',
-      targetId: 'a',
-    });
-    // After-tree is [a, b, c, d] (no-op shape). Source 'b' at index 1.
-    // prev = 'A', next = 'B'. Old buggy code returned prev='A', next=null.
-    expect(p).toEqual({ pageId: 'b', parentPageId: null, position: 'A|B' });
-  });
-
-  it('reorder-before when source is immediately before target uses post-move neighbors', () => {
-    const adjacent: SpaceTreeNode[] = [
-      n('a', 'A'),
-      n('b', 'AB'),
-      n('c', 'B'),
-      n('d', 'BC'),
-    ];
-    const p = dropOpToMovePayload(adjacent, 'b', {
-      kind: 'reorder-before',
-      targetId: 'c',
-    });
-    // After-tree is [a, b, c, d]. Source 'b' at index 1.
-    // prev = 'A', next = 'B'. Old buggy code returned prev=null, next='B'.
-    expect(p).toEqual({ pageId: 'b', parentPageId: null, position: 'A|B' });
-  });
-
-  it('make-child when source is already last child of target uses post-move neighbors', () => {
-    const t: SpaceTreeNode[] = [
-      n('p', 'P', [n('x', 'X'), n('y', 'Y')]),
-    ];
-    const p = dropOpToMovePayload(t, 'y', {
-      kind: 'make-child',
-      targetId: 'p',
-    });
-    // After-tree: 'y' becomes last child of 'p' → [x, y]. y at index 1.
-    // prev = 'X', next = null. Old buggy: prev=Y (source's own position), next=null.
-    expect(p).toEqual({ pageId: 'y', parentPageId: 'p', position: 'X|END' });
-  });
-});

apps/client/src/features/page/tree/hooks/drop-op-to-move-payload.ts

@@ -1,36 +0,0 @@
-import { generateJitteredKeyBetween } from 'fractional-indexing-jittered';
-import type { SpaceTreeNode } from '@/features/page/tree/types';
-import type { IMovePage } from '@/features/page/types/page.types';
-import type { DropOp } from '@/features/page/tree/model/tree-model.types';
-import { treeModel } from '@/features/page/tree/model/tree-model';
-
-export function dropOpToMovePayload(
-  tree: SpaceTreeNode[],
-  sourceId: string,
-  op: DropOp,
-): IMovePage {
-  // Compute the post-move tree so we read source's REAL neighbors at its new
-  // position. Reading from the before-tree would mean treating source itself
-  // as a neighbor of the target — wrong when source is adjacent to target.
-  const { tree: after } = treeModel.move(tree, sourceId, op);
-  const info = treeModel.siblingsOf(after, sourceId);
-  if (!info) {
-    return {
-      pageId: sourceId,
-      parentPageId: null,
-      position: generateJitteredKeyBetween(null, null),
-    };
-  }
-
-  const prev = info.siblings[info.index - 1] as SpaceTreeNode | undefined;
-  const next = info.siblings[info.index + 1] as SpaceTreeNode | undefined;
-
-  return {
-    pageId: sourceId,
-    parentPageId: info.parentId,
-    position: generateJitteredKeyBetween(
-      prev?.position ?? null,
-      next?.position ?? null,
-    ),
-  };
-}

apps/client/src/features/page/tree/hooks/use-tree-mutation.ts

@@ -1,15 +1,16 @@
-import { useCallback } from "react";
-import { useAtom, useStore } from "jotai";
-import { notifications } from "@mantine/notifications";
-import { useTranslation } from "react-i18next";
-import { useNavigate, useParams } from "react-router-dom";
-
+import { useMemo } from "react";
+import {
+  CreateHandler,
+  DeleteHandler,
+  MoveHandler,
+  NodeApi,
+  RenameHandler,
+  SimpleTree,
+} from "react-arborist";
+import { useAtom } from "jotai";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
-import { treeModel } from "@/features/page/tree/model/tree-model";
-import type { DropOp } from "@/features/page/tree/model/tree-model.types";
-import { dropOpToMovePayload } from "./drop-op-to-move-payload";
-import { SpaceTreeNode } from "@/features/page/tree/types.ts";
-import { IPage } from "@/features/page/types/page.types.ts";
+import { IMovePage, IPage } from "@/features/page/types/page.types.ts";
+import { useNavigate, useParams } from "react-router-dom";
 import {
   useCreatePageMutation,
   useRemovePageMutation,
@@ -17,250 +18,258 @@ import {
   useUpdatePageMutation,
   updateCacheOnMovePage,
 } from "@/features/page/queries/page-query.ts";
+import { generateJitteredKeyBetween } from "fractional-indexing-jittered";
+import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 import { getSpaceUrl } from "@/lib/config.ts";
 import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
 
-export type UseTreeMutation = {
-  handleMove: (sourceId: string, op: DropOp) => Promise<void>;
-  handleCreate: (parentId: string | null) => Promise<void>;
-  handleRename: (id: string, name: string) => Promise<void>;
-  handleDelete: (id: string) => Promise<void>;
-};
-
-export function useTreeMutation(spaceId: string): UseTreeMutation {
-  const { t } = useTranslation();
-  const [, setData] = useAtom(treeDataAtom);
-  // `store` reads the *current* treeDataAtom imperatively in handlers — avoids
-  // stale-closure issues when the caller updates the tree (e.g. lazy-load
-  // children) and then immediately invokes a handler.
-  const store = useStore();
+export function useTreeMutation<T>(spaceId: string) {
+  const [data, setData] = useAtom(treeDataAtom);
+  const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
   const createPageMutation = useCreatePageMutation();
   const updatePageMutation = useUpdatePageMutation();
   const removePageMutation = useRemovePageMutation();
   const movePageMutation = useMovePageMutation();
   const navigate = useNavigate();
-  const { spaceSlug, pageSlug } = useParams();
+  const { spaceSlug } = useParams();
+  const { pageSlug } = useParams();
   const emit = useQueryEmit();
 
-  const handleMove = useCallback(
-    async (sourceId: string, op: DropOp) => {
-      const before = store.get(treeDataAtom);
-      const { tree: after, result } = treeModel.move(before, sourceId, op);
-      if (after === before) return;
+  const onCreate: CreateHandler<T> = async ({ parentId, index, type }) => {
+    const payload: { spaceId: string; parentPageId?: string } = {
+      spaceId: spaceId,
+    };
+    if (parentId) {
+      payload.parentPageId = parentId;
+    }
 
-      const payload = dropOpToMovePayload(before, sourceId, op);
-      const source = treeModel.find(before, sourceId) as SpaceTreeNode | null;
-      if (!source) return;
-      const oldParentId = source.parentPageId ?? null;
+    let createdPage: IPage;
+    try {
+      createdPage = await createPageMutation.mutateAsync(payload);
+    } catch (err) {
+      throw new Error("Failed to create page");
+    }
 
-      // optimistic apply with the new position from the payload
-      let optimistic = treeModel.update(after, sourceId, {
-        position: payload.position,
-        parentPageId: payload.parentPageId,
-      } as Partial<SpaceTreeNode>);
+    const data = {
+      id: createdPage.id,
+      slugId: createdPage.slugId,
+      name: "",
+      position: createdPage.position,
+      spaceId: createdPage.spaceId,
+      parentPageId: createdPage.parentPageId,
+      children: [],
+    } as any;
 
-      // If the old parent has no children left, mark hasChildren: false so the
-      // chevron disappears. Without this, the empty parent keeps rendering an
-      // expand toggle that fetches zero rows on click.
-      if (oldParentId) {
-        const oldParent = treeModel.find(optimistic, oldParentId);
-        if (!oldParent?.children?.length) {
-          optimistic = treeModel.update(optimistic, oldParentId, {
-            hasChildren: false,
-          } as Partial<SpaceTreeNode>);
-        }
-      }
+    let lastIndex: number;
+    if (parentId === null) {
+      lastIndex = tree.data.length;
+    } else {
+      lastIndex = tree.find(parentId).children.length;
+    }
+    // to place the newly created node at the bottom
+    index = lastIndex;
 
-      // For make-child onto a previously-childless target: flip hasChildren on
-      // so the new parent shows its chevron.
-      if (op.kind === "make-child") {
-        optimistic = treeModel.update(optimistic, op.targetId, {
-          hasChildren: true,
-        } as Partial<SpaceTreeNode>);
-      }
+    tree.create({ parentId, index, data });
+    setData(tree.data);
 
-      setData(optimistic);
+    setTimeout(() => {
+      emit({
+        operation: "addTreeNode",
+        spaceId: spaceId,
+        payload: {
+          parentId,
+          index,
+          data,
+        },
+      });
+    }, 50);
 
-      try {
-        await movePageMutation.mutateAsync(payload);
-      } catch {
-        setData(before);
-        notifications.show({
-          message: t("Failed to move page"),
-          color: "red",
+    const pageUrl = buildPageUrl(
+      spaceSlug,
+      createdPage.slugId,
+      createdPage.title
+    );
+    navigate(pageUrl);
+    return data;
+  };
+
+  const onMove: MoveHandler<T> = async (args: {
+    dragIds: string[];
+    dragNodes: NodeApi<T>[];
+    parentId: string | null;
+    parentNode: NodeApi<T> | null;
+    index: number;
+  }) => {
+    const draggedNodeId = args.dragIds[0];
+
+    tree.move({
+      id: draggedNodeId,
+      parentId: args.parentId,
+      index: args.index,
+    });
+
+    const newDragIndex = tree.find(draggedNodeId)?.childIndex;
+
+    const currentTreeData = args.parentId
+      ? tree.find(args.parentId).children
+      : tree.data;
+
+    // if there is a parentId, tree.find(args.parentId).children returns a SimpleNode array
+    // we have to access the node differently via currentTreeData[args.index]?.data?.position
+    // this makes it possible to correctly sort children of a parent node that is not the root
+
+    const afterPosition =
+      // @ts-ignore
+      currentTreeData[newDragIndex - 1]?.position ||
+      // @ts-ignore
+      currentTreeData[args.index - 1]?.data?.position ||
+      null;
+
+    const beforePosition =
+      // @ts-ignore
+      currentTreeData[newDragIndex + 1]?.position ||
+      // @ts-ignore
+      currentTreeData[args.index + 1]?.data?.position ||
+      null;
+
+    let newPosition: string;
+
+    if (afterPosition && beforePosition && afterPosition === beforePosition) {
+      // if after is equal to before, put it next to the after node
+      newPosition = generateJitteredKeyBetween(afterPosition, null);
+    } else {
+      // if both are null then, it is the first index
+      newPosition = generateJitteredKeyBetween(afterPosition, beforePosition);
+    }
+
+    // update the node position in tree
+    tree.update({
+      id: draggedNodeId,
+      changes: { position: newPosition } as any,
+    });
+
+    const previousParent = args.dragNodes[0].parent;
+    if (
+      previousParent.id !== args.parentId &&
+      previousParent.id !== "__REACT_ARBORIST_INTERNAL_ROOT__"
+    ) {
+      // if the page was moved to another parent,
+      // check if the previous still has children
+      // if no children left, change 'hasChildren' to false, to make the page toggle arrows work properly
+      const childrenCount = previousParent.children.filter(
+        (child) => child.id !== draggedNodeId
+      ).length;
+      if (childrenCount === 0) {
+        tree.update({
+          id: previousParent.id,
+          changes: { ...previousParent.data, hasChildren: false } as any,
         });
-        return;
       }
+    }
 
-      const pageData: Partial<IPage> = {
-        id: source.id,
-        slugId: source.slugId,
-        title: source.name,
-        icon: source.icon,
-        position: payload.position,
-        spaceId: source.spaceId,
-        parentPageId: payload.parentPageId,
-        hasChildren: source.hasChildren,
-      };
+    setData(tree.data);
 
-      updateCacheOnMovePage(
-        spaceId,
-        sourceId,
-        oldParentId,
-        payload.parentPageId,
-        pageData,
-      );
+    const payload: IMovePage = {
+      pageId: draggedNodeId,
+      position: newPosition,
+      parentPageId: args.parentId,
+    };
+
+    const draggedNode = args.dragNodes[0];
+    const nodeData = draggedNode.data as SpaceTreeNode;
+    const oldParentId = nodeData.parentPageId ?? null;
+    const pageData = {
+      id: nodeData.id,
+      slugId: nodeData.slugId,
+      title: nodeData.name,
+      icon: nodeData.icon,
+      position: newPosition,
+      spaceId: nodeData.spaceId,
+      parentPageId: args.parentId,
+      hasChildren: nodeData.hasChildren,
+    };
+
+    try {
+      await movePageMutation.mutateAsync(payload);
+
+      updateCacheOnMovePage(spaceId, draggedNodeId, oldParentId, args.parentId, pageData);
 
       setTimeout(() => {
         emit({
           operation: "moveTreeNode",
           spaceId: spaceId,
           payload: {
-            id: sourceId,
-            parentId: payload.parentPageId,
+            id: draggedNodeId,
+            parentId: args.parentId,
             oldParentId,
-            index: result.index,
-            position: payload.position,
+            index: args.index,
+            position: newPosition,
             pageData,
           },
         });
       }, 50);
-    },
-    [setData, store, movePageMutation, spaceId, emit, t],
-  );
+    } catch (error) {
+      console.error("Error moving page:", error);
+    }
+  };
 
-  const handleCreate = useCallback(
-    async (parentId: string | null) => {
-      const payload: { spaceId: string; parentPageId?: string } = { spaceId };
-      if (parentId) payload.parentPageId = parentId;
+  const onRename: RenameHandler<T> = ({ name, id }) => {
+    tree.update({ id, changes: { name } as any });
+    setData(tree.data);
 
-      let createdPage: IPage;
-      try {
-        createdPage = await createPageMutation.mutateAsync(payload);
-      } catch {
-        throw new Error("Failed to create page");
-      }
+    try {
+      updatePageMutation.mutateAsync({ pageId: id, title: name });
+    } catch (error) {
+      console.error("Error updating page title:", error);
+    }
+  };
 
-      const newNode: SpaceTreeNode = {
-        id: createdPage.id,
-        slugId: createdPage.slugId,
-        name: "",
-        position: createdPage.position,
-        spaceId: createdPage.spaceId,
-        parentPageId: createdPage.parentPageId,
-        hasChildren: false,
-        children: [],
-      };
-
-      // Read latest tree at call time. Without this, callers that mutate the
-      // tree (e.g. lazy-load children on expand) immediately before calling
-      // handleCreate hit a stale closure and compute lastIndex against the
-      // pre-load tree, requiring a setTimeout-based wait at the call site.
-      const current = store.get(treeDataAtom);
-      let lastIndex: number;
-      if (parentId === null) {
-        lastIndex = current.length;
+  const isPageInNode = (
+    node: { data: SpaceTreeNode; children?: any[] },
+    pageSlug: string
+  ): boolean => {
+    if (node.data.slugId === pageSlug) {
+      return true;
+    }
+    for (const item of node.children) {
+      if (item.data.slugId === pageSlug) {
+        return true;
       } else {
-        const parent = treeModel.find(current, parentId);
-        lastIndex = parent?.children?.length ?? 0;
+        return isPageInNode(item, pageSlug);
+      }
+    }
+    return false;
+  };
+
+  const onDelete: DeleteHandler<T> = async (args: { ids: string[] }) => {
+    try {
+      await removePageMutation.mutateAsync(args.ids[0]);
+
+      const node = tree.find(args.ids[0]);
+      if (!node) {
+        return;
       }
 
-      setData((prev) => treeModel.insert(prev, parentId, newNode, lastIndex));
+      tree.drop({ id: args.ids[0] });
+      setData(tree.data);
+
+      if (pageSlug && isPageInNode(node, pageSlug.split("-")[1])) {
+        navigate(getSpaceUrl(spaceSlug));
+      }
 
       setTimeout(() => {
         emit({
-          operation: "addTreeNode",
-          spaceId,
-          payload: {
-            parentId,
-            index: lastIndex,
-            data: newNode,
-          },
+          operation: "deleteTreeNode",
+          spaceId: spaceId,
+          payload: { node: node.data },
         });
       }, 50);
+    } catch (error) {
+      console.error("Failed to delete page:", error);
+    }
+  };
 
-      const pageUrl = buildPageUrl(
-        spaceSlug,
-        createdPage.slugId,
-        createdPage.title,
-      );
-      navigate(pageUrl);
-    },
-    [spaceId, createPageMutation, setData, store, emit, navigate, spaceSlug],
-  );
-
-  const handleRename = useCallback(
-    async (id: string, name: string) => {
-      setData((prev) =>
-        treeModel.update(prev, id, { name } as Partial<SpaceTreeNode>),
-      );
-      try {
-        await updatePageMutation.mutateAsync({ pageId: id, title: name });
-      } catch (error) {
-        console.error("Error updating page title:", error);
-      }
-    },
-    [updatePageMutation, setData],
-  );
-
-  const handleDelete = useCallback(
-    async (id: string) => {
-      const node = treeModel.find(
-        store.get(treeDataAtom),
-        id,
-      ) as SpaceTreeNode | null;
-      const parentPageId = node?.parentPageId ?? null;
-      try {
-        await removePageMutation.mutateAsync(id);
-        setData((prev) => {
-          let next = treeModel.remove(prev, id);
-          // If the parent has no children left, mark hasChildren: false so the
-          // chevron disappears. Without this, the empty parent keeps rendering an
-          // expand toggle that fetches zero rows on click.
-          if (parentPageId) {
-            const parent = treeModel.find(next, parentPageId);
-            if (!parent?.children?.length) {
-              next = treeModel.update(next, parentPageId, {
-                hasChildren: false,
-              } as Partial<SpaceTreeNode>);
-            }
-          }
-          return next;
-        });
-
-        if (
-          node &&
-          pageSlug &&
-          (node.slugId === pageSlug.split("-")[1] ||
-            isPageInNode(node, pageSlug.split("-")[1]))
-        ) {
-          navigate(getSpaceUrl(spaceSlug));
-        }
-
-        setTimeout(() => {
-          if (!node) return;
-          emit({
-            operation: "deleteTreeNode",
-            spaceId,
-            payload: { node },
-          });
-        }, 50);
-      } catch (error) {
-        console.error("Failed to delete page:", error);
-      }
-    },
-    [removePageMutation, setData, store, pageSlug, navigate, spaceSlug, emit, spaceId],
-  );
-
-  return { handleMove, handleCreate, handleRename, handleDelete };
-}
-
-function isPageInNode(node: SpaceTreeNode, pageSlug: string): boolean {
-  if (node.slugId === pageSlug) return true;
-  if (!node.children) return false;
-  for (const child of node.children) {
-    if (isPageInNode(child, pageSlug)) return true;
-  }
-  return false;
+  const controllers = { onMove, onRename, onCreate, onDelete };
+  return { data, setData, controllers } as const;
 }

apps/client/src/features/page/tree/model/tree-model.test.ts

@@ -1,329 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { treeModel } from './tree-model';
-import type { TreeNode } from './tree-model.types';
-
-type N = TreeNode<{ name: string }>;
-
-const fixture: N[] = [
-  {
-    id: 'a',
-    name: 'A',
-    children: [
-      { id: 'a1', name: 'A1', children: [{ id: 'a1a', name: 'A1a' }] },
-      { id: 'a2', name: 'A2' },
-    ],
-  },
-  { id: 'b', name: 'B' },
-];
-
-describe('treeModel.find', () => {
-  it('finds a root node', () => {
-    expect(treeModel.find(fixture, 'a')?.name).toBe('A');
-  });
-  it('finds a deeply nested node', () => {
-    expect(treeModel.find(fixture, 'a1a')?.name).toBe('A1a');
-  });
-  it('returns null for unknown id', () => {
-    expect(treeModel.find(fixture, 'zzz')).toBeNull();
-  });
-});
-
-describe('treeModel.path', () => {
-  it('returns root-to-leaf path for nested id', () => {
-    const p = treeModel.path(fixture, 'a1a');
-    expect(p?.map((n) => n.id)).toEqual(['a', 'a1', 'a1a']);
-  });
-  it('returns [node] for root-level id', () => {
-    expect(treeModel.path(fixture, 'b')?.map((n) => n.id)).toEqual(['b']);
-  });
-  it('returns null for unknown id', () => {
-    expect(treeModel.path(fixture, 'zzz')).toBeNull();
-  });
-});
-
-describe('treeModel.siblingsOf', () => {
-  it('returns siblings + parent + index for a child', () => {
-    const info = treeModel.siblingsOf(fixture, 'a2');
-    expect(info?.parentId).toBe('a');
-    expect(info?.siblings.map((n) => n.id)).toEqual(['a1', 'a2']);
-    expect(info?.index).toBe(1);
-  });
-  it('returns parentId null + root siblings for a root id', () => {
-    const info = treeModel.siblingsOf(fixture, 'b');
-    expect(info?.parentId).toBeNull();
-    expect(info?.siblings.map((n) => n.id)).toEqual(['a', 'b']);
-    expect(info?.index).toBe(1);
-  });
-  it('returns null for unknown id', () => {
-    expect(treeModel.siblingsOf(fixture, 'zzz')).toBeNull();
-  });
-});
-
-describe('treeModel.isDescendant', () => {
-  it('returns true when descendantId is nested under ancestorId', () => {
-    expect(treeModel.isDescendant(fixture, 'a', 'a1a')).toBe(true);
-  });
-  it('returns false when ids are siblings', () => {
-    expect(treeModel.isDescendant(fixture, 'a1', 'a2')).toBe(false);
-  });
-  it('returns false when ancestorId is the same as descendantId', () => {
-    expect(treeModel.isDescendant(fixture, 'a', 'a')).toBe(false);
-  });
-  it('returns false for unknown ids', () => {
-    expect(treeModel.isDescendant(fixture, 'zzz', 'a')).toBe(false);
-  });
-});
-
-describe('treeModel.visible', () => {
-  it('returns only root nodes when no openIds', () => {
-    const v = treeModel.visible(fixture, new Set());
-    expect(v.map((n) => n.id)).toEqual(['a', 'b']);
-  });
-  it('includes children of open ids in DFS order', () => {
-    const v = treeModel.visible(fixture, new Set(['a']));
-    expect(v.map((n) => n.id)).toEqual(['a', 'a1', 'a2', 'b']);
-  });
-  it('recursively descends through chains of open ids', () => {
-    const v = treeModel.visible(fixture, new Set(['a', 'a1']));
-    expect(v.map((n) => n.id)).toEqual(['a', 'a1', 'a1a', 'a2', 'b']);
-  });
-  it('ignores openIds that are not in the tree', () => {
-    const v = treeModel.visible(fixture, new Set(['ghost']));
-    expect(v.map((n) => n.id)).toEqual(['a', 'b']);
-  });
-});
-
-describe('treeModel.insert', () => {
-  const leaf = (id: string): N => ({ id, name: id.toUpperCase() });
-
-  it('inserts at end when index is undefined', () => {
-    const t = treeModel.insert(fixture, 'a', leaf('a3'));
-    expect(treeModel.siblingsOf(t, 'a3')?.siblings.map((n) => n.id)).toEqual([
-      'a1', 'a2', 'a3',
-    ]);
-  });
-  it('inserts at index 0', () => {
-    const t = treeModel.insert(fixture, 'a', leaf('a0'), 0);
-    expect(treeModel.siblingsOf(t, 'a0')?.siblings.map((n) => n.id)).toEqual([
-      'a0', 'a1', 'a2',
-    ]);
-  });
-  it('inserts in the middle', () => {
-    const t = treeModel.insert(fixture, 'a', leaf('a1half'), 1);
-    expect(
-      treeModel.siblingsOf(t, 'a1half')?.siblings.map((n) => n.id),
-    ).toEqual(['a1', 'a1half', 'a2']);
-  });
-  it('inserts at root when parentId is null', () => {
-    const t = treeModel.insert(fixture, null, leaf('c'));
-    expect(t.map((n) => n.id)).toEqual(['a', 'b', 'c']);
-  });
-  it('returns same array reference for unknown parentId', () => {
-    const t = treeModel.insert(fixture, 'ghost', leaf('zz'));
-    expect(t).toBe(fixture);
-  });
-  it('initializes children array when parent had no children', () => {
-    const t = treeModel.insert(fixture, 'b', leaf('b1'));
-    expect(treeModel.find(t, 'b')?.children?.map((n) => n.id)).toEqual(['b1']);
-  });
-});
-
-describe('treeModel.remove', () => {
-  it('removes a leaf', () => {
-    const t = treeModel.remove(fixture, 'a2');
-    expect(treeModel.find(t, 'a2')).toBeNull();
-  });
-  it('removes a subtree', () => {
-    const t = treeModel.remove(fixture, 'a1');
-    expect(treeModel.find(t, 'a1')).toBeNull();
-    expect(treeModel.find(t, 'a1a')).toBeNull();
-  });
-  it('removes a root node', () => {
-    const t = treeModel.remove(fixture, 'b');
-    expect(t.map((n) => n.id)).toEqual(['a']);
-  });
-  it('returns same array reference for unknown id', () => {
-    expect(treeModel.remove(fixture, 'ghost')).toBe(fixture);
-  });
-});
-
-describe('treeModel.update', () => {
-  it('shallow-merges a patch on the matching node', () => {
-    const t = treeModel.update(fixture, 'a1', { name: 'A1-renamed' });
-    expect(treeModel.find(t, 'a1')?.name).toBe('A1-renamed');
-  });
-  it('returns same array reference for unknown id', () => {
-    expect(treeModel.update(fixture, 'ghost', { name: 'x' })).toBe(fixture);
-  });
-  it("preserves children when patching parent's own fields", () => {
-    const t = treeModel.update(fixture, 'a', { name: 'A-renamed' });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a1', 'a2',
-    ]);
-  });
-  it('preserves reference identity of unrelated subtrees', () => {
-    const t = treeModel.update(fixture, 'a1', { name: 'X' });
-    expect(t[1]).toBe(fixture[1]);
-  });
-});
-
-describe('treeModel.appendChildren', () => {
-  const kid = (id: string): N => ({ id, name: id });
-
-  it('appends to existing children', () => {
-    const t = treeModel.appendChildren(fixture, 'a', [kid('a3'), kid('a4')]);
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a1', 'a2', 'a3', 'a4',
-    ]);
-  });
-  it('initializes children when parent had none', () => {
-    const t = treeModel.appendChildren(fixture, 'b', [kid('b1')]);
-    expect(treeModel.find(t, 'b')?.children?.map((n) => n.id)).toEqual(['b1']);
-  });
-  it('returns same array reference for unknown parentId', () => {
-    expect(treeModel.appendChildren(fixture, 'ghost', [kid('zz')])).toBe(
-      fixture,
-    );
-  });
-
-  // Regression: lazy-load + auto-expand can race and call appendChildren with
-  // children that overlap what's already there. React then crashes on duplicate
-  // keys. Defensive dedup at the model level.
-  it('dedups against existing children by id', () => {
-    const t1 = treeModel.appendChildren(fixture, 'a', [
-      kid('a3'),
-      kid('a4'),
-    ]);
-    const t2 = treeModel.appendChildren(t1, 'a', [
-      kid('a3'),
-      kid('a4'),
-      kid('a5'),
-    ]);
-    expect(treeModel.find(t2, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a1', 'a2', 'a3', 'a4', 'a5',
-    ]);
-  });
-
-  it('returns same array reference when every child is a duplicate', () => {
-    const t1 = treeModel.appendChildren(fixture, 'a', [kid('a3')]);
-    const t2 = treeModel.appendChildren(t1, 'a', [kid('a3')]);
-    expect(t2).toBe(t1);
-  });
-});
-
-describe('treeModel.place', () => {
-  it('moves a node to a new parent at a given index', () => {
-    const t = treeModel.place(fixture, 'a2', { parentId: 'b', index: 0 });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual(['a1']);
-    expect(treeModel.find(t, 'b')?.children?.map((n) => n.id)).toEqual(['a2']);
-  });
-  it('moves a node to root', () => {
-    const t = treeModel.place(fixture, 'a1', { parentId: null, index: 0 });
-    expect(t.map((n) => n.id)).toEqual(['a1', 'a', 'b']);
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual(['a2']);
-  });
-  it('reorders within the same parent', () => {
-    const t = treeModel.place(fixture, 'a2', { parentId: 'a', index: 0 });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a2', 'a1',
-    ]);
-  });
-  it('returns same array reference for unknown source', () => {
-    expect(
-      treeModel.place(fixture, 'ghost', { parentId: 'a', index: 0 }),
-    ).toBe(fixture);
-  });
-  it('returns same array reference for unknown destination parent', () => {
-    expect(
-      treeModel.place(fixture, 'a1', { parentId: 'ghost', index: 0 }),
-    ).toBe(fixture);
-  });
-});
-
-describe('treeModel.move', () => {
-  it('reorder-before within same parent: moves source to target index', () => {
-    const { tree: t, result } = treeModel.move(fixture, 'a2', {
-      kind: 'reorder-before',
-      targetId: 'a1',
-    });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a2', 'a1',
-    ]);
-    expect(result).toEqual({ parentId: 'a', index: 0 });
-  });
-  it('reorder-after within same parent', () => {
-    const { tree: t, result } = treeModel.move(fixture, 'a1', {
-      kind: 'reorder-after',
-      targetId: 'a2',
-    });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a2', 'a1',
-    ]);
-    expect(result).toEqual({ parentId: 'a', index: 1 });
-  });
-  it('make-child appends at end of target children', () => {
-    const { tree: t, result } = treeModel.move(fixture, 'b', {
-      kind: 'make-child',
-      targetId: 'a',
-    });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'a1', 'a2', 'b',
-    ]);
-    expect(result).toEqual({ parentId: 'a', index: 2 });
-  });
-  it('make-child initializes children when target had none', () => {
-    const { tree: t, result } = treeModel.move(fixture, 'a2', {
-      kind: 'make-child',
-      targetId: 'b',
-    });
-    expect(treeModel.find(t, 'b')?.children?.map((n) => n.id)).toEqual(['a2']);
-    expect(result).toEqual({ parentId: 'b', index: 0 });
-  });
-  it('reorder-before across parents', () => {
-    const { tree: t, result } = treeModel.move(fixture, 'b', {
-      kind: 'reorder-before',
-      targetId: 'a1',
-    });
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual([
-      'b', 'a1', 'a2',
-    ]);
-    expect(result).toEqual({ parentId: 'a', index: 0 });
-  });
-  it('reorder-after to root', () => {
-    const { tree: t, result } = treeModel.move(fixture, 'a1', {
-      kind: 'reorder-after',
-      targetId: 'a',
-    });
-    expect(t.map((n) => n.id)).toEqual(['a', 'a1', 'b']);
-    expect(treeModel.find(t, 'a')?.children?.map((n) => n.id)).toEqual(['a2']);
-    expect(result).toEqual({ parentId: null, index: 1 });
-  });
-  it('no-op when sourceId === targetId', () => {
-    const out = treeModel.move(fixture, 'a', {
-      kind: 'make-child',
-      targetId: 'a',
-    });
-    expect(out.tree).toBe(fixture);
-  });
-  it('no-op when target is descendant of source', () => {
-    const out = treeModel.move(fixture, 'a', {
-      kind: 'make-child',
-      targetId: 'a1a',
-    });
-    expect(out.tree).toBe(fixture);
-  });
-  it('no-op when source is unknown', () => {
-    const out = treeModel.move(fixture, 'ghost', {
-      kind: 'reorder-before',
-      targetId: 'a',
-    });
-    expect(out.tree).toBe(fixture);
-  });
-  it('no-op when target is unknown', () => {
-    const out = treeModel.move(fixture, 'a1', {
-      kind: 'reorder-before',
-      targetId: 'ghost',
-    });
-    expect(out.tree).toBe(fixture);
-  });
-});

apps/client/src/features/page/tree/model/tree-model.ts

@@ -1,222 +0,0 @@
-import type { TreeNode, SiblingsInfo } from './tree-model.types';
-
-function findInternal<T extends object>(
-  nodes: TreeNode<T>[],
-  id: string,
-): { parents: TreeNode<T>[]; node: TreeNode<T> } | null {
-  for (const node of nodes) {
-    if (node.id === id) return { parents: [], node };
-    if (node.children) {
-      const inner = findInternal(node.children, id);
-      if (inner) return { parents: [node, ...inner.parents], node: inner.node };
-    }
-  }
-  return null;
-}
-
-export const treeModel = {
-  find<T extends object>(tree: TreeNode<T>[], id: string): TreeNode<T> | null {
-    return findInternal(tree, id)?.node ?? null;
-  },
-
-  path<T extends object>(tree: TreeNode<T>[], id: string): TreeNode<T>[] | null {
-    const found = findInternal(tree, id);
-    if (!found) return null;
-    return [...found.parents, found.node];
-  },
-
-  siblingsOf<T extends object>(
-    tree: TreeNode<T>[],
-    id: string,
-  ): SiblingsInfo<T> | null {
-    const found = findInternal(tree, id);
-    if (!found) return null;
-    const parent = found.parents[found.parents.length - 1];
-    const siblings = parent ? parent.children! : tree;
-    return {
-      parentId: parent?.id ?? null,
-      siblings,
-      index: siblings.findIndex((n) => n.id === id),
-    };
-  },
-
-  isDescendant<T extends object>(
-    tree: TreeNode<T>[],
-    ancestorId: string,
-    descendantId: string,
-  ): boolean {
-    if (ancestorId === descendantId) return false;
-    const ancestor = treeModel.find(tree, ancestorId);
-    if (!ancestor?.children) return false;
-    return findInternal(ancestor.children, descendantId) !== null;
-  },
-
-  visible<T extends object>(
-    tree: TreeNode<T>[],
-    openIds: ReadonlySet<string>,
-  ): TreeNode<T>[] {
-    const out: TreeNode<T>[] = [];
-    const walk = (nodes: TreeNode<T>[]) => {
-      for (const node of nodes) {
-        out.push(node);
-        if (openIds.has(node.id) && node.children?.length) walk(node.children);
-      }
-    };
-    walk(tree);
-    return out;
-  },
-
-  insert<T extends object>(
-    tree: TreeNode<T>[],
-    parentId: string | null,
-    node: TreeNode<T>,
-    index?: number,
-  ): TreeNode<T>[] {
-    if (parentId === null) {
-      const idx = index ?? tree.length;
-      return [...tree.slice(0, idx), node, ...tree.slice(idx)];
-    }
-    let touched = false;
-    const walk = (nodes: TreeNode<T>[]): TreeNode<T>[] =>
-      nodes.map((n) => {
-        if (n.id === parentId) {
-          touched = true;
-          const kids = n.children ?? [];
-          const idx = index ?? kids.length;
-          return {
-            ...n,
-            children: [...kids.slice(0, idx), node, ...kids.slice(idx)],
-          };
-        }
-        if (n.children) {
-          const next = walk(n.children);
-          if (next !== n.children) return { ...n, children: next };
-        }
-        return n;
-      });
-    const out = walk(tree);
-    return touched ? out : tree;
-  },
-
-  remove<T extends object>(tree: TreeNode<T>[], id: string): TreeNode<T>[] {
-    let touched = false;
-    const walk = (nodes: TreeNode<T>[]): TreeNode<T>[] => {
-      const filtered = nodes.filter((n) => {
-        if (n.id === id) {
-          touched = true;
-          return false;
-        }
-        return true;
-      });
-      return filtered.map((n) => {
-        if (n.children) {
-          const next = walk(n.children);
-          if (next !== n.children) return { ...n, children: next };
-        }
-        return n;
-      });
-    };
-    const out = walk(tree);
-    return touched ? out : tree;
-  },
-
-  // `patch` excludes `id` (immutable) and `children` (use insert / remove /
-  // appendChildren for structural changes — otherwise referential identity of
-  // unrelated subtrees gets blown away).
-  update<T extends object>(
-    tree: TreeNode<T>[],
-    id: string,
-    patch: Omit<Partial<T>, "id" | "children">,
-  ): TreeNode<T>[] {
-    let touched = false;
-    const walk = (nodes: TreeNode<T>[]): TreeNode<T>[] =>
-      nodes.map((n) => {
-        if (n.id === id) {
-          touched = true;
-          return { ...n, ...patch };
-        }
-        if (n.children) {
-          const next = walk(n.children);
-          if (next !== n.children) return { ...n, children: next };
-        }
-        return n;
-      });
-    const out = walk(tree);
-    return touched ? out : tree;
-  },
-
-  appendChildren<T extends object>(
-    tree: TreeNode<T>[],
-    parentId: string,
-    children: TreeNode<T>[],
-  ): TreeNode<T>[] {
-    let touched = false;
-    const walk = (nodes: TreeNode<T>[]): TreeNode<T>[] =>
-      nodes.map((n) => {
-        if (n.id === parentId) {
-          const existing = n.children ?? [];
-          // Dedup against existing ids — auto-expand + manual toggle can race
-          // and produce overlapping fetches; we don't want React to see two
-          // children with the same key.
-          const existingIds = new Set(existing.map((c) => c.id));
-          const fresh = children.filter((c) => !existingIds.has(c.id));
-          if (fresh.length === 0) return n;
-          touched = true;
-          return { ...n, children: [...existing, ...fresh] };
-        }
-        if (n.children) {
-          const next = walk(n.children);
-          if (next !== n.children) return { ...n, children: next };
-        }
-        return n;
-      });
-    const out = walk(tree);
-    return touched ? out : tree;
-  },
-
-  place<T extends object>(
-    tree: TreeNode<T>[],
-    sourceId: string,
-    to: { parentId: string | null; index: number },
-  ): TreeNode<T>[] {
-    const source = treeModel.find(tree, sourceId);
-    if (!source) return tree;
-    if (to.parentId !== null && !treeModel.find(tree, to.parentId)) return tree;
-    const removed = treeModel.remove(tree, sourceId);
-    return treeModel.insert(removed, to.parentId, source, to.index);
-  },
-
-  move<T extends object>(
-    tree: TreeNode<T>[],
-    sourceId: string,
-    op: import('./tree-model.types').DropOp,
-  ): { tree: TreeNode<T>[]; result: import('./tree-model.types').DropResult } {
-    if (sourceId === op.targetId) return { tree, result: { parentId: null, index: 0 } };
-    if (!treeModel.find(tree, sourceId) || !treeModel.find(tree, op.targetId)) {
-      return { tree, result: { parentId: null, index: 0 } };
-    }
-    if (treeModel.isDescendant(tree, sourceId, op.targetId)) {
-      return { tree, result: { parentId: null, index: 0 } };
-    }
-
-    let parentId: string | null;
-    let index: number;
-
-    if (op.kind === 'make-child') {
-      parentId = op.targetId;
-      const target = treeModel.find(tree, op.targetId)!;
-      index = target.children?.length ?? 0;
-    } else {
-      const info = treeModel.siblingsOf(tree, op.targetId)!;
-      parentId = info.parentId;
-      const sourceInfo = treeModel.siblingsOf(tree, sourceId)!;
-      const sameParent = sourceInfo.parentId === parentId;
-      const adjust =
-        sameParent && sourceInfo.index < info.index ? -1 : 0;
-      index = info.index + adjust + (op.kind === 'reorder-after' ? 1 : 0);
-    }
-
-    const next = treeModel.place(tree, sourceId, { parentId, index });
-    return { tree: next, result: { parentId, index } };
-  },
-};

apps/client/src/features/page/tree/model/tree-model.types.ts

@@ -1,20 +0,0 @@
-export type TreeNode<T extends object = object> = T & {
-  id: string;
-  children?: TreeNode<T>[];
-};
-
-export type DropOp =
-  | { kind: 'reorder-before'; targetId: string }
-  | { kind: 'reorder-after'; targetId: string }
-  | { kind: 'make-child'; targetId: string };
-
-export type DropResult = {
-  parentId: string | null;
-  index: number;
-};
-
-export type SiblingsInfo<T extends object> = {
-  parentId: string | null;
-  siblings: TreeNode<T>[];
-  index: number;
-};

apps/client/src/features/page/tree/styles/tree.module.css

@@ -5,11 +5,10 @@
 .treeContainer {
     height: 100%;
     min-width: 0;
-    /* DocTree renders a vanilla <ul role="tree"> with no internal virtualizer,
-       so the container must own the scroll. Without this the tree grows past
-       its parent and the page scrolls instead. */
-    overflow-y: auto;
-    overflow-x: hidden;
+
+    > div, > div > .tree {
+        height: 100% !important;
+    }
 }
 
 .node {
@@ -18,39 +17,76 @@
     display: flex;
     align-items: center;
     height: 100%;
-    width: 100%;
+    width: 93%; /* not to overlap with scroll bar */
     text-decoration: none;
     color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
 
-    /* Gate hover styles to mouse-capable devices. Touch browsers synthesize
-       :hover on the first tap (sticky hover) and only fire click on the
-       second tap, requiring a double-tap to navigate. */
-    @media (hover: hover) {
-        &:hover {
-            background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
-        }
+    &:hover {
+        background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+        /*background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6));*/
+     }
 
-        &:hover .actions {
-            opacity: 1;
-            pointer-events: auto;
-        }
-    }
 
     .actions {
-        display: inline-flex;
-        flex-shrink: 0;
-        align-items: center;
-        margin-left: 4px;
-        opacity: 0;
-        pointer-events: none;
+        visibility: hidden;
+        position: absolute;
+        height: 100%;
+        top: 0;
+        right: 0;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
     }
 
-    &:focus-within .actions {
-        opacity: 1;
-        pointer-events: auto;
+      &:hover .actions {
+       visibility: visible;
     }
+
 }
 
+.node:global(.willReceiveDrop) {
+    background-color: light-dark(var(--mantine-color-blue-1), var(--mantine-color-gray-7));
+}
+
+.node:global(.isSelected) {
+    border-radius: 0;
+
+    background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
+/*
+    color: white;
+
+ // background-color: light-dark(
+  //  var(--mantine-color-gray-0),
+   // var(--mantine-color-dark-6)
+  //);
+  //background: rgb(20, 127, 250, 0.5);*/
+}
+
+.node:global(.isSelectedStart.isSelectedEnd) {
+    border-radius: 4px;
+}
+
+.row:focus .node:global(.isSelected) {
+    background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+}
+
+.row:focus .node:global(.isFocused) {
+    background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-5));
+}
+
+.row {
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.row:focus {
+    outline: none;
+}
+
+.row:focus .node {
+    /** come back to this **/
+   /* background-color: light-dark(var(--mantine-color-red-2), var(--mantine-color-dark-5));*/
+}
 
 .icon {
     margin: 0 rem(10px);
@@ -59,12 +95,8 @@
 
 .text {
     flex: 1;
-    /* min-width: 0 lets a flex child shrink below its content size — required
-       for text-overflow: ellipsis on flex items. */
-    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
     font-size: rem(14px);
     font-weight: 500;
 }
@@ -76,113 +108,3 @@
 [role="treeitem"] {
     padding-bottom: 2px;
 }
-
-/* Strip the browser's default <ul> bullet + indent from the DocTree
-   <ul role="tree"> and nested <ul role="group"> nodes. The tree's own indent
-   is driven by paddingLeft on .rowWrapper. */
-[role="tree"],
-[role="tree"] [role="group"] {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-/* ---- pragmatic-tree additions ---- */
-
-.rowWrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    border-radius: 4px;
-}
-
-.node[data-dragging="true"] {
-    opacity: 0.4;
-}
-
-.node:focus-visible {
-    outline: 2px solid light-dark(
-        var(--mantine-color-blue-5),
-        var(--mantine-color-blue-4)
-    );
-    outline-offset: -2px;
-}
-
-.node :focus-visible {
-    outline-offset: -2px;
-}
-
-.node[data-selected="true"] {
-    background-color: light-dark(
-        var(--mantine-color-gray-3),
-        var(--mantine-color-dark-6)
-    );
-}
-
-.node[data-selected="true"] .actions {
-    opacity: 1;
-    pointer-events: auto;
-}
-
-.node[data-receiving-drop="make-child"] {
-    background-color: light-dark(
-        var(--mantine-color-blue-1),
-        rgba(56, 139, 253, 0.15)
-    );
-    outline: 2px solid light-dark(
-        var(--mantine-color-blue-5),
-        var(--mantine-color-blue-7)
-    );
-    outline-offset: -1px;
-}
-
-.node[data-receiving-drop="make-child-blocked"] {
-    outline-color: light-dark(
-        var(--mantine-color-red-5),
-        var(--mantine-color-red-7)
-    );
-}
-
-.dropLine {
-    position: absolute;
-    left: var(--drop-line-indent, 0);
-    right: 8px;
-    height: 2px;
-    background: light-dark(
-        var(--mantine-color-blue-5),
-        var(--mantine-color-blue-4)
-    );
-    pointer-events: none;
-    z-index: 1;
-}
-
-.dropLine::before {
-    content: "";
-    position: absolute;
-    left: -4px;
-    top: -3px;
-    width: 8px;
-    height: 8px;
-    border: 2px solid currentColor;
-    border-radius: 50%;
-    color: light-dark(
-        var(--mantine-color-blue-5),
-        var(--mantine-color-blue-4)
-    );
-    background: var(--mantine-color-body);
-}
-
-.dropLine[data-blocked="true"] {
-    background: light-dark(
-        var(--mantine-color-red-5),
-        var(--mantine-color-red-4)
-    );
-}
-
-.dropLine[data-edge="top"] {
-    top: -1px;
-}
-
-.dropLine[data-edge="bottom"] {
-    bottom: -1px;
-}

apps/client/src/features/share/atoms/open-shared-tree-nodes-atom.ts

@@ -1,3 +0,0 @@
-import { atom } from "jotai";
-
-export const openSharedTreeNodesAtom = atom<Record<string, boolean>>({});

apps/client/src/features/share/components/shared-tree.tsx

@@ -1,11 +1,14 @@
 import { ISharedPageTree } from "@/features/share/types/share.types.ts";
+import { NodeApi, NodeRendererProps, Tree, TreeApi } from "react-arborist";
 import {
   buildSharedPageTree,
   SharedPageTreeNode,
 } from "@/features/share/utils.ts";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useElementSize, useMergedRef } from "@mantine/hooks";
+import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 import { Link, useParams } from "react-router-dom";
-import { useAtom } from "jotai";
+import { atom, useAtom } from "jotai/index";
 import { useTranslation } from "react-i18next";
 import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
 import clsx from "clsx";
@@ -17,204 +20,176 @@ import {
 } from "@tabler/icons-react";
 import { ActionIcon, Box } from "@mantine/core";
 import { extractPageSlugId } from "@/lib";
+import { OpenMap } from "react-arborist/dist/main/state/open-slice";
 import classes from "@/features/page/tree/styles/tree.module.css";
 import styles from "./share.module.css";
 import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import EmojiPicker from "@/components/ui/emoji-picker.tsx";
-import {
-  DocTree,
-  type DocTreeApi,
-  type RenderRowProps,
-} from "@/features/page/tree/components/doc-tree";
-import { openSharedTreeNodesAtom } from "@/features/share/atoms/open-shared-tree-nodes-atom";
 
-interface SharedTreeProps {
+interface SharedTree {
   sharedPageTree: ISharedPageTree;
 }
 
-export default function SharedTree({ sharedPageTree }: SharedTreeProps) {
-  const { t } = useTranslation();
-  const treeRef = useRef<DocTreeApi | null>(null);
+const openSharedTreeNodesAtom = atom<OpenMap>({});
+
+export default function SharedTree({ sharedPageTree }: SharedTree) {
+  const [tree, setTree] = useState<
+    TreeApi<SharedPageTreeNode> | null | undefined
+  >(null);
+  const rootElement = useRef<HTMLDivElement>();
+  const { ref: sizeRef, width, height } = useElementSize();
+  const mergedRef = useMergedRef(rootElement, sizeRef);
   const { pageSlug } = useParams();
-  const [openTreeNodes, setOpenTreeNodes] = useAtom(openSharedTreeNodesAtom);
+  const [openTreeNodes, setOpenTreeNodes] = useAtom<OpenMap>(
+    openSharedTreeNodesAtom,
+  );
 
   const currentNodeId = extractPageSlugId(pageSlug);
 
   const treeData: SharedPageTreeNode[] = useMemo(() => {
-    if (!sharedPageTree?.pageTree) return [] as SharedPageTreeNode[];
+    if (!sharedPageTree?.pageTree) return;
     return buildSharedPageTree(sharedPageTree.pageTree);
   }, [sharedPageTree?.pageTree]);
 
-  const openIds = useMemo(
-    () =>
-      new Set(
-        Object.keys(openTreeNodes).filter((k) => openTreeNodes[k]),
-      ),
-    [openTreeNodes],
-  );
-
   useEffect(() => {
-    // Auto-open the first level of the shared tree on initial load.
-    const root = treeData?.[0];
-    if (!root) return;
-    setOpenTreeNodes((prev) => {
-      if (prev[root.slugId]) return prev;
-      const next = { ...prev, [root.slugId]: true };
-      for (const child of root.children ?? []) {
-        next[child.slugId] = true;
-      }
-      return next;
-    });
-  }, [treeData, setOpenTreeNodes]);
+    const parentNodeId = treeData?.[0]?.slugId;
 
-  useEffect(() => {
-    if (currentNodeId) {
-      treeRef.current?.select(currentNodeId, { scrollIntoView: true });
+    if (parentNodeId && tree) {
+      const parentNode = tree.get(parentNodeId);
+
+      setTimeout(() => {
+        if (parentNode) {
+          tree.openSiblings(parentNode);
+        }
+      });
+
+      // open direct children of parent node
+      parentNode?.children.forEach((node) => {
+        tree.openSiblings(node);
+      });
     }
-  }, [currentNodeId, treeData]);
+  }, [treeData, tree]);
 
-  // Stable callbacks so memo(DocTreeRow) actually saves work — see I2 in the
-  // post-implementation code review.
-  const handleToggle = useCallback(
-    (id: string, isOpen: boolean) =>
-      setOpenTreeNodes((prev) => ({ ...prev, [id]: isOpen })),
-    [setOpenTreeNodes],
-  );
-  const getDragLabel = useCallback(
-    (n: SharedPageTreeNode) => n.name || "untitled",
-    [],
-  );
+  useEffect(() => {
+    if (currentNodeId && tree) {
+      setTimeout(() => {
+        // focus on node and open all parents
+        tree?.select(currentNodeId, { align: "auto" });
+      }, 200);
+    } else {
+      tree?.deselectAll();
+    }
+  }, [currentNodeId, tree]);
 
   if (!sharedPageTree || !sharedPageTree?.pageTree) {
     return null;
   }
 
   return (
-    <div className={classes.treeContainer}>
-      <DocTree<SharedPageTreeNode>
-        readOnly
-        ref={treeRef}
-        data={treeData}
-        openIds={openIds}
-        selectedId={currentNodeId}
-        renderRow={SharedTreeRow}
-        onMove={noopMove}
-        onToggle={handleToggle}
-        getDragLabel={getDragLabel}
-        aria-label={t("Pages")}
-      />
+    <div ref={mergedRef} className={classes.treeContainer}>
+      {rootElement.current && (
+        <Tree
+          data={treeData}
+          disableDrag={true}
+          disableDrop={true}
+          disableEdit={true}
+          width={width}
+          height={rootElement.current.clientHeight}
+          ref={(t) => setTree(t)}
+          openByDefault={false}
+          disableMultiSelection={true}
+          className={classes.tree}
+          rowClassName={classes.row}
+          rowHeight={30}
+          overscanCount={10}
+          dndRootElement={rootElement.current}
+          onToggle={() => {
+            setOpenTreeNodes(tree?.openState);
+          }}
+          initialOpenState={openTreeNodes}
+          onClick={(e) => {
+            if (tree && tree.focusedNode) {
+              tree.select(tree.focusedNode);
+            }
+          }}
+        >
+          {Node}
+        </Tree>
+      )}
     </div>
   );
 }
 
-// Module-scope noop so it's a stable reference across renders.
-const noopMove = () => {};
-
-function SharedTreeRow({
-  node,
-  isOpen,
-  hasChildren,
-  isSelected,
-  rowRef,
-  tabIndex,
-  treeItemProps,
-  toggleOpen,
-}: RenderRowProps<SharedPageTreeNode>) {
+function Node({ node, style, tree }: NodeRendererProps<any>) {
   const { shareId } = useParams();
   const { t } = useTranslation();
   const [, setMobileSidebarState] = useAtom(mobileSidebarAtom);
 
   const pageUrl = buildSharedPageUrl({
     shareId: shareId,
-    pageSlugId: node.slugId,
-    pageTitle: node.name,
+    pageSlugId: node.data.slugId,
+    pageTitle: node.data.name,
   });
 
   return (
-    <Box
-      ref={rowRef as React.Ref<HTMLAnchorElement>}
-      tabIndex={tabIndex}
-      {...treeItemProps}
-      data-selected={isSelected || undefined}
-      className={clsx(classes.node, styles.treeNode)}
-      component={Link}
-      to={pageUrl}
-      onClick={() => {
-        setMobileSidebarState(false);
-      }}
-    >
-      <SharedPageArrow
-        isOpen={isOpen}
-        hasChildren={hasChildren}
-        onToggle={toggleOpen}
-      />
-      <div style={{ marginRight: "4px" }}>
-        <EmojiPicker
-          onEmojiSelect={() => {}}
-          icon={
-            node.icon ? (
-              node.icon
-            ) : (
-              <IconFileDescription size="18" />
-            )
-          }
-          readOnly={true}
-          removeEmojiAction={() => {}}
-          actionIconProps={{ tabIndex: -1 }}
-        />
-      </div>
-      <span className={classes.text}>{node.name || t("untitled")}</span>
-    </Box>
+    <>
+      <Box
+        style={style}
+        className={clsx(classes.node, node.state, styles.treeNode)}
+        component={Link}
+        to={pageUrl}
+        onClick={() => {
+          setMobileSidebarState(false);
+        }}
+      >
+        <PageArrow node={node} />
+        <div style={{ marginRight: "4px" }}>
+          <EmojiPicker
+            onEmojiSelect={() => {}}
+            icon={
+              node.data.icon ? (
+                node.data.icon
+              ) : (
+                <IconFileDescription size="18" />
+              )
+            }
+            readOnly={true}
+            removeEmojiAction={() => {}}
+          />
+        </div>
+        <span className={classes.text}>{node.data.name || t("untitled")}</span>
+      </Box>
+    </>
   );
 }
 
-interface SharedPageArrowProps {
-  isOpen: boolean;
-  hasChildren: boolean;
-  onToggle: () => void;
+interface PageArrowProps {
+  node: NodeApi<SpaceTreeNode>;
 }
 
-function SharedPageArrow({
-  isOpen,
-  hasChildren,
-  onToggle,
-}: SharedPageArrowProps) {
-  if (!hasChildren) {
-    return (
-      <span
-        aria-hidden
-        style={{
-          width: 20,
-          height: 20,
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color: "var(--mantine-color-gray-6)",
-          flexShrink: 0,
-        }}
-      >
-        <IconPointFilled size={4} />
-      </span>
-    );
-  }
-
+function PageArrow({ node }: PageArrowProps) {
   return (
     <ActionIcon
       size={20}
       variant="subtle"
       c="gray"
-      tabIndex={-1}
       onClick={(e) => {
         e.preventDefault();
         e.stopPropagation();
-        onToggle();
+        node.toggle();
       }}
     >
-      {isOpen ? (
-        <IconChevronDown stroke={2} size={16} />
-      ) : (
-        <IconChevronRight stroke={2} size={16} />
-      )}
+      {node.isInternal ? (
+        node.children && (node.children.length > 0 || node.data.hasChildren) ? (
+          node.isOpen ? (
+            <IconChevronDown stroke={2} size={16} />
+          ) : (
+            <IconChevronRight stroke={2} size={16} />
+          )
+        ) : (
+          <IconPointFilled size={4} />
+        )
+      ) : null}
     </ActionIcon>
   );
 }

apps/client/src/features/space/components/sidebar/space-sidebar.tsx

@@ -28,7 +28,7 @@ import {
 import classes from "./space-sidebar.module.css";
 import React from "react";
 import { useAtom } from "jotai";
-import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
+import { treeApiAtom } from "@/features/page/tree/atoms/tree-api-atom.ts";
 import { Link, useLocation, useParams } from "react-router-dom";
 import clsx from "clsx";
 import { useDisclosure } from "@mantine/hooks";
@@ -56,6 +56,7 @@ import { searchSpotlight } from "@/features/search/constants";
 
 export function SpaceSidebar() {
   const { t } = useTranslation();
+  const [tree] = useAtom(treeApiAtom);
   const location = useLocation();
   const [opened, { open: openSettings, close: closeSettings }] =
     useDisclosure(false);
@@ -67,14 +68,13 @@ export function SpaceSidebar() {
 
   const spaceRules = space?.membership?.permissions;
   const spaceAbility = useSpaceAbility(spaceRules);
-  const { handleCreate } = useTreeMutation(space?.id ?? "");
 
   if (!space) {
     return <></>;
   }
 
   function handleCreatePage() {
-    handleCreate(null);
+    tree?.create({ parentId: null, type: "internal", index: 0 });
   }
 
   return (

apps/client/src/features/websocket/use-tree-socket.ts

@@ -1,27 +1,37 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { socketAtom } from "@/features/websocket/atoms/socket-atom.ts";
 import { useAtom } from "jotai";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
 import { WebSocketEvent } from "@/features/websocket/types";
 import { SpaceTreeNode } from "@/features/page/tree/types.ts";
 import { useQueryClient } from "@tanstack/react-query";
-import { treeModel } from "@/features/page/tree/model/tree-model";
+import { SimpleTree } from "react-arborist";
 import localEmitter from "@/lib/local-emitter.ts";
 
 export const useTreeSocket = () => {
   const [socket] = useAtom(socketAtom);
-  const [, setTreeData] = useAtom(treeDataAtom);
+  const [treeData, setTreeData] = useAtom(treeDataAtom);
   const queryClient = useQueryClient();
+  const initialTreeData = useRef(treeData);
+
+  useEffect(() => {
+    initialTreeData.current = treeData;
+  }, [treeData]);
 
   useEffect(() => {
     const updateNodeName = (event) => {
-      if (event.payload?.title === undefined) return;
-      setTreeData((prev) => {
-        if (!treeModel.find(prev, event?.id)) return prev;
-        return treeModel.update(prev, event.id, {
-          name: event.payload.title,
-        } as Partial<SpaceTreeNode>);
-      });
+      const initialData = initialTreeData.current;
+      const treeApi = new SimpleTree<SpaceTreeNode>(initialData);
+
+      if (treeApi.find(event?.id)) {
+        if (event.payload?.title !== undefined) {
+          treeApi.update({
+            id: event.id,
+            changes: { name: event.payload.title },
+          });
+          setTreeData(treeApi.data);
+        }
+      }
     };
 
     localEmitter.on("message", updateNodeName);
@@ -32,110 +42,70 @@ export const useTreeSocket = () => {
 
   useEffect(() => {
     socket?.on("message", (event: WebSocketEvent) => {
+      const initialData = initialTreeData.current;
+      const treeApi = new SimpleTree<SpaceTreeNode>(initialData);
+
       switch (event.operation) {
         case "updateOne":
           if (event.entity[0] === "pages") {
-            setTreeData((prev) => {
-              if (!treeModel.find(prev, event.id)) return prev;
-              let next = prev;
+            if (treeApi.find(event.id)) {
               if (event.payload?.title !== undefined) {
-                next = treeModel.update(next, event.id, {
-                  name: event.payload.title,
-                } as Partial<SpaceTreeNode>);
+                treeApi.update({
+                  id: event.id,
+                  changes: { name: event.payload.title },
+                });
               }
               if (event.payload?.icon !== undefined) {
-                next = treeModel.update(next, event.id, {
-                  icon: event.payload.icon,
-                } as Partial<SpaceTreeNode>);
+                treeApi.update({
+                  id: event.id,
+                  changes: { icon: event.payload.icon },
+                });
               }
-              return next;
-            });
+              setTreeData(treeApi.data);
+            }
           }
           break;
         case "addTreeNode":
-          setTreeData((prev) => {
-            if (treeModel.find(prev, event.payload.data.id)) return prev;
-            const newParentId = event.payload.parentId as string | null;
-            let next = treeModel.insert(
-              prev,
-              newParentId,
-              event.payload.data,
-              event.payload.index,
-            );
-            // Mirror the emitter: flip new parent's hasChildren to true so
-            // the chevron renders on the receiver.
-            if (newParentId) {
-              next = treeModel.update(next, newParentId, {
-                hasChildren: true,
-              } as Partial<SpaceTreeNode>);
-            }
-            return next;
+          if (treeApi.find(event.payload.data.id)) return;
+
+          treeApi.create({
+            parentId: event.payload.parentId,
+            index: event.payload.index,
+            data: event.payload.data,
           });
+          setTreeData(treeApi.data);
+
           break;
         case "moveTreeNode":
-          setTreeData((prev) => {
-            const sourceBefore = treeModel.find(prev, event.payload.id);
-            if (!sourceBefore) return prev;
-            const oldParentId =
-              (sourceBefore as SpaceTreeNode).parentPageId ?? null;
-            const newParentId = event.payload.parentId as string | null;
-
-            const placed = treeModel.place(prev, event.payload.id, {
-              parentId: newParentId,
+          // move node
+          if (treeApi.find(event.payload.id)) {
+            treeApi.move({
+              id: event.payload.id,
+              parentId: event.payload.parentId,
               index: event.payload.index,
             });
-            // `place` silently returns the same reference if the destination
-            // parent isn't loaded on this client. Falling back to removing the
-            // source keeps the UI consistent (the source will reappear when
-            // the user expands the new parent and lazy-load fetches it).
-            if (placed === prev) {
-              return treeModel.remove(prev, event.payload.id);
-            }
 
-            let next = treeModel.update(placed, event.payload.id, {
-              position: event.payload.position,
-              parentPageId: newParentId,
-            } as Partial<SpaceTreeNode>);
+            // update node position
+            treeApi.update({
+              id: event.payload.id,
+              changes: {
+                position: event.payload.position,
+              },
+            });
 
-            // Mirror the emitter's hasChildren bookkeeping so both clients
-            // converge to the same chevron state.
-            if (oldParentId) {
-              const oldParent = treeModel.find(next, oldParentId);
-              if (!oldParent?.children?.length) {
-                next = treeModel.update(next, oldParentId, {
-                  hasChildren: false,
-                } as Partial<SpaceTreeNode>);
-              }
-            }
-            if (newParentId) {
-              next = treeModel.update(next, newParentId, {
-                hasChildren: true,
-              } as Partial<SpaceTreeNode>);
-            }
+            setTreeData(treeApi.data);
+          }
 
-            return next;
-          });
           break;
         case "deleteTreeNode":
-          setTreeData((prev) => {
-            if (!treeModel.find(prev, event.payload.node.id)) return prev;
+          if (treeApi.find(event.payload.node.id)) {
+            treeApi.drop({ id: event.payload.node.id });
+            setTreeData(treeApi.data);
+
             queryClient.invalidateQueries({
               queryKey: ["pages", event.payload.node.slugId].filter(Boolean),
             });
-            let next = treeModel.remove(prev, event.payload.node.id);
-            // Mirror the emitter's hasChildren bookkeeping so both clients
-            // converge to the same chevron state when the last child is deleted.
-            const parentPageId = event.payload.node.parentPageId;
-            if (parentPageId) {
-              const parent = treeModel.find(next, parentPageId);
-              if (!parent?.children?.length) {
-                next = treeModel.update(next, parentPageId, {
-                  hasChildren: false,
-                } as Partial<SpaceTreeNode>);
-              }
-            }
-            return next;
-          });
+          }
           break;
       }
     });

apps/client/vitest.config.ts

@@ -1,17 +0,0 @@
-import { defineConfig } from 'vitest/config';
-import react from '@vitejs/plugin-react';
-import * as path from 'path';
-
-export default defineConfig({
-  plugins: [react()],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-  test: {
-    environment: 'jsdom',
-    globals: true,
-    setupFiles: [],
-  },
-});

apps/server/src/ws/ws.service.ts

@@ -54,7 +54,7 @@ export class WsService {
       return;
     }
 
-    await this.broadcastToAuthorizedUsers(room, client.id, pageId, data);
+    await this.broadcastToAuthorizedUsers(room, client.data.userId, pageId, data);
   }
 
   async invalidateSpaceRestrictionCache(spaceId: string): Promise<void> {
@@ -115,17 +115,14 @@ export class WsService {
 
   private async broadcastToAuthorizedUsers(
     room: string,
-    excludeSocketId: string | null,
+    excludeUserId: string | null,
     pageId: string,
     data: any,
   ): Promise<void> {
     const sockets = await this.server.in(room).fetchSockets();
 
-    // Exclude only the originating socket, not every socket of the originating
-    // user. Excluding by userId silently dropped the originator's other tabs
-    // from receiving restricted-space tree events.
-    const otherSockets = excludeSocketId
-      ? sockets.filter((s) => s.id !== excludeSocketId)
+    const otherSockets = excludeUserId
+      ? sockets.filter((s) => s.data.userId !== excludeUserId)
       : sockets;
     if (otherSockets.length === 0) return;
 

package.json

@@ -95,6 +95,7 @@
   "packageManager": "pnpm@10.4.0",
   "pnpm": {
     "patchedDependencies": {
+      "react-arborist@3.4.0": "patches/react-arborist@3.4.0.patch",
       "scimmy@1.3.5": "patches/scimmy@1.3.5.patch"
     },
     "overrides": {

packages/editor-ext/src/lib/table/dnd/auto-scroll-controller.ts

@@ -0,0 +1,76 @@
+import { DraggingDOMs } from "./utils";
+
+const EDGE_THRESHOLD = 100;
+const SCROLL_SPEED = 10;
+
+export class AutoScrollController {
+    private _autoScrollInterval?: number;
+
+    checkYAutoScroll = (clientY: number) => {
+        const scrollContainer = document.documentElement;
+
+        if (clientY < 0 + EDGE_THRESHOLD) {
+            this._startYAutoScroll(scrollContainer!, -1 * SCROLL_SPEED);
+        } else if (clientY > window.innerHeight - EDGE_THRESHOLD) {
+            this._startYAutoScroll(scrollContainer!, SCROLL_SPEED);
+        } else {
+            this._stopYAutoScroll();
+        }
+    }
+
+    checkXAutoScroll = (clientX: number, draggingDOMs: DraggingDOMs) => {
+        const table = draggingDOMs?.table;
+        if (!table) return;
+
+        const scrollContainer = table.closest<HTMLElement>('.tableWrapper');
+        const editorRect = scrollContainer.getBoundingClientRect();
+        if (!scrollContainer) return;
+
+        if (clientX < editorRect.left + EDGE_THRESHOLD) {
+            this._startXAutoScroll(scrollContainer!, -1 * SCROLL_SPEED);
+        } else if (clientX > editorRect.right - EDGE_THRESHOLD) {
+            this._startXAutoScroll(scrollContainer!, SCROLL_SPEED);
+        } else {
+            this._stopXAutoScroll();
+        }
+    }
+
+    stop = () => {
+        this._stopXAutoScroll();
+        this._stopYAutoScroll();
+    }
+
+    private _startXAutoScroll = (scrollContainer: HTMLElement, speed: number) => {
+        if (this._autoScrollInterval) {
+            clearInterval(this._autoScrollInterval);
+        }
+
+        this._autoScrollInterval = window.setInterval(() => {
+            scrollContainer.scrollLeft += speed;
+        }, 16);
+    }
+
+    private _stopXAutoScroll = () => {
+        if (this._autoScrollInterval) {
+            clearInterval(this._autoScrollInterval);
+            this._autoScrollInterval = undefined;
+        }
+    }
+
+    private _startYAutoScroll = (scrollContainer: HTMLElement, speed: number) => {
+        if (this._autoScrollInterval) {
+            clearInterval(this._autoScrollInterval);
+        }
+
+        this._autoScrollInterval = window.setInterval(() => {
+            scrollContainer.scrollTop += speed;
+        }, 16);
+    }
+
+    private _stopYAutoScroll = () => {
+        if (this._autoScrollInterval) {
+            clearInterval(this._autoScrollInterval);
+            this._autoScrollInterval = undefined;
+        }
+    }
+}

packages/editor-ext/src/lib/table/dnd/dnd-extension.ts

@@ -1,393 +1,316 @@
 import { Editor, Extension } from "@tiptap/core";
-import { PluginKey, Plugin, PluginSpec, TextSelection, Transaction } from "@tiptap/pm/state";
-import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { PluginKey, Plugin, PluginSpec } from "@tiptap/pm/state";
 import { EditorProps, EditorView } from "@tiptap/pm/view";
-import { columnResizingPluginKey } from "@tiptap/pm/tables";
-import { cellAround } from "@tiptap/pm/tables";
 import {
-  cellInfoFromResolvedCell,
   DraggingDOMs,
   getDndRelatedDOMs,
   getHoveringCell,
   HoveringCellInfo,
 } from "./utils";
 import { getDragOverColumn, getDragOverRow } from "./calc-drag-over";
-import { findTable } from "../utils/query";
 import { moveColumn, moveRow } from "../utils";
 import { PreviewController } from "./preview/preview-controller";
 import { DropIndicatorController } from "./preview/drop-indicator-controller";
+import { DragHandleController } from "./handle/drag-handle-controller";
+import { EmptyImageController } from "./handle/empty-image-controller";
+import { AutoScrollController } from "./auto-scroll-controller";
 
-export interface TableHandleState {
-  hoveringCell: HoveringCellInfo | null;
-  tableNode: ProseMirrorNode | null;
-  tablePos: number | null;
-  dragging: { orientation: "col" | "row"; index: number } | null;
-  frozen: boolean;
-}
+export const TableDndKey = new PluginKey("table-drag-and-drop");
 
-const INITIAL_STATE: TableHandleState = {
-  hoveringCell: null,
-  tableNode: null,
-  tablePos: null,
-  dragging: null,
-  frozen: false,
-};
-
-export const TableDndKey = new PluginKey<TableHandleState>("table-handles");
-
-class TableHandlePluginSpec implements PluginSpec<TableHandleState> {
+class TableDragHandlePluginSpec implements PluginSpec<void> {
   key = TableDndKey;
-  props: EditorProps<Plugin<TableHandleState>>;
-
-  private _previewController: PreviewController;
-  private _dropIndicatorController: DropIndicatorController;
+  props: EditorProps<Plugin<void>>;
 
+  private _colDragHandle: HTMLElement;
+  private _rowDragHandle: HTMLElement;
   private _hoveringCell?: HoveringCellInfo;
   private _disposables: (() => void)[] = [];
+  private _draggingCoords: { x: number; y: number } = { x: 0, y: 0 };
+  private _dragging = false;
   private _draggingDirection: "col" | "row" = "col";
   private _draggingIndex = -1;
   private _droppingIndex = -1;
-  private _draggingDOMs?: DraggingDOMs;
-  private _startCoords = { x: 0, y: 0 };
-  private _dragging = false;
-
-  state = {
-    init: (): TableHandleState => INITIAL_STATE,
-    apply: (tr: Transaction, prev: TableHandleState): TableHandleState => {
-      const meta = tr.getMeta(TableDndKey) as Partial<TableHandleState> | null;
-      if (!meta) return prev;
-      let changed = false;
-      for (const key in meta) {
-        if (!Object.is(prev[key as keyof TableHandleState], meta[key as keyof TableHandleState])) {
-          changed = true;
-          break;
-        }
-      }
-      return changed ? { ...prev, ...meta } : prev;
-    },
-  };
+  private _draggingDOMs?: DraggingDOMs | undefined;
+  private _startCoords: { x: number; y: number } = { x: 0, y: 0 };
+  private _previewController: PreviewController;
+  private _dropIndicatorController: DropIndicatorController;
+  private _dragHandleController: DragHandleController;
+  private _emptyImageController: EmptyImageController;
+  private _autoScrollController: AutoScrollController;
 
   constructor(public editor: Editor) {
     this.props = {
       handleDOMEvents: {
-        pointermove: this._pointerMove,
-        // Force-unfreeze on any pointerdown that lands on the editor.
-        // Mantine's `Menu.onClose` doesn't always fire on outside click
-        // (the dropdown vanishes visually but the callback is skipped),
-        // which would otherwise leave `frozen=true` permanently.
-        pointerdown: this._pointerDown,
+        pointerover: this._pointerOver,
       },
     };
 
+    this._dragHandleController = new DragHandleController();
+    this._colDragHandle = this._dragHandleController.colDragHandle;
+    this._rowDragHandle = this._dragHandleController.rowDragHandle;
+
     this._previewController = new PreviewController();
     this._dropIndicatorController = new DropIndicatorController();
+    this._emptyImageController = new EmptyImageController();
+
+    this._autoScrollController = new AutoScrollController();
+
+    this._bindDragEvents();
   }
 
   view = () => {
     const wrapper = this.editor.options.element;
-    // @ts-ignore
+    //@ts-ignore
+    wrapper.appendChild(this._colDragHandle);
+    //@ts-ignore
+    wrapper.appendChild(this._rowDragHandle);
+    //@ts-ignore
     wrapper.appendChild(this._previewController.previewRoot);
-    // @ts-ignore
+    //@ts-ignore
     wrapper.appendChild(this._dropIndicatorController.dropIndicatorRoot);
 
-    // Track the cursor cell so handles follow keyboard nav and clicks too.
-    this.editor.on("selectionUpdate", this._onSelectionUpdate);
-    this._disposables.push(() =>
-      this.editor.off("selectionUpdate", this._onSelectionUpdate),
-    );
-
     return {
+      update: this.update,
       destroy: this.destroy,
     };
   };
 
+  update = () => {};
+
   destroy = () => {
+    if (!this.editor.isDestroyed) return;
+    this._dragHandleController.destroy();
+    this._emptyImageController.destroy();
     this._previewController.destroy();
     this._dropIndicatorController.destroy();
-    this._disposables.forEach((d) => d());
+    this._autoScrollController.stop();
+
+    this._disposables.forEach((disposable) => disposable());
   };
 
-  private _pointerDown = (view: EditorView, _event: PointerEvent): boolean => {
-    const current = TableDndKey.getState(view.state);
-    if (current?.frozen) this.editor.commands.unfreezeHandles();
-    return false;
-  };
-
-  private _pointerMove = (view: EditorView, event: PointerEvent) => {
-    const current = TableDndKey.getState(view.state);
-    if (current?.frozen || current?.dragging) return;
-
-    const resizeState = columnResizingPluginKey.getState(view.state);
-    if (resizeState?.dragging) return;
+  private _pointerOver = (view: EditorView, event: PointerEvent) => {
+    if (this._dragging) return;
 
+    // Don't show drag handles in readonly mode
     if (!this.editor.isEditable) {
-      if (current?.hoveringCell == null && current?.tableNode == null && current?.tablePos == null) return;
-      this._dispatchMeta({ hoveringCell: null, tableNode: null, tablePos: null });
+      this._dragHandleController.hide();
       return;
     }
 
     const hoveringCell = getHoveringCell(view, event);
-    if (hoveringCell) {
-      if (current?.hoveringCell?.cellPos === hoveringCell.cellPos) return;
-      this._hoveringCell = hoveringCell;
-      const $cell = view.state.doc.resolve(hoveringCell.cellPos);
-      const tableInfo = findTable($cell);
-      this._dispatchMeta({
-        hoveringCell,
-        tableNode: tableInfo?.node ?? null,
-        tablePos: tableInfo?.pos ?? null,
-      });
-      return;
+    this._hoveringCell = hoveringCell;
+    if (!hoveringCell) {
+      this._dragHandleController.hide();
+    } else {
+      this._dragHandleController.show(this.editor, hoveringCell);
     }
-
-    // Pointer isn't over a cell but may be transiting toward a handle that
-    // floats outside the cell — fall back to the selection's cell so the
-    // handles stay visible.
-    const $cellPos = cellAround(view.state.selection.$head);
-    if ($cellPos) {
-      const cellInfo = cellInfoFromResolvedCell($cellPos);
-      if (current?.hoveringCell?.cellPos === cellInfo.cellPos) return;
-      this._hoveringCell = cellInfo;
-      const tableInfo = findTable($cellPos);
-      this._dispatchMeta({
-        hoveringCell: cellInfo,
-        tableNode: tableInfo?.node ?? null,
-        tablePos: tableInfo?.pos ?? null,
-      });
-      return;
-    }
-
-    this._hoveringCell = undefined;
-    if (current?.hoveringCell == null && current?.tableNode == null && current?.tablePos == null) return;
-    this._dispatchMeta({ hoveringCell: null, tableNode: null, tablePos: null });
   };
 
-  private _onSelectionUpdate = () => {
-    if (!this.editor.isEditable) return;
-
-    const current = TableDndKey.getState(this.editor.state);
-    if (current?.frozen || current?.dragging) return;
-
-    const $cellPos = cellAround(this.editor.state.selection.$head);
-    if (!$cellPos) return;
-
-    const cellInfo = cellInfoFromResolvedCell($cellPos);
-    if (current?.hoveringCell?.cellPos === cellInfo.cellPos) return;
-
-    this._hoveringCell = cellInfo;
-    const tableInfo = findTable($cellPos);
-    this._dispatchMeta({
-      hoveringCell: cellInfo,
-      tableNode: tableInfo?.node ?? null,
-      tablePos: tableInfo?.pos ?? null,
-    });
+  private _onDragColStart = (event: DragEvent) => {
+    this._onDragStart(event, "col");
   };
 
-  private _dispatchMeta = (patch: Partial<TableHandleState>) => {
-    const tr = this.editor.state.tr.setMeta(TableDndKey, patch);
-    tr.setMeta("addToHistory", false);
-    this.editor.view.dispatch(tr);
-  };
-
-  // ---- Public API for the React handle layer ----
-
-  // Returns true if the drag was set up successfully.
-  startDragFromHandle = (
-    orientation: "col" | "row",
-    clientX: number,
-    clientY: number,
-  ): boolean => {
-    if (!this._hoveringCell) return false;
-    this._dragging = true;
-    this._draggingDirection = orientation;
-    this._startCoords = { x: clientX, y: clientY };
-
-    const draggingIndex =
-      (orientation === "col"
-        ? this._hoveringCell.colIndex
-        : this._hoveringCell.rowIndex) ?? 0;
-    this._draggingIndex = draggingIndex;
-
-    const relatedDoms = getDndRelatedDOMs(
-      this.editor.view,
-      this._hoveringCell.cellPos,
-      draggingIndex,
-      orientation,
-    );
-    if (!relatedDoms) {
-      this._dragging = false;
-      return false;
-    }
-    this._draggingDOMs = relatedDoms;
-
-    this._previewController.onDragStart(relatedDoms, draggingIndex, orientation);
-    this._dropIndicatorController.onDragStart(relatedDoms, orientation);
-
-    // Park the selection inside the dragged cell unless it's already in the
-    // same table. PM auto-maps `selection.from` through concurrent remote
-    // transactions, so commitDrop can resolve the table even if the doc
-    // shifted mid-drag — same trick the pre-pragmatic-dnd implementation
-    // relied on.
-    const state = this.editor.state;
-    const currentTable = findTable(state.selection.$from);
-    const hoverTable = (() => {
-      try {
-        return findTable(state.doc.resolve(this._hoveringCell.cellPos));
-      } catch {
-        return undefined;
-      }
-    })();
-    const tr = state.tr;
-    if (
-      hoverTable &&
-      (!currentTable || currentTable.pos !== hoverTable.pos)
-    ) {
-      try {
-        const $inside = state.doc.resolve(this._hoveringCell.cellPos + 1);
-        tr.setSelection(TextSelection.near($inside, 1));
-      } catch {}
-    }
-    tr.setMeta(TableDndKey, {
-      dragging: { orientation, index: draggingIndex },
-    });
-    tr.setMeta("addToHistory", false);
-    this.editor.view.dispatch(tr);
-    return true;
-  };
-
-  updateDragPosition = (clientX: number, clientY: number) => {
+  private _onDraggingCol = (event: DragEvent) => {
     const draggingDOMs = this._draggingDOMs;
-    if (!draggingDOMs || !this._dragging) return;
+    if (!draggingDOMs) return;
 
-    if (this._draggingDirection === "col") {
-      this._previewController.onDragging(
-        draggingDOMs,
-        clientX,
-        clientY,
-        "col",
-      );
-      const direction = this._startCoords.x > clientX ? "left" : "right";
-      const dragOverColumn = getDragOverColumn(draggingDOMs.table, clientX);
-      if (!dragOverColumn) return;
-      const [col, index] = dragOverColumn;
-      this._droppingIndex = index;
-      this._dropIndicatorController.onDragging(col, direction, "col");
-      return;
-    }
+    this._draggingCoords = { x: event.clientX, y: event.clientY };
+    this._previewController.onDragging(
+      draggingDOMs,
+      this._draggingCoords.x,
+      this._draggingCoords.y,
+      "col",
+    );
 
-    this._previewController.onDragging(draggingDOMs, clientX, clientY, "row");
-    const direction = this._startCoords.y > clientY ? "up" : "down";
-    const dragOverRow = getDragOverRow(draggingDOMs.table, clientY);
+    this._autoScrollController.checkXAutoScroll(event.clientX, draggingDOMs);
+
+    const direction =
+      this._startCoords.x > this._draggingCoords.x ? "left" : "right";
+    const dragOverColumn = getDragOverColumn(
+      draggingDOMs.table,
+      this._draggingCoords.x,
+    );
+    if (!dragOverColumn) return;
+
+    const [col, index] = dragOverColumn;
+    this._droppingIndex = index;
+    this._dropIndicatorController.onDragging(col, direction, "col");
+  };
+
+  private _onDragRowStart = (event: DragEvent) => {
+    this._onDragStart(event, "row");
+  };
+
+  private _onDraggingRow = (event: DragEvent) => {
+    const draggingDOMs = this._draggingDOMs;
+    if (!draggingDOMs) return;
+
+    this._draggingCoords = { x: event.clientX, y: event.clientY };
+    this._previewController.onDragging(
+      draggingDOMs,
+      this._draggingCoords.x,
+      this._draggingCoords.y,
+      "row",
+    );
+
+    this._autoScrollController.checkYAutoScroll(event.clientY);
+
+    const direction =
+      this._startCoords.y > this._draggingCoords.y ? "up" : "down";
+    const dragOverRow = getDragOverRow(
+      draggingDOMs.table,
+      this._draggingCoords.y,
+    );
     if (!dragOverRow) return;
+
     const [row, index] = dragOverRow;
     this._droppingIndex = index;
     this._dropIndicatorController.onDragging(row, direction, "row");
   };
 
-  commitDrop = () => {
-    if (!this._dragging) return;
-    const direction = this._draggingDirection;
-    const from = this._draggingIndex;
-    const to = this._droppingIndex;
-
-    if (from < 0 || to < 0 || from === to) return;
-
-    // Use the live (auto-mapped) selection as the table anchor — PM has
-    // already mapped it through any concurrent remote transactions, so
-    // it's safe to resolve even if the doc shifted mid-drag.
-    const tr = this.editor.state.tr;
-    const pos = this.editor.state.selection.from;
-
-    if (direction === "col") {
-      if (moveColumn({ tr, originIndex: from, targetIndex: to, select: true, pos })) {
-        this.editor.view.dispatch(tr);
-      }
-      return;
-    }
-    if (moveRow({ tr, originIndex: from, targetIndex: to, select: true, pos })) {
-      this.editor.view.dispatch(tr);
-    }
-  };
-
-  endDrag = () => {
+  private _onDragEnd = () => {
     this._dragging = false;
     this._draggingIndex = -1;
     this._droppingIndex = -1;
     this._startCoords = { x: 0, y: 0 };
-    this._draggingDOMs = undefined;
+    this._autoScrollController.stop();
     this._dropIndicatorController.onDragEnd();
     this._previewController.onDragEnd();
-    this._dispatchMeta({ dragging: null });
   };
-}
 
-export type { TableHandlePluginSpec };
+  private _bindDragEvents = () => {
+    this._colDragHandle.addEventListener("dragstart", this._onDragColStart);
+    this._disposables.push(() => {
+      this._colDragHandle.removeEventListener(
+        "dragstart",
+        this._onDragColStart,
+      );
+    });
 
-// Resolve via plugin key, not a module singleton — survives StrictMode / HMR.
-export function getTableHandlePluginSpec(
-  editor: Editor,
-): TableHandlePluginSpec | null {
-  const plugin = TableDndKey.get(editor.state);
-  if (!plugin) return null;
-  return plugin.spec as unknown as TableHandlePluginSpec;
+    this._colDragHandle.addEventListener("dragend", this._onDragEnd);
+    this._disposables.push(() => {
+      this._colDragHandle.removeEventListener("dragend", this._onDragEnd);
+    });
+
+    this._rowDragHandle.addEventListener("dragstart", this._onDragRowStart);
+    this._disposables.push(() => {
+      this._rowDragHandle.removeEventListener(
+        "dragstart",
+        this._onDragRowStart,
+      );
+    });
+
+    this._rowDragHandle.addEventListener("dragend", this._onDragEnd);
+    this._disposables.push(() => {
+      this._rowDragHandle.removeEventListener("dragend", this._onDragEnd);
+    });
+
+    const ownerDocument = this.editor.view.dom?.ownerDocument;
+    if (ownerDocument) {
+      // To make `drop` event work, we need to prevent the default behavior of the
+      // `dragover` event for drop zone. Here we set the whole document as the
+      // drop zone so that even the mouse moves outside the editor, the `drop`
+      // event will still be triggered.
+      ownerDocument.addEventListener("drop", this._onDrop);
+      ownerDocument.addEventListener("dragover", this._onDrag);
+      this._disposables.push(() => {
+        ownerDocument.removeEventListener("drop", this._onDrop);
+        ownerDocument.removeEventListener("dragover", this._onDrag);
+      });
+    }
+  };
+
+  private _onDragStart = (event: DragEvent, type: "col" | "row") => {
+    const dataTransfer = event.dataTransfer;
+    if (dataTransfer) {
+      dataTransfer.effectAllowed = "move";
+      this._emptyImageController.hideDragImage(dataTransfer);
+    }
+    this._dragging = true;
+    this._draggingDirection = type;
+    this._startCoords = { x: event.clientX, y: event.clientY };
+    const draggingIndex =
+      (type === "col"
+        ? this._hoveringCell?.colIndex
+        : this._hoveringCell?.rowIndex) ?? 0;
+
+    this._draggingIndex = draggingIndex;
+
+    const relatedDoms = getDndRelatedDOMs(
+      this.editor.view,
+      this._hoveringCell?.cellPos,
+      draggingIndex,
+      type,
+    );
+    this._draggingDOMs = relatedDoms;
+
+    const index =
+      type === "col"
+        ? this._hoveringCell?.colIndex
+        : this._hoveringCell?.rowIndex;
+
+    this._previewController.onDragStart(relatedDoms, index, type);
+    this._dropIndicatorController.onDragStart(relatedDoms, type);
+  };
+
+  private _onDrag = (event: DragEvent) => {
+    event.preventDefault();
+    if (!this._dragging) return;
+    if (this._draggingDirection === "col") {
+      this._onDraggingCol(event);
+    } else {
+      this._onDraggingRow(event);
+    }
+  };
+
+  private _onDrop = () => {
+    if (!this._dragging) return;
+    const direction = this._draggingDirection;
+    const from = this._draggingIndex;
+    const to = this._droppingIndex;
+    const tr = this.editor.state.tr;
+    const pos = this.editor.state.selection.from;
+
+    if (direction === "col") {
+      const canMove = moveColumn({
+        tr,
+        originIndex: from,
+        targetIndex: to,
+        select: true,
+        pos,
+      });
+      if (canMove) {
+        this.editor.view.dispatch(tr);
+      }
+
+      return;
+    }
+
+    if (direction === "row") {
+      const canMove = moveRow({
+        tr,
+        originIndex: from,
+        targetIndex: to,
+        select: true,
+        pos,
+      });
+      if (canMove) {
+        this.editor.view.dispatch(tr);
+      }
+
+      return;
+    }
+  };
 }
 
 export const TableDndExtension = Extension.create({
   name: "table-drag-and-drop",
   addProseMirrorPlugins() {
     const editor = this.editor;
-    const spec = new TableHandlePluginSpec(editor);
-    return [new Plugin(spec)];
+
+    const dragHandlePluginSpec = new TableDragHandlePluginSpec(editor);
+    const dragHandlePlugin = new Plugin(dragHandlePluginSpec);
+
+    return [dragHandlePlugin];
   },
 });
-
-export const TableHandleCommandsExtension = Extension.create({
-  name: "table-handle-commands",
-  addCommands() {
-    return {
-      freezeHandles:
-        () =>
-        ({ tr, dispatch }) => {
-          if (dispatch) {
-            tr.setMeta(TableDndKey, { frozen: true });
-            tr.setMeta("addToHistory", false);
-          }
-          return true;
-        },
-      unfreezeHandles:
-        () =>
-        ({ tr, state, dispatch }) => {
-          if (dispatch) {
-            // Re-sync `hoveringCell` to the cursor's cell as we unfreeze:
-            // `selectionUpdate` was gated while frozen, so the stored
-            // hoveringCell may be stale.
-            const patch: Partial<TableHandleState> = { frozen: false };
-            const $cellPos = cellAround(state.selection.$head);
-            if ($cellPos) {
-              const cellInfo = cellInfoFromResolvedCell($cellPos);
-              const tableInfo = findTable($cellPos);
-              patch.hoveringCell = cellInfo;
-              patch.tableNode = tableInfo?.node ?? null;
-              patch.tablePos = tableInfo?.pos ?? null;
-            } else {
-              patch.hoveringCell = null;
-              patch.tableNode = null;
-              patch.tablePos = null;
-            }
-            tr.setMeta(TableDndKey, patch);
-            tr.setMeta("addToHistory", false);
-          }
-          return true;
-        },
-    };
-  },
-});
-
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    tableHandleCommands: {
-      freezeHandles: () => ReturnType;
-      unfreezeHandles: () => ReturnType;
-    };
-  }
-}

packages/editor-ext/src/lib/table/dnd/handle/drag-handle-controller.ts

@@ -0,0 +1,105 @@
+import { Editor } from "@tiptap/core";
+import { HoveringCellInfo } from "../utils";
+import { computePosition, offset } from "@floating-ui/dom";
+
+export class DragHandleController {
+    private _colDragHandle: HTMLElement;
+    private _rowDragHandle: HTMLElement;
+
+    constructor() {
+        this._colDragHandle = this._createDragHandleDom('col');
+        this._rowDragHandle = this._createDragHandleDom('row');
+    }
+
+    get colDragHandle() {
+        return this._colDragHandle;
+    }
+
+    get rowDragHandle() {
+        return this._rowDragHandle;
+    }
+
+    show = (editor: Editor, hoveringCell: HoveringCellInfo) => {
+        this._showColDragHandle(editor, hoveringCell);
+        this._showRowDragHandle(editor, hoveringCell);
+    }
+
+    hide = () => {
+        Object.assign(this._colDragHandle.style, {
+            display: 'none',
+            left: '-999px',
+            top: '-999px',
+        });
+        Object.assign(this._rowDragHandle.style, {
+            display: 'none',
+            left: '-999px',
+            top: '-999px',
+        });
+    }
+
+    destroy = () => {
+        this._colDragHandle.remove()
+        this._rowDragHandle.remove()
+    }
+
+    private _createDragHandleDom = (type: 'col' | 'row') => {
+        const dragHandle = document.createElement('div')
+        dragHandle.classList.add('drag-handle')
+        dragHandle.setAttribute('draggable', 'true')
+        dragHandle.setAttribute('data-direction', type === 'col' ? 'horizontal' : 'vertical')
+        dragHandle.setAttribute('data-drag-handle', '')
+        Object.assign(dragHandle.style, {
+            position: 'absolute',
+            top: '-999px',
+            left: '-999px',
+            display: 'none',
+        })
+        return dragHandle;
+    }
+
+    private _showColDragHandle(editor: Editor, hoveringCell: HoveringCellInfo) {
+        const referenceCell = editor.view.nodeDOM(hoveringCell.colFirstCellPos);
+        if (!referenceCell) return;
+
+        const yOffset = -1 * parseInt(getComputedStyle(this._colDragHandle).height) / 2;
+
+        computePosition(
+            referenceCell as HTMLElement,
+            this._colDragHandle,
+            {
+                placement: 'top',
+                middleware: [offset(yOffset)]
+            }
+        )
+            .then(({ x, y }) => {
+                Object.assign(this._colDragHandle.style, {
+                    display: 'block',
+                    top: `${y}px`,
+                    left: `${x}px`,
+                });
+            })
+    }
+
+    private _showRowDragHandle(editor: Editor, hoveringCell: HoveringCellInfo) {
+        const referenceCell = editor.view.nodeDOM(hoveringCell.rowFirstCellPos);
+        if (!referenceCell) return;
+
+        const xOffset = -1 * parseInt(getComputedStyle(this._rowDragHandle).width) / 2;
+
+        computePosition(
+            referenceCell as HTMLElement,
+            this._rowDragHandle,
+            {
+                middleware: [offset(xOffset)],
+                placement: 'left'
+            }
+        )
+            .then(({ x, y}) => {
+                Object.assign(this._rowDragHandle.style, {
+                    display: 'block',
+                    top: `${y}px`,
+                    left: `${x}px`,
+                });
+            })
+    }
+}

packages/editor-ext/src/lib/table/dnd/handle/empty-image-controller.ts

@@ -0,0 +1,21 @@
+export class EmptyImageController {
+    private _emptyImage: HTMLImageElement;
+
+    constructor() {
+        this._emptyImage = new Image(1, 1);
+        this._emptyImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+    }
+
+    get emptyImage() {
+        return this._emptyImage;
+    }
+
+    hideDragImage = (dataTransfer: DataTransfer) => {
+        dataTransfer.effectAllowed = 'move';
+        dataTransfer.setDragImage(this._emptyImage, 0, 0);
+    }
+
+    destroy = () => {
+        this._emptyImage.remove();
+    }
+}

packages/editor-ext/src/lib/table/dnd/index.ts

@@ -1,7 +1 @@
-export {
-  TableDndExtension,
-  TableHandleCommandsExtension,
-  TableDndKey,
-  getTableHandlePluginSpec,
-} from "./dnd-extension";
-export type { TableHandleState, TableHandlePluginSpec } from "./dnd-extension";
+export * from './dnd-extension'

packages/editor-ext/src/lib/table/dnd/preview/preview-controller.ts

@@ -1,4 +1,4 @@
-import { computePosition, offset, shift, ReferenceElement } from "@floating-ui/dom";
+import { computePosition, offset, ReferenceElement } from "@floating-ui/dom";
 import { DraggingDOMs } from "../utils";
 import { clearPreviewDOM, createPreviewDOM } from "./render-preview";
 
@@ -23,7 +23,7 @@ export class PreviewController {
     onDragStart = (relatedDoms: DraggingDOMs, index: number | undefined, type: 'col' | 'row') => {
         this._initPreviewStyle(relatedDoms.table, relatedDoms.cell, type);
         createPreviewDOM(relatedDoms.table, this._preview, index, type)
-        this._initPreviewPosition(relatedDoms.table, relatedDoms.cell, type);
+        this._initPreviewPosition(relatedDoms.cell, type);
     }
 
     onDragEnd = () => {
@@ -32,7 +32,7 @@ export class PreviewController {
     }
 
     onDragging = (relatedDoms: DraggingDOMs, x: number, y: number, type: 'col' | 'row') => {
-        this._updatePreviewPosition(x, y, relatedDoms.table, relatedDoms.cell, type);
+        this._updatePreviewPosition(x, y, relatedDoms.cell, type);
     }
 
     destroy = () => {
@@ -60,7 +60,7 @@ export class PreviewController {
         }
     }
 
-    private _initPreviewPosition(table: HTMLElement, cell: HTMLElement, type: 'col' | 'row') {
+    private _initPreviewPosition(cell: HTMLElement, type: 'col' | 'row') {
         void computePosition(cell, this._preview, {
             placement: type === 'row' ? 'right' : 'bottom',
             middleware: [
@@ -70,7 +70,6 @@ export class PreviewController {
                     }
                     return -rects.reference.width
                 }),
-                shift({ boundary: table, padding: 0 }),
             ],
         }).then(({ x, y }) => {
             Object.assign(this._preview.style, {
@@ -80,20 +79,11 @@ export class PreviewController {
         });
     }
 
-    // Clamp the preview to within the table's bounds via `shift({ boundary })`
-    // so it can't track the cursor past the table edge. Without the clamp,
-    // dragging near the viewport edge pushes the preview's `left` (or `top`)
-    // beyond the document's natural width/height, the browser extends the
-    // page to contain it, and the auto-scroll plugin then has a wider area
-    // to keep scrolling into — a feedback loop that grows the page forever.
-    private _updatePreviewPosition(x: number, y: number, table: HTMLElement, cell: HTMLElement, type: 'col' | 'row') {
+    private _updatePreviewPosition(x: number, y: number, cell: HTMLElement, type: 'col' | 'row') {
         computePosition(
             getVirtualElement(cell, x, y),
             this._preview,
-            {
-                placement: type === 'row' ? 'right' : 'bottom',
-                middleware: [shift({ boundary: table, padding: 0 })],
-            },
+            { placement: type === 'row' ? 'right' : 'bottom' },
         ).then(({ x, y }) => {
             if (type === 'row') {
                 Object.assign(this._preview.style, {

packages/editor-ext/src/lib/table/dnd/utils.ts

@@ -1,5 +1,4 @@
 import { cellAround, TableMap } from "@tiptap/pm/tables"
-import { ResolvedPos } from "@tiptap/pm/model"
 import { EditorView } from "@tiptap/pm/view"
 
 export function getHoveringCell(
@@ -9,30 +8,19 @@ export function getHoveringCell(
   const domCell = domCellAround(event.target as HTMLElement | null)
   if (!domCell) return
 
-  // Resolve directly from the cell DOM rather than via coords. The previous
-  // center-coords approach broke on tall merged cells — their visual center
-  // can land in empty space whose closest PM position resolves to an
-  // adjacent cell. `posAtDOM(td, 0)` is always inside this cell, regardless
-  // of rowspan/colspan.
-  let pos: number
-  try {
-    pos = view.posAtDOM(domCell, 0)
-  } catch {
-    return
-  }
-  const $cellPos = cellAround(view.state.doc.resolve(pos))
+  const { left, top, width, height } = domCell.getBoundingClientRect()
+  const eventPos = view.posAtCoords({
+    // Use the center coordinates of the cell to ensure we're within the
+    // selected cell. This prevents potential issues when the mouse is on the
+    // border of two cells.
+    left: left + width / 2,
+    top: top + height / 2,
+  })
+  if (!eventPos) return
+
+  const $cellPos = cellAround(view.state.doc.resolve(eventPos.pos))
   if (!$cellPos) return
 
-  return cellInfoFromResolvedCell($cellPos)
-}
-
-/**
- * Build HoveringCellInfo from a resolved position whose parent is a
- * table cell (i.e. the result of `cellAround` on some inner position).
- */
-export function cellInfoFromResolvedCell(
-  $cellPos: ResolvedPos,
-): HoveringCellInfo {
   const map = TableMap.get($cellPos.node(-1))
   const tableStart = $cellPos.start(-1)
   const cellRect = map.findCell($cellPos.pos - tableStart)

packages/editor-ext/src/lib/table/header-pin/controller.ts

@@ -1,186 +0,0 @@
-// Per-table header-pin controller: native sticky when table fits its wrapper, transform fallback when it doesn't.
-
-import { computePinTop, pinOffsetWatcher } from './offset';
-
-const WRAPPER_NO_OVERFLOW = 'tableWrapperNoOverflow';
-const HEADER_PINNED = 'tableHeaderPinned';
-const PIN_OFFSET_VAR = '--table-pin-offset';
-
-type PinMode = 'off' | 'native' | 'fallback';
-
-function firstRowIsAllHeaders(row: HTMLTableRowElement | null): boolean {
-  if (!row) return false;
-  const cells = Array.from(row.cells);
-  return cells.length > 0 && cells.every((c) => c.tagName === 'TH');
-}
-
-function isNestedTable(wrapper: HTMLElement): boolean {
-  return wrapper.closest('table .tableWrapper') !== null;
-}
-
-function isLayoutInert(rect: DOMRectReadOnly): boolean {
-  return rect.width === 0 && rect.height === 0;
-}
-
-const fallbackControllers = new Set<TablePinController>();
-let fallbackScrollListener: (() => void) | null = null;
-let fallbackRafPending = false;
-
-function ensureFallbackListener() {
-  if (fallbackScrollListener) return;
-  fallbackScrollListener = () => {
-    if (fallbackRafPending) return;
-    fallbackRafPending = true;
-    requestAnimationFrame(() => {
-      fallbackRafPending = false;
-      for (const ctrl of fallbackControllers) ctrl.updateFallbackOffset();
-    });
-  };
-  document.addEventListener('scroll', fallbackScrollListener, {
-    passive: true,
-    capture: true,
-  });
-}
-
-function maybeTeardownFallbackListener() {
-  if (!fallbackScrollListener || fallbackControllers.size > 0) return;
-  document.removeEventListener('scroll', fallbackScrollListener, {
-    capture: true,
-  });
-  fallbackScrollListener = null;
-  fallbackRafPending = false;
-}
-
-export class TablePinController {
-  private wrapper: HTMLElement;
-  private table: HTMLTableElement;
-  private fitsObserver?: IntersectionObserver;
-  private mode: PinMode = 'off';
-  private cachedHeaderRow: HTMLTableRowElement | null = null;
-
-  constructor(wrapper: HTMLElement, table: HTMLTableElement) {
-    this.wrapper = wrapper;
-    this.table = table;
-    pinOffsetWatcher.acquire();
-    this.fitsObserver = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) this.evaluateFit(entry);
-      },
-      { root: this.wrapper, threshold: 1 },
-    );
-    this.fitsObserver.observe(this.table);
-  }
-
-  private getHeaderRow(): HTMLTableRowElement | null {
-    if (this.cachedHeaderRow && this.table.contains(this.cachedHeaderRow)) {
-      return this.cachedHeaderRow;
-    }
-    this.cachedHeaderRow = this.table.querySelector('tr');
-    return this.cachedHeaderRow;
-  }
-
-  private evaluateFit(entry: IntersectionObserverEntry) {
-    if (!this.isEligible()) {
-      this.apply('off');
-      return;
-    }
-    if (isLayoutInert(entry.boundingClientRect)) return;
-    this.apply(entry.isIntersecting ? 'native' : 'fallback');
-  }
-
-  private isEligible(): boolean {
-    return (
-      !isNestedTable(this.wrapper) && firstRowIsAllHeaders(this.getHeaderRow())
-    );
-  }
-
-  private apply(next: PinMode) {
-    if (next === this.mode) return;
-
-    if (this.mode === 'fallback' && next !== 'fallback') {
-      fallbackControllers.delete(this);
-      maybeTeardownFallbackListener();
-    }
-
-    this.mode = next;
-    const cls = this.wrapper.classList;
-
-    if (next === 'off') {
-      cls.remove(HEADER_PINNED);
-      cls.remove(WRAPPER_NO_OVERFLOW);
-      this.wrapper.style.removeProperty(PIN_OFFSET_VAR);
-    } else if (next === 'native') {
-      cls.add(HEADER_PINNED);
-      cls.add(WRAPPER_NO_OVERFLOW);
-      // Native mode reads --editor-pin-offset from :root; clear stale per-wrapper var from fallback.
-      this.wrapper.style.removeProperty(PIN_OFFSET_VAR);
-    } else if (next === 'fallback') {
-      cls.add(HEADER_PINNED);
-      cls.remove(WRAPPER_NO_OVERFLOW);
-      fallbackControllers.add(this);
-      ensureFallbackListener();
-      // Avoid one stale-frame paint under translateY.
-      this.updateFallbackOffset();
-    }
-  }
-
-  updateFallbackOffset() {
-    const pinTop = computePinTop();
-    const tableRect = this.table.getBoundingClientRect();
-    const headerRow = this.getHeaderRow();
-    if (!headerRow) return;
-    const rowHeight = headerRow.getBoundingClientRect().height;
-
-    const active = tableRect.top < pinTop && tableRect.bottom > pinTop + rowHeight;
-
-    if (active) {
-      const offset = Math.min(pinTop - tableRect.top, tableRect.height - rowHeight);
-      this.wrapper.style.setProperty(PIN_OFFSET_VAR, `${offset}px`);
-    } else {
-      this.wrapper.style.removeProperty(PIN_OFFSET_VAR);
-    }
-  }
-
-  refresh() {
-    // The header <tr> may have been replaced by a PM transaction; drop
-    // the cached reference before checking eligibility.
-    this.cachedHeaderRow = null;
-    if (!this.isEligible()) {
-      this.apply('off');
-      return;
-    }
-    if (this.mode === 'off') {
-      // Eligibility just flipped back on; re-trigger the observer so it
-      // emits the current intersection state.
-      this.fitsObserver?.unobserve(this.table);
-      this.fitsObserver?.observe(this.table);
-    }
-  }
-
-  destroy() {
-    this.fitsObserver?.disconnect();
-    this.fitsObserver = undefined;
-    this.apply('off');
-    pinOffsetWatcher.release();
-  }
-}
-
-const controllers = new WeakMap<HTMLElement, TablePinController>();
-
-export function attach(wrapper: HTMLElement) {
-  if (controllers.has(wrapper)) return;
-  const table = wrapper.querySelector(':scope > table') as HTMLTableElement | null;
-  if (!table) return;
-  controllers.set(wrapper, new TablePinController(wrapper, table));
-}
-
-export function detach(wrapper: HTMLElement) {
-  const ctrl = controllers.get(wrapper);
-  if (!ctrl) return;
-  ctrl.destroy();
-  controllers.delete(wrapper);
-}
-
-export function getController(wrapper: HTMLElement): TablePinController | undefined {
-  return controllers.get(wrapper);
-}

packages/editor-ext/src/lib/table/header-pin/extension.ts

@@ -1,78 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-
-import { attach, detach, getController } from './controller';
-
-const tableHeaderPinKey = new PluginKey('tableHeaderPin');
-
-export const TableHeaderPin = Extension.create({
-  name: 'tableHeaderPin',
-
-  addProseMirrorPlugins() {
-    let editorRoot: HTMLElement | null = null;
-    let domObserver: MutationObserver | null = null;
-    const tracked = new Set<HTMLElement>();
-    let rafHandle: number | null = null;
-
-    const reconcile = () => {
-      rafHandle = null;
-      if (!editorRoot) return;
-      const current = new Set(
-        editorRoot.querySelectorAll<HTMLElement>('.tableWrapper'),
-      );
-      for (const w of tracked) {
-        if (!current.has(w)) {
-          detach(w);
-          tracked.delete(w);
-        }
-      }
-      for (const w of current) {
-        if (!tracked.has(w)) {
-          attach(w);
-          tracked.add(w);
-        }
-      }
-    };
-
-    const schedule = () => {
-      if (rafHandle !== null) return;
-      rafHandle = requestAnimationFrame(reconcile);
-    };
-
-    return [
-      new Plugin({
-        key: tableHeaderPinKey,
-
-        view(editorView) {
-          editorRoot = editorView.dom as HTMLElement;
-
-          schedule();
-
-          domObserver = new MutationObserver(schedule);
-          domObserver.observe(editorRoot, { subtree: true, childList: true });
-
-          return {
-            update(view, prevState) {
-              if (!editorRoot) return;
-              if (view.state.doc === prevState.doc) return;
-              editorRoot
-                .querySelectorAll<HTMLElement>('.tableWrapper')
-                .forEach((w) => getController(w)?.refresh());
-            },
-            destroy() {
-              if (rafHandle !== null) {
-                cancelAnimationFrame(rafHandle);
-                rafHandle = null;
-              }
-              domObserver?.disconnect();
-              domObserver = null;
-              for (const w of tracked) detach(w);
-              tracked.clear();
-              editorRoot = null;
-            },
-          };
-        },
-      }),
-    ];
-  },
-});

packages/editor-ext/src/lib/table/header-pin/index.ts

@@ -1 +0,0 @@
-export { TableHeaderPin } from './extension';

packages/editor-ext/src/lib/table/header-pin/offset.ts

@@ -1,65 +0,0 @@
-// Pin-offset measurement and watcher used by the table header-pin controller.
-
-// Fallback app-bar height (px) when no fixed surface is mounted; matches global-app-shell.tsx.
-const APP_BAR_FALLBACK_HEIGHT = 45;
-
-export const EDITOR_PIN_OFFSET_VAR = '--editor-pin-offset';
-
-// Selectors for fixed surfaces between viewport top and editor content. Use data attributes —
-// CSS module classes are build-time hashed and won't match.
-const PIN_ANCHOR_SELECTORS = [
-  '[data-page-header]',
-  '[data-fixed-toolbar]',
-] as const;
-
-export function computePinTop(): number {
-  let bottom = APP_BAR_FALLBACK_HEIGHT;
-  for (const sel of PIN_ANCHOR_SELECTORS) {
-    const el = document.querySelector(sel) as HTMLElement | null;
-    if (!el) continue;
-    const rect = el.getBoundingClientRect();
-    if (rect.height > 0 && rect.bottom > bottom) bottom = rect.bottom;
-  }
-  return bottom;
-}
-
-// Reference-counted watcher that publishes the editor's top offset to a CSS custom property.
-export const pinOffsetWatcher = {
-  refs: 0,
-  resizeObserver: null as ResizeObserver | null,
-  rafPending: false,
-  lastValue: -1,
-
-  acquire() {
-    if (this.refs++ > 0) return;
-    this.publish();
-    const schedule = () => {
-      if (this.rafPending) return;
-      this.rafPending = true;
-      requestAnimationFrame(() => {
-        this.rafPending = false;
-        this.publish();
-      });
-    };
-    this.resizeObserver = new ResizeObserver(schedule);
-    this.resizeObserver.observe(document.body);
-  },
-
-  release() {
-    if (--this.refs > 0) return;
-    this.resizeObserver?.disconnect();
-    this.resizeObserver = null;
-    document.documentElement.style.removeProperty(EDITOR_PIN_OFFSET_VAR);
-    this.lastValue = -1;
-  },
-
-  publish() {
-    const top = computePinTop();
-    if (top === this.lastValue) return;
-    this.lastValue = top;
-    document.documentElement.style.setProperty(
-      EDITOR_PIN_OFFSET_VAR,
-      `${top}px`,
-    );
-  },
-};

packages/editor-ext/src/lib/table/index.ts

@@ -3,13 +3,3 @@ export * from "./cell";
 export * from "./header";
 export * from "./table";
 export * from "./dnd";
-export * from "./table-view";
-export * from "./header-pin";
-export * from "./table-readonly-sort";
-export { moveColumn } from "./utils/move-column";
-export type { MoveColumnParams } from "./utils/move-column";
-export { moveRow } from "./utils/move-row";
-export type { MoveRowParams } from "./utils/move-row";
-export { convertTableNodeToArrayOfRows } from "./utils/convert-table-node-to-array-of-rows";
-export { convertArrayOfRowsToTableNode } from "./utils/convert-array-of-rows-to-table-node";
-export { transpose } from "./utils/transpose";

packages/editor-ext/src/lib/table/table-readonly-sort.ts

@@ -1,233 +0,0 @@
-import { Extension } from '@tiptap/core';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-
-type SortDirection = 'asc' | 'desc';
-
-type SortState = {
-  col: number;
-  direction: SortDirection;
-};
-
-const CHEVRON_CLASS = 'tableReadonlySortChevron';
-
-const tableReadonlySortKey = new PluginKey('tableReadonlySort');
-
-const sortStates = new WeakMap<HTMLTableElement, SortState>();
-const originalOrders = new WeakMap<HTMLTableElement, HTMLTableRowElement[]>();
-
-const collator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true });
-
-function getColumnIndex(th: HTMLTableCellElement): number {
-  const row = th.parentElement as HTMLTableRowElement;
-  if (!row) return -1;
-  let col = 0;
-  for (let i = 0; i < row.cells.length; i++) {
-    if (row.cells[i] === th) return col;
-    col += row.cells[i].colSpan ?? 1;
-  }
-  return -1;
-}
-
-function getHeaderTh(target: EventTarget | null): HTMLTableCellElement | null {
-  if (!(target instanceof Element)) return null;
-  const th = target.closest('th') as HTMLTableCellElement | null;
-  if (!th) return null;
-  const row = th.parentElement;
-  if (!row) return null;
-  const tbody = row.parentElement;
-  if (!tbody) return null;
-  const table = tbody.closest('table');
-  if (!table) return null;
-
-  // th must be in the first row of the table (could be in thead or tbody)
-  const firstRow = table.querySelector('tr');
-  if (firstRow !== row) return null;
-
-  return th;
-}
-
-function getCellText(row: HTMLTableRowElement, colIndex: number): string {
-  let col = 0;
-  for (let i = 0; i < row.cells.length; i++) {
-    if (col === colIndex) return row.cells[i].textContent?.trim() ?? '';
-    col += row.cells[i].colSpan ?? 1;
-  }
-  return '';
-}
-
-function getOrSaveOriginalOrder(
-  table: HTMLTableElement,
-  dataRows: HTMLTableRowElement[],
-): HTMLTableRowElement[] {
-  if (!originalOrders.has(table)) {
-    originalOrders.set(table, [...dataRows]);
-  }
-  return originalOrders.get(table)!;
-}
-
-function sortDataRows(
-  dataRows: HTMLTableRowElement[],
-  colIndex: number,
-  direction: SortDirection,
-): HTMLTableRowElement[] {
-  return [...dataRows].sort((a, b) => {
-    const textA = getCellText(a, colIndex);
-    const textB = getCellText(b, colIndex);
-    const emptyA = textA === '';
-    const emptyB = textB === '';
-    if (emptyA && emptyB) return 0;
-    if (emptyA) return 1;
-    if (emptyB) return -1;
-    const cmp = collator.compare(textA, textB);
-    return direction === 'asc' ? cmp : -cmp;
-  });
-}
-
-function applySort(table: HTMLTableElement, colIndex: number): void {
-  const tbody = table.querySelector('tbody');
-  if (!tbody) return;
-
-  const allRows = Array.from(tbody.querySelectorAll<HTMLTableRowElement>(':scope > tr'));
-  if (allRows.length === 0) return;
-
-  const headerRow = allRows[0];
-  const dataRows = allRows.slice(1);
-  if (dataRows.length === 0) return;
-
-  const current = sortStates.get(table) ?? null;
-  const saved = getOrSaveOriginalOrder(table, dataRows);
-
-  let next: SortState | null;
-  if (!current || current.col !== colIndex) {
-    next = { col: colIndex, direction: 'asc' };
-  } else if (current.direction === 'asc') {
-    next = { col: colIndex, direction: 'desc' };
-  } else {
-    next = null;
-  }
-
-  if (next === null) {
-    sortStates.delete(table);
-    tbody.append(headerRow, ...saved);
-  } else {
-    sortStates.set(table, next);
-    const sorted = sortDataRows(saved, next.col, next.direction);
-    tbody.append(headerRow, ...sorted);
-  }
-
-  updateChevrons(table);
-}
-
-const CHEVRON_SVG =
-  '<svg viewBox="0 0 12 12" width="10" height="10" aria-hidden="true">' +
-  '<path d="M2.5 4.5 L6 8 L9.5 4.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />' +
-  '</svg>';
-
-function ensureChevron(th: HTMLTableCellElement): HTMLSpanElement {
-  let chevron = th.querySelector<HTMLSpanElement>(`.${CHEVRON_CLASS}`);
-  if (!chevron) {
-    chevron = document.createElement('span');
-    chevron.className = CHEVRON_CLASS;
-    chevron.setAttribute('aria-hidden', 'true');
-    chevron.innerHTML = CHEVRON_SVG;
-    th.appendChild(chevron);
-  }
-  return chevron;
-}
-
-function updateChevrons(table: HTMLTableElement): void {
-  const firstRow = table.querySelector('tr');
-  if (!firstRow) return;
-
-  const state = sortStates.get(table) ?? null;
-  let col = 0;
-  for (let i = 0; i < firstRow.cells.length; i++) {
-    const cell = firstRow.cells[i];
-    if (cell.tagName !== 'TH') {
-      col += cell.colSpan ?? 1;
-      continue;
-    }
-    const chevron = ensureChevron(cell as HTMLTableCellElement);
-    let label: string;
-    if (state && state.col === col) {
-      chevron.setAttribute('data-sort', state.direction);
-      label = state.direction === 'asc' ? 'Sort descending' : 'Clear sort';
-    } else {
-      chevron.removeAttribute('data-sort');
-      label = 'Sort ascending';
-    }
-    chevron.setAttribute('data-tooltip', label);
-    chevron.setAttribute('aria-label', label);
-    chevron.title = label;
-    col += cell.colSpan ?? 1;
-  }
-}
-
-function addChevronsToAllTables(editorRoot: HTMLElement): void {
-  const tables = editorRoot.querySelectorAll<HTMLTableElement>('table');
-  tables.forEach((table) => updateChevrons(table));
-}
-
-function removeAllChevrons(editorRoot: HTMLElement): void {
-  editorRoot
-    .querySelectorAll<HTMLSpanElement>(`.${CHEVRON_CLASS}`)
-    .forEach((el) => el.remove());
-}
-
-export const TableReadonlySort = Extension.create({
-  name: 'tableReadonlySort',
-
-  addProseMirrorPlugins() {
-    const editor = this.editor;
-    let editorRoot: HTMLElement | null = null;
-
-    const onClick = (event: MouseEvent) => {
-      if (editor.isEditable) return;
-      // Only react to clicks on the chevron, not anywhere else in the header
-      // cell. This lets the user click into a header to select text without
-      // accidentally triggering a sort.
-      if (!(event.target instanceof Element)) return;
-      const chevron = event.target.closest(`.${CHEVRON_CLASS}`);
-      if (!chevron) return;
-      const th = getHeaderTh(chevron);
-      if (!th) return;
-      const table = th.closest('table') as HTMLTableElement | null;
-      if (!table) return;
-      const colIndex = getColumnIndex(th);
-      if (colIndex < 0) return;
-      applySort(table, colIndex);
-    };
-
-    return [
-      new Plugin({
-        key: tableReadonlySortKey,
-
-        view(editorView) {
-          editorRoot = editorView.dom as HTMLElement;
-          editorRoot.addEventListener('click', onClick);
-
-          if (!editor.isEditable) {
-            addChevronsToAllTables(editorRoot);
-          }
-
-          return {
-            update(view) {
-              const root = view.dom as HTMLElement;
-              if (!editor.isEditable) {
-                addChevronsToAllTables(root);
-              } else {
-                removeAllChevrons(root);
-              }
-            },
-            destroy() {
-              if (editorRoot) {
-                editorRoot.removeEventListener('click', onClick);
-                removeAllChevrons(editorRoot);
-              }
-            },
-          };
-        },
-      }),
-    ];
-  },
-});

packages/editor-ext/src/lib/table/table-view.ts

@@ -1,158 +0,0 @@
-import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
-import type { NodeView, ViewMutationRecord } from '@tiptap/pm/view';
-import { getColStyleDeclaration } from './utils/col-style';
-
-export function updateColumns(
-  node: ProseMirrorNode,
-  colgroup: HTMLElement,
-  table: HTMLTableElement,
-  cellMinWidth: number,
-  overrideCol?: number,
-  overrideValue?: number,
-) {
-  let totalWidth = 0;
-  let fixedWidth = true;
-  let nextDOM = colgroup.firstChild;
-  const row = node.firstChild;
-
-  if (row !== null) {
-    for (let i = 0, col = 0; i < row.childCount; i += 1) {
-      const { colspan, colwidth } = row.child(i).attrs;
-
-      for (let j = 0; j < colspan; j += 1, col += 1) {
-        const hasWidth =
-          overrideCol === col
-            ? overrideValue
-            : ((colwidth && colwidth[j]) as number | undefined);
-        const cssWidth = hasWidth ? `${hasWidth}px` : '';
-
-        totalWidth += hasWidth || cellMinWidth;
-
-        if (!hasWidth) {
-          fixedWidth = false;
-        }
-
-        if (!nextDOM) {
-          const colElement = document.createElement('col');
-
-          const [propertyKey, propertyValue] = getColStyleDeclaration(
-            cellMinWidth,
-            hasWidth,
-          );
-
-          colElement.style.setProperty(propertyKey, propertyValue);
-
-          colgroup.appendChild(colElement);
-        } else {
-          if ((nextDOM as HTMLTableColElement).style.width !== cssWidth) {
-            const [propertyKey, propertyValue] = getColStyleDeclaration(
-              cellMinWidth,
-              hasWidth,
-            );
-
-            (nextDOM as HTMLTableColElement).style.setProperty(
-              propertyKey,
-              propertyValue,
-            );
-          }
-
-          nextDOM = nextDOM.nextSibling;
-        }
-      }
-    }
-  }
-
-  while (nextDOM) {
-    const after = nextDOM.nextSibling;
-
-    nextDOM.parentNode?.removeChild(nextDOM);
-    nextDOM = after;
-  }
-
-  const hasUserWidth =
-    node.attrs.style &&
-    typeof node.attrs.style === 'string' &&
-    /\bwidth\s*:/i.test(node.attrs.style);
-
-  if (fixedWidth && !hasUserWidth) {
-    table.style.width = `${totalWidth}px`;
-    table.style.minWidth = '';
-  } else {
-    table.style.width = '';
-    table.style.minWidth = `${totalWidth}px`;
-  }
-}
-
-export class TableView implements NodeView {
-  node: ProseMirrorNode;
-
-  cellMinWidth: number;
-
-  dom: HTMLDivElement;
-
-  table: HTMLTableElement;
-
-  colgroup: HTMLTableColElement;
-
-  contentDOM: HTMLTableSectionElement;
-
-  constructor(node: ProseMirrorNode, cellMinWidth: number) {
-    this.node = node;
-    this.cellMinWidth = cellMinWidth;
-    this.dom = document.createElement('div');
-    this.dom.className = 'tableWrapper';
-    this.table = this.dom.appendChild(document.createElement('table'));
-
-    if (node.attrs.style) {
-      this.table.style.cssText = node.attrs.style;
-    }
-
-    this.colgroup = this.table.appendChild(document.createElement('colgroup'));
-    updateColumns(node, this.colgroup, this.table, cellMinWidth);
-    this.contentDOM = this.table.appendChild(document.createElement('tbody'));
-  }
-
-  update(node: ProseMirrorNode) {
-    if (node.type !== this.node.type) return false;
-
-    this.node = node;
-    updateColumns(node, this.colgroup, this.table, this.cellMinWidth);
-
-    return true;
-  }
-
-  ignoreMutation(mutation: ViewMutationRecord) {
-    const target = mutation.target as Node;
-    const isInsideWrapper = this.dom.contains(target);
-    const isInsideContent = this.contentDOM.contains(target);
-
-    if (isInsideWrapper && !isInsideContent) {
-      if (
-        mutation.type === 'attributes' ||
-        mutation.type === 'childList' ||
-        mutation.type === 'characterData'
-      ) {
-        return true;
-      }
-    }
-
-    // Chevron span (.tableReadonlySortChevron) added/removed by sort plugin.
-    if (mutation.type === 'childList') {
-      const nodes = [
-        ...Array.from(mutation.addedNodes),
-        ...Array.from(mutation.removedNodes),
-      ];
-      if (
-        nodes.some(
-          (n) =>
-            n instanceof Element &&
-            n.classList.contains('tableReadonlySortChevron'),
-        )
-      ) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-}

packages/editor-ext/src/lib/table/table.ts

@@ -1,8 +1,6 @@
 import { Table } from "@tiptap/extension-table";
 import { Editor } from "@tiptap/core";
 import { DOMOutputSpec } from "@tiptap/pm/model";
-import { TextSelection } from "@tiptap/pm/state";
-import { cellAround } from "@tiptap/pm/tables";
 
 const LIST_TYPES = ["bulletList", "orderedList", "taskList"];
 
@@ -34,36 +32,9 @@ function handleListOutdent(editor: Editor): boolean {
 }
 
 export const CustomTable = Table.extend({
-
   addKeyboardShortcuts() {
     return {
       ...this.parent?.(),
-      "Mod-a": () => {
-        const { state, view } = this.editor;
-        const { selection, doc } = state;
-
-        const $cellPos = cellAround(selection.$anchor);
-        if (!$cellPos) return false;
-
-        const cellNode = doc.nodeAt($cellPos.pos);
-        // Empty cells have nothing useful to scope to — let the default
-        // Mod-a fall through and select the whole doc.
-        if (!cellNode || !cellNode.textContent) return false;
-
-        const from = $cellPos.pos + 1;
-        const to = $cellPos.pos + cellNode.nodeSize - 1;
-        if (from >= to) return true;
-
-        const nextSel = TextSelection.between(
-          doc.resolve(from),
-          doc.resolve(to),
-          1,
-        );
-        if (!nextSel || selection.eq(nextSel)) return true;
-
-        view.dispatch(state.tr.setSelection(nextSel));
-        return true;
-      },
       Tab: () => {
         // If we're in a list within a table, handle list indentation
         if (isInList(this.editor) && this.editor.isActive("table")) {

packages/editor-ext/src/lib/table/utils/col-style.ts

@@ -1,7 +0,0 @@
-export function getColStyleDeclaration(minWidth: number, width: number | undefined): [string, string] {
-  if (width) {
-    return ['width', `${Math.max(width, minWidth)}px`]
-  }
-
-  return ['min-width', `${minWidth}px`]
-}

patches/react-arborist@3.4.0.patch

@@ -0,0 +1,33 @@
+diff --git a/dist/module/components/default-container.js b/dist/module/components/default-container.js
+index 47724f59b482454fe3144dbb98bd16d3df6a9c17..2285e35ea0073a773b7b74e22758056fd3514c1a 100644
+--- a/dist/module/components/default-container.js
++++ b/dist/module/components/default-container.js
+@@ -34,28 +34,6 @@ export function DefaultContainer() {
+                 return;
+             }
+             if (e.key === "Backspace") {
+-                if (!tree.props.onDelete)
+-                    return;
+-                const ids = Array.from(tree.selectedIds);
+-                if (ids.length > 1) {
+-                    let nextFocus = tree.mostRecentNode;
+-                    while (nextFocus && nextFocus.isSelected) {
+-                        nextFocus = nextFocus.nextSibling;
+-                    }
+-                    if (!nextFocus)
+-                        nextFocus = tree.lastNode;
+-                    tree.focus(nextFocus, { scroll: false });
+-                    tree.delete(Array.from(ids));
+-                }
+-                else {
+-                    const node = tree.focusedNode;
+-                    if (node) {
+-                        const sib = node.nextSibling;
+-                        const parent = node.parent;
+-                        tree.focus(sib || parent, { scroll: false });
+-                        tree.delete(node);
+-                    }
+-                }
+                 return;
+             }
+             if (e.key === "Tab" && !e.shiftKey) {