fix(tree): move treeitem role to focusable row + aria-current

apps/client/package.json

@@ -12,84 +12,84 @@
     "test:watch": "vitest"
   },
   "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",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
+    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
+    "@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",
     "@docmost/editor-ext": "workspace:*",
     "@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",
+    "@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",
     "@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",
+    "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-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",
+    "@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",
     "@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",
+    "@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.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",
-    "vitest": "4.1.6"
+    "vitest": "^4.1.6"
   }
 }

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",
@@ -361,8 +348,6 @@
   "Create block quote.": "Create block quote.",
   "Insert code snippet.": "Insert code snippet.",
   "Insert horizontal rule divider": "Insert horizontal rule divider",
-  "Page break": "Page break",
-  "Insert a page break for printing.": "Insert a page break for printing.",
   "Upload any image from your device.": "Upload any image from your device.",
   "Upload any video from your device.": "Upload any video from your device.",
   "Upload any audio from your device.": "Upload any audio from your device.",
@@ -1012,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/ee/components/sso-login.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useWorkspacePublicDataQuery } from "@/features/workspace/queries/workspace-query.ts";
 import { Button, Divider, Stack } from "@mantine/core";
 import { IconLock, IconServer } from "@tabler/icons-react";
@@ -7,37 +7,15 @@ import { buildSsoLoginUrl } from "@/ee/security/sso.utils.ts";
 import { SSO_PROVIDER } from "@/ee/security/contants.ts";
 import { GoogleIcon } from "@/components/icons/google-icon.tsx";
 import { LdapLoginModal } from "@/ee/components/ldap-login-modal.tsx";
-import { getRedirectParam } from "@/lib/app-route.ts";
-import useCurrentUser from "@/features/user/hooks/use-current-user.ts";
-
-const SSO_AUTO_ATTEMPT_KEY = "docmost:ssoAutoAttempt";
-const SSO_AUTO_ATTEMPT_TTL_MS = 5 * 60_000;
-
-function recentAutoAttempt(): boolean {
-  try {
-    const raw = window.sessionStorage.getItem(SSO_AUTO_ATTEMPT_KEY);
-    if (!raw) return false;
-    const ts = Number(raw);
-    return Number.isFinite(ts) && Date.now() - ts < SSO_AUTO_ATTEMPT_TTL_MS;
-  } catch {
-    return false;
-  }
-}
-
-function markAutoAttempt(): void {
-  try {
-    window.sessionStorage.setItem(SSO_AUTO_ATTEMPT_KEY, String(Date.now()));
-  } catch {
-    /* sessionStorage unavailable (private mode, etc.) — best effort */
-  }
-}
 
 export default function SsoLogin() {
   const { data, isLoading } = useWorkspacePublicDataQuery();
-  const { data: currentUser } = useCurrentUser();
   const [ldapModalOpened, setLdapModalOpened] = useState(false);
   const [selectedLdapProvider, setSelectedLdapProvider] = useState<IAuthProvider | null>(null);
-  const autoRedirectedRef = useRef(false);
+
+  if (!data?.authProviders || data?.authProviders?.length === 0) {
+    return null;
+  }
 
   const handleSsoLogin = (provider: IAuthProvider) => {
     if (provider.type === SSO_PROVIDER.LDAP) {
@@ -50,47 +28,10 @@ export default function SsoLogin() {
         providerId: provider.id,
         type: provider.type,
         workspaceId: data.id,
-        redirect: getRedirectParam() ?? undefined,
       });
     }
   };
 
-  // Auto-redirect when SSO is enforced and there is exactly one non-LDAP
-  // provider. The user has no other option, so skip the extra click.
-  useEffect(() => {
-    if (autoRedirectedRef.current) return;
-    if (!data?.enforceSso) return;
-    if (!data.authProviders || data.authProviders.length !== 1) return;
-    const onlyProvider = data.authProviders[0];
-    if (onlyProvider.type === SSO_PROVIDER.LDAP) return;
-
-    // Already signed in: let useRedirectIfAuthenticated handle navigation
-    // instead of racing it through the IdP.
-    if (currentUser?.user) return;
-
-    // Explicit logout: don't immediately bounce them back to the IdP.
-    const params = new URLSearchParams(window.location.search);
-    if (params.has("logout")) return;
-
-    // Circuit-breaker: if we already auto-redirected within the TTL, the
-    // user came back (likely from an IdP failure). Show the page so they
-    // can read errors or pick a different account.
-    if (recentAutoAttempt()) return;
-
-    autoRedirectedRef.current = true;
-    markAutoAttempt();
-    window.location.href = buildSsoLoginUrl({
-      providerId: onlyProvider.id,
-      type: onlyProvider.type,
-      workspaceId: data.id,
-      redirect: getRedirectParam() ?? undefined,
-    });
-  }, [data, currentUser]);
-
-  if (!data?.authProviders || data?.authProviders?.length === 0) {
-    return null;
-  }
-
   const getProviderIcon = (provider: IAuthProvider) => {
     if (provider.type === SSO_PROVIDER.GOOGLE) {
       return <GoogleIcon size={16} />;

apps/client/src/ee/security/sso.utils.ts

@@ -18,21 +18,14 @@ export function buildSsoLoginUrl(opts: {
   providerId: string;
   type: SSO_PROVIDER;
   workspaceId?: string;
-  redirect?: string;
 }): string {
-  const { providerId, type, workspaceId, redirect } = opts;
+  const { providerId, type, workspaceId } = opts;
   const domain = getAppUrl();
 
-  const params = new URLSearchParams();
-  if (redirect) params.set("redirect", redirect);
-
   if (type === SSO_PROVIDER.GOOGLE) {
-    if (workspaceId) params.set("workspaceId", workspaceId);
-    return `${getServerAppUrl()}/api/sso/${type}/login?${params.toString()}`;
+    return `${getServerAppUrl()}/api/sso/${type}/login?workspaceId=${workspaceId}`;
   }
-  const query = params.toString();
-  const base = `${domain}/api/sso/${type}/${providerId}/login`;
-  return query ? `${base}?${query}` : base;
+  return `${domain}/api/sso/${type}/${providerId}/login`;
 }
 
 export function getGoogleSignupUrl(): string {

apps/client/src/features/auth/hooks/use-auth.ts

@@ -166,7 +166,7 @@ export default function useAuth() {
   const handleLogout = async () => {
     setCurrentUser(RESET);
     await logout();
-    window.location.replace(`${APP_ROUTE.AUTH.LOGIN}?logout=1`);
+    window.location.replace(APP_ROUTE.AUTH.LOGIN);
   };
 
   const handleForgotPassword = async (data: IForgotPassword) => {

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/fixed-toolbar/groups/block-type-group.tsx

@@ -10,7 +10,6 @@ import {
   IconH2,
   IconH3,
   IconMenu4,
-  IconPageBreak,
   IconTypography,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
@@ -103,12 +102,6 @@ export const BlockTypeGroup: FC<Props> = ({ editor }) => {
         >
           {t("Divider")}
         </Menu.Item>
-        <Menu.Item
-          leftSection={<IconPageBreak size={16} />}
-          onClick={() => editor.chain().focus().setPageBreak().run()}
-        >
-          {t("Page break")}
-        </Menu.Item>
       </Menu.Dropdown>
     </Menu>
   );

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -19,7 +19,6 @@ import {
   IconTable,
   IconTypography,
   IconMenu4,
-  IconPageBreak,
   IconCalendar,
   IconAppWindow,
   IconSitemap,
@@ -165,14 +164,6 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       command: ({ editor, range }: CommandProps) =>
         editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
     },
-    {
-      title: "Page break",
-      description: "Insert a page break for printing.",
-      searchTerms: ["page", "break", "pagebreak", "print"],
-      icon: IconPageBreak,
-      command: ({ editor, range }: CommandProps) =>
-        editor.chain().focus().deleteRange(range).setPageBreak().run(),
-    },
     {
       title: "Image",
       description: "Upload any image from your device.",

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/components/transclusion/transclusion-reference-view.tsx

@@ -35,7 +35,6 @@ export default function TransclusionReferenceView(props: NodeViewProps) {
   return (
     <NodeViewWrapper
       className={classes.includeWrap}
-      data-editable={isEditable ? "true" : "false"}
       data-focused={isEditable && props.selected ? "true" : "false"}
       data-menu-open={openMenus > 0 ? "true" : "false"}
       contentEditable={false}

apps/client/src/features/editor/components/transclusion/transclusion-view.tsx

@@ -62,7 +62,6 @@ export default function TransclusionView(props: NodeViewProps) {
   return (
     <NodeViewWrapper
       className={classes.transclusionWrap}
-      data-editable={isEditable ? "true" : "false"}
       data-menu-open={openMenus > 0 ? "true" : "false"}
       data-id={transclusionId ?? undefined}
     >

apps/client/src/features/editor/components/transclusion/transclusion.module.css

@@ -44,29 +44,8 @@
   transition: border 0.3s;
 }
 
-.transclusionWrap[data-editable="false"],
-.includeWrap[data-editable="false"] {
-  margin-left: 0;
-  margin-right: 0;
-  width: 100%;
-  padding: 0;
-}
-
-/* Cancel the wrapping .react-renderer's vertical spacing in read-only mode
-   so the synced block sits flush with surrounding paragraphs (whose own
-   margins already provide the right rhythm). */
-:global(.react-renderer.node-transclusionSource):has(
-    .transclusionWrap[data-editable="false"]
-  ),
-:global(.react-renderer.node-transclusionReference):has(
-    .includeWrap[data-editable="false"]
-  ) {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.transclusionWrap[data-editable="true"]:hover,
-.transclusionWrap[data-editable="true"]:focus-within {
+.transclusionWrap:hover,
+.transclusionWrap:focus-within {
   border: 2px solid
     light-dark(
       var(--mantine-color-orange-2),
@@ -135,9 +114,9 @@
   transition: border 0.3s;
 }
 
-.includeWrap[data-editable="true"]:hover,
-.includeWrap[data-editable="true"][data-focused="true"],
-.includeWrap[data-editable="true"][data-menu-open="true"] {
+.includeWrap:hover,
+.includeWrap[data-focused="true"],
+.includeWrap[data-menu-open="true"] {
   border: 2px solid
     light-dark(
       var(--mantine-color-orange-2),

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

@@ -42,13 +42,9 @@ import {
   Excalidraw,
   Embed,
   TiptapPdf,
-  PageBreak,
   SearchAndReplace,
   Mention,
   TableDndExtension,
-  TableHandleCommandsExtension,
-  TableHeaderPin,
-  TableReadonlySort,
   Subpages,
   Heading,
   Highlight,
@@ -60,7 +56,6 @@ import {
   Status,
   TransclusionSource,
   TransclusionReference,
-  TableView,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -264,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,
   }),
@@ -367,7 +357,6 @@ export const mainExtensions = [
   TiptapPdf.configure({
     view: PdfView,
   }),
-  PageBreak,
   Subpages.configure({
     view: SubpagesView,
   }),

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/index.css

@@ -9,7 +9,6 @@
 @import "./media.css";
 @import "./code.css";
 @import "./print.css";
-@import "./page-break.css";
 @import "./find.css";
 @import "./mention.css";
 @import "./ordered-list.css";

apps/client/src/features/editor/styles/page-break.css

@@ -1,50 +0,0 @@
-.ProseMirror .page-break {
-  position: relative;
-  margin: 1.5rem 0;
-  border-top: 1px dashed var(--mantine-color-default-border);
-  height: 0;
-  user-select: none;
-}
-
-.ProseMirror[contenteditable="false"] .page-break {
-  margin: 0;
-  border: none;
-  height: 0;
-}
-
-.ProseMirror[contenteditable="false"] .page-break::after {
-  content: none;
-}
-
-.ProseMirror .page-break::after {
-  content: "Page break";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  padding: 0 0.5rem;
-  background: var(--mantine-color-body);
-  color: var(--mantine-color-dimmed);
-  font-size: 0.75rem;
-  line-height: 1;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-}
-
-.ProseMirror .page-break.ProseMirror-selectednode {
-  border-top-color: var(--mantine-primary-color-filled);
-}
-
-@media print {
-  .ProseMirror .page-break {
-    break-before: always;
-    page-break-before: always;
-    visibility: hidden;
-    border: none;
-    margin: 0;
-  }
-
-  .ProseMirror .page-break::after {
-    content: none;
-  }
-}

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.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/share/atoms/shared-page-atom.ts

@@ -1,11 +1,6 @@
 import { atom } from "jotai";
-import { atomWithStorage } from "jotai/utils";
 import { ISharedPageTree } from "@/features/share/types/share.types";
 import { SharedPageTreeNode } from "@/features/share/utils";
 
 export const sharedPageTreeAtom = atom<ISharedPageTree | null>(null);
-export const sharedTreeDataAtom = atom<SharedPageTreeNode[] | null>(null);
-export const sharedPageFullWidthAtom = atomWithStorage<boolean>(
-  "sharedPageFullWidth",
-  false,
-);
+export const sharedTreeDataAtom = atom<SharedPageTreeNode[] | null>(null);

apps/client/src/features/share/components/share-shell.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo } from "react";
 import {
   ActionIcon,
   AppShell,
@@ -14,16 +14,11 @@ import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
 import { ThemeToggle } from "@/components/theme-toggle.tsx";
 import { useAtomValue, useSetAtom } from "jotai";
 import { useAtom } from "jotai";
-import {
-  sharedPageFullWidthAtom,
-  sharedPageTreeAtom,
-  sharedTreeDataAtom,
-} from "@/features/share/atoms/shared-page-atom";
+import { sharedPageTreeAtom, sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom";
 import { buildSharedPageTree } from "@/features/share/utils";
 import {
   desktopSidebarAtom,
   mobileSidebarAtom,
-  sidebarWidthAtom,
 } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
 import SidebarToggle from "@/components/ui/sidebar-toggle-button.tsx";
 import { useTranslation } from "react-i18next";
@@ -32,7 +27,7 @@ import {
   mobileTableOfContentAsideAtom,
   tableOfContentAsideAtom,
 } from "@/features/share/atoms/sidebar-atom.ts";
-import { IconArrowsHorizontal, IconList } from "@tabler/icons-react";
+import { IconList } from "@tabler/icons-react";
 import { useToggleToc } from "@/features/share/hooks/use-toggle-toc.ts";
 import classes from "./share.module.css";
 import {
@@ -60,46 +55,6 @@ export default function ShareShell({
   const [mobileTocOpened] = useAtom(mobileTableOfContentAsideAtom);
   const toggleTocMobile = useToggleToc(mobileTableOfContentAsideAtom);
   const toggleToc = useToggleToc(tableOfContentAsideAtom);
-  const [fullWidth, setFullWidth] = useAtom(sharedPageFullWidthAtom);
-  const [sidebarWidth, setSidebarWidth] = useAtom(sidebarWidthAtom);
-  const [isResizing, setIsResizing] = useState(false);
-  const sidebarRef = useRef<HTMLElement | null>(null);
-
-  const startResizing = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    setIsResizing(true);
-  }, []);
-
-  const stopResizing = useCallback(() => {
-    setIsResizing(false);
-  }, []);
-
-  const resize = useCallback(
-    (e: MouseEvent) => {
-      if (!isResizing || !sidebarRef.current) return;
-      const newWidth =
-        e.clientX - sidebarRef.current.getBoundingClientRect().left;
-      if (newWidth < 220) {
-        setSidebarWidth(220);
-        return;
-      }
-      if (newWidth > 600) {
-        setSidebarWidth(600);
-        return;
-      }
-      setSidebarWidth(newWidth);
-    },
-    [isResizing, setSidebarWidth],
-  );
-
-  useEffect(() => {
-    window.addEventListener("mousemove", resize);
-    window.addEventListener("mouseup", stopResizing);
-    return () => {
-      window.removeEventListener("mousemove", resize);
-      window.removeEventListener("mouseup", stopResizing);
-    };
-  }, [resize, stopResizing]);
 
   const { shareId } = useParams();
   const { data } = useGetSharedPageTreeQuery(shareId);
@@ -126,7 +81,7 @@ export default function ShareShell({
       header={{ height: 50 }}
       {...(data?.pageTree?.length > 1 && {
         navbar: {
-          width: sidebarWidth,
+          width: 300,
           breakpoint: "sm",
           collapsed: {
             mobile: !mobileOpened,
@@ -211,20 +166,6 @@ export default function ShareShell({
                   <IconList size={20} stroke={2} />
                 </ActionIcon>
               </Tooltip>
-
-              <Tooltip label={t("Full width")} withArrow>
-                <ActionIcon
-                  variant={fullWidth ? "light" : "default"}
-                  style={fullWidth ? undefined : { border: "none" }}
-                  aria-label={t("Full width")}
-                  aria-pressed={fullWidth}
-                  onClick={() => setFullWidth((v) => !v)}
-                  visibleFrom="sm"
-                  size="sm"
-                >
-                  <IconArrowsHorizontal size={20} stroke={2} />
-                </ActionIcon>
-              </Tooltip>
             </>
 
             <ThemeToggle />
@@ -233,11 +174,7 @@ export default function ShareShell({
       </AppShell.Header>
 
       {data?.pageTree?.length > 1 && (
-        <AppShell.Navbar p="md" className={classes.navbar} ref={sidebarRef}>
-          <div
-            className={classes.resizeHandle}
-            onMouseDown={startResizing}
-          />
+        <AppShell.Navbar p="md" className={classes.navbar}>
           <MemoizedSharedTree sharedPageTree={data} />
         </AppShell.Navbar>
       )}

apps/client/src/features/share/components/share.module.css

@@ -10,7 +10,6 @@
 .treeNode {
   text-decoration: none;
   user-select: none;
-  padding-bottom: 0;
 }
 
 .navbar,
@@ -19,26 +18,3 @@
     width: 350px;
   }
 }
-
-.resizeHandle {
-  width: 3px;
-  cursor: col-resize;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-
-  &:hover,
-  &:active {
-    width: 5px;
-    background: light-dark(
-      var(--mantine-color-gray-4),
-      var(--mantine-color-dark-5)
-    );
-  }
-
-  @media (max-width: $mantine-breakpoint-sm) {
-    display: none;
-  }
-}

apps/client/src/lib/app-route.ts

@@ -31,38 +31,20 @@ const APP_ROUTE = {
   },
 };
 
-export function safeRedirectPath(input: unknown): string | null {
-  if (typeof input !== "string") return null;
-  if (input.length === 0 || input.length > 2048) return null;
-  // Reject whitespace, backslash, and any Unicode "Other" category char
-  // (ASCII controls, zero-width space, BOM, bidi marks, etc).
-  if (/[\s\\]|\p{C}/u.test(input)) return null;
-  if (!input.startsWith("/") || input.startsWith("//")) return null;
-  if (input.toLowerCase().includes("://")) return null;
-  if (/^\/[a-z][a-z0-9+\-.]*:/i.test(input)) return null;
-  try {
-    const resolved = new URL(input, window.location.origin);
-    if (resolved.origin !== window.location.origin) return null;
-    return resolved.pathname + resolved.search + resolved.hash;
-  } catch {
-    return null;
-  }
-}
-
 export function getPostLoginRedirect(): string {
   const params = new URLSearchParams(window.location.search);
-  return safeRedirectPath(params.get("redirect")) ?? APP_ROUTE.HOME;
-}
-
-/**
- * Returns the `?redirect=` value from the current URL only when it is a safe
- * same-origin path. Unlike {@link getPostLoginRedirect} this returns `null`
- * (not `/home`) when no redirect is present, so callers can distinguish
- * "user came here directly" from "user was bounced from a deep link".
- */
-export function getRedirectParam(): string | null {
-  const params = new URLSearchParams(window.location.search);
-  return safeRedirectPath(params.get("redirect"));
+  const redirect = params.get("redirect");
+  if (redirect) {
+    try {
+      const resolved = new URL(redirect, window.location.origin);
+      if (resolved.origin === window.location.origin) {
+        return resolved.pathname + resolved.search + resolved.hash;
+      }
+    } catch {
+      // malformed URL, fall through to default
+    }
+  }
+  return APP_ROUTE.HOME;
 }
 
 export default APP_ROUTE;

apps/client/src/pages/share/shared-page.tsx

@@ -9,10 +9,7 @@ import { extractPageSlugId } from "@/lib";
 import { Error404 } from "@/components/ui/error-404.tsx";
 import ShareBranding from "@/features/share/components/share-branding.tsx";
 import { useAtomValue } from "jotai";
-import {
-  sharedPageFullWidthAtom,
-  sharedTreeDataAtom,
-} from "@/features/share/atoms/shared-page-atom.ts";
+import { sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom.ts";
 import { isPageInTree } from "@/features/share/utils.ts";
 
 export default function SharedPage() {
@@ -26,7 +23,6 @@ export default function SharedPage() {
   });
 
   const sharedTreeData = useAtomValue(sharedTreeDataAtom);
-  const fullWidth = useAtomValue(sharedPageFullWidthAtom);
 
   useEffect(() => {
     if (shareId && data) {
@@ -63,7 +59,7 @@ export default function SharedPage() {
         )}
       </Helmet>
 
-      <Container fluid={fullWidth} size={fullWidth ? undefined : 900} p={0}>
+      <Container size={900} p={0}>
         <ReadonlyPageEditor
           key={data.page.id}
           title={data.page.title}

apps/server/package.json

@@ -42,7 +42,7 @@
     "@fastify/multipart": "^10.0.0",
     "@fastify/static": "^9.1.3",
     "@keyv/redis": "^5.1.6",
-    "@langchain/core": "1.1.46",
+    "@langchain/core": "1.1.39",
     "@langchain/textsplitters": "1.0.1",
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@nest-lab/throttler-storage-redis": "^1.2.0",
@@ -81,7 +81,7 @@
     "ioredis": "^5.10.1",
     "js-tiktoken": "^1.0.21",
     "jsonwebtoken": "^9.0.3",
-    "kysely": "^0.28.17",
+    "kysely": "^0.28.14",
     "kysely-migration-cli": "^0.4.2",
     "kysely-postgres-js": "^3.0.0",
     "ldapts": "^8.1.7",

apps/server/src/collaboration/collaboration.util.ts

@@ -26,7 +26,6 @@ import {
   TiptapVideo,
   TiptapAudio,
   TiptapPdf,
-  PageBreak,
   TrailingNode,
   Attachment,
   Drawio,
@@ -95,7 +94,6 @@ export const tiptapExtensions = [
   TiptapVideo,
   TiptapAudio,
   TiptapPdf,
-  PageBreak,
   Callout,
   Attachment,
   CustomCodeBlock,

package.json

@@ -104,8 +104,8 @@
       "ws": "8.20.0",
       "dompurify": "3.4.1",
       "tmp": "0.2.5",
-      "hono": "4.12.18",
-      "mermaid": "11.15.0",
+      "hono": "4.12.14",
+      "mermaid": "11.13.0",
       "nanoid@^3": "3.3.8",
       "socket.io-parser": "4.2.6",
       "serialize-javascript": "7.0.3",
@@ -131,10 +131,9 @@
       "@xmldom/xmldom": "0.8.13",
       "handlebars": "4.7.9",
       "axios": "1.16.0",
-      "langsmith": "0.7.0",
+      "langsmith": "0.5.19",
       "follow-redirects": "1.16.0",
-      "protobufjs":  "7.5.6",
-      "ip-address":  "10.1.1"
+      "protobufjs":  "7.5.5"
     },
     "neverBuiltDependencies": []
   }

packages/editor-ext/src/index.ts

@@ -31,6 +31,5 @@ export * from "./lib/recreate-transform";
 export * from "./lib/columns";
 export * from "./lib/status";
 export * from "./lib/pdf";
-export * from "./lib/page-break";
 export * from "./lib/resizable-nodeview";
 

packages/editor-ext/src/lib/page-break/index.ts

@@ -1 +0,0 @@
-export * from "./page-break";

packages/editor-ext/src/lib/page-break/page-break.ts

@@ -1,60 +0,0 @@
-import { mergeAttributes, Node } from "@tiptap/core";
-
-export interface PageBreakOptions {
-  HTMLAttributes: Record<string, any>;
-}
-
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    pageBreak: {
-      setPageBreak: () => ReturnType;
-    };
-  }
-}
-
-export const PageBreak = Node.create<PageBreakOptions>({
-  name: "pageBreak",
-
-  group: "block",
-
-  atom: true,
-
-  selectable: true,
-
-  addOptions() {
-    return {
-      HTMLAttributes: {},
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: `div[data-type="${this.name}"]`,
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "div",
-      mergeAttributes(
-        { "data-type": this.name, class: "page-break" },
-        this.options.HTMLAttributes,
-        HTMLAttributes,
-      ),
-    ];
-  },
-
-  addCommands() {
-    return {
-      setPageBreak:
-        () =>
-        ({ chain }) =>
-          chain()
-            .insertContent({ type: this.name })
-            .focus()
-            .run(),
-    };
-  },
-});

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/drop-indicator-controller.ts

@@ -99,4 +99,4 @@ export class DropIndicatorController {
         });
     }
 
-}
+}

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

@@ -2,14 +2,4 @@ export * from "./row";
 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";
+export * from "./dnd";

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`]
-}