fix callout

fix codeblock/mermaid gap cursor
fix: editor ready check
2026-05-16 22:41:30 +08:00 · 2026-05-15 01:45:33 +01:00 · 2026-05-14 23:23:20 +01:00 · 2026-05-14 18:40:03 +01:00 · 2026-05-14 18:05:39 +01:00 · 2026-05-14 18:04:25 +01:00
104 changed files with 4915 additions and 2147 deletions
@@ -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.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",
+    "@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",
    "@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.13.0",
-    "mitt": "^3.0.1",
+    "lowlight": "3.3.0",
+    "mantine-form-zod-resolver": "1.3.0",
+    "mermaid": "11.15.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.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",
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1",
+    "@vitejs/plugin-react": "6.0.1",
+    "eslint": "9.28.0",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-refresh": "0.5.2",
+    "globals": "15.13.0",
+    "jsdom": "25.0.0",
+    "optics-ts": "2.4.1",
+    "postcss": "8.5.14",
+    "postcss-preset-mantine": "1.18.0",
+    "postcss-simple-vars": "7.0.1",
+    "prettier": "3.8.1",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.57.1",
    "vite": "8.0.5",
-    "vitest": "^4.1.6"
+    "vitest": "4.1.6"
  }
 }
@@ -71,6 +71,7 @@
  "Export": "Export",
  "Failed to create page": "Failed to create page",
  "Failed to delete page": "Failed to delete page",
+  "Failed to restore page": "Failed to restore page",
  "Failed to fetch recent pages": "Failed to fetch recent pages",
  "Failed to import pages": "Failed to import pages",
  "Failed to load page. An error occurred.": "Failed to load page. An error occurred.",
@@ -286,6 +287,19 @@
  "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",
@@ -348,6 +362,8 @@
  "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.",
@@ -566,6 +582,8 @@
  "Move to trash": "Move to trash",
  "Move this page to trash?": "Move this page to trash?",
  "Restore page": "Restore page",
+  "Permanently delete": "Permanently delete",
+  "<b>{{name}}</b> moved this page to Trash {{time}}.": "<b>{{name}}</b> moved this page to Trash {{time}}.",
  "Page moved to trash": "Page moved to trash",
  "Page restored successfully": "Page restored successfully",
  "Deleted by": "Deleted by",
@@ -997,5 +1015,8 @@
  "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}}"
+  "Updated {{date}}": "Updated {{date}}",
+  "Cell actions": "Cell actions",
+  "Column actions": "Column actions",
+  "Row actions": "Row actions"
 }
@@ -1,4 +1,5 @@
-import { Box, ScrollArea, Text } from "@mantine/core";
+import { ActionIcon, Box, Group, ScrollArea, Text, Tooltip } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
 import CommentListWithTabs from "@/features/comment/components/comment-list-with-tabs.tsx";
 import { useAtom } from "jotai";
 import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
@@ -11,9 +12,10 @@ import AsideChatPanel from "@/ee/ai-chat/components/aside-chat-panel";
 import { PageDetailsAside } from "@/features/page-details/components/page-details-aside.tsx";

 export default function Aside() {
-  const [{ tab }] = useAtom(asideStateAtom);
+  const [{ tab }, setAsideState] = useAtom(asideStateAtom);
  const { t } = useTranslation();
  const pageEditor = useAtomValue(pageEditorAtom);
+  const closeAside = () => setAsideState((s) => ({ ...s, isAsideOpen: false }));

  let title: string;
  let component: ReactNode;
@@ -45,9 +47,19 @@ export default function Aside() {
      {component && (
        <>
          {tab !== "chat" && (
-            <Text mb="md" fw={500}>
-              {t(title)}
-            </Text>
+            <Group justify="space-between" wrap="nowrap" mb="md">
+              <Text fw={500}>{t(title)}</Text>
+              <Tooltip label={t("Close")} withArrow>
+                <ActionIcon
+                  variant="subtle"
+                  color="gray"
+                  onClick={closeAside}
+                  aria-label={t("Close")}
+                >
+                  <IconX size={18} />
+                </ActionIcon>
+              </Tooltip>
+            </Group>
          )}

          {tab === "comments" || tab === "chat" ? (
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useRef, 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,15 +7,37 @@ 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);
-
-  if (!data?.authProviders || data?.authProviders?.length === 0) {
-    return null;
-  }
+  const autoRedirectedRef = useRef(false);

  const handleSsoLogin = (provider: IAuthProvider) => {
    if (provider.type === SSO_PROVIDER.LDAP) {
@@ -28,10 +50,47 @@ 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} />;
@@ -18,14 +18,21 @@ export function buildSsoLoginUrl(opts: {
  providerId: string;
  type: SSO_PROVIDER;
  workspaceId?: string;
+  redirect?: string;
 }): string {
-  const { providerId, type, workspaceId } = opts;
+  const { providerId, type, workspaceId, redirect } = opts;
  const domain = getAppUrl();

+  const params = new URLSearchParams();
+  if (redirect) params.set("redirect", redirect);
+
  if (type === SSO_PROVIDER.GOOGLE) {
-    return `${getServerAppUrl()}/api/sso/${type}/login?workspaceId=${workspaceId}`;
+    if (workspaceId) params.set("workspaceId", workspaceId);
+    return `${getServerAppUrl()}/api/sso/${type}/login?${params.toString()}`;
  }
-  return `${domain}/api/sso/${type}/${providerId}/login`;
+  const query = params.toString();
+  const base = `${domain}/api/sso/${type}/${providerId}/login`;
+  return query ? `${base}?${query}` : base;
 }

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

  const handleForgotPassword = async (data: IForgotPassword) => {
@@ -1,5 +1,6 @@
 import { atom } from "jotai";
 import { Editor } from "@tiptap/core";
+import { PageEditMode } from "@/features/user/types/user.types.ts";

 export const pageEditorAtom = atom<Editor | null>(null);

@@ -12,3 +13,7 @@ export const yjsConnectionStatusAtom = atom<string>("");
 export const showAiMenuAtom = atom(false);

 export const showLinkMenuAtom = atom(false);
+
+// Current page's edit mode — initialized from the user's saved preference on
+// first load, can be toggled locally without persisting to the server.
+export const currentPageEditModeAtom = atom<PageEditMode>(PageEditMode.Edit);
@@ -2,6 +2,7 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { useCallback } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
+import { isEditorReady } from "@docmost/editor-ext";
 import {
  EditorMenuProps,
  ShouldShowProps,
@@ -46,7 +47,7 @@ export function AudioMenu({ editor }: EditorMenuProps) {
  );

  const getReferencedVirtualElement = useCallback(() => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "audio";
    const parent = findParentNode(predicate)(selection);
@@ -16,7 +16,7 @@ import {
  IconMoodSmile,
  IconNotes,
 } from "@tabler/icons-react";
-import { CalloutType, isTextSelected } from "@docmost/editor-ext";
+import { CalloutType, isEditorReady, isTextSelected } from "@docmost/editor-ext";
 import { useTranslation } from "react-i18next";
 import EmojiPicker from "@/components/ui/emoji-picker.tsx";
 import classes from "../common/toolbar-menu.module.css";
@@ -55,7 +55,7 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
  });

  const getReferencedVirtualElement = useCallback(() => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "callout";
    const parent = findParentNode(predicate)(selection);
@@ -19,7 +19,7 @@ import {
  IconCopy,
  IconTrash,
 } from "@tabler/icons-react";
-import { isTextSelected } from "@docmost/editor-ext";
+import { isEditorReady, isTextSelected } from "@docmost/editor-ext";
 import type { WidthMode, ColumnsLayout } from "@docmost/editor-ext";
 import { useTranslation } from "react-i18next";
 import classes from "../common/toolbar-menu.module.css";
@@ -82,7 +82,7 @@ export function ColumnsMenu({ editor }: EditorMenuProps) {

  const shouldShow = useCallback(
    ({ state }: ShouldShowProps) => {
-      if (!state) return false;
+      if (!state || !isEditorReady(editor)) return false;
      if (!editor.isActive("columns")) return false;
      if (isTextSelected(editor)) return false;
      if (nodesWithMenus.some((name) => editor.isActive(name))) return false;
@@ -121,7 +121,7 @@ export function ColumnsMenu({ editor }: EditorMenuProps) {
  });

  const getReferencedVirtualElement = useCallback(() => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "columns";
    const parent = findParentNode(predicate)(selection);
@@ -2,6 +2,7 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
+import { isEditorReady } from "@docmost/editor-ext";
 import {
  EditorMenuProps,
  ShouldShowProps,
@@ -81,7 +82,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
  );

  const getReferencedVirtualElement = useCallback(() => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "drawio";
    const parent = findParentNode(predicate)(selection);
@@ -0,0 +1,14 @@
+import { lazy, Suspense } from "react";
+import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
+
+const ExcalidrawMenu = lazy(
+  () => import("@/features/editor/components/excalidraw/excalidraw-menu.tsx"),
+);
+
+export default function ExcalidrawMenuLazy(props: EditorMenuProps) {
+  return (
+    <Suspense fallback={null}>
+      <ExcalidrawMenu {...props} />
+    </Suspense>
+  );
+}
@@ -2,6 +2,7 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
+import { isEditorReady } from "@docmost/editor-ext";
 import {
  EditorMenuProps,
  ShouldShowProps,
@@ -94,7 +95,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
  );

  const getReferencedVirtualElement = useCallback(() => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "excalidraw";
    const parent = findParentNode(predicate)(selection);
@@ -0,0 +1,14 @@
+import { lazy, Suspense } from "react";
+import { NodeViewProps } from "@tiptap/react";
+
+const ExcalidrawView = lazy(
+  () => import("@/features/editor/components/excalidraw/excalidraw-view.tsx"),
+);
+
+export default function ExcalidrawViewLazy(props: NodeViewProps) {
+  return (
+    <Suspense fallback={null}>
+      <ExcalidrawView {...props} />
+    </Suspense>
+  );
+}
@@ -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: 50;
+  z-index: 99;
  display: flex;
  align-items: center;
  background: var(--mantine-color-body);
@@ -28,6 +28,7 @@ export const FixedToolbar: FC = () => {
    <>
      <div
        className={classes.fixedToolbar}
+        data-fixed-toolbar="true"
        role="toolbar"
        aria-label="Editor toolbar"
        onMouseDown={(e) => e.preventDefault()}
@@ -10,6 +10,7 @@ import {
  IconH2,
  IconH3,
  IconMenu4,
+  IconPageBreak,
  IconTypography,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
@@ -102,6 +103,12 @@ 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>
  );
@@ -2,6 +2,7 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import React, { useCallback, useRef } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
+import { isEditorReady } from "@docmost/editor-ext";
 import {
  EditorMenuProps,
  ShouldShowProps,
@@ -56,7 +57,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
  );

  const getReferencedVirtualElement = useCallback(() => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "image";
    const parent = findParentNode(predicate)(selection);
@@ -2,6 +2,7 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { useCallback } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
+import { isEditorReady } from "@docmost/editor-ext";
 import {
  EditorMenuProps,
  ShouldShowProps,
@@ -37,9 +38,8 @@ export function PdfMenu({ editor }: EditorMenuProps) {

  const shouldShow = useCallback(
    ({ state }: ShouldShowProps) => {
-      if (!state || !editor.isActive("pdf")) {
-        return false;
-      }
+      if (!state || !isEditorReady(editor)) return false;
+      if (!editor.isActive("pdf")) return false;

      const { selection } = state;
      const dom = editor.view.nodeDOM(selection.from) as HTMLElement | null;
@@ -51,7 +51,7 @@ export function PdfMenu({ editor }: EditorMenuProps) {
  );

  const getReferencedVirtualElement = useCallback(() => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "pdf";
    const parent = findParentNode(predicate)(selection);
@@ -19,6 +19,7 @@ import {
  IconTable,
  IconTypography,
  IconMenu4,
+  IconPageBreak,
  IconCalendar,
  IconAppWindow,
  IconSitemap,
@@ -164,6 +165,14 @@ 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.",
@@ -6,6 +6,7 @@ import { ActionIcon, Tooltip } from "@mantine/core";
 import { IconTrash } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { Editor } from "@tiptap/core";
+import { isEditorReady } from "@docmost/editor-ext";

 interface SubpagesMenuProps {
  editor: Editor;
@@ -33,6 +34,7 @@ export const SubpagesMenu = React.memo(
    );

    const getReferenceClientRect = useCallback(() => {
+      if (!isEditorReady(editor)) return new DOMRect();
      const { selection } = editor.state;
      const predicate = (node: PMNode) => node.type.name === "subpages";
      const parent = findParentNode(predicate)(selection);
@@ -0,0 +1,126 @@
+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>
+  );
+});
@@ -0,0 +1,132 @@
+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.
+  // `nodeDOM` is typed as `Node | null` — when `anchorPos` goes stale (e.g.
+  // an external drop reflows the doc before the plugin re-emits
+  // hoveringCell), it can resolve to a Text node, on which `.closest` is
+  // undefined. Filter to HTMLElement so downstream consumers stay safe.
+  const lookupDom = editor.view.nodeDOM(anchorPos);
+  const lookupCellDom = lookupDom instanceof HTMLElement ? lookupDom : 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>
+  );
+}
@@ -0,0 +1,108 @@
+.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;
+  }
+}
@@ -0,0 +1,40 @@
+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 };
+}
@@ -0,0 +1,54 @@
+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]);
+}
@@ -0,0 +1,79 @@
+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]);
+}
@@ -0,0 +1,23 @@
+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;
+}
@@ -0,0 +1,50 @@
+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 };
+}
@@ -0,0 +1,100 @@
+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 };
+}
@@ -0,0 +1,34 @@
+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);
+}
@@ -0,0 +1,57 @@
+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()!));
+}
@@ -0,0 +1,49 @@
+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>
+  );
+});
@@ -0,0 +1,154 @@
+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>
+    </>
+  );
+});
@@ -0,0 +1,177 @@
+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>
+    </>
+  );
+});
@@ -0,0 +1,138 @@
+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>
+    </>
+  );
+});
@@ -0,0 +1,127 @@
+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.
+  // `nodeDOM` is typed as `Node | null` — when `anchorPos` goes stale (e.g.
+  // an external drop reflows the doc before the plugin re-emits
+  // hoveringCell), it can resolve to a Text node, on which `.closest` is
+  // undefined. Filter to HTMLElement so downstream consumers stay safe.
+  const lookupDom = editor.view.nodeDOM(anchorPos);
+  const lookupCellDom = lookupDom instanceof HTMLElement ? lookupDom : 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>
+  );
+}
@@ -0,0 +1,44 @@
+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!}
+      />
+    </>
+  );
+});
@@ -22,7 +22,7 @@ interface TableBackgroundColorProps {
  editor: Editor | null;
 }

-const TABLE_COLORS: TableColorItem[] = [
+export const TABLE_COLORS: TableColorItem[] = [
  { name: "Default", color: "" },
  { name: "Blue", color: "#b4d5ff" },
  { name: "Green", color: "#acf5d2" },
@@ -18,7 +18,7 @@ import {
  IconTrashX,
 } from "@tabler/icons-react";
 import { BubbleMenu } from "@tiptap/react/menus";
-import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
+import { isCellSelection, isEditorReady, isTextSelected } from "@docmost/editor-ext";
 import { useTranslation } from "react-i18next";
 import classes from "../common/toolbar-menu.module.css";

@@ -38,6 +38,7 @@ export const TableMenu = React.memo(
    );

    const getReferencedVirtualElement = useCallback(() => {
+      if (!isEditorReady(editor)) return;
      const { selection } = editor.state;
      const predicate = (node: PMNode) => node.type.name === "table";
      const parent = findParentNode(predicate)(selection);
@@ -104,12 +105,12 @@ export const TableMenu = React.memo(
          element.style.zIndex = "99";
        }}
        options={{
-          placement: "top",
+          placement: "bottom",
          offset: {
            mainAxis: 15,
          },
          flip: {
-            fallbackPlacements: ["top", "bottom"],
+            fallbackPlacements: ["bottom", "top"],
            padding: { top: 35 + 15, left: 8, right: 8, bottom: -Infinity },
            boundary: editor.options.element as HTMLElement,
          },
@@ -86,11 +86,11 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
      transitionProps={{ transition: "pop" }}
    >
      <Popover.Target>
-        <Tooltip label={t("Text alignment")} withArrow>
+        <Tooltip label={t("Text align")} withArrow>
          <ActionIcon
            variant="subtle"
            size="lg"
-            aria-label={t("Text alignment")}
+            aria-label={t("Text align")}
            onClick={() => setOpened(!opened)}
          >
            <activeItem.icon size={18} />
@@ -35,6 +35,7 @@ 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}
@@ -62,6 +62,7 @@ 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}
    >
@@ -44,8 +44,29 @@
  transition: border 0.3s;
 }

-.transclusionWrap:hover,
-.transclusionWrap:focus-within {
+.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 {
  border: 2px solid
    light-dark(
      var(--mantine-color-orange-2),
@@ -114,9 +135,9 @@
  transition: border 0.3s;
 }

-.includeWrap:hover,
-.includeWrap[data-focused="true"],
-.includeWrap[data-menu-open="true"] {
+.includeWrap[data-editable="true"]:hover,
+.includeWrap[data-editable="true"][data-focused="true"],
+.includeWrap[data-editable="true"][data-menu-open="true"] {
  border: 2px solid
    light-dark(
      var(--mantine-color-orange-2),
@@ -2,6 +2,7 @@ import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
 import { useCallback } from "react";
 import { Node as PMNode } from "@tiptap/pm/model";
+import { isEditorReady } from "@docmost/editor-ext";
 import {
  EditorMenuProps,
  ShouldShowProps,
@@ -53,7 +54,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
  );

  const getReferencedVirtualElement = useCallback(() => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;
    const { selection } = editor.state;
    const predicate = (node: PMNode) => node.type.name === "video";
    const parent = findParentNode(predicate)(selection);
@@ -60,6 +60,23 @@ 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)",
@@ -71,7 +88,13 @@ function nodeDOMAtCoords(
    "h4",
    "h5",
    "h6",
-    ...options.customNodes.map((node) => `[data-type=${node}]`),
+    // 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,
  ].join(", ");
  return document
    .elementsFromPoint(coords.x, coords.y)
@@ -99,6 +122,22 @@ 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);
@@ -137,7 +176,6 @@ 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(
@@ -166,14 +204,46 @@ export function DragHandlePlugin(
    } else {
      selection = NodeSelection.create(view.state.doc, draggedNodePos);

-      // 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());
+      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());
+        }
      }
    }
    view.dispatch(view.state.tr.setSelection(selection));
@@ -313,6 +383,27 @@ 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)
@@ -328,6 +419,13 @@ 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;
@@ -42,9 +42,13 @@ import {
  Excalidraw,
  Embed,
  TiptapPdf,
+  PageBreak,
  SearchAndReplace,
  Mention,
  TableDndExtension,
+  TableHandleCommandsExtension,
+  TableHeaderPin,
+  TableReadonlySort,
  Subpages,
  Heading,
  Highlight,
@@ -56,6 +60,7 @@ import {
  Status,
  TransclusionSource,
  TransclusionReference,
+  TableView,
 } from "@docmost/editor-ext";
 import {
  randomElement,
@@ -80,7 +85,7 @@ import AudioView from "@/features/editor/components/audio/audio-view.tsx";
 import AttachmentView from "@/features/editor/components/attachment/attachment-view.tsx";
 import CodeBlockView from "@/features/editor/components/code-block/code-block-view.tsx";
 import DrawioView from "../components/drawio/drawio-view";
-import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view.tsx";
+import ExcalidrawView from "@/features/editor/components/excalidraw/excalidraw-view-lazy.tsx";
 import EmbedView from "@/features/editor/components/embed/embed-view.tsx";
 import PdfView from "@/features/editor/components/pdf/pdf-view.tsx";
 import SubpagesView from "@/features/editor/components/subpages/subpages-view.tsx";
@@ -259,11 +264,16 @@ export const mainExtensions = [
    resizable: true,
    lastColumnResizable: true,
    allowTableNodeSelection: true,
+    cellMinWidth: 49,
+    View: TableView,
  }),
  TableRow,
  TableCell,
  TableHeader,
  TableDndExtension,
+  TableHandleCommandsExtension,
+  TableHeaderPin,
+  TableReadonlySort,
  MathInline.configure({
    view: MathInlineView,
  }),
@@ -357,6 +367,7 @@ export const mainExtensions = [
  TiptapPdf.configure({
    view: PdfView,
  }),
+  PageBreak,
  Subpages.configure({
    view: SubpagesView,
  }),
@@ -1,5 +1,5 @@
 import classes from "@/features/editor/styles/editor.module.css";
-import React from "react";
+import React, { useEffect } from "react";
 import { TitleEditor } from "@/features/editor/title-editor";
 import PageEditor from "@/features/editor/page-editor";
 import {
@@ -23,17 +23,25 @@ import { IContributor } from "@/features/page/types/page.types.ts";
 import { FixedToolbar } from "@/features/editor/components/fixed-toolbar/fixed-toolbar";
 import { PageEditMode } from "@/features/user/types/user.types.ts";
 import useToggleAside from "@/hooks/use-toggle-aside.tsx";
+import { DeletedPageBanner } from "@/features/page/trash/components/deleted-page-banner.tsx";
 import clsx from "clsx";
+import { currentPageEditModeAtom } from "@/features/editor/atoms/editor-atoms.ts";

 const MemoizedTitleEditor = React.memo(TitleEditor);
 const MemoizedPageEditor = React.memo(PageEditor);
+const MemoizedFixedToolbar = React.memo(FixedToolbar);
+const MemoizedDeletedPageBanner = React.memo(DeletedPageBanner);

-type PageCreator = {
+type PageUser = {
  id: string;
  name: string;
  avatarUrl: string;
 };

+// Module-level flag: survives component unmount/remount on page navigation,
+// reset only on full page reload (i.e. a new app session).
+let defaultEditModeApplied = false;
+
 export interface FullEditorProps {
  pageId: string;
  slugId: string;
@@ -41,7 +49,7 @@ export interface FullEditorProps {
  content: string;
  spaceSlug: string;
  editable: boolean;
-  creator?: PageCreator;
+  creator?: PageUser;
  contributors?: IContributor[];
  canComment?: boolean;
 }
@@ -61,9 +69,21 @@ export function FullEditor({
  const fullPageWidth = user.settings?.preferences?.fullPageWidth;
  const editorToolbarEnabled =
    user.settings?.preferences?.editorToolbar ?? false;
+  const [currentPageEditMode, setCurrentPageEditMode] = useAtom(
+    currentPageEditModeAtom,
+  );
  const userPageEditMode =
    user.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
-  const isEditMode = userPageEditMode === PageEditMode.Edit;
+  const isEditMode = currentPageEditMode === PageEditMode.Edit;
+
+  // Apply the user's saved preference only once on initial load, not on every
+  // page navigation — so the mode sticks across navigations within a session.
+  useEffect(() => {
+    if (!defaultEditModeApplied) {
+      setCurrentPageEditMode(userPageEditMode as PageEditMode);
+      defaultEditModeApplied = true;
+    }
+  }, [userPageEditMode, setCurrentPageEditMode]);

  return (
    <Container
@@ -71,7 +91,10 @@ export function FullEditor({
      size={!fullPageWidth && 900}
      className={classes.editor}
    >
-      {editorToolbarEnabled && editable && isEditMode && <FixedToolbar />}
+      {editorToolbarEnabled && editable && isEditMode && (
+        <MemoizedFixedToolbar />
+      )}
+      <MemoizedDeletedPageBanner slugId={slugId} />
      <MemoizedTitleEditor
        pageId={pageId}
        slugId={slugId}
@@ -95,16 +118,12 @@ export function FullEditor({
 }

 type PageBylineProps = {
-  creator?: PageCreator;
+  creator?: PageUser;
  contributors?: IContributor[];
  readOnly?: boolean;
 };

-function PageByline({
-  creator,
-  contributors,
-  readOnly,
-}: PageBylineProps) {
+function PageByline({ creator, contributors, readOnly }: PageBylineProps) {
  const { t } = useTranslation();
  const toggleAside = useToggleAside();

@@ -26,10 +26,11 @@ import {
  collabExtensions,
  mainExtensions,
 } from "@/features/editor/extensions/extensions";
-import { useAtom } from "jotai";
+import { useAtom, useAtomValue } from "jotai";
 import useCollaborationUrl from "@/features/editor/hooks/use-collaboration-url";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
 import {
+  currentPageEditModeAtom,
  pageEditorAtom,
  yjsConnectionStatusAtom,
 } from "@/features/editor/atoms/editor-atoms";
@@ -44,6 +45,7 @@ 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";
@@ -53,7 +55,7 @@ import {
  handleFileDrop,
  handlePaste,
 } from "@/features/editor/components/common/editor-paste-handler.tsx";
-import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu";
+import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu-lazy";
 import DrawioMenu from "./components/drawio/drawio-menu";
 import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
 import SearchAndReplaceDialog from "@/features/editor/components/search-and-replace/search-and-replace-dialog.tsx";
@@ -111,8 +113,7 @@ export default function PageEditor({
  const documentState = useDocumentVisibility();
  const { pageSlug } = useParams();
  const slugId = extractPageSlugId(pageSlug);
-  const userPageEditMode =
-    currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
+  const currentPageEditMode = useAtomValue(currentPageEditModeAtom);
  const canScroll = useCallback(
    () => Boolean(isComponentMounted.current && editorRef.current),
    [isComponentMounted],
@@ -372,19 +373,9 @@ export default function PageEditor({
    return () => clearTimeout(timeout);
  }, [yjsConnectionStatus, isSynced]);
  useEffect(() => {
-    // Only honor user default page edit mode preference and permissions
-    if (editor) {
-      if (userPageEditMode && editable) {
-        if (userPageEditMode === PageEditMode.Edit) {
-          editor.setEditable(true);
-        } else if (userPageEditMode === PageEditMode.Read) {
-          editor.setEditable(false);
-        }
-      } else {
-        editor.setEditable(false);
-      }
-    }
-  }, [userPageEditMode, editor, editable]);
+    if (!editor) return;
+    editor.setEditable(editable && currentPageEditMode === PageEditMode.Edit);
+  }, [currentPageEditMode, editor, editable]);

  const hasConnectedOnceRef = useRef(false);
  const [showStatic, setShowStatic] = useState(true);
@@ -424,7 +415,7 @@ export default function PageEditor({
                <EditorLinkMenu editor={editor} />
                <EditorBubbleMenu editor={editor} />
                <TableMenu editor={editor} />
-                <TableCellMenu editor={editor} appendTo={menuContainerRef} />
+                <TableHandlesLayer editor={editor} />
                <ImageMenu editor={editor} />
                <VideoMenu editor={editor} />
                <PdfMenu editor={editor} />
@@ -203,7 +203,8 @@
    }
  }

-  .resize-cursor {
+  &.resize-cursor,
+  &.resize-cursor * {
    cursor: ew-resize;
    cursor: col-resize;
  }
@@ -9,6 +9,7 @@
@import "./media.css";
@import "./code.css";
@import "./print.css";
+@import "./page-break.css";
@import "./find.css";
@import "./mention.css";
@import "./ordered-list.css";
@@ -0,0 +1,50 @@
+.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;
+  }
+}
@@ -15,7 +15,8 @@
 }

 .table-dnd-drop-indicator {
-  background-color: #adf;
+  background-color: var(--mantine-color-blue-5);
+  z-index: 3;
 }

 .ProseMirror {
@@ -57,13 +58,14 @@
    }

    .column-resize-handle {
-      background-color: #adf;
+      background-color: var(--mantine-color-blue-5);
      bottom: -1px;
      position: absolute;
-      right: -2px;
+      right: -1px;
      pointer-events: none;
      top: 0;
-      width: 4px;
+      width: 2px;
+      z-index: 3;
    }

    .selectedCell:after {
@@ -129,6 +131,139 @@
  }
 }

+
+/* 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;
@@ -7,6 +7,7 @@ import { Text } from "@tiptap/extension-text";
 import { Placeholder } from "@tiptap/extension-placeholder";
 import { useAtomValue } from "jotai";
 import {
+  currentPageEditModeAtom,
  pageEditorAtom,
  titleEditorAtom,
 } from "@/features/editor/atoms/editor-atoms";
@@ -24,7 +25,6 @@ import { useTranslation } from "react-i18next";
 import EmojiCommand from "@/features/editor/extensions/emoji-command.ts";
 import { UpdateEvent } from "@/features/websocket/types";
 import localEmitter from "@/lib/local-emitter.ts";
-import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { PageEditMode } from "@/features/user/types/user.types.ts";
 import { searchSpotlight } from "@/features/search/constants.ts";
 import { platformModifierKey } from "@/lib";
@@ -52,9 +52,7 @@ export function TitleEditor({
  const emit = useQueryEmit();
  const navigate = useNavigate();
  const [activePageId, setActivePageId] = useState(pageId);
-  const [currentUser] = useAtom(currentUserAtom);
-  const userPageEditMode =
-    currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
+  const currentPageEditMode = useAtomValue(currentPageEditModeAtom);

  const titleEditor = useEditor({
    extensions: [
@@ -172,18 +170,9 @@ export function TitleEditor({
  }, [pageId]);

  useEffect(() => {
-    if (titleEditor) {
-      if (userPageEditMode && editable) {
-        if (userPageEditMode === PageEditMode.Edit) {
-          titleEditor.setEditable(true);
-        } else if (userPageEditMode === PageEditMode.Read) {
-          titleEditor.setEditable(false);
-        }
-      } else {
-        titleEditor.setEditable(false);
-      }
-    }
-  }, [userPageEditMode, titleEditor, editable]);
+    if (!titleEditor) return;
+    titleEditor.setEditable(editable && currentPageEditMode === PageEditMode.Edit);
+  }, [currentPageEditMode, titleEditor, editable]);

  const openSearchDialog = () => {
    const event = new CustomEvent("openFindDialogFromEditor", {});
@@ -40,7 +40,7 @@ import {
  yjsConnectionStatusAtom,
 } from "@/features/editor/atoms/editor-atoms.ts";
 import { formattedDate } from "@/lib/time.ts";
-import { PageStateSegmentedControl } from "@/features/user/components/page-state-pref.tsx";
+import { PageEditModeToggle } from "@/features/user/components/page-state-pref.tsx";
 import MovePageModal from "@/features/page/components/move-page-modal.tsx";
 import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
 import { PageShareModal } from "@/ee/page-permission";
@@ -65,6 +65,11 @@ interface PageHeaderMenuProps {
 export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
  const { t } = useTranslation();
  const toggleAside = useToggleAside();
+  const { pageSlug } = useParams();
+  const { data: page } = usePageQuery({
+    pageId: extractPageSlugId(pageSlug),
+  });
+  const isDeleted = !!page?.deletedAt;

  useHotkeys(
    [
@@ -87,11 +92,15 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
    [],
  );

+  if (isDeleted) {
+    return null;
+  }
+
  return (
    <>
      <ConnectionWarning />

-      {!readOnly && <PageStateSegmentedControl size="xs" />}
+      {!readOnly && <PageEditModeToggle size="xs" />}

      <PageShareModal readOnly={readOnly} />

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

@@ -0,0 +1,30 @@
+import { modals } from "@mantine/modals";
+import { Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+
+type UseRestoreModalProps = {
+  title?: string | null;
+  onConfirm: () => void;
+};
+
+export function useRestorePageModal() {
+  const { t } = useTranslation();
+  const openRestoreModal = ({ title, onConfirm }: UseRestoreModalProps) => {
+    modals.openConfirmModal({
+      title: t("Restore page"),
+      children: (
+        <Text size="sm">
+          {t("Restore '{{title}}' and its sub-pages?", {
+            title: title || t("Untitled"),
+          })}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Restore"), cancel: t("Cancel") },
+      confirmProps: { color: "blue" },
+      onConfirm,
+    });
+  };
+
+  return { openRestoreModal } as const;
+}
@@ -117,10 +117,20 @@ export function useUpdatePageMutation() {
 }

 export function useRemovePageMutation() {
+  const { t } = useTranslation();
  return useMutation({
    mutationFn: (pageId: string) => deletePage(pageId, false),
    onSuccess: (_, pageId) => {
-      notifications.show({ message: "Page moved to trash" });
+      notifications.show({ message: t("Page moved to trash") });
+
+      // Stamp deletedAt so a re-visit shows the trash banner, not stale state.
+      const cached = queryClient.getQueryData<IPage>(["pages", pageId]);
+      if (cached) {
+        const stamped = { ...cached, deletedAt: new Date() };
+        queryClient.setQueryData(["pages", cached.id], stamped);
+        queryClient.setQueryData(["pages", cached.slugId], stamped);
+      }
+
      invalidateOnDeletePage(pageId);
      queryClient.invalidateQueries({
        predicate: (item) =>
@@ -128,7 +138,7 @@ export function useRemovePageMutation() {
      });
    },
    onError: (error) => {
-      notifications.show({ message: "Failed to delete page", color: "red" });
+      notifications.show({ message: t("Failed to delete page"), color: "red" });
    },
  });
 }
@@ -162,13 +172,14 @@ export function useMovePageMutation() {
 }

 export function useRestorePageMutation() {
+  const { t } = useTranslation();
  const [treeData, setTreeData] = useAtom(treeDataAtom);
  const emit = useQueryEmit();

  return useMutation({
    mutationFn: (pageId: string) => restorePage(pageId),
    onSuccess: async (restoredPage) => {
-      notifications.show({ message: "Page restored successfully" });
+      notifications.show({ message: t("Page restored successfully") });

      // Check if the page already exists in the tree (it shouldn't)
      if (!treeModel.find(treeData, restoredPage.id)) {
@@ -222,9 +233,16 @@ export function useRestorePageMutation() {
      await queryClient.invalidateQueries({
        queryKey: ["trash-list", restoredPage.spaceId],
      });
+
+      // Merge — restore endpoint returns a skinny page;
+      // Replace would strip space/permissions/content and break the editor.
+      const merge = (cached: IPage | undefined) =>
+        cached ? { ...cached, ...restoredPage } : cached;
+      queryClient.setQueryData<IPage>(["pages", restoredPage.id], merge);
+      queryClient.setQueryData<IPage>(["pages", restoredPage.slugId], merge);
    },
    onError: (error) => {
-      notifications.show({ message: "Failed to restore page", color: "red" });
+      notifications.show({ message: t("Failed to restore page"), color: "red" });
    },
  });
 }
@@ -0,0 +1,140 @@
+import { ActionIcon, Button, Group, Paper, Text, Tooltip } from "@mantine/core";
+import { IconRestore, IconTrash } from "@tabler/icons-react";
+import { useNavigate } from "react-router-dom";
+import { Trans, useTranslation } from "react-i18next";
+import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
+import { useRestorePageModal } from "@/features/page/hooks/use-restore-page-modal.tsx";
+import { useDeletePageModal } from "@/features/page/hooks/use-delete-page-modal.tsx";
+import {
+  useDeletePageMutation,
+  usePageQuery,
+  useRestorePageMutation,
+} from "@/features/page/queries/page-query.ts";
+import { getSpaceUrl } from "@/lib/config.ts";
+import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
+import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
+import {
+  SpaceCaslAction,
+  SpaceCaslSubject,
+} from "@/features/space/permissions/permissions.type.ts";
+
+type DeletedPageBannerProps = {
+  slugId: string;
+};
+
+export function DeletedPageBanner({ slugId }: DeletedPageBannerProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { data: page } = usePageQuery({ pageId: slugId });
+  const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
+  const spaceAbility = useSpaceAbility(space?.membership?.permissions);
+  const deletedTimeAgo = useTimeAgo(page?.deletedAt);
+  const restorePageMutation = useRestorePageMutation();
+  const deletePageMutation = useDeletePageMutation();
+  const { openRestoreModal } = useRestorePageModal();
+  const { openDeleteModal } = useDeletePageModal();
+
+  if (!page?.deletedAt) return null;
+
+  const canRestore = spaceAbility.can(
+    SpaceCaslAction.Edit,
+    SpaceCaslSubject.Page,
+  );
+  const canPermanentlyDelete = spaceAbility.can(
+    SpaceCaslAction.Manage,
+    SpaceCaslSubject.Settings,
+  );
+  const actorName = page.deletedBy?.name ?? t("Someone");
+
+  const handleRestore = () => {
+    openRestoreModal({
+      title: page.title,
+      onConfirm: () => restorePageMutation.mutate(page.id),
+    });
+  };
+
+  const handlePermanentDelete = () => {
+    openDeleteModal({
+      isPermanent: true,
+      onConfirm: async () => {
+        await deletePageMutation.mutateAsync(page.id);
+        navigate(getSpaceUrl(page.space?.slug));
+      },
+    });
+  };
+
+  const hasAnyAction = canRestore || canPermanentlyDelete;
+
+  return (
+    <Paper radius="sm" mb="md" px="md" py="xs" bg="red.0">
+      <Group justify="space-between" wrap="wrap" gap="sm">
+        <Text size="sm" style={{ flex: 1, minWidth: 0 }}>
+          <Trans
+            i18nKey="<b>{{name}}</b> moved this page to Trash {{time}}."
+            values={{ name: actorName, time: deletedTimeAgo }}
+            components={{ b: <Text span fw={600} inherit /> }}
+          />
+        </Text>
+        {hasAnyAction && (
+          <>
+            <Group gap="xs" wrap="nowrap" visibleFrom="sm">
+              {canRestore && (
+                <Button
+                  size="xs"
+                  variant="light"
+                  color="red"
+                  leftSection={<IconRestore size={16} />}
+                  onClick={handleRestore}
+                  loading={restorePageMutation.isPending}
+                >
+                  {t("Restore page")}
+                </Button>
+              )}
+              {canPermanentlyDelete && (
+                <Button
+                  size="xs"
+                  variant="light"
+                  color="red"
+                  leftSection={<IconTrash size={16} />}
+                  onClick={handlePermanentDelete}
+                  loading={deletePageMutation.isPending}
+                >
+                  {t("Permanently delete")}
+                </Button>
+              )}
+            </Group>
+            <Group gap="xs" wrap="nowrap" hiddenFrom="sm">
+              {canRestore && (
+                <Tooltip label={t("Restore page")} withArrow>
+                  <ActionIcon
+                    size="lg"
+                    variant="default"
+                    onClick={handleRestore}
+                    loading={restorePageMutation.isPending}
+                    aria-label={t("Restore page")}
+                  >
+                    <IconRestore size={18} />
+                  </ActionIcon>
+                </Tooltip>
+              )}
+              {canPermanentlyDelete && (
+                <Tooltip label={t("Permanently delete")} withArrow>
+                  <ActionIcon
+                    size="lg"
+                    variant="light"
+                    color="red"
+                    onClick={handlePermanentDelete}
+                    loading={deletePageMutation.isPending}
+                    aria-label={t("Permanently delete")}
+                  >
+                    <IconTrash size={18} />
+                  </ActionIcon>
+                </Tooltip>
+              )}
+            </Group>
+          </>
+        )}
+      </Group>
+    </Paper>
+  );
+}
@@ -0,0 +1,21 @@
+import { Alert, Text } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { useAtomValue } from "jotai";
+import { useTranslation } from "react-i18next";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+
+export function TrashBanner() {
+  const { t } = useTranslation();
+  const workspace = useAtomValue(workspaceAtom);
+  const retentionDays = workspace?.trashRetentionDays ?? 30;
+
+  return (
+    <Alert icon={<IconInfoCircle size={16} />} variant="light" color="red">
+      <Text size="sm" lh={1.35}>
+        {t("Pages in trash will be permanently deleted after {{count}} days.", {
+          count: retentionDays,
+        })}
+      </Text>
+    </Alert>
+  );
+}
@@ -7,17 +7,16 @@ import {
  Group,
  ActionIcon,
  Text,
-  Alert,
  Stack,
  Menu,
 } from "@mantine/core";
 import {
-  IconInfoCircle,
  IconDots,
  IconRestore,
  IconTrash,
  IconFileDescription,
 } from "@tabler/icons-react";
+import { TrashBanner } from "@/features/page/trash/components/trash-banner.tsx";
 import {
  useDeletedPagesQuery,
  useRestorePageMutation,
@@ -31,12 +30,10 @@ import TrashPageContentModal from "@/features/page/trash/components/trash-page-c
 import { UserInfo } from "@/components/common/user-info.tsx";
 import Paginate from "@/components/common/paginate.tsx";
 import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
-import { useAtom } from "jotai";
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { useRestorePageModal } from "@/features/page/hooks/use-restore-page-modal.tsx";

 export default function Trash() {
  const { t } = useTranslation();
-  const [workspace] = useAtom(workspaceAtom);
  const { spaceSlug } = useParams();
  const { cursor, goNext, goPrev } = useCursorPaginate();
  const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
@@ -45,6 +42,7 @@ export default function Trash() {
  });
  const restorePageMutation = useRestorePageMutation();
  const deletePageMutation = useDeletePageMutation();
+  const { openRestoreModal } = useRestorePageModal();

  const [selectedPage, setSelectedPage] = useState<{
    title: string;
@@ -78,23 +76,6 @@ export default function Trash() {
    });
  };

-  const openRestoreModal = (pageId: string, pageTitle: string) => {
-    modals.openConfirmModal({
-      title: t("Restore page"),
-      children: (
-        <Text size="sm">
-          {t("Restore '{{title}}' and its sub-pages?", {
-            title: pageTitle || "Untitled",
-          })}
-        </Text>
-      ),
-      centered: true,
-      labels: { confirm: t("Restore"), cancel: t("Cancel") },
-      confirmProps: { color: "blue" },
-      onConfirm: () => handleRestorePage(pageId),
-    });
-  };
-
  const hasPages = deletedPages && deletedPages.items.length > 0;

  const handlePageClick = (page: any) => {
@@ -109,11 +90,7 @@ export default function Trash() {
          <Title order={2}>{t("Trash")}</Title>
        </Group>

-        <Alert icon={<IconInfoCircle size={16} />} variant="light" color="red">
-          <Text size="sm">
-            {t("Pages in trash will be permanently deleted after {{count}} days.", { count: workspace?.trashRetentionDays ?? 30 })}
-          </Text>
-        </Alert>
+        <TrashBanner />

        {isLoading || !deletedPages ? (
          <></>
@@ -181,7 +158,10 @@ export default function Trash() {
                          <Menu.Item
                            leftSection={<IconRestore size={16} />}
                            onClick={() =>
-                              openRestoreModal(page.id, page.title)
+                              openRestoreModal({
+                                title: page.title,
+                                onConfirm: () => handleRestorePage(page.id),
+                              })
                            }
                          >
                            {t("Restore")}
@@ -1,6 +1,11 @@
 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,
+);
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
  ActionIcon,
  AppShell,
@@ -14,11 +14,16 @@ 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 { sharedPageTreeAtom, sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom";
+import {
+  sharedPageFullWidthAtom,
+  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";
@@ -27,7 +32,7 @@ import {
  mobileTableOfContentAsideAtom,
  tableOfContentAsideAtom,
 } from "@/features/share/atoms/sidebar-atom.ts";
-import { IconList } from "@tabler/icons-react";
+import { IconArrowsHorizontal, IconList } from "@tabler/icons-react";
 import { useToggleToc } from "@/features/share/hooks/use-toggle-toc.ts";
 import classes from "./share.module.css";
 import {
@@ -55,6 +60,46 @@ 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);
@@ -81,7 +126,7 @@ export default function ShareShell({
      header={{ height: 50 }}
      {...(data?.pageTree?.length > 1 && {
        navbar: {
-          width: 300,
+          width: sidebarWidth,
          breakpoint: "sm",
          collapsed: {
            mobile: !mobileOpened,
@@ -166,6 +211,20 @@ 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 />
@@ -174,7 +233,11 @@ export default function ShareShell({
      </AppShell.Header>

      {data?.pageTree?.length > 1 && (
-        <AppShell.Navbar p="md" className={classes.navbar}>
+        <AppShell.Navbar p="md" className={classes.navbar} ref={sidebarRef}>
+          <div
+            className={classes.resizeHandle}
+            onMouseDown={startResizing}
+          />
          <MemoizedSharedTree sharedPageTree={data} />
        </AppShell.Navbar>
      )}
@@ -10,6 +10,7 @@
 .treeNode {
  text-decoration: none;
  user-select: none;
+  padding-bottom: 0;
 }

 .navbar,
@@ -18,3 +19,26 @@
    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;
+  }
+}
@@ -6,6 +6,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { PageEditMode } from "@/features/user/types/user.types.ts";
 import { ResponsiveSettingsRow, ResponsiveSettingsContent, ResponsiveSettingsControl } from "@/components/ui/responsive-settings-row";
+import { currentPageEditModeAtom } from "@/features/editor/atoms/editor-atoms.ts";

 export default function PageStatePref() {
  const { t } = useTranslation();
@@ -71,3 +72,24 @@ export function PageStateSegmentedControl({
    />
  );
 }
+
+// Header variant: updates the current page's mode locally without persisting
+// the preference to the server.
+export function PageEditModeToggle({ size }: { size?: MantineSize }) {
+  const { t } = useTranslation();
+  const [currentPageEditMode, setCurrentPageEditMode] = useAtom(
+    currentPageEditModeAtom,
+  );
+
+  return (
+    <SegmentedControl
+      size={size}
+      value={currentPageEditMode}
+      onChange={(v) => setCurrentPageEditMode(v as PageEditMode)}
+      data={[
+        { label: t("Edit"), value: PageEditMode.Edit },
+        { label: t("Read"), value: PageEditMode.Read },
+      ]}
+    />
+  );
+}
@@ -31,20 +31,38 @@ 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);
-  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;
+  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"));
 }

 export default APP_ROUTE;
@@ -52,7 +52,7 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
  } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
  const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);

-  const canEdit = page?.permissions?.canEdit ?? false;
+  const canEdit = !page?.deletedAt && (page?.permissions?.canEdit ?? false);
  const canComment =
    canEdit ||
    (space?.settings?.comments?.allowViewerComments === true);
@@ -9,7 +9,10 @@ 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 { sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom.ts";
+import {
+  sharedPageFullWidthAtom,
+  sharedTreeDataAtom,
+} from "@/features/share/atoms/shared-page-atom.ts";
 import { isPageInTree } from "@/features/share/utils.ts";

 export default function SharedPage() {
@@ -23,6 +26,7 @@ export default function SharedPage() {
  });

  const sharedTreeData = useAtomValue(sharedTreeDataAtom);
+  const fullWidth = useAtomValue(sharedPageFullWidthAtom);

  useEffect(() => {
    if (shareId && data) {
@@ -59,7 +63,7 @@ export default function SharedPage() {
        )}
      </Helmet>

-      <Container size={900} p={0}>
+      <Container fluid={fullWidth} size={fullWidth ? undefined : 900} p={0}>
        <ReadonlyPageEditor
          key={data.page.id}
          title={data.page.title}
@@ -38,12 +38,12 @@ export default defineConfig(({ mode }) => {
    build: {
      rolldownOptions: {
        output: {
-          codeSplitting: {
+          advancedChunks: {
            groups: [
-              { name: "vendor-mantine", test: /@mantine/ },
-              { name: "vendor-mermaid", test: /mermaid|cytoscape|elkjs/ },
-              { name: "vendor-excalidraw", test: /excalidraw/ },
-              { name: "vendor-katex", test: /katex/ },
+              {
+                name: "vendor-mantine",
+                test: /[\\/]node_modules[\\/]@mantine[\\/]/,
+              },
            ],
          },
        },
@@ -42,7 +42,7 @@
    "@fastify/multipart": "^10.0.0",
    "@fastify/static": "^9.1.3",
    "@keyv/redis": "^5.1.6",
-    "@langchain/core": "1.1.39",
+    "@langchain/core": "1.1.46",
    "@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.14",
+    "kysely": "^0.28.17",
    "kysely-migration-cli": "^0.4.2",
    "kysely-postgres-js": "^3.0.0",
    "ldapts": "^8.1.7",
@@ -26,6 +26,7 @@ import {
  TiptapVideo,
  TiptapAudio,
  TiptapPdf,
+  PageBreak,
  TrailingNode,
  Attachment,
  Drawio,
@@ -94,6 +95,7 @@ export const tiptapExtensions = [
  TiptapVideo,
  TiptapAudio,
  TiptapPdf,
+  PageBreak,
  Callout,
  Attachment,
  CustomCodeBlock,
@@ -2,6 +2,7 @@ import { Module } from '@nestjs/common';
 import { AppController } from '../../app.controller';
 import { AppService } from '../../app.service';
 import { EnvironmentModule } from '../../integrations/environment/environment.module';
+import { EnvironmentService } from '../../integrations/environment/environment.service';
 import { CollaborationModule } from '../collaboration.module';
 import { DatabaseModule } from '@docmost/db/database.module';
 import { QueueModule } from '../../integrations/queue/queue.module';
@@ -12,6 +13,8 @@ import { LoggerModule } from '../../common/logger/logger.module';
 import { RedisModule } from '@nestjs-labs/nestjs-ioredis';
 import { RedisConfigService } from '../../integrations/redis/redis-config.service';
 import { CaslModule } from '../../core/casl/casl.module';
+import { CacheModule } from '@nestjs/cache-manager';
+import KeyvRedis from '@keyv/redis';

@Module({
  imports: [
@@ -26,6 +29,18 @@ import { CaslModule } from '../../core/casl/casl.module';
    RedisModule.forRootAsync({
      useClass: RedisConfigService,
    }),
+    CacheModule.registerAsync({
+      isGlobal: true,
+      useFactory: async (environmentService: EnvironmentService) => {
+        const redisUrl = environmentService.getRedisUrl();
+
+        return {
+          ttl: 5 * 1000,
+          stores: [new KeyvRedis(redisUrl)],
+        };
+      },
+      inject: [EnvironmentService],
+    }),
  ],
  controllers: [
    AppController,
@@ -1,3 +1,11 @@
 export const CacheKey = {
  LICENSE_VALID: (workspaceId: string) => `license:valid:${workspaceId}`,
+  SPACE_ROLES: (userId: string, spaceId: string) =>
+    `perm:space-roles:${userId}:${spaceId}`,
+  PAGE_CAN_EDIT: (userId: string, pageId: string) =>
+    `perm:can-edit:${userId}:${pageId}`,
 };
+
+// Permission caches dedupe repeated checks within and across short request bursts.
+// 5s keeps staleness on revocations bounded.
+export const PERMISSION_CACHE_TTL_MS = 5_000;
@@ -0,0 +1,27 @@
+import { Cache } from 'cache-manager';
+
+export async function withCache<T>(
+  cacheManager: Cache,
+  key: string,
+  ttlMs: number,
+  fn: () => Promise<T>,
+): Promise<T> {
+  try {
+    const cached = await cacheManager.get<{ v: T }>(key);
+    if (cached !== undefined && cached !== null) {
+      return cached.v;
+    }
+  } catch (err) {
+    console.warn(`[withCache] get failed for "${key}", falling back to source`, err);
+  }
+
+  const value = await fn();
+
+  try {
+    await cacheManager.set(key, { v: value }, ttlMs);
+  } catch (err) {
+    console.warn(`[withCache] set failed for "${key}"`, err);
+  }
+
+  return value;
+}
@@ -76,6 +76,7 @@ export class PageController {
      includeCreator: true,
      includeLastUpdatedBy: true,
      includeContributors: true,
+      includeDeletedBy: true,
    });

    if (!page) {
@@ -1,4 +1,6 @@
-import { Injectable } from '@nestjs/common';
+import { Inject, Injectable } from '@nestjs/common';
+import { CACHE_MANAGER } from '@nestjs/cache-manager';
+import { Cache } from 'cache-manager';
 import { InjectKysely } from 'nestjs-kysely';
 import { KyselyDB, KyselyTransaction } from '@docmost/db/types/kysely.types';
 import { dbOrTx } from '@docmost/db/utils';
@@ -17,6 +19,11 @@ import {
  executeWithCursorPagination,
 } from '@docmost/db/pagination/cursor-pagination';
 import { PagePermissionMember } from './types/page-permission.types';
+import { withCache } from '../../../common/helpers/with-cache';
+import {
+  CacheKey,
+  PERMISSION_CACHE_TTL_MS,
+} from '../../../common/helpers/cache-keys';

 export { PagePermissionMember } from './types/page-permission.types';

@@ -25,6 +32,7 @@ export class PagePermissionRepo {
  constructor(
    @InjectKysely() private readonly db: KyselyDB,
    private readonly groupRepo: GroupRepo,
+    @Inject(CACHE_MANAGER) private readonly cacheManager: Cache,
  ) {}

  async findPageAccessByPageId(
@@ -361,40 +369,8 @@ export class PagePermissionRepo {
   * Check if user can access a page by verifying they have permission on ALL restricted ancestors.
   */
  async canUserAccessPage(userId: string, pageId: string): Promise<boolean> {
-    const deniedAncestor = await this.db
-      .withRecursive('ancestors', (qb) =>
-        qb
-          .selectFrom('pages')
-          .select(['pages.id as ancestorId', 'pages.parentPageId'])
-          .where('pages.id', '=', pageId)
-          .unionAll((eb) =>
-            eb
-              .selectFrom('pages')
-              .innerJoin('ancestors', 'ancestors.parentPageId', 'pages.id')
-              .select(['pages.id as ancestorId', 'pages.parentPageId']),
-          ),
-      )
-      .selectFrom('ancestors')
-      .innerJoin('pageAccess', 'pageAccess.pageId', 'ancestors.ancestorId')
-      .leftJoin('pagePermissions', (join) =>
-        join
-          .onRef('pagePermissions.pageAccessId', '=', 'pageAccess.id')
-          .on((eb) =>
-            eb.or([
-              eb('pagePermissions.userId', '=', userId),
-              eb(
-                'pagePermissions.groupId',
-                'in',
-                this.userGroupIdsSubquery(eb, userId),
-              ),
-            ]),
-          ),
-      )
-      .select('pageAccess.pageId')
-      .where('pagePermissions.id', 'is', null)
-      .executeTakeFirst();
-
-    return !deniedAncestor;
+    const { canAccess } = await this.canUserEditPage(userId, pageId);
+    return canAccess;
  }

  /**
@@ -412,43 +388,50 @@ export class PagePermissionRepo {
    canAccess: boolean;
    canEdit: boolean;
  }> {
-    const result = await sql<{
-      canAccess: boolean | null;
-      canEdit: boolean | null;
-    }>`
-      WITH RECURSIVE ancestors AS (
-        SELECT id AS ancestor_id, parent_page_id, 0 AS depth
-        FROM pages
-        WHERE id = ${pageId}::uuid
-        UNION ALL
-        SELECT p.id, p.parent_page_id, a.depth + 1
-        FROM pages p
-        JOIN ancestors a ON a.parent_page_id = p.id
-      )
-      SELECT
-        bool_and(pp.id IS NOT NULL) AS "canAccess",
-        -- nearest restricted ancestor's highest role wins (DESC: 'writer' > 'reader', NULLS LAST: no-permission after real roles)
-        (array_agg(pp.role ORDER BY a.depth ASC, pp.role DESC NULLS LAST))[1] = 'writer' AS "canEdit"
-      FROM ancestors a
-      JOIN page_access pa ON pa.page_id = a.ancestor_id
-      LEFT JOIN page_permissions pp ON pp.page_access_id = pa.id
-        AND (
-          pp.user_id = ${userId}::uuid
-          OR pp.group_id IN (
-            SELECT gu.group_id FROM group_users gu WHERE gu.user_id = ${userId}::uuid
+    return withCache(
+      this.cacheManager,
+      CacheKey.PAGE_CAN_EDIT(userId, pageId),
+      PERMISSION_CACHE_TTL_MS,
+      async () => {
+        const result = await sql<{
+          canAccess: boolean | null;
+          canEdit: boolean | null;
+        }>`
+          WITH RECURSIVE ancestors AS (
+            SELECT id AS ancestor_id, parent_page_id, 0 AS depth
+            FROM pages
+            WHERE id = ${pageId}::uuid
+            UNION ALL
+            SELECT p.id, p.parent_page_id, a.depth + 1
+            FROM pages p
+            JOIN ancestors a ON a.parent_page_id = p.id
          )
-        )
-    `.execute(this.db);
+          SELECT
+            bool_and(pp.id IS NOT NULL) AS "canAccess",
+            -- nearest restricted ancestor's highest role wins (DESC: 'writer' > 'reader', NULLS LAST: no-permission after real roles)
+            (array_agg(pp.role ORDER BY a.depth ASC, pp.role DESC NULLS LAST))[1] = 'writer' AS "canEdit"
+          FROM ancestors a
+          JOIN page_access pa ON pa.page_id = a.ancestor_id
+          LEFT JOIN page_permissions pp ON pp.page_access_id = pa.id
+            AND (
+              pp.user_id = ${userId}::uuid
+              OR pp.group_id IN (
+                SELECT gu.group_id FROM group_users gu WHERE gu.user_id = ${userId}::uuid
+              )
+            )
+        `.execute(this.db);

-    const row = result.rows[0];
-    if (!row || row.canAccess === null) {
-      return { hasAnyRestriction: false, canAccess: true, canEdit: true };
-    }
-    return {
-      hasAnyRestriction: true,
-      canAccess: row.canAccess,
-      canEdit: row.canAccess && (row.canEdit ?? false),
-    };
+        const row = result.rows[0];
+        if (!row || row.canAccess === null) {
+          return { hasAnyRestriction: false, canAccess: true, canEdit: true };
+        }
+        return {
+          hasAnyRestriction: true,
+          canAccess: row.canAccess,
+          canEdit: row.canAccess && (row.canEdit ?? false),
+        };
+      },
+    );
  }

  /**
@@ -54,6 +54,7 @@ export class PageRepo {
      includeCreator?: boolean;
      includeLastUpdatedBy?: boolean;
      includeContributors?: boolean;
+      includeDeletedBy?: boolean;
      includeHasChildren?: boolean;
      withLock?: boolean;
      trx?: KyselyTransaction;
@@ -83,6 +84,10 @@ export class PageRepo {
      query = query.select((eb) => this.withContributors(eb));
    }

+    if (opts?.includeDeletedBy) {
+      query = query.select((eb) => this.withDeletedBy(eb));
+    }
+
    if (opts?.includeSpace) {
      query = query.select((eb) => this.withSpace(eb));
    }
@@ -1,4 +1,6 @@
-import { BadRequestException, Injectable } from '@nestjs/common';
+import { BadRequestException, Inject, Injectable } from '@nestjs/common';
+import { CACHE_MANAGER } from '@nestjs/cache-manager';
+import { Cache } from 'cache-manager';
 import { InjectKysely } from 'nestjs-kysely';
 import { KyselyDB, KyselyTransaction } from '@docmost/db/types/kysely.types';
 import { dbOrTx } from '@docmost/db/utils';
@@ -13,6 +15,11 @@ import { MemberInfo, UserSpaceRole } from './types';
 import { executeWithCursorPagination } from '@docmost/db/pagination/cursor-pagination';
 import { GroupRepo } from '@docmost/db/repos/group/group.repo';
 import { SpaceRepo } from '@docmost/db/repos/space/space.repo';
+import { withCache } from '../../../common/helpers/with-cache';
+import {
+  CacheKey,
+  PERMISSION_CACHE_TTL_MS,
+} from '../../../common/helpers/cache-keys';

@Injectable()
 export class SpaceMemberRepo {
@@ -20,6 +27,7 @@ export class SpaceMemberRepo {
    @InjectKysely() private readonly db: KyselyDB,
    private readonly groupRepo: GroupRepo,
    private readonly spaceRepo: SpaceRepo,
+    @Inject(CACHE_MANAGER) private readonly cacheManager: Cache,
  ) {}

  async insertSpaceMember(
@@ -214,25 +222,36 @@ export class SpaceMemberRepo {
    userId: string,
    spaceId: string,
  ): Promise<UserSpaceRole[]> {
-    const roles = await this.db
-      .selectFrom('spaceMembers')
-      .select(['userId', 'role'])
-      .where('userId', '=', userId)
-      .where('spaceId', '=', spaceId)
-      .unionAll(
-        this.db
+    return withCache(
+      this.cacheManager,
+      CacheKey.SPACE_ROLES(userId, spaceId),
+      PERMISSION_CACHE_TTL_MS,
+      async () => {
+        const roles = await this.db
          .selectFrom('spaceMembers')
-          .innerJoin('groupUsers', 'groupUsers.groupId', 'spaceMembers.groupId')
-          .select(['groupUsers.userId', 'spaceMembers.role'])
-          .where('groupUsers.userId', '=', userId)
-          .where('spaceMembers.spaceId', '=', spaceId),
-      )
-      .execute();
+          .select(['userId', 'role'])
+          .where('userId', '=', userId)
+          .where('spaceId', '=', spaceId)
+          .unionAll(
+            this.db
+              .selectFrom('spaceMembers')
+              .innerJoin(
+                'groupUsers',
+                'groupUsers.groupId',
+                'spaceMembers.groupId',
+              )
+              .select(['groupUsers.userId', 'spaceMembers.role'])
+              .where('groupUsers.userId', '=', userId)
+              .where('spaceMembers.spaceId', '=', spaceId),
+          )
+          .execute();

-    if (!roles || roles.length === 0) {
-      return undefined;
-    }
-    return roles;
+        if (!roles || roles.length === 0) {
+          return undefined;
+        }
+        return roles;
+      },
+    );
  }

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

@@ -162,6 +162,28 @@ export const Callout = Node.create<CalloutOptions>({
          return false;
        }

+        // Empty callout: delete the whole node so Backspace inside it isn't
+        // a no-op (isolating: true blocks the default join with the block
+        // above).
+        const calloutDepth = $from.depth - 1;
+        if (calloutDepth >= 0) {
+          const calloutNode = $from.node(calloutDepth);
+          if (
+            calloutNode.type === this.type &&
+            calloutNode.childCount === 1 &&
+            calloutNode.firstChild?.content.size === 0
+          ) {
+            const calloutPos = $from.before(calloutDepth);
+            const { tr } = state;
+            tr.delete(calloutPos, calloutPos + calloutNode.nodeSize);
+            tr.setSelection(
+              TextSelection.near(tr.doc.resolve(calloutPos), -1),
+            );
+            view.dispatch(tr);
+            return true;
+          }
+        }
+
        const previousPosition = $from.before($from.depth) - 1;

        // If nothing above to join with
@@ -207,6 +229,56 @@ export const Callout = Node.create<CalloutOptions>({
        }
        return false;
      },
+
+      // Exit the callout into a fresh paragraph below when the cursor sits
+      // in an empty trailing child. An empty callout (single empty
+      // paragraph) exits on the first Enter and keeps the empty callout
+      // intact; a callout with content needs the double-Enter pattern
+      // (first Enter splits, second Enter on the new trailing empty exits
+      // and removes that trailing paragraph).
+      Enter: ({ editor }) => {
+        const { state, view } = editor;
+        const { selection } = state;
+        if (!selection.empty) return false;
+
+        const { $from } = selection;
+        const calloutDepth = $from.depth - 1;
+        if (calloutDepth < 0) return false;
+
+        const calloutNode = $from.node(calloutDepth);
+        if (calloutNode.type !== this.type) return false;
+        if ($from.parent.content.size !== 0) return false;
+        if ($from.index(calloutDepth) !== calloutNode.childCount - 1) {
+          return false;
+        }
+
+        const paragraphType = state.schema.nodes.paragraph;
+        const containerDepth = calloutDepth - 1;
+        const container = $from.node(containerDepth);
+        const indexAfter = $from.indexAfter(containerDepth);
+        if (
+          !container.canReplaceWith(indexAfter, indexAfter, paragraphType)
+        ) {
+          return false;
+        }
+
+        const calloutEnd = $from.after(calloutDepth);
+        const paragraph = paragraphType.create();
+        const { tr } = state;
+
+        if (calloutNode.childCount === 1) {
+          tr.insert(calloutEnd, paragraph);
+          tr.setSelection(TextSelection.create(tr.doc, calloutEnd + 1));
+        } else {
+          tr.delete($from.before(), $from.after());
+          const insertPos = tr.mapping.map(calloutEnd);
+          tr.insert(insertPos, paragraph);
+          tr.setSelection(TextSelection.create(tr.doc, insertPos + 1));
+        }
+
+        view.dispatch(tr);
+        return true;
+      },
    };
  },

@@ -1,5 +1,7 @@
 import type { CodeBlockOptions } from '@tiptap/extension-code-block';
 import CodeBlock from '@tiptap/extension-code-block';
+import { Plugin, Selection, TextSelection } from '@tiptap/pm/state';
+import { GapCursor } from '@tiptap/pm/gapcursor';

 import { LowlightPlugin } from './lowlight-plugin.js';
 import { ReactNodeViewRenderer } from '@tiptap/react';
@@ -19,7 +21,11 @@ const TAB_CHAR = '\u00A0\u00A0';
 * @see https://tiptap.dev/api/nodes/code-block-lowlight
 */
 export const CustomCodeBlock = CodeBlock.extend<CodeBlockLowlightOptions>({
+  // Run ahead of Gapcursor (100) so the mermaid arrow-into-source plugin
+  // can intercept before gapcursor takes over.
+  priority: 101,
  selectable: true,
+  isolating: true,

  addOptions() {
    return {
@@ -35,8 +41,86 @@ export const CustomCodeBlock = CodeBlock.extend<CodeBlockLowlightOptions>({
  },

  addKeyboardShortcuts() {
+    const isMermaid = (node: any) =>
+      node?.type === this.type && node.attrs.language === 'mermaid';
+
    return {
      ...this.parent?.(),
+      // Stop at the gap (or enter mermaid source) instead of jumping
+      // straight into the next block, so the user can place a cursor
+      // between two adjacent isolating blocks.
+      ArrowDown: ({ editor }) => {
+        const { state } = editor;
+        const { selection, doc } = state;
+        const { $from, empty } = selection;
+
+        if (!empty || $from.parent.type !== this.type) return false;
+        if ($from.parentOffset !== $from.parent.nodeSize - 2) return false;
+
+        const after = $from.after();
+        if (after >= doc.content.size) {
+          return editor.commands.exitCode();
+        }
+
+        const $after = doc.resolve(after);
+        const nodeAfter = $after.nodeAfter;
+
+        if (isMermaid(nodeAfter)) {
+          return editor.commands.command(({ tr }) => {
+            tr.setSelection(TextSelection.create(tr.doc, after + 1));
+            return true;
+          });
+        }
+
+        if (
+          nodeAfter?.type.spec.isolating &&
+          !nodeAfter.type.spec.atom
+        ) {
+          return editor.commands.command(({ tr }) => {
+            tr.setSelection(new GapCursor(tr.doc.resolve(after)));
+            return true;
+          });
+        }
+
+        return editor.commands.command(({ tr }) => {
+          tr.setSelection(Selection.near(tr.doc.resolve(after)));
+          return true;
+        });
+      },
+      // Mirror of ArrowDown; upstream has no ArrowUp handler.
+      ArrowUp: ({ editor }) => {
+        const { state } = editor;
+        const { selection, doc } = state;
+        const { $from, empty } = selection;
+
+        if (!empty || $from.parent.type !== this.type) return false;
+        if ($from.parentOffset !== 0) return false;
+
+        const before = $from.before();
+        if (before <= 0) return false;
+
+        const $before = doc.resolve(before);
+        const nodeBefore = $before.nodeBefore;
+
+        if (isMermaid(nodeBefore)) {
+          return editor.commands.command(({ tr }) => {
+            tr.setSelection(TextSelection.create(tr.doc, before - 1));
+            return true;
+          });
+        }
+
+        if (
+          nodeBefore?.type.spec.isolating &&
+          !nodeBefore.type.spec.atom
+        ) {
+          return editor.commands.command(({ tr }) => {
+            tr.setSelection(new GapCursor(tr.doc.resolve(before)));
+            return true;
+          });
+        }
+
+        return false;
+      },
      'Mod-a': () => {
        if (this.editor.isActive('codeBlock')) {
          const { state } = this.editor;
@@ -84,6 +168,7 @@ export const CustomCodeBlock = CodeBlock.extend<CodeBlockLowlightOptions>({
  },

  addProseMirrorPlugins() {
+    const codeBlockType = this.type;
    return [
      ...(this.parent?.() || []),
      LowlightPlugin({
@@ -91,6 +176,60 @@ export const CustomCodeBlock = CodeBlock.extend<CodeBlockLowlightOptions>({
        lowlight: this.options.lowlight,
        defaultLanguage: this.options.defaultLanguage,
      }),
+      // Mermaid hides its <pre> when unselected, so the browser's native
+      // vertical caret movement skips past it. Land the cursor inside the
+      // source explicitly.
+      new Plugin({
+        props: {
+          handleKeyDown: (view, event) => {
+            if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') {
+              return false;
+            }
+            const { state } = view;
+            const { selection } = state;
+            if (
+              !selection.empty ||
+              !(selection instanceof TextSelection)
+            ) {
+              return false;
+            }
+            const { $from } = selection;
+            if ($from.depth === 0 || $from.parent.type === codeBlockType) {
+              return false;
+            }
+            const dir = event.key === 'ArrowUp' ? 'up' : 'down';
+            if (!view.endOfTextblock(dir)) return false;
+
+            const isMermaid = (node: any) =>
+              node?.type === codeBlockType && node.attrs.language === 'mermaid';
+
+            if (event.key === 'ArrowUp') {
+              if ($from.parentOffset !== 0) return false;
+              const beforePos = $from.before();
+              const prev = state.doc.resolve(beforePos).nodeBefore;
+              if (!isMermaid(prev)) return false;
+              const endPos = beforePos - 1;
+              view.dispatch(
+                state.tr.setSelection(
+                  TextSelection.create(state.doc, endPos),
+                ),
+              );
+              return true;
+            }
+            if ($from.parentOffset !== $from.parent.nodeSize - 2) return false;
+            const afterPos = $from.after();
+            const next = state.doc.resolve(afterPos).nodeAfter;
+            if (!isMermaid(next)) return false;
+            const startPos = afterPos + 1;
+            view.dispatch(
+              state.tr.setSelection(
+                TextSelection.create(state.doc, startPos),
+              ),
+            );
+            return true;
+          },
+        },
+      }),
    ];
  },
 });
@@ -0,0 +1 @@
+export * from "./page-break";
@@ -0,0 +1,60 @@
+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(),
+    };
+  },
+});
@@ -1,76 +0,0 @@
-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;
-        }
-    }
-}
@@ -1,316 +1,393 @@
 import { Editor, Extension } from "@tiptap/core";
-import { PluginKey, Plugin, PluginSpec } from "@tiptap/pm/state";
+import { PluginKey, Plugin, PluginSpec, TextSelection, Transaction } from "@tiptap/pm/state";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
 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 const TableDndKey = new PluginKey("table-drag-and-drop");
+export interface TableHandleState {
+  hoveringCell: HoveringCellInfo | null;
+  tableNode: ProseMirrorNode | null;
+  tablePos: number | null;
+  dragging: { orientation: "col" | "row"; index: number } | null;
+  frozen: boolean;
+}

-class TableDragHandlePluginSpec implements PluginSpec<void> {
+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> {
  key = TableDndKey;
-  props: EditorProps<Plugin<void>>;
+  props: EditorProps<Plugin<TableHandleState>>;
+
+  private _previewController: PreviewController;
+  private _dropIndicatorController: DropIndicatorController;

-  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 | 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;
+  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;
+    },
+  };

  constructor(public editor: Editor) {
    this.props = {
      handleDOMEvents: {
-        pointerover: this._pointerOver,
+        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,
      },
    };

-    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
-    wrapper.appendChild(this._colDragHandle);
-    //@ts-ignore
-    wrapper.appendChild(this._rowDragHandle);
-    //@ts-ignore
+    // @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._autoScrollController.stop();
-
-    this._disposables.forEach((disposable) => disposable());
+    this._disposables.forEach((d) => d());
  };

-  private _pointerOver = (view: EditorView, event: PointerEvent) => {
-    if (this._dragging) return;
+  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;

-    // Don't show drag handles in readonly mode
    if (!this.editor.isEditable) {
-      this._dragHandleController.hide();
+      if (current?.hoveringCell == null && current?.tableNode == null && current?.tablePos == null) return;
+      this._dispatchMeta({ hoveringCell: null, tableNode: null, tablePos: null });
      return;
    }

    const hoveringCell = getHoveringCell(view, event);
-    this._hoveringCell = hoveringCell;
-    if (!hoveringCell) {
-      this._dragHandleController.hide();
-    } else {
-      this._dragHandleController.show(this.editor, hoveringCell);
+    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;
    }
+
+    // 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 _onDragColStart = (event: DragEvent) => {
-    this._onDragStart(event, "col");
+  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 _onDraggingCol = (event: DragEvent) => {
+  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) => {
    const draggingDOMs = this._draggingDOMs;
-    if (!draggingDOMs) return;
+    if (!draggingDOMs || !this._dragging) return;

-    this._draggingCoords = { x: event.clientX, y: event.clientY };
-    this._previewController.onDragging(
-      draggingDOMs,
-      this._draggingCoords.x,
-      this._draggingCoords.y,
-      "col",
-    );
+    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._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,
-    );
+    this._previewController.onDragging(draggingDOMs, clientX, clientY, "row");
+    const direction = this._startCoords.y > clientY ? "up" : "down";
+    const dragOverRow = getDragOverRow(draggingDOMs.table, clientY);
    if (!dragOverRow) return;
-
    const [row, index] = dragOverRow;
    this._droppingIndex = index;
    this._dropIndicatorController.onDragging(row, direction, "row");
  };

-  private _onDragEnd = () => {
-    this._dragging = false;
-    this._draggingIndex = -1;
-    this._droppingIndex = -1;
-    this._startCoords = { x: 0, y: 0 };
-    this._autoScrollController.stop();
-    this._dropIndicatorController.onDragEnd();
-    this._previewController.onDragEnd();
-  };
-
-  private _bindDragEvents = () => {
-    this._colDragHandle.addEventListener("dragstart", this._onDragColStart);
-    this._disposables.push(() => {
-      this._colDragHandle.removeEventListener(
-        "dragstart",
-        this._onDragColStart,
-      );
-    });
-
-    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 = () => {
+  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") {
-      const canMove = moveColumn({
-        tr,
-        originIndex: from,
-        targetIndex: to,
-        select: true,
-        pos,
-      });
-      if (canMove) {
+      if (moveColumn({ tr, originIndex: from, targetIndex: to, select: true, pos })) {
        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;
+    if (moveRow({ tr, originIndex: from, targetIndex: to, select: true, pos })) {
+      this.editor.view.dispatch(tr);
    }
  };
+
+  endDrag = () => {
+    this._dragging = false;
+    this._draggingIndex = -1;
+    this._droppingIndex = -1;
+    this._startCoords = { x: 0, y: 0 };
+    this._draggingDOMs = undefined;
+    this._dropIndicatorController.onDragEnd();
+    this._previewController.onDragEnd();
+    this._dispatchMeta({ dragging: null });
+  };
+}
+
+export type { TableHandlePluginSpec };
+
+// 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;
 }

 export const TableDndExtension = Extension.create({
  name: "table-drag-and-drop",
  addProseMirrorPlugins() {
    const editor = this.editor;
-
-    const dragHandlePluginSpec = new TableDragHandlePluginSpec(editor);
-    const dragHandlePlugin = new Plugin(dragHandlePluginSpec);
-
-    return [dragHandlePlugin];
+    const spec = new TableHandlePluginSpec(editor);
+    return [new Plugin(spec)];
  },
 });
+
+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;
+    };
+  }
+}
@@ -1,105 +0,0 @@
-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`,
-                });
-            })
-    }
-}
@@ -1,21 +0,0 @@
-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();
-    }
-}
@@ -1 +1,7 @@
-export * from './dnd-extension'
+export {
+  TableDndExtension,
+  TableHandleCommandsExtension,
+  TableDndKey,
+  getTableHandlePluginSpec,
+} from "./dnd-extension";
+export type { TableHandleState, TableHandlePluginSpec } from "./dnd-extension";
@@ -1,4 +1,4 @@
-import { computePosition, offset, ReferenceElement } from "@floating-ui/dom";
+import { computePosition, offset, shift, 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.cell, type);
+        this._initPreviewPosition(relatedDoms.table, 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.cell, type);
+        this._updatePreviewPosition(x, y, relatedDoms.table, relatedDoms.cell, type);
    }

    destroy = () => {
@@ -60,7 +60,7 @@ export class PreviewController {
        }
    }

-    private _initPreviewPosition(cell: HTMLElement, type: 'col' | 'row') {
+    private _initPreviewPosition(table: HTMLElement, cell: HTMLElement, type: 'col' | 'row') {
        void computePosition(cell, this._preview, {
            placement: type === 'row' ? 'right' : 'bottom',
            middleware: [
@@ -70,6 +70,7 @@ export class PreviewController {
                    }
                    return -rects.reference.width
                }),
+                shift({ boundary: table, padding: 0 }),
            ],
        }).then(({ x, y }) => {
            Object.assign(this._preview.style, {
@@ -79,11 +80,20 @@ export class PreviewController {
        });
    }

-    private _updatePreviewPosition(x: number, y: number, cell: HTMLElement, type: 'col' | 'row') {
+    // 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') {
        computePosition(
            getVirtualElement(cell, x, y),
            this._preview,
-            { placement: type === 'row' ? 'right' : 'bottom' },
+            {
+                placement: type === 'row' ? 'right' : 'bottom',
+                middleware: [shift({ boundary: table, padding: 0 })],
+            },
        ).then(({ x, y }) => {
            if (type === 'row') {
                Object.assign(this._preview.style, {
@@ -1,4 +1,5 @@
 import { cellAround, TableMap } from "@tiptap/pm/tables"
+import { ResolvedPos } from "@tiptap/pm/model"
 import { EditorView } from "@tiptap/pm/view"

 export function getHoveringCell(
@@ -8,19 +9,30 @@ export function getHoveringCell(
  const domCell = domCellAround(event.target as HTMLElement | null)
  if (!domCell) return

-  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))
+  // 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))
  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)
@@ -0,0 +1,186 @@
+// 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);
+}
@@ -0,0 +1,78 @@
+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;
+            },
+          };
+        },
+      }),
+    ];
+  },
+});
@@ -0,0 +1 @@
+export { TableHeaderPin } from './extension';
@@ -0,0 +1,65 @@
+// 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`,
+    );
+  },
+};
@@ -3,3 +3,13 @@ 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";
@@ -0,0 +1,233 @@
+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);
+              }
+            },
+          };
+        },
+      }),
+    ];
+  },
+});
@@ -0,0 +1,158 @@
+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;
+  }
+}
@@ -1,6 +1,8 @@
 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"];

@@ -32,9 +34,36 @@ 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")) {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philipinho	58ada5a1b4	fix callout	2026-05-15 01:45:33 +01:00
Philipinho	0ae407839f	fix codeblock/mermaid gap cursor	2026-05-14 23:23:20 +01:00
Philipinho	d524073d86	fix: editor ready check	2026-05-14 18:40:03 +01:00
Philipinho	5c5fff517c	fix code splitting	2026-05-14 18:05:39 +01:00
Philipinho	3115c5e097	fix table	2026-05-14 18:04:25 +01:00
Philipinho	03c1e8c4ed	fix collab module	2026-05-14 15:06:51 +01:00
Philipinho	e41518a93d	fix type	2026-05-14 14:49:02 +01:00
Peter Tripp	932c1ad5b7	Better trash (#2190 ) * Better trash I recently lost a bunch of time editing and searching for pages that were actually in the Trash. Docmost intentionally tries to not link to Trashed pages, but the url of that Trashed page and any inbound links still work. This makes it clearer when a page you are interacting with is in the Trash. - /trash - Refactored banner into `trash-banner.tsx` - Refactored "Restore" modal into `use-restore-page-modal.tsx` - Page (when isDeleted) - Add: `trash-banner.tsx` - Add breadcrumbs: `Parent / Child / Page (Deleted)` - Change: Deleted Pages are read-only - Replace "Move to Trash" with "Restore" in page menu (invokes `use-restore-page-modal`) I tried very hard to keep this simple and re-use existing translation strings wherever possible. * cleanup --------- Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>	2026-05-14 14:41:10 +01:00
Julien Fontanet	82d065669d	fix: page mode toggle no longer overwrites default preference (#1996 ) The header edit/read toggle now controls only the current session's mode without saving it as the user's preference. The saved preference (set in profile settings) is applied once on initial load and sticks across page navigations within the session, so navigating to a new page no longer resets the mode mid-session. Fixes #1693	2026-05-14 13:15:03 +01:00
Philip Okugbe	f758091b2a	perf(permissions): cache space role and page edit lookups (#2208 )	2026-05-14 13:11:28 +01:00
Philip Okugbe	f4af4c3fc0	feat(editor): add page break node (#2202 )	2026-05-14 03:48:13 +01:00
Philipinho	3b983a27f6	sync	2026-05-14 03:01:55 +01:00
Philip Okugbe	299a9ca3c8	fix: bug fixes (#2201 ) * fix(editor): hide transclusion borders and reset spacing in read-only mode * feat(share): add full width toggle for shared pages * feat(share): support resizing sidebar on shared pages * fix: auto redirect if there is only one SSO provider. - fix tighten sso redirect - fix share tree margin * sync * package overrides	2026-05-14 02:54:00 +01:00
Philip Okugbe	cea9be7926	feat: table enhancement (#2191 )	2026-05-14 00:37:44 +01:00
				`@@ -0,0 +1 @@`
				`export { TableHeaderPin } from './extension';`