custom domain support (cloud)

* fix editor flickers on reconnection

* cleanup

* adjust copy

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",
@@ -16,7 +16,6 @@
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
     "@excalidraw/excalidraw": "0.18.0-864353b",
-    "@floating-ui/dom": "^1.6.0",
     "@mantine/core": "^7.17.0",
     "@mantine/form": "^7.17.0",
     "@mantine/hooks": "^7.17.0",
@@ -25,6 +24,8 @@
     "@mantine/spotlight": "^7.17.0",
     "@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.",

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/components/settings/settings-sidebar.tsx

@@ -36,7 +36,7 @@ import { useSettingsNavigation } from "@/hooks/use-settings-navigation";
 
 interface DataItem {
   label: string;
-  icon: any;
+  icon: React.ElementType;
   path: string;
   isCloud?: boolean;
   isEnterprise?: boolean;

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,58 @@ 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()}
+                  </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()}
+                  </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,28 @@ import {
   Button,
   Card,
   List,
-  SegmentedControl,
   ThemeIcon,
   Title,
   Text,
   Group,
+  Select,
+  Container,
+  Stack,
+  Badge,
+  Flex,
+  Switch,
 } from "@mantine/core";
 import { useState } from "react";
 import { IconCheck } from "@tabler/icons-react";
-import { useBillingPlans } from "@/ee/billing/queries/billing-query.ts";
 import { getCheckoutLink } from "@/ee/billing/services/billing-service.ts";
+import { useBillingPlans } from "@/ee/billing/queries/billing-query.ts";
 
 export default function BillingPlans() {
   const { data: plans } = useBillingPlans();
-  const [interval, setInterval] = useState("yearly");
-
-  if (!plans) {
-    return null;
-  }
+  const [isAnnual, setIsAnnual] = useState(true);
+  const [selectedTierValue, setSelectedTierValue] = useState<string | null>(
+    null,
+  );
 
   const handleCheckout = async (priceId: string) => {
     try {
@@ -32,84 +36,153 @@ export default function BillingPlans() {
     }
   };
 
+  if (!plans || plans.length === 0) {
+    return null;
+  }
+
+  const firstPlan = plans[0];
+
+  // Set initial tier value if not set
+  if (!selectedTierValue && firstPlan.pricingTiers.length > 0) {
+    setSelectedTierValue(firstPlan.pricingTiers[0].upTo.toString());
+    return null;
+  }
+
+  if (!selectedTierValue) {
+    return null;
+  }
+
+  const selectData = firstPlan.pricingTiers
+    .filter((tier) => !tier.custom)
+    .map((tier, index) => {
+      const prevMaxUsers =
+        index > 0 ? firstPlan.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">
+      {/* Controls Section */}
+      <Stack gap="xl" mb="md">
+        {/* Team Size and Billing Controls */}
+        <Group justify="center" align="center" gap="sm">
+          <Select
+            label="Team size"
+            description="Select the number of users"
+            value={selectedTierValue}
+            onChange={setSelectedTierValue}
+            data={selectData}
+            w={250}
+            size="md"
+            allowDeselect={false}
+          />
 
-        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" },
-              ]}
-            />
-
-            <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) => {
+          const tieredPlan = plan;
+          const planSelectedTier =
+            tieredPlan.pricingTiers.find(
+              (tier) => tier.upTo.toString() === selectedTierValue,
+            ) || tieredPlan.pricingTiers[0];
+
+          const price = isAnnual
+            ? planSelectedTier.yearly
+            : planSelectedTier.monthly;
+          const priceId = isAnnual ? plan.yearlyId : plan.monthlyId;
+
+          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">
+                      ${isAnnual ? (price / 12).toFixed(0) : price}
+                    </Title>
+                    <Text size="lg" c="dimmed">
+                      per {isAnnual ? "month" : "month"}
+                    </Text>
+                  </Group>
+                  {isAnnual && (
+                    <Text size="sm" c="dimmed">
+                      Billed annually
+                    </Text>
+                  )}
+                  <Text size="md" fw={500}>
+                    For {planSelectedTier.upTo} users
+                  </Text>
+                </Stack>
+
+                {/* CTA Button */}
+                <Button onClick={() => handleCheckout(priceId)} fullWidth>
+                  Upgrade
+                </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-editor.tsx

@@ -1,5 +1,5 @@
-import { Placeholder } from "@tiptap/extensions";
 import { EditorContent, useEditor } from "@tiptap/react";
+import { Placeholder } from "@tiptap/extension-placeholder";
 import { Underline } from "@tiptap/extension-underline";
 import { Link } from "@tiptap/extension-link";
 import { StarterKit } from "@tiptap/starter-kit";

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

@@ -1,5 +1,9 @@
-import { isNodeSelection, useEditor } from "@tiptap/react";
-import { BubbleMenu, BubbleMenuProps } from "@tiptap/react/menus";
+import {
+  BubbleMenu,
+  BubbleMenuProps,
+  isNodeSelection,
+  useEditor,
+} from "@tiptap/react";
 import { FC, useEffect, useRef, useState } from "react";
 import {
   IconBold,

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/callout/callout-menu.tsx

@@ -1,5 +1,8 @@
-import { findParentNode, posToDOMRect } from "@tiptap/react";
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import {
+  BubbleMenu as BaseBubbleMenu,
+  findParentNode,
+  posToDOMRect,
+} from "@tiptap/react";
 import React, { useCallback } from "react";
 import { Node as PMNode } from "prosemirror-model";
 import {

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

@@ -1,5 +1,8 @@
-import { findParentNode, posToDOMRect } from '@tiptap/react';
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import {
+  BubbleMenu as BaseBubbleMenu,
+  findParentNode,
+  posToDOMRect,
+} from '@tiptap/react';
 import { useCallback } from 'react';
 import { sticky } from 'tippy.js';
 import { Node as PMNode } from 'prosemirror-model';

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/excalidraw/excalidraw-menu.tsx

@@ -1,5 +1,8 @@
-import { findParentNode, posToDOMRect } from '@tiptap/react';
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import {
+  BubbleMenu as BaseBubbleMenu,
+  findParentNode,
+  posToDOMRect,
+} from '@tiptap/react';
 import { useCallback } from 'react';
 import { sticky } from 'tippy.js';
 import { Node as PMNode } from 'prosemirror-model';

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

@@ -1,5 +1,8 @@
-import { findParentNode, posToDOMRect } from "@tiptap/react";
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import {
+  BubbleMenu as BaseBubbleMenu,
+  findParentNode,
+  posToDOMRect,
+} from "@tiptap/react";
 import React, { useCallback } from "react";
 import { sticky } from "tippy.js";
 import { Node as PMNode } from "prosemirror-model";

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

@@ -1,4 +1,4 @@
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
 import React, { useCallback, useState } from "react";
 import { EditorMenuProps } from "@/features/editor/components/table/types/types.ts";
 import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";

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

@@ -1,4 +1,4 @@
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
 import React, { useCallback } from "react";
 
 import {

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

@@ -1,5 +1,8 @@
-import { posToDOMRect, findParentNode } from "@tiptap/react";
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import {
+  BubbleMenu as BaseBubbleMenu,
+  posToDOMRect,
+  findParentNode,
+} from "@tiptap/react";
 import { Node as PMNode } from "@tiptap/pm/model";
 import React, { useCallback } from "react";
 

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

@@ -1,5 +1,8 @@
-import { findParentNode, posToDOMRect } from "@tiptap/react";
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
+import {
+  BubbleMenu as BaseBubbleMenu,
+  findParentNode,
+  posToDOMRect,
+} from "@tiptap/react";
 import React, { useCallback } from "react";
 import { sticky } from "tippy.js";
 import { Node as PMNode } from "prosemirror-model";

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

@@ -1,17 +1,20 @@
-import { Table, TableHeader } from "@tiptap/extension-table";
-import { TextStyle, Color } from "@tiptap/extension-text-style";
-import { TaskList, TaskItem } from "@tiptap/extension-list";
-import { Placeholder, CharacterCount } from "@tiptap/extensions";
-import StarterKit from "@tiptap/starter-kit";
+import { StarterKit } from "@tiptap/starter-kit";
+import { Placeholder } from "@tiptap/extension-placeholder";
 import { TextAlign } from "@tiptap/extension-text-align";
+import { TaskList } from "@tiptap/extension-task-list";
+import { TaskItem } from "@tiptap/extension-task-item";
 import { Underline } from "@tiptap/extension-underline";
 import { Superscript } from "@tiptap/extension-superscript";
 import SubScript from "@tiptap/extension-subscript";
 import { Highlight } from "@tiptap/extension-highlight";
 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 CollaborationCaret from "@tiptap/extension-collaboration-caret";
+import { Collaboration } from "@tiptap/extension-collaboration";
+import { CollaborationCursor } from "@tiptap/extension-collaboration-cursor";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import {
   Comment,
@@ -69,6 +72,8 @@ import MentionView from "@/features/editor/components/mention/mention-view.tsx";
 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);
@@ -84,7 +89,7 @@ lowlight.register("scala", scala);
 
 export const mainExtensions = [
   StarterKit.configure({
-    undoRedo: false,
+    history: false,
     dropcursor: {
       width: 3,
       color: "#70CFF8",
@@ -209,7 +214,9 @@ export const mainExtensions = [
   MarkdownClipboard.configure({
     transformPastedText: true,
   }),
-  CharacterCount,
+  CharacterCount.configure({
+    wordCounter: (text) => countWords(text),
+  }),
 ] as any;
 
 type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];
@@ -218,7 +225,7 @@ export const collabExtensions: CollabExtensions = (provider, user) => [
   Collaboration.configure({
     document: provider.document,
   }),
-  CollaborationCaret.configure({
+  CollaborationCursor.configure({
     provider,
     user: {
       name: user.name,

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,7 +1,6 @@
 import "@/features/editor/styles/index.css";
 import React, {
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -52,6 +51,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 +71,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 +89,103 @@ 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();
+          }
+        },
+        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]);
+
+  // 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(
     {
@@ -199,7 +239,7 @@ export default function PageEditor({
         debouncedUpdateContent(editorJson);
       },
     },
-    [pageId, editable, remoteProvider?.status],
+    [pageId, editable, remoteProvider],
   );
 
   const debouncedUpdateContent = useDebouncedCallback((newContent: any) => {
@@ -252,29 +292,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 +307,49 @@ 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 && editor.isEditable && (
           <div>
             <EditorBubbleMenu editor={editor} />
@@ -308,21 +363,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/readonly-page-editor.tsx

@@ -1,4 +1,3 @@
-import { Placeholder } from "@tiptap/extensions";
 import "@/features/editor/styles/index.css";
 import React, { useMemo } from "react";
 import { EditorProvider } from "@tiptap/react";
@@ -6,6 +5,7 @@ import { mainExtensions } from "@/features/editor/extensions/extensions";
 import { Document } from "@tiptap/extension-document";
 import { Heading } from "@tiptap/extension-heading";
 import { Text } from "@tiptap/extension-text";
+import { Placeholder } from "@tiptap/extension-placeholder";
 import { useAtom } from "jotai/index";
 import {
   pageEditorAtom,

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

@@ -1,10 +1,10 @@
-import { Placeholder, History } from "@tiptap/extensions";
 import "@/features/editor/styles/index.css";
 import React, { useCallback, useEffect, useState } from "react";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { Document } from "@tiptap/extension-document";
 import { Heading } from "@tiptap/extension-heading";
 import { Text } from "@tiptap/extension-text";
+import { Placeholder } from "@tiptap/extension-placeholder";
 import { useAtomValue } from "jotai";
 import {
   pageEditorAtom,
@@ -14,12 +14,15 @@ import { updatePageData, useUpdateTitlePageMutation } from "@/features/page/quer
 import { useDebouncedCallback } from "@mantine/hooks";
 import { useAtom } from "jotai";
 import { useQueryEmit } from "@/features/websocket/use-query-emit.ts";
+import { History } from "@tiptap/extension-history";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 import { useNavigate } from "react-router-dom";
 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;
@@ -43,6 +46,9 @@ export function TitleEditor({
   const emit = useQueryEmit();
   const navigate = useNavigate();
   const [activePageId, setActivePageId] = useState(pageId);
+  const [currentUser] = useAtom(currentUserAtom);
+  const userPageEditMode =
+    currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
 
   const titleEditor = useEditor({
     extensions: [
@@ -135,9 +141,24 @@ export function TitleEditor({
     };
   }, [pageId]);
 
-  function handleTitleKeyDown(event) {
-    if (!titleEditor || !pageEditor || event.shiftKey) return;
+  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]);
 
+  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;
 

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

@@ -33,6 +33,7 @@ import {
   yjsConnectionStatusAtom,
 } from "@/features/editor/atoms/editor-atoms.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";
@@ -59,6 +60,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/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,16 @@ export const queryClient = new QueryClient({
   },
 });
 
+if (isCloud() && isPostHogEnabled) {
+  posthog.init(getPostHogKey(), {
+    api_host: getPostHogHost(),
+    defaults: "2025-05-24",
+    disable_session_recording: true,
+  });
+}
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 
 root.render(
@@ -35,10 +50,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,
@@ -82,6 +82,7 @@
     "sanitize-filename-ts": "^1.0.2",
     "socket.io": "^4.8.1",
     "stripe": "^17.5.0",
+    "tld-extract": "^2.1.0",
     "tmp-promise": "^3.0.3",
     "ws": "^8.18.2",
     "yauzl": "^3.2.0"

apps/server/src/collaboration/collaboration.gateway.ts

@@ -1,4 +1,4 @@
-import { Hocuspocus } from '@hocuspocus/server';
+import { Hocuspocus, Server as HocuspocusServer } from '@hocuspocus/server';
 import { IncomingMessage } from 'http';
 import WebSocket from 'ws';
 import { AuthenticationExtension } from './extensions/authentication.extension';
@@ -26,7 +26,7 @@ export class CollaborationGateway {
   ) {
     this.redisConfig = parseRedisUrl(this.environmentService.getRedisUrl());
 
-    this.hocuspocus = new Hocuspocus({
+    this.hocuspocus = HocuspocusServer.configure({
       debounce: 10000,
       maxDebounce: 45000,
       unloadImmediately: false,
@@ -65,6 +65,6 @@ export class CollaborationGateway {
   }
 
   async destroy(): Promise<void> {
-    //await this.hocuspocus.destroy();
+    await this.hocuspocus.destroy();
   }
 }

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

@@ -1,13 +1,17 @@
-import { Table, TableHeader } from '@tiptap/extension-table';
-import { TextStyle, Color } from '@tiptap/extension-text-style';
-import { TaskList, TaskItem } from '@tiptap/extension-list';
+import { StarterKit } from '@tiptap/starter-kit';
 import { TextAlign } from '@tiptap/extension-text-align';
+import { TaskList } from '@tiptap/extension-task-list';
+import { TaskItem } from '@tiptap/extension-task-item';
 import { Underline } from '@tiptap/extension-underline';
 import { Superscript } from '@tiptap/extension-superscript';
 import SubScript from '@tiptap/extension-subscript';
 import { Highlight } from '@tiptap/extension-highlight';
 import { Typography } from '@tiptap/extension-typography';
+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,
@@ -27,9 +31,8 @@ import {
   Drawio,
   Excalidraw,
   Embed,
-  Mention,
+  Mention
 } from '@docmost/editor-ext';
-import StarterKit from '@tiptap/starter-kit';
 import { generateText, getSchema, JSONContent } from '@tiptap/core';
 import { generateHTML } from '../common/helpers/prosemirror/html';
 // @tiptap/html library works best for generating prosemirror json state but not HTML
@@ -41,10 +44,9 @@ import { Node } from '@tiptap/pm/model';
 export const tiptapExtensions = [
   StarterKit.configure({
     codeBlock: false,
-    undoRedo: false,
   }),
   Comment,
-  TextAlign.configure({ types: ['heading', 'paragraph'] }),
+  TextAlign.configure({ types: ["heading", "paragraph"] }),
   TaskList,
   TaskItem,
   Underline,
@@ -74,7 +76,7 @@ export const tiptapExtensions = [
   Drawio,
   Excalidraw,
   Embed,
-  Mention,
+  Mention
 ] as any;
 
 export function jsonToHtml(tiptapJson: any) {

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/common/middlewares/domain.middleware.ts

@@ -1,4 +1,4 @@
-import { Injectable, NestMiddleware, NotFoundException } from '@nestjs/common';
+import { Injectable, NestMiddleware } from '@nestjs/common';
 import { FastifyRequest, FastifyReply } from 'fastify';
 import { EnvironmentService } from '../../integrations/environment/environment.service';
 import { WorkspaceRepo } from '@docmost/db/repos/workspace/workspace.repo';
@@ -27,8 +27,19 @@ export class DomainMiddleware implements NestMiddleware {
       (req as any).workspace = workspace;
     } else if (this.environmentService.isCloud()) {
       const header = req.headers.host;
-      const subdomain = header.split('.')[0];
 
+      // First, try to find workspace by custom domain
+      const workspaceByCustomDomain =
+        await this.workspaceRepo.findByCustomDomain(header);
+
+      if (workspaceByCustomDomain) {
+        (req as any).workspaceId = workspaceByCustomDomain.id;
+        (req as any).workspace = workspaceByCustomDomain;
+        return next();
+      }
+
+      // Fall back to subdomain logic
+      const subdomain = header.split('.')[0];
       const workspace = await this.workspaceRepo.findByHostname(subdomain);
 
       if (!workspace) {

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

@@ -134,7 +134,7 @@ export class AuthService {
 
     const token = nanoIdGen(16);
 
-    const resetLink = `${this.domainService.getUrl(workspace.hostname)}/password-reset?token=${token}`;
+    const resetLink = `${this.domainService.getUrl(workspace.hostname, workspace.customDomain)}/password-reset?token=${token}`;
 
     await this.userTokenRepo.insertUserToken({
       token: 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/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)
@@ -163,18 +171,18 @@ export class WorkspaceInvitationService {
           invitation.email,
           invitation.token,
           authUser.name,
-          workspace.hostname,
+          workspace,
         );
       });
     }
   }
 
-  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);
@@ -304,7 +317,7 @@ export class WorkspaceInvitationService {
       invitation.email,
       invitation.token,
       invitedByUser.name,
-      workspace.hostname,
+      workspace,
     );
   }
 
@@ -327,17 +340,17 @@ export class WorkspaceInvitationService {
     return this.buildInviteLink({
       invitationId,
       inviteToken: token.token,
-      hostname: workspace.hostname,
+      workspace: workspace,
     });
   }
 
   async buildInviteLink(opts: {
     invitationId: string;
     inviteToken: string;
-    hostname?: string;
+    workspace: Workspace;
   }): Promise<string> {
-    const { invitationId, inviteToken, hostname } = opts;
-    return `${this.domainService.getUrl(hostname)}/invites/${invitationId}?token=${inviteToken}`;
+    const { invitationId, inviteToken, workspace } = opts;
+    return `${this.domainService.getUrl(workspace.hostname, workspace.customDomain)}/invites/${invitationId}?token=${inviteToken}`;
   }
 
   async sendInvitationMail(
@@ -345,12 +358,12 @@ export class WorkspaceInvitationService {
     inviteeEmail: string,
     inviteToken: string,
     invitedByName: string,
-    hostname?: string,
+    workspace: Workspace,
   ): Promise<void> {
     const inviteLink = await this.buildInviteLink({
       invitationId,
       inviteToken,
-      hostname,
+      workspace,
     });
 
     const emailTemplate = InvitationEmail({

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/repos/workspace/workspace.repo.ts

@@ -83,6 +83,14 @@ export class WorkspaceRepo {
       .executeTakeFirst();
   }
 
+  async findByCustomDomain(domain: string): Promise<Workspace> {
+    return await this.db
+      .selectFrom('workspaces')
+      .selectAll()
+      .where(sql`LOWER(custom_domain)`, '=', sql`LOWER(${domain})`)
+      .executeTakeFirst();
+  }
+
   async hostnameExists(
     hostname: string,
     trx?: KyselyTransaction,

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/domain.service.ts

@@ -5,10 +5,13 @@ import { EnvironmentService } from './environment.service';
 export class DomainService {
   constructor(private environmentService: EnvironmentService) {}
 
-  getUrl(hostname?: string): string {
+  getUrl(hostname?: string, customDomain?: string): string {
     if (!this.environmentService.isCloud()) {
       return this.environmentService.getAppUrl();
     }
+    if (customDomain) {
+      return customDomain;
+    }
 
     const domain = this.environmentService.getSubdomainHost();
     if (!hostname || !domain) {

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/environment/environment.validation.ts

@@ -68,6 +68,10 @@ export class EnvironmentVariables {
   )
   @ValidateIf((obj) => obj.CLOUD === 'true'.toLowerCase())
   SUBDOMAIN_HOST: string;
+
+  @IsOptional()
+  @ValidateIf((obj) => obj.CLOUD === 'true'.toLowerCase())
+  APP_IP: string;
 }
 
 export function validate(config: Record<string, any>) {

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",
@@ -19,38 +19,47 @@
   },
   "dependencies": {
     "@docmost/editor-ext": "workspace:*",
-    "@hocuspocus/extension-redis": "^3.1.3",
-    "@hocuspocus/provider": "^3.1.3",
-    "@hocuspocus/server": "^3.1.3",
-    "@hocuspocus/transformer": "^3.1.3",
+    "@hocuspocus/extension-redis": "^2.15.2",
+    "@hocuspocus/provider": "^2.15.2",
+    "@hocuspocus/server": "^2.15.2",
+    "@hocuspocus/transformer": "^2.15.2",
     "@joplin/turndown": "^4.0.74",
     "@joplin/turndown-plugin-gfm": "^1.0.56",
     "@sindresorhus/slugify": "1.1.0",
-    "@tiptap/core": "3.0.0-beta.7",
-    "@tiptap/extension-code-block": "3.0.0-beta.7",
-    "@tiptap/extension-code-block-lowlight": "3.0.0-beta.7",
-    "@tiptap/extension-collaboration": "3.0.0-beta.7",
-    "@tiptap/extension-collaboration-caret": "3.0.0-beta.7",
-    "@tiptap/extension-color": "3.0.0-beta.7",
-    "@tiptap/extension-document": "3.0.0-beta.7",
-    "@tiptap/extension-heading": "3.0.0-beta.7",
-    "@tiptap/extension-highlight": "3.0.0-beta.7",
-    "@tiptap/extension-image": "3.0.0-beta.7",
-    "@tiptap/extension-list": "3.0.0-beta.7",
-    "@tiptap/extension-placeholder": "3.0.0-beta.7",
-    "@tiptap/extension-subscript": "3.0.0-beta.7",
-    "@tiptap/extension-superscript": "3.0.0-beta.7",
-    "@tiptap/extension-table": "3.0.0-beta.7",
-    "@tiptap/extension-text": "3.0.0-beta.7",
-    "@tiptap/extension-text-align": "3.0.0-beta.7",
-    "@tiptap/extension-text-style": "3.0.0-beta.7",
-    "@tiptap/extension-typography": "3.0.0-beta.7",
-    "@tiptap/extension-youtube": "3.0.0-beta.7",
-    "@tiptap/extensions": "3.0.0-beta.7",
-    "@tiptap/html": "3.0.0-beta.7",
-    "@tiptap/pm": "3.0.0-beta.7",
-    "@tiptap/react": "3.0.0-beta.7",
-    "@tiptap/suggestion": "3.0.0-beta.7",
+    "@tiptap/core": "^2.10.3",
+    "@tiptap/extension-code-block": "^2.10.3",
+    "@tiptap/extension-code-block-lowlight": "^2.10.3",
+    "@tiptap/extension-collaboration": "^2.10.3",
+    "@tiptap/extension-collaboration-cursor": "^2.10.3",
+    "@tiptap/extension-color": "^2.10.3",
+    "@tiptap/extension-document": "^2.10.3",
+    "@tiptap/extension-heading": "^2.10.3",
+    "@tiptap/extension-highlight": "^2.10.3",
+    "@tiptap/extension-history": "^2.10.3",
+    "@tiptap/extension-image": "^2.10.3",
+    "@tiptap/extension-link": "^2.10.3",
+    "@tiptap/extension-list-item": "^2.10.3",
+    "@tiptap/extension-list-keymap": "^2.10.3",
+    "@tiptap/extension-placeholder": "^2.10.3",
+    "@tiptap/extension-subscript": "^2.10.3",
+    "@tiptap/extension-superscript": "^2.10.3",
+    "@tiptap/extension-table": "^2.10.3",
+    "@tiptap/extension-table-cell": "^2.10.3",
+    "@tiptap/extension-table-header": "^2.10.3",
+    "@tiptap/extension-table-row": "^2.10.3",
+    "@tiptap/extension-task-item": "^2.10.3",
+    "@tiptap/extension-task-list": "^2.10.3",
+    "@tiptap/extension-text": "^2.10.3",
+    "@tiptap/extension-text-align": "^2.10.3",
+    "@tiptap/extension-text-style": "^2.10.3",
+    "@tiptap/extension-typography": "^2.10.3",
+    "@tiptap/extension-underline": "^2.10.3",
+    "@tiptap/extension-youtube": "^2.10.3",
+    "@tiptap/html": "^2.10.3",
+    "@tiptap/pm": "^2.10.3",
+    "@tiptap/react": "^2.10.3",
+    "@tiptap/starter-kit": "^2.10.3",
+    "@tiptap/suggestion": "^2.10.3",
     "bytes": "^3.1.2",
     "cross-env": "^7.0.3",
     "date-fns": "^4.1.0",
@@ -60,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/lib/details/details.ts

@@ -27,7 +27,7 @@ export const Details = Node.create<DetailsOptions>({
   content: "detailsSummary detailsContent",
   defining: true,
   isolating: true,
-  //allowGapCursor: false,
+  allowGapCursor: false,
   addOptions() {
     return {
       HTMLAttributes: {},

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

@@ -1,4 +1,4 @@
-import { TableCell as TiptapTableCell } from "@tiptap/extension-table";
+import { TableCell as TiptapTableCell } from "@tiptap/extension-table-cell";
 
 export const TableCell = TiptapTableCell.extend({
   name: "tableCell",

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

@@ -1,4 +1,4 @@
-import { TableRow as TiptapTableRow } from "@tiptap/extension-table";
+import TiptapTableRow from "@tiptap/extension-table-row";
 
 export const TableRow = TiptapTableRow.extend({
   allowGapCursor: false,

packages/editor-ext/src/lib/utils.ts

@@ -1,10 +1,9 @@
-import { Table } from "@tiptap/extension-table";
 // @ts-nocheck
 import { Editor, findParentNode, isTextSelection } from "@tiptap/core";
-import { EditorState, Selection, Transaction } from '@tiptap/pm/state';
+import { Selection, Transaction } from "@tiptap/pm/state";
 import { CellSelection, TableMap } from "@tiptap/pm/tables";
 import { Node, ResolvedPos } from "@tiptap/pm/model";
-import { EditorView } from '@tiptap/pm/view';
+import Table from "@tiptap/extension-table";
 
 export const isRectSelected = (rect: any) => (selection: CellSelection) => {
   const map = TableMap.get(selection.$anchorCell.node(-1));