increase minimum table width

- Added email field to user items mapping
- Updated renderMultiSelectOption to show email in smaller, dimmed text
- Email only displays for user type options, not groups

apps/client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "client",
   "private": true,
-  "version": "0.20.4",
+  "version": "0.21.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -25,6 +25,7 @@
     "@tabler/icons-react": "^3.34.0",
     "@tanstack/react-query": "^5.80.6",
     "@tiptap/extension-character-count": "^2.10.3",
+    "alfaaz": "^1.1.0",
     "axios": "^1.9.0",
     "clsx": "^2.1.1",
     "emoji-mart": "^5.6.0",
@@ -40,6 +41,7 @@
     "lowlight": "^3.3.0",
     "mermaid": "^11.6.0",
     "mitt": "^3.0.1",
+    "posthog-js": "^1.255.1",
     "react": "^18.3.1",
     "react-arborist": "3.4.0",
     "react-clear-modal": "^2.0.15",

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

@@ -354,6 +354,9 @@
   "Character count: {{characterCount}}": "Character count: {{characterCount}}",
   "New update": "New update",
   "{{latestVersion}} is available": "{{latestVersion}} is available",
+  "Default page edit mode": "Default page edit mode",
+  "Choose your preferred page edit mode. Avoid accidental edits.": "Choose your preferred page edit mode. Avoid accidental edits.",
+  "Reading": "Reading"
   "Delete member": "Delete member",
   "Member deleted successfully": "Member deleted successfully",
   "Are you sure you want to delete this workspace member? This action is irreversible.": "Are you sure you want to delete this workspace member? This action is irreversible.",
@@ -386,5 +389,15 @@
   "Failed to share page": "Failed to share page",
   "Copy page": "Copy page",
   "Copy page to a different space.": "Copy page to a different space.",
-  "Page copied successfully": "Page copied successfully"
+  "Page copied successfully": "Page copied successfully",
+  "Find": "Find",
+  "Not found": "Not found",
+  "Previous Match (Shift+Enter)": "Previous Match (Shift+Enter)",
+  "Next match (Enter)": "Next match (Enter)",
+  "Match case (Alt+C)": "Match case (Alt+C)",
+  "Replace": "Replace",
+  "Close (Escape)": "Close (Escape)",
+  "Replace (Enter)": "Replace (Enter)",
+  "Replace all (Ctrl+Alt+Enter)": "Replace all (Ctrl+Alt+Enter)",
+  "Replace all": "Replace all"
 }

apps/client/src/components/layouts/global/layout.tsx

@@ -1,6 +1,8 @@
 import { UserProvider } from "@/features/user/user-provider.tsx";
 import { Outlet } from "react-router-dom";
 import GlobalAppShell from "@/components/layouts/global/global-app-shell.tsx";
+import { PosthogUser } from "@/ee/components/posthog-user.tsx";
+import { isCloud } from "@/lib/config.ts";
 
 export default function Layout() {
   return (
@@ -8,6 +10,7 @@ export default function Layout() {
       <GlobalAppShell>
         <Outlet />
       </GlobalAppShell>
+      {isCloud() && <PosthogUser />}
     </UserProvider>
   );
 }

apps/client/src/ee/billing/components/billing-details.tsx

@@ -30,12 +30,12 @@ export default function BillingDetails() {
               >
                 Plan
               </Text>
-              <Text fw={700} fz="lg">
-                {
-                  plans.find(
-                    (plan) => plan.productId === billing.stripeProductId,
-                  )?.name
-                }
+              <Text fw={700} fz="lg" tt="capitalize">
+                {plans.find(
+                  (plan) => plan.productId === billing.stripeProductId,
+                )?.name ||
+                  billing.planName ||
+                  "Standard"}
               </Text>
             </div>
           </Group>
@@ -112,18 +112,59 @@ export default function BillingDetails() {
                 fz="xs"
                 className={classes.label}
               >
-                Total
-              </Text>
-              <Text fw={700} fz="lg">
-                {(billing.amount / 100) * billing.quantity}{" "}
-                {billing.currency.toUpperCase()}
-              </Text>
-              <Text c="dimmed" fz="sm">
-                ${billing.amount / 100} /user/{billing.interval}
+                Cost
               </Text>
+              {billing.billingScheme === "tiered" && (
+                <>
+                  <Text fw={700} fz="lg">
+                    ${billing.amount / 100} {billing.currency.toUpperCase()} /{" "}
+                    {billing.interval}
+                  </Text>
+                  <Text c="dimmed" fz="sm">
+                    per {billing.interval}
+                  </Text>
+                </>
+              )}
+
+              {billing.billingScheme !== "tiered" && (
+                <>
+                  <Text fw={700} fz="lg">
+                    {(billing.amount / 100) * billing.quantity}{" "}
+                    {billing.currency.toUpperCase()} / {billing.interval}
+                  </Text>
+                  <Text c="dimmed" fz="sm">
+                    ${billing.amount / 100} /user/{billing.interval}
+                  </Text>
+                </>
+              )}
             </div>
           </Group>
         </Paper>
+
+        {billing.billingScheme === "tiered" && billing.tieredUpTo && (
+          <Paper p="md" radius="md">
+            <Group justify="apart">
+              <div>
+                <Text
+                  c="dimmed"
+                  tt="uppercase"
+                  fw={700}
+                  fz="xs"
+                  className={classes.label}
+                >
+                  Current Tier
+                </Text>
+                <Text fw={700} fz="lg">
+                  For {billing.tieredUpTo} users
+                </Text>
+                {/*billing.tieredFlatAmount && (
+                  <Text c="dimmed" fz="sm">
+                  </Text>
+                )*/}
+              </div>
+            </Group>
+          </Paper>
+        )}
       </SimpleGrid>
     </div>
   );

apps/client/src/ee/billing/components/billing-plans.tsx

@@ -2,24 +2,32 @@ import {
   Button,
   Card,
   List,
-  SegmentedControl,
   ThemeIcon,
   Title,
   Text,
   Group,
+  Select,
+  Container,
+  Stack,
+  Badge,
+  Flex,
+  Switch,
+  Alert,
 } from "@mantine/core";
 import { useState } from "react";
-import { IconCheck } from "@tabler/icons-react";
-import { useBillingPlans } from "@/ee/billing/queries/billing-query.ts";
+import { IconCheck, IconInfoCircle } from "@tabler/icons-react";
 import { getCheckoutLink } from "@/ee/billing/services/billing-service.ts";
+import { useBillingPlans } from "@/ee/billing/queries/billing-query.ts";
+import { useAtomValue } from "jotai";
+import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
 
 export default function BillingPlans() {
   const { data: plans } = useBillingPlans();
-  const [interval, setInterval] = useState("yearly");
-
-  if (!plans) {
-    return null;
-  }
+  const workspace = useAtomValue(workspaceAtom);
+  const [isAnnual, setIsAnnual] = useState(true);
+  const [selectedTierValue, setSelectedTierValue] = useState<string | null>(
+    null,
+  );
 
   const handleCheckout = async (priceId: string) => {
     try {
@@ -32,84 +40,194 @@ export default function BillingPlans() {
     }
   };
 
+  // TODO: remove by July 30.
+  // Check if workspace was created between June 28 and July 14, 2025
+  const showTieredPricingNotice = (() => {
+    if (!workspace?.createdAt) return false;
+    const createdDate = new Date(workspace.createdAt);
+    const startDate = new Date('2025-06-20');
+    const endDate = new Date('2025-07-14');
+    return createdDate >= startDate && createdDate <= endDate;
+  })();
+
+  if (!plans || plans.length === 0) {
+    return null;
+  }
+
+  // Check if any plan is tiered
+  const hasTieredPlans = plans.some(plan => plan.billingScheme === 'tiered' && plan.pricingTiers?.length > 0);
+  const firstTieredPlan = plans.find(plan => plan.billingScheme === 'tiered' && plan.pricingTiers?.length > 0);
+
+  // Set initial tier value if not set and we have tiered plans
+  if (hasTieredPlans && !selectedTierValue && firstTieredPlan) {
+    setSelectedTierValue(firstTieredPlan.pricingTiers[0].upTo.toString());
+    return null;
+  }
+
+  // For tiered plans, ensure we have a selected tier
+  if (hasTieredPlans && !selectedTierValue) {
+    return null;
+  }
+
+  const selectData = firstTieredPlan?.pricingTiers
+    ?.filter((tier) => !tier.custom)
+    .map((tier, index) => {
+      const prevMaxUsers =
+        index > 0 ? firstTieredPlan.pricingTiers[index - 1].upTo : 0;
+      return {
+        value: tier.upTo.toString(),
+        label: `${prevMaxUsers + 1}-${tier.upTo} users`,
+      };
+    }) || [];
+
   return (
-    <Group justify="center" p="xl">
-      {plans.map((plan) => {
-        const price =
-          interval === "monthly" ? plan.price.monthly : plan.price.yearly;
-        const priceId = interval === "monthly" ? plan.monthlyId : plan.yearlyId;
-        const yearlyMonthPrice = parseInt(plan.price.yearly) / 12;
+    <Container size="xl" py="xl">
+      {/* Tiered pricing notice for eligible workspaces */}
+      {showTieredPricingNotice && !hasTieredPlans && (
+        <Alert
+          icon={<IconInfoCircle size={16} />} 
+          title="Want the old tiered pricing?" 
+          color="blue"
+          mb="lg"
+        >
+          Contact support to switch back to our tiered pricing model.
+        </Alert>
+      )}
 
-        return (
-          <Card
-            key={plan.name}
-            withBorder
-            radius="md"
-            shadow="sm"
-            p="xl"
-            w={300}
-          >
-            <SegmentedControl
-              value={interval}
-              onChange={setInterval}
-              fullWidth
-              data={[
-                { label: "Monthly", value: "monthly" },
-                { label: "Yearly (25% OFF)", value: "yearly" },
-              ]}
+      {/* Controls Section */}
+      <Stack gap="xl" mb="md">
+        {/* Team Size and Billing Controls */}
+        <Group justify="center" align="center" gap="sm">
+          {hasTieredPlans && (
+            <Select
+              label="Team size"
+              description="Select the number of users"
+              value={selectedTierValue}
+              onChange={setSelectedTierValue}
+              data={selectData}
+              w={250}
+              size="md"
+              allowDeselect={false}
             />
+          )}
 
-            <Title order={3} ta="center" mt="sm" mb="xs">
-              {plan.name}
-            </Title>
-            <Text ta="center" size="lg" fw={700}>
-              {interval === "monthly" && (
-                <>
-                  ${price}{" "}
-                  <Text span size="sm" fw={500} c="dimmed">
-                    /user/month
-                  </Text>
-                </>
-              )}
-              {interval === "yearly" && (
-                <>
-                  ${yearlyMonthPrice}{" "}
-                  <Text span size="sm" fw={500} c="dimmed">
-                    /user/month
-                  </Text>
-                </>
-              )}
-              <br/>
-              <Text span ta="center" size="md" fw={500} c="dimmed">
-                billed {interval}
-              </Text>
-            </Text>
-
-            <Card.Section mt="lg">
-              <Button onClick={() => handleCheckout(priceId)} fullWidth>
-                Subscribe
-              </Button>
-            </Card.Section>
-
-            <Card.Section mt="md">
-              <List
-                spacing="xs"
+          <Group justify="center" align="start">
+            <Flex justify="center" gap="md" align="center">
+              <Text size="md">Monthly</Text>
+              <Switch
+                defaultChecked={isAnnual}
+                onChange={(event) => setIsAnnual(event.target.checked)}
                 size="sm"
-                center
-                icon={
-                  <ThemeIcon variant="light" size={24} radius="xl">
-                    <IconCheck size={16} />
-                  </ThemeIcon>
-                }
-              >
-                {plan.features.map((feature, index) => (
-                  <List.Item key={index}>{feature}</List.Item>
-                ))}
-              </List>
-            </Card.Section>
-          </Card>
-        );
-      })}
-    </Group>
+              />
+              <Text size="md">
+                Annually
+                <Badge component="span" variant="light" color="blue">
+                  15% OFF
+                </Badge>
+              </Text>
+            </Flex>
+          </Group>
+        </Group>
+      </Stack>
+
+      {/* Plans Grid */}
+      <Group justify="center" gap="lg" align="stretch">
+        {plans.map((plan, index) => {
+          let price;
+          let displayPrice;
+          const priceId = isAnnual ? plan.yearlyId : plan.monthlyId;
+
+          if (plan.billingScheme === 'tiered' && plan.pricingTiers?.length > 0) {
+            // Tiered billing logic
+            const planSelectedTier =
+              plan.pricingTiers.find(
+                (tier) => tier.upTo.toString() === selectedTierValue,
+              ) || plan.pricingTiers[0];
+
+            price = isAnnual
+              ? planSelectedTier.yearly
+              : planSelectedTier.monthly;
+            displayPrice = isAnnual ? (price / 12).toFixed(0) : price;
+          } else {
+            // Per-unit billing logic
+            const monthlyPrice = parseFloat(plan.price?.monthly || '0');
+            const yearlyPrice = parseFloat(plan.price?.yearly || '0');
+            price = isAnnual ? yearlyPrice : monthlyPrice;
+            displayPrice = isAnnual ? (yearlyPrice / 12).toFixed(0) : monthlyPrice;
+          }
+
+          return (
+            <Card
+              key={plan.name}
+              withBorder
+              radius="lg"
+              shadow="sm"
+              p="xl"
+              w={350}
+              miw={300}
+              style={{
+                position: "relative",
+              }}
+            >
+              <Stack gap="lg">
+                {/* Plan Header */}
+                <Stack gap="xs">
+                  <Title order={3} size="h4">
+                    {plan.name}
+                  </Title>
+                  {plan.description && (
+                    <Text size="sm" c="dimmed">
+                      {plan.description}
+                    </Text>
+                  )}
+                </Stack>
+
+                {/* Pricing */}
+                <Stack gap="xs">
+                  <Group align="baseline" gap="xs">
+                    <Title order={1} size="h1">
+                      ${displayPrice}
+                    </Title>
+                    <Text size="lg" c="dimmed">
+                      {plan.billingScheme === 'per_unit' 
+                        ? `per user/month`
+                        : `per month`}
+                    </Text>
+                  </Group>
+                  <Text size="sm" c="dimmed">
+                    {isAnnual ? "Billed annually" : "Billed monthly"}
+                  </Text>
+                  {plan.billingScheme === 'tiered' && plan.pricingTiers && (
+                    <Text size="md" fw={500}>
+                      For {plan.pricingTiers.find(tier => tier.upTo.toString() === selectedTierValue)?.upTo || plan.pricingTiers[0].upTo} users
+                    </Text>
+                  )}
+                </Stack>
+
+                {/* CTA Button */}
+                <Button onClick={() => handleCheckout(priceId)} fullWidth>
+                  Subscribe
+                </Button>
+
+                {/* Features */}
+                <List
+                  spacing="xs"
+                  size="sm"
+                  icon={
+                    <ThemeIcon size={20} radius="xl">
+                      <IconCheck size={14} />
+                    </ThemeIcon>
+                  }
+                >
+                  {plan.features.map((feature, featureIndex) => (
+                    <List.Item key={featureIndex}>{feature}</List.Item>
+                  ))}
+                </List>
+              </Stack>
+            </Card>
+          );
+        })}
+      </Group>
+    </Container>
   );
 }

apps/client/src/ee/billing/types/billing.types.ts

@@ -25,6 +25,11 @@ export interface IBilling {
   createdAt: Date;
   updatedAt: Date;
   deletedAt: Date;
+  billingScheme: string | null;
+  tieredUpTo: string | null;
+  tieredFlatAmount: number | null;
+  tieredUnitAmount: number | null;
+  planName: string | null;
 }
 
 export interface ICheckoutLink {
@@ -42,9 +47,18 @@ export interface IBillingPlan {
   monthlyId: string;
   yearlyId: string;
   currency: string;
-  price: {
+  price?: {
     monthly: string;
     yearly: string;
   };
   features: string[];
+  billingScheme: string | null;
+  pricingTiers?: PricingTier[];
 }
+
+interface PricingTier {
+  upTo: number;
+  monthly?: number;
+  yearly?: number;
+  custom?: boolean;
+}

apps/client/src/ee/components/posthog-user.tsx

@@ -0,0 +1,41 @@
+import { usePostHog } from "posthog-js/react";
+import { useEffect } from "react";
+import { useAtom } from "jotai";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
+
+export function PosthogUser() {
+  const posthog = usePostHog();
+  const [currentUser] = useAtom(currentUserAtom);
+
+  useEffect(() => {
+    if (currentUser) {
+      const user = currentUser?.user;
+      const workspace = currentUser?.workspace;
+      if (!user || !workspace) return;
+
+      posthog?.identify(user.id, {
+        name: user.name,
+        email: user.email,
+        workspaceId: user.workspaceId,
+        workspaceHostname: workspace.hostname,
+        lastActiveAt: new Date().toISOString(),
+        createdAt: user.createdAt,
+        source: "docmost-app",
+      });
+      posthog?.group("workspace", workspace.id, {
+        name: workspace.name,
+        hostname: workspace.hostname,
+        plan: workspace?.plan,
+        status: workspace.status,
+        isOnTrial: !!workspace.trialEndAt,
+        hasStripeCustomerId: !!workspace.stripeCustomerId,
+        memberCount: workspace.memberCount,
+        lastActiveAt: new Date().toISOString(),
+        createdAt: workspace.createdAt,
+        source: "docmost-app",
+      });
+    }
+  }, [posthog, currentUser]);
+
+  return null;
+}

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

@@ -18,6 +18,7 @@ import classes from "@/features/auth/components/auth.module.css";
 import { useGetInvitationQuery } from "@/features/workspace/queries/workspace-query.ts";
 import { useRedirectIfAuthenticated } from "@/features/auth/hooks/use-redirect-if-authenticated.ts";
 import { useTranslation } from "react-i18next";
+import SsoLogin from "@/ee/components/sso-login.tsx";
 
 const formSchema = z.object({
   name: z.string().trim().min(1),
@@ -71,39 +72,43 @@ export function InviteSignUpForm() {
           {t("Join the workspace")}
         </Title>
 
-        <Stack align="stretch" justify="center" gap="xl">
-          <form onSubmit={form.onSubmit(onSubmit)}>
-            <TextInput
-              id="name"
-              type="text"
-              label={t("Name")}
-              placeholder={t("enter your full name")}
-              variant="filled"
-              {...form.getInputProps("name")}
-            />
+        <SsoLogin />
 
-            <TextInput
-              id="email"
-              type="email"
-              label={t("Email")}
-              value={invitation.email}
-              disabled
-              variant="filled"
-              mt="md"
-            />
+        {!invitation.enforceSso && (
+          <Stack align="stretch" justify="center" gap="xl">
+            <form onSubmit={form.onSubmit(onSubmit)}>
+              <TextInput
+                id="name"
+                type="text"
+                label={t("Name")}
+                placeholder={t("enter your full name")}
+                variant="filled"
+                {...form.getInputProps("name")}
+              />
 
-            <PasswordInput
-              label={t("Password")}
-              placeholder={t("Your password")}
-              variant="filled"
-              mt="md"
-              {...form.getInputProps("password")}
-            />
-            <Button type="submit" fullWidth mt="xl" loading={isLoading}>
-              {t("Sign Up")}
-            </Button>
-          </form>
-        </Stack>
+              <TextInput
+                id="email"
+                type="email"
+                label={t("Email")}
+                value={invitation.email}
+                disabled
+                variant="filled"
+                mt="md"
+              />
+
+              <PasswordInput
+                label={t("Password")}
+                placeholder={t("Your password")}
+                variant="filled"
+                mt="md"
+                {...form.getInputProps("password")}
+              />
+              <Button type="submit" fullWidth mt="xl" loading={isLoading}>
+                {t("Sign Up")}
+              </Button>
+            </form>
+          </Stack>
+        )}
       </Box>
     </Container>
   );

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

@@ -21,7 +21,7 @@ import { Link } from "react-router-dom";
 import APP_ROUTE from "@/lib/app-route.ts";
 
 const formSchema = z.object({
-  workspaceName: z.string().trim().min(3).max(50),
+  workspaceName: z.string().trim().max(50).optional(),
   name: z.string().min(1).max(50),
   email: z
     .string()
@@ -60,15 +60,17 @@ export function SetupWorkspaceForm() {
           {isCloud() && <SsoCloudSignup />}
 
           <form onSubmit={form.onSubmit(onSubmit)}>
-            <TextInput
-              id="workspaceName"
-              type="text"
-              label={t("Workspace Name")}
-              placeholder={t("e.g ACME Inc")}
-              variant="filled"
-              mt="md"
-              {...form.getInputProps("workspaceName")}
-            />
+            {!isCloud() && (
+              <TextInput
+                id="workspaceName"
+                type="text"
+                label={t("Workspace Name")}
+                placeholder={t("e.g ACME Inc")}
+                variant="filled"
+                mt="md"
+                {...form.getInputProps("workspaceName")}
+              />
+            )}
 
             <TextInput
               id="name"

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

@@ -10,7 +10,7 @@ export interface IRegister {
 }
 
 export interface ISetupWorkspace {
-  workspaceName: string;
+  workspaceName?: string;
   name: string;
   email: string;
   password: string;

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

@@ -12,6 +12,12 @@
     padding: 8px;
     background: var(--mantine-color-gray-light);
     cursor: pointer;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    -ms-word-break: break-word;
+    max-width: 100%;
+    box-sizing: border-box;
 }
 
 .commentEditor {

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

@@ -156,13 +156,11 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                   )
                 }
                 onClick={() => {
-                  editor.commands.unsetColor();
-                  name !== "Default" &&
-                    editor
-                      .chain()
-                      .focus()
-                      .setColor(color || "")
-                      .run();
+                  if (name === "Default") {
+                    editor.commands.unsetColor();
+                  } else {
+                    editor.chain().focus().setColor(color || "").run();
+                  }
                   setIsOpen(false);
                 }}
                 style={{ border: "none" }}

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

@@ -32,7 +32,7 @@ const schema = z.object({
 
 export default function EmbedView(props: NodeViewProps) {
   const { t } = useTranslation();
-  const { node, selected, updateAttributes } = props;
+  const { node, selected, updateAttributes, editor } = props;
   const { src, provider } = node.attrs;
 
   const embedUrl = useMemo(() => {
@@ -50,6 +50,10 @@ export default function EmbedView(props: NodeViewProps) {
   });
 
   async function onSubmit(data: { url: string }) {
+    if (!editor.isEditable) {
+      return;
+    }
+
     if (provider) {
       const embedProvider = getEmbedProviderById(provider);
       if (embedProvider.id === "iframe") {
@@ -85,7 +89,13 @@ export default function EmbedView(props: NodeViewProps) {
           </AspectRatio>
         </>
       ) : (
-        <Popover width={300} position="bottom" withArrow shadow="md">
+        <Popover
+          width={300}
+          position="bottom"
+          withArrow
+          shadow="md"
+          disabled={!editor.isEditable}
+        >
           <Popover.Target>
             <Card
               radius="md"

apps/client/src/features/editor/components/search-and-replace/atoms/search-and-replace-state-atom.ts

@@ -0,0 +1,9 @@
+import { atom } from "jotai";
+
+type SearchAndReplaceAtomType = {
+  isOpen: boolean;
+};
+
+export const searchAndReplaceStateAtom = atom<SearchAndReplaceAtomType>({
+  isOpen: false,
+});

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

@@ -0,0 +1,312 @@
+import {
+  ActionIcon,
+  Button,
+  Dialog,
+  Flex,
+  Input,
+  Stack,
+  Text,
+  Tooltip,
+} from "@mantine/core";
+import {
+  IconArrowNarrowDown,
+  IconArrowNarrowUp,
+  IconLetterCase,
+  IconReplace,
+  IconSearch,
+  IconX,
+} from "@tabler/icons-react";
+import { useEditor } from "@tiptap/react";
+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";
+import { useTranslation } from "react-i18next";
+import { getHotkeyHandler, useToggle } from "@mantine/hooks";
+import { useLocation } from "react-router-dom";
+import classes from "./search-replace.module.css";
+
+interface PageFindDialogDialogProps {
+  editor: ReturnType<typeof useEditor>;
+  editable?: boolean;
+}
+
+function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialogProps) {
+  const { t } = useTranslation();
+  const [searchText, setSearchText] = useState("");
+  const [replaceText, setReplaceText] = useState("");
+  const [pageFindState, setPageFindState] = useAtom(searchAndReplaceStateAtom);
+  const inputRef = useRef(null);
+
+  const [replaceButton, replaceButtonToggle] = useToggle([
+    { isReplaceShow: false, color: "gray" },
+    { isReplaceShow: true, color: "blue" },
+  ]);
+
+  const [caseSensitive, caseSensitiveToggle] = useToggle([
+    { isCaseSensitive: false, color: "gray" },
+    { isCaseSensitive: true, color: "blue" },
+  ]);
+
+  const searchInputEvent = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchText(event.target.value);
+  };
+
+  const replaceInputEvent = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setReplaceText(event.target.value);
+  };
+
+  const closeDialog = () => {
+    setSearchText("");
+    setReplaceText("");
+    setPageFindState({ isOpen: false });
+    // Reset replace button state when closing
+    if (replaceButton.isReplaceShow) {
+      replaceButtonToggle();
+    }
+    // Clear search term in editor
+    if (editor) {
+      editor.commands.setSearchTerm("");
+    }
+  };
+
+  const goToSelection = () => {
+    if (!editor) return;
+
+    const { results, resultIndex } = editor.storage.searchAndReplace;
+    const position: Range = results[resultIndex];
+
+    if (!position) return;
+
+    // @ts-ignore
+    editor.commands.setTextSelection(position);
+
+    const element = document.querySelector(".search-result-current");
+    if (element)
+      element.scrollIntoView({ behavior: "smooth", block: "center" });
+
+    editor.commands.setTextSelection(0);
+  };
+
+  const next = () => {
+    editor.commands.nextSearchResult();
+    goToSelection();
+  };
+
+  const previous = () => {
+    editor.commands.previousSearchResult();
+    goToSelection();
+  };
+
+  const replace = () => {
+    editor.commands.setReplaceTerm(replaceText);
+    editor.commands.replace();
+    goToSelection();
+  };
+
+  const replaceAll = () => {
+    editor.commands.setReplaceTerm(replaceText);
+    editor.commands.replaceAll();
+  };
+
+  useEffect(() => {
+    editor.commands.setSearchTerm(searchText);
+    editor.commands.resetIndex();
+    editor.commands.selectCurrentItem();
+  }, [searchText]);
+
+  const handleOpenEvent = (e) => {
+    setPageFindState({ isOpen: true });
+    const selectedText = editor.state.doc.textBetween(
+      editor.state.selection.from,
+      editor.state.selection.to,
+    );
+    if (selectedText !== "") {
+      setSearchText(selectedText);
+    }
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  };
+
+  const handleCloseEvent = (e) => {
+    closeDialog();
+  };
+
+  useEffect(() => {
+    !pageFindState.isOpen && closeDialog();
+
+    document.addEventListener("openFindDialogFromEditor", handleOpenEvent);
+    document.addEventListener("closeFindDialogFromEditor", handleCloseEvent);
+
+    return () => {
+      document.removeEventListener("openFindDialogFromEditor", handleOpenEvent);
+      document.removeEventListener(
+        "closeFindDialogFromEditor",
+        handleCloseEvent,
+      );
+    };
+  }, [pageFindState.isOpen]);
+
+  useEffect(() => {
+    editor.commands.setCaseSensitive(caseSensitive.isCaseSensitive);
+    editor.commands.resetIndex();
+    goToSelection();
+  }, [caseSensitive]);
+
+  const resultsCount = useMemo(
+    () =>
+      searchText.trim() === ""
+        ? ""
+        : editor?.storage?.searchAndReplace?.results.length > 0
+        ? editor?.storage?.searchAndReplace?.resultIndex +
+          1 +
+          "/" +
+          editor?.storage?.searchAndReplace?.results.length
+        : t("Not found"),
+    [
+      searchText,
+      editor?.storage?.searchAndReplace?.resultIndex,
+      editor?.storage?.searchAndReplace?.results.length,
+    ],
+  );
+
+  const location = useLocation();
+  useEffect(() => {
+    closeDialog();
+  }, [location]);
+
+  return (
+    <Dialog
+      className={classes.findDialog}
+      opened={pageFindState.isOpen}
+
+      size="lg"
+      radius="md"
+      w={"auto"}
+      position={{ top: 90, right: 50 }}
+      withBorder
+      transitionProps={{ transition: "slide-down" }}
+    >
+      <Stack gap="xs">
+        <Flex align="center" gap="xs">
+          <Input
+            ref={inputRef}
+            placeholder={t("Find")}
+            leftSection={<IconSearch size={16} />}
+            rightSection={
+              <Text size="xs" ta="right">
+                {resultsCount}
+              </Text>
+            }
+            rightSectionWidth="70"
+            rightSectionPointerEvents="all"
+            size="xs"
+            w={220}
+            onChange={searchInputEvent}
+            value={searchText}
+            autoFocus
+            onKeyDown={getHotkeyHandler([
+              ["Enter", next],
+              ["shift+Enter", previous],
+              ["alt+C", caseSensitiveToggle],
+              //@ts-ignore
+              ...(editable ? [["alt+R", replaceButtonToggle]] : []),
+            ])}
+          />
+
+          <ActionIcon.Group>
+            <Tooltip label={t("Previous match (Shift+Enter)")}>
+              <ActionIcon variant="subtle" color="gray" onClick={previous}>
+                <IconArrowNarrowUp
+                  style={{ width: "70%", height: "70%" }}
+                  stroke={1.5}
+                />
+              </ActionIcon>
+            </Tooltip>
+            <Tooltip label={t("Next match (Enter)")}>
+              <ActionIcon variant="subtle" color="gray" onClick={next}>
+                <IconArrowNarrowDown
+                  style={{ width: "70%", height: "70%" }}
+                  stroke={1.5}
+                />
+              </ActionIcon>
+            </Tooltip>
+            <Tooltip label={t("Match case (Alt+C)")}>
+              <ActionIcon
+                variant="subtle"
+                color={caseSensitive.color}
+                onClick={() => caseSensitiveToggle()}
+              >
+                <IconLetterCase
+                  style={{ width: "70%", height: "70%" }}
+                  stroke={1.5}
+                />
+              </ActionIcon>
+            </Tooltip>
+            {editable && (
+              <Tooltip label={t("Replace")}>
+                <ActionIcon
+                  variant="subtle"
+                  color={replaceButton.color}
+                  onClick={() => replaceButtonToggle()}
+                >
+                  <IconReplace
+                    style={{ width: "70%", height: "70%" }}
+                    stroke={1.5}
+                  />
+                </ActionIcon>
+              </Tooltip>
+            )}
+            <Tooltip label={t("Close (Escape)")}>
+              <ActionIcon variant="subtle" color="gray" onClick={closeDialog}>
+                <IconX style={{ width: "70%", height: "70%" }} stroke={1.5} />
+              </ActionIcon>
+            </Tooltip>
+          </ActionIcon.Group>
+        </Flex>
+        {replaceButton.isReplaceShow && editable && (
+          <Flex align="center" gap="xs">
+            <Input
+              placeholder={t("Replace")}
+              leftSection={<IconReplace size={16} />}
+              rightSection={<div></div>}
+              rightSectionPointerEvents="all"
+              size="xs"
+              w={180}
+              autoFocus
+              onChange={replaceInputEvent}
+              value={replaceText}
+              onKeyDown={getHotkeyHandler([
+                ["Enter", replace],
+                ["ctrl+alt+Enter", replaceAll],
+              ])}
+            />
+            <ActionIcon.Group>
+              <Tooltip label={t("Replace (Enter)")}>
+                <Button
+                  size="xs"
+                  variant="subtle"
+                  color="gray"
+                  onClick={replace}
+                >
+                  {t("Replace")}
+                </Button>
+              </Tooltip>
+              <Tooltip label={t("Replace all (Ctrl+Alt+Enter)")}>
+                <Button
+                  size="xs"
+                  variant="subtle"
+                  color="gray"
+                  onClick={replaceAll}
+                >
+                  {t("Replace all")}
+                </Button>
+              </Tooltip>
+            </ActionIcon.Group>
+          </Flex>
+        )}
+      </Stack>
+    </Dialog>
+  );
+}
+
+export default SearchAndReplaceDialog;

apps/client/src/features/editor/components/search-and-replace/search-replace.module.css

@@ -0,0 +1,10 @@
+.findDialog{
+  @media print {
+    display: none;
+  }
+}
+
+.findDialog div[data-position="right"].mantine-Input-section {
+  justify-content: right;
+  padding-right: 8px;
+}

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

@@ -0,0 +1,145 @@
+import React, { FC } from "react";
+import { IconCheck, IconPalette } from "@tabler/icons-react";
+import {
+  ActionIcon,
+  ColorSwatch,
+  Popover,
+  Stack,
+  Text,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
+import { useEditor } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+
+export interface TableColorItem {
+  name: string;
+  color: string;
+}
+
+interface TableBackgroundColorProps {
+  editor: ReturnType<typeof useEditor>;
+}
+
+const TABLE_COLORS: TableColorItem[] = [
+  { name: "Default", color: "" },
+  { name: "Blue", color: "#b4d5ff" },
+  { name: "Green", color: "#acf5d2" },
+  { name: "Yellow", color: "#fef1b4" },
+  { name: "Red", color: "#ffbead" },
+  { name: "Pink", color: "#ffc7fe" },
+  { name: "Gray", color: "#eaecef" },
+  { name: "Purple", color: "#c1b7f2" },
+];
+
+export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
+  editor,
+}) => {
+  const { t } = useTranslation();
+  const [opened, setOpened] = React.useState(false);
+
+  const setTableCellBackground = (color: string, colorName: string) => {
+    editor
+      .chain()
+      .focus()
+      .updateAttributes("tableCell", { 
+        backgroundColor: color || null,
+        backgroundColorName: color ? colorName : null 
+      })
+      .updateAttributes("tableHeader", { 
+        backgroundColor: color || null,
+        backgroundColorName: color ? colorName : null 
+      })
+      .run();
+    setOpened(false);
+  };
+
+  // Get current cell's background color
+  const getCurrentColor = () => {
+    if (editor.isActive("tableCell")) {
+      const attrs = editor.getAttributes("tableCell");
+      return attrs.backgroundColor || "";
+    }
+    if (editor.isActive("tableHeader")) {
+      const attrs = editor.getAttributes("tableHeader");
+      return attrs.backgroundColor || "";
+    }
+    return "";
+  };
+
+  const currentColor = getCurrentColor();
+
+  return (
+    <Popover
+      width={200}
+      position="bottom"
+      opened={opened}
+      onChange={setOpened}
+      withArrow
+      transitionProps={{ transition: "pop" }}
+    >
+      <Popover.Target>
+        <Tooltip label={t("Background color")} withArrow>
+          <ActionIcon
+            variant="default"
+            size="lg"
+            aria-label={t("Background color")}
+            onClick={() => setOpened(!opened)}
+          >
+            <IconPalette size={18} />
+          </ActionIcon>
+        </Tooltip>
+      </Popover.Target>
+
+      <Popover.Dropdown>
+        <Stack gap="xs">
+          <Text size="sm" c="dimmed">
+            {t("Background color")}
+          </Text>
+
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(4, 1fr)",
+              gap: "8px",
+            }}
+          >
+            {TABLE_COLORS.map((item, index) => (
+              <UnstyledButton
+                key={index}
+                onClick={() => setTableCellBackground(item.color, item.name)}
+                style={{
+                  position: "relative",
+                  width: "24px",
+                  height: "24px",
+                }}
+                title={t(item.name)}
+              >
+                <ColorSwatch
+                  color={item.color || "#ffffff"}
+                  size={24}
+                  style={{
+                    border: item.color === "" ? "1px solid #e5e7eb" : undefined,
+                    cursor: "pointer",
+                  }}
+                >
+                  {currentColor === item.color && (
+                    <IconCheck
+                      size={18}
+                      style={{
+                        color:
+                          item.color === "" || item.color.startsWith("#F")
+                            ? "#000000"
+                            : "#ffffff",
+                      }}
+                    />
+                  )}
+                </ColorSwatch>
+              </UnstyledButton>
+            ))}
+          </div>
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+};

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

@@ -12,8 +12,11 @@ import {
   IconColumnRemove,
   IconRowRemove,
   IconSquareToggle,
+  IconTableRow,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
+import { TableBackgroundColor } from "./table-background-color";
+import { TableTextAlignment } from "./table-text-alignment";
 
 export const TableCellMenu = React.memo(
   ({ editor, appendTo }: EditorMenuProps): JSX.Element => {
@@ -45,6 +48,10 @@ export const TableCellMenu = React.memo(
       editor.chain().focus().deleteRow().run();
     }, [editor]);
 
+    const toggleHeaderCell = useCallback(() => {
+      editor.chain().focus().toggleHeaderCell().run();
+    }, [editor]);
+
     return (
       <BaseBubbleMenu
         editor={editor}
@@ -60,6 +67,9 @@ export const TableCellMenu = React.memo(
         shouldShow={shouldShow}
       >
         <ActionIcon.Group>
+          <TableBackgroundColor editor={editor} />
+          <TableTextAlignment editor={editor} />
+          
           <Tooltip position="top" label={t("Merge cells")}>
             <ActionIcon
               onClick={mergeCells}
@@ -103,6 +113,17 @@ export const TableCellMenu = React.memo(
               <IconRowRemove size={18} />
             </ActionIcon>
           </Tooltip>
+
+          <Tooltip position="top" label={t("Toggle header cell")}>
+            <ActionIcon
+              onClick={toggleHeaderCell}
+              variant="default"
+              size="lg"
+              aria-label={t("Toggle header cell")}
+            >
+              <IconTableRow size={18} />
+            </ActionIcon>
+          </Tooltip>
         </ActionIcon.Group>
       </BaseBubbleMenu>
     );

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

@@ -0,0 +1,109 @@
+import React, { FC } from "react";
+import {
+  IconAlignCenter,
+  IconAlignLeft,
+  IconAlignRight,
+  IconCheck,
+} from "@tabler/icons-react";
+import {
+  ActionIcon,
+  Button,
+  Popover,
+  rem,
+  ScrollArea,
+  Tooltip,
+} from "@mantine/core";
+import { useEditor } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+
+interface TableTextAlignmentProps {
+  editor: ReturnType<typeof useEditor>;
+}
+
+interface AlignmentItem {
+  name: string;
+  icon: React.ElementType;
+  command: () => void;
+  isActive: () => boolean;
+  value: string;
+}
+
+export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
+  const { t } = useTranslation();
+  const [opened, setOpened] = React.useState(false);
+
+  const items: AlignmentItem[] = [
+    {
+      name: "Align left",
+      value: "left",
+      isActive: () => editor.isActive({ textAlign: "left" }),
+      command: () => editor.chain().focus().setTextAlign("left").run(),
+      icon: IconAlignLeft,
+    },
+    {
+      name: "Align center",
+      value: "center",
+      isActive: () => editor.isActive({ textAlign: "center" }),
+      command: () => editor.chain().focus().setTextAlign("center").run(),
+      icon: IconAlignCenter,
+    },
+    {
+      name: "Align right",
+      value: "right",
+      isActive: () => editor.isActive({ textAlign: "right" }),
+      command: () => editor.chain().focus().setTextAlign("right").run(),
+      icon: IconAlignRight,
+    },
+  ];
+
+  const activeItem = items.find((item) => item.isActive()) || items[0];
+
+  return (
+    <Popover
+      opened={opened}
+      onChange={setOpened}
+      position="bottom"
+      withArrow
+      transitionProps={{ transition: 'pop' }}
+    >
+      <Popover.Target>
+        <Tooltip label={t("Text alignment")} withArrow>
+          <ActionIcon
+            variant="default"
+            size="lg"
+            aria-label={t("Text alignment")}
+            onClick={() => setOpened(!opened)}
+          >
+            <activeItem.icon size={18} />
+          </ActionIcon>
+        </Tooltip>
+      </Popover.Target>
+
+      <Popover.Dropdown>
+        <ScrollArea.Autosize type="scroll" mah={300}>
+          <Button.Group orientation="vertical">
+            {items.map((item, index) => (
+              <Button
+                key={index}
+                variant="default"
+                leftSection={<item.icon size={16} />}
+                rightSection={
+                  item.isActive() && <IconCheck size={16} />
+                }
+                justify="left"
+                fullWidth
+                onClick={() => {
+                  item.command();
+                  setOpened(false);
+                }}
+                style={{ border: "none" }}
+              >
+                {t(item.name)}
+              </Button>
+            ))}
+          </Button.Group>
+        </ScrollArea.Autosize>
+      </Popover.Dropdown>
+    </Popover>
+  );
+};

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

@@ -11,7 +11,6 @@ import { Typography } from "@tiptap/extension-typography";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { Color } from "@tiptap/extension-color";
 import Table from "@tiptap/extension-table";
-import TableHeader from "@tiptap/extension-table-header";
 import SlashCommand from "@/features/editor/extensions/slash-command";
 import { Collaboration } from "@tiptap/extension-collaboration";
 import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
@@ -25,6 +24,7 @@ import {
   MathInline,
   TableCell,
   TableRow,
+  TableHeader,
   TrailingNode,
   TiptapImage,
   Callout,
@@ -36,6 +36,7 @@ import {
   Drawio,
   Excalidraw,
   Embed,
+  SearchAndReplace,
   Mention,
 } from "@docmost/editor-ext";
 import {
@@ -73,6 +74,7 @@ import i18n from "@/i18n.ts";
 import { MarkdownClipboard } from "@/features/editor/extensions/markdown-clipboard.ts";
 import EmojiCommand from "./emoji-command";
 import { CharacterCount } from "@tiptap/extension-character-count";
+import { countWords } from "alfaaz";
 
 const lowlight = createLowlight(common);
 lowlight.register("mermaid", plaintext);
@@ -213,7 +215,25 @@ export const mainExtensions = [
   MarkdownClipboard.configure({
     transformPastedText: true,
   }),
-  CharacterCount
+  CharacterCount.configure({
+    wordCounter: (text) => countWords(text),
+  }),
+  SearchAndReplace.extend({
+    addKeyboardShortcuts() {
+      return {
+        'Mod-f': () => {
+          const event = new CustomEvent("openFindDialogFromEditor", {});
+          document.dispatchEvent(event);
+          return true;
+        },
+        'Escape': () => {
+          const event = new CustomEvent("closeFindDialogFromEditor", {});
+          document.dispatchEvent(event);
+          return true;
+        },
+      }
+    },
+  }).configure(),
 ] as any;
 
 type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];
@@ -229,4 +249,4 @@ export const collabExtensions: CollabExtensions = (provider, user) => [
       color: randomElement(userColors),
     },
   }),
-];
+];

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

@@ -42,7 +42,11 @@ export function FullEditor({
         spaceSlug={spaceSlug}
         editable={editable}
       />
-      <MemoizedPageEditor pageId={pageId} editable={editable} content={content} />
+      <MemoizedPageEditor
+        pageId={pageId}
+        editable={editable}
+        content={content}
+      />
     </Container>
   );
 }

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

@@ -1,11 +1,5 @@
 import "@/features/editor/styles/index.css";
-import React, {
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { IndexeddbPersistence } from "y-indexeddb";
 import * as Y from "yjs";
 import {
@@ -45,6 +39,7 @@ import LinkMenu from "@/features/editor/components/link/link-menu.tsx";
 import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu";
 import DrawioMenu from "./components/drawio/drawio-menu";
 import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
+import SearchAndReplaceDialog from "@/features/editor/components/search-and-replace/search-and-replace-dialog.tsx";
 import { useDebouncedCallback, useDocumentVisibility } from "@mantine/hooks";
 import { useIdle } from "@/hooks/use-idle.ts";
 import { queryClient } from "@/main.tsx";
@@ -52,6 +47,7 @@ import { IPage } from "@/features/page/types/page.types.ts";
 import { useParams } from "react-router-dom";
 import { extractPageSlugId } from "@/lib";
 import { FIVE_MINUTES } from "@/lib/constants.ts";
+import { PageEditMode } from "@/features/user/types/user.types.ts";
 import { jwtDecode } from "jwt-decode";
 
 interface PageEditorProps {
@@ -71,7 +67,11 @@ export default function PageEditor({
   const [, setAsideState] = useAtom(asideStateAtom);
   const [, setActiveCommentId] = useAtom(activeCommentIdAtom);
   const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
-  const ydoc = useMemo(() => new Y.Doc(), [pageId]);
+  const ydocRef = useRef<Y.Doc | null>(null);
+  if (!ydocRef.current) {
+    ydocRef.current = new Y.Doc();
+  }
+  const ydoc = ydocRef.current;
   const [isLocalSynced, setLocalSynced] = useState(false);
   const [isRemoteSynced, setRemoteSynced] = useState(false);
   const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
@@ -85,67 +85,126 @@ export default function PageEditor({
   const [isCollabReady, setIsCollabReady] = useState(false);
   const { pageSlug } = useParams();
   const slugId = extractPageSlugId(pageSlug);
+  const userPageEditMode =
+    currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
 
-  const localProvider = useMemo(() => {
-    const provider = new IndexeddbPersistence(documentName, ydoc);
+  // Providers only created once per pageId
+  const providersRef = useRef<{
+    local: IndexeddbPersistence;
+    remote: HocuspocusProvider;
+  } | null>(null);
+  const [providersReady, setProvidersReady] = useState(false);
 
-    provider.on("synced", () => {
-      setLocalSynced(true);
-    });
+  const localProvider = providersRef.current?.local;
+  const remoteProvider = providersRef.current?.remote;
 
-    return provider;
-  }, [pageId, ydoc]);
+  // Track when collaborative provider is ready and synced
+  const [collabReady, setCollabReady] = useState(false);
+  useEffect(() => {
+    if (
+      remoteProvider?.status === WebSocketStatus.Connected &&
+      isLocalSynced &&
+      isRemoteSynced
+    ) {
+      setCollabReady(true);
+    }
+  }, [remoteProvider?.status, isLocalSynced, isRemoteSynced]);
 
-  const remoteProvider = useMemo(() => {
-    const provider = new HocuspocusProvider({
-      name: documentName,
-      url: collaborationURL,
-      document: ydoc,
-      token: collabQuery?.token,
-      connect: false,
-      preserveConnection: false,
-      onAuthenticationFailed: (auth: onAuthenticationFailedParameters) => {
-        const payload = jwtDecode(collabQuery?.token);
-        const now = Date.now().valueOf() / 1000;
-        const isTokenExpired = now >= payload.exp;
-        if (isTokenExpired) {
-          refetchCollabToken();
-        }
-      },
-      onStatus: (status) => {
-        if (status.status === "connected") {
-          setYjsConnectionStatus(status.status);
-        }
-      },
-    });
-
-    provider.on("synced", () => {
-      setRemoteSynced(true);
-    });
-
-    provider.on("disconnect", () => {
-      setYjsConnectionStatus(WebSocketStatus.Disconnected);
-    });
-
-    return provider;
-  }, [ydoc, pageId, collabQuery?.token]);
-
-  useLayoutEffect(() => {
-    remoteProvider.connect();
+  useEffect(() => {
+    if (!providersRef.current) {
+      const local = new IndexeddbPersistence(documentName, ydoc);
+      local.on("synced", () => setLocalSynced(true));
+      const remote = new HocuspocusProvider({
+        name: documentName,
+        url: collaborationURL,
+        document: ydoc,
+        token: collabQuery?.token,
+        connect: true,
+        preserveConnection: false,
+        onAuthenticationFailed: (auth: onAuthenticationFailedParameters) => {
+          const payload = jwtDecode(collabQuery?.token);
+          const now = Date.now().valueOf() / 1000;
+          const isTokenExpired = now >= payload.exp;
+          if (isTokenExpired) {
+            refetchCollabToken().then((result) => {
+              if (result.data?.token) {
+                remote.disconnect();
+                setTimeout(() => {
+                  remote.configuration.token = result.data.token;
+                  remote.connect();
+                }, 100);
+              }
+            });
+          }
+        },
+        onStatus: (status) => {
+          if (status.status === "connected") {
+            setYjsConnectionStatus(status.status);
+          }
+        },
+      });
+      remote.on("synced", () => setRemoteSynced(true));
+      remote.on("disconnect", () => {
+        setYjsConnectionStatus(WebSocketStatus.Disconnected);
+      });
+      providersRef.current = { local, remote };
+      setProvidersReady(true);
+    } else {
+      setProvidersReady(true);
+    }
+    // Only destroy on final unmount
     return () => {
-      setRemoteSynced(false);
-      setLocalSynced(false);
-      remoteProvider.destroy();
-      localProvider.destroy();
+      providersRef.current?.remote.destroy();
+      providersRef.current?.local.destroy();
+      providersRef.current = null;
     };
-  }, [remoteProvider, localProvider]);
+  }, [pageId]);
+
+  /*
+  useEffect(() => {
+    // Handle token updates by reconnecting with new token
+    if (providersRef.current?.remote && collabQuery?.token) {
+      const currentToken = providersRef.current.remote.configuration.token;
+      if (currentToken !== collabQuery.token) {
+        // Token has changed, need to reconnect with new token
+        providersRef.current.remote.disconnect();
+        providersRef.current.remote.configuration.token = collabQuery.token;
+        providersRef.current.remote.connect();
+      }
+    }
+  }, [collabQuery?.token]);
+   */
+
+  // Only connect/disconnect on tab/idle, not destroy
+  useEffect(() => {
+    if (!providersReady || !providersRef.current) return;
+    const remoteProvider = providersRef.current.remote;
+    if (
+      isIdle &&
+      documentState === "hidden" &&
+      remoteProvider.status === WebSocketStatus.Connected
+    ) {
+      remoteProvider.disconnect();
+      setIsCollabReady(false);
+      return;
+    }
+    if (
+      documentState === "visible" &&
+      remoteProvider.status === WebSocketStatus.Disconnected
+    ) {
+      resetIdle();
+      remoteProvider.connect();
+      setTimeout(() => setIsCollabReady(true), 500);
+    }
+  }, [isIdle, documentState, providersReady, resetIdle]);
 
   const extensions = useMemo(() => {
+    if (!remoteProvider || !currentUser?.user) return mainExtensions;
     return [
       ...mainExtensions,
       ...collabExtensions(remoteProvider, currentUser?.user),
     ];
-  }, [ydoc, pageId, remoteProvider, currentUser?.user]);
+  }, [remoteProvider, currentUser?.user]);
 
   const editor = useEditor(
     {
@@ -158,6 +217,10 @@ export default function PageEditor({
         scrollMargin: 80,
         handleDOMEvents: {
           keydown: (_view, event) => {
+            if ((event.ctrlKey || event.metaKey) && event.code === 'KeyS') {
+              event.preventDefault();
+              return true;
+            }
             if (["ArrowUp", "ArrowDown", "Enter"].includes(event.key)) {
               const slashCommand = document.querySelector("#slash-command");
               if (slashCommand) {
@@ -199,7 +262,7 @@ export default function PageEditor({
         debouncedUpdateContent(editorJson);
       },
     },
-    [pageId, editable, remoteProvider?.status],
+    [pageId, editable, remoteProvider],
   );
 
   const debouncedUpdateContent = useDebouncedCallback((newContent: any) => {
@@ -252,29 +315,6 @@ export default function PageEditor({
     }
   }, [remoteProvider?.status]);
 
-  useEffect(() => {
-    if (
-      isIdle &&
-      documentState === "hidden" &&
-      remoteProvider?.status === WebSocketStatus.Connected
-    ) {
-      remoteProvider.disconnect();
-      setIsCollabReady(false);
-      return;
-    }
-
-    if (
-      documentState === "visible" &&
-      remoteProvider?.status === WebSocketStatus.Disconnected
-    ) {
-      resetIdle();
-      remoteProvider.connect();
-      setTimeout(() => {
-        setIsCollabReady(true);
-      }, 600);
-    }
-  }, [isIdle, documentState, remoteProvider]);
-
   const isSynced = isLocalSynced && isRemoteSynced;
 
   useEffect(() => {
@@ -290,11 +330,54 @@ export default function PageEditor({
     return () => clearTimeout(collabReadyTimeout);
   }, [isRemoteSynced, isLocalSynced, remoteProvider?.status]);
 
-  return isCollabReady ? (
-    <div>
+  useEffect(() => {
+    // Only honor user default page edit mode preference and permissions
+    if (editor) {
+      if (userPageEditMode && editable) {
+        if (userPageEditMode === PageEditMode.Edit) {
+          editor.setEditable(true);
+        } else if (userPageEditMode === PageEditMode.Read) {
+          editor.setEditable(false);
+        }
+      } else {
+        editor.setEditable(false);
+      }
+    }
+  }, [userPageEditMode, editor, editable]);
+
+  const hasConnectedOnceRef = useRef(false);
+  const [showStatic, setShowStatic] = useState(true);
+
+  useEffect(() => {
+    if (
+      !hasConnectedOnceRef.current &&
+      remoteProvider?.status === WebSocketStatus.Connected
+    ) {
+      hasConnectedOnceRef.current = true;
+      setShowStatic(false);
+    }
+  }, [remoteProvider?.status]);
+
+  if (showStatic) {
+    return (
+      <EditorProvider
+        editable={false}
+        immediatelyRender={true}
+        extensions={mainExtensions}
+        content={content}
+      />
+    );
+  }
+
+  return (
+    <div style={{ position: "relative" }}>
       <div ref={menuContainerRef}>
         <EditorContent editor={editor} />
 
+        {editor && (
+          <SearchAndReplaceDialog editor={editor} editable={editable} />
+        )}
+
         {editor && editor.isEditable && (
           <div>
             <EditorBubbleMenu editor={editor} />
@@ -308,21 +391,12 @@ export default function PageEditor({
             <LinkMenu editor={editor} appendTo={menuContainerRef} />
           </div>
         )}
-
         {showCommentPopup && <CommentDialog editor={editor} pageId={pageId} />}
       </div>
-
       <div
         onClick={() => editor.commands.focus("end")}
         style={{ paddingBottom: "20vh" }}
       ></div>
     </div>
-  ) : (
-    <EditorProvider
-      editable={false}
-      immediatelyRender={true}
-      extensions={mainExtensions}
-      content={content}
-    ></EditorProvider>
   );
 }

apps/client/src/features/editor/styles/details.css

@@ -71,4 +71,12 @@
   [data-type="details"][open] > [data-type="detailsButton"] .ProseMirror-icon{
     transform: rotateZ(90deg);
   }
-}
+  
+  [data-type="details"]:has(.search-result) > [data-type="detailsContainer"] > [data-type="detailsContent"]{
+    display: block;
+  }
+
+  [data-type="details"]:has(.search-result) > [data-type="detailsButton"] .ProseMirror-icon{
+    transform: rotateZ(90deg);
+  }
+}

apps/client/src/features/editor/styles/find.css

@@ -0,0 +1,9 @@
+.search-result{
+  background: #ffff65;
+  color: #212529;
+}
+
+.search-result-current{
+  background: #ffc266 !important;
+  color: #212529;
+}

apps/client/src/features/editor/styles/index.css

@@ -9,5 +9,5 @@
 @import "./media.css";
 @import "./code.css";
 @import "./print.css";
+@import "./find.css";
 @import "./mention.css";
-

apps/client/src/features/editor/styles/table.css

@@ -4,6 +4,7 @@
   overflow-x: auto;
   & table {
     overflow-x: hidden;
+    min-width: 700px !important;
   }
 }
 
@@ -38,8 +39,8 @@
 
     th {
       background-color: light-dark(
-              var(--mantine-color-gray-1),
-              var(--mantine-color-dark-5)
+        var(--mantine-color-gray-1),
+        var(--mantine-color-dark-5)
       );
       font-weight: bold;
       text-align: left;
@@ -66,8 +67,54 @@
       position: absolute;
       z-index: 2;
     }
-
   }
 }
 
+/* Table cell background colors with dark mode support */
+.ProseMirror {
+  table {
+    @mixin dark {
+      /* Blue */
+      td[data-background-color="#b4d5ff"],
+      th[data-background-color="#b4d5ff"] {
+        background-color: #1a3a5c !important;
+      }
 
+      /* Green */
+      td[data-background-color="#acf5d2"],
+      th[data-background-color="#acf5d2"] {
+        background-color: #1a4d3a !important;
+      }
+
+      /* Yellow */
+      td[data-background-color="#fef1b4"],
+      th[data-background-color="#fef1b4"] {
+        background-color: #7c5014 !important;
+      }
+
+      /* Red */
+      td[data-background-color="#ffbead"],
+      th[data-background-color="#ffbead"] {
+        background-color: #5c2a23 !important;
+      }
+
+      /* Pink */
+      td[data-background-color="#ffc7fe"],
+      th[data-background-color="#ffc7fe"] {
+        background-color: #4d2a4d !important;
+      }
+
+      /* Gray */
+      td[data-background-color="#eaecef"],
+      th[data-background-color="#eaecef"] {
+        background-color: #2a2e33 !important;
+      }
+
+      /* Purple */
+      td[data-background-color="#c1b7f2"],
+      th[data-background-color="#c1b7f2"] {
+        background-color: #3a2f5c !important;
+      }
+    }
+  }
+}

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

@@ -10,8 +10,11 @@ import {
   pageEditorAtom,
   titleEditorAtom,
 } from "@/features/editor/atoms/editor-atoms";
-import { updatePageData, useUpdateTitlePageMutation } from "@/features/page/queries/page-query";
-import { useDebouncedCallback } from "@mantine/hooks";
+import {
+  updatePageData,
+  useUpdateTitlePageMutation,
+} from "@/features/page/queries/page-query";
+import { useDebouncedCallback, getHotkeyHandler } from "@mantine/hooks";
 import { useAtom } from "jotai";
 import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
 import { History } from "@tiptap/extension-history";
@@ -21,6 +24,8 @@ import { useTranslation } from "react-i18next";
 import EmojiCommand from "@/features/editor/extensions/emoji-command.ts";
 import { UpdateEvent } from "@/features/websocket/types";
 import localEmitter from "@/lib/local-emitter.ts";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { PageEditMode } from "@/features/user/types/user.types.ts";
 
 export interface TitleEditorProps {
   pageId: string;
@@ -38,12 +43,16 @@ export function TitleEditor({
   editable,
 }: TitleEditorProps) {
   const { t } = useTranslation();
-  const { mutateAsync: updateTitlePageMutationAsync } = useUpdateTitlePageMutation();
+  const { mutateAsync: updateTitlePageMutationAsync } =
+    useUpdateTitlePageMutation();
   const pageEditor = useAtomValue(pageEditorAtom);
   const [, setTitleEditor] = useAtom(titleEditorAtom);
   const emit = useQueryEmit();
   const navigate = useNavigate();
   const [activePageId, setActivePageId] = useState(pageId);
+  const [currentUser] = useAtom(currentUserAtom);
+  const userPageEditMode =
+    currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
 
   const titleEditor = useEditor({
     extensions: [
@@ -103,7 +112,12 @@ export function TitleEditor({
         spaceId: page.spaceId,
         entity: ["pages"],
         id: page.id,
-        payload: { title: page.title, slugId: page.slugId, parentPageId: page.parentPageId, icon: page.icon },
+        payload: {
+          title: page.title,
+          slugId: page.slugId,
+          parentPageId: page.parentPageId,
+          icon: page.icon,
+        },
       };
 
       if (page.title !== titleEditor.getText()) return;
@@ -136,9 +150,30 @@ export function TitleEditor({
     };
   }, [pageId]);
 
-  function handleTitleKeyDown(event) {
+  useEffect(() => {
+    // honor user default page edit mode preference
+    if (userPageEditMode && titleEditor && editable) {
+      if (userPageEditMode === PageEditMode.Edit) {
+        titleEditor.setEditable(true);
+      } else if (userPageEditMode === PageEditMode.Read) {
+        titleEditor.setEditable(false);
+      }
+    }
+  }, [userPageEditMode, titleEditor, editable]);
+
+  const openSearchDialog = () => {
+    const event = new CustomEvent("openFindDialogFromEditor", {});
+    document.dispatchEvent(event);
+  };
+
+  function handleTitleKeyDown(event: any) {
     if (!titleEditor || !pageEditor || event.shiftKey) return;
 
+    // Prevent focus shift when IME composition is active
+    // `keyCode === 229` is added to support Safari where `isComposing` may not be reliable
+    if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229)
+      return;
+
     const { key } = event;
     const { $head } = titleEditor.state.selection;
 
@@ -152,5 +187,16 @@ export function TitleEditor({
     }
   }
 
-  return <EditorContent editor={titleEditor} onKeyDown={handleTitleKeyDown} />;
+  return (
+    <EditorContent
+      editor={titleEditor}
+      onKeyDown={(event) => {
+        // First handle the search hotkey
+        getHotkeyHandler([["mod+F", openSearchDialog]])(event);
+        
+        // Then handle other key events
+        handleTitleKeyDown(event);
+      }}
+    />
+  );
 }

apps/client/src/features/page/components/breadcrumbs/breadcrumb.module.css

@@ -1,24 +1,30 @@
 .breadcrumbs {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  flex-wrap: nowrap;
+
+  a {
+    color: var(--mantine-color-default-color);
+    line-height: inherit;
+  }
+
+  .mantine-Breadcrumbs-breadcrumb {
+    min-width: 1px;
     overflow: hidden;
-    flex-wrap: nowrap;
-
-    a {
-        color: var(--mantine-color-default-color);
-        line-height: inherit;
-    }
-
-    .mantine-Breadcrumbs-breadcrumb {
-        min-width: 1px;
-        overflow: hidden;
-    }
+  }
 }
 
 .truncatedText {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
 }
 
+.breadcrumbDiv {
+  overflow: hidden;
+  @media (max-width: $mantine-breakpoint-sm) {
+    overflow: visible;
+  }
+}

apps/client/src/features/page/components/breadcrumbs/breadcrumb.tsx

@@ -161,7 +161,7 @@ export default function Breadcrumb() {
   };
 
   return (
-    <div style={{ overflow: "hidden" }}>
+    <div className={classes.breadcrumbDiv}>
       {breadcrumbNodes && (
         <Breadcrumbs className={classes.breadcrumbs}>
           {isMobile ? getMobileBreadcrumbItems() : getBreadcrumbItems()}

apps/client/src/features/page/components/header/page-header-menu.tsx

@@ -9,6 +9,7 @@ import {
   IconList,
   IconMessage,
   IconPrinter,
+  IconSearch,
   IconTrash,
   IconWifiOff,
 } from "@tabler/icons-react";
@@ -16,7 +17,12 @@ import React from "react";
 import useToggleAside from "@/hooks/use-toggle-aside.tsx";
 import { useAtom } from "jotai";
 import { historyAtoms } from "@/features/page-history/atoms/history-atoms.ts";
-import { useClipboard, useDisclosure } from "@mantine/hooks";
+import {
+  getHotkeyHandler,
+  useClipboard,
+  useDisclosure,
+  useHotkeys,
+} from "@mantine/hooks";
 import { useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
@@ -32,7 +38,9 @@ import {
   pageEditorAtom,
   yjsConnectionStatusAtom,
 } from "@/features/editor/atoms/editor-atoms.ts";
+import { searchAndReplaceStateAtom } from "@/features/editor/components/search-and-replace/atoms/search-and-replace-state-atom.ts";
 import { formattedDate, timeAgo } from "@/lib/time.ts";
+import { PageStateSegmentedControl } from "@/features/user/components/page-state-pref.tsx";
 import MovePageModal from "@/features/page/components/move-page-modal.tsx";
 import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
 import ShareModal from "@/features/share/components/share-modal.tsx";
@@ -45,6 +53,26 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
   const toggleAside = useToggleAside();
   const [yjsConnectionStatus] = useAtom(yjsConnectionStatusAtom);
 
+  useHotkeys(
+    [
+      [
+        "mod+F",
+        () => {
+          const event = new CustomEvent("openFindDialogFromEditor", {});
+          document.dispatchEvent(event);
+        },
+      ],
+      [
+        "Escape",
+        () => {
+          const event = new CustomEvent("closeFindDialogFromEditor", {});
+          document.dispatchEvent(event);
+        },
+      ],
+    ],
+    [],
+  );
+
   return (
     <>
       {yjsConnectionStatus === "disconnected" && (
@@ -59,6 +87,8 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
         </Tooltip>
       )}
 
+      {!readOnly && <PageStateSegmentedControl size="xs" />}
+
       <ShareModal readOnly={readOnly} />
 
       <Tooltip label={t("Comments")} openDelay={250} withArrow>

apps/client/src/features/page/components/header/page-header.module.css

@@ -1,15 +1,27 @@
 .header {
-    height: 45px;
-    background-color: var(--mantine-color-body);
-    padding-left: var(--mantine-spacing-md);
-    padding-right: var(--mantine-spacing-md);
-    position: fixed;
-    z-index: 99;
-    top: var(--app-shell-header-offset, 0rem);
-    inset-inline-start: var(--app-shell-navbar-offset, 0rem);
-    inset-inline-end: var(--app-shell-aside-offset, 0rem);
+  height: 45px;
+  background-color: var(--mantine-color-body);
+  padding-left: var(--mantine-spacing-md);
+  padding-right: var(--mantine-spacing-md);
+  position: fixed;
+  z-index: 99;
+  top: var(--app-shell-header-offset, 0rem);
+  inset-inline-start: var(--app-shell-navbar-offset, 0rem);
+  inset-inline-end: var(--app-shell-aside-offset, 0rem);
 
-    @media print {
-        display: none;
-    }
+  @media (max-width: $mantine-breakpoint-sm) {
+    padding-left: var(--mantine-spacing-xs);
+    padding-right: var(--mantine-spacing-xs);
+  }
+
+  @media print {
+    display: none;
+  }
+}
+
+.group {
+  @media (max-width: $mantine-breakpoint-sm) {
+    gap: var(--mantine-spacing-sm);
+    padding-inline: 0 !important;
+  }
 }

apps/client/src/features/page/components/header/page-header.tsx

@@ -9,10 +9,10 @@ interface Props {
 export default function PageHeader({ readOnly }: Props) {
   return (
     <div className={classes.header}>
-      <Group justify="space-between" h="100%" px="md" wrap="nowrap">
+      <Group justify="space-between" h="100%" px="md" wrap="nowrap" className={classes.group}>
         <Breadcrumb />
 
-        <Group justify="flex-end" h="100%" px="md" wrap="nowrap">
+        <Group justify="flex-end" h="100%" px="md" wrap="nowrap" gap="var(--mantine-spacing-xs)">
           <PageHeaderMenu readOnly={readOnly} />
         </Group>
       </Group>

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

@@ -65,6 +65,7 @@ export interface IPageInput {
   icon: string;
   coverPhoto: string;
   position: string;
+  isLocked: boolean;
 }
 
 export interface IExportPageParams {

apps/client/src/features/space/components/multi-member-select.tsx

@@ -26,6 +26,9 @@ const renderMultiSelectOption: MultiSelectProps["renderOption"] = ({
     {option["type"] === "group" && <IconGroupCircle />}
     <div>
       <Text size="sm" lineClamp={1}>{option.label}</Text>
+      {option["type"] === "user" && option["email"] && (
+        <Text size="xs" c="dimmed" lineClamp={1}>{option["email"]}</Text>
+      )}
     </div>
   </Group>
 );
@@ -47,6 +50,7 @@ export function MultiMemberSelect({ onChange }: MultiMemberSelectProps) {
       const userItems = suggestion?.users.map((user: IUser) => ({
         value: `user-${user.id}`,
         label: user.name,
+        email: user.email,
         avatarUrl: user.avatarUrl,
         type: "user",
       }));

apps/client/src/features/user/components/account-name-form.tsx

@@ -11,7 +11,7 @@ import { notifications } from "@mantine/notifications";
 import { useTranslation } from "react-i18next";
 
 const formSchema = z.object({
-  name: z.string().min(2).max(40),
+  name: z.string().min(1).max(40),
 });
 
 type FormValues = z.infer<typeof formSchema>;

apps/client/src/features/user/components/page-state-pref.tsx

@@ -0,0 +1,65 @@
+import { Group, Text, MantineSize, SegmentedControl } from "@mantine/core";
+import { useAtom } from "jotai";
+import { userAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { updateUser } from "@/features/user/services/user-service.ts";
+import React, { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { PageEditMode } from "@/features/user/types/user.types.ts";
+
+export default function PageStatePref() {
+  const { t } = useTranslation();
+
+  return (
+    <Group justify="space-between" wrap="nowrap" gap="xl">
+      <div>
+        <Text size="md">{t("Default page edit mode")}</Text>
+        <Text size="sm" c="dimmed">
+          {t("Choose your preferred page edit mode. Avoid accidental edits.")}
+        </Text>
+      </div>
+
+      <PageStateSegmentedControl />
+    </Group>
+  );
+}
+
+interface PageStateSegmentedControlProps {
+  size?: MantineSize;
+}
+
+export function PageStateSegmentedControl({
+  size,
+}: PageStateSegmentedControlProps) {
+  const { t } = useTranslation();
+  const [user, setUser] = useAtom(userAtom);
+  const pageEditMode =
+    user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
+  const [value, setValue] = useState(pageEditMode);
+
+  const handleChange = useCallback(
+    async (value: string) => {
+      const updatedUser = await updateUser({ pageEditMode: value });
+      setValue(value);
+      setUser(updatedUser);
+    },
+    [user, setUser],
+  );
+
+  useEffect(() => {
+    if (pageEditMode !== value) {
+      setValue(pageEditMode);
+    }
+  }, [pageEditMode, value]);
+
+  return (
+    <SegmentedControl
+      size={size}
+      value={value}
+      onChange={handleChange}
+      data={[
+        { label: t("Edit"), value: PageEditMode.Edit },
+        { label: t("Read"), value: PageEditMode.Read },
+      ]}
+    />
+  );
+}

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

@@ -19,6 +19,7 @@ export interface IUser {
   deactivatedAt: Date;
   deletedAt: Date;
   fullPageWidth: boolean; // used for update
+  pageEditMode: string; // used for update
 }
 
 export interface ICurrentUser {
@@ -29,5 +30,11 @@ export interface ICurrentUser {
 export interface IUserSettings {
   preferences: {
     fullPageWidth: boolean;
+    pageEditMode: string;
   };
-}
+}
+
+export enum PageEditMode {
+  Read = "read",
+  Edit = "edit",
+}

apps/client/src/features/workspace/components/settings/components/workspace-name-form.tsx

@@ -11,7 +11,7 @@ import useUserRole from "@/hooks/use-user-role.tsx";
 import { useTranslation } from "react-i18next";
 
 const formSchema = z.object({
-  name: z.string().min(4),
+  name: z.string().min(1),
 });
 
 type FormValues = z.infer<typeof formSchema>;

apps/client/src/features/workspace/queries/workspace-query.ts

@@ -173,7 +173,7 @@ export function useRevokeInvitationMutation() {
 
 export function useGetInvitationQuery(
   invitationId: string,
-): UseQueryResult<any, Error> {
+): UseQueryResult<IInvitation, Error> {
   return useQuery({
     queryKey: ["invitations", invitationId],
     queryFn: () => getInvitationById({ invitationId }),

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

@@ -12,6 +12,7 @@ export interface IWorkspace {
   settings: any;
   status: string;
   enforceSso: boolean;
+  stripeCustomerId: string;
   billingEmail: string;
   trialEndAt: Date;
   createdAt: Date;
@@ -35,6 +36,7 @@ export interface IInvitation {
   workspaceId: string;
   invitedById: string;
   createdAt: Date;
+  enforceSso: boolean;
 }
 
 export interface IInvitationLink {

apps/client/src/lib/config.ts

@@ -83,6 +83,18 @@ export function getBillingTrialDays() {
   return getConfigValue("BILLING_TRIAL_DAYS");
 }
 
+export function getPostHogHost() {
+  return getConfigValue("POSTHOG_HOST");
+}
+
+export function isPostHogEnabled(): boolean {
+  return Boolean(getPostHogHost() && getPostHogKey());
+}
+
+export function getPostHogKey() {
+  return getConfigValue("POSTHOG_KEY");
+}
+
 function getConfigValue(key: string, defaultValue: string = undefined): string {
   const rawValue = import.meta.env.DEV
     ? process?.env?.[key]

apps/client/src/main.tsx

@@ -3,7 +3,7 @@ import "@mantine/spotlight/styles.css";
 import "@mantine/notifications/styles.css";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
-import { mantineCssResolver, theme } from '@/theme';
+import { mantineCssResolver, theme } from "@/theme";
 import { MantineProvider } from "@mantine/core";
 import { BrowserRouter } from "react-router-dom";
 import { ModalsProvider } from "@mantine/modals";
@@ -11,6 +11,14 @@ import { Notifications } from "@mantine/notifications";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { HelmetProvider } from "react-helmet-async";
 import "./i18n";
+import { PostHogProvider } from "posthog-js/react";
+import {
+  getPostHogHost,
+  getPostHogKey,
+  isCloud,
+  isPostHogEnabled,
+} from "@/lib/config.ts";
+import posthog from "posthog-js";
 
 export const queryClient = new QueryClient({
   defaultOptions: {
@@ -23,9 +31,17 @@ export const queryClient = new QueryClient({
   },
 });
 
+if (isCloud() && isPostHogEnabled) {
+  posthog.init(getPostHogKey(), {
+    api_host: getPostHogHost(),
+    defaults: "2025-05-24",
+    disable_session_recording: true,
+    capture_pageleave: false,
+  });
+}
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 
 root.render(
@@ -35,10 +51,12 @@ root.render(
         <QueryClientProvider client={queryClient}>
           <Notifications position="bottom-center" limit={3} />
           <HelmetProvider>
-            <App />
+            <PostHogProvider client={posthog}>
+              <App />
+            </PostHogProvider>
           </HelmetProvider>
         </QueryClientProvider>
       </ModalsProvider>
     </MantineProvider>
-  </BrowserRouter>
+  </BrowserRouter>,
 );

apps/client/src/pages/page/page.tsx

@@ -12,6 +12,11 @@ import {
   SpaceCaslSubject,
 } from "@/features/space/permissions/permissions.type.ts";
 import { useTranslation } from "react-i18next";
+import React from "react";
+
+const MemoizedFullEditor = React.memo(FullEditor);
+const MemoizedPageHeader = React.memo(PageHeader);
+const MemoizedHistoryModal = React.memo(HistoryModal);
 
 export default function Page() {
   const { t } = useTranslation();
@@ -49,14 +54,14 @@ export default function Page() {
           <title>{`${page?.icon || ""}  ${page?.title || t("untitled")}`}</title>
         </Helmet>
 
-        <PageHeader
+        <MemoizedPageHeader
           readOnly={spaceAbility.cannot(
             SpaceCaslAction.Manage,
             SpaceCaslSubject.Page,
           )}
         />
 
-        <FullEditor
+        <MemoizedFullEditor
           key={page.id}
           pageId={page.id}
           title={page.title}
@@ -68,7 +73,7 @@ export default function Page() {
             SpaceCaslSubject.Page,
           )}
         />
-        <HistoryModal pageId={page.id} />
+        <MemoizedHistoryModal pageId={page.id} />
       </div>
     )
   );

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

@@ -2,6 +2,7 @@ import SettingsTitle from "@/components/settings/settings-title.tsx";
 import AccountLanguage from "@/features/user/components/account-language.tsx";
 import AccountTheme from "@/features/user/components/account-theme.tsx";
 import PageWidthPref from "@/features/user/components/page-width-pref.tsx";
+import PageEditPref from "@/features/user/components/page-state-pref";
 import { getAppName } from "@/lib/config.ts";
 import { Divider } from "@mantine/core";
 import { Helmet } from "react-helmet-async";
@@ -28,6 +29,10 @@ export default function AccountPreferences() {
       <Divider my={"md"} />
 
       <PageWidthPref />
+      
+      <Divider my={"md"} />
+
+      <PageEditPref />
     </>
   );
 }

apps/client/vite.config.ts

@@ -14,6 +14,8 @@ export default defineConfig(({ mode }) => {
     SUBDOMAIN_HOST,
     COLLAB_URL,
     BILLING_TRIAL_DAYS,
+    POSTHOG_HOST,
+    POSTHOG_KEY,
   } = loadEnv(mode, envPath, "");
 
   return {
@@ -27,6 +29,8 @@ export default defineConfig(({ mode }) => {
         SUBDOMAIN_HOST,
         COLLAB_URL,
         BILLING_TRIAL_DAYS,
+        POSTHOG_HOST,
+        POSTHOG_KEY,
       },
       APP_VERSION: JSON.stringify(process.env.npm_package_version),
     },

apps/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "server",
-  "version": "0.20.4",
+  "version": "0.21.0",
   "description": "",
   "author": "",
   "private": true,

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

@@ -11,7 +11,6 @@ import { TextStyle } from '@tiptap/extension-text-style';
 import { Color } from '@tiptap/extension-color';
 import { Youtube } from '@tiptap/extension-youtube';
 import Table from '@tiptap/extension-table';
-import TableHeader from '@tiptap/extension-table-header';
 import {
   Callout,
   Comment,
@@ -22,6 +21,7 @@ import {
   LinkExtension,
   MathBlock,
   MathInline,
+  TableHeader,
   TableCell,
   TableRow,
   TiptapImage,
@@ -31,7 +31,7 @@ import {
   Drawio,
   Excalidraw,
   Embed,
-  Mention
+  Mention,
 } from '@docmost/editor-ext';
 import { generateText, getSchema, JSONContent } from '@tiptap/core';
 import { generateHTML } from '../common/helpers/prosemirror/html';
@@ -46,7 +46,7 @@ export const tiptapExtensions = [
     codeBlock: false,
   }),
   Comment,
-  TextAlign.configure({ types: ["heading", "paragraph"] }),
+  TextAlign.configure({ types: ['heading', 'paragraph'] }),
   TaskList,
   TaskItem,
   Underline,
@@ -64,9 +64,9 @@ export const tiptapExtensions = [
   DetailsContent,
   DetailsSummary,
   Table,
-  TableHeader,
-  TableRow,
   TableCell,
+  TableRow,
+  TableHeader,
   Youtube,
   TiptapImage,
   TiptapVideo,
@@ -76,7 +76,7 @@ export const tiptapExtensions = [
   Drawio,
   Excalidraw,
   Embed,
-  Mention
+  Mention,
 ] as any;
 
 export function jsonToHtml(tiptapJson: any) {

apps/server/src/collaboration/extensions/authentication.extension.ts

@@ -46,6 +46,10 @@ export class AuthenticationExtension implements Extension {
       throw new UnauthorizedException();
     }
 
+    if (user.deactivatedAt || user.deletedAt) {
+      throw new UnauthorizedException();
+    }
+
     const page = await this.pageRepo.findById(pageId);
     if (!page) {
       this.logger.warn(`Page not found: ${pageId}`);

apps/server/src/common/helpers/utils.ts

@@ -16,6 +16,12 @@ export async function comparePasswordHash(
   return bcrypt.compare(plainPassword, passwordHash);
 }
 
+export function generateRandomSuffixNumbers(length: number) {
+  return Math.random()
+    .toFixed(length)
+    .substring(2, 2 + length);
+}
+
 export type RedisConfig = {
   host: string;
   port: number;

apps/server/src/core/auth/auth.controller.ts

@@ -1,11 +1,9 @@
 import {
-  BadRequestException,
   Body,
   Controller,
   HttpCode,
   HttpStatus,
   Post,
-  Req,
   Res,
   UseGuards,
 } from '@nestjs/common';
@@ -23,7 +21,6 @@ import { ForgotPasswordDto } from './dto/forgot-password.dto';
 import { PasswordResetDto } from './dto/password-reset.dto';
 import { VerifyUserTokenDto } from './dto/verify-user-token.dto';
 import { FastifyReply } from 'fastify';
-import { addDays } from 'date-fns';
 import { validateSsoEnforcement } from './auth.util';
 
 @Controller('auth')
@@ -111,7 +108,7 @@ export class AuthController {
     @AuthUser() user: User,
     @AuthWorkspace() workspace: Workspace,
   ) {
-    return this.authService.getCollabToken(user.id, workspace.id);
+    return this.authService.getCollabToken(user, workspace.id);
   }
 
   @UseGuards(JwtAuthGuard)
@@ -125,7 +122,7 @@ export class AuthController {
     res.setCookie('authToken', token, {
       httpOnly: true,
       path: '/',
-      expires: addDays(new Date(), 30),
+      expires: this.environmentService.getCookieExpiresIn(),
       secure: this.environmentService.isHttps(),
     });
   }

apps/server/src/core/auth/auth.util.ts

@@ -6,3 +6,16 @@ export function validateSsoEnforcement(workspace: Workspace) {
     throw new BadRequestException('This workspace has enforced SSO login.');
   }
 }
+
+export function validateAllowedEmail(userEmail: string, workspace: Workspace) {
+  const emailParts = userEmail.split('@');
+  const emailDomain = emailParts[1].toLowerCase();
+  if (
+    workspace.emailDomains?.length > 0 &&
+    !workspace.emailDomains.includes(emailDomain)
+  ) {
+    throw new BadRequestException(
+      `The email domain "${emailDomain}" is not approved for this workspace.`,
+    );
+  }
+}

apps/server/src/core/auth/dto/create-admin-user.dto.ts

@@ -1,6 +1,12 @@
-import { IsNotEmpty, IsString, MaxLength, MinLength } from 'class-validator';
+import {
+  IsNotEmpty,
+  IsOptional,
+  IsString,
+  MaxLength,
+  MinLength,
+} from 'class-validator';
 import { CreateUserDto } from './create-user.dto';
-import {Transform, TransformFnParams} from "class-transformer";
+import { Transform, TransformFnParams } from 'class-transformer';
 
 export class CreateAdminUserDto extends CreateUserDto {
   @IsNotEmpty()
@@ -9,10 +15,17 @@ export class CreateAdminUserDto extends CreateUserDto {
   @Transform(({ value }: TransformFnParams) => value?.trim())
   name: string;
 
-  @IsNotEmpty()
-  @MinLength(3)
+  @IsOptional()
+  @MinLength(1)
   @MaxLength(50)
   @IsString()
   @Transform(({ value }: TransformFnParams) => value?.trim())
   workspaceName: string;
+
+  @IsOptional()
+  @MinLength(4)
+  @MaxLength(50)
+  @IsString()
+  @Transform(({ value }: TransformFnParams) => value?.trim())
+  hostname?: string;
 }

apps/server/src/core/auth/services/auth.service.ts

@@ -22,7 +22,7 @@ import { ForgotPasswordDto } from '../dto/forgot-password.dto';
 import ForgotPasswordEmail from '@docmost/transactional/emails/forgot-password-email';
 import { UserTokenRepo } from '@docmost/db/repos/user-token/user-token.repo';
 import { PasswordResetDto } from '../dto/password-reset.dto';
-import { UserToken, Workspace } from '@docmost/db/types/entity.types';
+import { User, UserToken, Workspace } from '@docmost/db/types/entity.types';
 import { UserTokenType } from '../auth.constants';
 import { KyselyDB } from '@docmost/db/types/kysely.types';
 import { InjectKysely } from 'nestjs-kysely';
@@ -222,9 +222,9 @@ export class AuthService {
     }
   }
 
-  async getCollabToken(userId: string, workspaceId: string) {
+  async getCollabToken(user: User, workspaceId: string) {
     const token = await this.tokenService.generateCollabToken(
-      userId,
+      user,
       workspaceId,
     );
     return { token };

apps/server/src/core/auth/services/signup.service.ts

@@ -92,7 +92,8 @@ export class SignupService {
 
         // create workspace with full setup
         const workspaceData: CreateWorkspaceDto = {
-          name: createAdminUserDto.workspaceName,
+          name: createAdminUserDto.workspaceName || 'My workspace',
+          hostname: createAdminUserDto.hostname,
         };
 
         workspace = await this.workspaceService.create(

apps/server/src/core/auth/services/token.service.ts

@@ -22,7 +22,7 @@ export class TokenService {
   ) {}
 
   async generateAccessToken(user: User): Promise<string> {
-    if (user.deletedAt) {
+    if (user.deactivatedAt || user.deletedAt) {
       throw new ForbiddenException();
     }
 
@@ -35,12 +35,13 @@ export class TokenService {
     return this.jwtService.sign(payload);
   }
 
-  async generateCollabToken(
-    userId: string,
-    workspaceId: string,
-  ): Promise<string> {
+  async generateCollabToken(user: User, workspaceId: string): Promise<string> {
+    if (user.deactivatedAt || user.deletedAt) {
+      throw new ForbiddenException();
+    }
+
     const payload: JwtCollabPayload = {
-      sub: userId,
+      sub: user.id,
       workspaceId,
       type: JwtType.COLLAB,
     };

apps/server/src/core/auth/strategies/jwt.strategy.ts

@@ -42,7 +42,7 @@ export class JwtStrategy extends PassportStrategy(Strategy, 'jwt') {
     }
     const user = await this.userRepo.findById(payload.sub, payload.workspaceId);
 
-    if (!user || user.deletedAt) {
+    if (!user || user.deactivatedAt || user.deletedAt) {
       throw new UnauthorizedException();
     }
 

apps/server/src/core/page/page.controller.ts

@@ -146,7 +146,6 @@ export class PageController {
     return this.pageService.getRecentPages(user.id, pagination);
   }
 
-  // TODO: scope to workspaces
   @HttpCode(HttpStatus.OK)
   @Post('/history')
   async getPageHistory(
@@ -155,6 +154,10 @@ export class PageController {
     @AuthUser() user: User,
   ) {
     const page = await this.pageRepo.findById(dto.pageId);
+    if (!page) {
+      throw new NotFoundException('Page not found');
+    }
+
     const ability = await this.spaceAbility.createForUser(user, page.spaceId);
     if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
       throw new ForbiddenException();

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

@@ -140,7 +140,7 @@ export class SearchService {
     if (suggestion.includeUsers) {
       users = await this.db
         .selectFrom('users')
-        .select(['id', 'name', 'avatarUrl'])
+        .select(['id', 'name', 'email', 'avatarUrl'])
         .where((eb) => eb(sql`LOWER(users.name)`, 'like', `%${query}%`))
         .where('workspaceId', '=', workspaceId)
         .where('deletedAt', 'is', null)

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

@@ -1,5 +1,13 @@
 import { OmitType, PartialType } from '@nestjs/mapped-types';
-import { IsBoolean, IsOptional, IsString } from 'class-validator';
+import {
+  IsBoolean,
+  IsIn,
+  IsNotEmpty,
+  IsOptional,
+  IsString,
+  MaxLength,
+  MinLength,
+} from 'class-validator';
 import { CreateUserDto } from '../../auth/dto/create-user.dto';
 
 export class UpdateUserDto extends PartialType(
@@ -13,7 +21,18 @@ export class UpdateUserDto extends PartialType(
   @IsBoolean()
   fullPageWidth: boolean;
 
+  @IsOptional()
+  @IsString()
+  @IsIn(['read', 'edit'])
+  pageEditMode: string;
+
   @IsOptional()
   @IsString()
   locale: string;
+
+  @IsOptional()
+  @MinLength(8)
+  @MaxLength(70)
+  @IsString()
+  confirmPassword: string;
 }

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

@@ -50,6 +50,6 @@ export class UserController {
     @AuthUser() user: User,
     @AuthWorkspace() workspace: Workspace,
   ) {
-    return this.userService.update(updateUserDto, user.id, workspace.id);
+    return this.userService.update(updateUserDto, user.id, workspace);
   }
 }

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

@@ -3,8 +3,12 @@ import {
   BadRequestException,
   Injectable,
   NotFoundException,
+  UnauthorizedException,
 } from '@nestjs/common';
 import { UpdateUserDto } from './dto/update-user.dto';
+import { comparePasswordHash } from 'src/common/helpers/utils';
+import { Workspace } from '@docmost/db/types/entity.types';
+import { validateSsoEnforcement } from '../auth/auth.util';
 
 @Injectable()
 export class UserService {
@@ -17,9 +21,14 @@ export class UserService {
   async update(
     updateUserDto: UpdateUserDto,
     userId: string,
-    workspaceId: string,
+    workspace: Workspace,
   ) {
-    const user = await this.userRepo.findById(userId, workspaceId);
+    const includePassword =
+      updateUserDto.email != null && updateUserDto.confirmPassword != null;
+
+    const user = await this.userRepo.findById(userId, workspace.id, {
+      includePassword,
+    });
 
     if (!user) {
       throw new NotFoundException('User not found');
@@ -34,14 +43,40 @@ export class UserService {
       );
     }
 
+    if (typeof updateUserDto.pageEditMode !== 'undefined') {
+      return this.userRepo.updatePreference(
+        userId,
+        'pageEditMode',
+        updateUserDto.pageEditMode.toLowerCase(),
+      );
+    }
+
     if (updateUserDto.name) {
       user.name = updateUserDto.name;
     }
 
     if (updateUserDto.email && user.email != updateUserDto.email) {
-      if (await this.userRepo.findByEmail(updateUserDto.email, workspaceId)) {
+      validateSsoEnforcement(workspace);
+
+      if (!updateUserDto.confirmPassword) {
+        throw new BadRequestException(
+          'You must provide a password to change your email',
+        );
+      }
+
+      const isPasswordMatch = await comparePasswordHash(
+        updateUserDto.confirmPassword,
+        user.password,
+      );
+
+      if (!isPasswordMatch) {
+        throw new BadRequestException('You must provide the correct password to change your email');
+      }
+
+      if (await this.userRepo.findByEmail(updateUserDto.email, workspace.id)) {
         throw new BadRequestException('A user with this email already exists');
       }
+
       user.email = updateUserDto.email;
     }
 
@@ -53,7 +88,9 @@ export class UserService {
       user.locale = updateUserDto.locale;
     }
 
-    await this.userRepo.updateUser(updateUserDto, userId, workspaceId);
+    delete updateUserDto.confirmPassword;
+
+    await this.userRepo.updateUser(updateUserDto, userId, workspace.id);
     return user;
   }
 }

apps/server/src/core/workspace/controllers/workspace.controller.ts

@@ -29,9 +29,7 @@ import WorkspaceAbilityFactory from '../../casl/abilities/workspace-ability.fact
 import {
   WorkspaceCaslAction,
   WorkspaceCaslSubject,
-} from '../../casl/interfaces/workspace-ability.type';
-import { addDays } from 'date-fns';
-import { FastifyReply } from 'fastify';
+} from '../../casl/interfaces/workspace-ability.type';import { FastifyReply } from 'fastify';
 import { EnvironmentService } from '../../../integrations/environment/environment.service';
 import { CheckHostnameDto } from '../dto/check-hostname.dto';
 import { RemoveWorkspaceUserDto } from '../dto/remove-workspace-user.dto';
@@ -180,10 +178,13 @@ export class WorkspaceController {
   @Public()
   @HttpCode(HttpStatus.OK)
   @Post('invites/info')
-  async getInvitationById(@Body() dto: InvitationIdDto, @Req() req: any) {
+  async getInvitationById(
+    @Body() dto: InvitationIdDto,
+    @AuthWorkspace() workspace: Workspace,
+  ) {
     return this.workspaceInvitationService.getInvitationById(
       dto.invitationId,
-      req.raw.workspaceId,
+      workspace,
     );
   }
 
@@ -253,18 +254,18 @@ export class WorkspaceController {
   @Post('invites/accept')
   async acceptInvite(
     @Body() acceptInviteDto: AcceptInviteDto,
-    @Req() req: any,
+    @AuthWorkspace() workspace: Workspace,
     @Res({ passthrough: true }) res: FastifyReply,
   ) {
     const authToken = await this.workspaceInvitationService.acceptInvitation(
       acceptInviteDto,
-      req.raw.workspaceId,
+      workspace,
     );
 
     res.setCookie('authToken', authToken, {
       httpOnly: true,
       path: '/',
-      expires: addDays(new Date(), 30),
+      expires: this.environmentService.getCookieExpiresIn(),
       secure: this.environmentService.isHttps(),
     });
   }

apps/server/src/core/workspace/services/workspace-invitation.service.ts

@@ -28,6 +28,10 @@ import { InjectQueue } from '@nestjs/bullmq';
 import { QueueJob, QueueName } from '../../../integrations/queue/constants';
 import { Queue } from 'bullmq';
 import { EnvironmentService } from '../../../integrations/environment/environment.service';
+import {
+  validateAllowedEmail,
+  validateSsoEnforcement,
+} from '../../auth/auth.util';
 
 @Injectable()
 export class WorkspaceInvitationService {
@@ -63,19 +67,19 @@ export class WorkspaceInvitationService {
     return result;
   }
 
-  async getInvitationById(invitationId: string, workspaceId: string) {
+  async getInvitationById(invitationId: string, workspace: Workspace) {
     const invitation = await this.db
       .selectFrom('workspaceInvitations')
       .select(['id', 'email', 'createdAt'])
       .where('id', '=', invitationId)
-      .where('workspaceId', '=', workspaceId)
+      .where('workspaceId', '=', workspace.id)
       .executeTakeFirst();
 
     if (!invitation) {
       throw new NotFoundException('Invitation not found');
     }
 
-    return invitation;
+    return { ...invitation, enforceSso: workspace.enforceSso };
   }
 
   async getInvitationTokenById(invitationId: string, workspaceId: string) {
@@ -141,6 +145,10 @@ export class WorkspaceInvitationService {
           groupIds: validGroups?.map((group: Partial<Group>) => group.id),
         }));
 
+        if (invitesToInsert.length < 1) {
+          return;
+        }
+
         invites = await trx
           .insertInto('workspaceInvitations')
           .values(invitesToInsert)
@@ -169,12 +177,12 @@ export class WorkspaceInvitationService {
     }
   }
 
-  async acceptInvitation(dto: AcceptInviteDto, workspaceId: string) {
+  async acceptInvitation(dto: AcceptInviteDto, workspace: Workspace) {
     const invitation = await this.db
       .selectFrom('workspaceInvitations')
       .selectAll()
       .where('id', '=', dto.invitationId)
-      .where('workspaceId', '=', workspaceId)
+      .where('workspaceId', '=', workspace.id)
       .executeTakeFirst();
 
     if (!invitation) {
@@ -185,6 +193,9 @@ export class WorkspaceInvitationService {
       throw new BadRequestException('Invalid invitation token');
     }
 
+    validateSsoEnforcement(workspace);
+    validateAllowedEmail(invitation.email, workspace);
+
     let newUser: User;
 
     try {
@@ -197,7 +208,7 @@ export class WorkspaceInvitationService {
             password: dto.password,
             role: invitation.role,
             invitedById: invitation.invitedById,
-            workspaceId: workspaceId,
+            workspaceId: workspace.id,
           },
           trx,
         );
@@ -205,7 +216,7 @@ export class WorkspaceInvitationService {
         // add user to default group
         await this.groupUserRepo.addUserToDefaultGroup(
           newUser.id,
-          workspaceId,
+          workspace.id,
           trx,
         );
 
@@ -215,7 +226,7 @@ export class WorkspaceInvitationService {
             .selectFrom('groups')
             .select(['id', 'name'])
             .where('groups.id', 'in', invitation.groupIds)
-            .where('groups.workspaceId', '=', workspaceId)
+            .where('groups.workspaceId', '=', workspace.id)
             .execute();
 
           if (validGroups && validGroups.length > 0) {
@@ -256,7 +267,7 @@ export class WorkspaceInvitationService {
     // notify the inviter
     const invitedByUser = await this.userRepo.findById(
       invitation.invitedById,
-      workspaceId,
+      workspace.id,
     );
 
     if (invitedByUser) {
@@ -273,7 +284,9 @@ export class WorkspaceInvitationService {
     }
 
     if (this.environmentService.isCloud()) {
-      await this.billingQueue.add(QueueJob.STRIPE_SEATS_SYNC, { workspaceId });
+      await this.billingQueue.add(QueueJob.STRIPE_SEATS_SYNC, {
+        workspaceId: workspace.id,
+      });
     }
 
     return this.tokenService.generateAccessToken(newUser);

apps/server/src/core/workspace/services/workspace.service.ts

@@ -32,6 +32,7 @@ import { AttachmentType } from 'src/core/attachment/attachment.constants';
 import { InjectQueue } from '@nestjs/bullmq';
 import { QueueJob, QueueName } from '../../../integrations/queue/constants';
 import { Queue } from 'bullmq';
+import { generateRandomSuffixNumbers } from '../../../common/helpers';
 
 @Injectable()
 export class WorkspaceService {
@@ -377,24 +378,20 @@ export class WorkspaceService {
     name: string,
     trx?: KyselyTransaction,
   ): Promise<string> {
-    const generateRandomSuffix = (length: number) =>
-      Math.random()
-        .toFixed(length)
-        .substring(2, 2 + length);
-
     let subdomain = name
       .toLowerCase()
-      .replace(/[^a-z0-9]/g, '')
-      .substring(0, 20);
+      .replace(/[^a-z0-9-]/g, '')
+      .substring(0, 20)
+      .replace(/^-+|-+$/g, ''); //remove any hyphen at the start or end
     // Ensure we leave room for a random suffix.
     const maxSuffixLength = 6;
 
     if (subdomain.length < 4) {
-      subdomain = `${subdomain}-${generateRandomSuffix(maxSuffixLength)}`;
+      subdomain = `${subdomain}-${generateRandomSuffixNumbers(maxSuffixLength)}`;
     }
 
     if (DISALLOWED_HOSTNAMES.includes(subdomain)) {
-      subdomain = `workspace-${generateRandomSuffix(maxSuffixLength)}`;
+      subdomain = `workspace-${generateRandomSuffixNumbers(maxSuffixLength)}`;
     }
 
     let uniqueHostname = subdomain;
@@ -408,7 +405,7 @@ export class WorkspaceService {
         break;
       }
       // Append a random suffix and retry.
-      const randomSuffix = generateRandomSuffix(maxSuffixLength);
+      const randomSuffix = generateRandomSuffixNumbers(maxSuffixLength);
       uniqueHostname = `${subdomain}-${randomSuffix}`.substring(0, 25);
     }
 

apps/server/src/database/migrations/20250623T215045-more-billing-columns.ts

@@ -0,0 +1,23 @@
+import { type Kysely } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await db.schema
+    .alterTable('billing')
+    .addColumn('billing_scheme', 'varchar', (col) => col)
+    .addColumn('tiered_up_to', 'varchar', (col) => col)
+    .addColumn('tiered_flat_amount', 'int8', (col) => col)
+    .addColumn('tiered_unit_amount', 'int8', (col) => col)
+    .addColumn('plan_name', 'varchar', (col) => col)
+    .execute();
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await db.schema
+    .alterTable('billing')
+    .dropColumn('billing_scheme')
+    .dropColumn('tiered_up_to')
+    .dropColumn('tiered_flat_amount')
+    .dropColumn('tiered_unit_amount')
+    .dropColumn('plan_name')
+    .execute();
+}

apps/server/src/database/types/db.d.ts

@@ -84,6 +84,7 @@ export interface Backlinks {
 
 export interface Billing {
   amount: Int8 | null;
+  billingScheme: string | null;
   cancelAt: Timestamp | null;
   cancelAtPeriodEnd: boolean | null;
   canceledAt: Timestamp | null;
@@ -96,6 +97,7 @@ export interface Billing {
   metadata: Json | null;
   periodEndAt: Timestamp | null;
   periodStartAt: Timestamp;
+  planName: string | null;
   quantity: Int8 | null;
   status: string;
   stripeCustomerId: string | null;
@@ -103,6 +105,9 @@ export interface Billing {
   stripePriceId: string | null;
   stripeProductId: string | null;
   stripeSubscriptionId: string;
+  tieredFlatAmount: Int8 | null;
+  tieredUnitAmount: Int8 | null;
+  tieredUpTo: string | null;
   updatedAt: Generated<Timestamp>;
   workspaceId: string;
 }

apps/server/src/integrations/environment/environment.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
+import ms, { StringValue } from 'ms';
 
 @Injectable()
 export class EnvironmentService {
@@ -56,7 +57,18 @@ export class EnvironmentService {
   }
 
   getJwtTokenExpiresIn(): string {
-    return this.configService.get<string>('JWT_TOKEN_EXPIRES_IN', '30d');
+    return this.configService.get<string>('JWT_TOKEN_EXPIRES_IN', '90d');
+  }
+
+  getCookieExpiresIn(): Date {
+    const expiresInStr = this.getJwtTokenExpiresIn();
+    let msUntilExpiry: number;
+    try {
+      msUntilExpiry = ms(expiresInStr as StringValue);
+    } catch (err) {
+      msUntilExpiry = ms('90d');
+    }
+    return new Date(Date.now() + msUntilExpiry);
   }
 
   getStorageDriver(): string {
@@ -193,4 +205,12 @@ export class EnvironmentService {
       .toLowerCase();
     return disable === 'true';
   }
+
+  getPostHogHost(): string {
+    return this.configService.get<string>('POSTHOG_HOST');
+  }
+
+  getPostHogKey(): string {
+    return this.configService.get<string>('POSTHOG_KEY');
+  }
 }

apps/server/src/integrations/static/static.module.ts

@@ -37,6 +37,8 @@ export class StaticModule implements OnModuleInit {
         CLOUD: this.environmentService.isCloud(),
         FILE_UPLOAD_SIZE_LIMIT:
           this.environmentService.getFileUploadSizeLimit(),
+        FILE_IMPORT_SIZE_LIMIT:
+          this.environmentService.getFileImportSizeLimit(),
         DRAWIO_URL: this.environmentService.getDrawioUrl(),
         SUBDOMAIN_HOST: this.environmentService.isCloud()
           ? this.environmentService.getSubdomainHost()
@@ -45,6 +47,8 @@ export class StaticModule implements OnModuleInit {
         BILLING_TRIAL_DAYS: this.environmentService.isCloud()
           ? this.environmentService.getBillingTrialDays()
           : undefined,
+        POSTHOG_HOST: this.environmentService.getPostHogHost(),
+        POSTHOG_KEY: this.environmentService.getPostHogKey(),
       };
 
       const windowScriptContent = `<script>window.CONFIG=${JSON.stringify(configString)};</script>`;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "docmost",
   "homepage": "https://docmost.com",
-  "version": "0.20.4",
+  "version": "0.21.0",
   "private": true,
   "scripts": {
     "build": "nx run-many -t build",
@@ -69,6 +69,7 @@
     "jszip": "^3.10.1",
     "linkifyjs": "^4.2.0",
     "marked": "13.0.3",
+    "ms": "3.0.0-canary.1",
     "uuid": "^11.1.0",
     "y-indexeddb": "^9.0.12",
     "yjs": "^13.6.27"

packages/editor-ext/src/index.ts

@@ -17,4 +17,5 @@ export * from "./lib/excalidraw";
 export * from "./lib/embed";
 export * from "./lib/mention";
 export * from "./lib/markdown";
+export * from "./lib/search-and-replace";
 export * from "./lib/embed-provider";

packages/editor-ext/src/lib/custom-code-block.ts

@@ -35,6 +35,42 @@ export const CustomCodeBlock = CodeBlockLowlight.extend<CustomCodeBlockOptions>(
             return true;
           }
         },
+        "Mod-a": () => {
+          if (this.editor.isActive("codeBlock")) {
+            const { state } = this.editor;
+            const { $from } = state.selection;
+            
+            let codeBlockNode = null;
+            let codeBlockPos = null;
+            let depth = 0;
+            
+            for (depth = $from.depth; depth > 0; depth--) {
+              const node = $from.node(depth);
+              if (node.type.name === "codeBlock") {
+                codeBlockNode = node;
+                codeBlockPos = $from.start(depth) - 1;
+                break;
+              }
+            }
+            
+            if (codeBlockNode && codeBlockPos !== null) {
+              const codeBlockStart = codeBlockPos;
+              const codeBlockEnd = codeBlockPos + codeBlockNode.nodeSize;
+              
+              const contentStart = codeBlockStart + 1;
+              const contentEnd = codeBlockEnd - 1;
+              
+              this.editor.commands.setTextSelection({
+                from: contentStart,
+                to: contentEnd,
+              });
+              
+              return true;
+            }
+          }
+          
+          return false;
+        },
       };
     },
 

packages/editor-ext/src/lib/search-and-replace/index.ts

@@ -0,0 +1,3 @@
+import { SearchAndReplace } from './search-and-replace'
+export * from './search-and-replace'
+export default SearchAndReplace

packages/editor-ext/src/lib/search-and-replace/search-and-replace.ts

@@ -0,0 +1,455 @@
+/***
+ MIT License
+ Copyright (c) 2023 - 2024 Jeet Mandaliya (Github Username: sereneinserenade)
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+ ***/
+
+import { Extension, Range, type Dispatch } from "@tiptap/core";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import {
+  Plugin,
+  PluginKey,
+  type EditorState,
+  type Transaction,
+} from "@tiptap/pm/state";
+import { Node as PMNode, Mark } from "@tiptap/pm/model";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    search: {
+      /**
+       * @description Set search term in extension.
+       */
+      setSearchTerm: (searchTerm: string) => ReturnType;
+      /**
+       * @description Set replace term in extension.
+       */
+      setReplaceTerm: (replaceTerm: string) => ReturnType;
+      /**
+       * @description Set case sensitivity in extension.
+       */
+      setCaseSensitive: (caseSensitive: boolean) => ReturnType;
+      /**
+       * @description Reset current search result to first instance.
+       */
+      resetIndex: () => ReturnType;
+      /**
+       * @description Find next instance of search result.
+       */
+      nextSearchResult: () => ReturnType;
+      /**
+       * @description Find previous instance of search result.
+       */
+      previousSearchResult: () => ReturnType;
+      /**
+       * @description Replace first instance of search result with given replace term.
+       */
+      replace: () => ReturnType;
+      /**
+       * @description Replace all instances of search result with given replace term.
+       */
+      replaceAll: () => ReturnType;
+      /**
+       * @description Find selected instance of search result.
+       */
+      selectCurrentItem: () => ReturnType;
+    };
+  }
+}
+
+interface TextNodesWithPosition {
+  text: string;
+  pos: number;
+}
+
+const getRegex = (
+  s: string,
+  disableRegex: boolean,
+  caseSensitive: boolean,
+): RegExp => {
+  return RegExp(
+    disableRegex ? s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") : s,
+    caseSensitive ? "gu" : "gui",
+  );
+};
+
+interface ProcessedSearches {
+  decorationsToReturn: DecorationSet;
+  results: Range[];
+}
+
+function processSearches(
+  doc: PMNode,
+  searchTerm: RegExp,
+  searchResultClass: string,
+  resultIndex: number,
+): ProcessedSearches {
+  const decorations: Decoration[] = [];
+  const results: Range[] = [];
+
+  let textNodesWithPosition: TextNodesWithPosition[] = [];
+  let index = 0;
+
+  if (!searchTerm) {
+    return {
+      decorationsToReturn: DecorationSet.empty,
+      results: [],
+    };
+  }
+
+  doc?.descendants((node, pos) => {
+    if (node.isText) {
+      if (textNodesWithPosition[index]) {
+        textNodesWithPosition[index] = {
+          text: textNodesWithPosition[index].text + node.text,
+          pos: textNodesWithPosition[index].pos,
+        };
+      } else {
+        textNodesWithPosition[index] = {
+          text: `${node.text}`,
+          pos,
+        };
+      }
+    } else {
+      index += 1;
+    }
+  });
+
+  textNodesWithPosition = textNodesWithPosition.filter(Boolean);
+
+  for (const element of textNodesWithPosition) {
+    const { text, pos } = element;
+    const matches = Array.from(text.matchAll(searchTerm)).filter(
+      ([matchText]) => matchText.trim(),
+    );
+
+    for (const m of matches) {
+      if (m[0] === "") break;
+
+      if (m.index !== undefined) {
+        results.push({
+          from: pos + m.index,
+          to: pos + m.index + m[0].length,
+        });
+      }
+    }
+  }
+
+  for (let i = 0; i < results.length; i += 1) {
+    const r = results[i];
+    const className =
+      i === resultIndex
+        ? `${searchResultClass} ${searchResultClass}-current`
+        : searchResultClass;
+    const decoration: Decoration = Decoration.inline(r.from, r.to, {
+      class: className,
+    });
+
+    decorations.push(decoration);
+  }
+
+  return {
+    decorationsToReturn: DecorationSet.create(doc, decorations),
+    results,
+  };
+}
+
+const replace = (
+  replaceTerm: string,
+  results: Range[],
+  resultIndex: number,
+  { state, dispatch }: { state: EditorState; dispatch: Dispatch },
+) => {
+  const firstResult = results[resultIndex];
+
+  if (!firstResult) return;
+
+  const { from, to } = results[resultIndex];
+
+  if (dispatch) {
+    const tr = state.tr;
+    
+    // Get all marks that span the text being replaced
+    const marksSet = new Set<Mark>();
+    state.doc.nodesBetween(from, to, (node) => {
+      if (node.isText && node.marks) {
+        node.marks.forEach(mark => marksSet.add(mark));
+      }
+    });
+    
+    const marks = Array.from(marksSet);
+    
+    // Delete the old text and insert new text with preserved marks
+    tr.delete(from, to);
+    tr.insert(from, state.schema.text(replaceTerm, marks));
+    
+    dispatch(tr);
+  }
+};
+
+const replaceAll = (
+  replaceTerm: string,
+  results: Range[],
+  { tr, dispatch }: { tr: Transaction; dispatch: Dispatch },
+) => {
+  const resultsCopy = results.slice();
+
+  if (!resultsCopy.length) return;
+
+  // Process replacements in reverse order to avoid position shifting issues
+  for (let i = resultsCopy.length - 1; i >= 0; i -= 1) {
+    const { from, to } = resultsCopy[i];
+    
+    // Get all marks that span the text being replaced
+    const marksSet = new Set<Mark>();
+    tr.doc.nodesBetween(from, to, (node) => {
+      if (node.isText && node.marks) {
+        node.marks.forEach(mark => marksSet.add(mark));
+      }
+    });
+    
+    const marks = Array.from(marksSet);
+    
+    // Delete and insert with preserved marks
+    tr.delete(from, to);
+    tr.insert(from, tr.doc.type.schema.text(replaceTerm, marks));
+  }
+
+  dispatch(tr);
+};
+
+export const searchAndReplacePluginKey = new PluginKey(
+  "searchAndReplacePlugin",
+);
+
+export interface SearchAndReplaceOptions {
+  searchResultClass: string;
+  disableRegex: boolean;
+}
+
+export interface SearchAndReplaceStorage {
+  searchTerm: string;
+  replaceTerm: string;
+  results: Range[];
+  lastSearchTerm: string;
+  caseSensitive: boolean;
+  lastCaseSensitive: boolean;
+  resultIndex: number;
+  lastResultIndex: number;
+}
+
+export const SearchAndReplace = Extension.create<
+  SearchAndReplaceOptions,
+  SearchAndReplaceStorage
+>({
+  name: "searchAndReplace",
+
+  addOptions() {
+    return {
+      searchResultClass: "search-result",
+      disableRegex: true,
+    };
+  },
+
+  addStorage() {
+    return {
+      searchTerm: "",
+      replaceTerm: "",
+      results: [],
+      lastSearchTerm: "",
+      caseSensitive: false,
+      lastCaseSensitive: false,
+      resultIndex: 0,
+      lastResultIndex: 0,
+    };
+  },
+
+  addCommands() {
+    return {
+      setSearchTerm:
+        (searchTerm: string) =>
+        ({ editor }) => {
+          editor.storage.searchAndReplace.searchTerm = searchTerm;
+
+          return false;
+        },
+      setReplaceTerm:
+        (replaceTerm: string) =>
+        ({ editor }) => {
+          editor.storage.searchAndReplace.replaceTerm = replaceTerm;
+
+          return false;
+        },
+      setCaseSensitive:
+        (caseSensitive: boolean) =>
+        ({ editor }) => {
+          editor.storage.searchAndReplace.caseSensitive = caseSensitive;
+
+          return false;
+        },
+      resetIndex:
+        () =>
+        ({ editor }) => {
+          editor.storage.searchAndReplace.resultIndex = 0;
+
+          return false;
+        },
+      nextSearchResult:
+        () =>
+        ({ editor }) => {
+          const { results, resultIndex } = editor.storage.searchAndReplace;
+
+          const nextIndex = resultIndex + 1;
+
+          if (results[nextIndex]) {
+            editor.storage.searchAndReplace.resultIndex = nextIndex;
+          } else {
+            editor.storage.searchAndReplace.resultIndex = 0;
+          }
+
+          return false;
+        },
+      previousSearchResult:
+        () =>
+        ({ editor }) => {
+          const { results, resultIndex } = editor.storage.searchAndReplace;
+
+          const prevIndex = resultIndex - 1;
+
+          if (results[prevIndex]) {
+            editor.storage.searchAndReplace.resultIndex = prevIndex;
+          } else {
+            editor.storage.searchAndReplace.resultIndex = results.length - 1;
+          }
+
+          return false;
+        },
+      replace:
+        () =>
+        ({ editor, state, dispatch }) => {
+          const { replaceTerm, results, resultIndex } =
+            editor.storage.searchAndReplace;
+
+          replace(replaceTerm, results, resultIndex, { state, dispatch });
+
+          // After replace, adjust index if needed
+          // The results will be recalculated by the plugin, but we need to ensure
+          // the index doesn't exceed the new bounds
+          setTimeout(() => {
+            const newResultsLength = editor.storage.searchAndReplace.results.length;
+            if (newResultsLength > 0 && editor.storage.searchAndReplace.resultIndex >= newResultsLength) {
+              // Keep the same position if possible, otherwise go to the last result
+              editor.storage.searchAndReplace.resultIndex = Math.min(resultIndex, newResultsLength - 1);
+            }
+          }, 0);
+
+          return false;
+        },
+      replaceAll:
+        () =>
+        ({ editor, tr, dispatch }) => {
+          const { replaceTerm, results } = editor.storage.searchAndReplace;
+
+          replaceAll(replaceTerm, results, { tr, dispatch });
+
+          return false;
+        },
+      selectCurrentItem:
+        () =>
+        ({ editor }) => {
+          const { results } = editor.storage.searchAndReplace;
+          for (let i = 0; i < results.length; i++) {
+            if (
+              results[i].from == editor.state.selection.from &&
+              results[i].to == editor.state.selection.to
+            ) {
+              editor.storage.searchAndReplace.resultIndex = i;
+            }
+          }
+          return false;
+        },
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    const { searchResultClass, disableRegex } = this.options;
+
+    const setLastSearchTerm = (t: string) =>
+      (editor.storage.searchAndReplace.lastSearchTerm = t);
+    const setLastCaseSensitive = (t: boolean) =>
+      (editor.storage.searchAndReplace.lastCaseSensitive = t);
+    const setLastResultIndex = (t: number) =>
+      (editor.storage.searchAndReplace.lastResultIndex = t);
+
+    return [
+      new Plugin({
+        key: searchAndReplacePluginKey,
+        state: {
+          init: () => DecorationSet.empty,
+          apply({ doc, docChanged }, oldState) {
+            const {
+              searchTerm,
+              lastSearchTerm,
+              caseSensitive,
+              lastCaseSensitive,
+              resultIndex,
+              lastResultIndex,
+            } = editor.storage.searchAndReplace;
+
+            if (
+              !docChanged &&
+              lastSearchTerm === searchTerm &&
+              lastCaseSensitive === caseSensitive &&
+              lastResultIndex === resultIndex
+            )
+              return oldState;
+
+            setLastSearchTerm(searchTerm);
+            setLastCaseSensitive(caseSensitive);
+            setLastResultIndex(resultIndex);
+
+            if (!searchTerm) {
+              editor.storage.searchAndReplace.results = [];
+              return DecorationSet.empty;
+            }
+
+            const { decorationsToReturn, results } = processSearches(
+              doc,
+              getRegex(searchTerm, disableRegex, caseSensitive),
+              searchResultClass,
+              resultIndex,
+            );
+
+            editor.storage.searchAndReplace.results = results;
+
+            return decorationsToReturn;
+          },
+        },
+        props: {
+          decorations(state) {
+            return this.getState(state);
+          },
+        },
+      }),
+    ];
+  },
+});
+
+export default SearchAndReplace;

packages/editor-ext/src/lib/table/cell.ts

@@ -3,4 +3,35 @@ import { TableCell as TiptapTableCell } from "@tiptap/extension-table-cell";
 export const TableCell = TiptapTableCell.extend({
   name: "tableCell",
   content: "paragraph+",
+  
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      backgroundColor: {
+        default: null,
+        parseHTML: (element) => element.style.backgroundColor || null,
+        renderHTML: (attributes) => {
+          if (!attributes.backgroundColor) {
+            return {};
+          }
+          return {
+            style: `background-color: ${attributes.backgroundColor}`,
+            'data-background-color': attributes.backgroundColor,
+          };
+        },
+      },
+      backgroundColorName: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('data-background-color-name') || null,
+        renderHTML: (attributes) => {
+          if (!attributes.backgroundColorName) {
+            return {};
+          }
+          return {
+            'data-background-color-name': attributes.backgroundColorName.toLowerCase(),
+          };
+        },
+      },
+    };
+  },
 });

packages/editor-ext/src/lib/table/header.ts

@@ -0,0 +1,37 @@
+import { TableHeader as TiptapTableHeader } from "@tiptap/extension-table-header";
+
+export const TableHeader = TiptapTableHeader.extend({
+  name: "tableHeader",
+  content: "paragraph+",
+  
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      backgroundColor: {
+        default: null,
+        parseHTML: (element) => element.style.backgroundColor || null,
+        renderHTML: (attributes) => {
+          if (!attributes.backgroundColor) {
+            return {};
+          }
+          return {
+            style: `background-color: ${attributes.backgroundColor}`,
+            'data-background-color': attributes.backgroundColor,
+          };
+        },
+      },
+      backgroundColorName: {
+        default: null,
+        parseHTML: (element) => element.getAttribute('data-background-color-name') || null,
+        renderHTML: (attributes) => {
+          if (!attributes.backgroundColorName) {
+            return {};
+          }
+          return {
+            'data-background-color-name': attributes.backgroundColorName.toLowerCase(),
+          };
+        },
+      },
+    };
+  },
+});

packages/editor-ext/src/lib/table/index.ts

@@ -1,2 +1,3 @@
 export * from "./row";
 export * from "./cell";
+export * from "./header";

pnpm-lock.yaml

@@ -169,6 +169,9 @@ importers:
       marked:
         specifier: 13.0.3
         version: 13.0.3
+      ms:
+        specifier: 3.0.0-canary.1
+        version: 3.0.0-canary.1
       uuid:
         specifier: ^11.1.0
         version: 11.1.0
@@ -245,6 +248,9 @@ importers:
       '@tiptap/extension-character-count':
         specifier: ^2.10.3
         version: 2.14.0(@tiptap/core@2.14.0(@tiptap/pm@2.14.0))(@tiptap/pm@2.14.0)
+      alfaaz:
+        specifier: ^1.1.0
+        version: 1.1.0
       axios:
         specifier: ^1.9.0
         version: 1.9.0
@@ -290,6 +296,9 @@ importers:
       mitt:
         specifier: ^3.0.1
         version: 3.0.1
+      posthog-js:
+        specifier: ^1.255.1
+        version: 1.255.1
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -4677,6 +4686,9 @@ packages:
   ajv@8.17.1:
     resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
+  alfaaz@1.1.0:
+    resolution: {integrity: sha512-J/P07R41APslK7NmD5303bwStN8jpRA4DdvtLeAr1Jhfj6XWGrASUWI0G6jbWjJAZyw3Lu1Pb4J8rsM/cb+xDQ==}
+
   ansi-align@3.0.1:
     resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
 
@@ -5204,6 +5216,9 @@ packages:
   core-js-compat@3.35.0:
     resolution: {integrity: sha512-5blwFAddknKeNgsjBzilkdQ0+YK8L1PfqPYq40NOYMYFSS38qj+hpTcLLWwpIwA2A5bje/x5jmVn2tzUMg9IVw==}
 
+  core-js@3.43.0:
+    resolution: {integrity: sha512-N6wEbTTZSYOY2rYAn85CuvWWkCK6QweMn7/4Nr3w+gDBeBhk/x4EJeY6FPo4QzDoJZxVTv8U7CMvgWk6pOHHqA==}
+
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -5979,6 +5994,9 @@ packages:
       picomatch:
         optional: true
 
+  fflate@0.4.8:
+    resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
+
   fflate@0.8.2:
     resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
 
@@ -7358,6 +7376,10 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  ms@3.0.0-canary.1:
+    resolution: {integrity: sha512-kh8ARjh8rMN7Du2igDRO9QJnqCb2xYTJxyQYK7vJJS4TvLLmsbyhiKpSW+t+y26gyOyMd0riphX0GeWKU3ky5g==}
+    engines: {node: '>=12.13'}
+
   msgpackr-extract@3.0.2:
     resolution: {integrity: sha512-SdzXp4kD/Qf8agZ9+iTu6eql0m3kWm1A2y1hkpTeVNENutaB0BwHlSvAIaMxwntmRUAUjon2V4L8Z/njd0Ct8A==}
     hasBin: true
@@ -7942,9 +7964,23 @@ packages:
   postgres-range@1.1.4:
     resolution: {integrity: sha512-i/hbxIE9803Alj/6ytL7UHQxRvZkI9O4Sy+J3HGc4F4oo/2eQAjTSNJ0bfxyse3bH0nuVesCk+3IRLaMtG3H6w==}
 
+  posthog-js@1.255.1:
+    resolution: {integrity: sha512-KMh0o9MhORhEZVjXpktXB5rJ8PfDk+poqBoTSoLzWgNjhJf6D8jcyB9jUMA6vVPfn4YeepVX5NuclDRqOwr5Mw==}
+    peerDependencies:
+      '@rrweb/types': 2.0.0-alpha.17
+      rrweb-snapshot: 2.0.0-alpha.17
+    peerDependenciesMeta:
+      '@rrweb/types':
+        optional: true
+      rrweb-snapshot:
+        optional: true
+
   postmark@4.0.5:
     resolution: {integrity: sha512-nerZdd3TwOH4CgGboZnlUM/q7oZk0EqpZgJL+Y3Nup8kHeaukxouQ6JcFF3EJEijc4QbuNv1TefGhboAKtf/SQ==}
 
+  preact@10.26.9:
+    resolution: {integrity: sha512-SSjF9vcnF27mJK1XyFMNJzFd5u3pQiATFqoaDy03XuN00u4ziveVVEGt5RKJrDR8MHE/wJo9Nnad56RLzS2RMA==}
+
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -9284,6 +9320,9 @@ packages:
   wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
 
+  web-vitals@4.2.4:
+    resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
+
   web-worker@1.5.0:
     resolution: {integrity: sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw==}
 
@@ -14549,6 +14588,8 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
+  alfaaz@1.1.0: {}
+
   ansi-align@3.0.1:
     dependencies:
       string-width: 4.2.3
@@ -15179,6 +15220,8 @@ snapshots:
     dependencies:
       browserslist: 4.24.2
 
+  core-js@3.43.0: {}
+
   core-util-is@1.0.3: {}
 
   cors@2.8.5:
@@ -16166,6 +16209,8 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.2
 
+  fflate@0.4.8: {}
+
   fflate@0.8.2: {}
 
   figures@3.2.0:
@@ -17844,6 +17889,8 @@ snapshots:
 
   ms@2.1.3: {}
 
+  ms@3.0.0-canary.1: {}
+
   msgpackr-extract@3.0.2:
     dependencies:
       node-gyp-build-optional-packages: 5.0.7
@@ -18465,12 +18512,21 @@ snapshots:
 
   postgres-range@1.1.4: {}
 
+  posthog-js@1.255.1:
+    dependencies:
+      core-js: 3.43.0
+      fflate: 0.4.8
+      preact: 10.26.9
+      web-vitals: 4.2.4
+
   postmark@4.0.5:
     dependencies:
       axios: 1.9.0
     transitivePeerDependencies:
       - debug
 
+  preact@10.26.9: {}
+
   prelude-ls@1.2.1: {}
 
   prettier@3.4.1: {}
@@ -19894,6 +19950,8 @@ snapshots:
     dependencies:
       defaults: 1.0.4
 
+  web-vitals@4.2.4: {}
+
   web-worker@1.5.0: {}
 
   webidl-conversions@3.0.1: {}