fix mantine avatar color regression

fix(theme): size badges to their content
update list
2026-06-20 17:56:01 +01:00 · 2026-06-20 17:28:11 +01:00 · 2026-06-20 17:23:27 +01:00 · 2026-06-20 17:22:35 +01:00 · 2026-06-20 17:21:35 +01:00 · 2026-06-20 14:55:25 +01:00
130 changed files with 4682 additions and 2819 deletions
@@ -22,7 +22,6 @@ AWS_S3_ENDPOINT=
 AWS_S3_FORCE_PATH_STYLE=

 # Azure Blob Storage driver config
-STORAGE_DRIVER=azure
 AZURE_STORAGE_ACCOUNT_NAME=
 AZURE_STORAGE_ACCOUNT_KEY=
 AZURE_STORAGE_CONTAINER=
@@ -1,7 +1,7 @@
 {
  "name": "client",
  "private": true,
-  "version": "0.90.0",
+  "version": "0.90.1",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
@@ -20,13 +20,13 @@
    "@casl/react": "5.0.1",
    "@docmost/editor-ext": "workspace:*",
    "@excalidraw/excalidraw": "0.18.0-3a5ef40",
-    "@mantine/core": "8.3.18",
-    "@mantine/dates": "8.3.18",
-    "@mantine/form": "8.3.18",
-    "@mantine/hooks": "8.3.18",
-    "@mantine/modals": "8.3.18",
-    "@mantine/notifications": "8.3.18",
-    "@mantine/spotlight": "8.3.18",
+    "@mantine/core": "9.3.2",
+    "@mantine/dates": "9.3.2",
+    "@mantine/form": "9.3.2",
+    "@mantine/hooks": "9.3.2",
+    "@mantine/modals": "9.3.2",
+    "@mantine/notifications": "9.3.2",
+    "@mantine/spotlight": "9.3.2",
    "@slidoapp/emoji-mart": "5.8.7",
    "@slidoapp/emoji-mart-data": "1.2.4",
    "@slidoapp/emoji-mart-react": "1.1.5",
@@ -41,24 +41,24 @@
    "highlightjs-sap-abap": "0.3.0",
    "i18next": "25.10.1",
    "i18next-http-backend": "3.0.6",
-    "jotai": "2.18.1",
+    "jotai": "2.20.1",
    "jotai-optics": "0.4.0",
-    "js-cookie": "3.0.5",
+    "js-cookie": "3.0.7",
    "jwt-decode": "4.0.0",
    "katex": "0.16.40",
    "lowlight": "3.3.0",
    "mantine-form-zod-resolver": "1.3.0",
    "mermaid": "11.15.0",
    "mitt": "3.0.1",
-    "posthog-js": "1.372.2",
-    "react": "18.3.1",
+    "posthog-js": "1.391.2",
+    "react": "19.2.7",
    "react-clear-modal": "^2.0.18",
-    "react-dom": "^18.3.1",
+    "react-dom": "19.2.7",
    "react-drawio": "1.0.7",
    "react-error-boundary": "6.1.1",
    "react-helmet-async": "3.0.0",
    "react-i18next": "16.5.8",
-    "react-router-dom": "7.13.1",
+    "react-router-dom": "7.18.0",
    "semver": "7.7.4",
    "socket.io-client": "4.8.3",
    "zod": "4.3.6"
@@ -73,8 +73,8 @@
    "@types/js-cookie": "3.0.6",
    "@types/katex": "0.16.8",
    "@types/node": "22.19.1",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
    "@vitejs/plugin-react": "6.0.1",
    "eslint": "9.28.0",
    "eslint-plugin-react": "7.37.5",
@@ -398,6 +398,8 @@
  "Insert mermaid diagram": "Insert mermaid diagram",
  "Insert and design Drawio diagrams": "Insert and design Drawio diagrams",
  "Insert current date": "Insert current date",
+  "Time": "Time",
+  "Insert current time": "Insert current time",
  "Draw and sketch excalidraw diagrams": "Draw and sketch excalidraw diagrams",
  "Multiple": "Multiple",
  "Turn into": "Turn into",
@@ -424,6 +426,7 @@
  "Names do not match": "Names do not match",
  "Today, {{time}}": "Today, {{time}}",
  "Yesterday, {{time}}": "Yesterday, {{time}}",
+  "now": "now",
  "Space created successfully": "Space created successfully",
  "Space updated successfully": "Space updated successfully",
  "Space deleted successfully": "Space deleted successfully",
@@ -977,7 +980,7 @@
  "Search pages and spaces...": "Search pages and spaces...",
  "No results found": "No results found",
  "You don't have permission to create pages here": "You don't have permission to create pages here",
-  "Chat menu": "Chat menu",
+  "Chat menu for {{title}}": "Chat menu for {{title}}",
  "API key menu": "API key menu",
  "Jump to comment selection": "Jump to comment selection",
  "Slash commands": "Slash commands",
@@ -1063,7 +1066,7 @@
  "Filter": "Filter",
  "Page title": "Page title",
  "Page content": "Page content",
-  "Member actions": "Member actions",
+  "Member actions for {{name}}": "Member actions for {{name}}",
  "Toggle password visibility": "Toggle password visibility",
  "Send comment": "Send comment",
  "Token actions": "Token actions",
@@ -1084,5 +1087,11 @@
  "Added {{name}} to favorites": "Added {{name}} to favorites",
  "Removed {{name}} from favorites": "Removed {{name}} from favorites",
  "Page menu for {{name}}": "Page menu for {{name}}",
-  "Create subpage of {{name}}": "Create subpage of {{name}}"
+  "Create subpage of {{name}}": "Create subpage of {{name}}",
+  "Allow personal spaces": "Allow personal spaces",
+  "Members can create their own personal space.": "Members can create their own personal space.",
+  "Toggle allow personal spaces": "Toggle allow personal spaces",
+  "Create personal space": "Create personal space",
+  "Personal space": "Personal space",
+  "{{name}}'s space": "{{name}}'s space"
 }
@@ -6,13 +6,21 @@ import {
  Select,
  Switch,
  Divider,
+  Tooltip,
+  Badge,
 } from "@mantine/core";
-import { exportPage } from "@/features/page/services/page-service.ts";
+import {
+  exportPage,
+  exportPageToDocx,
+} from "@/features/page/services/page-service.ts";
 import { useState } from "react";
 import { ExportFormat } from "@/features/page/types/page.types.ts";
 import { notifications } from "@mantine/notifications";
 import { exportSpace } from "@/features/space/services/space-service";
 import { useTranslation } from "react-i18next";
+import { Feature } from "@/ee/features";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label";

 interface ExportModalProps {
  id: string;
@@ -32,17 +40,25 @@ export default function ExportModal({
  const [includeAttachments, setIncludeAttachments] = useState<boolean>(false);
  const [isExporting, setIsExporting] = useState<boolean>(false);
  const { t } = useTranslation();
+  const upgradeLabel = useUpgradeLabel();
+  const isDocx = format === ExportFormat.Docx;
+  const docxEntitled = useHasFeature(Feature.DOCX_EXPORT);
+  const blockedByLicense = isDocx && !docxEntitled;

  const handleExport = async () => {
    setIsExporting(true);
    try {
      if (type === "page") {
-        await exportPage({
-          pageId: id,
-          format,
-          includeChildren,
-          includeAttachments,
-        });
+        if (format === ExportFormat.Docx) {
+          await exportPageToDocx({ pageId: id });
+        } else {
+          await exportPage({
+            pageId: id,
+            format,
+            includeChildren,
+            includeAttachments,
+          });
+        }
      }
      if (type === "space") {
        await exportSpace({ spaceId: id, format, includeAttachments });
@@ -88,10 +104,15 @@ export default function ExportModal({
            <div>
              <Text size="md">{t("Format")}</Text>
            </div>
-            <ExportFormatSelection format={format} onChange={handleChange} />
+            <ExportFormatSelection
+              format={format}
+              onChange={handleChange}
+              includeDocx={type === "page"}
+              docxEntitled={docxEntitled}
+            />
          </Group>

-          {type === "page" && (
+          {type === "page" && !isDocx && (
            <>
              <Divider my="sm" />

@@ -143,7 +164,16 @@ export default function ExportModal({
            <Button onClick={onClose} variant="default">
              {t("Cancel")}
            </Button>
-            <Button onClick={handleExport} loading={isExporting}>{t("Export")}</Button>
+            <Tooltip label={upgradeLabel} disabled={!blockedByLicense} withArrow>
+              <Button
+                onClick={handleExport}
+                loading={isExporting}
+                disabled={blockedByLicense}
+                data-disabled={blockedByLicense || undefined}
+              >
+                {t("Export")}
+              </Button>
+            </Tooltip>
          </Group>
        </Modal.Body>
      </Modal.Content>
@@ -154,23 +184,49 @@ export default function ExportModal({
 interface ExportFormatSelection {
  format: ExportFormat;
  onChange: (value: string) => void;
+  includeDocx?: boolean;
+  docxEntitled?: boolean;
 }
-function ExportFormatSelection({ format, onChange }: ExportFormatSelection) {
+function ExportFormatSelection({
+  format,
+  onChange,
+  includeDocx,
+  docxEntitled,
+}: ExportFormatSelection) {
  const { t } = useTranslation();

+  const data = [
+    { value: "markdown", label: "Markdown" },
+    { value: "html", label: "HTML" },
+    ...(includeDocx
+      ? [{ value: "docx", label: "Word (.docx)", disabled: !docxEntitled }]
+      : []),
+  ];
+
  return (
    <Select
-      data={[
-        { value: "markdown", label: "Markdown" },
-        { value: "html", label: "HTML" },
-      ]}
+      data={data}
      defaultValue={format}
      onChange={onChange}
-      styles={{ wrapper: { maxWidth: 120 } }}
-      comboboxProps={{ width: "120" }}
+      styles={{ wrapper: { maxWidth: 140 }, option: { opacity: 1 } }}
+      comboboxProps={{ width: 200 }}
      allowDeselect={false}
      withCheckIcon={false}
      aria-label={t("Select export format")}
+      renderOption={({ option }) =>
+        option.value === "docx" && !docxEntitled ? (
+          <div>
+            <Text size="sm" c="dimmed">
+              {option.label}
+            </Text>
+            <Badge size="xs" mt={4}>
+              {t("Enterprise")}
+            </Badge>
+          </div>
+        ) : (
+          <Text size="sm">{option.label}</Text>
+        )
+      }
    />
  );
 }
@@ -105,7 +105,7 @@ export default function GlobalSidebar() {

        <Divider my="xs" />
        <div className={classes.section}>
-          <Text className={classes.sectionHeader}>{t("Favorite spaces")}</Text>
+          <Text component="h2" className={classes.sectionHeader}>{t("Favorite spaces")}</Text>
          {!isFavoritesPending && sortedFavoriteSpaces.length === 0 ? (
            <Text size="xs" c="dimmed" pl="xs" py={4}>
              {t("Favorite spaces appear here")}
@@ -15,9 +15,16 @@ import {
  IconMoon,
  IconSettings,
  IconSun,
+  IconUser,
  IconUserCircle,
  IconUsers,
 } from "@tabler/icons-react";
+import { useDisclosure } from "@mantine/hooks";
+import { getSpaceUrl } from "@/lib/config.ts";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { usePersonalSpaceQuery } from "@/ee/personal-space/queries/personal-space-query";
+import CreatePersonalSpaceModal from "@/ee/personal-space/components/create-personal-space-modal";
 import { useAtom } from "jotai";
 import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { Link } from "react-router-dom";
@@ -36,11 +43,20 @@ export default function TopMenu() {
  const user = currentUser?.user;
  const workspace = currentUser?.workspace;

+  const hasPersonalSpaces = useHasFeature(Feature.PERSONAL_SPACES);
+  const settingEnabled = workspace?.settings?.spaces?.allowPersonal === true;
+  const { data: personalSpace } = usePersonalSpaceQuery(hasPersonalSpaces);
+  const [
+    createOpened,
+    { open: openCreate, close: closeCreate },
+  ] = useDisclosure(false);
+
  if (!user || !workspace) {
    return <></>;
  }

  return (
+    <>
    <Menu width={250} position="bottom-end" withArrow shadow={"lg"}>
      <Menu.Target>
        <UnstyledButton>
@@ -115,6 +131,26 @@ export default function TopMenu() {
          {t("My preferences")}
        </Menu.Item>

+        {personalSpace ? (
+          <Menu.Item
+            component={Link}
+            to={getSpaceUrl(personalSpace.slug)}
+            leftSection={<IconUser size={16} />}
+          >
+            {t("Personal space")}
+          </Menu.Item>
+        ) : (
+          hasPersonalSpaces &&
+          settingEnabled && (
+            <Menu.Item
+              onClick={openCreate}
+              leftSection={<IconUser size={16} />}
+            >
+              {t("Create personal space")}
+            </Menu.Item>
+          )
+        )}
+
        <Menu.Sub>
          <Menu.Sub.Target>
            <Menu.Sub.Item leftSection={<IconBrightnessFilled size={16} />}>
@@ -160,5 +196,8 @@ export default function TopMenu() {
        </Menu.Item>
      </Menu.Dropdown>
    </Menu>
+
+      <CreatePersonalSpaceModal opened={createOpened} onClose={closeCreate} />
+    </>
  );
 }
@@ -16,13 +16,10 @@ interface CustomAvatarProps {
  mt?: string | number;
 }

-// `color.shade` pairs whose contrast meets WCAG AA (4.5:1) in BOTH variants:
-//   - filled: white text on the shade as bg
-//   - light:  shade as text on the color's light-bg (10% color.6 over white)
-// Avoids lime/yellow/green/orange — even their dark shades have weak
-// contrast. grape and indigo were bumped from .7 to darker shades because
-// the original picks failed: grape.7 was 4.02/3.61 (both fail) and
-// indigo.7 was 4.98/4.39 (light fails by a hair).
+// color.shade picks whose FILLED variant (white text on the shade) meets WCAG AA 4.5:1.
+// Avoids lime/yellow/green/orange, too light even at dark shades.
+// For non-filled variants, initials text is forced to the .9 shade at render time:
+// Mantine otherwise caps light-variant placeholder text at .6, dropping contrast to ~3:1.
 const SAFE_INITIALS_COLORS: MantineColor[] = [
  "blue.8",
  "cyan.9",
@@ -54,12 +51,24 @@ function sanitizeInitialsSource(name: string) {
 export const CustomAvatar = React.forwardRef<
  HTMLInputElement,
  CustomAvatarProps
->(({ avatarUrl, name, type, color, ...props }: CustomAvatarProps, ref) => {
+>(({ avatarUrl, name, type, color, variant, ...props }: CustomAvatarProps, ref) => {
  const avatarLink = getAvatarUrl(avatarUrl, type);
-  const resolvedColor =
-    !color || color === "initials" ? pickInitialsColor(name ?? "") : color;
+  const isInitials = !color || color === "initials";
+  const pickedColor = isInitials ? pickInitialsColor(name ?? "") : color;
+  const hue = pickedColor.split(".")[0];
  const initialsSource = sanitizeInitialsSource(name ?? "");

+  const resolvedColor = variant === "filled" ? pickedColor : hue;
+
+  const placeholderStyles =
+    isInitials && variant !== "filled"
+      ? {
+          placeholder: {
+            color: `var(--mantine-color-${hue}-9)`,
+          },
+        }
+      : undefined;
+
  return (
    <Avatar
      ref={ref}
@@ -67,6 +76,8 @@ export const CustomAvatar = React.forwardRef<
      name={initialsSource}
      alt={name}
      color={resolvedColor}
+      variant={variant}
+      styles={placeholderStyles}
      {...props}
    />
  );
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Modal, Button, Group } from "@mantine/core";
+import { Modal, Button, Group, Divider } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { DestinationPicker } from "./destination-picker";
 import {
@@ -52,7 +52,9 @@ export function DestinationPickerModal({
            searchSpacesOnly={searchSpacesOnly}
          />

-          <Group justify="flex-end" mt="md">
+          <Divider my="md" />
+
+          <Group justify="flex-end">
            <Button variant="default" onClick={onClose}>
              {t("Close")}
            </Button>
@@ -89,14 +89,6 @@
    }
 }

-.selectedIndicator {
-    padding: 8px 12px;
-    font-size: var(--mantine-font-size-sm);
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-    border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
-    margin-top: var(--mantine-spacing-xs);
-}
-
 .emptyState {
    padding: 12px;
    text-align: center;
@@ -221,14 +221,6 @@ export function DestinationPicker({
          ))
        )}
      </ScrollArea>
-
-      {selection && (
-        <div className={classes.selectedIndicator}>
-          {selection.type === "space"
-            ? selection.space.name
-            : `${selection.space.name} / ${selection.page.title || t("Untitled")}`}
-        </div>
-      )}
    </>
  );
 }
@@ -0,0 +1,12 @@
+import { UnstyledButton } from "@mantine/core";
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+
+// Menu.Item hard-codes role="menuitem"; use as its `component` to restore role="menuitemradio" so aria-checked works.
+export const RadioMenuItem = forwardRef<
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<"button">
+>((props, ref) => (
+  <UnstyledButton ref={ref} {...props} role="menuitemradio" />
+));
+
+RadioMenuItem.displayName = "RadioMenuItem";
@@ -66,6 +66,8 @@ export default function AiChatSidebarItem({
    [chat.updatedAt, i18n.language],
  );

+  const chatTitle = chat.title || t("Untitled chat");
+
  useEffect(() => {
    if (renaming) {
      // Wait for the input to be mounted before selecting.
@@ -120,9 +122,7 @@ export default function AiChatSidebarItem({
      className={classes.chatItem}
      data-active={isActive || undefined}
    >
-      <span className={classes.chatItemTitle}>
-        {chat.title || t("Untitled chat")}
-      </span>
+      <span className={classes.chatItemTitle}>{chatTitle}</span>
      <span className={classes.chatItemDate}>{formattedDate}</span>
      <div className={classes.chatItemActions}>
        <Menu position="bottom-end" withinPortal>
@@ -132,7 +132,7 @@ export default function AiChatSidebarItem({
              size="xs"
              color="gray"
              onClick={(e) => e.preventDefault()}
-              aria-label={t("Chat menu")}
+              aria-label={t("Chat menu for {{title}}", { title: chatTitle })}
            >
              <IconDots size={14} />
            </ActionIcon>
@@ -1,4 +1,4 @@
-import { useCallback, useRef, useEffect, useState } from "react";
+import { useCallback, useId, useRef, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { IconArrowUp, IconPaperclip, IconPlayerStopFilled, IconX, IconFile, IconPhoto, IconPlus, IconAt, IconFileText } from "@tabler/icons-react";
 import { Popover } from "@mantine/core";
@@ -107,6 +107,7 @@ export default function ChatInput({
  const [isEmpty, setIsEmpty] = useState(true);
  const [pendingAttachments, setPendingAttachments] = useState<PendingAttachment[]>([]);
  const [plusMenuOpen, setPlusMenuOpen] = useState(false);
+  const plusMenuId = useId();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const onSendRef = useRef(onSend);
  onSendRef.current = onSend;
@@ -176,7 +177,7 @@ export default function ChatInput({
  }, []);

  const handleSubmit = useCallback(() => {
-    if (!editor || isStreaming) return;
+    if (!editor || editor.isDestroyed || isStreaming) return;
    const json = editor.getJSON();
    const text = editorJsonToText(json).trim();
    const readyAttachments = pendingAttachments.filter((a) => !a.uploading);
@@ -263,7 +264,7 @@ export default function ChatInput({
  });

  useEffect(() => {
-    if (editor && autofocus) {
+    if (editor && !editor.isDestroyed && autofocus) {
      editor.commands.focus();
    }
  }, [editor]);
@@ -342,6 +343,7 @@ export default function ChatInput({
          position="top-start"
          width={220}
          shadow="md"
+          withRoles={false}
          trapFocus
          returnFocus
        >
@@ -351,13 +353,17 @@ export default function ChatInput({
              className={classes.plusButton}
              onClick={() => setPlusMenuOpen((o) => !o)}
              aria-label="Add content"
+              aria-haspopup="menu"
+              aria-expanded={plusMenuOpen}
+              aria-controls={plusMenuOpen ? plusMenuId : undefined}
            >
              <IconPlus size={14} />
            </button>
          </Popover.Target>
-          <Popover.Dropdown p={4}>
+          <Popover.Dropdown id={plusMenuId} role="menu" p={4}>
            <button
              type="button"
+              role="menuitem"
              className={classes.plusMenuItem}
              onClick={() => {
                fileInputRef.current?.click();
@@ -377,6 +383,7 @@ export default function ChatInput({
            </button>
            <button
              type="button"
+              role="menuitem"
              className={classes.plusMenuItem}
              onClick={() => {
                editor?.commands.insertContent("@");
@@ -385,7 +392,7 @@ export default function ChatInput({
              }}
            >
              <IconAt size={16} className={classes.plusMenuIcon} />
-              Mention a page
+              {t("Mention a page")}
            </button>
          </Popover.Dropdown>
        </Popover>
@@ -17,14 +17,26 @@ import ChatToolGroup from "./chat-tool-group";
 import classes from "../styles/chat-message.module.css";
 import CopyTextButton from "@/components/common/copy.tsx";

+const PAGE_PATH_RE = /\/s\/[^/?#]+\/p\/[^/?#]+/;
+
 const chatSanitizer = DOMPurify();
 chatSanitizer.addHook("afterSanitizeAttributes", (node) => {
-  if (node.tagName === "A") {
-    const href = node.getAttribute("href") || "";
-    if (href.startsWith("http://") || href.startsWith("https://")) {
-      node.setAttribute("target", "_blank");
-      node.setAttribute("rel", "noopener noreferrer");
-    }
+  if (node.tagName !== "A") return;
+  const href = node.getAttribute("href") || "";
+
+  // Recover the canonical /s/{slug}/p/{slugId} path if the model wrapped it
+  // in a fabricated host (https://s/..., https://yoursite.com/s/..., //s/...).
+  const m = href.match(PAGE_PATH_RE);
+  if (m) {
+    node.setAttribute("href", m[0]);
+    node.removeAttribute("target");
+    node.removeAttribute("rel");
+    return;
+  }
+
+  if (href.startsWith("http://") || href.startsWith("https://")) {
+    node.setAttribute("target", "_blank");
+    node.setAttribute("rel", "noopener noreferrer");
  }
 });

@@ -76,7 +76,6 @@
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-lg) var(--mantine-spacing-lg);
 }

-/* Empty state - Notion AI style centered layout */
 .emptyState {
  flex: 1;
  display: flex;
@@ -1,7 +1,14 @@
 import { Editor } from "@tiptap/react";
 import { ActionIcon, TextInput } from "@mantine/core";
 import { useDebouncedCallback, useMediaQuery } from "@mantine/hooks";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type JSX,
+} from "react";
 import { createPortal } from "react-dom";
 import { useAtom } from "jotai";
 import { IconArrowUp } from "@tabler/icons-react";
@@ -14,7 +21,7 @@ import { ResultPreview } from "./result-preview.tsx";
 import classes from "./ai-menu.module.css";
 import { marked } from "marked";
 import { DOMSerializer } from "@tiptap/pm/model";
-import { copyToClipboard, htmlToMarkdown } from "@docmost/editor-ext";
+import { copyToClipboard, htmlToMarkdown, isEditorReady } from "@docmost/editor-ext";
 import { useLocation } from "react-router-dom";

 interface EditorAiMenuProps {
@@ -49,7 +56,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
    });
  }, [prompt, output, activeCommandSet]);
  const updateMenuPlacement = useCallback(() => {
-    if (!editor || !showAiMenu) return;
+    if (!isEditorReady(editor) || !showAiMenu) return;

    const { view } = editor;
    const { from, to } = editor.state.selection;
@@ -95,7 +102,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
  );
  const handleGenerate = useCallback(
    (item?: CommandItem) => {
-      if (!editor || isLoading) return;
+      if (!isEditorReady(editor) || isLoading) return;

      let command: CommandItem | null = item || null;

@@ -158,6 +165,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
        return setActiveCommandSet("main");
      }
      if (item.id === "result-replace") {
+        if (!isEditorReady(editor)) return setShowAiMenu(false);
        const chain = editor.chain().focus();

        if (lastAction.action === AiAction.CONTINUE_WRITING) {
@@ -183,6 +191,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
        return setShowAiMenu(false);
      }
      if (item.id === "result-insert-below") {
+        if (!isEditorReady(editor)) return setShowAiMenu(false);
        editor
          .chain()
          .focus()
@@ -246,7 +255,7 @@ const EditorAiMenu = ({ editor }: EditorAiMenuProps): JSX.Element | null => {
  );

  useEffect(() => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;

    const handleClose = () => setShowAiMenu(false);
    const observer = new ResizeObserver(() => {
@@ -1,11 +1,11 @@
 import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
 import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
-import { format } from "date-fns";
 import { useTranslation } from "react-i18next";
 import { IApiKey } from "@/ee/api-key";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import React from "react";
 import NoTableResults from "@/components/common/no-table-results";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";

 interface ApiKeyTableProps {
  apiKeys: IApiKey[];
@@ -23,10 +23,11 @@ export function ApiKeyTable({
  onRevoke,
 }: ApiKeyTableProps) {
  const { t } = useTranslation();
+  const locale = useDateFnsLocale();

  const formatDate = (date: Date | string | null) => {
    if (!date) return t("Never");
-    return format(new Date(date), "MMM dd, yyyy");
+    return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
  };

  const isExpired = (expiresAt: string | null) => {
@@ -31,7 +31,7 @@ export function CreateApiKeyModal({
  onClose,
  onSuccess,
 }: CreateApiKeyModalProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
  const [expirationOption, setExpirationOption] = useState<string>("30");
  const createApiKeyMutation = useCreateApiKeyMutation();

@@ -59,7 +59,7 @@ export function CreateApiKeyModal({
  const getExpirationLabel = (days: number) => {
    const date = new Date();
    date.setDate(date.getDate() + days);
-    const formatted = date.toLocaleDateString("en-US", {
+    const formatted = date.toLocaleDateString(i18n.language, {
      month: "short",
      day: "2-digit",
      year: "numeric",
@@ -301,7 +301,7 @@ export default function AuditLogsTable({
                  {expandable && (
                    <Table.Tr className={classes.detailRow}>
                      <Table.Td colSpan={4} p={0}>
-                        <Collapse in={isExpanded}>
+                        <Collapse expanded={isExpanded}>
                          <Box
                            px="md"
                            py="sm"
@@ -4,12 +4,13 @@ import {
 } from "@/ee/billing/queries/billing-query.ts";
 import { Group, Text, SimpleGrid, Paper } from "@mantine/core";
 import classes from "./billing.module.css";
-import { format } from "date-fns";
 import { formatInterval } from "@/ee/billing/utils.ts";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";

 export default function BillingDetails() {
  const { data: billing } = useBillingQuery();
  const { data: plans } = useBillingPlans();
+  const locale = useDateFnsLocale();

  if (!billing || !plans) {
    return null;
@@ -75,7 +76,12 @@ export default function BillingDetails() {
                  : "Renewal date"}
              </Text>
              <Text fw={700} fz="lg">
-                {format(billing.periodEndAt, "dd MMM, yyyy")}
+                {formatLocalized(
+                  billing.periodEndAt,
+                  "dd MMM, yyyy",
+                  "PP",
+                  locale,
+                )}
              </Text>
            </div>
          </Group>
@@ -103,7 +103,7 @@ export default function BillingPlans() {
              label="Team size"
              description="Select the number of users"
              value={selectedTierValue}
-              onChange={setSelectedTierValue}
+              onChange={(value) => setSelectedTierValue(value)}
              data={selectData}
              w={250}
              size="md"
@@ -3,6 +3,7 @@ import { IconCircleCheck, IconCircleCheckFilled } from "@tabler/icons-react";
 import { useResolveCommentMutation } from "@/ee/comment/queries/comment-query";
 import { useTranslation } from "react-i18next";
 import { Editor } from "@tiptap/react";
+import { isEditorReady } from "@docmost/editor-ext";

 interface ResolveCommentProps {
  editor: Editor;
@@ -31,7 +32,7 @@ function ResolveComment({
        resolved: !isResolved,
      });

-      if (editor) {
+      if (isEditorReady(editor)) {
        editor.commands.setCommentResolved(commentId, !isResolved);
      }

@@ -19,4 +19,6 @@ export const Feature = {
  SHARING_CONTROLS: 'sharing:controls',
  TEMPLATES: 'templates',
  VIEWER_COMMENTS: 'comment:viewer',
+  PERSONAL_SPACES: 'spaces:personal',
+  DOCX_EXPORT: 'export:docx',
 } as const;
@@ -1,13 +1,14 @@
 import { Badge, Table } from "@mantine/core";
-import { format } from "date-fns";
 import { useLicenseInfo } from "@/ee/licence/queries/license-query.ts";
 import { isLicenseExpired } from "@/ee/licence/license.utils.ts";
 import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";

 export default function LicenseDetails() {
  const { data: license, isError } = useLicenseInfo();
  const [workspace] = useAtom(workspaceAtom);
+  const locale = useDateFnsLocale();

  if (!license) {
    return null;
@@ -50,12 +51,16 @@ export default function LicenseDetails() {

          <Table.Tr>
            <Table.Th>Issued at</Table.Th>
-            <Table.Td>{format(license.issuedAt, "dd MMMM, yyyy")}</Table.Td>
+            <Table.Td>
+              {formatLocalized(license.issuedAt, "dd MMMM, yyyy", "PPP", locale)}
+            </Table.Td>
          </Table.Tr>

          <Table.Tr>
            <Table.Th>Expires at</Table.Th>
-            <Table.Td>{format(license.expiresAt, "dd MMMM, yyyy")}</Table.Td>
+            <Table.Td>
+              {formatLocalized(license.expiresAt, "dd MMMM, yyyy", "PPP", locale)}
+            </Table.Td>
          </Table.Tr>
          <Table.Tr>
            <Table.Th>License ID</Table.Th>
@@ -18,6 +18,7 @@ const enterpriseFeatures = [
  "Confluence Import",
  "PDF & DOCX Import",
  "Templates",
+  "Personal Spaces"
 ];

 export default function OssDetails() {
@@ -193,7 +193,7 @@ export function MfaSetupModal({
                    </Group>
                  </UnstyledButton>

-                  <Collapse in={manualEntryOpen}>
+                  <Collapse expanded={manualEntryOpen}>
                    <Alert
                      icon={<IconAlertCircle size={20} />}
                      color="gray"
@@ -1,6 +1,7 @@
 import { Group, NumberInput, Select, Text } from "@mantine/core";
 import { DateInput } from "@mantine/dates";
 import { useTranslation } from "react-i18next";
+import i18n from "@/i18n.ts";
 import {
  ExpirationMode,
  PeriodUnit,
@@ -30,7 +31,7 @@ export function addDays(days: number, from?: Date): Date {

 function formatShortDate(date: Date): string {
  const crossesYear = date.getFullYear() !== new Date().getFullYear();
-  return date.toLocaleDateString(undefined, {
+  return date.toLocaleDateString(i18n.language, {
    month: "short",
    day: "numeric",
    ...(crossesYear && { year: "numeric" }),
@@ -38,7 +39,7 @@ function formatShortDate(date: Date): string {
 }

 function formatLongDate(date: Date): string {
-  return date.toLocaleDateString(undefined, {
+  return date.toLocaleDateString(i18n.language, {
    month: "long",
    day: "numeric",
    year: "numeric",
@@ -12,6 +12,7 @@ import {
 } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import { useTranslation } from "react-i18next";
+import i18n from "@/i18n.ts";
 import {
  useMarkObsoleteMutation,
  usePageVerificationInfoQuery,
@@ -197,11 +198,14 @@ function ExpiringManageContent({ pageId, info, onClose }: ManageContentProps) {
            {info.expiresAt && (
              <Text size="xs" c="dimmed">
                {t(status === "expired" ? "Expired {{date}}" : "Expires {{date}}", {
-                  date: new Date(info.expiresAt).toLocaleDateString(undefined, {
-                    month: "long",
-                    day: "numeric",
-                    year: "numeric",
-                  }),
+                  date: new Date(info.expiresAt).toLocaleDateString(
+                    i18n.language,
+                    {
+                      month: "long",
+                      day: "numeric",
+                      year: "numeric",
+                    },
+                  ),
                })}
              </Text>
            )}
@@ -13,6 +13,7 @@ import {
  IconShieldCheck,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
+import i18n from "@/i18n.ts";
 import { useParams } from "react-router-dom";
 import { extractPageSlugId } from "@/lib";
 import { usePageQuery } from "@/features/page/queries/page-query";
@@ -127,7 +128,7 @@ export function PageVerificationBadge({
    status === "verified" && verificationInfo?.expiresAt
      ? t("Verified until {{date}}", {
          date: new Date(verificationInfo.expiresAt).toLocaleDateString(
-            undefined,
+            i18n.language,
            { month: "long", day: "numeric", year: "numeric" },
          ),
        })
@@ -16,9 +16,10 @@ import {
 } from "@/ee/page-verification/types/page-verification.types";
 import { CustomAvatar } from "@/components/ui/custom-avatar";
 import { buildPageUrl } from "@/features/page/page.utils";
-import { format } from "date-fns";
 import NoTableResults from "@/components/common/no-table-results";
 import rowClasses from "@/components/ui/clickable-table-row.module.css";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
+import type { Locale } from "date-fns";

 const MAX_VISIBLE_VERIFIERS = 5;

@@ -48,7 +49,11 @@ function statusBadge(status: VerificationStatus | null, t: (s: string) => string
  }
 }

-function verifiedUntilText(item: IVerificationListItem, t: (s: string) => string): string {
+function verifiedUntilText(
+  item: IVerificationListItem,
+  t: (s: string) => string,
+  locale: Locale,
+): string {
  if (item.type === "qms") {
    if (item.status === "approved") return t("Indefinitely");
    return "—";
@@ -60,7 +65,7 @@ function verifiedUntilText(item: IVerificationListItem, t: (s: string) => string
  const now = new Date();

  if (expires <= now) return t("Expired");
-  return format(expires, "MMM d, yyyy");
+  return formatLocalized(expires, "MMM d, yyyy", "PP", locale);
 }

 function TableSkeleton() {
@@ -98,6 +103,7 @@ export default function VerificationListTable({
  isLoading,
 }: VerificationListTableProps) {
  const { t } = useTranslation();
+  const locale = useDateFnsLocale();

  return (
    <Table.ScrollContainer minWidth={600}>
@@ -200,7 +206,7 @@ export default function VerificationListTable({

                  <Table.Td>
                    <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
-                      {verifiedUntilText(item, t)}
+                      {verifiedUntilText(item, t, locale)}
                    </Text>
                  </Table.Td>

@@ -58,6 +58,7 @@ export default function PdfRenderPage() {
        title={data.title}
        content={data.content}
        pageId={data.pageId}
+        printMode
      />
    </Container>
  );
@@ -0,0 +1,78 @@
+import { Modal, TextInput, Button, Group, Divider } from "@mantine/core";
+import { useForm } from "@mantine/form";
+import { zod4Resolver } from "mantine-form-zod-resolver";
+import { z } from "zod/v4";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useAtomValue } from "jotai";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { useCreatePersonalSpaceMutation } from "@/ee/personal-space/queries/personal-space-query";
+import { getSpaceUrl } from "@/lib/config.ts";
+import { notifications } from "@mantine/notifications";
+
+const formSchema = z.object({
+  name: z.string().trim().min(2).max(100),
+});
+type FormValues = z.infer<typeof formSchema>;
+
+type Props = {
+  opened: boolean;
+  onClose: () => void;
+};
+
+export default function CreatePersonalSpaceModal({ opened, onClose }: Props) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const currentUser = useAtomValue(currentUserAtom);
+  const createMutation = useCreatePersonalSpaceMutation();
+
+  const firstName = (currentUser?.user?.name ?? "").trim().split(/\s+/)[0] || "";
+
+  const form = useForm<FormValues>({
+    validate: zod4Resolver(formSchema),
+    initialValues: {
+      name: firstName ? t("{{name}}'s space", { name: firstName }) : "",
+    },
+  });
+
+  const handleSubmit = async (values: FormValues) => {
+    try {
+      const createdSpace = await createMutation.mutateAsync({
+        name: values.name,
+      });
+      onClose();
+      navigate(getSpaceUrl(createdSpace.slug));
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={t("Create personal space")}
+      closeButtonProps={{ "aria-label": t("Close") }}
+    >
+      <Divider size="xs" mb="md" />
+      <form onSubmit={form.onSubmit(handleSubmit)}>
+        <TextInput
+          withAsterisk
+          data-autofocus
+          label={t("Space name")}
+          variant="filled"
+          errorProps={{ role: "alert" }}
+          {...form.getInputProps("name")}
+        />
+        <Group justify="flex-end" mt="md">
+          <Button type="submit" loading={createMutation.isPending}>
+            {t("Create")}
+          </Button>
+        </Group>
+      </form>
+    </Modal>
+  );
+}
@@ -0,0 +1,64 @@
+import { Group, Text, Switch, Tooltip } from "@mantine/core";
+import { useAtom } from "jotai";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
+import { notifications } from "@mantine/notifications";
+import { useHasFeature } from "@/ee/hooks/use-feature";
+import { Feature } from "@/ee/features";
+import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
+
+export default function PersonalSpacesSetting() {
+  const { t } = useTranslation();
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">{t("Allow personal spaces")}</Text>
+        <Text size="sm" c="dimmed">
+          {t("Members can create their own personal space.")}
+        </Text>
+      </div>
+
+      <PersonalSpacesToggle />
+    </Group>
+  );
+}
+
+function PersonalSpacesToggle() {
+  const { t } = useTranslation();
+  const [workspace, setWorkspace] = useAtom(workspaceAtom);
+  const [checked, setChecked] = useState(
+    workspace?.settings?.spaces?.allowPersonal === true,
+  );
+  const hasPersonalSpaces = useHasFeature(Feature.PERSONAL_SPACES);
+  const upgradeLabel = useUpgradeLabel();
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+    try {
+      const updatedWorkspace = await updateWorkspace({
+        allowPersonalSpaces: value,
+      });
+      setChecked(value);
+      setWorkspace(updatedWorkspace);
+    } catch (err) {
+      notifications.show({
+        message: err?.response?.data?.message,
+        color: "red",
+      });
+    }
+  };
+
+  return (
+    <Tooltip label={upgradeLabel} disabled={hasPersonalSpaces} refProp="rootRef">
+      <Switch
+        checked={checked}
+        onChange={handleChange}
+        disabled={!hasPersonalSpaces}
+        aria-label={t("Toggle allow personal spaces")}
+      />
+    </Tooltip>
+  );
+}
@@ -0,0 +1,34 @@
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import { ISpace } from "@/features/space/types/space.types";
+import {
+  createPersonalSpace,
+  getPersonalSpace,
+} from "@/ee/personal-space/services/personal-space-service";
+
+export function usePersonalSpaceQuery(
+  enabled: boolean,
+): UseQueryResult<ISpace | null, Error> {
+  return useQuery({
+    queryKey: ["personal-space"],
+    queryFn: () => getPersonalSpace(),
+    enabled,
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
+export function useCreatePersonalSpaceMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation<ISpace, Error, { name?: string }>({
+    mutationFn: (data) => createPersonalSpace(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["personal-space"] });
+      queryClient.invalidateQueries({ queryKey: ["spaces"] });
+    },
+  });
+}
@@ -0,0 +1,14 @@
+import api from "@/lib/api-client";
+import { ISpace } from "@/features/space/types/space.types";
+
+export async function getPersonalSpace(): Promise<ISpace | null> {
+  const req = await api.post<ISpace | null>("/personal-space/info", {});
+  return req.data;
+}
+
+export async function createPersonalSpace(data: {
+  name?: string;
+}): Promise<ISpace> {
+  const req = await api.post<ISpace>("/personal-space/create", data);
+  return req.data;
+}
@@ -1,11 +1,11 @@
 import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
 import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
-import { format } from "date-fns";
 import { useTranslation } from "react-i18next";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import React from "react";
 import NoTableResults from "@/components/common/no-table-results";
 import { IScimToken } from "@/ee/scim/types/scim-token.types";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";

 interface ScimTokenTableProps {
  tokens: IScimToken[];
@@ -21,10 +21,11 @@ export function ScimTokenTable({
  onRevoke,
 }: ScimTokenTableProps) {
  const { t } = useTranslation();
+  const locale = useDateFnsLocale();

  const formatDate = (date: Date | string | null) => {
    if (!date) return t("Never");
-    return format(new Date(date), "MMM dd, yyyy");
+    return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
  };

  return (
@@ -32,6 +32,12 @@
    margin-bottom: 0.25em;
 }

+/* The emoji glyph renders larger than its font-size box; let the transparent
+   ActionIcon overflow so it isn't clipped on the edges. */
+.emojiButton button {
+    overflow: visible;
+}
+
 .titleInput {
    font-size: 2.5rem;
    font-weight: 700;
@@ -32,6 +32,12 @@ import {
 } from "../queries/template-query";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query";
 import useUserRole from "@/hooks/use-user-role";
+import { useAtomValue } from "jotai";
+import { userAtom } from "@/features/user/atoms/current-user-atom";
+import { FixedToolbar } from "@/features/editor/components/fixed-toolbar/fixed-toolbar";
+import { EditorLinkMenu } from "@/features/editor/components/link/link-menu";
+import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
+import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";

 import classes from "./template-editor.module.css";

@@ -39,6 +45,9 @@ export default function TemplateEditor() {
  const { t } = useTranslation();
  const { templateId } = useParams<{ templateId: string }>();
  const { isAdmin: isWorkspaceAdmin } = useUserRole();
+  const user = useAtomValue(userAtom);
+  const editorToolbarEnabled =
+    user?.settings?.preferences?.editorToolbar ?? false;

  const { data: existingTemplate } = useGetTemplateByIdQuery(templateId || "");
  const { data: spaces } = useGetSpacesQuery({ limit: 100 });
@@ -96,7 +105,7 @@ export default function TemplateEditor() {

  // Load template data into editor
  useEffect(() => {
-    if (existingTemplate && editor) {
+    if (existingTemplate && editor && !editor.isDestroyed) {
      loadedRef.current = false;
      setTitle(existingTemplate.title || "");
      setIcon(existingTemplate.icon || null);
@@ -238,6 +247,10 @@ export default function TemplateEditor() {
        </title>
      </Helmet>

+      {editorToolbarEnabled && editor && (
+        <FixedToolbar editor={editor} templateMode />
+      )}
+
      <div className={classes.header}>
        <Container size={900} h="100%" px={0}>
        <Group justify="space-between" h="100%" wrap="nowrap">
@@ -370,7 +383,8 @@ export default function TemplateEditor() {
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                e.preventDefault();
-                editor?.commands.focus("start");
+                if (editor && !editor.isDestroyed)
+                  editor.commands.focus("start");
              }
            }}
          />
@@ -379,6 +393,13 @@ export default function TemplateEditor() {
          )}
        </div>
        <EditorContent editor={editor} />
+        {editor && (
+          <>
+            <EditorAiMenu editor={editor} />
+            <EditorBubbleMenu editor={editor} templateMode />
+            <EditorLinkMenu editor={editor} />
+          </>
+        )}
        <div style={{ paddingBottom: "20vh" }} />
      </Container>
    </>
@@ -5,6 +5,7 @@ import {
  useQueryClient,
  UseQueryResult,
  InfiniteData,
+  keepPreviousData,
 } from "@tanstack/react-query";
 import { useAtom, useStore } from "jotai";
 import {
@@ -35,6 +36,7 @@ export function useGetTemplatesQuery(params?: { spaceId?: string }) {
    initialPageParam: undefined as string | undefined,
    getNextPageParam: (lastPage) =>
      lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
+    placeholderData: keepPreviousData,
  });
 }

@@ -15,6 +15,7 @@ import { currentUserAtom } from "@/features/user/atoms/current-user-atom";
 import { useCreateCommentMutation } from "@/features/comment/queries/comment-query";
 import { asideStateAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom";
 import { useEditor } from "@tiptap/react";
+import { isEditorReady } from "@docmost/editor-ext";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { useTranslation } from "react-i18next";

@@ -48,11 +49,14 @@ function CommentDialog({ editor, pageId, readOnly }: CommentDialogProps) {
      setReadOnlyCommentData(null);
    } else {
      setShowCommentPopup(false);
-      editor.chain().focus().unsetCommentDecoration().run();
+      if (isEditorReady(editor)) {
+        editor.chain().focus().unsetCommentDecoration().run();
+      }
    }
  };

  const getSelectedText = () => {
+    if (!isEditorReady(editor)) return "";
    const { from, to } = editor.state.selection;
    return editor.state.doc.textBetween(from, to);
  };
@@ -74,24 +78,28 @@ function CommentDialog({ editor, pageId, readOnly }: CommentDialogProps) {

      const createdComment =
        await createCommentMutation.mutateAsync(commentData);
-      editor
-        .chain()
-        .setComment(createdComment.id)
-        .unsetCommentDecoration()
-        .run();
+      if (isEditorReady(editor)) {
+        editor
+          .chain()
+          .setComment(createdComment.id)
+          .unsetCommentDecoration()
+          .run();
+        editor.commands.setTextSelection({
+          from: editor.view.state.selection.from,
+          to: editor.view.state.selection.from,
+        });
+      }
      setActiveCommentId(createdComment.id);

-      editor.commands.setTextSelection({ from: editor.view.state.selection.from, to: editor.view.state.selection.from });
-
      setAsideState({ tab: "comments", isAsideOpen: true });
      setTimeout(() => {
        const selector = `div[data-comment-id="${createdComment.id}"]`;
        const commentElement = document.querySelector(selector);
        commentElement?.scrollIntoView({ behavior: "smooth", block: "center" });

-        editor.view.dispatch(
-          editor.state.tr.scrollIntoView()
-        );
+        if (isEditorReady(editor)) {
+          editor.view.dispatch(editor.state.tr.scrollIntoView());
+        }
      }, 400);

    } finally {
@@ -112,22 +112,24 @@ const CommentEditor = forwardRef(
    // websocket on another browser). Skip for editable editors to avoid
    // resetting the cursor position on every keystroke.
    useEffect(() => {
-      if (!editable && commentEditor && defaultContent) {
+      if (!editable && commentEditor && !commentEditor.isDestroyed && defaultContent) {
        commentEditor.commands.setContent(defaultContent);
      }
    }, [defaultContent, editable, commentEditor]);

    useEffect(() => {
      setTimeout(() => {
-        if (autofocus) {
-          commentEditor?.commands.focus("end");
+        if (autofocus && commentEditor && !commentEditor.isDestroyed) {
+          commentEditor.commands.focus("end");
        }
      }, 10);
    }, [commentEditor, autofocus]);

    useImperativeHandle(ref, () => ({
      clearContent: () => {
-        commentEditor.commands.clearContent();
+        if (commentEditor && !commentEditor.isDestroyed) {
+          commentEditor.commands.clearContent();
+        }
      },
    }));

@@ -5,6 +5,7 @@ import { useAtom, useAtomValue } from "jotai";
 import { useTimeAgo } from "@/hooks/use-time-ago";
 import CommentEditor from "@/features/comment/components/comment-editor";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
+import { isEditorReady } from "@docmost/editor-ext";
 import CommentActions from "@/features/comment/components/comment-actions";
 import CommentMenu from "@/features/comment/components/comment-menu";
 import { useHasFeature } from "@/ee/hooks/use-feature";
@@ -75,7 +76,9 @@ function CommentListItem({
  async function handleDeleteComment() {
    try {
      await deleteCommentMutation.mutateAsync(comment.id);
-      editor?.commands.unsetComment(comment.id);
+      if (isEditorReady(editor)) {
+        editor.commands.unsetComment(comment.id);
+      }
    } catch (error) {
      console.error("Failed to delete comment:", error);
    }
@@ -93,7 +96,7 @@ function CommentListItem({
        resolved: !isResolved,
      });

-      if (editor) {
+      if (isEditorReady(editor)) {
        editor.commands.setCommentResolved(comment.id, !isResolved);
      }
    } catch (error) {
@@ -38,9 +38,11 @@ export interface BubbleMenuItem {

 type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {
  editor: Editor | null;
+  templateMode?: boolean;
 };

 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
+  const { templateMode = false } = props;
  const { t } = useTranslation();
  const [showAiMenu, setShowAiMenu] = useAtom(showAiMenuAtom);
  const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
@@ -232,8 +234,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
              ))}
            </ActionIcon.Group>

-            <LinkSelector />
-
            <ColorSelector
              editor={props.editor}
              isOpen={isColorSelectorOpen}
@@ -246,18 +246,22 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
          </>
        )}

-        <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
-          <ActionIcon
-            variant="default"
-            size="lg"
-            radius="6px"
-            aria-label={t(commentItem.name)}
-            style={{ border: "none" }}
-            onClick={commentItem.command}
-          >
-            <IconMessage size={16} stroke={2} />
-          </ActionIcon>
-        </Tooltip>
+        <LinkSelector />
+
+        {!templateMode && (
+          <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
+            <ActionIcon
+              variant="default"
+              size="lg"
+              radius="6px"
+              aria-label={t(commentItem.name)}
+              style={{ border: "none" }}
+              onClick={commentItem.command}
+            >
+              <IconMessage size={16} stroke={2} />
+            </ActionIcon>
+          </Tooltip>
+        )}
      </div>
    </BubbleMenu>
  );
@@ -11,6 +11,7 @@ import {
 } from "@/features/comment/atoms/comment-atom";
 import { useTranslation } from "react-i18next";
 import { getRelativeSelection, ySyncPluginKey } from "@tiptap/y-tiptap";
+import { isEditorReady } from "@docmost/editor-ext";

 type ReadonlyBubbleMenuProps = {
  editor: Editor;
@@ -29,6 +30,10 @@ export const ReadonlyBubbleMenu: FC<ReadonlyBubbleMenuProps> = ({ editor }) => {

  const updateMenuPosition = useCallback(() => {
    if (isInteractingRef.current) return;
+    if (!isEditorReady(editor)) {
+      setVisible(false);
+      return;
+    }

    const pmSelection = editor.state.selection;
    if (!(pmSelection instanceof TextSelection) || pmSelection.empty) {
@@ -97,7 +102,7 @@ export const ReadonlyBubbleMenu: FC<ReadonlyBubbleMenuProps> = ({ editor }) => {
  }, [showReadOnlyCommentPopup]);

  const handleCommentClick = () => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;

    const view = editor.view;
    const ystate = ySyncPluginKey.getState(view.state);
@@ -69,7 +69,7 @@ export function ColumnsMenu({ editor }: EditorMenuProps) {
  const { t } = useTranslation();
  const [isCountOpen, setIsCountOpen] = useState(false);
  const [copied, setCopied] = useState(false);
-  const copyTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const copyTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);

  const nodesWithMenus = [
    "callout",
@@ -111,8 +111,9 @@ async function reuploadPastedAttachments(
    const match = ATTACHMENT_URL_RE.exec(src);
    if (!match) return;

+    const cleanSrc = src.split("?")[0];
    const fileName =
-      node.attrs.name || src.split("/").pop() || "file";
+      node.attrs.name || cleanSrc.split("/").pop() || "file";

    pastedNodes.push({
      pos,
@@ -1,12 +1,12 @@
 import { FC } from "react";
 import { useAtomValue } from "jotai";
+import type { Editor } from "@tiptap/react";
 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";
@@ -16,8 +16,17 @@ 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);
+type FixedToolbarProps = {
+  editor?: Editor | null;
+  templateMode?: boolean;
+};
+
+export const FixedToolbar: FC<FixedToolbarProps> = ({
+  editor: editorProp,
+  templateMode = false,
+}) => {
+  const editorFromAtom = useAtomValue(pageEditorAtom);
+  const editor = editorProp ?? editorFromAtom;
  const state = useToolbarState(editor);
  const workspace = useAtomValue(workspaceAtom);
  const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
@@ -48,14 +57,12 @@ export const FixedToolbar: FC = () => {
          <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} />
+          <MediaGroup editor={editor} templateMode={templateMode} />
          <div className={classes.divider} />
          <QuickInsertsGroup editor={editor} />
-          <MoreInsertsGroup editor={editor} />
+          <MoreInsertsGroup editor={editor} templateMode={templateMode} />
          <div className={classes.divider} />
          <HistoryGroup editor={editor} state={state} />
        </div>
@@ -1,6 +0,0 @@
-import { FC } from "react";
-import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector";
-
-export const LinkGroup: FC = () => {
-  return <LinkSelector />;
-};
@@ -17,6 +17,7 @@ import { uploadPdfAction } from "@/features/editor/components/pdf/upload-pdf-act

 interface Props {
  editor: Editor;
+  templateMode?: boolean;
 }

 type UploadFn = (
@@ -60,7 +61,7 @@ function pickFile(
  input.click();
 }

-export const MediaGroup: FC<Props> = ({ editor }) => {
+export const MediaGroup: FC<Props> = ({ editor, templateMode }) => {
  const { t } = useTranslation();

  return (
@@ -78,24 +79,30 @@ export const MediaGroup: FC<Props> = ({ editor }) => {
        </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>
+        {!templateMode && (
+          <Menu.Item
+            leftSection={<IconPhoto size={16} />}
+            onClick={() => pickFile(editor, "image/*", true, uploadImageAction)}
+          >
+            {t("Image")}
+          </Menu.Item>
+        )}
+        {!templateMode && (
+          <Menu.Item
+            leftSection={<IconMovie size={16} />}
+            onClick={() => pickFile(editor, "video/*", true, uploadVideoAction)}
+          >
+            {t("Video")}
+          </Menu.Item>
+        )}
+        {!templateMode && (
+          <Menu.Item
+            leftSection={<IconMusic size={16} />}
+            onClick={() => pickFile(editor, "audio/*", true, uploadAudioAction)}
+          >
+            {t("Audio")}
+          </Menu.Item>
+        )}
        <Menu.Item
          leftSection={<IconFileTypePdf size={16} />}
          onClick={() =>
@@ -104,14 +111,16 @@ export const MediaGroup: FC<Props> = ({ editor }) => {
        >
          PDF
        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconPaperclip size={16} />}
-          onClick={() =>
-            pickFile(editor, "", true, uploadAttachmentAction, true)
-          }
-        >
-          {t("File attachment")}
-        </Menu.Item>
+        {!templateMode && (
+          <Menu.Item
+            leftSection={<IconPaperclip size={16} />}
+            onClick={() =>
+              pickFile(editor, "", true, uploadAttachmentAction, true)
+            }
+          >
+            {t("File attachment")}
+          </Menu.Item>
+        )}
      </Menu.Dropdown>
    </Menu>
  );
@@ -32,16 +32,17 @@ import { useTranslation } from "react-i18next";

 interface Props {
  editor: Editor;
+  templateMode?: boolean;
 }

-export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
-  const { t } = useTranslation();
+export const MoreInsertsGroup: FC<Props> = ({ editor, templateMode }) => {
+  const { t, i18n } = useTranslation();

  const setEmbed = (provider: string) =>
    editor.chain().focus().setEmbed({ provider }).run();

  const insertDate = () => {
-    const currentDate = new Date().toLocaleDateString("en-US", {
+    const currentDate = new Date().toLocaleDateString(i18n.language, {
      year: "numeric",
      month: "long",
      day: "numeric",
@@ -91,14 +92,16 @@ export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
        >
          {t("Subpages")}
        </Menu.Item>
-        <Menu.Item
-          leftSection={<IconRotate2 size={16} />}
-          onClick={() =>
-            editor.chain().focus().insertTransclusionSource().run()
-          }
-        >
-          {t("Synced block")}
-        </Menu.Item>
+        {!templateMode && (
+          <Menu.Item
+            leftSection={<IconRotate2 size={16} />}
+            onClick={() =>
+              editor.chain().focus().toggleTransclusionSource().run()
+            }
+          >
+            {t("Synced block")}
+          </Menu.Item>
+        )}

        <Menu.Divider />
        <Menu.Label>{t("Diagrams")}</Menu.Label>
@@ -115,18 +118,22 @@ export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
        >
          {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>
+        {!templateMode && (
+          <Menu.Item
+            leftSection={<IconDrawio size={16} />}
+            onClick={() => editor.chain().focus().setDrawio().run()}
+          >
+            Draw.io
+          </Menu.Item>
+        )}
+        {!templateMode && (
+          <Menu.Item
+            leftSection={<IconExcalidraw size={16} />}
+            onClick={() => editor.chain().focus().setExcalidraw().run()}
+          >
+            Excalidraw
+          </Menu.Item>
+        )}

        <Menu.Divider />
        <Menu.Label>{t("Embeds")}</Menu.Label>
@@ -28,7 +28,7 @@ import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
 import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
 import { extractPageSlugId } from "@/lib";
-import { sanitizeUrl, copyToClipboard } from "@docmost/editor-ext";
+import { sanitizeUrl, copyToClipboard, isEditorReady } from "@docmost/editor-ext";
 import { normalizeUrl } from "@/lib/utils";

 const parseInternalLink = (
@@ -313,7 +313,9 @@ export default function LinkView(props: MarkViewProps) {
  );

  const handleRemoveLink = useCallback(() => {
-    editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    if (isEditorReady(editor)) {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    }
    setPopoverState("closed");
  }, [editor]);

@@ -345,7 +347,7 @@ export default function LinkView(props: MarkViewProps) {
              NodeFilter.SHOW_TEXT,
            );
            const textNode = walker.nextNode();
-            if (textNode) {
+            if (textNode && isEditorReady(editor)) {
              const view = editor.view as any;
              view.domObserver.stop();
              textNode.nodeValue = val;
@@ -17,6 +17,7 @@ import {
  IconX,
 } from "@tabler/icons-react";
 import { useEditor } from "@tiptap/react";
+import { isEditorReady } from "@docmost/editor-ext";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { searchAndReplaceStateAtom } from "@/features/editor/components/search-and-replace/atoms/search-and-replace-state-atom.ts";
 import { useAtom } from "jotai";
@@ -64,13 +65,13 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
      replaceButtonToggle();
    }
    // Clear search term in editor
-    if (editor) {
+    if (isEditorReady(editor)) {
      editor.commands.setSearchTerm("");
    }
  };

  const goToSelection = () => {
-    if (!editor) return;
+    if (!isEditorReady(editor)) return;

    const { results, resultIndex } = editor.storage.searchAndReplace;
    //TODO: check type error
@@ -90,27 +91,32 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
  };

  const next = () => {
+    if (!isEditorReady(editor)) return;
    editor.commands.nextSearchResult();
    goToSelection();
  };

  const previous = () => {
+    if (!isEditorReady(editor)) return;
    editor.commands.previousSearchResult();
    goToSelection();
  };

  const replace = () => {
+    if (!isEditorReady(editor)) return;
    editor.commands.setReplaceTerm(replaceText);
    editor.commands.replace();
    goToSelection();
  };

  const replaceAll = () => {
+    if (!isEditorReady(editor)) return;
    editor.commands.setReplaceTerm(replaceText);
    editor.commands.replaceAll();
  };

  useEffect(() => {
+    if (!isEditorReady(editor)) return;
    editor.commands.setSearchTerm(searchText);
    editor.commands.resetIndex();
    editor.commands.selectCurrentItem();
@@ -118,6 +124,7 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo

  const handleOpenEvent = (e) => {
    setPageFindState({ isOpen: true });
+    if (!isEditorReady(editor)) return;
    const selectedText = editor.state.doc.textBetween(
      editor.state.selection.from,
      editor.state.selection.to,
@@ -149,6 +156,7 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
  }, [pageFindState.isOpen]);

  useEffect(() => {
+    if (!isEditorReady(editor)) return;
    editor.commands.setCaseSensitive(caseSensitive.isCaseSensitive);
    editor.commands.resetIndex();
    goToSelection();
@@ -21,6 +21,7 @@ import {
  IconMenu4,
  IconPageBreak,
  IconCalendar,
+  IconClock,
  IconAppWindow,
  IconSitemap,
  IconColumns3,
@@ -43,6 +44,7 @@ import IconMermaid from "@/components/icons/icon-mermaid";
 import IconDrawio from "@/components/icons/icon-drawio";
 import { IconColumns4 } from "@/components/icons/icon-columns-4";
 import { IconColumns5 } from "@/components/icons/icon-columns-5";
+import i18n from "@/i18n.ts";
 import {
  AirtableIcon,
  FigmaIcon,
@@ -459,7 +461,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
      searchTerms: ["date", "today"],
      icon: IconCalendar,
      command: ({ editor, range }: CommandProps) => {
-        const currentDate = new Date().toLocaleDateString("en-US", {
+        const currentDate = new Date().toLocaleDateString(i18n.language, {
          year: "numeric",
          month: "long",
          day: "numeric",
@@ -473,6 +475,25 @@ const CommandGroups: SlashMenuGroupedItemsType = {
          .run();
      },
    },
+    {
+      title: "Time",
+      description: "Insert current time",
+      searchTerms: ["time", "now", "clock"],
+      icon: IconClock,
+      command: ({ editor, range }: CommandProps) => {
+        const currentTime = new Date().toLocaleTimeString(i18n.language, {
+          hour: "numeric",
+          minute: "numeric",
+        });
+
+        editor
+          .chain()
+          .focus()
+          .deleteRange(range)
+          .insertContent(currentTime)
+          .run();
+      },
+    },
    {
      title: "Status",
      description: "Insert inline status badge.",
@@ -766,18 +787,34 @@ export const getSuggestionItems = ({
  for (const [group, items] of Object.entries(CommandGroups)) {
    const filteredItems = items.filter((item) => {
      if (excludeItems?.has(item.title)) return false;
+      const translatedTitle = i18n.t(item.title);
+      const translatedDescription = i18n.t(item.description);
      return (
        fuzzyMatch(search, item.title) ||
+        fuzzyMatch(search, translatedTitle) ||
        item.description.toLowerCase().includes(search) ||
+        translatedDescription.toLowerCase().includes(search) ||
        (item.searchTerms &&
-          item.searchTerms.some((term: string) => term.includes(search)))
+          item.searchTerms.some(
+            (term: string) =>
+              term.includes(search) ||
+              i18n.t(term).toLowerCase().includes(search),
+          ))
      );
    });

    if (filteredItems.length) {
      filteredGroups[group] = filteredItems.sort((a, b) => {
-        const aTitle = a.title.toLowerCase().includes(search) ? 0 : 1;
-        const bTitle = b.title.toLowerCase().includes(search) ? 0 : 1;
+        const aTitle =
+          a.title.toLowerCase().includes(search) ||
+          i18n.t(a.title).toLowerCase().includes(search)
+            ? 0
+            : 1;
+        const bTitle =
+          b.title.toLowerCase().includes(search) ||
+          i18n.t(b.title).toLowerCase().includes(search)
+            ? 0
+            : 1;
        return aTitle - bTitle;
      });
    }
@@ -1,7 +1,7 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { posToDOMRect, findParentNode } from "@tiptap/react";
 import { Node as PMNode } from "@tiptap/pm/model";
-import React, { useCallback } from "react";
+import React, { useCallback, type JSX } from "react";
 import { ActionIcon, Tooltip } from "@mantine/core";
 import { IconTrash } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
@@ -50,6 +50,7 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
  const headerPaddingRef = useRef<HTMLDivElement | null>(null);

  const handleScrollToHeading = (position: number) => {
+    if (!props.editor || props.editor.isDestroyed) return;
    const { view } = props.editor;

    const headerOffset = parseInt(
@@ -73,16 +74,21 @@ export const TableOfContents: FC<TableOfContentsProps> = (props) => {
  };

  const handleUpdate = () => {
-    const result = recalculateLinks(props.editor?.$nodes("heading"));
+    if (!props.editor || props.editor.isDestroyed) return;
+
+    const result = recalculateLinks(props.editor.$nodes("heading"));

    setLinks(result.links);
    setHeadingDOMNodes(result.nodes);
  };

  useEffect(() => {
+    // "create" repopulates once the editor view mounts after this component
+    props.editor?.on("create", handleUpdate);
    props.editor?.on("update", handleUpdate);

    return () => {
+      props.editor?.off("create", handleUpdate);
      props.editor?.off("update", handleUpdate);
    };
  }, [props.editor]);
@@ -9,7 +9,7 @@ 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 { isCellSelection, isEditorReady } from "@docmost/editor-ext";
 import { CellChevronMenu } from "./menus/cell-chevron-menu";
 import classes from "./handle.module.css";

@@ -27,7 +27,9 @@ export const CellChevron = React.memo(function CellChevron({
  tablePos,
 }: CellChevronProps) {
  const { t } = useTranslation();
-  const cellDom = editor.view.nodeDOM(cellPos) as HTMLElement | null;
+  const cellDom = isEditorReady(editor)
+    ? (editor.view.nodeDOM(cellPos) as HTMLElement | null)
+    : null;

  const { refs, floatingStyles, middlewareData } = useFloating({
    placement: "top-end",
@@ -61,6 +63,7 @@ export const CellChevron = React.memo(function CellChevron({
  });

  const onOpen = useCallback(() => {
+    if (!isEditorReady(editor)) return;
    const current = editor.state.selection;

    // Preserve an existing multi-cell CellSelection that already covers
@@ -86,6 +89,7 @@ export const CellChevron = React.memo(function CellChevron({
  }, [editor, cellPos]);

  const onClose = useCallback(() => {
+    if (!isEditorReady(editor)) return;
    editor.commands.unfreezeHandles();
  }, [editor]);

@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import type { Editor } from "@tiptap/react";
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { isEditorReady } from "@docmost/editor-ext";
 import { buildRowOrColumnSelection, Orientation } from "../lib/select-row-column";

 interface Args {
@@ -19,6 +20,7 @@ export function useColumnRowMenuLifecycle({
  tablePos,
 }: Args) {
  const onOpen = useCallback(() => {
+    if (!isEditorReady(editor)) return;
    const selection = buildRowOrColumnSelection(
      editor.state,
      tableNode,
@@ -33,6 +35,7 @@ export function useColumnRowMenuLifecycle({
  }, [editor, orientation, index, tableNode, tablePos]);

  const onClose = useCallback(() => {
+    if (!isEditorReady(editor)) return;
    editor.commands.unfreezeHandles();
  }, [editor]);

@@ -2,6 +2,7 @@ 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";
+import { isEditorReady } from "@docmost/editor-ext";

 type Scope =
  | { kind: "col"; index: number }
@@ -15,6 +16,7 @@ export function useTableClear(
  scope: Scope,
 ) {
  return useCallback(() => {
+    if (!isEditorReady(editor)) return;
    const tr = editor.state.tr;
    const tableStart = tablePos + 1;
    const map = TableMap.get(tableNode);
@@ -2,7 +2,7 @@ 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";
+import { isEditorReady, moveColumn, moveRow } from "@docmost/editor-ext";

 export type MoveDirection = "left" | "right" | "up" | "down";

@@ -25,7 +25,7 @@ export function useTableMoveRowColumn(
  const canMove = target >= 0 && target <= maxIndex;

  const handleMove = useCallback(() => {
-    if (!canMove) return;
+    if (!canMove || !isEditorReady(editor)) return;
    const tr = editor.state.tr;
    const moved =
      orientation === "col"
@@ -4,6 +4,7 @@ import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import {
  convertArrayOfRowsToTableNode,
  convertTableNodeToArrayOfRows,
+  isEditorReady,
  transpose,
 } from "@docmost/editor-ext";
 import {
@@ -63,7 +64,7 @@ export function useTableSort({
  }, [tableNode, orientation, index]);

  const handleSort = useCallback(() => {
-    if (!canSort) return;
+    if (!canSort || !isEditorReady(editor)) return;

    const rows = convertTableNodeToArrayOfRows(tableNode);
    const axes = orientation === "col" ? rows : transpose(rows);
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import React, { useCallback, type JSX } from "react";
 import {
  EditorMenuProps,
  ShouldShowProps,
@@ -1,6 +1,6 @@
 import { posToDOMRect, findParentNode } from "@tiptap/react";
 import { Node as PMNode } from "@tiptap/pm/model";
-import React, { useCallback } from "react";
+import React, { useCallback, type JSX } from "react";
 import {
  EditorMenuProps,
  ShouldShowProps,
@@ -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, "");
+          },
+        },
+      }),
+    ];
+  },
+});
@@ -3,7 +3,7 @@ import { StarterKit } from "@tiptap/starter-kit";
 import { Code } from "@tiptap/extension-code";
 import { TextAlign } from "@tiptap/extension-text-align";
 import { TaskList, TaskItem } from "@tiptap/extension-list";
-import { Placeholder, CharacterCount } from "@tiptap/extensions";
+import { Placeholder, CharacterCount, UndoRedo } from "@tiptap/extensions";
 import { Superscript } from "@tiptap/extension-superscript";
 import SubScript from "@tiptap/extension-subscript";
 import { Typography } from "@tiptap/extension-typography";
@@ -112,6 +112,7 @@ 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);
@@ -383,6 +384,7 @@ export const mainExtensions = [
  MarkdownClipboard.configure({
    transformPastedText: true,
  }),
+  CleanStyles,
  CharacterCount.configure({
    wordCounter: (text) => countWords(text),
  }),
@@ -435,6 +437,7 @@ const TemplateSlashCommand = Command.configure({
 export const templateExtensions = [
  ...mainExtensions.filter((ext: any) => ext !== SlashCommand),
  TemplateSlashCommand,
+  UndoRedo,
 ] as any;

 export const collabExtensions: CollabExtensions = (provider, user) => [
@@ -14,6 +14,7 @@ import {
  WebSocketStatus,
  HocuspocusProviderWebsocket,
  onSyncedParameters,
+  onStatelessParameters,
 } from "@hocuspocus/provider";
 import {
  Editor,
@@ -145,6 +146,24 @@ export default function PageEditor({
      const onSyncedHandler = (event: onSyncedParameters) => {
        setIsRemoteSynced(event.state);
      };
+      const onStatelessHandler = ({ payload }: onStatelessParameters) => {
+        try {
+          const message = JSON.parse(payload);
+          if (message?.type !== "page.updated" || !message.updatedAt) return;
+          const pageData = queryClient.getQueryData<IPage>(["pages", slugId]);
+          if (pageData) {
+            queryClient.setQueryData(["pages", slugId], {
+              ...pageData,
+              updatedAt: message.updatedAt,
+              ...(message.lastUpdatedBy && {
+                lastUpdatedBy: message.lastUpdatedBy,
+              }),
+            });
+          }
+        } catch {
+          // ignore unrelated stateless messages
+        }
+      };
      const onAuthenticationFailedHandler = () => {
        const payload = jwtDecode(collabQuery?.token);
        const now = Date.now().valueOf() / 1000;
@@ -169,6 +188,7 @@ export default function PageEditor({
        onAuthenticationFailed: onAuthenticationFailedHandler,
        onStatus: onStatusHandler,
        onSynced: onSyncedHandler,
+        onStateless: onStatelessHandler,
      });

      local.on("synced", onLocalSyncedHandler);
@@ -318,7 +338,6 @@ export default function PageEditor({
      queryClient.setQueryData(["pages", slugId], {
        ...pageData,
        content: newContent,
-        updatedAt: new Date(),
      });
    }
  }, 3000);
@@ -15,6 +15,7 @@ interface PageEditorProps {
  title: string;
  content: any;
  pageId?: string;
+  printMode?: boolean;
  /**
   * 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
@@ -28,6 +29,7 @@ export default function ReadonlyPageEditor({
  title,
  content,
  pageId,
+  printMode = false,
  shareId,
 }: PageEditorProps) {
  const [, setReadOnlyEditor] = useAtom(readOnlyEditorAtom);
@@ -48,8 +50,12 @@ export default function ReadonlyPageEditor({
  }, []);

  const extensions = useMemo(() => {
+    const excludedExtensions = new Set([
+      "uniqueID",
+      ...(printMode ? ["tableHeaderPin", "tableReadonlySort"] : []),
+    ]);
    const filteredExtensions = mainExtensions.filter(
-      (ext) => ext.name !== "uniqueID",
+      (ext) => !excludedExtensions.has(ext.name),
    );

    return [
@@ -59,7 +65,7 @@ export default function ReadonlyPageEditor({
        updateDocument: false,
      }),
    ];
-  }, []);
+  }, [printMode]);

  const titleExtensions = [
    Document.extend({
@@ -103,13 +103,13 @@
    margin: 0;

    @mixin where-light {
-      background-color: var(--code-bg, var(--mantine-color-gray-1));
-      color: var(--mantine-color-pink-7);
+      background-color: var(--mantine-color-gray-1);
+      color: var(--mantine-color-text);
    }

    @mixin where-dark {
-      background-color: var(--mantine-color-dark-8);
-      color: var(--mantine-color-pink-7);
+      background-color: var(--mantine-color-dark-5) !important;
+      color: var(--mantine-color-text);
    }
  }
 }
@@ -163,8 +163,13 @@

@media print {
  .tableWrapper.tableHeaderPinned table tr:first-child {
-    position: static;
-    transform: none;
+    position: static !important;
+    top: auto !important;
+    transform: none !important;
+  }
+
+  .tableReadonlySortChevron {
+    display: none !important;
  }
 }

@@ -204,10 +209,6 @@
  opacity: 1;
 }

-.ProseMirror table th:has(.tableReadonlySortChevron) {
-  padding-right: 30px;
-}
-
 .tableReadonlySortChevron:hover {
  background: light-dark(
    rgba(55, 53, 47, 0.16),
@@ -272,4 +273,4 @@
  .prosemirror-dropcursor-inline {
    display: none;
  }
-}
+}
@@ -152,7 +152,11 @@ export function TitleEditor({
  const debounceUpdate = useDebouncedCallback(saveTitle, 500);

  useEffect(() => {
-    if (titleEditor && title !== titleEditor.getText()) {
+    if (
+      titleEditor &&
+      !titleEditor.isDestroyed &&
+      title !== titleEditor.getText()
+    ) {
      titleEditor.commands.setContent(title);
    }
  }, [pageId, title, titleEditor]);
@@ -91,7 +91,9 @@ export default function GroupMembersList() {
                        <ActionIcon
                          variant="subtle"
                          c="gray"
-                          aria-label={t("Member actions")}
+                          aria-label={t("Member actions for {{name}}", {
+                            name: user.name,
+                          })}
                        >
                          <IconDots size={20} stroke={2} />
                        </ActionIcon>
@@ -1,15 +1,27 @@
-import { format, isThisYear, isToday, isYesterday } from "date-fns";
+import { isThisYear, isToday, isYesterday } from "date-fns";
 import i18n from "@/i18n.ts";
+import { formatLocalized, getDateFnsLocale } from "@/lib/date-locale.ts";

 export function formatLabelListDate(date: Date): string {
+  const locale = getDateFnsLocale();
  if (isToday(date)) {
-    return i18n.t("Today, {{time}}", { time: format(date, "h:mma") });
+    return i18n.t("Today, {{time}}", {
+      time: formatLocalized(date, "h:mma", "p", locale),
+    });
  }
  if (isYesterday(date)) {
-    return i18n.t("Yesterday, {{time}}", { time: format(date, "h:mma") });
+    return i18n.t("Yesterday, {{time}}", {
+      time: formatLocalized(date, "h:mma", "p", locale),
+    });
  }
  if (isThisYear(date)) {
-    return format(date, "MMM dd");
+    if (locale.code?.startsWith("en")) {
+      return formatLocalized(date, "MMM dd", "MMM dd", locale);
+    }
+    return new Intl.DateTimeFormat(i18n.language, {
+      month: "short",
+      day: "numeric",
+    }).format(date);
  }
-  return format(date, "MMM dd, yyyy");
+  return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
 }
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useId, useState } from "react";
 import {
  ActionIcon,
  Group,
@@ -31,6 +31,7 @@ import classes from "../notification.module.css";

 export function NotificationPopover() {
  const { t } = useTranslation();
+  const titleId = useId();
  const [opened, setOpened] = useState(false);
  const [tab, setTab] = useState<NotificationTab>("direct");
  const [filter, setFilter] = useState<NotificationFilter>("all");
@@ -83,10 +84,11 @@ export function NotificationPopover() {

      <Popover.Dropdown
        p={0}
+        aria-labelledby={titleId}
        style={{ width: "min(420px, calc(100vw - 24px))" }}
      >
        <Group justify="space-between" px="md" py="sm">
-          <Title order={2} fz="sm" fw={600}>
+          <Title id={titleId} order={2} fz="sm" fw={600}>
            {t("Notifications")}
          </Title>
          <Group gap={4}>
@@ -1,3 +1,4 @@
+import i18n from "@/i18n.ts";
 import { INotification } from "./types/notification.types";

 export function formatRelativeTime(dateStr: string): string {
@@ -8,15 +9,15 @@ export function formatRelativeTime(dateStr: string): string {
  const diffHours = Math.floor(diffMs / 3_600_000);
  const diffDays = Math.floor(diffMs / 86_400_000);

-  if (diffMin < 1) return "now";
+  if (diffMin < 1) return i18n.t("now");
  if (diffMin < 60) return `${diffMin}m`;
  if (diffHours < 24) return `${diffHours}h`;
  if (diffDays < 7) return `${diffDays}d`;

-  return date.toLocaleDateString(undefined, {
+  return new Intl.DateTimeFormat(i18n.language, {
    month: "short",
    day: "numeric",
-  });
+  }).format(date);
 }

 type TimeGroup = "today" | "yesterday" | "this_week" | "older";
@@ -16,7 +16,8 @@ import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
 import { useBacklinksCountQuery } from "@/features/page-details/queries/backlinks-query.ts";
 import { BacklinksModal } from "./backlinks-modal";
-import { formattedDate, timeAgo } from "@/lib/time.ts";
+import { formattedDate } from "@/lib/time.ts";
+import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { LabelsSection } from "@/features/label/components/labels-section.tsx";

@@ -139,6 +140,7 @@ function StatsSection({
  updatedAt: Date | string;
 }) {
  const { t } = useTranslation();
+  const lastUpdated = useTimeAgo(updatedAt);
  return (
    <Stack gap="xs">
      <Text size="xs" fw={500} c="dimmed">
@@ -150,10 +152,7 @@ function StatsSection({
        label={t("Created")}
        value={formattedDate(new Date(createdAt))}
      />
-      <StatRow
-        label={t("Last updated")}
-        value={timeAgo(new Date(updatedAt))}
-      />
+      <StatRow label={t("Last updated")} value={lastUpdated} />
    </Stack>
  );
 }
@@ -34,7 +34,7 @@ export function HistoryEditor({
  });

  useEffect(() => {
-    if (!editor || !content) return;
+    if (!editor || editor.isDestroyed || !content) return;

    let decorationSet = DecorationSet.empty;
    let addedCount = 0;
@@ -132,6 +132,25 @@ export async function exportPage(data: IExportPageParams): Promise<void> {
  saveAs(req.data, decodedFileName);
 }

+export async function exportPageToDocx(data: { pageId: string }): Promise<void> {
+  const req = await api.post("/docx-export", data, {
+    responseType: "blob",
+  });
+
+  const fileName = req?.headers["content-disposition"]
+    .split("filename=")[1]
+    .replace(/"/g, "");
+
+  let decodedFileName = fileName;
+  try {
+    decodedFileName = decodeURIComponent(fileName);
+  } catch (err) {
+    // fallback to raw filename
+  }
+
+  saveAs(req.data, decodedFileName);
+}
+
 export async function importPage(file: File, spaceId: string) {
  const formData = new FormData();
  formData.append("spaceId", spaceId);
@@ -34,6 +34,7 @@ import { treeDataAtom } from "@/features/page/tree/atoms/tree-data-atom.ts";
 import { treeModel } from "@/features/page/tree/model/tree-model";
 import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
 import type { SpaceTreeNode } from "@/features/page/tree/types.ts";
+import classes from "@/features/page/tree/styles/tree.module.css";

 export interface NodeMenuProps {
  node: SpaceTreeNode;
@@ -123,8 +124,9 @@ export function NodeMenu({ node, canEdit }: NodeMenuProps) {
      <Menu shadow="md" width={200}>
        <Menu.Target>
          <ActionIcon
-            variant="transparent"
-            c="gray"
+            variant="subtle"
+            color="gray"
+            className={classes.actionIcon}
            aria-label={t("Page menu for {{name}}", { name: node.name || t("untitled") })}
            tabIndex={-1}
            onClick={(e) => {
@@ -201,13 +201,13 @@ function PageArrow({ isOpen, hasChildren, onToggle }: PageArrowProps) {
    return (
      <span
        aria-hidden
+        className={classes.actionIcon}
        style={{
          width: 20,
          height: 20,
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
-          color: "var(--mantine-color-gray-6)",
          flexShrink: 0,
        }}
      >
@@ -220,7 +220,8 @@ function PageArrow({ isOpen, hasChildren, onToggle }: PageArrowProps) {
    <ActionIcon
      size={20}
      variant="subtle"
-      c="gray"
+      color="gray"
+      className={classes.actionIcon}
      aria-label={isOpen ? t("Collapse") : t("Expand")}
      aria-expanded={isOpen}
      tabIndex={-1}
@@ -272,8 +273,9 @@ function CreateNode({

  return (
    <ActionIcon
-      variant="transparent"
-      c="gray"
+      variant="subtle"
+      color="gray"
+      className={classes.actionIcon}
      aria-label={t("Create subpage of {{name}}", { name: node.name || t("untitled") })}
      tabIndex={-1}
      onClick={(e) => {
@@ -57,6 +57,10 @@
    flex-shrink: 0;
 }

+.actionIcon {
+    color: light-dark(var(--mantine-color-dark-3), var(--mantine-color-gray-4));
+}
+
 .text {
    flex: 1;
    /* min-width: 0 lets a flex child shrink below its content size — required
@@ -98,4 +98,5 @@ export interface IExportPageParams {
 export enum ExportFormat {
  HTML = "html",
  Markdown = "markdown",
+  Docx = "docx",
 }
@@ -17,6 +17,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query";
 import { SpaceFilterMenu } from "@/features/space/components/space-filter-menu";
+import { RadioMenuItem } from "@/components/ui/radio-menu-item";
 import { useHasFeature } from "@/ee/hooks/use-feature";
 import { Feature } from "@/ee/features";
 import classes from "./search-spotlight-filters.module.css";
@@ -175,7 +176,7 @@ export function SearchSpotlightFilters({
          {contentTypeOptions.map((option) => (
            <Menu.Item
              key={option.value}
-              role="menuitemradio"
+              component={RadioMenuItem}
              aria-checked={contentType === option.value}
              onClick={() =>
                !option.disabled &&
@@ -7,8 +7,8 @@ import Paginate from "@/components/common/paginate.tsx";
 import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
 import { useGetSharesQuery } from "@/features/share/queries/share-query.ts";
 import { ISharedItem } from "@/features/share/types/share.types.ts";
-import { format } from "date-fns";
 import ShareActionMenu from "@/features/share/components/share-action-menu.tsx";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
 import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
 import { getPageIcon } from "@/lib";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
@@ -20,6 +20,7 @@ export default function ShareList() {
  const { t } = useTranslation();
  const { cursor, goNext, goPrev } = useCursorPaginate();
  const { data, isLoading } = useGetSharesQuery({ cursor });
+  const locale = useDateFnsLocale();

  if (!isLoading && data?.items.length === 0) {
    return <EmptyState icon={IconWorld} title={t("No shared pages")} />;
@@ -81,7 +82,12 @@ export default function ShareList() {
                </Table.Td>
                <Table.Td>
                  <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
-                    {format(new Date(share.createdAt), "MMM dd, yyyy")}
+                    {formatLocalized(
+                      share.createdAt,
+                      "MMM dd, yyyy",
+                      "PP",
+                      locale,
+                    )}
                  </Text>
                </Table.Td>
                <Table.Td>
@@ -64,7 +64,7 @@ export default function ShareShell({
  const [fullWidth, setFullWidth] = useAtom(sharedPageFullWidthAtom);
  const [sidebarWidth, setSidebarWidth] = useAtom(sidebarWidthAtom);
  const [isResizing, setIsResizing] = useState(false);
-  const sidebarRef = useRef<HTMLElement | null>(null);
+  const sidebarRef = useRef<HTMLDivElement>(null);

  const startResizing = useCallback((e: React.MouseEvent) => {
    e.preventDefault();
@@ -17,8 +17,8 @@ const formSchema = z.object({
    .min(2)
    .max(100)
    .regex(
-      /^[a-zA-Z0-9]+$/,
-      "Space slug must be alphanumeric. No special characters",
+      /^[a-zA-Z0-9][a-zA-Z0-9_-]*$/,
+      "Space slug must start with a letter or number and may contain hyphens and underscores",
    ),
  description: z.string().max(500),
 });
@@ -15,8 +15,8 @@ const formSchema = z.object({
    .min(2)
    .max(100)
    .regex(
-      /^[a-zA-Z0-9]+$/,
-      "Space slug must be alphanumeric. No special characters",
+      /^[a-zA-Z0-9][a-zA-Z0-9_-]*$/,
+      "Space slug must start with a letter or number and may contain hyphens and underscores",
    ),
 });

@@ -13,6 +13,7 @@ import { useDebouncedValue } from "@mantine/hooks";
 import { IconCheck, IconSearch } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query";
+import { RadioMenuItem } from "@/components/ui/radio-menu-item";

 type SpaceFilterMenuProps = {
  value: string | null;
@@ -75,7 +76,7 @@ export function SpaceFilterMenu({

        <ScrollArea.Autosize mah={280}>
          <Menu.Item
-            role="menuitemradio"
+            component={RadioMenuItem}
            aria-checked={!value}
            onClick={() => onChange(null)}
          >
@@ -103,7 +104,7 @@ export function SpaceFilterMenu({
          {orderedSpaces.map((space) => (
            <Menu.Item
              key={space.id}
-              role="menuitemradio"
+              component={RadioMenuItem}
              aria-checked={value === space.id}
              onClick={() => onChange(space.id)}
            >
@@ -210,7 +210,9 @@ export default function SpaceMembersList({
                          <ActionIcon
                            variant="subtle"
                            c="gray"
-                            aria-label={t("Member actions")}
+                            aria-label={t("Member actions for {{name}}", {
+                              name: member.name,
+                            })}
                          >
                            <IconDots size={20} stroke={2} />
                          </ActionIcon>
@@ -24,6 +24,7 @@ export interface ISpace {
  description: string;
  logo?: string;
  slug: string;
+  isPersonal?: boolean;
  hostname: string;
  creatorId: string;
  createdAt: Date;
@@ -12,9 +12,14 @@ import useUserRole from "@/hooks/use-user-role.tsx";

 interface Props {
  userId: string;
+  name: string;
  deactivatedAt: Date | null;
 }
-export default function MemberActionMenu({ userId, deactivatedAt }: Props) {
+export default function MemberActionMenu({
+  userId,
+  name,
+  deactivatedAt,
+}: Props) {
  const { t } = useTranslation();
  const deleteWorkspaceMemberMutation = useDeleteWorkspaceMemberMutation();
  const deactivateMutation = useDeactivateWorkspaceMemberMutation();
@@ -86,7 +91,7 @@ export default function MemberActionMenu({ userId, deactivatedAt }: Props) {
          <ActionIcon
            variant="subtle"
            c="gray"
-            aria-label={t("Member actions")}
+            aria-label={t("Member actions for {{name}}", { name })}
          >
            <IconDots size={20} stroke={2} />
          </ActionIcon>
@@ -80,7 +80,7 @@ export function WorkspaceInviteForm({ onClose }: Props) {
          defaultValue={UserRole.MEMBER}
          allowDeselect={false}
          checkIconPosition="right"
-          onChange={setRole}
+          onChange={(value) => setRole(value)}
        />

        <MultiGroupSelect
@@ -111,6 +111,7 @@ export default function WorkspaceMembersTable() {
                    {isAdmin && (
                      <MemberActionMenu
                        userId={user.id}
+                        name={user.name}
                        deactivatedAt={user.deactivatedAt}
                      />
                    )}
@@ -28,6 +28,7 @@ export interface IWorkspace {
  trashRetentionDays?: number;
  restrictApiToAdmins?: boolean;
  allowMemberTemplates?: boolean;
+  allowPersonalSpaces?: boolean;
  isScimEnabled?: boolean;
 }

@@ -36,6 +37,7 @@ export interface IWorkspaceSettings {
  sharing?: IWorkspaceSharingSettings;
  api?: IWorkspaceApiSettings;
  templates?: IWorkspaceTemplateSettings;
+  spaces?: IWorkspaceSpaceSettings;
 }

 export interface IWorkspaceApiSettings {
@@ -57,6 +59,10 @@ export interface IWorkspaceTemplateSettings {
  allowMemberTemplates?: boolean;
 }

+export interface IWorkspaceSpaceSettings {
+  allowPersonal?: boolean;
+}
+
 export interface ICreateInvite {
  role: string;
  emails: string[];
@@ -10,7 +10,11 @@ const api: AxiosInstance = axios.create({
 api.interceptors.response.use(
  (response) => {
    // we need the response headers for these endpoints
-    const exemptEndpoints = ["/api/pages/export", "/api/spaces/export"];
+    const exemptEndpoints = [
+      "/api/pages/export",
+      "/api/spaces/export",
+      "/api/docx-export",
+    ];
    if (response.request.responseURL) {
      const path = new URL(response.request.responseURL)?.pathname;
      if (path && exemptEndpoints.includes(path)) {
@@ -0,0 +1,62 @@
+import { format as dateFnsFormat, type Locale } from "date-fns";
+import {
+  de,
+  enUS,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  ptBR,
+  ru,
+  uk,
+  zhCN,
+} from "date-fns/locale";
+import { useTranslation } from "react-i18next";
+import i18n from "@/i18n.ts";
+
+const LOCALE_MAP: Record<string, Locale> = {
+  "de-DE": de,
+  "en-US": enUS,
+  "es-ES": es,
+  "fr-FR": fr,
+  "it-IT": it,
+  "ja-JP": ja,
+  "ko-KR": ko,
+  "nl-NL": nl,
+  "pt-BR": ptBR,
+  "ru-RU": ru,
+  "uk-UA": uk,
+  "zh-CN": zhCN,
+};
+
+export function getDateFnsLocale(language?: string): Locale {
+  const lang = language ?? i18n.language ?? "en-US";
+  return LOCALE_MAP[lang] ?? LOCALE_MAP[lang.split("-")[0]] ?? enUS;
+}
+
+export function useDateFnsLocale(): Locale {
+  const { i18n: instance } = useTranslation();
+  return getDateFnsLocale(instance.language);
+}
+
+function isEnglishLocale(locale: Locale): boolean {
+  return locale.code === "en-US" || locale.code?.startsWith("en") === true;
+}
+
+/**
+ * Picks `enUSPattern` for the English locale and `localizedPattern` for every
+ * other locale. Keeps existing en-US output byte-identical while letting other
+ * languages use date-fns localized format tokens (P, PP, p, PPp, …).
+ */
+export function formatLocalized(
+  date: Date | number | string,
+  enUSPattern: string,
+  localizedPattern: string,
+  locale?: Locale,
+): string {
+  const effective = locale ?? getDateFnsLocale();
+  const pattern = isEnglishLocale(effective) ? enUSPattern : localizedPattern;
+  return dateFnsFormat(new Date(date), pattern, { locale: effective });
+}
@@ -1,17 +1,25 @@
-import { formatDistanceStrict } from "date-fns";
-import { format, isToday, isYesterday } from "date-fns";
+import { formatDistanceStrict, isToday, isYesterday } from "date-fns";
 import i18n from "@/i18n.ts";
+import { formatLocalized, getDateFnsLocale } from "@/lib/date-locale.ts";

 export function timeAgo(date: Date) {
-  return formatDistanceStrict(new Date(date), new Date(), { addSuffix: true });
+  return formatDistanceStrict(new Date(date), new Date(), {
+    addSuffix: true,
+    locale: getDateFnsLocale(),
+  });
 }

 export function formattedDate(date: Date) {
+  const locale = getDateFnsLocale();
  if (isToday(date)) {
-    return i18n.t("Today, {{time}}", { time: format(date, "h:mma") });
+    return i18n.t("Today, {{time}}", {
+      time: formatLocalized(date, "h:mma", "p", locale),
+    });
  } else if (isYesterday(date)) {
-    return i18n.t("Yesterday, {{time}}", { time: format(date, "h:mma") });
+    return i18n.t("Yesterday, {{time}}", {
+      time: formatLocalized(date, "h:mma", "p", locale),
+    });
  } else {
-    return format(date, "MMM dd, yyyy, h:mma");
+    return formatLocalized(date, "MMM dd, yyyy, h:mma", "PPp", locale);
  }
 }
@@ -7,6 +7,7 @@ import { Helmet } from "react-helmet-async";
 import ManageHostname from "@/ee/components/manage-hostname.tsx";
 import { Divider } from "@mantine/core";
 import AllowMemberTemplates from "@/ee/security/components/allow-member-templates.tsx";
+import PersonalSpacesSetting from "@/ee/personal-space/components/personal-spaces-setting.tsx";

 export default function WorkspaceSettings() {
  const { t } = useTranslation();
@@ -22,6 +23,9 @@ export default function WorkspaceSettings() {
      <Divider my="md" />
      <AllowMemberTemplates />

+      <Divider my="md" />
+      <PersonalSpacesSetting />
+
      {isCloud() && (
        <>
          <Divider my="md" />
@@ -25,3 +25,11 @@
 .mantine-Input-input[data-variant="default"] {
  border-color: var(--mantine-color-gray-6);
 }
+
+/* better contrast for disabled inputs */
+.mantine-Input-input:disabled,
+.mantine-Input-input[data-disabled] {
+  opacity: 0.7;
+  color: var(--mantine-color-dimmed);
+  -webkit-text-fill-color: var(--mantine-color-dimmed);
+}
@@ -1,8 +1,10 @@
 import {
+  Badge,
  createTheme,
  CSSVariablesResolver,
  MantineColorsTuple,
  Tabs,
+  v8CssVariablesResolver,
 } from "@mantine/core";

 const blue: MantineColorsTuple = [
@@ -37,6 +39,15 @@ export const theme = createTheme({
    red,
  },
  components: {
+    // Size badges to their content; fit-content collapses inside table cells.
+    Badge: Badge.extend({
+      styles: (_theme, props) => ({
+        root:
+          props.fullWidth || props.circle
+            ? {}
+            : { width: "max-content", maxWidth: "100%" },
+      }),
+    }),
    Tabs: Tabs.extend({
      vars: (theme, props) => ({
        root: {
@@ -68,9 +79,11 @@ export const theme = createTheme({

 export const mantineCssResolver: CSSVariablesResolver = (theme) => ({
  variables: {
+    ...v8CssVariablesResolver(theme).variables,
    "--input-error-size": theme.fontSizes.sm,
  },
  light: {
+    ...v8CssVariablesResolver(theme).light,
    "--mantine-color-dimmed": "#4b5563",
    "--mantine-color-dark-light-color": "#4e5359",
    "--mantine-color-dark-light-hover": "var(--mantine-color-gray-light-hover)",
@@ -105,6 +118,7 @@ export const mantineCssResolver: CSSVariablesResolver = (theme) => ({
    "--mantine-color-green-light-color": "#1B5E20",
  },
  dark: {
+    ...v8CssVariablesResolver(theme).dark,
    "--mantine-color-dark-light-color": "var(--mantine-color-gray-4)",
    "--mantine-color-dark-light-hover": "var(--mantine-color-default-hover)",
  },
@@ -1,8 +1,8 @@
 {
  "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2021",
    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

@@ -1,6 +1,6 @@
 {
  "name": "server",
-  "version": "0.90.0",
+  "version": "0.90.1",
  "description": "",
  "author": "",
  "private": true,
@@ -30,14 +30,14 @@
    "test:e2e": "jest --config test/jest-e2e.json"
  },
  "dependencies": {
-    "@ai-sdk/google": "^3.0.52",
-    "@ai-sdk/openai": "^3.0.47",
-    "@ai-sdk/openai-compatible": "^2.0.37",
+    "@ai-sdk/google": "3.0.52",
+    "@ai-sdk/openai": "3.0.47",
+    "@ai-sdk/openai-compatible": "2.0.37",
    "@aws-sdk/client-s3": "3.1050.0",
    "@aws-sdk/lib-storage": "3.1050.0",
    "@aws-sdk/s3-request-presigner": "3.1050.0",
    "@azure/storage-blob": "12.31.0",
-    "@clickhouse/client": "^1.18.2",
+    "@clickhouse/client": "1.18.2",
    "@docmost/pdf-inspector": "1.9.6",
    "@fastify/cookie": "^11.0.2",
    "@fastify/multipart": "^10.0.0",
@@ -47,81 +47,81 @@
    "@langchain/textsplitters": "1.0.1",
    "@modelcontextprotocol/sdk": "1.29.0",
    "@nest-lab/throttler-storage-redis": "^1.2.0",
-    "@nestjs-labs/nestjs-ioredis": "^11.0.4",
-    "@nestjs/bullmq": "^11.0.4",
-    "@nestjs/cache-manager": "^3.1.0",
-    "@nestjs/common": "^11.1.19",
-    "@nestjs/config": "^4.0.4",
-    "@nestjs/core": "^11.1.19",
-    "@nestjs/event-emitter": "^3.0.1",
+    "@nestjs-labs/nestjs-ioredis": "11.0.4",
+    "@nestjs/bullmq": "11.0.4",
+    "@nestjs/cache-manager": "3.1.3",
+    "@nestjs/common": "11.1.27",
+    "@nestjs/config": "4.0.4",
+    "@nestjs/core": "11.1.27",
+    "@nestjs/event-emitter": "3.1.0",
    "@nestjs/jwt": "11.0.2",
-    "@nestjs/mapped-types": "^2.1.1",
-    "@nestjs/passport": "^11.0.5",
-    "@nestjs/platform-fastify": "^11.1.19",
-    "@nestjs/platform-socket.io": "^11.1.19",
-    "@nestjs/schedule": "^6.1.3",
-    "@nestjs/terminus": "^11.1.1",
-    "@nestjs/throttler": "^6.5.0",
-    "@nestjs/websockets": "^11.1.19",
-    "@node-saml/passport-saml": "^5.1.0",
-    "@socket.io/redis-adapter": "^8.3.0",
-    "ai": "^6.0.134",
-    "ai-sdk-ollama": "^3.8.1",
-    "bcrypt": "^6.0.0",
-    "bowser": "^2.14.1",
-    "bullmq": "^5.76.10",
-    "cache-manager": "^7.2.8",
-    "cheerio": "^1.2.0",
-    "class-transformer": "^0.5.1",
-    "class-validator": "^0.15.1",
-    "cookie": "^1.1.1",
+    "@nestjs/mapped-types": "2.1.1",
+    "@nestjs/passport": "11.0.5",
+    "@nestjs/platform-fastify": "11.1.27",
+    "@nestjs/platform-socket.io": "11.1.27",
+    "@nestjs/schedule": "6.1.3",
+    "@nestjs/terminus": "11.1.1",
+    "@nestjs/throttler": "6.5.0",
+    "@nestjs/websockets": "11.1.27",
+    "@node-saml/passport-saml": "5.1.0",
+    "@socket.io/redis-adapter": "8.3.0",
+    "ai": "6.0.134",
+    "ai-sdk-ollama": "3.8.1",
+    "bcrypt": "6.0.0",
+    "bowser": "2.14.1",
+    "bullmq": "5.79.0",
+    "cache-manager": "7.2.8",
+    "cheerio": "1.2.0",
+    "class-transformer": "0.5.1",
+    "class-validator": "0.15.1",
+    "cookie": "1.1.1",
    "fast-bm25": "0.0.5",
-    "fastify-ip": "^2.0.0",
-    "fs-extra": "^11.3.4",
+    "fastify-ip": "2.0.0",
+    "fs-extra": "11.3.4",
    "happy-dom": "20.8.9",
-    "ioredis": "^5.10.1",
-    "js-tiktoken": "^1.0.21",
-    "jsonwebtoken": "^9.0.3",
-    "kysely": "^0.28.17",
-    "kysely-migration-cli": "^0.4.2",
-    "kysely-postgres-js": "^3.0.0",
-    "ldapts": "^8.1.7",
-    "lib0": "^0.2.117",
-    "mammoth": "^1.12.0",
-    "mime-types": "^3.0.2",
+    "ioredis": "5.10.1",
+    "js-tiktoken": "1.0.21",
+    "jsonwebtoken": "9.0.3",
+    "kysely": "0.28.17",
+    "kysely-migration-cli": "0.4.2",
+    "kysely-postgres-js": "3.0.0",
+    "ldapts": "8.1.7",
+    "lib0": "0.2.117",
+    "mammoth": "1.12.0",
+    "mime-types": "3.0.2",
    "msgpackr": "^1.11.9",
    "nanoid": "5.1.7",
-    "nestjs-cls": "^6.2.0",
-    "nestjs-kysely": "^3.1.2",
-    "nestjs-pino": "^4.6.1",
-    "nodemailer": "^8.0.5",
-    "openid-client": "^6.8.2",
-    "otpauth": "^9.5.0",
-    "p-limit": "^7.3.0",
-    "passport-google-oauth20": "^2.0.0",
-    "passport-jwt": "^4.0.1",
-    "pg-tsquery": "^8.4.2",
+    "nestjs-cls": "6.2.0",
+    "nestjs-kysely": "3.1.2",
+    "nestjs-pino": "4.6.1",
+    "nodemailer": "9.0.1",
+    "openid-client": "6.8.2",
+    "otpauth": "9.5.0",
+    "p-limit": "7.3.0",
+    "passport-google-oauth20": "2.0.0",
+    "passport-jwt": "4.0.1",
+    "pg-tsquery": "8.4.2",
    "pgvector": "^0.2.1",
-    "pino-http": "^11.0.0",
-    "pino-pretty": "^13.1.3",
-    "postgres": "^3.4.8",
-    "postmark": "^4.0.7",
-    "react": "^18.3.1",
-    "react-email": "6.0.8",
-    "reflect-metadata": "^0.2.2",
+    "pino-http": "11.0.0",
+    "pino-pretty": "13.1.3",
+    "postgres": "3.4.8",
+    "postmark": "4.0.7",
+    "react": "19.2.7",
+    "react-email": "6.6.3",
+    "reflect-metadata": "0.2.2",
    "rxjs": "^7.8.2",
    "sanitize-filename": "1.6.3",
    "scimmy": "1.3.5",
-    "socket.io": "^4.8.3",
+    "socket.io": "4.8.3",
    "stripe": "^17.7.0",
-    "tlds": "^1.261.0",
-    "tmp-promise": "^3.0.3",
-    "tseep": "^1.3.1",
-    "typesense": "^3.0.5",
-    "undici": "7.24.0",
-    "ws": "^8.20.1",
-    "yauzl": "^3.2.1",
-    "zod": "^4.3.6"
+    "tlds": "1.261.0",
+    "tmp-promise": "3.0.3",
+    "tseep": "1.3.1",
+    "typesense": "3.0.5",
+    "undici": "7.28.0",
+    "ws": "8.21.0",
+    "yauzl": "3.2.1",
+    "zod": "4.3.6"
  },
  "devDependencies": {
    "@eslint/js": "^9.28.0",
@@ -192,7 +192,8 @@
    "moduleNameMapper": {
      "^@docmost/db/(.*)$": "<rootDir>/database/$1",
      "^@docmost/transactional/(.*)$": "<rootDir>/integrations/transactional/$1",
-      "^@docmost/ee/(.*)$": "<rootDir>/ee/$1"
+      "^@docmost/ee/(.*)$": "<rootDir>/ee/$1",
+      "^src/(.*)$": "<rootDir>/$1"
    }
  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Philipinho	e62d97a455	fix mantine avatar color regression	2026-06-20 17:56:01 +01:00
Philipinho	02901ef2be	fix(theme): size badges to their content	2026-06-20 17:28:11 +01:00
Philipinho	e848c2a5b8	update list	2026-06-20 17:23:27 +01:00
Philipinho	9044e464b0	fix	2026-06-20 17:22:35 +01:00
Philipinho	dd1aaa082f	fix editor crash	2026-06-20 17:21:35 +01:00
Philipinho	e55a42fa90	update tiptap	2026-06-20 14:55:25 +01:00
Philipinho	51f4931dd5	package updates	2026-06-20 14:52:51 +01:00
Philipinho	d7fdcdec80	sync	2026-06-20 14:34:12 +01:00
Abhigyan Sinha	2dc35fa100	fix: resolve draw.io save failure on copied blocks (#2288 ) (#2297 )	2026-06-20 14:31:16 +01:00
Philip Okugbe	4f2fbf22d4	chore: migrate to Mantine 9 and React 19 (#2293 )	2026-06-20 14:28:31 +01:00
Philip Okugbe	d68e241f45	feat(ee): personal spaces (#2298 ) * feat(ee): personal spaces * pref * feat: on-demand only * error notification	2026-06-20 14:27:41 +01:00
Philip Okugbe	510199cf04	feat(ee): docx word export (#2294 ) * vendorize prosemirror-docx - wip * feat(ee): docx word export * sync	2026-06-20 14:23:56 +01:00
Philip Okugbe	aa5d52ad3e	feat(editor): add /time slash command to insert current time (#2290 )	2026-06-20 14:22:54 +01:00
Mayank-2-16	1867aa8bf6	fix: pdf table header alignment issue (#2259 ) * fix: pdf table header alignment issue * cleanup --------- Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>	2026-06-17 14:32:48 +01:00
Felix	2ff8720832	fix: slash-menu suggestion search localization (#2280 )	2026-06-17 14:17:13 +01:00
Philip Okugbe	6191acfa14	fix: a11y (#2275 )	2026-06-09 22:51:55 +01:00
Peter Tripp	d86d51c27e	fix: Table jitter on edit/read toggle (#2252 )	2026-06-03 11:31:45 +01:00
Philipinho	ef04c22aea	sync	2026-05-28 16:57:59 +01:00
Philipinho	b6760c63c4	fix: package updates	2026-05-28 16:39:47 +01:00
Philipinho	2b68879e72	0.90.1	2026-05-28 16:36:18 +01:00
Philipinho	db32910634	fix; change inline code text color	2026-05-28 16:35:37 +01:00
Philip Okugbe	33895b0607	bug fixes (#2250 ) * util * fix page position collation * support fixed toolbar in templates editor * date localization * fix clipped emoji in templates editor * fix page updated time object * fix flickers * fix: remove redundant breadcrumb from destination modal	2026-05-28 16:20:37 +01:00
Philipinho	830b5b4d45	fix synced block	2026-05-25 19:17:14 +01:00
Philipinho	d7c4f0551e	fix: strip html styles on paste	2026-05-22 19:00:30 +01:00
Philipinho	61a91cd086	fix: remove duplicate storage key	2026-05-22 14:54:52 +01:00
Philipinho	f010f6a83a	fix: internal links	2026-05-21 17:01:20 +01:00