update axios

* switch to default codeblock tab handling

* feat(editor): indentation

apps/client/package.json

@@ -25,7 +25,7 @@
     "@tabler/icons-react": "^3.40.0",
     "@tanstack/react-query": "5.90.17",
     "alfaaz": "^1.1.0",
-    "axios": "1.15.0",
+    "axios": "1.16.0",
     "blueimp-load-image": "^5.16.0",
     "clsx": "^2.1.1",
     "emoji-mart": "^5.6.0",

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

@@ -932,7 +932,6 @@
   "Settings navigation": "Settings navigation",
   "AI navigation": "AI navigation",
   "Breadcrumb": "Breadcrumb",
-  "Skip to main content": "Skip to main content"
   "Synced block": "Synced block",
   "Create a block that stays in sync across pages.": "Create a block that stays in sync across pages.",
   "Editing original": "Editing original",
@@ -946,5 +945,30 @@
   "No pages": "No pages",
   "The original synced block no longer exists": "The original synced block no longer exists",
   "You don't have access to this synced block": "You don't have access to this synced block",
-  "Failed to load this synced block": "Failed to load this synced block"
+  "Failed to load this synced block": "Failed to load this synced block",
+  "Fixed editor toolbar": "Fixed editor toolbar",
+  "Show a formatting toolbar above the editor with quick access to common actions.": "Show a formatting toolbar above the editor with quick access to common actions.",
+  "Toggle fixed editor toolbar": "Toggle fixed editor toolbar",
+  "Normal text": "Normal text",
+  "More inline formatting": "More inline formatting",
+  "Subscript": "Subscript",
+  "Superscript": "Superscript",
+  "Inline code": "Inline code",
+  "Insert media": "Insert media",
+  "Mention": "Mention",
+  "Emoji": "Emoji",
+  "Columns": "Columns",
+  "More inserts": "More inserts",
+  "Embeds": "Embeds",
+  "Diagrams": "Diagrams",
+  "Advanced": "Advanced",
+  "Utility": "Utility",
+  "Decrease indent": "Decrease indent",
+  "Increase indent": "Increase indent",
+  "Clear formatting": "Clear formatting",
+  "Code block": "Code block",
+  "Experimental": "Experimental",
+  "Strikethrough": "Strikethrough",
+  "Undo": "Undo",
+  "Redo": "Redo"
 }

apps/client/src/components/layouts/global/app-shell.module.css

@@ -27,23 +27,3 @@
     background: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-5))
   }
 }
-
-.skipLink {
-  position: fixed;
-  left: 8px;
-  top: 8px;
-  padding: 8px 12px;
-  background: var(--mantine-color-blue-6);
-  color: #fff;
-  border-radius: 4px;
-  text-decoration: none;
-  z-index: 1000;
-  transform: translateY(-150%);
-
-  &:focus {
-    transform: translateY(0);
-    outline: 2px solid var(--mantine-color-blue-3);
-  }
-}
-
-

apps/client/src/components/layouts/global/global-app-shell.tsx

@@ -81,11 +81,7 @@ export default function GlobalAppShell({
   const showGlobalSidebar = !isSpaceRoute && !isSettingsRoute && !isAiRoute;
 
   return (
-    <>
+    <AppShell
-      <a href="#main-content" className={classes.skipLink}>
-        {t("Skip to main content")}
-      </a>
-      <AppShell
       header={{ height: 45 }}
       navbar={{
         width: isSpaceRoute ? sidebarWidth : 300,
@@ -158,6 +154,5 @@ export default function GlobalAppShell({
         </AppShell.Aside>
       )}
     </AppShell>
-    </>
   );
 }

apps/client/src/components/settings/app-version.tsx

@@ -29,7 +29,7 @@ export default function AppVersion() {
       >
         <Indicator
           label={t("New update")}
-          color="dark"
+          color="gray"
           inline
           size={16}
           position="middle-end"

apps/client/src/components/ui/custom-avatar.tsx

@@ -42,6 +42,11 @@ function pickInitialsColor(name: string) {
   return SAFE_INITIALS_COLORS[hashName(name) % SAFE_INITIALS_COLORS.length];
 }
 
+function sanitizeInitialsSource(name: string) {
+  const sanitized = name.replace(/[^\p{L}\p{N}\s]/gu, " ").trim();
+  return sanitized || name;
+}
+
 export const CustomAvatar = React.forwardRef<
   HTMLInputElement,
   CustomAvatarProps
@@ -49,12 +54,13 @@ export const CustomAvatar = React.forwardRef<
   const avatarLink = getAvatarUrl(avatarUrl, type);
   const resolvedColor =
     !color || color === "initials" ? pickInitialsColor(name ?? "") : color;
+  const initialsSource = sanitizeInitialsSource(name ?? "");
 
   return (
     <Avatar
       ref={ref}
       src={avatarLink}
-      name={name}
+      name={initialsSource}
       alt={name}
       color={resolvedColor}
       {...props}

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
+        {!editorToolbarEnabled && (
-          editor={props.editor}
+          <>
-          isOpen={isNodeSelectorOpen}
+            <NodeSelector
-          setIsOpen={() => {
+              editor={props.editor}
-            setIsNodeSelectorOpen(!isNodeSelectorOpen);
+              isOpen={isNodeSelectorOpen}
-            setIsTextAlignmentOpen(false);
+              setIsOpen={() => {
-            setIsColorSelectorOpen(false);
+                setIsNodeSelectorOpen(!isNodeSelectorOpen);
-          }}
+                setIsTextAlignmentOpen(false);
-        />
+                setIsColorSelectorOpen(false);
+              }}
+            />
 
-        <TextAlignmentSelector
+            <TextAlignmentSelector
-          editor={props.editor}
+              editor={props.editor}
-          isOpen={isTextAlignmentSelectorOpen}
+              isOpen={isTextAlignmentSelectorOpen}
-          setIsOpen={() => {
+              setIsOpen={() => {
-            setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
+                setIsTextAlignmentOpen(!isTextAlignmentSelectorOpen);
-            setIsNodeSelectorOpen(false);
+                setIsNodeSelectorOpen(false);
-            setIsColorSelectorOpen(false);
+                setIsColorSelectorOpen(false);
-          }}
+              }}
-        />
+            />
 
-        <ActionIcon.Group>
+            <ActionIcon.Group>
-          {items.map((item, index) => (
+              {items.map((item, index) => (
-            <Tooltip key={index} label={t(item.name)} withArrow>
+                <Tooltip key={index} label={t(item.name)} withArrow>
-              <ActionIcon
+                  <ActionIcon
-                key={index}
+                    key={index}
-                variant="default"
+                    variant="default"
-                size="lg"
+                    size="lg"
-                radius="0"
+                    radius="0"
-                aria-label={t(item.name)}
+                    aria-label={t(item.name)}
-                className={clsx({ [classes.active]: item.isActive() })}
+                    className={clsx({ [classes.active]: item.isActive() })}
-                style={{ border: "none" }}
+                    style={{ border: "none" }}
-                onClick={item.command}
+                    onClick={item.command}
-              >
+                  >
-                <item.icon style={{ width: rem(16) }} stroke={2} />
+                    <item.icon style={{ width: rem(16) }} stroke={2} />
-              </ActionIcon>
+                  </ActionIcon>
-            </Tooltip>
+                </Tooltip>
-          ))}
+              ))}
-        </ActionIcon.Group>
+            </ActionIcon.Group>
 
-        <LinkSelector />
+            <LinkSelector />
 
-        <ColorSelector
+            <ColorSelector
-          editor={props.editor}
+              editor={props.editor}
-          isOpen={isColorSelectorOpen}
+              isOpen={isColorSelectorOpen}
-          setIsOpen={() => {
+              setIsOpen={() => {
-            setIsColorSelectorOpen(!isColorSelectorOpen);
+                setIsColorSelectorOpen(!isColorSelectorOpen);
-            setIsNodeSelectorOpen(false);
+                setIsNodeSelectorOpen(false);
-            setIsTextAlignmentOpen(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 || ""}
@@ -181,9 +244,8 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
         </Tooltip>
       </Popover.Target>
 
-      <Popover.Dropdown>
+      <Popover.Dropdown onMouseDown={(e) => e.preventDefault()}>
-        <ScrollArea.Autosize type="scroll" mah="400">
+        <Stack gap="md" p="2px">
-          <Stack gap="md">
             <Box>
               <Text size="sm" fw={600} mb="xs">
                 {t("Text color")}
@@ -207,6 +269,10 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                     <Box
                       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}
@@ -214,7 +280,9 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                         if (e.key === "Enter" || e.key === " ") {
                           e.preventDefault();
                           applyTextColor();
+                          return;
                         }
+                        handleColorKeyNav(e, index, "text");
                       }}
                       style={{
                         width: rem(28),
@@ -267,6 +335,9 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                     <Box
                       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}
@@ -274,7 +345,9 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                         if (e.key === "Enter" || e.key === " ") {
                           e.preventDefault();
                           applyHighlight();
+                          return;
                         }
+                        handleColorKeyNav(e, index, "highlight");
                       }}
                       style={{
                         width: rem(28),
@@ -310,16 +383,27 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
             <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

@@ -155,7 +155,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
   };
 
   return (
-    <Popover opened={isOpen} withArrow>
+    <Popover opened={isOpen} onChange={setIsOpen} withArrow>
       <Popover.Target>
         <Tooltip
           label={t("Turn into")}

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,15 +82,22 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
   const activeItem = items.filter((item) => item.isActive()).pop() ?? items[0];
 
   return (
-    <Popover opened={isOpen} withArrow>
+    <Menu
-      <Popover.Target>
+      shadow="md"
-        <Tooltip label={t("Text align")} withArrow withinPortal={false} disabled={isOpen}>
+      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"
@@ -99,33 +106,25 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
             <activeItem.icon style={{ width: rem(16) }} stroke={2} />
           </Button>
         </Tooltip>
-      </Popover.Target>
+      </Menu.Target>
 
-      <Popover.Dropdown>
+      <Menu.Dropdown>
-        <ScrollArea.Autosize type="scroll" mah={400}>
+        {items.map((item, index) => (
-          <Button.Group orientation="vertical">
+          <Menu.Item
-            {items.map((item, index) => (
+            key={index}
-              <Button
+            leftSection={<item.icon size={16} />}
-                key={index}
+            rightSection={
-                variant="default"
+              activeItem.name === item.name ? <IconCheck size={16} /> : null
-                leftSection={<item.icon size={16} />}
+            }
-                rightSection={
+            onClick={() => {
-                  activeItem.name === item.name && <IconCheck size={16} />
+              item.command();
-                }
+              setIsOpen(false);
-                justify="left"
+            }}
-                fullWidth
+          >
-                onClick={() => {
+            {t(item.name)}
-                  item.command();
+          </Menu.Item>
-                  setIsOpen(false);
+        ))}
-                }}
+      </Menu.Dropdown>
-                style={{ border: "none" }}
+    </Menu>
-              >
-                {t(item.name)}
-              </Button>
-            ))}
-          </Button.Group>
-        </ScrollArea.Autosize>
-      </Popover.Dropdown>
-    </Popover>
   );
 };

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 { buildEmojiIndex, getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";
-import { getFrequentlyUsedEmoji, sortFrequentlyUsedEmoji } from "./utils";
 
-const searchEmoji = async (value: string): Promise<EmojiMenuItemType[]> => {
+const MAX_RESULTS = 5;
-  if (value === "") {
+
-    const frequentlyUsedEmoji = getFrequentlyUsedEmoji();
+const searchEmoji = async (query: string): Promise<EmojiMenuItemType[]> => {
-    return sortFrequentlyUsedEmoji(frequentlyUsedEmoji);
+  if (query === "") {
+    return sortFrequentlyUsedEmoji(getFrequentlyUsedEmoji());
   }
 
-  const emojis = await SearchIndex.search(value);
+  const q = query.toLowerCase();
-  const results = emojis.map((emoji: any) => {
+  const index = await buildEmojiIndex();
-    return {
-      id: emoji.id,
-      emoji: emoji.skins[0].native,
-      command: ({ editor, range }: CommandProps) => {
-        editor
-          .chain()
-          .focus()
-          .deleteRange(range)
-          .insertContent(emoji.skins[0].native + " ")
-          .run();
-      },
-    };
-  });
 
-  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,154 +1,208 @@
-import {
+import { Loader, Paper, ScrollArea, Text, UnstyledButton } from "@mantine/core";
-  ActionIcon,
-  Loader,
-  Paper,
-  ScrollArea,
-  SimpleGrid,
-  Text,
-} from "@mantine/core";
-import { EmojiMenuItemType } from "./types";
 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;
-}) => {
+  query?: string;
-  const [selectedIndex, setSelectedIndex] = useState(0);
+}) {
-  const viewportRef = useRef<HTMLDivElement>(null);
+  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 listViewport = useRef<HTMLDivElement>(null);
+  const gridViewport = useRef<HTMLDivElement>(null);
+  const catBar = useRef<HTMLDivElement>(null);
 
-  const selectItem = useCallback(
+  const searching = query.length > 0;
-    (index: number) => {
+  const browseLoading = !searching && cats.length === 0;
-      const item = items[index];
+  const gridItems = cats.find((c) => c.id === activeCat)?.emojis ?? [];
-      if (item) {
+
-        command(item);
+  useEffect(() => {
-        incrementEmojiUsage(item.id);
+    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]);
+
+  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 = [
+    function onKey(e: KeyboardEvent) {
-      "ArrowRight",
+      if (searching) {
-      "ArrowLeft",
+        if      (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + 1, items.length - 1)); }
-      "ArrowUp",
+        else if (e.key === "ArrowUp")   { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
-      "ArrowDown",
+        else if (e.key === "Enter")     { e.preventDefault(); pickSearchItem(idx); }
-      "Enter",
+      } else if (focusZone === "tabs") {
-    ];
+        const catIdx = cats.findIndex((c) => c.id === activeCat);
-    const onKeyDown = (e: KeyboardEvent) => {
+        if      (e.key === "ArrowRight") { e.preventDefault(); const next = cats[Math.min(catIdx + 1, cats.length - 1)]; if (next) setActiveCat(next.id); }
-      if (navigationKeys.includes(e.key)) {
+        else if (e.key === "ArrowLeft")  { e.preventDefault(); const prev = cats[Math.max(catIdx - 1, 0)]; if (prev) setActiveCat(prev.id); }
-        e.preventDefault();
+        else if (e.key === "ArrowDown" || e.key === "Enter") { e.preventDefault(); setFocusZone("grid"); }
-
+        else if (e.key === "ArrowUp")    { e.preventDefault(); }
-        if (e.key === "ArrowRight") {
+      } else {
-          setSelectedIndex(
+        const total = gridItems.length;
-            selectedIndex + 1 < items.length ? selectedIndex + 1 : selectedIndex
+        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)); }
-          return true;
+        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]); }
-        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;
       }
-    };
+    }
-    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("keydown", onKey);
-    return () => {
+    return () => document.removeEventListener("keydown", onKey);
-      document.removeEventListener("keydown", onKeyDown);
+  }, [searching, items, idx, gridItems, pickSearchItem, pickGridItem, focusZone, cats, activeCat]);
-    };
-  }, [items, selectedIndex, setSelectedIndex]);
 
-  useEffect(() => {
+  return (
-    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"
+      p={0}
       shadow="md"
       withBorder
+      style={{ width: 280 }}
       role="listbox"
-      aria-label="Emoji results"
+      aria-label={t("Emoji picker")}
-      aria-activedescendant={
-        items.length > 0 ? `emoji-command-option-${selectedIndex}` : undefined
-      }
     >
-      {isLoading && <Loader m="xs" color="blue" type="dots" />}
+      {searching ? (
-      {items.length > 0 && (
+        <>
-        <ScrollArea.Autosize
+          {isLoading && <Loader m="xs" size="xs" color="blue" type="dots" />}
-          viewportRef={viewportRef}
+          <ScrollArea.Autosize mah={260} scrollbarSize={6} viewportRef={listViewport}>
-          mah={250}
+            <div style={{ padding: 4 }}>
-          scrollbarSize={8}
+              {items.length === 0 && !isLoading ? (
-          pr="5"
+                <Text size="sm" c="dimmed" p="xs">{t("No results")}</Text>
-        >
+              ) : items.map((item, i) => (
-          <SimpleGrid cols={GRID_COLUMNS} p="xs" spacing="xs">
+                <UnstyledButton
-            {items.map((item, index: number) => (
+                  key={item.id}
-              <ActionIcon
+                  data-i={i}
-                data-item-index={index}
+                  w="100%"
-                id={`emoji-command-option-${index}`}
+                  className={clsx(classes.row, { [classes.active]: i === idx })}
-                role="option"
+                  onClick={() => pickSearchItem(i)}
-                aria-selected={index === selectedIndex}
+                  onMouseEnter={() => setIdx(i)}
-                aria-label={item.id}
+                  role="option"
-                variant="transparent"
+                  aria-selected={i === idx}
-                key={item.id}
+                >
-                className={clsx(classes.menuBtn, {
+                  <span style={{ fontSize: 20, lineHeight: 1, minWidth: 26 }}>{item.emoji}</span>
-                  [classes.selectedItem]: index === selectedIndex,
+                  <Text size="sm" c="dimmed" ff="monospace" span>:{item.id}:</Text>
-                })}
+                </UnstyledButton>
-                onClick={() => selectItem(index)}
+              ))}
-              >
+            </div>
-                <Text size="xl">{item.emoji}</Text>
+          </ScrollArea.Autosize>
-              </ActionIcon>
+        </>
-            ))}
+      ) : browseLoading ? (
-          </SimpleGrid>
+        <Loader m="xs" size="xs" color="blue" type="dots" />
-        </ScrollArea.Autosize>
+      ) : (
+        <>
+          <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}
+                  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}:`}
+                  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 { CommandProps, EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";
-import { getEmojiDataFromNative } from "emoji-mart";
-import { EmojiMartFrequentlyType, EmojiMenuItemType } from "./types";
-
-export const GRID_COLUMNS = 10;
 
 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("@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 =
+  const stored = JSON.parse(
-    JSON.parse(localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART);
+    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)
   );
+  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(
+  const index = await buildEmojiIndex();
-    Object.entries(frequentlyUsedEmoji).map(
+  const results: EmojiMenuItemType[] = Object.entries(frequentlyUsedEmoji)
-      async ([id, count]): Promise<EmojiMenuItemType> => ({
+    .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,
+        emoji: entry.native,
-        command: async ({ editor, range }: CommandProps) => {
+        command: ({ editor, range }: CommandProps) => {
-          editor
+          editor.chain().focus().deleteRange(range).insertContent(entry.native + " ").run();
-            .chain()
-            .focus()
-            .deleteRange(range)
-            .insertContent((await getEmojiDataFromNative(id))?.native + " ")
-            .run();
         },
-      })
+      };
-    )
+    })
-  );
+    .filter((e): e is EmojiMenuItemType => e !== null);
-  return data.sort((a, b) => b.count - a.count);
+  return results.sort((a, b) => (b.count ?? 0) - (a.count ?? 0)).slice(0, 5);
 };
 
-export const getFrequentlyUsedEmoji = () => {
+export const getFrequentlyUsedEmoji = (): EmojiMartFrequentlyType => {
-  return JSON.parse(localStorage.getItem(LOCAL_STORAGE_FREQUENT_KEY) || DEFAULT_FREQUENTLY_USED_EMOJI_MART);
+  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("@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/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: 50;
+  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,65 @@
+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}
+        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,108 @@
+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,
+  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.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/slash-menu/menu-items.ts

@@ -25,6 +25,7 @@ import {
   IconColumns3,
   IconColumns2,
   IconTag,
+  IconMoodSmile,
   IconRotate2,
 } from "@tabler/icons-react";
 import {
@@ -477,6 +478,15 @@ 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",

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

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

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

@@ -17,6 +17,8 @@ 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";
 
 const MemoizedTitleEditor = React.memo(TitleEditor);
 const MemoizedPageEditor = React.memo(PageEditor);
@@ -52,6 +54,11 @@ export function FullEditor({
 }: FullEditorProps) {
   const [user] = useAtom(userAtom);
   const fullPageWidth = user.settings?.preferences?.fullPageWidth;
+  const editorToolbarEnabled =
+    user.settings?.preferences?.editorToolbar ?? false;
+  const userPageEditMode =
+    user.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
+  const isEditMode = userPageEditMode === PageEditMode.Edit;
 
   return (
     <Container
@@ -59,6 +66,7 @@ export function FullEditor({
       size={!fullPageWidth && 900}
       className={classes.editor}
     >
+      {editorToolbarEnabled && editable && isEditMode && <FixedToolbar />}
       <MemoizedTitleEditor
         pageId={pageId}
         slugId={slugId}

apps/client/src/features/user/components/fixed-toolbar-pref.tsx

@@ -0,0 +1,57 @@
+import { userAtom } from "@/features/user/atoms/current-user-atom";
+import { updateUser } from "@/features/user/services/user-service";
+import { Badge, Group, Switch, Text } from "@mantine/core";
+import { useAtom } from "jotai";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ResponsiveSettingsRow,
+  ResponsiveSettingsContent,
+  ResponsiveSettingsControl,
+} from "@/components/ui/responsive-settings-row";
+
+export default function FixedToolbarPref() {
+  const { t } = useTranslation();
+  const [user, setUser] = useAtom(userAtom);
+  const [checked, setChecked] = useState(
+    user.settings?.preferences?.editorToolbar ?? false,
+  );
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    setChecked(value);
+    try {
+      const updatedUser = await updateUser({ editorToolbar: value });
+      setUser(updatedUser);
+    } catch {
+      setChecked(!value);
+    }
+  };
+
+  return (
+    <ResponsiveSettingsRow>
+      <ResponsiveSettingsContent>
+        <Group gap="xs">
+          <Text size="md">{t("Fixed editor toolbar")}</Text>
+          <Badge size="xs" color="gray" variant="light">
+            {t("Experimental")}
+          </Badge>
+        </Group>
+        <Text size="sm" c="dimmed">
+          {t(
+            "Show a formatting toolbar above the editor with quick access to common actions.",
+          )}
+        </Text>
+      </ResponsiveSettingsContent>
+
+      <ResponsiveSettingsControl>
+        <Switch
+          labelPosition="left"
+          defaultChecked={checked}
+          onChange={handleChange}
+          aria-label={t("Toggle fixed editor toolbar")}
+        />
+      </ResponsiveSettingsControl>
+    </ResponsiveSettingsRow>
+  );
+}

apps/client/src/features/user/types/user.types.ts

@@ -20,6 +20,7 @@ export interface IUser {
   deletedAt: Date;
   fullPageWidth: boolean; // used for update
   pageEditMode: string; // used for update
+  editorToolbar: boolean; // used for update
   notificationPageUpdates: boolean; // used for update
   notificationPageUserMention: boolean; // used for update
   notificationCommentUserMention: boolean; // used for update
@@ -37,6 +38,7 @@ export interface IUserSettings {
   preferences: {
     fullPageWidth: boolean;
     pageEditMode: string;
+    editorToolbar: boolean;
   };
   notifications?: {
     "page.updated"?: boolean;

apps/client/src/features/user/user-provider.tsx

@@ -60,6 +60,10 @@ export function UserProvider({ children }: React.PropsWithChildren) {
     }
   }, [data, isLoading]);
 
+  useEffect(() => {
+    document.documentElement.lang = i18n.resolvedLanguage || i18n.language || "en-US";
+  }, [i18n.language, i18n.resolvedLanguage]);
+
   useEffect(() => {
     if (entitlements) {
       setEntitlements(entitlements);

apps/client/src/pages/settings/account/account-preferences.tsx

@@ -3,6 +3,7 @@ import AccountLanguage from "@/features/user/components/account-language.tsx";
 import AccountTheme from "@/features/user/components/account-theme.tsx";
 import PageWidthPref from "@/features/user/components/page-width-pref.tsx";
 import PageEditPref from "@/features/user/components/page-state-pref";
+import FixedToolbarPref from "@/features/user/components/fixed-toolbar-pref";
 import NotificationPref from "@/features/user/components/notification-pref";
 import { getAppName } from "@/lib/config.ts";
 import { Divider } from "@mantine/core";
@@ -37,6 +38,10 @@ export default function AccountPreferences() {
 
       <Divider my={"md"} />
 
+      <FixedToolbarPref />
+
+      <Divider my={"md"} />
+
       <NotificationPref />
     </>
   );

apps/server/src/core/user/dto/update-user.dto.ts

@@ -22,6 +22,10 @@ export class UpdateUserDto extends PartialType(
   @IsIn(['read', 'edit'])
   pageEditMode: string;
 
+  @IsOptional()
+  @IsBoolean()
+  editorToolbar: boolean;
+
   @IsOptional()
   @IsString()
   locale: string;

apps/server/src/core/user/user.service.ts

@@ -61,6 +61,14 @@ export class UserService {
       );
     }
 
+    if (typeof updateUserDto.editorToolbar !== 'undefined') {
+      return this.userRepo.updatePreference(
+        userId,
+        'editorToolbar',
+        updateUserDto.editorToolbar,
+      );
+    }
+
     const notificationSettings: Record<string, NotificationSettingKey> = {
       notificationPageUpdates: 'page.updated',
       notificationPageUserMention: 'page.userMention',

package.json

@@ -131,7 +131,7 @@
       "brace-expansion@^5": "5.0.5",
       "@xmldom/xmldom": "0.8.13",
       "handlebars": "4.7.9",
-      "axios": "1.15.0",
+      "axios": "1.16.0",
       "langsmith": "0.5.19",
       "follow-redirects": "1.16.0",
       "protobufjs":  "7.5.5"

pnpm-lock.yaml

@@ -37,7 +37,7 @@ overrides:
   brace-expansion@^5: 5.0.5
   '@xmldom/xmldom': 0.8.13
   handlebars: 4.7.9
-  axios: 1.15.0
+  axios: 1.16.0
   langsmith: 0.5.19
   follow-redirects: 1.16.0
   protobufjs: 7.5.5
@@ -296,8 +296,8 @@ importers:
         specifier: ^1.1.0
         version: 1.1.0
       axios:
-        specifier: 1.15.0
+        specifier: 1.16.0
-        version: 1.15.0
+        version: 1.16.0
       blueimp-load-image:
         specifier: ^5.16.0
         version: 5.16.0
@@ -5449,8 +5449,8 @@ packages:
   avvio@9.1.0:
     resolution: {integrity: sha512-fYASnYi600CsH/j9EQov7lECAniYiBFiiAtBNuZYLA2leLe9qOvZzqYHFjtIj6gD2VMoMLP14834LFWvr4IfDw==}
 
-  axios@1.15.0:
+  axios@1.16.0:
-    resolution: {integrity: sha512-wWyJDlAatxk30ZJer+GeCWS209sA42X+N5jU2jy6oHTp7ufw8uzUTVFBX9+wTfAlhiJXGS0Bq7X6efruWjuK9Q==}
+    resolution: {integrity: sha512-6hp5CwvTPlN2A31g5dxnwAX0orzM7pmCRDLnZSX772mv8WDqICwFjowHuPs04Mc8deIld1+ejhtaMn5vp6b+1w==}
 
   babel-jest@30.3.0:
     resolution: {integrity: sha512-gRpauEU2KRrCox5Z296aeVHR4jQ98BCnu0IO332D/xpHNOsIH/bgSRk9k6GbKIbBw8vFeN6ctuu6tV8WOyVfYQ==}
@@ -15853,7 +15853,7 @@ snapshots:
       '@fastify/error': 4.0.0
       fastq: 1.17.1
 
-  axios@1.15.0:
+  axios@1.16.0:
     dependencies:
       follow-redirects: 1.16.0
       form-data: 4.0.5
@@ -19187,7 +19187,7 @@ snapshots:
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.2
       '@zkochan/js-yaml': 0.0.7
-      axios: 1.15.0
+      axios: 1.16.0
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1
       cliui: 8.0.1
@@ -19728,7 +19728,7 @@ snapshots:
 
   postmark@4.0.7:
     dependencies:
-      axios: 1.15.0
+      axios: 1.16.0
     transitivePeerDependencies:
       - debug
 
@@ -21105,7 +21105,7 @@ snapshots:
   typesense@3.0.5(@babel/runtime@7.29.2):
     dependencies:
       '@babel/runtime': 7.29.2
-      axios: 1.15.0
+      axios: 1.16.0
       loglevel: 1.9.2
       tslib: 2.8.1
     transitivePeerDependencies: