Merge branch 'main' into base-formula

apps/client/src/features/auth/components/auth-layout.tsx

@@ -20,7 +20,7 @@ export function AuthLayout({ children }: AuthLayoutProps) {
           Docmost
         </Text>
       </Group>
-      {children}
+      <main>{children}</main>
     </>
   );
 }

apps/client/src/features/auth/components/invite-sign-up-form.tsx

@@ -103,6 +103,11 @@ export function InviteSignUpForm() {
                 placeholder={t("Your password")}
                 variant="filled"
                 mt="md"
+                visibilityToggleButtonProps={{
+                  "aria-label": t("Toggle password visibility"),
+                  "aria-hidden": false,
+                  tabIndex: 0,
+                }}
                 {...form.getInputProps("password")}
               />
               <Button type="submit" fullWidth mt="xl" loading={isLoading}>

apps/client/src/features/auth/components/login-form.tsx

@@ -54,6 +54,13 @@ export function LoginForm() {
     await signIn(data);
   }
 
+  function handleValidationFailure(errors: Record<string, unknown>) {
+    const firstInvalidId = Object.keys(errors)[0];
+    if (firstInvalidId) {
+      document.getElementById(firstInvalidId)?.focus();
+    }
+  }
+
   if (isDataLoading) {
    return null;
   }
@@ -66,7 +73,7 @@ export function LoginForm() {
     <AuthLayout>
       <Container size={420} className={classes.container}>
         <Box p="xl" className={classes.containerBox}>
-          <Title order={2} ta="center" fw={500} mb="md">
+          <Title order={1} size="h2" ta="center" fw={500} mb="md">
             {t("Login")}
           </Title>
 
@@ -74,21 +81,31 @@ export function LoginForm() {
 
           {!data?.enforceSso && (
             <>
-              <form onSubmit={form.onSubmit(onSubmit)}>
+              <form onSubmit={form.onSubmit(onSubmit, handleValidationFailure)}>
                 <TextInput
                   id="email"
                   type="email"
                   label={t("Email")}
                   placeholder="email@example.com"
                   variant="filled"
+                  autoComplete="email"
+                  errorProps={{ role: "alert" }}
                   {...form.getInputProps("email")}
                 />
 
                 <PasswordInput
+                  id="password"
                   label={t("Password")}
                   placeholder={t("Your password")}
                   variant="filled"
                   mt="md"
+                  autoComplete="current-password"
+                  errorProps={{ role: "alert" }}
+                  visibilityToggleButtonProps={{
+                    "aria-label": t("Toggle password visibility"),
+                    "aria-hidden": false,
+                    tabIndex: 0,
+                  }}
                   {...form.getInputProps("password")}
                 />
 

apps/client/src/features/auth/components/password-reset-form.tsx

@@ -52,6 +52,11 @@ export function PasswordResetForm({ resetToken }: PasswordResetFormProps) {
             placeholder={t("Your new password")}
             variant="filled"
             mt="md"
+            visibilityToggleButtonProps={{
+              "aria-label": t("Toggle password visibility"),
+              "aria-hidden": false,
+              tabIndex: 0,
+            }}
             {...form.getInputProps("newPassword")}
           />
 

apps/client/src/features/auth/components/setup-workspace-form.tsx

@@ -98,6 +98,11 @@ export function SetupWorkspaceForm() {
               placeholder={t("Enter a strong password")}
               variant="filled"
               mt="md"
+              visibilityToggleButtonProps={{
+                "aria-label": t("Toggle password visibility"),
+                "aria-hidden": false,
+                tabIndex: 0,
+              }}
               {...form.getInputProps("password")}
             />
             <Button type="submit" fullWidth mt="xl" loading={isLoading}>

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

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

apps/client/src/features/comment/components/comment-dialog.tsx

@@ -144,6 +144,7 @@ function CommentDialog({ editor, pageId, readOnly }: CommentDialogProps) {
       withCloseButton
       withBorder
       data-comment-dialog
+      aria-label={t("Add comment")}
     >
       <Stack gap={2}>
         <Group>

apps/client/src/features/comment/components/comment-editor.tsx

@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next";
 import EmojiCommand from "@/features/editor/extensions/emoji-command";
 import mentionRenderItems from "@/features/editor/components/mention/mention-suggestion";
 import MentionView from "@/features/editor/components/mention/mention-view";
+import { platformModifierKey } from "@/lib";
 
 interface CommentEditorProps {
   defaultContent?: any;
@@ -18,6 +19,7 @@ interface CommentEditorProps {
   editable: boolean;
   placeholder?: string;
   autofocus?: boolean;
+  surface?: "default" | "muted";
 }
 
 const CommentEditor = forwardRef(
@@ -29,6 +31,7 @@ const CommentEditor = forwardRef(
       editable,
       placeholder,
       autofocus,
+      surface,
     }: CommentEditorProps,
     ref,
   ) => {
@@ -65,6 +68,9 @@ const CommentEditor = forwardRef(
         }),
       ],
       editorProps: {
+        attributes: {
+          "aria-label": placeholder || t("Comment"),
+        },
         handleDOMEvents: {
           keydown: (_view, event) => {
             if (
@@ -83,7 +89,7 @@ const CommentEditor = forwardRef(
               }
             }
 
-            if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+            if (platformModifierKey(event) && event.code === "Enter") {
               event.preventDefault();
               if (onSave) onSave();
 
@@ -130,6 +136,7 @@ const CommentEditor = forwardRef(
         ref={focusRef}
         className={classes.commentEditor}
         data-editable={editable || undefined}
+        data-surface={surface}
       >
         <EditorContent
           editor={commentEditor}

apps/client/src/features/comment/components/comment-list-item.tsx

@@ -173,6 +173,15 @@ function CommentListItem({
           <Box
             className={classes.textSelection}
             onClick={() => handleCommentClick(comment)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleCommentClick(comment);
+              }
+            }}
+            role="button"
+            tabIndex={0}
+            aria-label={t("Jump to comment selection")}
           >
             <Text size="sm">{comment?.selection}</Text>
           </Box>

apps/client/src/features/comment/components/comment-list-with-tabs.tsx

@@ -383,6 +383,7 @@ const PageCommentInput = ({ onSave, isLoading }) => {
             onSave={handleSave}
             editable={true}
             placeholder={t("Add a comment...")}
+            surface="muted"
           />
         </div>
       </Group>
@@ -391,6 +392,7 @@ const PageCommentInput = ({ onSave, isLoading }) => {
           variant="filled"
           radius="xl"
           size="sm"
+          aria-label={t("Send comment")}
           onClick={handleSave}
           onMouseDown={(e) => e.preventDefault()}
           loading={isLoading}

apps/client/src/features/comment/components/comment-menu.tsx

@@ -46,7 +46,11 @@ function CommentMenu({
   return (
     <Menu shadow="md" width={200}>
       <Menu.Target>
-        <ActionIcon variant="default" style={{ border: "none" }}>
+        <ActionIcon
+          variant="default"
+          style={{ border: "none" }}
+          aria-label={t("Comment menu")}
+        >
           <IconDots size={20} stroke={2} />
         </ActionIcon>
       </Menu.Target>

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

@@ -22,6 +22,11 @@
 
 .commentEditor {
 
+    &[data-editable][data-surface="muted"] .ProseMirror:not(.focused) {
+        border-radius: var(--mantine-radius-sm);
+        box-shadow: 0 0 0 1px light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-4));
+    }
+
     .focused {
         border-radius: var(--mantine-radius-sm);
         box-shadow: 0 0 0 2px var(--mantine-color-blue-3);

apps/client/src/features/editor/atoms/editor-atoms.ts

@@ -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);

apps/client/src/features/editor/components/attachment/upload-attachment-action.tsx

@@ -19,7 +19,9 @@ export const uploadAttachmentAction = handleAttachmentUpload({
   },
   validateFn: (file, allowMedia: boolean) => {
     if (
-      (file.type.includes("image/") || file.type.includes("video/")) &&
+      (file.type.includes("image/") ||
+        file.type.includes("video/") ||
+        file.type === "application/pdf") &&
       !allowMedia
     ) {
       return false;

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

@@ -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);

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

@@ -36,6 +36,7 @@ export default function AudioView(props: NodeViewProps) {
             preload="metadata"
             controls
             src={safeSrc}
+            aria-label={placeholder?.name || t("Audio")}
           />
         )}
         {!safeSrc && previewSrc && (
@@ -45,6 +46,7 @@ export default function AudioView(props: NodeViewProps) {
               preload="metadata"
               controls
               src={previewSrc}
+              aria-label={placeholder?.name || t("Audio")}
             />
             <Loader size={20} pos="absolute" top={6} right={6} />
           </Group>
@@ -60,7 +62,7 @@ export default function AudioView(props: NodeViewProps) {
           </Group>
         )}
         {!safeSrc && !previewSrc && !placeholder && (
-          <audio className={classes.audio} controls />
+          <audio className={classes.audio} controls aria-label={t("Audio")} />
         )}
       </div>
     </NodeViewWrapper>

apps/client/src/features/editor/components/bubble-menu/bubble-menu.module.css

@@ -28,6 +28,18 @@
   }
 }
 
+.colorSwatch:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--mantine-color-blue-6);
+  position: relative;
+  z-index: 1;
+}
+
+.removeColor:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--mantine-color-blue-6);
+}
+
 .buttonRoot {
   height: 34px;
   padding-left: rem(8);

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

@@ -27,7 +27,7 @@ import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
 import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector.tsx";
 import { useTranslation } from "react-i18next";
 import { showAiMenuAtom, showLinkMenuAtom } from "@/features/editor/atoms/editor-atoms";
-import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
+import { userAtom, workspaceAtom } from "@/features/user/atoms/current-user-atom";
 
 export interface BubbleMenuItem {
   name: string;
@@ -46,6 +46,9 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
   const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
   const workspace = useAtomValue(workspaceAtom);
   const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
+  const user = useAtomValue(userAtom);
+  const editorToolbarEnabled =
+    user?.settings?.preferences?.editorToolbar ?? false;
   const [, setDraftCommentId] = useAtom(draftCommentIdAtom);
   const showCommentPopupRef = useRef(showCommentPopup);
   const showAiMenuRef = useRef(showAiMenu);
@@ -149,7 +152,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
       return isTextSelected(editor);
     },
     options: {
-      placement: "top",
+      placement: editorToolbarEnabled ? "bottom" : "top",
       offset: 8,
       onHide: () => {
         setIsNodeSelectorOpen(false);
@@ -188,56 +191,60 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             <div className={classes.divider} />
           </>
         )}
-        <NodeSelector
-          editor={props.editor}
-          isOpen={isNodeSelectorOpen}
-          setIsOpen={() => {
-            setIsNodeSelectorOpen(!isNodeSelectorOpen);
-            setIsTextAlignmentOpen(false);
-            setIsColorSelectorOpen(false);
-          }}
-        />
+        {!editorToolbarEnabled && (
+          <>
+            <NodeSelector
+              editor={props.editor}
+              isOpen={isNodeSelectorOpen}
+              setIsOpen={() => {
+                setIsNodeSelectorOpen(!isNodeSelectorOpen);
+                setIsTextAlignmentOpen(false);
+                setIsColorSelectorOpen(false);
+              }}
+            />
 
-        <TextAlignmentSelector
-          editor={props.editor}
-          isOpen={isTextAlignmentSelectorOpen}
-          setIsOpen={() => {
-            setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
-            setIsNodeSelectorOpen(false);
-            setIsColorSelectorOpen(false);
-          }}
-        />
+            <TextAlignmentSelector
+              editor={props.editor}
+              isOpen={isTextAlignmentSelectorOpen}
+              setIsOpen={() => {
+                setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
+                setIsNodeSelectorOpen(false);
+                setIsColorSelectorOpen(false);
+              }}
+            />
 
-        <ActionIcon.Group>
-          {items.map((item, index) => (
-            <Tooltip key={index} label={t(item.name)} withArrow>
-              <ActionIcon
-                key={index}
-                variant="default"
-                size="lg"
-                radius="0"
-                aria-label={t(item.name)}
-                className={clsx({ [classes.active]: item.isActive() })}
-                style={{ border: "none" }}
-                onClick={item.command}
-              >
-                <item.icon style={{ width: rem(16) }} stroke={2} />
-              </ActionIcon>
-            </Tooltip>
-          ))}
-        </ActionIcon.Group>
+            <ActionIcon.Group>
+              {items.map((item, index) => (
+                <Tooltip key={index} label={t(item.name)} withArrow>
+                  <ActionIcon
+                    key={index}
+                    variant="default"
+                    size="lg"
+                    radius="0"
+                    aria-label={t(item.name)}
+                    className={clsx({ [classes.active]: item.isActive() })}
+                    style={{ border: "none" }}
+                    onClick={item.command}
+                  >
+                    <item.icon style={{ width: rem(16) }} stroke={2} />
+                  </ActionIcon>
+                </Tooltip>
+              ))}
+            </ActionIcon.Group>
 
-        <LinkSelector />
+            <LinkSelector />
 
-        <ColorSelector
-          editor={props.editor}
-          isOpen={isColorSelectorOpen}
-          setIsOpen={() => {
-            setIsColorSelectorOpen(!isColorSelectorOpen);
-            setIsNodeSelectorOpen(false);
-            setIsTextAlignmentOpen(false);
-          }}
-        />
+            <ColorSelector
+              editor={props.editor}
+              isOpen={isColorSelectorOpen}
+              setIsOpen={() => {
+                setIsColorSelectorOpen(!isColorSelectorOpen);
+                setIsNodeSelectorOpen(false);
+                setIsTextAlignmentOpen(false);
+              }}
+            />
+          </>
+        )}
 
         <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
           <ActionIcon

apps/client/src/features/editor/components/bubble-menu/color-selector.tsx

@@ -4,7 +4,6 @@ import {
   Button,
   Popover,
   rem,
-  ScrollArea,
   Text,
   Tooltip,
   SimpleGrid,
@@ -114,6 +113,63 @@ const HIGHLIGHT_COLORS: BubbleColorMenuItem[] = [
   },
 ];
 
+const COLOR_GRID_COLS = 5;
+
+function focusSwatch(grid: "text" | "highlight", index: number) {
+  const el = document.querySelector<HTMLElement>(
+    `[data-color-grid="${grid}"][data-color-index="${index}"]`,
+  );
+  el?.focus();
+}
+
+function handleColorKeyNav(
+  e: React.KeyboardEvent<HTMLDivElement>,
+  index: number,
+  grid: "text" | "highlight",
+) {
+  const cols = COLOR_GRID_COLS;
+  const total =
+    grid === "text" ? TEXT_COLORS.length : HIGHLIGHT_COLORS.length;
+  const col = index % cols;
+
+  if (e.key === "ArrowRight") {
+    e.preventDefault();
+    if (index < total - 1) focusSwatch(grid, index + 1);
+    return;
+  }
+  if (e.key === "ArrowLeft") {
+    e.preventDefault();
+    if (index > 0) focusSwatch(grid, index - 1);
+    return;
+  }
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    const next = index + cols;
+    if (next < total) {
+      focusSwatch(grid, next);
+    } else if (grid === "text") {
+      focusSwatch("highlight", Math.min(col, HIGHLIGHT_COLORS.length - 1));
+    } else if (grid === "highlight") {
+      document
+        .querySelector<HTMLElement>('[data-color-grid="remove"]')
+        ?.focus();
+    }
+    return;
+  }
+  if (e.key === "ArrowUp") {
+    e.preventDefault();
+    const prev = index - cols;
+    if (prev >= 0) {
+      focusSwatch(grid, prev);
+    } else if (grid === "highlight") {
+      const lastRowStart =
+        Math.floor((TEXT_COLORS.length - 1) / cols) * cols;
+      focusSwatch("text", Math.min(lastRowStart + col, TEXT_COLORS.length - 1));
+    }
+    return;
+  }
+}
+
 export const ColorSelector: FC<ColorSelectorProps> = ({
   editor,
   isOpen,
@@ -157,13 +213,20 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
   );
 
   return (
-    <Popover width={220} opened={isOpen} withArrow>
+    <Popover
+      width={220}
+      opened={isOpen}
+      onChange={setIsOpen}
+      trapFocus
+      withArrow
+    >
       <Popover.Target>
         <Tooltip label={t("Text color")} withArrow>
           <Button
             variant="default"
             radius="0"
             rightSection={<IconChevronDown size={16} />}
+            onMouseDown={(e) => e.preventDefault()}
             onClick={() => setIsOpen(!isOpen)}
             data-text-color={activeColorItem?.color || ""}
             data-highlight-color={activeHighlightItem?.color || ""}
@@ -172,34 +235,54 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
               fontWeight: 500,
               fontSize: rem(16),
             }}
+            aria-label={t("Text color")}
+            aria-haspopup="dialog"
+            aria-expanded={isOpen}
           >
             A
           </Button>
         </Tooltip>
       </Popover.Target>
 
-      <Popover.Dropdown>
-        <ScrollArea.Autosize type="scroll" mah="400">
-          <Stack gap="md">
+      <Popover.Dropdown onMouseDown={(e) => e.preventDefault()}>
+        <Stack gap="md" p="2px">
             <Box>
               <Text size="sm" fw={600} mb="xs">
                 {t("Text color")}
               </Text>
               <SimpleGrid cols={5} spacing="xs">
-                {TEXT_COLORS.map(({ name, color }, index) => (
+                {TEXT_COLORS.map(({ name, color }, index) => {
+                  const applyTextColor = () => {
+                    if (name === "Default") {
+                      editor.commands.unsetColor();
+                    } else {
+                      editor
+                        .chain()
+                        .focus()
+                        .setColor(color || "")
+                        .run();
+                    }
+                    setIsOpen(false);
+                  };
+                  return (
                   <Tooltip key={index} label={t(name)} withArrow>
                     <Box
-                      onClick={() => {
-                        if (name === "Default") {
-                          editor.commands.unsetColor();
-                        } else {
-                          editor
-                            .chain()
-                            .focus()
-                            .setColor(color || "")
-                            .run();
+                      role="button"
+                      tabIndex={0}
+                      data-autofocus={index === 0 ? true : undefined}
+                      data-color-grid="text"
+                      data-color-index={index}
+                      className={classes.colorSwatch}
+                      aria-label={t(name)}
+                      aria-pressed={!!editorState[`text_${color}`]}
+                      onClick={applyTextColor}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          applyTextColor();
+                          return;
                         }
-                        setIsOpen(false);
+                        handleColorKeyNav(e, index, "text");
                       }}
                       style={{
                         width: rem(28),
@@ -221,7 +304,8 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                       A
                     </Box>
                   </Tooltip>
-                ))}
+                  );
+                })}
               </SimpleGrid>
             </Box>
 
@@ -230,23 +314,40 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                 {t("Highlight color")}
               </Text>
               <SimpleGrid cols={5} spacing="xs">
-                {HIGHLIGHT_COLORS.map(({ name, color }, index) => (
+                {HIGHLIGHT_COLORS.map(({ name, color }, index) => {
+                  const applyHighlight = () => {
+                    if (name === "Default") {
+                      editor.commands.unsetHighlight();
+                    } else {
+                      editor
+                        .chain()
+                        .focus()
+                        .toggleMark("highlight", {
+                          color: color || "",
+                          colorName: name.toLowerCase() || "",
+                        })
+                        .run();
+                    }
+                    setIsOpen(false);
+                  };
+                  return (
                   <Tooltip key={index} label={t(name)} withArrow>
                     <Box
-                      onClick={() => {
-                        if (name === "Default") {
-                          editor.commands.unsetHighlight();
-                        } else {
-                          editor
-                            .chain()
-                            .focus()
-                            .toggleMark("highlight", {
-                              color: color || "",
-                              colorName: name.toLowerCase() || "",
-                            })
-                            .run();
+                      role="button"
+                      tabIndex={0}
+                      data-color-grid="highlight"
+                      data-color-index={index}
+                      className={classes.colorSwatch}
+                      aria-label={t(name)}
+                      aria-pressed={!!editorState[`highlight_${color}`]}
+                      onClick={applyHighlight}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          applyHighlight();
+                          return;
                         }
-                        setIsOpen(false);
+                        handleColorKeyNav(e, index, "highlight");
                       }}
                       style={{
                         width: rem(28),
@@ -274,23 +375,35 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                       )}
                     </Box>
                   </Tooltip>
-                ))}
+                  );
+                })}
               </SimpleGrid>
             </Box>
 
             <Button
               variant="default"
               fullWidth
+              data-color-grid="remove"
+              className={classes.removeColor}
               onClick={() => {
                 editor.commands.unsetColor();
                 editor.commands.unsetHighlight();
                 setIsOpen(false);
               }}
+              onKeyDown={(e) => {
+                if (e.key === "ArrowUp") {
+                  e.preventDefault();
+                  const lastRowStart =
+                    Math.floor(
+                      (HIGHLIGHT_COLORS.length - 1) / COLOR_GRID_COLS,
+                    ) * COLOR_GRID_COLS;
+                  focusSwatch("highlight", lastRowStart);
+                }
+              }}
             >
               {t("Remove color")}
             </Button>
           </Stack>
-        </ScrollArea.Autosize>
       </Popover.Dropdown>
     </Popover>
   );

apps/client/src/features/editor/components/bubble-menu/node-selector.tsx

@@ -12,6 +12,7 @@ import {
   IconInfoCircle,
   IconList,
   IconListNumbers,
+  IconQuote,
   IconTypography,
 } from "@tabler/icons-react";
 import { Popover, Button, ScrollArea, Tooltip } from "@mantine/core";
@@ -59,6 +60,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
         isCodeBlock: ctx.editor.isActive("codeBlock"),
         isCallout: ctx.editor.isActive("callout"),
         isDetails: ctx.editor.isActive("details"),
+        isTransclusionSource: ctx.editor.isActive("transclusionSource"),
       };
     },
   });
@@ -122,6 +124,12 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
           .run(),
       isActive: () => editorState?.isBlockquote,
     },
+    {
+      name: "Synced block",
+      icon: IconQuote,
+      command: () => editor.chain().focus().toggleTransclusionSource().run(),
+      isActive: () => editorState?.isTransclusionSource,
+    },
     {
       name: "Code",
       icon: IconCode,
@@ -147,9 +155,14 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
   };
 
   return (
-    <Popover opened={isOpen} withArrow>
+    <Popover opened={isOpen} onChange={setIsOpen} withArrow>
       <Popover.Target>
-        <Tooltip label={t("Turn into")} withArrow withinPortal={false} disabled={isOpen}>
+        <Tooltip
+          label={t("Turn into")}
+          withArrow
+          withinPortal={false}
+          disabled={isOpen}
+        >
           <Button
             className={classes.buttonRoot}
             variant="default"
@@ -157,6 +170,9 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
             radius="0"
             rightSection={<IconChevronDown size={16} />}
             onClick={() => setIsOpen(!isOpen)}
+            aria-label={t("Turn into")}
+            aria-haspopup="menu"
+            aria-expanded={isOpen}
           >
             {t(activeItem?.name)}
           </Button>

apps/client/src/features/editor/components/bubble-menu/text-alignment-selector.tsx

@@ -7,7 +7,7 @@ import {
   IconCheck,
   IconChevronDown,
 } from "@tabler/icons-react";
-import { Popover, Button, ScrollArea, Tooltip, rem } from "@mantine/core";
+import { Menu, Button, Tooltip, rem } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
@@ -82,47 +82,49 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
   const activeItem = items.filter((item) => item.isActive()).pop() ?? items[0];
 
   return (
-    <Popover opened={isOpen} withArrow>
-      <Popover.Target>
-        <Tooltip label={t("Text align")} withArrow withinPortal={false} disabled={isOpen}>
+    <Menu
+      shadow="md"
+      position="bottom-start"
+      withArrow={false}
+      opened={isOpen}
+      onChange={setIsOpen}
+    >
+      <Menu.Target>
+        <Tooltip label={t("Text align")} withArrow disabled={isOpen}>
           <Button
             variant="default"
             style={{ border: "none", height: "34px" }}
             px="5"
             radius="0"
             rightSection={<IconChevronDown size={16} />}
+            onMouseDown={(e) => e.preventDefault()}
             onClick={() => setIsOpen(!isOpen)}
+            aria-label={t("Text align")}
+            aria-haspopup="menu"
+            aria-expanded={isOpen}
           >
             <activeItem.icon style={{ width: rem(16) }} stroke={2} />
           </Button>
         </Tooltip>
-      </Popover.Target>
+      </Menu.Target>
 
-      <Popover.Dropdown>
-        <ScrollArea.Autosize type="scroll" mah={400}>
-          <Button.Group orientation="vertical">
-            {items.map((item, index) => (
-              <Button
-                key={index}
-                variant="default"
-                leftSection={<item.icon size={16} />}
-                rightSection={
-                  activeItem.name === item.name && <IconCheck size={16} />
-                }
-                justify="left"
-                fullWidth
-                onClick={() => {
-                  item.command();
-                  setIsOpen(false);
-                }}
-                style={{ border: "none" }}
-              >
-                {t(item.name)}
-              </Button>
-            ))}
-          </Button.Group>
-        </ScrollArea.Autosize>
-      </Popover.Dropdown>
-    </Popover>
+      <Menu.Dropdown>
+        {items.map((item, index) => (
+          <Menu.Item
+            key={index}
+            leftSection={<item.icon size={16} />}
+            rightSection={
+              activeItem.name === item.name ? <IconCheck size={16} /> : null
+            }
+            onClick={() => {
+              item.command();
+              setIsOpen(false);
+            }}
+          >
+            {t(item.name)}
+          </Menu.Item>
+        ))}
+      </Menu.Dropdown>
+    </Menu>
   );
 };

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

@@ -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);

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

@@ -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);

apps/client/src/features/editor/components/common/use-alt-text-control.tsx

@@ -0,0 +1,139 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Editor } from "@tiptap/react";
+import {
+  ActionIcon,
+  Button,
+  Group,
+  Paper,
+  Text,
+  Textarea,
+  Tooltip,
+} from "@mantine/core";
+import { IconAlt } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+
+const ALT_MAX_LENGTH = 300;
+
+function sanitizeAlt(value: string): string {
+  return value
+    .replace(/[\\\[\]!]/g, "")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+type UseAltTextControlArgs = {
+  editor: Editor;
+  nodeName: string;
+  currentAlt: string;
+};
+
+export function useAltTextControl({
+  editor,
+  nodeName,
+  currentAlt,
+}: UseAltTextControlArgs) {
+  const { t } = useTranslation();
+  const [showInput, setShowInput] = useState(false);
+  const [draft, setDraft] = useState("");
+
+  const open = useCallback(() => {
+    setDraft(currentAlt || "");
+    setShowInput(true);
+  }, [currentAlt]);
+
+  useEffect(() => {
+    const handler = () => {
+      if (!editor.isActive(nodeName)) {
+        setShowInput(false);
+      }
+    };
+    editor.on("selectionUpdate", handler);
+    return () => {
+      editor.off("selectionUpdate", handler);
+    };
+  }, [editor, nodeName]);
+
+  const cancel = useCallback(() => {
+    setShowInput(false);
+  }, []);
+
+  const save = useCallback(() => {
+    editor
+      .chain()
+      .focus(undefined, { scrollIntoView: false })
+      .updateAttributes(nodeName, { alt: sanitizeAlt(draft) || undefined })
+      .run();
+    setShowInput(false);
+  }, [editor, nodeName, draft]);
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        save();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        cancel();
+      }
+    },
+    [save, cancel],
+  );
+
+  const button = (
+    <Tooltip position="top" label={t("Alt text")} withinPortal={false}>
+      <ActionIcon
+        onClick={open}
+        size="lg"
+        aria-label={t("Alt text")}
+        variant="subtle"
+      >
+        <IconAlt size={18} />
+      </ActionIcon>
+    </Tooltip>
+  );
+
+  const panel = showInput ? (
+    <Paper
+      withBorder
+      shadow="md"
+      radius={6}
+      p="sm"
+      w={320}
+      style={{ position: "relative", zIndex: 100 }}
+    >
+      <Text size="sm" fw={600} mb={2}>
+        {t("Alt text")}
+      </Text>
+      <Text size="xs" c="dimmed" mb="xs">
+        {t("Describe this for accessibility.")}
+      </Text>
+      <Textarea
+        size="xs"
+        placeholder={t("Add a description")}
+        value={draft}
+        onChange={(e) => setDraft(e.currentTarget.value)}
+        onKeyDown={onKeyDown}
+        autoFocus
+        autosize
+        minRows={2}
+        maxRows={5}
+        maxLength={ALT_MAX_LENGTH}
+      />
+      <Group justify="space-between" align="center" mt="xs" wrap="nowrap">
+        <Text size="xs" c="dimmed">
+          {draft.length}/{ALT_MAX_LENGTH}
+        </Text>
+        <Group gap="xs">
+          <Button size="compact-xs" variant="default" onClick={cancel}>
+            {t("Cancel")}
+          </Button>
+          <Button size="compact-xs" onClick={save}>
+            {t("Save")}
+          </Button>
+        </Group>
+      </Group>
+    </Paper>
+  ) : null;
+
+  return { button, panel, isEditing: showInput };
+}

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

@@ -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,
@@ -37,6 +38,7 @@ import {
 import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
 import { IAttachment } from "@/features/attachments/types/attachment.types";
 import { modals } from "@mantine/modals";
+import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
 import classes from "../common/toolbar-menu.module.css";
 
 export function DrawioMenu({ editor }: EditorMenuProps) {
@@ -65,6 +67,7 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
         isAlignRight: ctx.editor.isActive("drawio", { align: "right" }),
         src: drawioAttr?.src || null,
         attachmentId: drawioAttr?.attachmentId || null,
+        alt: drawioAttr?.alt || "",
       };
     },
   });
@@ -81,7 +84,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);
@@ -139,6 +142,16 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
     editor.commands.deleteSelection();
   }, [editor]);
 
+  const {
+    button: altTextButton,
+    panel: altTextPanel,
+    isEditing: isEditingAlt,
+  } = useAltTextControl({
+    editor,
+    nodeName: "drawio",
+    currentAlt: editorState?.alt || "",
+  });
+
   const saveData = useCallback(async (svgXml: string) => {
     if (isSavingRef.current) return;
 
@@ -265,7 +278,10 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
         }}
         shouldShow={shouldShow}
       >
-        <div className={classes.toolbar}>
+        {isEditingAlt ? (
+          altTextPanel
+        ) : (
+          <div className={classes.toolbar}>
           <Tooltip position="top" label={t("Align left")} withinPortal={false}>
             <ActionIcon
               onClick={alignLeft}
@@ -308,6 +324,10 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
 
           <div className={classes.divider} />
 
+          {altTextButton}
+
+          <div className={classes.divider} />
+
           <Tooltip position="top" label={t("Edit")} withinPortal={false}>
             <ActionIcon
               onClick={handleOpen}
@@ -341,7 +361,8 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
               <IconTrash size={18} />
             </ActionIcon>
           </Tooltip>
-        </div>
+          </div>
+        )}
       </BaseBubbleMenu>
 
       <Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>

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

@@ -137,7 +137,13 @@ export default function DrawioView(props: NodeViewProps) {
 
   return (
     <NodeViewWrapper data-drag-handle>
-      <Modal.Root opened={opened} onClose={handleClose} fullScreen closeOnEscape={false}>
+      <Modal.Root
+        opened={opened}
+        onClose={handleClose}
+        fullScreen
+        closeOnEscape={false}
+        aria-label={t("Diagram editor")}
+      >
         <Modal.Overlay />
         <Modal.Content style={{ overflow: "hidden" }}>
           <Modal.Body pos="relative">
@@ -192,7 +198,11 @@ export default function DrawioView(props: NodeViewProps) {
         className={clsx(selected ? "ProseMirror-selectednode" : "")}
       >
         <div style={{ display: "flex", alignItems: "center" }}>
-          <ActionIcon variant="transparent" color="gray">
+          <ActionIcon
+            variant="transparent"
+            color="gray"
+            aria-label={t("Edit diagram")}
+          >
             <IconEdit size={18} />
           </ActionIcon>
 

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

@@ -131,7 +131,11 @@ export default function EmbedView(props: NodeViewProps) {
               className={clsx(selected ? "ProseMirror-selectednode" : "")}
             >
               <div style={{ display: "flex", alignItems: "center" }}>
-                <ActionIcon variant="transparent" color="gray">
+                <ActionIcon
+                  variant="transparent"
+                  color="gray"
+                  aria-label={t("Edit embed")}
+                >
                   <IconEdit size={18} />
                 </ActionIcon>
 

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

@@ -1,30 +1,26 @@
 import { CommandProps, EmojiMenuItemType } from "./types";
-import { SearchIndex } from "emoji-mart";
-import { getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";
+import { buildEmojiIndex, getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";
 
-const searchEmoji = async (value: string): Promise<EmojiMenuItemType[]> => {
-  if (value === "") {
-    const frequentlyUsedEmoji = getFrequentlyUsedEmoji();
-    return sortFrequentlyUsedEmoji(frequentlyUsedEmoji);
+const MAX_RESULTS = 5;
+
+const searchEmoji = async (query: string): Promise<EmojiMenuItemType[]> => {
+  if (query === "") {
+    return sortFrequentlyUsedEmoji(getFrequentlyUsedEmoji());
   }
 
-  const emojis = await SearchIndex.search(value);
-  const results = emojis.map((emoji: any) => {
-    return {
-      id: emoji.id,
-      emoji: emoji.skins[0].native,
-      command: ({ editor, range }: CommandProps) => {
-        editor
-          .chain()
-          .focus()
-          .deleteRange(range)
-          .insertContent(emoji.skins[0].native + " ")
-          .run();
-      },
-    };
-  });
+  const q = query.toLowerCase();
+  const index = await buildEmojiIndex();
 
-  return results;
+  return index
+    .filter((e) => e.name.includes(q) || e.id.includes(q))
+    .slice(0, MAX_RESULTS)
+    .map((entry) => ({
+      id: entry.id,
+      emoji: entry.native,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
+      },
+    }));
 };
 
 export const getEmojiItems = async ({

apps/client/src/features/editor/components/emoji-menu/emoji-list.tsx

@@ -1,140 +1,286 @@
-import {
-  ActionIcon,
-  Loader,
-  Paper,
-  ScrollArea,
-  SimpleGrid,
-  Text,
-} from "@mantine/core";
-import { EmojiMenuItemType } from "./types";
+import { Loader, Paper, ScrollArea, Text, UnstyledButton } from "@mantine/core";
 import clsx from "clsx";
-import classes from "./emoji-menu.module.css";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { GRID_COLUMNS, incrementEmojiUsage } from "./utils";
+import { useTranslation } from "react-i18next";
+import { EmojiMenuItemType } from "./types";
+import {
+  EmojiCategory,
+  EmojiIndexEntry,
+  getEmojiCategories,
+  incrementEmojiUsage,
+} from "./utils";
+import classes from "./emoji-menu.module.css";
 
-const EmojiList = ({
+const COLS = 8;
+
+const CAT_ICONS: Record<string, string> = {
+  people:   "😀",
+  nature:   "🌿",
+  foods:    "🍕",
+  activity: "🎮",
+  places:   "🗺️",
+  objects:  "🔧",
+  symbols:  "💯",
+  flags:    "🚩",
+};
+
+function EmojiList({
   items,
   isLoading,
   command,
   editor,
   range,
+  query = "",
 }: {
   items: EmojiMenuItemType[];
   isLoading: boolean;
-  command: any;
+  command: (item: EmojiMenuItemType) => void;
   editor: any;
   range: any;
-}) => {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const viewportRef = useRef<HTMLDivElement>(null);
+  query?: string;
+}) {
+  const { t } = useTranslation();
+  const [idx, setIdx] = useState(0);
+  const [cats, setCats] = useState<EmojiCategory[]>([]);
+  const [activeCat, setActiveCat] = useState("");
+  const [focusZone, setFocusZone] = useState<"grid" | "tabs">("grid");
+  const [announce, setAnnounce] = useState("");
+  const listViewport = useRef<HTMLDivElement>(null);
+  const gridViewport = useRef<HTMLDivElement>(null);
+  const catBar = useRef<HTMLDivElement>(null);
+  const userInteractedRef = useRef(false);
 
-  const selectItem = useCallback(
-    (index: number) => {
-      const item = items[index];
-      if (item) {
-        command(item);
-        incrementEmojiUsage(item.id);
-      }
+  const searching = query.length > 0;
+  const browseLoading = !searching && cats.length === 0;
+  const gridItems = cats.find((c) => c.id === activeCat)?.emojis ?? [];
+
+  useEffect(() => {
+    getEmojiCategories().then((data) => {
+      setCats(data);
+      setActiveCat((prev) => prev || data[0]?.id || "");
+    });
+  }, []);
+
+  useEffect(() => { setIdx(0); }, [query, activeCat]);
+
+  useEffect(() => { if (searching) setFocusZone("grid"); }, [searching]);
+
+  useEffect(() => {
+    if (focusZone !== "tabs") return;
+    catBar.current?.querySelector<HTMLElement>(`[data-cat="${activeCat}"]`)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [activeCat, focusZone]);
+
+  useEffect(() => {
+    if (focusZone === "tabs") return;
+    const vp = searching ? listViewport.current : gridViewport.current;
+    vp?.querySelector<HTMLElement>(`[data-i="${idx}"]`)?.scrollIntoView({ block: "nearest" });
+  }, [idx, searching, focusZone]);
+
+  // Announce picker open and selection changes via a live region. Focus
+  // stays in the editor, so without this the screen reader has no way to
+  // know the picker exists or that arrow keys are changing the selection.
+  // The setTimeout defers the open message past the initial render so the
+  // live region is in the DOM before its content changes (screen readers
+  // ignore content that's present at mount time).
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setAnnounce(
+        t("Emoji picker open. Use arrow keys to navigate, Enter to select."),
+      );
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [t]);
+
+  useEffect(() => {
+    // Skip data-driven updates (idx reset, async cat load); only announce
+    // selection changes that come from real user navigation.
+    if (!userInteractedRef.current) return;
+
+    if (focusZone === "tabs") {
+      if (activeCat) setAnnounce(t("{{name}} category", { name: activeCat }));
+      return;
+    }
+    if (searching) {
+      const item = items[idx];
+      if (item)
+        setAnnounce(
+          t("{{name}}, {{n}} of {{total}}", {
+            name: item.id,
+            n: idx + 1,
+            total: items.length,
+          }),
+        );
+      return;
+    }
+    const entry = gridItems[idx];
+    if (entry)
+      setAnnounce(
+        t("{{name}}, {{n}} of {{total}}", {
+          name: entry.id,
+          n: idx + 1,
+          total: gridItems.length,
+        }),
+      );
+  }, [idx, activeCat, focusZone, searching, items, gridItems, t]);
+
+  const pickSearchItem = useCallback(
+    (i: number) => {
+      const item = items[i];
+      if (!item) return;
+      command(item);
+      incrementEmojiUsage(item.id);
     },
-    [command, items]
+    [command, items],
+  );
+
+  const pickGridItem = useCallback(
+    (entry: EmojiIndexEntry) => {
+      editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
+      incrementEmojiUsage(entry.id);
+    },
+    [editor, range],
   );
 
   useEffect(() => {
-    const navigationKeys = [
-      "ArrowRight",
-      "ArrowLeft",
-      "ArrowUp",
-      "ArrowDown",
-      "Enter",
-    ];
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (navigationKeys.includes(e.key)) {
-        e.preventDefault();
-
-        if (e.key === "ArrowRight") {
-          setSelectedIndex(
-            selectedIndex + 1 < items.length ? selectedIndex + 1 : selectedIndex
-          );
-          return true;
-        }
-
-        if (e.key === "ArrowLeft") {
-          setSelectedIndex(
-            selectedIndex - 1 >= 0 ? selectedIndex - 1 : selectedIndex
-          );
-          return true;
-        }
-
-        if (e.key === "ArrowUp") {
-          setSelectedIndex(
-            selectedIndex - GRID_COLUMNS >= 0
-              ? selectedIndex - GRID_COLUMNS
-              : selectedIndex
-          );
-          return true;
-        }
-
-        if (e.key === "ArrowDown") {
-          setSelectedIndex(
-            selectedIndex + GRID_COLUMNS < items.length
-              ? selectedIndex + GRID_COLUMNS
-              : selectedIndex
-          );
-          return true;
-        }
-
-        if (e.key === "Enter") {
-          selectItem(selectedIndex);
-          return true;
-        }
-        return false;
+    function onKey(e: KeyboardEvent) {
+      if (
+        ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"].includes(
+          e.key,
+        )
+      ) {
+        userInteractedRef.current = true;
       }
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [items, selectedIndex, setSelectedIndex]);
+      if (searching) {
+        if      (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + 1, items.length - 1)); }
+        else if (e.key === "ArrowUp")   { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
+        else if (e.key === "Enter")     { e.preventDefault(); pickSearchItem(idx); }
+      } else if (focusZone === "tabs") {
+        const catIdx = cats.findIndex((c) => c.id === activeCat);
+        if      (e.key === "ArrowRight") { e.preventDefault(); const next = cats[Math.min(catIdx + 1, cats.length - 1)]; if (next) setActiveCat(next.id); }
+        else if (e.key === "ArrowLeft")  { e.preventDefault(); const prev = cats[Math.max(catIdx - 1, 0)]; if (prev) setActiveCat(prev.id); }
+        else if (e.key === "ArrowDown" || e.key === "Enter") { e.preventDefault(); setFocusZone("grid"); }
+        else if (e.key === "ArrowUp")    { e.preventDefault(); }
+      } else {
+        const total = gridItems.length;
+        if      (e.key === "ArrowRight") { e.preventDefault(); setIdx((i) => Math.min(i + 1, total - 1)); }
+        else if (e.key === "ArrowLeft")  { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
+        else if (e.key === "ArrowDown")  { e.preventDefault(); setIdx((i) => Math.min(i + COLS, total - 1)); }
+        else if (e.key === "ArrowUp")    {
+          e.preventDefault();
+          if (idx < COLS) setFocusZone("tabs");
+          else            setIdx((i) => Math.max(i - COLS, 0));
+        }
+        else if (e.key === "Enter")      { e.preventDefault(); if (gridItems[idx]) pickGridItem(gridItems[idx]); }
+      }
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [searching, items, idx, gridItems, pickSearchItem, pickGridItem, focusZone, cats, activeCat]);
 
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [items]);
-
-  useEffect(() => {
-    viewportRef.current
-      ?.querySelector(`[data-item-index="${selectedIndex}"]`)
-      ?.scrollIntoView({ block: "nearest" });
-  }, [selectedIndex]);
-
-  return items.length > 0 || isLoading ? (
-    <Paper id="emoji-command" p="0" shadow="md" withBorder>
-      {isLoading && <Loader m="xs" color="blue" type="dots" />}
-      {items.length > 0 && (
-        <ScrollArea.Autosize
-          viewportRef={viewportRef}
-          mah={250}
-          scrollbarSize={8}
-          pr="5"
-        >
-          <SimpleGrid cols={GRID_COLUMNS} p="xs" spacing="xs">
-            {items.map((item, index: number) => (
-              <ActionIcon
-                data-item-index={index}
-                variant="transparent"
-                key={item.id}
-                className={clsx(classes.menuBtn, {
-                  [classes.selectedItem]: index === selectedIndex,
-                })}
-                onClick={() => selectItem(index)}
-              >
-                <Text size="xl">{item.emoji}</Text>
-              </ActionIcon>
-            ))}
-          </SimpleGrid>
-        </ScrollArea.Autosize>
+  return (
+    <Paper
+      id="emoji-command"
+      p={0}
+      shadow="md"
+      withBorder
+      style={{ width: 280 }}
+      role="listbox"
+      aria-label={t("Emoji picker")}
+    >
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        style={{
+          position: "absolute",
+          width: 1,
+          height: 1,
+          padding: 0,
+          margin: -1,
+          overflow: "hidden",
+          clip: "rect(0,0,0,0)",
+          whiteSpace: "nowrap",
+          border: 0,
+        }}
+      >
+        {announce}
+      </div>
+      {searching ? (
+        <>
+          {isLoading && <Loader m="xs" size="xs" color="blue" type="dots" />}
+          <ScrollArea.Autosize mah={260} scrollbarSize={6} viewportRef={listViewport}>
+            <div style={{ padding: 4 }}>
+              {items.length === 0 && !isLoading ? (
+                <Text size="sm" c="dimmed" p="xs">{t("No results")}</Text>
+              ) : items.map((item, i) => (
+                <UnstyledButton
+                  key={item.id}
+                  data-i={i}
+                  w="100%"
+                  className={clsx(classes.row, { [classes.active]: i === idx })}
+                  onClick={() => pickSearchItem(i)}
+                  onMouseEnter={() => setIdx(i)}
+                  role="option"
+                  aria-selected={i === idx}
+                >
+                  <span style={{ fontSize: 20, lineHeight: 1, minWidth: 26 }}>{item.emoji}</span>
+                  <Text size="sm" c="dimmed" ff="monospace" span>:{item.id}:</Text>
+                </UnstyledButton>
+              ))}
+            </div>
+          </ScrollArea.Autosize>
+        </>
+      ) : browseLoading ? (
+        <Loader m="xs" size="xs" color="blue" type="dots" />
+      ) : (
+        <>
+          <div className={classes.catBar} role="tablist" ref={catBar}>
+            {cats.map((c) => {
+              const isActive = c.id === activeCat;
+              const isFocused = isActive && focusZone === "tabs";
+              return (
+                <button
+                  key={c.id}
+                  data-cat={c.id}
+                  title={c.id}
+                  role="tab"
+                  aria-selected={isActive}
+                  aria-label={t("{{name}} category", { name: c.id })}
+                  className={clsx(classes.catTab, {
+                    [classes.catTabActive]: isActive,
+                    [classes.catTabFocused]: isFocused,
+                  })}
+                  onClick={() => { setActiveCat(c.id); setFocusZone("grid"); }}
+                  onMouseEnter={() => setFocusZone("grid")}
+                >
+                  {CAT_ICONS[c.id] ?? "🔣"}
+                </button>
+              );
+            })}
+          </div>
+          <ScrollArea.Autosize mah={220} scrollbarSize={6} viewportRef={gridViewport}>
+            <div className={classes.grid} style={{ gridTemplateColumns: `repeat(${COLS}, 1fr)` }}>
+              {gridItems.map((entry, i) => (
+                <button
+                  key={entry.id}
+                  data-i={i}
+                  title={`:${entry.id}:`}
+                  role="option"
+                  aria-selected={i === idx}
+                  aria-label={entry.id}
+                  className={clsx(classes.emojiBtn, { [classes.active]: i === idx })}
+                  onClick={() => pickGridItem(entry)}
+                  onMouseEnter={() => setIdx(i)}
+                >
+                  {entry.native}
+                </button>
+              ))}
+            </div>
+          </ScrollArea.Autosize>
+        </>
       )}
     </Paper>
-  ) : null;
-};
+  );
+}
 
 export default EmojiList;

apps/client/src/features/editor/components/emoji-menu/emoji-menu.module.css

@@ -1,9 +1,13 @@
-.menuBtn {
+.row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
   border-radius: var(--mantine-radius-sm);
 
   &:hover {
     @mixin light {
-      background: var(--mantine-color-gray-2);
+      background: var(--mantine-color-gray-1);
     }
 
     @mixin dark {
@@ -12,7 +16,7 @@
   }
 }
 
-.selectedItem {
+.active {
   @mixin light {
     background: var(--mantine-color-gray-2);
   }
@@ -21,3 +25,83 @@
     background: var(--mantine-color-gray-light);
   }
 }
+
+.catBar {
+  display: flex;
+  gap: 2px;
+  padding: 4px 6px;
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  @mixin light {
+    border-bottom: 1px solid var(--mantine-color-gray-2);
+  }
+
+  @mixin dark {
+    border-bottom: 1px solid var(--mantine-color-dark-4);
+  }
+}
+
+.catTab {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 4px 5px;
+  border-radius: var(--mantine-radius-sm);
+  flex-shrink: 0;
+
+  &:hover {
+    @mixin light {
+      background: var(--mantine-color-gray-1);
+    }
+
+    @mixin dark {
+      background: var(--mantine-color-gray-light);
+    }
+  }
+}
+
+.catTabActive {
+  @mixin light {
+    background: var(--mantine-color-gray-2);
+  }
+
+  @mixin dark {
+    background: var(--mantine-color-gray-light);
+  }
+}
+
+.catTabFocused {
+  outline: 1px solid var(--mantine-color-blue-filled);
+  outline-offset: -1px;
+}
+
+.grid {
+  display: grid;
+  gap: 1px;
+  padding: 6px;
+}
+
+.emojiBtn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  line-height: 1;
+  padding: 3px;
+  border-radius: var(--mantine-radius-sm);
+  aspect-ratio: 1 / 1;
+
+  &:hover {
+    @mixin light {
+      background: var(--mantine-color-gray-1);
+    }
+
+    @mixin dark {
+      background: var(--mantine-color-gray-light);
+    }
+  }
+}
+

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

@@ -1,6 +1,5 @@
 import { ReactRenderer, useEditor } from "@tiptap/react";
 import EmojiList from "./emoji-list";
-import { init } from "emoji-mart";
 import {
   autoUpdate,
   computePosition,
@@ -37,10 +36,6 @@ const renderEmojiItems = () => {
       editor: ReturnType<typeof useEditor>;
       clientRect: () => DOMRect;
     }) => {
-      init({
-        data: async () => (await import("@emoji-mart/data")).default,
-      });
-
       component = new ReactRenderer(EmojiList, {
         props: { isLoading: true, items: [] },
         editor: props.editor,

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

@@ -1,8 +1,4 @@
-import { CommandProps } from "./types";
-import { getEmojiDataFromNative } from "emoji-mart";
-import { EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";
-
-export const GRID_COLUMNS = 10;
+import { CommandProps, EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";
 
 export const LOCAL_STORAGE_FREQUENT_KEY = "emoji-mart.frequently";
 
@@ -19,41 +15,76 @@ export const DEFAULT_FREQUENTLY_USED_EMOJI_MART = `{
     "rocket": 1
 }`;
 
+export type EmojiIndexEntry = { id: string; name: string; native: string };
+
+let _emojiIndex: EmojiIndexEntry[] | null = null;
+
+export const buildEmojiIndex = async (): Promise<EmojiIndexEntry[]> => {
+  if (_emojiIndex) return _emojiIndex;
+  const { default: data } = await import('@slidoapp/emoji-mart-data');
+  _emojiIndex = (Object.values((data as any).emojis) as any[])
+    .filter((e) => e.id && e.name && e.skins?.[0]?.native)
+    .map((e) => ({
+      id: e.id as string,
+      name: (e.name as string).toLowerCase(),
+      native: e.skins[0].native as string,
+    }));
+  return _emojiIndex;
+};
+
 export const incrementEmojiUsage = (emojiId: string) => {
-  const frequentlyUsedEmoji =
-    JSON.parse(localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART);
-  frequentlyUsedEmoji[emojiId]
-    ? (frequentlyUsedEmoji[emojiId] += 1)
-    : (frequentlyUsedEmoji[emojiId] = 1);
-  localStorage.setItem(
-    LOCAL_STORAGE_FREQUENT_KEY,
-    JSON.stringify(frequentlyUsedEmoji)
+  const stored = JSON.parse(
+    localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART,
   );
+  stored[emojiId] = (stored[emojiId] ?? 0) + 1;
+  localStorage.setItem(LOCAL_STORAGE_FREQUENT_KEY, JSON.stringify(stored));
 };
 
 export const sortFrequentlyUsedEmoji = async (
-  frequentlyUsedEmoji: EmojiMartFrequentlyType
+  frequentlyUsedEmoji: EmojiMartFrequentlyType,
 ): Promise<EmojiMenuItemType[]> => {
-  const data = await Promise.all(
-    Object.entries(frequentlyUsedEmoji).map(
-      async ([id, count]): Promise<EmojiMenuItemType> => ({
+  const index = await buildEmojiIndex();
+  const results: EmojiMenuItemType[] = Object.entries(frequentlyUsedEmoji)
+    .map(([id, count]): EmojiMenuItemType | null => {
+      const entry = index.find((e) => e.id === id);
+      if (!entry) return null;
+      return {
         id,
         count,
-        emoji: (await getEmojiDataFromNative(id))?.native,
-        command: async ({ editor, range }: CommandProps) => {
-          editor
-            .chain()
-            .focus()
-            .deleteRange(range)
-            .insertContent((await getEmojiDataFromNative(id))?.native + " ")
-            .run();
+        emoji: entry.native,
+        command: ({ editor, range }: CommandProps) => {
+          editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
         },
-      })
-    )
-  );
-  return data.sort((a, b) => b.count - a.count);
+      };
+    })
+    .filter((e): e is EmojiMenuItemType => e !== null);
+  return results.sort((a, b) => (b.count ?? 0) - (a.count ?? 0)).slice(0, 5);
 };
 
-export const getFrequentlyUsedEmoji = () => {
-  return JSON.parse(localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART);
-}
+export const getFrequentlyUsedEmoji = (): EmojiMartFrequentlyType => {
+  return JSON.parse(
+    localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART,
+  );
+};
+
+export type EmojiCategory = { id: string; emojis: EmojiIndexEntry[] };
+
+let _cats: EmojiCategory[] | null = null;
+
+export const getEmojiCategories = async (): Promise<EmojiCategory[]> => {
+  if (_cats) return _cats;
+  const [{ default: data }, index] = await Promise.all([
+    import("@slidoapp/emoji-mart-data"),
+    buildEmojiIndex(),
+  ]);
+  const byId = new Map(index.map((e) => [e.id, e]));
+  _cats = ((data as any).categories as { id: string; emojis: string[] }[])
+    .map((cat) => ({
+      id: cat.id,
+      emojis: cat.emojis
+        .map((id) => byId.get(id))
+        .filter((e): e is EmojiIndexEntry => !!e),
+    }))
+    .filter((c) => c.emojis.length > 0);
+  return _cats;
+};

apps/client/src/features/editor/components/excalidraw/excalidraw-menu-lazy.tsx

@@ -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>
+  );
+}

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

@@ -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,
@@ -35,6 +36,7 @@ import { IAttachment } from "@/features/attachments/types/attachment.types";
 import ReactClearModal from "react-clear-modal";
 import { useHandleLibrary } from "@excalidraw/excalidraw";
 import { localStorageLibraryAdapter } from "@/features/editor/components/excalidraw/excalidraw-utils.ts";
+import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
 import classes from "../common/toolbar-menu.module.css";
 
 const ExcalidrawComponent = lazy(() =>
@@ -76,6 +78,7 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
         isAlignRight: ctx.editor.isActive("excalidraw", { align: "right" }),
         src: excalidrawAttr?.src || null,
         attachmentId: excalidrawAttr?.attachmentId || null,
+        alt: excalidrawAttr?.alt || "",
       };
     },
   });
@@ -94,7 +97,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);
@@ -152,6 +155,16 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
     editor.commands.deleteSelection();
   }, [editor]);
 
+  const {
+    button: altTextButton,
+    panel: altTextPanel,
+    isEditing: isEditingAlt,
+  } = useAltTextControl({
+    editor,
+    nodeName: "excalidraw",
+    currentAlt: editorState?.alt || "",
+  });
+
   const handleOpen = useCallback(async () => {
     if (!editorState?.src) return;
 
@@ -290,7 +303,10 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
         }}
         shouldShow={shouldShow}
       >
-        <div className={classes.toolbar}>
+        {isEditingAlt ? (
+          altTextPanel
+        ) : (
+          <div className={classes.toolbar}>
           <Tooltip position="top" label={t("Align left")} withinPortal={false}>
             <ActionIcon
               onClick={alignLeft}
@@ -339,6 +355,10 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
 
           <div className={classes.divider} />
 
+          {altTextButton}
+
+          <div className={classes.divider} />
+
           <Tooltip position="top" label={t("Edit")} withinPortal={false}>
             <ActionIcon
               onClick={handleOpen}
@@ -372,7 +392,8 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
               <IconTrash size={18} />
             </ActionIcon>
           </Tooltip>
-        </div>
+          </div>
+        )}
       </BaseBubbleMenu>
 
       <ReactClearModal

apps/client/src/features/editor/components/excalidraw/excalidraw-view-lazy.tsx

@@ -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>
+  );
+}

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

@@ -240,7 +240,11 @@ export default function ExcalidrawView(props: NodeViewProps) {
         className={clsx(selected ? "ProseMirror-selectednode" : "")}
       >
         <div style={{ display: "flex", alignItems: "center" }}>
-          <ActionIcon variant="transparent" color="gray">
+          <ActionIcon
+            variant="transparent"
+            color="gray"
+            aria-label={t("Edit drawing")}
+          >
             <IconEdit size={18} />
           </ActionIcon>
 

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

@@ -0,0 +1,72 @@
+.fixedToolbar {
+  position: fixed;
+  top: calc(var(--app-shell-header-offset, 0rem) + 45px);
+  inset-inline-start: var(--app-shell-navbar-offset, 0rem);
+  inset-inline-end: var(--app-shell-aside-offset, 0rem);
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  background: var(--mantine-color-body);
+  border-bottom: 1px solid
+    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+  overflow-x: auto;
+}
+
+.fixedToolbar::-webkit-scrollbar {
+  height: 2px;
+}
+
+.fixedToolbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.fixedToolbar::-webkit-scrollbar-thumb {
+  background: light-dark(
+    var(--mantine-color-gray-4),
+    var(--mantine-color-dark-3)
+  );
+  border-radius: 1px;
+}
+
+.inner {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: 4px;
+  padding: 4px 8px;
+  margin-inline: auto;
+}
+
+.inner > * {
+  flex-shrink: 0;
+}
+
+.spacer {
+  height: 45px;
+}
+
+.divider {
+  flex-shrink: 0;
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+  background: light-dark(
+    var(--mantine-color-gray-3),
+    var(--mantine-color-dark-4)
+  );
+}
+
+.active,
+.active:hover {
+  color: var(--mantine-color-blue-6);
+  background-color: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-5)
+  );
+}
+
+@media print {
+  .fixedToolbar {
+    display: none;
+  }
+}

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

@@ -0,0 +1,66 @@
+import { FC } from "react";
+import { useAtomValue } from "jotai";
+import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
+import { useToolbarState } from "./use-toolbar-state";
+import { BlockTypeGroup } from "./groups/block-type-group";
+import { InlineMarksGroup } from "./groups/inline-marks-group";
+import { ColorGroup } from "./groups/color-group";
+import { ListsGroup } from "./groups/lists-group";
+import { LinkGroup } from "./groups/link-group";
+import { AlignmentGroup } from "./groups/alignment-group";
+import { MediaGroup } from "./groups/media-group";
+import { QuickInsertsGroup } from "./groups/quick-inserts-group";
+import { MoreInsertsGroup } from "./groups/more-inserts-group";
+import { HistoryGroup } from "./groups/history-group";
+import { AskAiGroup } from "./groups/ask-ai-group";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
+import classes from "./fixed-toolbar.module.css";
+
+export const FixedToolbar: FC = () => {
+  const editor = useAtomValue(pageEditorAtom);
+  const state = useToolbarState(editor);
+  const workspace = useAtomValue(workspaceAtom);
+  const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
+
+  if (!editor || !state) return null;
+
+  return (
+    <>
+      <div
+        className={classes.fixedToolbar}
+        data-fixed-toolbar="true"
+        role="toolbar"
+        aria-label="Editor toolbar"
+        onMouseDown={(e) => e.preventDefault()}
+      >
+        <div className={classes.inner}>
+          {/* {isGenerativeAiEnabled && (
+            <>
+              <AskAiGroup />
+              <div className={classes.divider} />
+            </>
+          )} */}
+          <BlockTypeGroup editor={editor} />
+          <div className={classes.divider} />
+          <InlineMarksGroup editor={editor} state={state} />
+          <div className={classes.divider} />
+          <ColorGroup editor={editor} />
+          <div className={classes.divider} />
+          <ListsGroup editor={editor} state={state} />
+          <div className={classes.divider} />
+          <LinkGroup />
+          <div className={classes.divider} />
+          <AlignmentGroup editor={editor} />
+          <div className={classes.divider} />
+          <MediaGroup editor={editor} />
+          <div className={classes.divider} />
+          <QuickInsertsGroup editor={editor} />
+          <MoreInsertsGroup editor={editor} />
+          <div className={classes.divider} />
+          <HistoryGroup editor={editor} state={state} />
+        </div>
+      </div>
+      <div className={classes.spacer} aria-hidden />
+    </>
+  );
+};

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

@@ -0,0 +1,28 @@
+import { FC, useEffect, useState } from "react";
+import type { Editor } from "@tiptap/react";
+import { TextAlignmentSelector } from "@/features/editor/components/bubble-menu/text-alignment-selector";
+
+interface Props {
+  editor: Editor;
+}
+
+export const AlignmentGroup: FC<Props> = ({ editor }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen]);
+
+  return (
+    <TextAlignmentSelector
+      editor={editor}
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+    />
+  );
+};

apps/client/src/features/editor/components/fixed-toolbar/groups/ask-ai-group.tsx

@@ -0,0 +1,23 @@
+import { FC } from "react";
+import { Button } from "@mantine/core";
+import { IconSparkles } from "@tabler/icons-react";
+import { useSetAtom } from "jotai";
+import { useTranslation } from "react-i18next";
+import { showAiMenuAtom } from "@/features/editor/atoms/editor-atoms";
+
+export const AskAiGroup: FC = () => {
+  const { t } = useTranslation();
+  const setShowAiMenu = useSetAtom(showAiMenuAtom);
+
+  return (
+    <Button
+      variant="subtle"
+      color="dark"
+      size="xs"
+      leftSection={<IconSparkles size={14} />}
+      onClick={() => setShowAiMenu(true)}
+    >
+      {t("Ask AI")}
+    </Button>
+  );
+};

apps/client/src/features/editor/components/fixed-toolbar/groups/block-type-group.tsx

@@ -0,0 +1,115 @@
+import { FC } from "react";
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
+import { Button, Menu } from "@mantine/core";
+import {
+  IconBlockquote,
+  IconBraces,
+  IconChevronDown,
+  IconH1,
+  IconH2,
+  IconH3,
+  IconMenu4,
+  IconPageBreak,
+  IconTypography,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+
+interface Props {
+  editor: Editor;
+}
+
+export const BlockTypeGroup: FC<Props> = ({ editor }) => {
+  const { t } = useTranslation();
+
+  const state = useEditorState({
+    editor,
+    selector: (ctx) => ({
+      isHeading1: ctx.editor.isActive("heading", { level: 1 }),
+      isHeading2: ctx.editor.isActive("heading", { level: 2 }),
+      isHeading3: ctx.editor.isActive("heading", { level: 3 }),
+      isBlockquote: ctx.editor.isActive("blockquote"),
+      isCodeBlock: ctx.editor.isActive("codeBlock"),
+    }),
+  });
+
+  let label = t("Normal text");
+  if (state.isHeading1) label = t("Heading 1");
+  else if (state.isHeading2) label = t("Heading 2");
+  else if (state.isHeading3) label = t("Heading 3");
+  else if (state.isBlockquote) label = t("Quote");
+  else if (state.isCodeBlock) label = t("Code block");
+
+  return (
+    <Menu shadow="md" position="bottom-start" withArrow={false}>
+      <Menu.Target>
+        <Button
+          variant="subtle"
+          color="dark"
+          size="xs"
+          rightSection={<IconChevronDown size={14} />}
+        >
+          {label}
+        </Button>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Item
+          leftSection={<IconTypography size={16} />}
+          onClick={() =>
+            editor.chain().focus().toggleNode("paragraph", "paragraph").run()
+          }
+        >
+          {t("Text")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconH1 size={16} />}
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 1 }).run()
+          }
+        >
+          {t("Heading 1")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconH2 size={16} />}
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 2 }).run()
+          }
+        >
+          {t("Heading 2")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconH3 size={16} />}
+          onClick={() =>
+            editor.chain().focus().toggleHeading({ level: 3 }).run()
+          }
+        >
+          {t("Heading 3")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconBlockquote size={16} />}
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+        >
+          {t("Quote")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconBraces size={16} />}
+          onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+        >
+          {t("Code block")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconMenu4 size={16} />}
+          onClick={() => editor.chain().focus().setHorizontalRule().run()}
+        >
+          {t("Divider")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconPageBreak size={16} />}
+          onClick={() => editor.chain().focus().setPageBreak().run()}
+        >
+          {t("Page break")}
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+};

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

@@ -0,0 +1,24 @@
+import { FC, useEffect, useState } from "react";
+import type { Editor } from "@tiptap/react";
+import { ColorSelector } from "@/features/editor/components/bubble-menu/color-selector";
+
+interface Props {
+  editor: Editor;
+}
+
+export const ColorGroup: FC<Props> = ({ editor }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen]);
+
+  return (
+    <ColorSelector editor={editor} isOpen={isOpen} setIsOpen={setIsOpen} />
+  );
+};

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

@@ -0,0 +1,44 @@
+import { FC } from "react";
+import type { Editor } from "@tiptap/react";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { IconArrowBackUp, IconArrowForwardUp } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import type { ToolbarState } from "../use-toolbar-state";
+
+interface Props {
+  editor: Editor;
+  state: ToolbarState;
+}
+
+export const HistoryGroup: FC<Props> = ({ editor, state }) => {
+  const { t } = useTranslation();
+
+  return (
+    <ActionIcon.Group>
+      <Tooltip label={t("Undo")} withArrow>
+        <ActionIcon
+          variant="subtle"
+          color="dark"
+          size="md"
+          aria-label={t("Undo")}
+          disabled={!state.canUndo}
+          onClick={() => editor.chain().focus().undo().run()}
+        >
+          <IconArrowBackUp size={16} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label={t("Redo")} withArrow>
+        <ActionIcon
+          variant="subtle"
+          color="dark"
+          size="md"
+          aria-label={t("Redo")}
+          disabled={!state.canRedo}
+          onClick={() => editor.chain().focus().redo().run()}
+        >
+          <IconArrowForwardUp size={16} />
+        </ActionIcon>
+      </Tooltip>
+    </ActionIcon.Group>
+  );
+};

apps/client/src/features/editor/components/fixed-toolbar/groups/inline-marks-group.tsx

@@ -0,0 +1,131 @@
+import { FC } from "react";
+import type { Editor } from "@tiptap/react";
+import { ActionIcon, Menu, Tooltip } from "@mantine/core";
+import {
+  IconBold,
+  IconChevronDown,
+  IconClearFormatting,
+  IconCode,
+  IconIndentDecrease,
+  IconIndentIncrease,
+  IconItalic,
+  IconStrikethrough,
+  IconSubscript,
+  IconSuperscript,
+  IconUnderline,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import type { ToolbarState } from "../use-toolbar-state";
+import classes from "../fixed-toolbar.module.css";
+
+interface Props {
+  editor: Editor;
+  state: ToolbarState;
+}
+
+export const InlineMarksGroup: FC<Props> = ({ editor, state }) => {
+  const { t } = useTranslation();
+
+  return (
+    <ActionIcon.Group>
+      <Tooltip label={t("Bold")} withArrow>
+        <ActionIcon
+          variant="subtle"
+          color="dark"
+          size="md"
+          aria-label={t("Bold")}
+          aria-pressed={state.isBold}
+          className={clsx({ [classes.active]: state.isBold })}
+          onClick={() => editor.chain().focus().toggleBold().run()}
+        >
+          <IconBold size={16} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label={t("Underline")} withArrow>
+        <ActionIcon
+          variant="subtle"
+          color="dark"
+          size="md"
+          aria-label={t("Underline")}
+          aria-pressed={state.isUnderline}
+          className={clsx({ [classes.active]: state.isUnderline })}
+          onClick={() => editor.chain().focus().toggleUnderline().run()}
+        >
+          <IconUnderline size={16} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label={t("Italic")} withArrow>
+        <ActionIcon
+          variant="subtle"
+          color="dark"
+          size="md"
+          aria-label={t("Italic")}
+          aria-pressed={state.isItalic}
+          className={clsx({ [classes.active]: state.isItalic })}
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+        >
+          <IconItalic size={16} />
+        </ActionIcon>
+      </Tooltip>
+      <Menu shadow="md" position="bottom-start" withArrow={false}>
+        <Menu.Target>
+          <ActionIcon
+            variant="subtle"
+            color="dark"
+            size="md"
+            aria-label={t("More inline formatting")}
+          >
+            <IconChevronDown size={14} />
+          </ActionIcon>
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item
+            leftSection={<IconStrikethrough size={16} />}
+            onClick={() => editor.chain().focus().toggleStrike().run()}
+          >
+            {t("Strikethrough")}
+          </Menu.Item>
+          <Menu.Item
+            leftSection={<IconCode size={16} />}
+            onClick={() => editor.chain().focus().toggleCode().run()}
+          >
+            {t("Inline code")}
+          </Menu.Item>
+          <Menu.Item
+            leftSection={<IconSubscript size={16} />}
+            onClick={() => editor.chain().focus().toggleSubscript().run()}
+          >
+            {t("Subscript")}
+          </Menu.Item>
+          <Menu.Item
+            leftSection={<IconSuperscript size={16} />}
+            onClick={() => editor.chain().focus().toggleSuperscript().run()}
+          >
+            {t("Superscript")}
+          </Menu.Item>
+          <Menu.Divider />
+          <Menu.Item
+            leftSection={<IconIndentIncrease size={16} />}
+            onClick={() => editor.chain().focus().indent().run()}
+          >
+            {t("Increase indent")}
+          </Menu.Item>
+          <Menu.Item
+            leftSection={<IconIndentDecrease size={16} />}
+            onClick={() => editor.chain().focus().outdent().run()}
+          >
+            {t("Decrease indent")}
+          </Menu.Item>
+          <Menu.Divider />
+          <Menu.Item
+            leftSection={<IconClearFormatting size={16} />}
+            onClick={() => editor.chain().focus().unsetAllMarks().run()}
+          >
+            {t("Clear formatting")}
+          </Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+    </ActionIcon.Group>
+  );
+};

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

@@ -0,0 +1,6 @@
+import { FC } from "react";
+import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector";
+
+export const LinkGroup: FC = () => {
+  return <LinkSelector />;
+};

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

@@ -0,0 +1,61 @@
+import { FC } from "react";
+import type { Editor } from "@tiptap/react";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { IconCheckbox, IconList, IconListNumbers } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import clsx from "clsx";
+import type { ToolbarState } from "../use-toolbar-state";
+import classes from "../fixed-toolbar.module.css";
+
+interface Props {
+  editor: Editor;
+  state: ToolbarState;
+}
+
+export const ListsGroup: FC<Props> = ({ editor, state }) => {
+  const { t } = useTranslation();
+
+  return (
+    <ActionIcon.Group>
+      <Tooltip label={t("Bullet List")} withArrow>
+        <ActionIcon
+          variant="subtle"
+          color="dark"
+          size="md"
+          aria-label={t("Bullet List")}
+          aria-pressed={state.isBulletList}
+          className={clsx({ [classes.active]: state.isBulletList })}
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+        >
+          <IconList size={16} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label={t("Numbered List")} withArrow>
+        <ActionIcon
+          variant="subtle"
+          color="dark"
+          size="md"
+          aria-label={t("Numbered List")}
+          aria-pressed={state.isOrderedList}
+          className={clsx({ [classes.active]: state.isOrderedList })}
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        >
+          <IconListNumbers size={16} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label={t("To-do List")} withArrow>
+        <ActionIcon
+          variant="subtle"
+          color="dark"
+          size="md"
+          aria-label={t("To-do List")}
+          aria-pressed={state.isTaskList}
+          className={clsx({ [classes.active]: state.isTaskList })}
+          onClick={() => editor.chain().focus().toggleTaskList().run()}
+        >
+          <IconCheckbox size={16} />
+        </ActionIcon>
+      </Tooltip>
+    </ActionIcon.Group>
+  );
+};

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

@@ -0,0 +1,118 @@
+import { FC } from "react";
+import type { Editor } from "@tiptap/react";
+import { ActionIcon, Menu, Tooltip } from "@mantine/core";
+import {
+  IconFileTypePdf,
+  IconMovie,
+  IconMusic,
+  IconPaperclip,
+  IconPhoto,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { uploadImageAction } from "@/features/editor/components/image/upload-image-action";
+import { uploadVideoAction } from "@/features/editor/components/video/upload-video-action";
+import { uploadAudioAction } from "@/features/editor/components/audio/upload-audio-action";
+import { uploadAttachmentAction } from "@/features/editor/components/attachment/upload-attachment-action";
+import { uploadPdfAction } from "@/features/editor/components/pdf/upload-pdf-action";
+
+interface Props {
+  editor: Editor;
+}
+
+type UploadFn = (
+  file: File,
+  editor: Editor,
+  pos: number,
+  pageId: string,
+  ...rest: any[]
+) => void;
+
+function pickFile(
+  editor: Editor,
+  accept: string,
+  multiple: boolean,
+  upload: UploadFn,
+  extra?: boolean,
+) {
+  // @ts-ignore — editor.storage.pageId is set by PageEditor.onCreate
+  const pageId = editor.storage?.pageId as string | undefined;
+  if (!pageId) return;
+
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = accept;
+  input.multiple = multiple;
+  input.style.display = "none";
+  document.body.appendChild(input);
+  input.onchange = () => {
+    if (input.files?.length) {
+      for (const file of input.files) {
+        const pos = editor.view.state.selection.from;
+        if (extra !== undefined) {
+          upload(file, editor, pos, pageId, extra);
+        } else {
+          upload(file, editor, pos, pageId);
+        }
+      }
+    }
+    input.remove();
+  };
+  input.click();
+}
+
+export const MediaGroup: FC<Props> = ({ editor }) => {
+  const { t } = useTranslation();
+
+  return (
+    <Menu shadow="md" position="bottom-start" withArrow={false}>
+      <Menu.Target>
+        <Tooltip label={t("Insert media")} withArrow>
+          <ActionIcon
+            variant="subtle"
+            color="dark"
+            size="md"
+            aria-label={t("Insert media")}
+          >
+            <IconPhoto size={16} />
+          </ActionIcon>
+        </Tooltip>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Item
+          leftSection={<IconPhoto size={16} />}
+          onClick={() => pickFile(editor, "image/*", true, uploadImageAction)}
+        >
+          {t("Image")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconMovie size={16} />}
+          onClick={() => pickFile(editor, "video/*", true, uploadVideoAction)}
+        >
+          {t("Video")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconMusic size={16} />}
+          onClick={() => pickFile(editor, "audio/*", true, uploadAudioAction)}
+        >
+          {t("Audio")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconFileTypePdf size={16} />}
+          onClick={() =>
+            pickFile(editor, "application/pdf", false, uploadPdfAction)
+          }
+        >
+          PDF
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconPaperclip size={16} />}
+          onClick={() =>
+            pickFile(editor, "", true, uploadAttachmentAction, true)
+          }
+        >
+          {t("File attachment")}
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+};

apps/client/src/features/editor/components/fixed-toolbar/groups/more-inserts-group.tsx

@@ -0,0 +1,217 @@
+import { FC } from "react";
+import type { Editor } from "@tiptap/react";
+import { ActionIcon, Menu, Tooltip } from "@mantine/core";
+import {
+  IconAppWindow,
+  IconCalendar,
+  IconCaretRightFilled,
+  IconChevronDown,
+  IconInfoCircle,
+  IconMath,
+  IconMathFunction,
+  IconRotate2,
+  IconSitemap,
+  IconTag,
+} from "@tabler/icons-react";
+import IconExcalidraw from "@/components/icons/icon-excalidraw";
+import IconMermaid from "@/components/icons/icon-mermaid";
+import IconDrawio from "@/components/icons/icon-drawio";
+import {
+  AirtableIcon,
+  FigmaIcon,
+  FramerIcon,
+  GoogleDriveIcon,
+  GoogleSheetsIcon,
+  LoomIcon,
+  MiroIcon,
+  TypeformIcon,
+  VimeoIcon,
+  YoutubeIcon,
+} from "@/components/icons";
+import { useTranslation } from "react-i18next";
+
+interface Props {
+  editor: Editor;
+}
+
+export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
+  const { t } = useTranslation();
+
+  const setEmbed = (provider: string) =>
+    editor.chain().focus().setEmbed({ provider }).run();
+
+  const insertDate = () => {
+    const currentDate = new Date().toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+    editor.chain().focus().insertContent(currentDate).run();
+  };
+
+  return (
+    <Menu shadow="md" position="bottom-start" withArrow={false} width={240}>
+      <Menu.Target>
+        <Tooltip label={t("More inserts")} withArrow>
+          <ActionIcon
+            variant="subtle"
+            color="dark"
+            size="md"
+            aria-label={t("More inserts")}
+          >
+            <IconChevronDown size={16} />
+          </ActionIcon>
+        </Tooltip>
+      </Menu.Target>
+      <Menu.Dropdown mah={400} style={{ overflowY: "auto" }}>
+        <Menu.Label>{t("Advanced")}</Menu.Label>
+        <Menu.Item
+          leftSection={<IconInfoCircle size={16} />}
+          onClick={() => editor.chain().focus().toggleCallout().run()}
+        >
+          {t("Callout")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconCaretRightFilled size={16} />}
+          onClick={() => editor.chain().focus().setDetails().run()}
+        >
+          {t("Toggle block")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconTag size={16} />}
+          onClick={() =>
+            editor.chain().focus().setStatus({ text: "", color: "gray" }).run()
+          }
+        >
+          {t("Status")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconSitemap size={16} />}
+          onClick={() => editor.chain().focus().insertSubpages().run()}
+        >
+          {t("Subpages")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconRotate2 size={16} />}
+          onClick={() =>
+            editor.chain().focus().insertTransclusionSource().run()
+          }
+        >
+          {t("Synced block")}
+        </Menu.Item>
+
+        <Menu.Divider />
+        <Menu.Label>{t("Diagrams")}</Menu.Label>
+        <Menu.Item
+          leftSection={<IconMermaid size={16} />}
+          onClick={() =>
+            editor
+              .chain()
+              .focus()
+              .setCodeBlock({ language: "mermaid" })
+              .insertContent("flowchart LR\n    A --> B")
+              .run()
+          }
+        >
+          {t("Mermaid diagram")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconDrawio size={16} />}
+          onClick={() => editor.chain().focus().setDrawio().run()}
+        >
+          Draw.io
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconExcalidraw size={16} />}
+          onClick={() => editor.chain().focus().setExcalidraw().run()}
+        >
+          Excalidraw
+        </Menu.Item>
+
+        <Menu.Divider />
+        <Menu.Label>{t("Embeds")}</Menu.Label>
+        <Menu.Item
+          leftSection={<IconAppWindow size={16} />}
+          onClick={() => setEmbed("iframe")}
+        >
+          Iframe
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<YoutubeIcon size={16} />}
+          onClick={() => setEmbed("youtube")}
+        >
+          YouTube
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<VimeoIcon size={16} />}
+          onClick={() => setEmbed("vimeo")}
+        >
+          Vimeo
+        </Menu.Item>
+        <Menu.Item leftSection={<LoomIcon size={16} />} onClick={() => setEmbed("loom")}>
+          Loom
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<FigmaIcon size={16} />}
+          onClick={() => setEmbed("figma")}
+        >
+          Figma
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<AirtableIcon size={16} />}
+          onClick={() => setEmbed("airtable")}
+        >
+          Airtable
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<TypeformIcon size={16} />}
+          onClick={() => setEmbed("typeform")}
+        >
+          Typeform
+        </Menu.Item>
+        <Menu.Item leftSection={<MiroIcon size={16} />} onClick={() => setEmbed("miro")}>
+          Miro
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<FramerIcon size={16} />}
+          onClick={() => setEmbed("framer")}
+        >
+          Framer
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<GoogleDriveIcon size={16} />}
+          onClick={() => setEmbed("gdrive")}
+        >
+          Google Drive
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<GoogleSheetsIcon size={16} />}
+          onClick={() => setEmbed("gsheets")}
+        >
+          Google Sheets
+        </Menu.Item>
+
+        <Menu.Divider />
+        <Menu.Label>{t("Utility")}</Menu.Label>
+        <Menu.Item
+          leftSection={<IconCalendar size={16} />}
+          onClick={insertDate}
+        >
+          {t("Date")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconMathFunction size={16} />}
+          onClick={() => editor.chain().focus().setMathInline().run()}
+        >
+          {t("Math inline")}
+        </Menu.Item>
+        <Menu.Item
+          leftSection={<IconMath size={16} />}
+          onClick={() => editor.chain().focus().setMathBlock().run()}
+        >
+          {t("Math block")}
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+};

apps/client/src/features/editor/components/fixed-toolbar/groups/quick-inserts-group.tsx

@@ -0,0 +1,117 @@
+import { FC } from "react";
+import type { Editor } from "@tiptap/react";
+import { ActionIcon, Menu, Tooltip } from "@mantine/core";
+import {
+  IconAt,
+  IconColumns2,
+  IconColumns3,
+  IconMoodSmile,
+  IconTable,
+} from "@tabler/icons-react";
+import { IconColumns4 } from "@/components/icons/icon-columns-4";
+import { IconColumns5 } from "@/components/icons/icon-columns-5";
+import { useTranslation } from "react-i18next";
+
+interface Props {
+  editor: Editor;
+}
+
+export const QuickInsertsGroup: FC<Props> = ({ editor }) => {
+  const { t } = useTranslation();
+
+  return (
+    <ActionIcon.Group>
+      <Tooltip label={t("Mention")} withArrow>
+        <ActionIcon
+          variant="subtle"
+          color="dark"
+          size="md"
+          aria-label={t("Mention")}
+          onClick={() => editor.chain().focus().insertContent("@").run()}
+        >
+          <IconAt size={16} />
+        </ActionIcon>
+      </Tooltip>
+      <Tooltip label={t("Emoji")} withArrow>
+        <ActionIcon
+          variant="subtle"
+          color="dark"
+          size="md"
+          aria-label={t("Emoji")}
+          onClick={() => editor.chain().focus().insertContent(":").run()}
+        >
+          <IconMoodSmile size={16} />
+        </ActionIcon>
+      </Tooltip>
+      <Menu shadow="md" position="bottom-start" withArrow={false}>
+        <Menu.Target>
+          <Tooltip label={t("Columns")} withArrow>
+            <ActionIcon
+              variant="subtle"
+              color="dark"
+              size="md"
+              aria-label={t("Columns")}
+            >
+              <IconColumns2 size={16} />
+            </ActionIcon>
+          </Tooltip>
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item
+            leftSection={<IconColumns2 size={16} />}
+            onClick={() =>
+              editor.chain().focus().insertColumns({ layout: "two_equal" }).run()
+            }
+          >
+            {t("{{count}} Columns", { count: 2 })}
+          </Menu.Item>
+          <Menu.Item
+            leftSection={<IconColumns3 size={16} />}
+            onClick={() =>
+              editor
+                .chain()
+                .focus()
+                .insertColumns({ layout: "three_equal" })
+                .run()
+            }
+          >
+            {t("{{count}} Columns", { count: 3 })}
+          </Menu.Item>
+          <Menu.Item
+            leftSection={<IconColumns4 size={16} />}
+            onClick={() =>
+              editor.chain().focus().insertColumns({ layout: "four_equal" }).run()
+            }
+          >
+            {t("{{count}} Columns", { count: 4 })}
+          </Menu.Item>
+          <Menu.Item
+            leftSection={<IconColumns5 size={16} />}
+            onClick={() =>
+              editor.chain().focus().insertColumns({ layout: "five_equal" }).run()
+            }
+          >
+            {t("{{count}} Columns", { count: 5 })}
+          </Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+      <Tooltip label={t("Table")} withArrow>
+        <ActionIcon
+          variant="subtle"
+          color="dark"
+          size="md"
+          aria-label={t("Table")}
+          onClick={() =>
+            editor
+              .chain()
+              .focus()
+              .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+              .run()
+          }
+        >
+          <IconTable size={16} />
+        </ActionIcon>
+      </Tooltip>
+    </ActionIcon.Group>
+  );
+};

apps/client/src/features/editor/components/fixed-toolbar/use-toolbar-state.ts

@@ -0,0 +1,50 @@
+import type { Editor } from "@tiptap/react";
+import { useEditorState } from "@tiptap/react";
+
+export interface ToolbarState {
+  isBold: boolean;
+  isItalic: boolean;
+  isUnderline: boolean;
+  isStrike: boolean;
+  isCode: boolean;
+  isSubscript: boolean;
+  isSuperscript: boolean;
+  isBulletList: boolean;
+  isOrderedList: boolean;
+  isTaskList: boolean;
+  canUndo: boolean;
+  canRedo: boolean;
+}
+
+// Undo/redo come from either StarterKit's history or the Yjs collaboration
+// history extension. During the brief moment a page is rendered with the
+// static editor (mainExtensions only, undoRedo disabled), neither is loaded
+// and editor.can().undo/redo is undefined.
+function safeCan(editor: Editor, command: "undo" | "redo"): boolean {
+  const can = editor.can() as Record<string, unknown>;
+  const fn = can[command];
+  return typeof fn === "function" ? (fn as () => boolean)() : false;
+}
+
+export function useToolbarState(editor: Editor | null): ToolbarState | null {
+  return useEditorState({
+    editor,
+    selector: (ctx) => {
+      if (!ctx.editor) return null;
+      return {
+        isBold: ctx.editor.isActive("bold"),
+        isItalic: ctx.editor.isActive("italic"),
+        isUnderline: ctx.editor.isActive("underline"),
+        isStrike: ctx.editor.isActive("strike"),
+        isCode: ctx.editor.isActive("code"),
+        isSubscript: ctx.editor.isActive("subscript"),
+        isSuperscript: ctx.editor.isActive("superscript"),
+        isBulletList: ctx.editor.isActive("bulletList"),
+        isOrderedList: ctx.editor.isActive("orderedList"),
+        isTaskList: ctx.editor.isActive("taskList"),
+        canUndo: safeCan(ctx.editor, "undo"),
+        canRedo: safeCan(ctx.editor, "redo"),
+      };
+    },
+  });
+}

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

@@ -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,
@@ -19,6 +20,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { getFileUrl } from "@/lib/config.ts";
 import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
+import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
 import classes from "../common/toolbar-menu.module.css";
 
 export function ImageMenu({ editor }: EditorMenuProps) {
@@ -40,6 +42,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
         isAlignCenter: ctx.editor.isActive("image", { align: "center" }),
         isAlignRight: ctx.editor.isActive("image", { align: "right" }),
         src: imageAttrs?.src || null,
+        alt: imageAttrs?.alt || "",
       };
     },
   });
@@ -56,7 +59,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);
@@ -135,6 +138,16 @@ export function ImageMenu({ editor }: EditorMenuProps) {
     editor.commands.deleteSelection();
   }, [editor]);
 
+  const {
+    button: altTextButton,
+    panel: altTextPanel,
+    isEditing: isEditingAlt,
+  } = useAltTextControl({
+    editor,
+    nodeName: "image",
+    currentAlt: editorState?.alt || "",
+  });
+
   return (
     <BaseBubbleMenu
       editor={editor}
@@ -148,7 +161,10 @@ export function ImageMenu({ editor }: EditorMenuProps) {
       }}
       shouldShow={shouldShow}
     >
-      <div className={classes.toolbar}>
+      {isEditingAlt ? (
+        altTextPanel
+      ) : (
+        <div className={classes.toolbar}>
         <Tooltip position="top" label={t("Align left")} withinPortal={false}>
           <ActionIcon
             onClick={alignImageLeft}
@@ -187,6 +203,10 @@ export function ImageMenu({ editor }: EditorMenuProps) {
 
         <div className={classes.divider} />
 
+        {altTextButton}
+
+        <div className={classes.divider} />
+
         <Tooltip position="top" label={t("Download")} withinPortal={false}>
           <ActionIcon
             onClick={handleDownload}
@@ -219,7 +239,8 @@ export function ImageMenu({ editor }: EditorMenuProps) {
             <IconTrash size={18} />
           </ActionIcon>
         </Tooltip>
-      </div>
+        </div>
+      )}
 
       <input
         ref={fileInputRef}

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

@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 export default function ImageView(props: NodeViewProps) {
   const { t } = useTranslation();
   const { editor, node, selected } = props;
-  const { src, width, align, title, aspectRatio, placeholder } = node.attrs;
+  const { src, width, align, alt, aspectRatio, placeholder } = node.attrs;
   const alignClass = useMemo(() => {
     if (align === "left") return "alignLeft";
     if (align === "right") return "alignRight";
@@ -42,7 +42,7 @@ export default function ImageView(props: NodeViewProps) {
         }}
       >
         {src && (
-          <Image radius="md" fit="contain" src={getFileUrl(src)} alt={title} />
+          <Image radius="md" fit="contain" src={getFileUrl(src)} alt={alt} />
         )}
         {!src && previewSrc && (
           <Group pos="relative" h="100%" w="100%">

apps/client/src/features/editor/components/link/link-editor-panel.tsx

@@ -102,6 +102,14 @@ export const LinkEditorPanel = ({
           leftSection={<IconLink size={16} stroke={1.5} color="var(--mantine-color-dimmed)" />}
           classNames={{ input: classes.linkInput }}
           placeholder={t("Paste link or search pages")}
+          aria-label={t("Paste link or search pages")}
+          role="combobox"
+          aria-expanded={showDropdown}
+          aria-controls="link-editor-results"
+          aria-autocomplete="list"
+          aria-activedescendant={
+            showDropdown ? `link-editor-option-${selectedIndex}` : undefined
+          }
           value={state.url}
           onChange={state.onChange}
           onKeyDown={handleKeyDown}
@@ -125,10 +133,16 @@ export const LinkEditorPanel = ({
             scrollbarSize={6}
             mt={state.url.length > 0 ? 8 : 0}
             styles={{ content: { minWidth: 0 } }}
+            id="link-editor-results"
+            role="listbox"
+            aria-label={t("Link suggestions")}
           >
             {showUrlItem && (
               <UnstyledButton
                 data-item-index={0}
+                id="link-editor-option-0"
+                role="option"
+                aria-selected={selectedIndex === 0}
                 onClick={() => onSetLink(state.url, false)}
                 className={clsx(classes.searchItem, {
                   [classes.selectedSearchItem]: selectedIndex === 0,
@@ -156,6 +170,9 @@ export const LinkEditorPanel = ({
               return (
                 <UnstyledButton
                   data-item-index={itemIndex}
+                  id={`link-editor-option-${itemIndex}`}
+                  role="option"
+                  aria-selected={itemIndex === selectedIndex}
                   key={page.id || index}
                   onClick={() => selectPage(page)}
                   className={clsx(classes.searchItem, {

apps/client/src/features/editor/components/math/math-block.tsx

@@ -149,8 +149,13 @@ export default function MathBlockView(props: NodeViewProps) {
           ></Textarea>
 
           <Flex justify="flex-end" align="flex-end">
-            <ActionIcon variant="light" color="red">
-              <IconTrashX size={18} onClick={() => props.deleteNode()} />
+            <ActionIcon
+              variant="light"
+              color="red"
+              aria-label={t("Delete equation")}
+              onClick={() => props.deleteNode()}
+            >
+              <IconTrashX size={18} />
             </ActionIcon>
           </Flex>
         </Stack>

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

@@ -16,6 +16,7 @@ import {
   ScrollArea,
   Text,
   UnstyledButton,
+  VisuallyHidden,
 } from "@mantine/core";
 import clsx from "clsx";
 import classes from "./mention.module.css";
@@ -36,7 +37,7 @@ import {
   usePageQuery,
 } from "@/features/page/queries/page-query";
 import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom";
-import { SimpleTree } from "react-arborist";
+import { treeModel } from "@/features/page/tree/model/tree-model";
 import { SpaceTreeNode } from "@/features/page/tree/types";
 import { useTranslation } from "react-i18next";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
@@ -46,6 +47,8 @@ import { AutoTooltipText } from "@/components/ui/auto-tooltip-text.tsx";
 const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useState(1);
   const viewportRef = useRef<HTMLDivElement>(null);
+  const [countAnnouncement, setCountAnnouncement] = useState("");
+  const [selectionAnnouncement, setSelectionAnnouncement] = useState("");
   const { pageSlug, spaceSlug } = useParams();
   const { data: page } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
   const { data: space } = useSpaceQuery(spaceSlug);
@@ -53,7 +56,6 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   const [renderItems, setRenderItems] = useState<MentionSuggestionItem[]>([]);
   const { t } = useTranslation();
   const [data, setData] = useAtom(treeDataAtom);
-  const tree = useMemo(() => new SimpleTree<SpaceTreeNode>(data), [data]);
   const createPageMutation = useCreatePageMutation();
   const emit = useQueryEmit();
   const isInCommentContext = props.isInCommentContext ?? false;
@@ -184,6 +186,45 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     setSelectedIndex(1);
   }, [suggestion]);
 
+  const selectableCount = useMemo(
+    () => renderItems.filter((item) => item.entityType !== "header").length,
+    [renderItems],
+  );
+
+  useEffect(() => {
+    if (renderItems.length === 0) {
+      setCountAnnouncement(t("No results"));
+      return;
+    }
+    setCountAnnouncement(
+      t("{{count}} result available", { count: selectableCount }),
+    );
+  }, [renderItems.length, selectableCount, t]);
+
+  useEffect(() => {
+    const item = renderItems[selectedIndex];
+    if (!item || item.entityType === "header") {
+      setSelectionAnnouncement("");
+      return;
+    }
+    if (item.entityType === "user") {
+      setSelectionAnnouncement(`${t("People")}: ${item.label}`);
+      return;
+    }
+    if (item.entityType === "page") {
+      if (item.id === null) {
+        setSelectionAnnouncement(`${t("Create page")}: ${item.label}`);
+        return;
+      }
+      const pageLabel = item.label || t("Untitled");
+      setSelectionAnnouncement(
+        item.spaceName
+          ? `${t("Pages")}: ${pageLabel}, ${item.spaceName}`
+          : `${t("Pages")}: ${pageLabel}`,
+      );
+    }
+  }, [selectedIndex, renderItems, t]);
+
   useImperativeHandle(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
@@ -220,20 +261,20 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
     try {
       createdPage = await createPageMutation.mutateAsync(payload);
       const parentId = page.id || null;
-      const data = {
+      const newNode: SpaceTreeNode = {
         id: createdPage.id,
         slugId: createdPage.slugId,
         name: createdPage.title,
         position: createdPage.position,
         spaceId: createdPage.spaceId,
         parentPageId: createdPage.parentPageId,
+        hasChildren: false,
         children: [],
-      } as any;
+      };
 
-      const lastIndex = tree.data.length;
+      const lastIndex = data.length;
 
-      tree.create({ parentId, index: lastIndex, data });
-      setData(tree.data);
+      setData(treeModel.insert(data, parentId, newNode, lastIndex));
 
       props.command({
         id: uuid7(),
@@ -251,7 +292,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
           payload: {
             parentId,
             index: lastIndex,
-            data,
+            data: newNode,
           },
         });
       }, 50);
@@ -271,6 +312,9 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   if (renderItems.length === 0) {
     return (
       <Paper id="mention" shadow="md" py="xs" withBorder radius="md">
+        <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
+          {countAnnouncement}
+        </VisuallyHidden>
         <Text c="dimmed" size="sm" px="sm">
           {t("No results")}
         </Text>
@@ -287,7 +331,22 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
   );
 
   return (
-    <Paper id="mention" shadow="md" withBorder radius="md" py={6}>
+    <Paper
+      id="mention"
+      shadow="md"
+      withBorder
+      radius="md"
+      py={6}
+      role="listbox"
+      aria-label={t("Mention suggestions")}
+      aria-activedescendant={`mention-option-${selectedIndex}`}
+    >
+      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
+        {countAnnouncement}
+      </VisuallyHidden>
+      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
+        {selectionAnnouncement}
+      </VisuallyHidden>
       <ScrollArea.Autosize
         viewportRef={viewportRef}
         mah={350}
@@ -301,7 +360,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
           if (item.entityType === "header") {
             const isFirst = index === 0;
             return (
-              <div key={`${item.label}-${index}`}>
+              <div key={`${item.label}-${index}`} role="presentation">
                 {!isFirst && <Divider my={6} />}
                 <Text
                   c="dimmed"
@@ -322,6 +381,9 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
               <UnstyledButton
                 data-item-index={index}
                 key={index}
+                id={`mention-option-${index}`}
+                role="option"
+                aria-selected={index === selectedIndex}
                 onClick={() => selectItem(index)}
                 className={clsx(classes.menuBtn, {
                   [classes.selectedItem]: index === selectedIndex,
@@ -348,6 +410,9 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
               <UnstyledButton
                 data-item-index={index}
                 key={index}
+                id={`mention-option-${index}`}
+                role="option"
+                aria-selected={index === selectedIndex}
                 onClick={() => selectItem(index)}
                 className={clsx(classes.menuBtn, {
                   [classes.selectedItem]: index === selectedIndex,
@@ -358,7 +423,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
                   <ActionIcon
                     variant="subtle"
                     component="div"
-                    aria-label={item.label}
+                    aria-hidden="true"
                     color="gray"
                     size="sm"
                   >
@@ -390,6 +455,11 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
             {(hasUsers || hasPages) && <Divider my={6} />}
             <UnstyledButton
               data-item-index={renderItems.indexOf(createPageItemData)}
+              id={`mention-option-${renderItems.indexOf(createPageItemData)}`}
+              role="option"
+              aria-selected={
+                renderItems.indexOf(createPageItemData) === selectedIndex
+              }
               onClick={() =>
                 selectItem(renderItems.indexOf(createPageItemData))
               }
@@ -405,6 +475,7 @@ const MentionList = forwardRef<any, MentionListProps>((props, ref) => {
                   component="div"
                   color="gray"
                   size="sm"
+                  aria-hidden="true"
                 >
                   <IconPlus size={16} stroke={1.5} />
                 </ActionIcon>

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

@@ -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);

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

@@ -92,7 +92,20 @@ export default function PdfView(props: NodeViewProps) {
   if (hasError) {
     return (
       <NodeViewWrapper data-drag-handle>
-        <div data-pdf-error className={clsx(classes.pdfError, { "ProseMirror-selectednode": selected })} onClick={handleSelect}>
+        <div
+          data-pdf-error
+          className={clsx(classes.pdfError, { "ProseMirror-selectednode": selected })}
+          onClick={handleSelect}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleSelect();
+            }
+          }}
+          role="button"
+          tabIndex={0}
+          aria-label={t("Failed to load PDF")}
+        >
           <IconFileTypePdf size={32} stroke={1.5} />
           <Text size="sm" c="dimmed">
             {t("Failed to load PDF")}

apps/client/src/features/editor/components/search-and-replace/search-and-replace-dialog.tsx

@@ -187,12 +187,14 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
       position={{ top: 90, right: 50 }}
       withBorder
       transitionProps={{ transition: "slide-down" }}
+      aria-label={t("Find and replace")}
     >
       <Stack gap="xs">
         <Flex align="center" gap="xs">
           <Input
             ref={inputRef}
             placeholder={t("Find")}
+            aria-label={t("Find")}
             leftSection={<IconSearch size={16} />}
             rightSection={
               <Text size="xs" ta="right">
@@ -217,7 +219,12 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
 
           <ActionIcon.Group>
             <Tooltip label={t("Previous match (Shift+Enter)")}>
-              <ActionIcon variant="subtle" color="gray" onClick={previous}>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onClick={previous}
+                aria-label={t("Previous match (Shift+Enter)")}
+              >
                 <IconArrowNarrowUp
                   style={{ width: "70%", height: "70%" }}
                   stroke={1.5}
@@ -225,7 +232,12 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
               </ActionIcon>
             </Tooltip>
             <Tooltip label={t("Next match (Enter)")}>
-              <ActionIcon variant="subtle" color="gray" onClick={next}>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onClick={next}
+                aria-label={t("Next match (Enter)")}
+              >
                 <IconArrowNarrowDown
                   style={{ width: "70%", height: "70%" }}
                   stroke={1.5}
@@ -237,6 +249,8 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
                 variant="subtle"
                 color={caseSensitive.color}
                 onClick={() => caseSensitiveToggle()}
+                aria-label={t("Match case (Alt+C)")}
+                aria-pressed={caseSensitive.isCaseSensitive}
               >
                 <IconLetterCase
                   style={{ width: "70%", height: "70%" }}
@@ -250,6 +264,8 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
                   variant="subtle"
                   color={replaceButton.color}
                   onClick={() => replaceButtonToggle()}
+                  aria-label={t("Replace")}
+                  aria-pressed={replaceButton.isReplaceShow}
                 >
                   <IconReplace
                     style={{ width: "70%", height: "70%" }}
@@ -259,7 +275,12 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
               </Tooltip>
             )}
             <Tooltip label={t("Close (Escape)")}>
-              <ActionIcon variant="subtle" color="gray" onClick={closeDialog}>
+              <ActionIcon
+                variant="subtle"
+                color="gray"
+                onClick={closeDialog}
+                aria-label={t("Close (Escape)")}
+              >
                 <IconX style={{ width: "70%", height: "70%" }} stroke={1.5} />
               </ActionIcon>
             </Tooltip>
@@ -269,6 +290,7 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
           <Flex align="center" gap="xs">
             <Input
               placeholder={t("Replace")}
+              aria-label={t("Replace")}
               leftSection={<IconReplace size={16} />}
               rightSection={<div></div>}
               rightSectionPointerEvents="all"

apps/client/src/features/editor/components/slash-menu/command-list.tsx

@@ -10,6 +10,7 @@ import {
   ScrollArea,
   Text,
   UnstyledButton,
+  VisuallyHidden,
 } from "@mantine/core";
 import classes from "./slash-menu.module.css";
 import clsx from "clsx";
@@ -29,6 +30,8 @@ const CommandList = ({
   const { t } = useTranslation();
   const [selectedIndex, setSelectedIndex] = useState(0);
   const viewportRef = useRef<HTMLDivElement>(null);
+  const [countAnnouncement, setCountAnnouncement] = useState("");
+  const [selectionAnnouncement, setSelectionAnnouncement] = useState("");
 
   const flatItems = useMemo(() => {
     return Object.values(items).flat();
@@ -79,6 +82,25 @@ const CommandList = ({
     setSelectedIndex(0);
   }, [flatItems]);
 
+  useEffect(() => {
+    if (flatItems.length === 0) {
+      setCountAnnouncement("");
+      return;
+    }
+    setCountAnnouncement(
+      t("{{count}} command available", { count: flatItems.length }),
+    );
+  }, [flatItems.length, t]);
+
+  useEffect(() => {
+    const item = flatItems[selectedIndex];
+    if (!item) {
+      setSelectionAnnouncement("");
+      return;
+    }
+    setSelectionAnnouncement(`${t(item.title)}, ${t(item.description)}`);
+  }, [selectedIndex, flatItems, t]);
+
   useEffect(() => {
     viewportRef.current
       ?.querySelector(`[data-item-index="${selectedIndex}"]`)
@@ -86,7 +108,21 @@ const CommandList = ({
   }, [selectedIndex]);
 
   return flatItems.length > 0 ? (
-    <Paper id="slash-command" shadow="md" p="xs" withBorder>
+    <Paper
+      id="slash-command"
+      shadow="md"
+      p="xs"
+      withBorder
+      role="listbox"
+      aria-label={t("Slash commands")}
+      aria-activedescendant={`slash-command-option-${selectedIndex}`}
+    >
+      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
+        {countAnnouncement}
+      </VisuallyHidden>
+      <VisuallyHidden role="status" aria-live="polite" aria-atomic="true">
+        {selectionAnnouncement}
+      </VisuallyHidden>
       <ScrollArea
         viewportRef={viewportRef}
         h={350}
@@ -94,22 +130,30 @@ const CommandList = ({
         scrollbarSize={8}
         overscrollBehavior="contain"
       >
-        {Object.entries(items).map(([category, categoryItems]) => (
-          <div key={category}>
+        {(() => {
+          let flatIndex = -1;
+          return Object.entries(items).map(([category, categoryItems]) => (
+          <div key={category} role="group" aria-label={category}>
             <Text c="dimmed" mb={4} fw={500} tt="capitalize">
               {category}
             </Text>
-            {categoryItems.map((item: SlashMenuItemType, index: number) => (
+            {categoryItems.map((item: SlashMenuItemType) => {
+              flatIndex += 1;
+              const itemIndex = flatIndex;
+              return (
               <UnstyledButton
-                data-item-index={index}
-                key={index}
-                onClick={() => selectItem(index)}
+                data-item-index={itemIndex}
+                key={itemIndex}
+                id={`slash-command-option-${itemIndex}`}
+                role="option"
+                aria-selected={itemIndex === selectedIndex}
+                onClick={() => selectItem(itemIndex)}
                 className={clsx(classes.menuBtn, {
-                  [classes.selectedItem]: index === selectedIndex,
+                  [classes.selectedItem]: itemIndex === selectedIndex,
                 })}
               >
                 <Group>
-                  <ActionIcon variant="default" component="div">
+                  <ActionIcon variant="default" component="div" aria-hidden="true">
                     <item.icon size={18} />
                   </ActionIcon>
 
@@ -124,9 +168,11 @@ const CommandList = ({
                   </div>
                 </Group>
               </UnstyledButton>
-            ))}
+              );
+            })}
           </div>
-        ))}
+          ));
+        })()}
       </ScrollArea>
     </Paper>
   ) : null;

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

@@ -19,12 +19,15 @@ import {
   IconTable,
   IconTypography,
   IconMenu4,
+  IconPageBreak,
   IconCalendar,
   IconAppWindow,
   IconSitemap,
   IconColumns3,
   IconColumns2,
   IconTag,
+  IconMoodSmile,
+  IconRotate2,
 } from "@tabler/icons-react";
 import {
   CommandProps,
@@ -157,7 +160,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "Numbered list",
       description: "Create a list with numbering.",
-      searchTerms: ["numbered", "ordered", "list"],
+      searchTerms: ["numbered", "ordered", "list", "ol"],
       icon: IconListNumbers,
       command: ({ editor, range }: CommandProps) => {
         editor.chain().focus().deleteRange(range).toggleOrderedList().run();
@@ -187,6 +190,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.",
@@ -256,7 +267,15 @@ const CommandGroups: SlashMenuGroupedItemsType = {
     {
       title: "Audio",
       description: "Upload any audio from your device.",
-      searchTerms: ["audio", "music", "sound", "mp3", "media", "file", "attachment"],
+      searchTerms: [
+        "audio",
+        "music",
+        "sound",
+        "mp3",
+        "media",
+        "file",
+        "attachment",
+      ],
       icon: IconMusic,
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();
@@ -493,15 +512,53 @@ const CommandGroups: SlashMenuGroupedItemsType = {
           .run();
       },
     },
+    {
+      title: "Emoji",
+      description: "Insert emoji.",
+      searchTerms: ["emoji", "icon", "smiley", "emoticon", "symbol", "reaction"],
+      icon: IconMoodSmile,
+      command: ({ editor, range }: CommandProps) => {
+        editor.chain().focus().deleteRange(range).insertContent(":").run();
+      },
+    },
     {
       title: "Subpages (Child pages)",
       description: "List all subpages of the current page",
-      searchTerms: ["subpages", "child", "children", "nested", "hierarchy"],
+      searchTerms: [
+        "subpages",
+        "child",
+        "children",
+        "nested",
+        "hierarchy",
+        "toc",
+      ],
       icon: IconSitemap,
       command: ({ editor, range }: CommandProps) => {
         editor.chain().focus().deleteRange(range).insertSubpages().run();
       },
     },
+    {
+      title: "Synced block",
+      description: "Create a block that stays in sync across pages.",
+      searchTerms: [
+        "sync",
+        "synced",
+        "synced block",
+        "excerpt",
+        "transclusion",
+        "reusable",
+        "snippet",
+      ],
+      icon: IconRotate2,
+      command: ({ editor, range }: CommandProps) => {
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .insertTransclusionSource()
+          .run();
+      },
+    },
     {
       title: "Database",
       description: "Insert an inline database on this page",

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

@@ -92,8 +92,17 @@ export default function StatusView(props: NodeViewProps) {
               colorClassMap[color],
             )}
             onClick={() => isEditable && setOpened(true)}
+            onKeyDown={(e) => {
+              if (isEditable && (e.key === "Enter" || e.key === " ")) {
+                e.preventDefault();
+                setOpened(true);
+              }
+            }}
             role="button"
             tabIndex={0}
+            aria-label={text || "SET STATUS"}
+            aria-haspopup="dialog"
+            aria-expanded={opened}
           >
             {text || "SET STATUS"}
           </span>
@@ -127,6 +136,16 @@ export default function StatusView(props: NodeViewProps) {
                 )}
                 style={{ backgroundColor: bg }}
                 onClick={() => handleColorChange(name)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleColorChange(name);
+                  }
+                }}
+                role="button"
+                tabIndex={0}
+                aria-label={name}
+                aria-pressed={color === name}
               >
                 {color === name && <IconCheck size={14} />}
               </Box>

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

@@ -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);

apps/client/src/features/editor/components/table-of-contents/table-of-contents.tsx

@@ -3,7 +3,7 @@ import { TextSelection } from "@tiptap/pm/state";
 import React, { FC, useEffect, useRef, useState } from "react";
 import classes from "./table-of-contents.module.css";
 import clsx from "clsx";
-import { Box, Text } from "@mantine/core";
+import { Box, Text, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
 type TableOfContentsProps = {
@@ -25,7 +25,7 @@ const recalculateLinks = (nodePos: NodePos[]) => {
     (acc, item) => {
       const label = item.node.textContent;
       const level = Number(item.node.attrs.level);
-      if (label.length && level <= 3) {
+      if (label.length && level <= 4) {
         acc.push({
           label,
           level,
@@ -156,9 +156,9 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
   return (
     <>
       {props.isShare && (
-        <Text mb="md" fw={500}>
+        <Title order={2} size="h6" mb="md" fw={500}>
           {t("Table of contents")}
-        </Text>
+        </Title>
       )}
       <div className={props.isShare ? classes.leftBorder : ""}>
         {links.map((item, idx) => (

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

@@ -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>
+  );
+});

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

@@ -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>
+  );
+}

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

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

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

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

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

@@ -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]);
+}

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

@@ -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]);
+}

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

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

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

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

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

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

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

@@ -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);
+}

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

@@ -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()!));
+}

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

@@ -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>
+  );
+});

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

@@ -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>
+    </>
+  );
+});

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

@@ -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>
+    </>
+  );
+});

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

@@ -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>
+    </>
+  );
+});

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

@@ -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>
+  );
+}

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

@@ -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!}
+      />
+    </>
+  );
+});

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

@@ -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" },

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

@@ -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,
           },

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

@@ -86,11 +86,11 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
       transitionProps={{ transition: "pop" }}
     >
       <Popover.Target>
-        <Tooltip label={t("Text 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} />

apps/client/src/features/editor/components/transclusion/error-placeholder.tsx

@@ -0,0 +1,17 @@
+import { IconAlertTriangle } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "./transclusion.module.css";
+
+export default function ErrorPlaceholder() {
+  const { t } = useTranslation();
+  return (
+    <div className={classes.placeholder}>
+      <IconAlertTriangle
+        size={18}
+        stroke={1.6}
+        className={classes.placeholderIcon}
+      />
+      <span>{t("Failed to load this synced block")}</span>
+    </div>
+  );
+}

apps/client/src/features/editor/components/transclusion/no-access-placeholder.tsx

@@ -0,0 +1,13 @@
+import { IconEyeOff } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "./transclusion.module.css";
+
+export default function NoAccessPlaceholder() {
+  const { t } = useTranslation();
+  return (
+    <div className={classes.placeholder}>
+      <IconEyeOff size={18} stroke={1.6} className={classes.placeholderIcon} />
+      <span>{t("You don't have access to this synced block")}</span>
+    </div>
+  );
+}

apps/client/src/features/editor/components/transclusion/not-found-placeholder.tsx

@@ -0,0 +1,17 @@
+import { IconInfoCircle } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "./transclusion.module.css";
+
+export default function NotFoundPlaceholder() {
+  const { t } = useTranslation();
+  return (
+    <div className={classes.placeholder}>
+      <IconInfoCircle
+        size={18}
+        stroke={1.6}
+        className={classes.placeholderIcon}
+      />
+      <span>{t("The original synced block no longer exists")}</span>
+    </div>
+  );
+}

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

@@ -0,0 +1,48 @@
+import { EditorProvider } from "@tiptap/react";
+import { useMemo } from "react";
+import { mainExtensions } from "@/features/editor/extensions/extensions";
+import { UniqueID } from "@docmost/editor-ext";
+
+type Props = {
+  content: unknown;
+};
+
+export default function TransclusionContent({ content }: Props) {
+  const extensions = useMemo(() => {
+    const filtered = mainExtensions.filter(
+      (e: any) => e.name !== "uniqueID" && e.name !== "globalDragHandle",
+    );
+    return [
+      ...filtered,
+      UniqueID.configure({
+        types: ["heading", "paragraph", "transclusionSource"],
+        updateDocument: false,
+      }),
+    ];
+  }, []);
+
+  // Isolate the nested read-only editor's events from the host editor:
+  // - mousedown/click would otherwise make the host node-select the atom
+  //   wrapper, blocking native text selection inside.
+  // - dragstart/dragover/drop would otherwise let the host treat events
+  //   inside the nested view as drops on the host, duplicating dropped
+  //   files at the transclusion's position.
+  const stop = (e: React.SyntheticEvent) => e.stopPropagation();
+
+  return (
+    <div
+      onMouseDown={stop}
+      onClick={stop}
+      onDragStart={stop}
+      onDragOver={stop}
+      onDrop={stop}
+    >
+      <EditorProvider
+        editable={false}
+        immediatelyRender={true}
+        extensions={extensions}
+        content={content as any}
+      />
+    </div>
+  );
+}

apps/client/src/features/editor/components/transclusion/transclusion-lookup-context.tsx

@@ -0,0 +1,213 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  lookupTransclusion,
+  lookupTransclusionForShare,
+} from "@/features/transclusion/services/transclusion-api";
+import type { TransclusionLookup } from "@/features/transclusion/types/transclusion.types";
+
+type LookupKey = string; // `${sourcePageId}::${transclusionId}`
+
+type Subscriber = {
+  key: LookupKey;
+  sourcePageId: string;
+  transclusionId: string;
+  setResult: (r: TransclusionLookup) => void;
+};
+
+type ContextValue = {
+  /** Register a subscriber. Returns an unsubscribe function. */
+  subscribe: (s: Subscriber) => () => void;
+  /**
+   * Force a re-fetch of `key` and resolve when the response arrives (or the
+   * request fails). Bypasses the cache and any in-flight de-dup so the user
+   * always sees a fresh server read.
+   */
+  refresh: (key: LookupKey) => Promise<void>;
+};
+
+const TransclusionLookupContext = createContext<ContextValue | null>(null);
+
+export function TransclusionLookupProvider({
+  children,
+  shareId,
+}: {
+  children: React.ReactNode;
+  /**
+   * When set, lookups go through the share-scoped public endpoint and are
+   * gated by the share graph (source page must have its own share or inherit
+   * one). Used by the public share viewer; left undefined in the authenticated
+   * app, where personal permissions gate access.
+   */
+  shareId?: string;
+}) {
+  const subscribersRef = useRef(new Map<LookupKey, Subscriber[]>());
+  const queueRef = useRef(new Set<LookupKey>());
+  const tickRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // Read inside flush() via ref so changing share context doesn't churn the
+  // memoized callbacks (and thus doesn't re-render every consumer).
+  const shareIdRef = useRef<string | undefined>(shareId);
+  shareIdRef.current = shareId;
+  // Last looked-up value for each key. Re-subscribers (e.g. when the editor
+  // remounts after switching from static to live) get this immediately
+  // instead of triggering a duplicate fetch.
+  const resultCacheRef = useRef(new Map<LookupKey, TransclusionLookup>());
+  // Keys that are currently in flight in a batch request. A second subscribe
+  // for the same key while the first request is pending is a no-op; the
+  // subscriber is added to subscribersRef and will be notified when the
+  // pending request completes.
+  const inFlightRef = useRef(new Set<LookupKey>());
+  // Resolvers waiting on the next response for a key. Populated by refresh()
+  // so callers can await the fetch round-trip; resolved on success and on
+  // network error so the UI never hangs in a loading state.
+  const pendingRef = useRef(new Map<LookupKey, Array<() => void>>());
+
+  const flush = useCallback(async () => {
+    tickRef.current = null;
+    const keys = Array.from(queueRef.current);
+    queueRef.current.clear();
+    if (keys.length === 0) return;
+
+    for (const k of keys) inFlightRef.current.add(k);
+
+    const references = keys.map((k) => {
+      const [sourcePageId, transclusionId] = k.split("::");
+      return { sourcePageId, transclusionId };
+    });
+
+    const resolveWaiters = (key: LookupKey) => {
+      const waiters = pendingRef.current.get(key);
+      if (!waiters) return;
+      pendingRef.current.delete(key);
+      for (const w of waiters) w();
+    };
+
+    try {
+      const activeShareId = shareIdRef.current;
+      const { items } = activeShareId
+        ? await lookupTransclusionForShare({
+            shareId: activeShareId,
+            references,
+          })
+        : await lookupTransclusion({ references });
+      for (const r of items) {
+        const key = `${r.sourcePageId}::${r.transclusionId}`;
+        resultCacheRef.current.set(key, r);
+        inFlightRef.current.delete(key);
+        const subs = subscribersRef.current.get(key);
+        if (subs) {
+          for (const s of subs) s.setResult(r);
+        }
+        resolveWaiters(key);
+      }
+    } catch {
+      // Network error — leave subscribers in pending state and clear the
+      // in-flight flag so a future subscribe can retry.
+      for (const k of keys) {
+        inFlightRef.current.delete(k);
+        resolveWaiters(k);
+      }
+    }
+  }, []);
+
+  const enqueue = useCallback(
+    (key: LookupKey) => {
+      queueRef.current.add(key);
+      if (tickRef.current === null) {
+        tickRef.current = setTimeout(flush, 10);
+      }
+    },
+    [flush],
+  );
+
+  const subscribe = useCallback<ContextValue["subscribe"]>(
+    (s) => {
+      const list = subscribersRef.current.get(s.key) ?? [];
+      list.push(s);
+      subscribersRef.current.set(s.key, list);
+
+      const cached = resultCacheRef.current.get(s.key);
+      if (cached) {
+        s.setResult(cached);
+      } else if (!inFlightRef.current.has(s.key)) {
+        enqueue(s.key);
+      }
+
+      return () => {
+        const cur = subscribersRef.current.get(s.key) ?? [];
+        const next = cur.filter((x) => x !== s);
+        if (next.length === 0) subscribersRef.current.delete(s.key);
+        else subscribersRef.current.set(s.key, next);
+      };
+    },
+    [enqueue],
+  );
+
+  const refresh = useCallback<ContextValue["refresh"]>(
+    (key) =>
+      new Promise<void>((resolve) => {
+        resultCacheRef.current.delete(key);
+        inFlightRef.current.delete(key);
+        const waiters = pendingRef.current.get(key) ?? [];
+        waiters.push(resolve);
+        pendingRef.current.set(key, waiters);
+        enqueue(key);
+      }),
+    [enqueue],
+  );
+
+  useEffect(
+    () => () => {
+      if (tickRef.current) clearTimeout(tickRef.current);
+    },
+    [],
+  );
+
+  const value = useMemo<ContextValue>(
+    () => ({ subscribe, refresh }),
+    [subscribe, refresh],
+  );
+
+  return (
+    <TransclusionLookupContext.Provider value={value}>
+      {children}
+    </TransclusionLookupContext.Provider>
+  );
+}
+
+export function useTransclusionLookup(
+  sourcePageId: string | null | undefined,
+  transclusionId: string | null | undefined,
+): {
+  result: TransclusionLookup | null;
+  refresh: () => Promise<void>;
+} {
+  const ctx = useContext(TransclusionLookupContext);
+  const [result, setResult] = useState<TransclusionLookup | null>(null);
+
+  useEffect(() => {
+    if (!ctx || !sourcePageId || !transclusionId) return;
+    const key = `${sourcePageId}::${transclusionId}`;
+    const unsubscribe = ctx.subscribe({
+      key,
+      sourcePageId,
+      transclusionId,
+      setResult,
+    });
+    return unsubscribe;
+  }, [ctx, sourcePageId, transclusionId]);
+
+  const refresh = useCallback(async () => {
+    if (!ctx || !sourcePageId || !transclusionId) return;
+    await ctx.refresh(`${sourcePageId}::${transclusionId}`);
+  }, [ctx, sourcePageId, transclusionId]);
+
+  return { result, refresh };
+}

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

@@ -0,0 +1,213 @@
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { ActionIcon, Menu, Tooltip } from "@mantine/core";
+import {
+  IconDots,
+  IconLinkOff,
+  IconPencil,
+  IconRefresh,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { ErrorBoundary } from "react-error-boundary";
+import { useTransclusionLookup } from "./transclusion-lookup-context";
+import TransclusionContent from "./transclusion-content";
+import NoAccessPlaceholder from "./no-access-placeholder";
+import NotFoundPlaceholder from "./not-found-placeholder";
+import ErrorPlaceholder from "./error-placeholder";
+import classes from "./transclusion.module.css";
+import SyncBlockReferencesDropdown from "@/features/transclusion/components/sync-block-references-dropdown";
+import {
+  useReferencesQuery,
+  useUnsyncReferenceMutation,
+} from "@/features/transclusion/queries/transclusion-query";
+import { buildPageUrl } from "@/features/page/page.utils";
+
+export default function TransclusionReferenceView(props: NodeViewProps) {
+  const isEditable = props.editor.isEditable;
+  const sourcePageId: string | null = props.node.attrs.sourcePageId ?? null;
+  const transclusionId: string | null = props.node.attrs.transclusionId ?? null;
+  const [openMenus, setOpenMenus] = useState(0);
+  const trackOpen = (open: boolean) =>
+    setOpenMenus((n) => Math.max(0, n + (open ? 1 : -1)));
+
+  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}
+    >
+      <ErrorBoundary
+        resetKeys={[sourcePageId, transclusionId]}
+        fallback={<ErrorPlaceholder />}
+      >
+        <TransclusionReferenceBody {...props} trackOpen={trackOpen} />
+      </ErrorBoundary>
+    </NodeViewWrapper>
+  );
+}
+
+function TransclusionReferenceBody({
+  editor,
+  node,
+  deleteNode,
+  getPos,
+  trackOpen,
+}: NodeViewProps & { trackOpen: (open: boolean) => void }) {
+  const { t } = useTranslation();
+  const sourcePageId: string | null = node.attrs.sourcePageId ?? null;
+  const transclusionId: string | null = node.attrs.transclusionId ?? null;
+  const isEditable = editor.isEditable;
+
+  const { result, refresh } = useTransclusionLookup(
+    sourcePageId,
+    transclusionId,
+  );
+  const [refreshing, setRefreshing] = useState(false);
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    try {
+      await refresh();
+    } finally {
+      setRefreshing(false);
+    }
+  };
+  // @ts-ignore - editor.storage.pageId is set by the host editor
+  const hostPageId: string | undefined = editor.storage?.pageId;
+  const unsyncMutation = useUnsyncReferenceMutation();
+  // Cached against the dropdown's identical query so the source link target
+  // is ready as soon as the controls fade in on hover, without a second
+  // fetch.
+  const referencesQuery = useReferencesQuery(
+    sourcePageId,
+    transclusionId,
+    isEditable,
+  );
+  const sourcePageHref = (() => {
+    const source = referencesQuery.data?.source;
+    const base = source?.spaceSlug
+      ? buildPageUrl(source.spaceSlug, source.slugId, source.title)
+      : sourcePageId
+        ? `/p/${sourcePageId}`
+        : null;
+    if (!base) return null;
+    return transclusionId ? `${base}#${transclusionId}` : base;
+  })();
+
+  const handleUnsync = async () => {
+    if (!hostPageId || !sourcePageId || !transclusionId) return;
+    try {
+      const { content } = await unsyncMutation.mutateAsync({
+        referencePageId: hostPageId,
+        sourcePageId,
+        transclusionId,
+      });
+      const pos = getPos();
+      if (typeof pos !== "number") return;
+      const from = pos;
+      const to = pos + node.nodeSize;
+      editor
+        .chain()
+        .focus()
+        .insertContentAt({ from, to }, content as any)
+        .run();
+    } catch {
+      // mutation surfaces errors via React Query; node stays as-is
+    }
+  };
+
+  return (
+    <>
+      {isEditable && (
+        <div
+          className={classes.includeControls}
+          contentEditable={false}
+          onMouseDown={(e) => e.preventDefault()}
+        >
+          {sourcePageId && transclusionId && hostPageId && (
+            <SyncBlockReferencesDropdown
+              sourcePageId={sourcePageId}
+              transclusionId={transclusionId}
+              currentPageId={hostPageId}
+              mode="reference"
+              onOpenChange={trackOpen}
+            />
+          )}
+          <span className={classes.controlsDivider} />
+          <Tooltip label={t("Refresh")}>
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              size="sm"
+              onClick={handleRefresh}
+              loading={refreshing}
+              disabled={!sourcePageId || !transclusionId}
+            >
+              <IconRefresh size={14} />
+            </ActionIcon>
+          </Tooltip>
+          {sourcePageHref && (
+            <Tooltip label={t("Edit source")}>
+              <ActionIcon
+                component={Link}
+                to={sourcePageHref}
+                variant="subtle"
+                color="gray"
+                size="sm"
+                style={{
+                  textDecoration: "none",
+                  borderBottom: "none",
+                }}
+              >
+                <IconPencil size={14} />
+              </ActionIcon>
+            </Tooltip>
+          )}
+          <Menu position="bottom-end" withinPortal onChange={trackOpen}>
+            <Menu.Target>
+              <ActionIcon variant="subtle" color="gray" size="sm">
+                <IconDots size={14} />
+              </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <Menu.Item
+                leftSection={<IconLinkOff size={14} />}
+                onClick={handleUnsync}
+                disabled={
+                  unsyncMutation.isPending ||
+                  !hostPageId ||
+                  !sourcePageId ||
+                  !transclusionId
+                }
+              >
+                {t("Unsync")}
+              </Menu.Item>
+              <Menu.Item
+                color="red"
+                leftSection={<IconTrash size={14} />}
+                onClick={() => deleteNode()}
+              >
+                {t("Remove from page")}
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+        </div>
+      )}
+
+      {!sourcePageId || !transclusionId ? (
+        <NotFoundPlaceholder />
+      ) : !result ? (
+        <div style={{ minHeight: 24 }} />
+      ) : !("status" in result) ? (
+        <TransclusionContent content={result.content} />
+      ) : result.status === "no_access" ? (
+        <NoAccessPlaceholder />
+      ) : (
+        <NotFoundPlaceholder />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,127 @@
+import {
+  NodeViewContent,
+  NodeViewProps,
+  NodeViewWrapper,
+} from "@tiptap/react";
+import { ActionIcon, Menu, Tooltip } from "@mantine/core";
+import { notifications } from "@mantine/notifications";
+import {
+  IconCheck,
+  IconCopy,
+  IconDots,
+  IconLinkOff,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import classes from "./transclusion.module.css";
+import SyncBlockReferencesDropdown from "@/features/transclusion/components/sync-block-references-dropdown";
+
+export default function TransclusionView(props: NodeViewProps) {
+  const { editor, node, deleteNode } = props;
+  const { t } = useTranslation();
+  const [openMenus, setOpenMenus] = useState(0);
+  const trackOpen = (open: boolean) =>
+    setOpenMenus((n) => Math.max(0, n + (open ? 1 : -1)));
+
+  const isEditable = editor.isEditable;
+  // @ts-ignore - editor.storage.pageId is set by the host editor (page-editor.tsx onCreate)
+  const sourcePageId: string | undefined = editor.storage?.pageId;
+  const transclusionId: string | null = node.attrs.id ?? null;
+
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    if (!sourcePageId || !transclusionId) return;
+    const html = `<div data-type="transclusionReference" data-source-page-id="${sourcePageId}" data-transclusion-id="${transclusionId}"></div>`;
+    try {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          "text/html": new Blob([html], { type: "text/html" }),
+          "text/plain": new Blob([html], { type: "text/plain" }),
+        }),
+      ]);
+    } catch {
+      // Fallback for browsers without ClipboardItem write support
+      try {
+        await navigator.clipboard.writeText(html);
+      } catch {
+        return;
+      }
+    }
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2000);
+    notifications.show({
+      message: t("Copied. Paste on any page to embed this synced block."),
+    });
+  };
+
+  const handleUnsync = () => {
+    editor.chain().focus().unsyncTransclusionSource().run();
+  };
+
+  return (
+    <NodeViewWrapper
+      className={classes.transclusionWrap}
+      data-editable={isEditable ? "true" : "false"}
+      data-menu-open={openMenus > 0 ? "true" : "false"}
+      data-id={transclusionId ?? undefined}
+    >
+      {isEditable && (
+        <div
+          className={classes.transclusionControls}
+          contentEditable={false}
+          onMouseDown={(e) => e.preventDefault()}
+        >
+          {sourcePageId && transclusionId && (
+            <SyncBlockReferencesDropdown
+              sourcePageId={sourcePageId}
+              transclusionId={transclusionId}
+              currentPageId={sourcePageId}
+              mode="source"
+              onOpenChange={trackOpen}
+            />
+          )}
+
+          <span className={classes.controlsDivider} />
+
+          <Tooltip label={copied ? t("Copied") : t("Copy synced block")}>
+            <ActionIcon
+              variant="subtle"
+              color={copied ? "teal" : "gray"}
+              size="sm"
+              onClick={handleCopy}
+              disabled={!sourcePageId || !transclusionId}
+            >
+              {copied ? <IconCheck size={14} /> : <IconCopy size={14} />}
+            </ActionIcon>
+          </Tooltip>
+
+          <Menu position="bottom-end" withinPortal onChange={trackOpen}>
+            <Menu.Target>
+              <ActionIcon variant="subtle" color="gray" size="sm">
+                <IconDots size={14} />
+              </ActionIcon>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <Menu.Item
+                leftSection={<IconLinkOff size={14} />}
+                onClick={handleUnsync}
+              >
+                {t("Unsync")}
+              </Menu.Item>
+              <Menu.Item
+                color="red"
+                leftSection={<IconTrash size={14} />}
+                onClick={() => deleteNode()}
+              >
+                {t("Delete synced block")}
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+        </div>
+      )}
+
+      <NodeViewContent />
+    </NodeViewWrapper>
+  );
+}

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

@@ -0,0 +1,230 @@
+.placeholder {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: var(--mantine-radius-md);
+  background: light-dark(
+    var(--mantine-color-gray-0),
+    var(--mantine-color-dark-6)
+  );
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  font-size: var(--mantine-font-size-sm);
+  user-select: none;
+}
+
+.placeholderIcon {
+  flex: none;
+  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
+}
+
+.transclusionBadge {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 600;
+  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-radius: var(--mantine-radius-sm);
+  margin-bottom: 4px;
+}
+
+.transclusionWrap {
+  position: relative;
+  margin-left: -3rem;
+  margin-right: -3rem;
+  width: calc(100% + 6rem);
+  padding: 0.5em 3rem;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  transition: border 0.3s;
+}
+
+.transclusionWrap[data-editable="false"],
+.includeWrap[data-editable="false"] {
+  margin-left: 0;
+  margin-right: 0;
+  width: 100%;
+  padding: 0;
+}
+
+/* Cancel the wrapping .react-renderer's vertical spacing in read-only mode
+   so the synced block sits flush with surrounding paragraphs (whose own
+   margins already provide the right rhythm). */
+:global(.react-renderer.node-transclusionSource):has(
+    .transclusionWrap[data-editable="false"]
+  ),
+:global(.react-renderer.node-transclusionReference):has(
+    .includeWrap[data-editable="false"]
+  ) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.transclusionWrap[data-editable="true"]:hover,
+.transclusionWrap[data-editable="true"]:focus-within {
+  border: 2px solid
+    light-dark(
+      var(--mantine-color-orange-2),
+      color-mix(in srgb, var(--mantine-color-orange-9), transparent 55%)
+    );
+}
+
+.transclusionControls {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  right: 4px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--mantine-color-body);
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: 6px;
+  padding: 4px 6px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+  z-index: 2;
+}
+
+/* Hover bridge: keeps :hover on the wrap while the cursor crosses the
+   8px gap between wrap and floating chrome, so the menu doesn't fade out
+   on the way to it. */
+.transclusionControls::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 8px;
+}
+
+.transclusionWrap:hover .transclusionControls,
+.transclusionWrap:focus-within .transclusionControls,
+.transclusionWrap[data-menu-open="true"] .transclusionControls {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.controlsDivider {
+  display: inline-block;
+  width: 1px;
+  height: 16px;
+  background: var(--mantine-color-default-border);
+}
+
+.transclusionControls a[href],
+.includeControls a[href] {
+  color: var(--ai-color);
+  border-bottom: none;
+  font-weight: inherit;
+}
+
+.includeWrap {
+  position: relative;
+  margin-left: -3rem;
+  margin-right: -3rem;
+  width: calc(100% + 6rem);
+  padding: 0.5em 0;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  transition: border 0.3s;
+}
+
+.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),
+      color-mix(in srgb, var(--mantine-color-orange-9), transparent 55%)
+    );
+}
+
+.includeControls {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  right: 4px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--mantine-color-body);
+  border: 1px solid var(--mantine-color-default-border);
+  border-radius: 6px;
+  padding: 4px 6px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+  z-index: 2;
+}
+
+/* Hover bridge: keeps :hover on the wrap while the cursor crosses the
+   8px gap between wrap and floating chrome, so the menu doesn't fade out
+   on the way to it. */
+.includeControls::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 8px;
+}
+
+.includeWrap:hover .includeControls,
+.includeWrap:focus-within .includeControls,
+.includeWrap[data-focused="true"] .includeControls,
+.includeWrap[data-menu-open="true"] .includeControls {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+:global(.react-renderer.node-transclusionSource.ProseMirror-selectednode),
+:global(.react-renderer.node-transclusionReference.ProseMirror-selectednode) {
+  outline: none;
+}
+
+@media (max-width: 48em) {
+  .transclusionWrap,
+  .includeWrap {
+    margin-left: -1rem;
+    margin-right: -1rem;
+    width: calc(100% + 2rem);
+  }
+
+  .transclusionWrap {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+@media print {
+  .transclusionControls,
+  .includeControls {
+    display: none !important;
+  }
+  .transclusionWrap,
+  .includeWrap {
+    border: none !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    width: 100% !important;
+    padding: 0 !important;
+  }
+}
+
+.editingOriginalTag {
+  display: inline-block;
+  padding: 0 6px;
+  font-size: var(--mantine-font-size-xs);
+  font-weight: 500;
+  color: var(--mantine-color-blue-7);
+  background: light-dark(
+    var(--mantine-color-blue-0),
+    var(--mantine-color-blue-9)
+  );
+  border-radius: var(--mantine-radius-sm);
+}

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

@@ -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,
@@ -17,6 +18,7 @@ import {
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { getFileUrl } from "@/lib/config.ts";
+import { useAltTextControl } from "@/features/editor/components/common/use-alt-text-control.tsx";
 import classes from "../common/toolbar-menu.module.css";
 
 export function VideoMenu({ editor }: EditorMenuProps) {
@@ -37,6 +39,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
         isAlignCenter: ctx.editor.isActive("video", { align: "center" }),
         isAlignRight: ctx.editor.isActive("video", { align: "right" }),
         src: videoAttrs?.src || null,
+        alt: videoAttrs?.alt || "",
       };
     },
   });
@@ -53,7 +56,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);
@@ -111,6 +114,16 @@ export function VideoMenu({ editor }: EditorMenuProps) {
     editor.commands.deleteSelection();
   }, [editor]);
 
+  const {
+    button: altTextButton,
+    panel: altTextPanel,
+    isEditing: isEditingAlt,
+  } = useAltTextControl({
+    editor,
+    nodeName: "video",
+    currentAlt: editorState?.alt || "",
+  });
+
   return (
     <BaseBubbleMenu
       editor={editor}
@@ -124,7 +137,10 @@ export function VideoMenu({ editor }: EditorMenuProps) {
       }}
       shouldShow={shouldShow}
     >
-      <div className={classes.toolbar}>
+      {isEditingAlt ? (
+        altTextPanel
+      ) : (
+        <div className={classes.toolbar}>
         <Tooltip position="top" label={t("Align left")} withinPortal={false}>
           <ActionIcon
             onClick={alignLeft}
@@ -163,6 +179,10 @@ export function VideoMenu({ editor }: EditorMenuProps) {
 
         <div className={classes.divider} />
 
+        {altTextButton}
+
+        <div className={classes.divider} />
+
         <Tooltip position="top" label={t("Download")} withinPortal={false}>
           <ActionIcon
             onClick={handleDownload}
@@ -184,7 +204,8 @@ export function VideoMenu({ editor }: EditorMenuProps) {
             <IconTrash size={18} />
           </ActionIcon>
         </Tooltip>
-      </div>
+        </div>
+      )}
     </BaseBubbleMenu>
   );
 }

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

@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 export default function VideoView(props: NodeViewProps) {
   const { t } = useTranslation();
   const { editor, node, selected } = props;
-  const { src, width, align, aspectRatio, placeholder } = node.attrs;
+  const { src, width, align, alt, aspectRatio, placeholder } = node.attrs;
   const alignClass = useMemo(() => {
     if (align === "left") return "alignLeft";
     if (align === "right") return "alignRight";
@@ -47,6 +47,7 @@ export default function VideoView(props: NodeViewProps) {
             preload="metadata"
             controls
             src={getFileUrl(src)}
+            aria-label={alt || undefined}
           />
         )}
         {!src && previewSrc && (
@@ -56,6 +57,7 @@ export default function VideoView(props: NodeViewProps) {
               preload="metadata"
               controls
               src={previewSrc}
+              aria-label={placeholder?.name || t("Video")}
             />
             <Loader size={20} pos="absolute" top={6} right={6} />
           </Group>
@@ -71,7 +73,7 @@ export default function VideoView(props: NodeViewProps) {
           </Group>
         )}
         {!src && !previewSrc && !placeholder && (
-          <video className={classes.video} controls />
+          <video className={classes.video} controls aria-label={t("Video")} />
         )}
       </div>
     </NodeViewWrapper>

apps/client/src/features/editor/extensions/clean-styles.ts

@@ -0,0 +1,20 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+export const CleanStyles = Extension.create({
+  name: "cleanStyles",
+  priority: 80,
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey("cleanStyles"),
+        props: {
+          transformPastedHTML(html) {
+            return html.replace(/\s+style="[^"]*"/gi, "");
+          },
+        },
+      }),
+    ];
+  },
+});

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

@@ -0,0 +1,517 @@
+import { Extension } from "@tiptap/core";
+import {
+  NodeSelection,
+  Plugin,
+  PluginKey,
+  TextSelection,
+} from "@tiptap/pm/state";
+import { Fragment, Slice, Node } from "@tiptap/pm/model";
+import { EditorView } from "@tiptap/pm/view";
+
+export interface GlobalDragHandleOptions {
+  /**
+   * The width of the drag handle
+   */
+  dragHandleWidth: number;
+
+  /**
+   * The treshold for scrolling
+   */
+  scrollThreshold: number;
+
+  /*
+   * The css selector to query for the drag handle. (eg: '.custom-handle').
+   * If handle element is found, that element will be used as drag handle. If not, a default handle will be created
+   */
+  dragHandleSelector?: string;
+
+  /**
+   * Tags to be excluded for drag handle
+   */
+  excludedTags: string[];
+
+  /**
+   * Custom nodes to be included for drag handle
+   */
+  customNodes: string[];
+}
+function absoluteRect(node: Element) {
+  const data = node.getBoundingClientRect();
+  const modal = node.closest('[role="dialog"]');
+
+  if (modal && window.getComputedStyle(modal).transform !== "none") {
+    const modalRect = modal.getBoundingClientRect();
+
+    return {
+      top: data.top - modalRect.top,
+      left: data.left - modalRect.left,
+      width: data.width,
+    };
+  }
+  return {
+    top: data.top,
+    left: data.left,
+    width: data.width,
+  };
+}
+
+function nodeDOMAtCoords(
+  coords: { x: number; y: number },
+  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)",
+    "pre",
+    "blockquote",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    // Tables nested in another block (toggle, transclusion, …) have a
+    // wrapper that isn't a direct child of .ProseMirror, so the
+    // parent-check below skips it. Match the wrapper explicitly so the
+    // handle shows up even with empty cells.
+    ".tableWrapper",
+    ...customParagraphSelectors,
+    ...customSelectors,
+  ].join(", ");
+  return document
+    .elementsFromPoint(coords.x, coords.y)
+    .find((elem: Element) => {
+      // Skip elements that belong to a nested editor (e.g. transclusion
+      // references render their own ProseMirror instance). Only consider
+      // elements whose closest editor is this host view.
+      if (elem.closest(".ProseMirror") !== view.dom) return false;
+      return (
+        elem.parentElement?.matches?.(".ProseMirror") ||
+        elem.matches(selectors)
+      );
+    });
+}
+function nodePosAtDOM(
+  node: Element,
+  view: EditorView,
+  options: GlobalDragHandleOptions,
+) {
+  const boundingRect = node.getBoundingClientRect();
+
+  return view.posAtCoords({
+    left: boundingRect.left + 50 + options.dragHandleWidth,
+    top: boundingRect.top + 1,
+  })?.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);
+  return pos;
+}
+
+export function DragHandlePlugin(
+  options: GlobalDragHandleOptions & { pluginKey: string },
+) {
+  let listType = "";
+  function handleDragStart(event: DragEvent, view: EditorView) {
+    view.focus();
+
+    if (!event.dataTransfer) return;
+
+    const node = nodeDOMAtCoords(
+      {
+        x: event.clientX + 50 + options.dragHandleWidth,
+        y: event.clientY,
+      },
+      options,
+      view,
+    );
+
+    if (!(node instanceof Element)) return;
+
+    let draggedNodePos = nodePosAtDOM(node, view, options);
+    if (draggedNodePos == null || draggedNodePos < 0) return;
+    draggedNodePos = calcNodePos(draggedNodePos, view);
+
+    const { from, to } = view.state.selection;
+    const diff = from - to;
+
+    const fromSelectionPos = calcNodePos(from, view);
+    let differentNodeSelected = false;
+
+    const nodePos = view.state.doc.resolve(fromSelectionPos);
+
+    if (nodePos.node().type.name === "doc") differentNodeSelected = true;
+    else {
+      const nodeSelection = NodeSelection.create(
+        view.state.doc,
+        nodePos.before(),
+      );
+
+      // Check if the node where the drag event started is part of the current selection
+      differentNodeSelected = !(
+        draggedNodePos + 1 >= nodeSelection.$from.pos &&
+        draggedNodePos <= nodeSelection.$to.pos
+      );
+    }
+    let selection = view.state.selection;
+    if (
+      !differentNodeSelected &&
+      diff !== 0 &&
+      !(view.state.selection instanceof NodeSelection)
+    ) {
+      const endSelection = NodeSelection.create(view.state.doc, to - 1);
+      selection = TextSelection.create(
+        view.state.doc,
+        draggedNodePos,
+        endSelection.$to.pos,
+      );
+    } else {
+      selection = NodeSelection.create(view.state.doc, draggedNodePos);
+
+      const $sel = view.state.doc.resolve(selection.from);
+
+      if (isCustomNodeDOM(node, options)) {
+        // The drag landed on a custom-node container (transclusion etc.).
+        // Walk up to the matching node so the drag moves the whole
+        // container, not whatever inner element the click landed on.
+        const customTypes = new Set(options.customNodes);
+        for (let d = $sel.depth; d > 0; d--) {
+          if (customTypes.has($sel.node(d).type.name)) {
+            selection = NodeSelection.create(
+              view.state.doc,
+              $sel.before(d),
+            );
+            break;
+          }
+        }
+      } else {
+        // If the selected node lives inside a table (at any nesting
+        // depth), promote to the whole table — the global drag handle is
+        // meant to move the table as a single block, not a row/cell. The
+        // earlier tableRow-only check only worked when the table sat at
+        // the doc root; once wrapped in another node (toggle, layout,
+        // etc.) the selection lands on a cell/paragraph and that check
+        // never fired.
+        let tableDepth = -1;
+        for (let d = $sel.depth; d > 0; d--) {
+          if ($sel.node(d).type.name === "table") {
+            tableDepth = d;
+            break;
+          }
+        }
+        if (tableDepth > 0) {
+          selection = NodeSelection.create(
+            view.state.doc,
+            $sel.before(tableDepth),
+          );
+        } else if ((selection as NodeSelection).node.type.isInline) {
+          // Inline node (e.g. mention): walk up to the parent block.
+          selection = NodeSelection.create(view.state.doc, $sel.before());
+        }
+      }
+    }
+    view.dispatch(view.state.tr.setSelection(selection));
+
+    // If the selected node is a list item, we need to save the type of the wrapping list e.g. OL or UL
+    if (
+      view.state.selection instanceof NodeSelection &&
+      view.state.selection.node.type.name === "listItem"
+    ) {
+      listType = node.parentElement!.tagName;
+    }
+
+    const slice = view.state.selection.content();
+    const { dom, text } = view.serializeForClipboard(slice);
+
+    event.dataTransfer.clearData();
+    event.dataTransfer.setData("text/html", dom.innerHTML);
+    event.dataTransfer.setData("text/plain", text);
+    event.dataTransfer.effectAllowed = "move";
+
+    event.dataTransfer.setDragImage(node, 0, 0);
+
+    view.dragging = { slice, move: event.ctrlKey };
+  }
+
+  let dragHandleElement: HTMLElement | null = null;
+
+  function hideDragHandle() {
+    if (dragHandleElement) {
+      dragHandleElement.classList.add("hide");
+    }
+  }
+
+  function showDragHandle() {
+    if (dragHandleElement) {
+      dragHandleElement.classList.remove("hide");
+    }
+  }
+
+  function hideHandleOnEditorOut(event: MouseEvent) {
+    if (event.target instanceof Element) {
+      // Check if the relatedTarget class is still inside the editor
+      const relatedTarget = event.relatedTarget as HTMLElement;
+      const isInsideEditor =
+        relatedTarget?.classList.contains("tiptap") ||
+        relatedTarget?.classList.contains("drag-handle");
+
+      if (isInsideEditor) return;
+    }
+    hideDragHandle();
+  }
+
+  return new Plugin({
+    key: new PluginKey(options.pluginKey),
+    view: (view) => {
+      const handleBySelector = options.dragHandleSelector
+        ? document.querySelector<HTMLElement>(options.dragHandleSelector)
+        : null;
+      dragHandleElement = handleBySelector ?? document.createElement("div");
+      dragHandleElement.draggable = true;
+      dragHandleElement.dataset.dragHandle = "";
+      dragHandleElement.classList.add("drag-handle");
+
+      function onDragHandleDragStart(e: DragEvent) {
+        handleDragStart(e, view);
+      }
+
+      dragHandleElement.addEventListener("dragstart", onDragHandleDragStart);
+
+      function onDragHandleDrag(e: DragEvent) {
+        hideDragHandle();
+        let scrollY = window.scrollY;
+        if (e.clientY < options.scrollThreshold) {
+          window.scrollTo({ top: scrollY - 30, behavior: "smooth" });
+        } else if (window.innerHeight - e.clientY < options.scrollThreshold) {
+          window.scrollTo({ top: scrollY + 30, behavior: "smooth" });
+        }
+      }
+
+      dragHandleElement.addEventListener("drag", onDragHandleDrag);
+
+      hideDragHandle();
+
+      if (!handleBySelector) {
+        view?.dom?.parentElement?.appendChild(dragHandleElement);
+      }
+      view?.dom?.parentElement?.addEventListener(
+        "mouseout",
+        hideHandleOnEditorOut,
+      );
+
+      return {
+        destroy: () => {
+          if (!handleBySelector) {
+            dragHandleElement?.remove?.();
+          }
+          dragHandleElement?.removeEventListener("drag", onDragHandleDrag);
+          dragHandleElement?.removeEventListener(
+            "dragstart",
+            onDragHandleDragStart,
+          );
+          dragHandleElement = null;
+          view?.dom?.parentElement?.removeEventListener(
+            "mouseout",
+            hideHandleOnEditorOut,
+          );
+        },
+      };
+    },
+    props: {
+      handleDOMEvents: {
+        mousemove: (view, event) => {
+          if (!view.editable) {
+            return;
+          }
+
+          const node = nodeDOMAtCoords(
+            {
+              x: event.clientX + 50 + options.dragHandleWidth,
+              y: event.clientY,
+            },
+            options,
+            view,
+          );
+
+          const notDragging = node?.closest(".not-draggable");
+          const excludedTagList = options.excludedTags
+            .concat(["ol", "ul"])
+            .join(", ");
+
+          if (
+            !(node instanceof Element) ||
+            node.matches(excludedTagList) ||
+            notDragging
+          ) {
+            hideDragHandle();
+            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)
+            ? parseInt(compStyle.fontSize) * 1.2
+            : parsedLineHeight;
+          const paddingTop = parseInt(compStyle.paddingTop, 10);
+
+          const rect = absoluteRect(node);
+
+          rect.top += (lineHeight - 24) / 2;
+          rect.top += paddingTop;
+          // Li markers
+          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;
+
+          dragHandleElement.style.left = `${rect.left - rect.width}px`;
+          dragHandleElement.style.top = `${rect.top}px`;
+          showDragHandle();
+        },
+        keydown: () => {
+          hideDragHandle();
+        },
+        mousewheel: () => {
+          hideDragHandle();
+        },
+        // dragging class is used for CSS
+        dragstart: (view) => {
+          view.dom.classList.add("dragging");
+        },
+        drop: (view, event) => {
+          view.dom.classList.remove("dragging");
+          hideDragHandle();
+          let droppedNode: Node | null = null;
+          const dropPos = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY,
+          });
+
+          if (!dropPos) return;
+
+          if (view.state.selection instanceof NodeSelection) {
+            droppedNode = view.state.selection.node;
+          }
+          if (!droppedNode) return;
+
+          const resolvedPos = view.state.doc.resolve(dropPos.pos);
+
+          const isDroppedInsideList =
+            resolvedPos.parent.type.name === "listItem";
+
+          // If the selected node is a list item and is not dropped inside a list, we need to wrap it inside <ol> tag otherwise ol list items will be transformed into ul list item when dropped
+          if (
+            view.state.selection instanceof NodeSelection &&
+            view.state.selection.node.type.name === "listItem" &&
+            !isDroppedInsideList &&
+            listType == "OL"
+          ) {
+            const newList = view.state.schema.nodes.orderedList?.createAndFill(
+              null,
+              droppedNode,
+            );
+            const slice = new Slice(Fragment.from(newList), 0, 0);
+            view.dragging = { slice, move: event.ctrlKey };
+          }
+        },
+        dragend: (view) => {
+          view.dom.classList.remove("dragging");
+        },
+      },
+    },
+  });
+}
+
+const GlobalDragHandle = Extension.create({
+  name: "globalDragHandle",
+
+  addOptions() {
+    return {
+      dragHandleWidth: 20,
+      scrollThreshold: 100,
+      excludedTags: [],
+      customNodes: [],
+    };
+  },
+
+  addProseMirrorPlugins() {
+    return [
+      DragHandlePlugin({
+        pluginKey: "globalDragHandle",
+        dragHandleWidth: this.options.dragHandleWidth,
+        scrollThreshold: this.options.scrollThreshold,
+        dragHandleSelector: this.options.dragHandleSelector,
+        excludedTags: this.options.excludedTags,
+        customNodes: this.options.customNodes,
+      }),
+    ];
+  },
+});
+
+export default GlobalDragHandle;

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

@@ -9,9 +9,10 @@ import SubScript from "@tiptap/extension-subscript";
 import { Typography } from "@tiptap/extension-typography";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
-import GlobalDragHandle from "tiptap-extension-global-drag-handle";
 import { Youtube } from "@tiptap/extension-youtube";
-import SlashCommand, { SlashCommandExtension as Command } from "@/features/editor/extensions/slash-command";
+import SlashCommand, {
+  SlashCommandExtension as Command,
+} from "@/features/editor/extensions/slash-command";
 import renderItems from "@/features/editor/components/slash-menu/render-items";
 import getSuggestionItems from "@/features/editor/components/slash-menu/menu-items";
 import { Collaboration, isChangeOrigin } from "@tiptap/extension-collaboration";
@@ -41,17 +42,25 @@ import {
   Excalidraw,
   Embed,
   TiptapPdf,
+  PageBreak,
   SearchAndReplace,
   Mention,
   TableDndExtension,
+  TableHandleCommandsExtension,
+  TableHeaderPin,
+  TableReadonlySort,
   Subpages,
   Heading,
   Highlight,
+  Indent,
   UniqueID,
   SharedStorage,
   Columns,
   Column,
   Status,
+  TransclusionSource,
+  TransclusionReference,
+  TableView,
   BaseEmbed as BaseEmbedNode,
 } from "@docmost/editor-ext";
 import {
@@ -77,10 +86,12 @@ 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";
+import TransclusionView from "@/features/editor/components/transclusion/transclusion-view.tsx";
+import TransclusionReferenceView from "@/features/editor/components/transclusion/transclusion-reference-view.tsx";
 import { BaseEmbedView } from "@/features/editor/components/base-embed/base-embed-view.tsx";
 import { common, createLowlight } from "lowlight";
 import plaintext from "highlight.js/lib/languages/plaintext";
@@ -102,6 +113,8 @@ import { MarkdownClipboard } from "@/features/editor/extensions/markdown-clipboa
 import EmojiCommand from "./emoji-command";
 import { countWords } from "alfaaz";
 import AutoJoiner from "@/features/editor/extensions/autojoiner.ts";
+import GlobalDragHandle from "@/features/editor/extensions/drag-handle.ts";
+import { CleanStyles } from "@/features/editor/extensions/clean-styles.ts";
 
 const lowlight = createLowlight(common);
 lowlight.register("mermaid", plaintext);
@@ -169,7 +182,7 @@ export const mainExtensions = [
   SharedStorage,
   Heading,
   UniqueID.configure({
-    types: ["heading", "paragraph"],
+    types: ["heading", "paragraph", "transclusionSource"],
     filterTransaction: (transaction) => !isChangeOrigin(transaction),
   }),
   Placeholder.configure({
@@ -199,6 +212,7 @@ export const mainExtensions = [
     showOnlyWhenEditable: true,
   }),
   TextAlign.configure({ types: ["heading", "paragraph"] }),
+  Indent,
   TaskList,
   TaskItem.configure({
     nested: true,
@@ -217,7 +231,9 @@ export const mainExtensions = [
   }),
   Typography,
   TrailingNode,
-  GlobalDragHandle,
+  GlobalDragHandle.configure({
+    customNodes: ["transclusionSource", "transclusionReference"],
+  }),
   TextStyle,
   Color,
   SlashCommand,
@@ -251,11 +267,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,
   }),
@@ -307,6 +328,8 @@ export const mainExtensions = [
     view: CodeBlockView,
     //@ts-ignore
     lowlight,
+    enableTabIndentation: true,
+    tabSize: 2,
     HTMLAttributes: {
       spellcheck: false,
     },
@@ -347,12 +370,19 @@ export const mainExtensions = [
   TiptapPdf.configure({
     view: PdfView,
   }),
+  PageBreak,
   Subpages.configure({
     view: SubpagesView,
   }),
   Status.configure({
     view: StatusView,
   }),
+  TransclusionSource.configure({
+    view: TransclusionView,
+  }),
+  TransclusionReference.configure({
+    view: TransclusionReferenceView,
+  }),
   BaseEmbedNode.extend({
     addNodeView() {
       return ReactNodeViewRenderer(BaseEmbedView);
@@ -361,6 +391,7 @@ export const mainExtensions = [
   MarkdownClipboard.configure({
     transformPastedText: true,
   }),
+  CleanStyles,
   CharacterCount.configure({
     wordCounter: (text) => countWords(text),
   }),
@@ -394,13 +425,18 @@ const TEMPLATE_EXCLUDED_SLASH_ITEMS = new Set([
   "Video",
   "File attachment",
   "Draw.io (diagrams.net)",
-  "Excalidraw diagram",
+  "Excalidraw (Whiteboard)",
+  "Audio",
+  "Synced block"
 ]);
 
 const TemplateSlashCommand = Command.configure({
   suggestion: {
     items: ({ query }: { query: string }) =>
-      getSuggestionItems({ query, excludeItems: TEMPLATE_EXCLUDED_SLASH_ITEMS }),
+      getSuggestionItems({
+        query,
+        excludeItems: TEMPLATE_EXCLUDED_SLASH_ITEMS,
+      }),
     render: renderItems,
   },
 });

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

@@ -80,10 +80,12 @@ export const MarkdownClipboard = Extension.create({
             const { from, to } = view.state.selection;
 
             const parsed = markdownToHtml(text.replace(/\n+$/, ""));
+            const body = elementFromString(parsed);
+            normalizeTableColumnWidths(body);
 
             const contentNodes = DOMParser.fromSchema(
               this.editor.schema,
-            ).parseSlice(elementFromString(parsed), {
+            ).parseSlice(body, {
               preserveWhitespace: true,
             });
 
@@ -137,3 +139,92 @@ function elementFromString(value) {
 
   return new window.DOMParser().parseFromString(wrappedValue, "text/html").body;
 }
+
+const DEFAULT_PASTE_COL_WIDTH_PX = 150;
+
+function parsePixelWidth(el: Element): number | null {
+  const attr = el.getAttribute("width");
+  if (attr) {
+    const n = parseInt(attr, 10);
+    if (Number.isFinite(n) && n > 0) return n;
+  }
+  const style = el.getAttribute("style") || "";
+  const m = style.match(/(?:^|;)\s*width\s*:\s*([\d.]+)\s*px/i);
+  if (m) {
+    const n = parseInt(m[1], 10);
+    if (Number.isFinite(n) && n > 0) return n;
+  }
+  return null;
+}
+
+function getFirstRow(table: Element): Element | null {
+  const tbodyRow = table.querySelector(":scope > tbody > tr");
+  if (tbodyRow) return tbodyRow;
+  const theadRow = table.querySelector(":scope > thead > tr");
+  if (theadRow) return theadRow;
+  return table.querySelector(":scope > tr");
+}
+
+function deriveColumnWidths(table: Element): (number | null)[] | null {
+  const cols = table.querySelectorAll(":scope > colgroup > col");
+  if (cols.length > 0) {
+    const widths: (number | null)[] = [];
+    cols.forEach((col) => widths.push(parsePixelWidth(col)));
+    if (widths.some((w) => w !== null)) return widths;
+  }
+
+  const firstRow = getFirstRow(table);
+  if (!firstRow) return null;
+
+  const widths: (number | null)[] = [];
+  Array.from(firstRow.children)
+    .filter((c) => c.tagName === "TD" || c.tagName === "TH")
+    .forEach((cell) => {
+      const colspan = parseInt(cell.getAttribute("colspan") || "1", 10) || 1;
+      const w = parsePixelWidth(cell);
+      for (let i = 0; i < colspan; i++) {
+        widths.push(w !== null ? Math.round(w / colspan) : null);
+      }
+    });
+  if (widths.length === 0 || widths.every((w) => w === null)) return null;
+  return widths;
+}
+
+// Mirror of server normalizeTableColumnWidths (see import/utils/table-utils.ts):
+// markdown source has no widths, so without this every pasted table renders
+// at table-layout:fixed/100% and squashes columns to fit the editor instead of
+// letting .tableWrapper's overflow-x: auto scroll.
+export function normalizeTableColumnWidths(root: Element): void {
+  root.querySelectorAll("table").forEach((table) => {
+    const firstRow = getFirstRow(table);
+    if (!firstRow) return;
+
+    let colWidths = deriveColumnWidths(table);
+    if (!colWidths) {
+      let count = 0;
+      Array.from(firstRow.children)
+        .filter((c) => c.tagName === "TD" || c.tagName === "TH")
+        .forEach((cell) => {
+          count += parseInt(cell.getAttribute("colspan") || "1", 10) || 1;
+        });
+      if (count === 0) return;
+      colWidths = new Array(count).fill(DEFAULT_PASTE_COL_WIDTH_PX);
+    }
+
+    let col = 0;
+    Array.from(firstRow.children)
+      .filter((c) => c.tagName === "TD" || c.tagName === "TH")
+      .forEach((cell) => {
+        if (cell.getAttribute("colwidth")) {
+          col += parseInt(cell.getAttribute("colspan") || "1", 10) || 1;
+          return;
+        }
+        const colspan = parseInt(cell.getAttribute("colspan") || "1", 10) || 1;
+        const slice = colWidths!.slice(col, col + colspan);
+        col += colspan;
+        if (slice.length === 0 || slice.every((w) => w === null)) return;
+        const values = slice.map((w) => (w == null ? 100 : w));
+        cell.setAttribute("colwidth", values.join(","));
+      });
+  });
+}

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

@@ -1,32 +1,47 @@
 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 {
+  ActionIcon,
   Container,
   Divider,
   Group,
   Popover,
   Stack,
   Text,
+  Tooltip,
   UnstyledButton,
 } from "@mantine/core";
+import { IconInfoCircle } from "@tabler/icons-react";
 import { useAtom } from "jotai";
 import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { PageVerificationBadge } from "@/ee/page-verification";
 import { useTranslation } from "react-i18next";
 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 { useAsideTriggerProps } 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;
@@ -34,7 +49,7 @@ export interface FullEditorProps {
   content: string;
   spaceSlug: string;
   editable: boolean;
-  creator?: PageCreator;
+  creator?: PageUser;
   contributors?: IContributor[];
   canComment?: boolean;
 }
@@ -52,6 +67,23 @@ export function FullEditor({
 }: FullEditorProps) {
   const [user] = useAtom(userAtom);
   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 = 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
@@ -59,6 +91,10 @@ export function FullEditor({
       size={!fullPageWidth && 900}
       className={classes.editor}
     >
+      {editorToolbarEnabled && editable && isEditMode && (
+        <MemoizedFixedToolbar />
+      )}
+      <MemoizedDeletedPageBanner slugId={slugId} />
       <MemoizedTitleEditor
         pageId={pageId}
         slugId={slugId}
@@ -82,17 +118,14 @@ 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 detailsTriggerProps = useAsideTriggerProps("details");
 
   const otherContributors = (contributors ?? []).filter(
     (c) => c.id !== creator?.id,
@@ -102,13 +135,15 @@ function PageByline({
     <Group
       gap="sm"
       mb="md"
-      className="print-hide"
-      style={{ marginTop: "-0.5em", paddingLeft: "3rem" }}
+      className={clsx("print-hide", classes.byline)}
+      style={{ marginTop: "-0.5em" }}
     >
       {creator && (
         <Popover position="bottom-start" shadow="md" width={280} withArrow>
           <Popover.Target>
-            <UnstyledButton>
+            <UnstyledButton
+              aria-label={t("Created by {{name}}", { name: creator.name })}
+            >
               <Group gap={6}>
                 <CustomAvatar
                   avatarUrl={creator.avatarUrl}
@@ -165,6 +200,17 @@ function PageByline({
           </Popover.Dropdown>
         </Popover>
       )}
+      <Tooltip label={t("Details")} withArrow openDelay={250}>
+        <ActionIcon
+          variant="subtle"
+          color="gray"
+          aria-label={t("Details")}
+          {...detailsTriggerProps}
+        >
+          <IconInfoCircle size={20} stroke={1.5} />
+        </ActionIcon>
+      </Tooltip>
+
       <PageVerificationBadge readOnly={readOnly} />
     </Group>
   );

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

@@ -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";
@@ -42,8 +43,8 @@ import {
 import CommentDialog from "@/features/comment/components/comment-dialog";
 import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
 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 +54,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";
@@ -62,7 +63,7 @@ import { useIdle } from "@/hooks/use-idle.ts";
 import { queryClient } from "@/main.tsx";
 import { IPage } from "@/features/page/types/page.types.ts";
 import { useParams } from "react-router-dom";
-import { extractPageSlugId } from "@/lib";
+import { extractPageSlugId, platformModifierKey } from "@/lib";
 import { FIVE_MINUTES } from "@/lib/constants.ts";
 import { PageEditMode } from "@/features/user/types/user.types.ts";
 import { jwtDecode } from "jwt-decode";
@@ -71,6 +72,8 @@ import { useEditorScroll } from "./hooks/use-editor-scroll";
 import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";
 import { EditorLinkMenu } from "@/features/editor/components/link/link-menu";
 import ColumnsMenu from "@/features/editor/components/columns/columns-menu.tsx";
+import { TransclusionLookupProvider } from "@/features/editor/components/transclusion/transclusion-lookup-context";
+import { useTranslation } from "react-i18next";
 
 interface PageEditorProps {
   pageId: string;
@@ -85,6 +88,7 @@ export default function PageEditor({
   content,
   canComment,
 }: PageEditorProps) {
+  const { t } = useTranslation();
   const collaborationURL = useCollaborationUrl();
   const isComponentMounted = useRef(false);
   const editorRef = useRef<Editor | null>(null);
@@ -110,8 +114,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],
@@ -230,13 +233,16 @@ export default function PageEditor({
       editorProps: {
         scrollThreshold: 80,
         scrollMargin: 80,
+        attributes: {
+          "aria-label": t("Page content"),
+        },
         handleDOMEvents: {
           keydown: (_view, event) => {
-            if ((event.ctrlKey || event.metaKey) && event.code === "KeyS") {
+            if (platformModifierKey(event) && event.code === "KeyS") {
               event.preventDefault();
               return true;
             }
-            if ((event.ctrlKey || event.metaKey) && event.code === "KeyK") {
+            if (platformModifierKey(event) && event.code === "KeyK") {
               searchSpotlight.open();
               return true;
             }
@@ -363,19 +369,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);
@@ -391,55 +387,63 @@ export default function PageEditor({
     }
   }, [yjsConnectionStatus, isSynced]);
 
-  if (showStatic) {
-    return (
-      <EditorProvider
-        editable={false}
-        immediatelyRender={true}
-        extensions={mainExtensions}
-        content={content}
-      />
-    );
-  }
-
   return (
-    <div className="editor-container" style={{ position: "relative" }}>
-      <div ref={menuContainerRef}>
-        <EditorContent editor={editor} />
+    <TransclusionLookupProvider>
+      {showStatic ? (
+        <EditorProvider
+          editable={false}
+          immediatelyRender={true}
+          extensions={mainExtensions}
+          content={content}
+          editorProps={{
+            attributes: {
+              "aria-label": t("Page content"),
+            },
+          }}
+        />
+      ) : (
+        <div className="editor-container" style={{ position: "relative" }}>
+          <div ref={menuContainerRef}>
+            <EditorContent editor={editor} />
 
-        {editor && (
-          <SearchAndReplaceDialog editor={editor} editable={editable} />
-        )}
+            {editor && (
+              <SearchAndReplaceDialog editor={editor} editable={editable} />
+            )}
 
-        {editor && editorIsEditable && (
-          <div>
-            <EditorAiMenu editor={editor} />
-            <EditorLinkMenu editor={editor} />
-            <EditorBubbleMenu editor={editor} />
-            <TableMenu editor={editor} />
-            <TableCellMenu editor={editor} appendTo={menuContainerRef} />
-            <ImageMenu editor={editor} />
-            <VideoMenu editor={editor} />
-            <PdfMenu editor={editor} />
-            <CalloutMenu editor={editor} />
-            <SubpagesMenu editor={editor} />
-            <ExcalidrawMenu editor={editor} />
-            <DrawioMenu editor={editor} />
-            <ColumnsMenu editor={editor} />
+            {editor && editorIsEditable && (
+              <div>
+                <EditorAiMenu editor={editor} />
+                <EditorLinkMenu editor={editor} />
+                <EditorBubbleMenu editor={editor} />
+                <TableMenu editor={editor} />
+                <TableHandlesLayer editor={editor} />
+                <ImageMenu editor={editor} />
+                <VideoMenu editor={editor} />
+                <PdfMenu editor={editor} />
+                <CalloutMenu editor={editor} />
+                <SubpagesMenu editor={editor} />
+                <ExcalidrawMenu editor={editor} />
+                <DrawioMenu editor={editor} />
+                <ColumnsMenu editor={editor} />
+              </div>
+            )}
+            {editor &&
+              !editorIsEditable &&
+              (editable || canComment) &&
+              providersRef.current && <ReadonlyBubbleMenu editor={editor} />}
+            {showCommentPopup && (
+              <CommentDialog editor={editor} pageId={pageId} />
+            )}
+            {showReadOnlyCommentPopup && (
+              <CommentDialog editor={editor} pageId={pageId} readOnly />
+            )}
           </div>
-        )}
-        {editor && !editorIsEditable && (editable || canComment) && providersRef.current && (
-          <ReadonlyBubbleMenu editor={editor} />
-        )}
-        {showCommentPopup && <CommentDialog editor={editor} pageId={pageId} />}
-        {showReadOnlyCommentPopup && (
-          <CommentDialog editor={editor} pageId={pageId} readOnly />
-        )}
-      </div>
-      <div
-        onClick={() => editor.commands.focus("end")}
-        style={{ paddingBottom: "20vh" }}
-      ></div>
-    </div>
+          <div
+            onClick={() => editor.commands.focus("end")}
+            style={{ paddingBottom: "20vh" }}
+          ></div>
+        </div>
+      )}
+    </TransclusionLookupProvider>
   );
 }

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

@@ -9,17 +9,26 @@ import { Placeholder } from "@tiptap/extension-placeholder";
 import { useAtom } from "jotai";
 import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
 import { useEditorScroll } from "./hooks/use-editor-scroll";
+import { TransclusionLookupProvider } from "@/features/editor/components/transclusion/transclusion-lookup-context";
 
 interface PageEditorProps {
   title: string;
   content: any;
   pageId?: string;
+  /**
+   * When rendering inside a public share, pass the share's id (or key). Lookups
+   * for transclusion content then resolve against the share graph instead of
+   * the viewer's personal permissions, so a share never leaks source content
+   * that isn't itself shared.
+   */
+  shareId?: string;
 }
 
 export default function ReadonlyPageEditor({
   title,
   content,
   pageId,
+  shareId,
 }: PageEditorProps) {
   const [, setReadOnlyEditor] = useAtom(readOnlyEditorAtom);
   const isComponentMounted = useRef(false);
@@ -65,7 +74,7 @@ export default function ReadonlyPageEditor({
   ];
 
   return (
-    <>
+    <TransclusionLookupProvider shareId={shareId}>
       <div className="page-title">
         <EditorProvider
           editable={false}
@@ -95,6 +104,6 @@ export default function ReadonlyPageEditor({
         }}
       ></EditorProvider>
       <div style={{ paddingBottom: "20vh" }}></div>
-    </>
+    </TransclusionLookupProvider>
   );
 }