fix

- Add getPageAndDescendantsExcludingRestricted to PageRepo that filters
     restricted subtrees in a single query using recursive CTE
- Block share tree access when shared page inherits restriction from ancestor

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

@@ -274,7 +274,6 @@
   "Add row below": "Add row below",
   "Delete table": "Delete table",
   "Info": "Info",
-  "Note": "Note",
   "Success": "Success",
   "Warning": "Warning",
   "Danger": "Danger",
@@ -364,15 +363,6 @@
   "Heading {{level}}": "Heading {{level}}",
   "Toggle title": "Toggle title",
   "Write anything. Enter \"/\" for commands": "Write anything. Enter \"/\" for commands",
-  "Write...": "Write...",
-  "Column count": "Column count",
-  "{{count}} Columns": "{{count}} Columns",
-  "Equal columns": "Equal columns",
-  "Left sidebar": "Left sidebar",
-  "Right sidebar": "Right sidebar",
-  "Wide center": "Wide center",
-  "Left wide": "Left wide",
-  "Right wide": "Right wide",
   "Names do not match": "Names do not match",
   "Today, {{time}}": "Today, {{time}}",
   "Yesterday, {{time}}": "Yesterday, {{time}}",

apps/client/src/components/icons/icon-columns-4.tsx

@@ -1,27 +0,0 @@
-import { rem } from "@mantine/core";
-
-type Props = {
-  size?: number | string;
-  stroke?: number;
-};
-
-export function IconColumns4({ size = 24, stroke = 2 }: Props) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={rem(size)}
-      height={rem(size)}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={stroke}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-16" />
-      <path d="M7.5 3v18" />
-      <path d="M12 3v18" />
-      <path d="M16.5 3v18" />
-    </svg>
-  );
-}

apps/client/src/components/icons/icon-columns-5.tsx

@@ -1,28 +0,0 @@
-import { rem } from "@mantine/core";
-
-type Props = {
-  size?: number | string;
-  stroke?: number;
-};
-
-export function IconColumns5({ size = 24, stroke = 2 }: Props) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={rem(size)}
-      height={rem(size)}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={stroke}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M3 4a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-16" />
-      <path d="M6.6 3v18" />
-      <path d="M10.2 3v18" />
-      <path d="M13.8 3v18" />
-      <path d="M17.4 3v18" />
-    </svg>
-  );
-}

apps/client/src/ee/page-permission/components/general-access-select.tsx

@@ -0,0 +1,112 @@
+import { Group, Menu, Text, UnstyledButton } from "@mantine/core";
+import {
+  IconChevronDown,
+  IconLock,
+  IconShieldLock,
+  IconCheck,
+} from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import classes from "./page-permission.module.css";
+
+type AccessLevel = "open" | "restricted";
+
+type GeneralAccessSelectProps = {
+  value: AccessLevel;
+  onChange: (value: AccessLevel) => void;
+  disabled?: boolean;
+  hasInheritedRestriction?: boolean;
+};
+
+export function GeneralAccessSelect({
+  value,
+  onChange,
+  disabled,
+  hasInheritedRestriction,
+}: GeneralAccessSelectProps) {
+  const { t } = useTranslation();
+
+  const isDirectlyRestricted = value === "restricted";
+  const showInheritedState = hasInheritedRestriction && !isDirectlyRestricted;
+
+  const currentLabel = showInheritedState
+    ? t("Restricted by parent")
+    : isDirectlyRestricted
+      ? t("Restricted")
+      : t("Open");
+
+  const currentDescription = showInheritedState
+    ? t("Inherits restrictions from ancestor page")
+    : isDirectlyRestricted
+      ? t("Only specific people can access")
+      : t("Everyone in this space can access");
+
+  const CurrentIcon = showInheritedState
+    ? IconShieldLock
+    : isDirectlyRestricted
+      ? IconLock
+      : IconShieldLock;
+
+  const accessOptions = [
+    {
+      value: "open" as const,
+      label: hasInheritedRestriction ? t("Restricted by parent") : t("Open"),
+      description: hasInheritedRestriction
+        ? t("Use only inherited restrictions")
+        : t("Everyone in this space can access"),
+      icon: IconShieldLock,
+    },
+    {
+      value: "restricted" as const,
+      label: t("Restricted"),
+      description: hasInheritedRestriction
+        ? t("Add restrictions on top of inherited")
+        : t("Only specific people can access"),
+      icon: IconLock,
+    },
+  ];
+
+  return (
+    <Menu withArrow disabled={disabled}>
+      <Menu.Target>
+        <UnstyledButton className={classes.generalAccessBox} disabled={disabled}>
+          <div
+            className={`${classes.generalAccessIcon} ${isDirectlyRestricted || showInheritedState ? classes.generalAccessIconRestricted : ""}`}
+          >
+            <CurrentIcon size={18} stroke={1.5} />
+          </div>
+          <div style={{ flex: 1 }}>
+            <Group gap={4}>
+              <Text size="sm" fw={500}>
+                {currentLabel}
+              </Text>
+              {!disabled && <IconChevronDown size={14} />}
+            </Group>
+            <Text size="xs" c="dimmed">
+              {currentDescription}
+            </Text>
+          </div>
+        </UnstyledButton>
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        {accessOptions.map((option) => (
+          <Menu.Item
+            key={option.value}
+            onClick={() => onChange(option.value)}
+            leftSection={<option.icon size={16} stroke={1.5} />}
+            rightSection={
+              option.value === value ? <IconCheck size={16} /> : null
+            }
+          >
+            <div>
+              <Text size="sm">{option.label}</Text>
+              <Text size="xs" c="dimmed">
+                {option.description}
+              </Text>
+            </div>
+          </Menu.Item>
+        ))}
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

apps/client/src/ee/page-permission/components/page-permission-item.tsx

@@ -0,0 +1,107 @@
+import { Menu, Text, UnstyledButton, Group } from "@mantine/core";
+import { IconChevronDown, IconCheck } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useAtomValue } from "jotai";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import { AutoTooltipText } from "@/components/ui/auto-tooltip-text";
+import { IconGroupCircle } from "@/components/icons/icon-people-circle";
+import { userAtom } from "@/features/user/atoms/current-user-atom";
+import { formatMemberCount } from "@/lib";
+import {
+  IPagePermissionMember,
+  PagePermissionRole,
+} from "@/ee/page-permission/types/page-permission.types";
+import {
+  pagePermissionRoleData,
+  getPagePermissionRoleLabel,
+} from "@/ee/page-permission/types/page-permission-role-data";
+import classes from "./page-permission.module.css";
+
+type PagePermissionItemProps = {
+  member: IPagePermissionMember;
+  onRoleChange: (memberId: string, type: "user" | "group", role: string) => void;
+  onRemove: (memberId: string, type: "user" | "group") => void;
+  disabled?: boolean;
+};
+
+export function PagePermissionItem({
+  member,
+  onRoleChange,
+  onRemove,
+  disabled,
+}: PagePermissionItemProps) {
+  const { t } = useTranslation();
+  const currentUser = useAtomValue(userAtom);
+  const isCurrentUser = member.type === "user" && member.id === currentUser?.id;
+  const roleLabel = getPagePermissionRoleLabel(member.role);
+
+  return (
+    <div className={classes.permissionItem}>
+      <div className={classes.permissionItemInfo}>
+        {member.type === "user" && (
+          <CustomAvatar avatarUrl={member.avatarUrl} name={member.name} />
+        )}
+        {member.type === "group" && <IconGroupCircle />}
+
+        <div className={classes.permissionItemDetails}>
+          <AutoTooltipText
+            fz="sm"
+            fw={500}
+            tooltipLabel={isCurrentUser ? `${member.name} (${t("You")})` : member.name}
+          >
+            {member.name}
+            {isCurrentUser && <Text span c="dimmed"> ({t("You")})</Text>}
+          </AutoTooltipText>
+          <AutoTooltipText fz="xs" c="dimmed">
+            {member.type === "user" ? member.email : formatMemberCount(member.memberCount, t)}
+          </AutoTooltipText>
+        </div>
+      </div>
+
+      <div className={classes.permissionItemRole}>
+        {isCurrentUser || disabled ? (
+          <Text size="sm" c="dimmed">
+            {t(roleLabel)}
+          </Text>
+        ) : (
+          <Menu withArrow position="bottom-end">
+            <Menu.Target>
+              <UnstyledButton>
+                <Group gap={4}>
+                  <Text size="sm">{t(roleLabel)}</Text>
+                  <IconChevronDown size={14} />
+                </Group>
+              </UnstyledButton>
+            </Menu.Target>
+
+            <Menu.Dropdown>
+              {pagePermissionRoleData.map((role) => (
+                <Menu.Item
+                  key={role.value}
+                  onClick={() => onRoleChange(member.id, member.type, role.value)}
+                  rightSection={
+                    role.value === member.role ? <IconCheck size={16} /> : null
+                  }
+                >
+                  <div>
+                    <Text size="sm">{t(role.label)}</Text>
+                    <Text size="xs" c="dimmed">
+                      {t(role.description)}
+                    </Text>
+                  </div>
+                </Menu.Item>
+              ))}
+              <Menu.Divider />
+              <Menu.Item
+                color="red"
+                onClick={() => onRemove(member.id, member.type)}
+              >
+                {t("Remove access")}
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+        )}
+      </div>
+    </div>
+  );
+}

apps/client/src/ee/page-permission/components/page-permission-list.tsx

@@ -0,0 +1,179 @@
+import { Avatar, Group, ScrollArea, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useAtomValue } from "jotai";
+import { modals } from "@mantine/modals";
+import { userAtom } from "@/features/user/atoms/current-user-atom";
+import { CustomAvatar } from "@/components/ui/custom-avatar";
+import { IconGroupCircle } from "@/components/icons/icon-people-circle";
+import {
+  IPagePermissionMember,
+  PagePermissionRole,
+} from "@/ee/page-permission/types/page-permission.types";
+import {
+  useRemovePagePermissionMutation,
+  useUpdatePagePermissionRoleMutation,
+} from "@/ee/page-permission/queries/page-permission-query";
+import { PagePermissionItem } from "./page-permission-item";
+import classes from "./page-permission.module.css";
+
+type PagePermissionListProps = {
+  pageId: string;
+  members: IPagePermissionMember[];
+  canManage: boolean;
+  onRemoveAll?: () => void;
+};
+
+export function PagePermissionList({
+  pageId,
+  members,
+  canManage,
+  onRemoveAll,
+}: PagePermissionListProps) {
+  const { t } = useTranslation();
+  const currentUser = useAtomValue(userAtom);
+  const updateRoleMutation = useUpdatePagePermissionRoleMutation();
+  const removeMutation = useRemovePagePermissionMutation();
+
+  const handleRoleChange = async (
+    memberId: string,
+    type: "user" | "group",
+    newRole: string,
+  ) => {
+    await updateRoleMutation.mutateAsync({
+      pageId,
+      role: newRole as PagePermissionRole,
+      ...(type === "user" ? { userId: memberId } : { groupId: memberId }),
+    });
+  };
+
+  const handleRemove = (memberId: string, type: "user" | "group") => {
+    modals.openConfirmModal({
+      title: t("Remove access"),
+      children: (
+        <Text size="sm">
+          {t("Are you sure you want to remove this member's access to the page?")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Remove"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: async () => {
+        await removeMutation.mutateAsync({
+          pageId,
+          ...(type === "user" ? { userIds: [memberId] } : { groupIds: [memberId] }),
+        });
+      },
+    });
+  };
+
+  const handleRemoveAll = () => {
+    modals.openConfirmModal({
+      title: t("Remove all access"),
+      children: (
+        <Text size="sm">
+          {t("Are you sure you want to remove all specific access? This will make the page open to everyone in the space.")}
+        </Text>
+      ),
+      centered: true,
+      labels: { confirm: t("Remove all"), cancel: t("Cancel") },
+      confirmProps: { color: "red" },
+      onConfirm: () => onRemoveAll?.(),
+    });
+  };
+
+  const sortedMembers = [...members].sort((a, b) => {
+    if (a.type === "user" && a.id === currentUser?.id) return -1;
+    if (b.type === "user" && b.id === currentUser?.id) return 1;
+    if (a.type === "group" && b.type === "user") return -1;
+    if (a.type === "user" && b.type === "group") return 1;
+    return 0;
+  });
+
+  const getSummaryText = () => {
+    const names: string[] = [];
+    let remaining = 0;
+
+    for (const member of sortedMembers) {
+      if (names.length < 2) {
+        if (member.type === "user" && member.id === currentUser?.id) {
+          names.push(t("You"));
+        } else {
+          names.push(member.name);
+        }
+      } else {
+        remaining++;
+      }
+    }
+
+    if (remaining > 0) {
+      return `${names.join(", ")}, ${t("and {{count}} other", { count: remaining })}`;
+    }
+    return names.join(", ");
+  };
+
+  if (members.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className={classes.specificAccessHeader}>
+        <Text size="sm" fw={500}>
+          {t("Specific access")}
+        </Text>
+        {canManage && members.length > 0 && (
+          <>
+            <Text size="sm" c="dimmed">
+              •
+            </Text>
+            <Text
+              className={classes.removeAllLink}
+              onClick={handleRemoveAll}
+            >
+              {t("Remove all")}
+            </Text>
+          </>
+        )}
+      </div>
+
+      <Group gap={0} mb="xs">
+        <div className={classes.avatarStack}>
+          {sortedMembers.slice(0, 3).map((member, index) => (
+            <div
+              key={member.id}
+              className={classes.avatarStackItem}
+              style={{ zIndex: sortedMembers.length - index }}
+            >
+              {member.type === "user" ? (
+                <CustomAvatar
+                  avatarUrl={member.avatarUrl}
+                  name={member.name}
+                  size={28}
+                />
+              ) : (
+                <Avatar size={28} radius="xl">
+                  <IconGroupCircle />
+                </Avatar>
+              )}
+            </div>
+          ))}
+        </div>
+        <Text size="sm" ml="xs">
+          {getSummaryText()}
+        </Text>
+      </Group>
+
+      <ScrollArea mah={250}>
+        {sortedMembers.map((member) => (
+          <PagePermissionItem
+            key={`${member.type}-${member.id}`}
+            member={member}
+            onRoleChange={handleRoleChange}
+            onRemove={handleRemove}
+            disabled={!canManage}
+          />
+        ))}
+      </ScrollArea>
+    </>
+  );
+}

apps/client/src/ee/page-permission/components/page-permission-tab.tsx

@@ -0,0 +1,200 @@
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  Divider,
+  Group,
+  Loader,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  ThemeIcon,
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { Link, useParams } from "react-router-dom";
+import { IconArrowRight, IconLock, IconShieldLock } from "@tabler/icons-react";
+import { MultiMemberSelect } from "@/features/space/components/multi-member-select";
+import {
+  IPageRestrictionInfo,
+  PagePermissionRole,
+} from "@/ee/page-permission/types/page-permission.types";
+import {
+  useAddPagePermissionMutation,
+  usePagePermissionsQuery,
+  useRestrictPageMutation,
+  useUnrestrictPageMutation,
+} from "@/ee/page-permission/queries/page-permission-query";
+import { pagePermissionRoleData } from "@/ee/page-permission/types/page-permission-role-data";
+import { GeneralAccessSelect } from "@/ee/page-permission";
+import { PagePermissionList } from "@/ee/page-permission";
+import classes from "./page-permission.module.css";
+import { buildPageUrl } from "@/features/page/page.utils";
+
+type PagePermissionTabProps = {
+  pageId: string;
+  restrictionInfo: IPageRestrictionInfo;
+};
+
+export function PagePermissionTab({
+  pageId,
+  restrictionInfo,
+}: PagePermissionTabProps) {
+  const { t } = useTranslation();
+  const { spaceSlug } = useParams();
+  const [memberIds, setMemberIds] = useState<string[]>([]);
+  const [role, setRole] = useState<string>(PagePermissionRole.WRITER);
+
+  const { data: permissionsData, isLoading } = usePagePermissionsQuery(pageId);
+  const restrictMutation = useRestrictPageMutation();
+  const unrestrictMutation = useUnrestrictPageMutation();
+  const addPermissionMutation = useAddPagePermissionMutation();
+
+  const hasInheritedRestriction = restrictionInfo.hasInheritedRestriction;
+  const hasDirectRestriction = restrictionInfo.hasDirectRestriction;
+  const canManage = restrictionInfo.userAccess.canManage;
+
+  const handleDirectAccessChange = async (value: "open" | "restricted") => {
+    if (value === "restricted" && !hasDirectRestriction) {
+      await restrictMutation.mutateAsync(pageId);
+    } else if (value === "open" && hasDirectRestriction) {
+      await unrestrictMutation.mutateAsync(pageId);
+    }
+  };
+
+  const handleAddMembers = async () => {
+    if (memberIds.length === 0) return;
+
+    const userIds = memberIds
+      .filter((id) => id.startsWith("user-"))
+      .map((id) => id.replace("user-", ""));
+
+    const groupIds = memberIds
+      .filter((id) => id.startsWith("group-"))
+      .map((id) => id.replace("group-", ""));
+
+    await addPermissionMutation.mutateAsync({
+      pageId,
+      role: role as PagePermissionRole,
+      ...(userIds.length > 0 && { userIds }),
+      ...(groupIds.length > 0 && { groupIds }),
+    });
+
+    setMemberIds([]);
+  };
+
+  const handleRemoveAll = async () => {
+    await unrestrictMutation.mutateAsync(pageId);
+  };
+
+  return (
+    <Stack gap="md">
+      {hasInheritedRestriction && (
+        <Paper className={classes.inheritedSection} p="sm" radius="sm">
+          <Group gap="sm" wrap="nowrap">
+            <ThemeIcon
+              size="lg"
+              radius="sm"
+              variant="light"
+              color="orange"
+            >
+              <IconShieldLock size={18} stroke={1.5} />
+            </ThemeIcon>
+            <Box style={{ flex: 1 }}>
+              <Text size="sm" fw={500}>
+                {t("Inherited restriction")}
+              </Text>
+              <Group gap={4}>
+                <Text size="xs" c="dimmed">
+                  {t("Access limited by")}
+                </Text>
+                <Link
+                  to={buildPageUrl(
+                    spaceSlug,
+                    restrictionInfo.id,
+                    restrictionInfo.title,
+                  )}
+                  style={{ textDecoration: "none" }}
+                >
+                  <Group gap={2}>
+                    <Text size="xs" fw={500} c="blue">
+                      {restrictionInfo.title || t("Untitled")}
+                    </Text>
+                    <IconArrowRight size={12} color="var(--mantine-color-blue-6)" />
+                  </Group>
+                </Link>
+              </Group>
+            </Box>
+          </Group>
+        </Paper>
+      )}
+
+      <Box>
+        <Text size="sm" fw={500} mb="xs">
+          {t("This page")}
+        </Text>
+        <GeneralAccessSelect
+          value={hasDirectRestriction ? "restricted" : "open"}
+          onChange={handleDirectAccessChange}
+          disabled={!canManage}
+          hasInheritedRestriction={hasInheritedRestriction}
+        />
+        {!hasDirectRestriction && !hasInheritedRestriction && (
+          <Text size="xs" c="dimmed" mt={4}>
+            {t("Everyone in this space can access this page")}
+          </Text>
+        )}
+        {!hasDirectRestriction && hasInheritedRestriction && (
+          <Text size="xs" c="dimmed" mt={4}>
+            {t("Add additional restrictions specific to this page")}
+          </Text>
+        )}
+      </Box>
+
+      {hasDirectRestriction && (
+        <>
+          <Divider />
+
+          {canManage && (
+            <Group gap="xs" align="flex-end">
+              <Box style={{ flex: 1 }}>
+                <MultiMemberSelect value={memberIds} onChange={setMemberIds} />
+              </Box>
+              <Select
+                data={pagePermissionRoleData.map((r) => ({
+                  label: t(r.label),
+                  value: r.value,
+                }))}
+                value={role}
+                onChange={(value) => value && setRole(value)}
+                allowDeselect={false}
+                variant="filled"
+                w={120}
+              />
+              <Button
+                onClick={handleAddMembers}
+                disabled={memberIds.length === 0}
+                loading={addPermissionMutation.isPending}
+              >
+                {t("Add")}
+              </Button>
+            </Group>
+          )}
+
+          {isLoading ? (
+            <Group justify="center" py="md">
+              <Loader size="sm" />
+            </Group>
+          ) : (
+            <PagePermissionList
+              pageId={pageId}
+              members={permissionsData?.items || []}
+              canManage={canManage}
+              onRemoveAll={handleRemoveAll}
+            />
+          )}
+        </>
+      )}
+    </Stack>
+  );
+}

apps/client/src/ee/page-permission/components/page-permission.module.css

@@ -0,0 +1,128 @@
+.generalAccessBox {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  padding: var(--mantine-spacing-xs) 0;
+}
+
+.generalAccessIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--mantine-radius-sm);
+
+  @mixin light {
+    background-color: var(--mantine-color-gray-1);
+  }
+  @mixin dark {
+    background-color: var(--mantine-color-dark-5);
+  }
+}
+
+.generalAccessIconRestricted {
+  @mixin light {
+    background-color: var(--mantine-color-red-0);
+    color: var(--mantine-color-red-6);
+  }
+  @mixin dark {
+    background-color: rgba(250, 82, 82, 0.1);
+    color: var(--mantine-color-red-5);
+  }
+}
+
+.permissionItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--mantine-spacing-xs) 0;
+  gap: var(--mantine-spacing-sm);
+}
+
+.permissionItemInfo {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.permissionItemDetails {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.permissionItemRole {
+  flex-shrink: 0;
+}
+
+.avatarStack {
+  display: flex;
+  align-items: center;
+}
+
+.avatarStackItem {
+  margin-left: -8px;
+  border: 2px solid var(--mantine-color-body);
+  border-radius: 50%;
+}
+
+.avatarStackItem:first-child {
+  margin-left: 0;
+}
+
+.specificAccessHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  margin-top: var(--mantine-spacing-md);
+  margin-bottom: var(--mantine-spacing-xs);
+}
+
+.removeAllLink {
+  cursor: pointer;
+  font-size: var(--mantine-font-size-sm);
+
+  @mixin light {
+    color: var(--mantine-color-gray-6);
+  }
+  @mixin dark {
+    color: var(--mantine-color-dark-2);
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.inheritedInfo {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-xs);
+  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
+  border-radius: var(--mantine-radius-sm);
+  margin-bottom: var(--mantine-spacing-sm);
+
+  @mixin light {
+    background-color: var(--mantine-color-gray-0);
+  }
+  @mixin dark {
+    background-color: var(--mantine-color-dark-6);
+  }
+}
+
+.inheritedSection {
+  @mixin light {
+    background-color: var(--mantine-color-orange-0);
+    border: 1px solid var(--mantine-color-orange-2);
+  }
+  @mixin dark {
+    background-color: rgba(255, 146, 43, 0.08);
+    border: 1px solid rgba(255, 146, 43, 0.2);
+  }
+}

apps/client/src/ee/page-permission/components/page-share-modal.tsx

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import {
+  Button,
+  Indicator,
+  Loader,
+  Modal,
+  Tabs,
+  Center,
+} from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconWorld, IconLock } from "@tabler/icons-react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { extractPageSlugId } from "@/lib";
+import { usePageQuery } from "@/features/page/queries/page-query";
+import { usePageRestrictionInfoQuery } from "@/ee/page-permission/queries/page-permission-query";
+import { PagePermissionTab } from "@/ee/page-permission";
+import { PublishTab } from "./publish-tab";
+import { useShareForPageQuery } from "@/features/share/queries/share-query";
+
+type PageShareModalProps = {
+  readOnly?: boolean;
+};
+
+export function PageShareModal({ readOnly }: PageShareModalProps) {
+  const { t } = useTranslation();
+  const { pageSlug } = useParams();
+  const pageSlugId = extractPageSlugId(pageSlug);
+  const [opened, { open, close }] = useDisclosure(false);
+  const [activeTab, setActiveTab] = useState<string | null>("share");
+
+  const { data: page } = usePageQuery({ pageId: pageSlugId });
+  const pageId = page?.id;
+  const isRestricted = page?.permissions?.hasRestriction ?? false;
+
+  const { data: share } = useShareForPageQuery(pageId);
+  const isPubliclyShared = !!share;
+
+  const { data: restrictionInfo, isLoading: restrictionLoading } =
+    usePageRestrictionInfoQuery(opened ? pageId : undefined);
+
+  return (
+    <>
+      <Button
+        style={{ border: "none" }}
+        size="compact-sm"
+        leftSection={
+          <Indicator
+            color={isRestricted ? "red" : "green"}
+            offset={5}
+            disabled={!isRestricted && !isPubliclyShared}
+            withBorder
+          >
+            {isRestricted ? (
+              <IconLock size={20} stroke={1.5} />
+            ) : (
+              <IconWorld size={20} stroke={1.5} />
+            )}
+          </Indicator>
+        }
+        variant="default"
+        onClick={open}
+      >
+        {t("Share")}
+      </Button>
+
+      <Modal
+        opened={opened}
+        onClose={close}
+        title={t("Share")}
+        size={600}
+      >
+        <Tabs value={activeTab} onChange={setActiveTab}>
+          <Tabs.List mb="md">
+            <Tabs.Tab value="share">{t("Share")}</Tabs.Tab>
+            <Tabs.Tab value="publish">{t("Publish")}</Tabs.Tab>
+          </Tabs.List>
+
+          <Tabs.Panel value="share">
+            {restrictionLoading || !pageId ? (
+              <Center py="xl">
+                <Loader size="sm" />
+              </Center>
+            ) : (
+              <PagePermissionTab
+                pageId={pageId}
+                restrictionInfo={restrictionInfo}
+              />
+            )}
+          </Tabs.Panel>
+
+          <Tabs.Panel value="publish">
+            <PublishTab pageId={pageId} readOnly={readOnly} />
+          </Tabs.Panel>
+        </Tabs>
+      </Modal>
+    </>
+  );
+}

apps/client/src/ee/page-permission/components/publish-tab.tsx

@@ -0,0 +1,221 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+  ActionIcon,
+  Anchor,
+  Button,
+  Group,
+  Stack,
+  Switch,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconExternalLink, IconLock } from "@tabler/icons-react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { getPageIcon } from "@/lib";
+import CopyTextButton from "@/components/common/copy";
+import { getAppUrl, isCloud } from "@/lib/config";
+import { buildPageUrl } from "@/features/page/page.utils";
+import {
+  useCreateShareMutation,
+  useDeleteShareMutation,
+  useShareForPageQuery,
+  useUpdateShareMutation,
+} from "@/features/share/queries/share-query";
+import useTrial from "@/ee/hooks/use-trial";
+
+type PublishTabProps = {
+  pageId: string;
+  readOnly?: boolean;
+};
+
+export function PublishTab({ pageId, readOnly }: PublishTabProps) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { pageSlug, spaceSlug } = useParams();
+  const { isTrial } = useTrial();
+
+  const { data: share } = useShareForPageQuery(pageId);
+  const createShareMutation = useCreateShareMutation();
+  const updateShareMutation = useUpdateShareMutation();
+  const deleteShareMutation = useDeleteShareMutation();
+
+  const pageIsShared = share && share.level === 0;
+  const isDescendantShared = share && share.level > 0;
+
+  const publicLink = `${getAppUrl()}/share/${share?.key}/p/${pageSlug}`;
+
+  const [isPagePublic, setIsPagePublic] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsPagePublic(!!share);
+  }, [share, pageId]);
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.currentTarget.checked;
+
+    if (value) {
+      createShareMutation.mutateAsync({
+        pageId: pageId,
+        includeSubPages: true,
+        searchIndexing: false,
+      });
+      setIsPagePublic(value);
+    } else {
+      if (share && share.id) {
+        deleteShareMutation.mutateAsync(share.id);
+        setIsPagePublic(value);
+      }
+    }
+  };
+
+  const handleSubPagesChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const value = event.currentTarget.checked;
+    updateShareMutation.mutateAsync({
+      shareId: share.id,
+      includeSubPages: value,
+    });
+  };
+
+  const handleIndexSearchChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const value = event.currentTarget.checked;
+    updateShareMutation.mutateAsync({
+      shareId: share.id,
+      searchIndexing: value,
+    });
+  };
+
+  const shareLink = useMemo(
+    () => (
+      <Group my="sm" gap={4} wrap="nowrap">
+        <TextInput
+          variant="filled"
+          value={publicLink}
+          readOnly
+          rightSection={<CopyTextButton text={publicLink} />}
+          style={{ width: "100%" }}
+        />
+        <ActionIcon
+          component="a"
+          variant="default"
+          target="_blank"
+          href={publicLink}
+          size="sm"
+        >
+          <IconExternalLink size={16} />
+        </ActionIcon>
+      </Group>
+    ),
+    [publicLink],
+  );
+
+  if (isCloud() && isTrial) {
+    return (
+      <Stack align="center" py="md">
+        <IconLock size={20} stroke={1.5} />
+        <Text size="sm" ta="center" fw={500}>
+          {t("Upgrade to share pages")}
+        </Text>
+        <Text size="sm" c="dimmed" ta="center">
+          {t(
+            "Page sharing is available on paid plans. Upgrade to share your pages publicly.",
+          )}
+        </Text>
+        <Button size="xs" onClick={() => navigate("/settings/billing")}>
+          {t("Upgrade Plan")}
+        </Button>
+      </Stack>
+    );
+  }
+
+  if (isDescendantShared) {
+    return (
+      <Stack gap="sm">
+        <Text size="sm">{t("Inherits public sharing from")}</Text>
+        <Anchor
+          size="sm"
+          underline="never"
+          style={{
+            cursor: "pointer",
+            color: "var(--mantine-color-text)",
+          }}
+          component={Link}
+          to={buildPageUrl(
+            spaceSlug,
+            share.sharedPage.slugId,
+            share.sharedPage.title,
+          )}
+        >
+          <Group gap="4" wrap="nowrap">
+            {getPageIcon(share.sharedPage.icon)}
+            <Text fz="sm" fw={500} lineClamp={1}>
+              {share.sharedPage.title || t("untitled")}
+            </Text>
+          </Group>
+        </Anchor>
+        {shareLink}
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap="sm">
+      <Group justify="space-between" wrap="nowrap" gap="xl">
+        <div>
+          <Text size="sm">
+            {isPagePublic ? t("Shared to web") : t("Share to web")}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {isPagePublic
+              ? t("Anyone with the link can view this page")
+              : t("Make this page publicly accessible")}
+          </Text>
+        </div>
+        <Switch
+          onChange={handleChange}
+          checked={isPagePublic}
+          disabled={readOnly}
+          size="xs"
+        />
+      </Group>
+
+      {pageIsShared && (
+        <>
+          {shareLink}
+          <Group justify="space-between" wrap="nowrap" gap="xl">
+            <div>
+              <Text size="sm">{t("Include sub-pages")}</Text>
+              <Text size="xs" c="dimmed">
+                {t("Make sub-pages public too")}
+              </Text>
+            </div>
+            <Switch
+              onChange={handleSubPagesChange}
+              checked={share.includeSubPages}
+              size="xs"
+              disabled={readOnly}
+            />
+          </Group>
+          <Group justify="space-between" wrap="nowrap" gap="xl">
+            <div>
+              <Text size="sm">{t("Search engine indexing")}</Text>
+              <Text size="xs" c="dimmed">
+                {t("Allow search engines to index page")}
+              </Text>
+            </div>
+            <Switch
+              onChange={handleIndexSearchChange}
+              checked={share.searchIndexing}
+              size="xs"
+              disabled={readOnly}
+            />
+          </Group>
+        </>
+      )}
+    </Stack>
+  );
+}

apps/client/src/ee/page-permission/hooks/use-page-permission.ts

@@ -0,0 +1,26 @@
+import { useSpaceAbility } from "@/features/space/permissions/use-space-ability";
+import {
+  SpaceCaslAction,
+  SpaceCaslSubject,
+} from "@/features/space/permissions/permissions.type";
+import { usePageRestrictionInfoQuery } from "@/ee/page-permission/queries/page-permission-query";
+
+export function usePagePermission(pageId: string, spaceRules: any) {
+  const spaceAbility = useSpaceAbility(spaceRules);
+  const { data: restrictionInfo, isLoading } =
+    usePageRestrictionInfoQuery(pageId);
+
+  if (isLoading || !restrictionInfo) {
+    return { canEdit: false, restrictionInfo: undefined };
+  }
+
+  const hasRestriction =
+    restrictionInfo.hasDirectRestriction ||
+    restrictionInfo.hasInheritedRestriction;
+
+  const canEdit = hasRestriction
+    ? (restrictionInfo.userAccess?.canEdit ?? false)
+    : spaceAbility.can(SpaceCaslAction.Manage, SpaceCaslSubject.Page);
+
+  return { canEdit, restrictionInfo };
+}

apps/client/src/ee/page-permission/index.ts

@@ -0,0 +1,11 @@
+export * from "./components/page-share-modal";
+export * from "./components/page-permission-tab";
+export * from "./components/publish-tab";
+export * from "./components/page-permission-list";
+export * from "./components/page-permission-item";
+export * from "./components/general-access-select";
+export * from "./hooks/use-page-permission";
+export * from "./queries/page-permission-query";
+export * from "./services/page-permission-service";
+export * from "./types/page-permission.types";
+export * from "./types/page-permission-role-data";

apps/client/src/ee/page-permission/queries/page-permission-query.ts

@@ -0,0 +1,159 @@
+import {
+  keepPreviousData,
+  useMutation,
+  useQuery,
+  useQueryClient,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import {
+  IAddPagePermission,
+  IPagePermissionMember,
+  IPageRestrictionInfo,
+  IRemovePagePermission,
+  IUpdatePagePermissionRole,
+} from "@/ee/page-permission/types/page-permission.types";
+import {
+  addPagePermission,
+  getPagePermissions,
+  getPageRestrictionInfo,
+  removePagePermission,
+  restrictPage,
+  unrestrictPage,
+  updatePagePermissionRole,
+} from "@/ee/page-permission/services/page-permission-service";
+import { notifications } from "@mantine/notifications";
+import { IPagination, QueryParams } from "@/lib/types";
+import { useTranslation } from "react-i18next";
+
+export function usePageRestrictionInfoQuery(
+  pageId: string | undefined,
+): UseQueryResult<IPageRestrictionInfo, Error> {
+  return useQuery({
+    queryKey: ["page-restriction-info", pageId],
+    queryFn: () => getPageRestrictionInfo(pageId),
+    enabled: !!pageId,
+  });
+}
+
+export function usePagePermissionsQuery(
+  pageId: string,
+  params?: QueryParams,
+): UseQueryResult<IPagination<IPagePermissionMember>, Error> {
+  return useQuery({
+    queryKey: ["page-permissions", pageId, params],
+    queryFn: () => getPagePermissions(pageId, params),
+    enabled: !!pageId,
+    placeholderData: keepPreviousData,
+  });
+}
+
+export function useRestrictPageMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, string>({
+    mutationFn: (pageId) => restrictPage(pageId),
+    onSuccess: (_, pageId) => {
+      queryClient.invalidateQueries({
+        queryKey: ["page-restriction-info", pageId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["page-permissions", pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to restrict page"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useUnrestrictPageMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, string>({
+    mutationFn: (pageId) => unrestrictPage(pageId),
+    onSuccess: (_, pageId) => {
+      queryClient.invalidateQueries({
+        queryKey: ["page-restriction-info", pageId],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["page-permissions", pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to remove page restriction"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useAddPagePermissionMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, IAddPagePermission>({
+    mutationFn: (data) => addPagePermission(data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["page-permissions", variables.pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to add permission"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useRemovePagePermissionMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, IRemovePagePermission>({
+    mutationFn: (data) => removePagePermission(data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["page-permissions", variables.pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to remove permission"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useUpdatePagePermissionRoleMutation() {
+  const queryClient = useQueryClient();
+  const { t } = useTranslation();
+
+  return useMutation<void, Error, IUpdatePagePermissionRole>({
+    mutationFn: (data) => updatePagePermissionRole(data),
+    onSuccess: (_, variables) => {
+      queryClient.refetchQueries({
+        queryKey: ["page-permissions", variables.pageId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({
+        message: errorMessage || t("Failed to update permission"),
+        color: "red",
+      });
+    },
+  });
+}

apps/client/src/ee/page-permission/services/page-permission-service.ts

@@ -0,0 +1,55 @@
+import api from "@/lib/api-client";
+import { IPagination, QueryParams } from "@/lib/types";
+import {
+  IAddPagePermission,
+  IPagePermissionMember,
+  IPageRestrictionInfo,
+  IRemovePagePermission,
+  IUpdatePagePermissionRole,
+} from "@/ee/page-permission/types/page-permission.types";
+
+export async function restrictPage(pageId: string): Promise<void> {
+  await api.post("/pages/restrict", { pageId });
+}
+
+export async function addPagePermission(
+  data: IAddPagePermission,
+): Promise<void> {
+  await api.post("/pages/add-permission", data);
+}
+
+export async function removePagePermission(
+  data: IRemovePagePermission,
+): Promise<void> {
+  await api.post("/pages/remove-permission", data);
+}
+
+export async function updatePagePermissionRole(
+  data: IUpdatePagePermissionRole,
+): Promise<void> {
+  await api.post("/pages/update-permission", data);
+}
+
+export async function unrestrictPage(pageId: string): Promise<void> {
+  await api.post("/pages/remove-restriction", { pageId });
+}
+
+export async function getPagePermissions(
+  pageId: string,
+  params?: QueryParams,
+): Promise<IPagination<IPagePermissionMember>> {
+  const req = await api.post<IPagination<IPagePermissionMember>>(
+    "/pages/permissions",
+    { pageId, ...params },
+  );
+  return req.data;
+}
+
+export async function getPageRestrictionInfo(
+  pageId: string,
+): Promise<IPageRestrictionInfo> {
+  const req = await api.post<IPageRestrictionInfo>("/pages/permission-info", {
+    pageId,
+  });
+  return req.data;
+}

apps/client/src/ee/page-permission/types/page-permission-role-data.ts

@@ -0,0 +1,20 @@
+import { IRoleData } from "@/lib/types";
+import { PagePermissionRole } from "./page-permission.types";
+
+export const pagePermissionRoleData: IRoleData[] = [
+  {
+    label: "Can edit",
+    value: PagePermissionRole.WRITER,
+    description: "Can edit page and manage access",
+  },
+  {
+    label: "Can view",
+    value: PagePermissionRole.READER,
+    description: "Can only view page",
+  },
+];
+
+export function getPagePermissionRoleLabel(value: string): string | undefined {
+  const role = pagePermissionRoleData.find((item) => item.value === value);
+  return role ? role.label : undefined;
+}

apps/client/src/ee/page-permission/types/page-permission.types.ts

@@ -0,0 +1,57 @@
+export enum PagePermissionRole {
+  READER = "reader",
+  WRITER = "writer",
+}
+
+export type IAddPagePermission = {
+  pageId: string;
+  role: PagePermissionRole;
+  userIds?: string[];
+  groupIds?: string[];
+};
+
+export type IRemovePagePermission = {
+  pageId: string;
+  userIds?: string[];
+  groupIds?: string[];
+};
+
+export type IUpdatePagePermissionRole = {
+  pageId: string;
+  role: PagePermissionRole;
+  userId?: string;
+  groupId?: string;
+};
+
+export type IPageRestrictionInfo = {
+  id: string;
+  title: string;
+  hasDirectRestriction: boolean;
+  hasInheritedRestriction: boolean;
+  userAccess: {
+    canView: boolean;
+    canEdit: boolean;
+    canManage: boolean;
+  };
+};
+
+type IPagePermissionBase = {
+  id: string;
+  name: string;
+  role: string;
+  createdAt: string;
+};
+
+export type IPagePermissionUser = IPagePermissionBase & {
+  type: "user";
+  email: string;
+  avatarUrl: string | null;
+};
+
+export type IPagePermissionGroup = IPagePermissionBase & {
+  type: "group";
+  memberCount: number;
+  isDefault: boolean;
+};
+
+export type IPagePermissionMember = IPagePermissionUser | IPagePermissionGroup;

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

@@ -17,11 +17,6 @@ import { useTranslation } from "react-i18next";
 import { useQueryEmit } from "@/features/websocket/use-query-emit";
 import { useIsCloudEE } from "@/hooks/use-is-cloud-ee";
 import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
-import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
-import {
-  SpaceCaslAction,
-  SpaceCaslSubject,
-} from "@/features/space/permissions/permissions.type.ts";
 
 function CommentListWithTabs() {
   const { t } = useTranslation();
@@ -38,14 +33,7 @@ function CommentListWithTabs() {
   const isCloudEE = useIsCloudEE();
   const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
 
-  const spaceRules = space?.membership?.permissions;
+  const canComment = page?.permissions?.canEdit ?? false;
-  const spaceAbility = useSpaceAbility(spaceRules);
-
-
-  const canComment: boolean = spaceAbility.can(
-    SpaceCaslAction.Manage,
-    SpaceCaslSubject.Page
-  );
 
   // Separate active and resolved comments
   const { activeComments, resolvedComments } = useMemo(() => {
@@ -54,14 +42,14 @@ function CommentListWithTabs() {
     }
 
     const parentComments = comments.items.filter(
-      (comment: IComment) => comment.parentCommentId === null
+      (comment: IComment) => comment.parentCommentId === null,
     );
 
     const active = parentComments.filter(
-      (comment: IComment) => !comment.resolvedAt
+      (comment: IComment) => !comment.resolvedAt,
     );
     const resolved = parentComments.filter(
-      (comment: IComment) => comment.resolvedAt
+      (comment: IComment) => comment.resolvedAt,
     );
 
     return { activeComments: active, resolvedComments: resolved };
@@ -89,7 +77,7 @@ function CommentListWithTabs() {
         setIsLoading(false);
       }
     },
-    [createCommentMutation, page?.id]
+    [createCommentMutation, page?.id],
   );
 
   const renderComments = useCallback(
@@ -131,7 +119,7 @@ function CommentListWithTabs() {
         )}
       </Paper>
     ),
-    [comments, handleAddReply, isLoading, space?.membership?.role]
+    [comments, handleAddReply, isLoading, space?.membership?.role],
   );
 
   if (isCommentsLoading) {
@@ -199,7 +187,14 @@ function CommentListWithTabs() {
   }
 
   return (
-    <div style={{ height: "85vh", display: "flex", flexDirection: "column", marginTop: '-15px' }}>
+    <div
+      style={{
+        height: "85vh",
+        display: "flex",
+        flexDirection: "column",
+        marginTop: "-15px",
+      }}
+    >
       <Tabs defaultValue="open" variant="default" style={{ flex: "0 0 auto" }}>
         <Tabs.List justify="center">
           <Tabs.Tab
@@ -273,9 +268,9 @@ const ChildComments = ({
   const getChildComments = useCallback(
     (parentId: string) =>
       comments.items.filter(
-        (comment: IComment) => comment.parentCommentId === parentId
+        (comment: IComment) => comment.parentCommentId === parentId,
       ),
-    [comments.items]
+    [comments.items],
   );
 
   return (

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

@@ -7,19 +7,16 @@ import {
   ShouldShowProps,
 } from "@/features/editor/components/table/types/types.ts";
 import { ActionIcon, Tooltip } from "@mantine/core";
-import clsx from "clsx";
 import {
   IconAlertTriangleFilled,
   IconCircleCheckFilled,
   IconCircleXFilled,
   IconInfoCircleFilled,
   IconMoodSmile,
-  IconNotes,
 } from "@tabler/icons-react";
-import { CalloutType, isTextSelected } from "@docmost/editor-ext";
+import { CalloutType } from "@docmost/editor-ext";
 import { useTranslation } from "react-i18next";
 import EmojiPicker from "@/components/ui/emoji-picker.tsx";
-import classes from "../common/toolbar-menu.module.css";
 
 export function CalloutMenu({ editor }: EditorMenuProps) {
   const { t } = useTranslation();
@@ -29,7 +26,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
       if (!state) {
         return false;
       }
-      if (isTextSelected(editor)) return false;
 
       return editor.isActive("callout");
     },
@@ -46,7 +42,6 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
       return {
         isCallout: ctx.editor.isActive("callout"),
         isInfo: ctx.editor.isActive("callout", { type: "info" }),
-        isNote: ctx.editor.isActive("callout", { type: "note" }),
         isSuccess: ctx.editor.isActive("callout", { type: "success" }),
         isWarning: ctx.editor.isActive("callout", { type: "warning" }),
         isDanger: ctx.editor.isActive("callout", { type: "danger" }),
@@ -131,31 +126,15 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
       }}
       shouldShow={shouldShow}
     >
-      <div className={classes.toolbar}>
+      <ActionIcon.Group className="actionIconGroup">
         <Tooltip position="top" label={t("Info")}>
           <ActionIcon
             onClick={() => setCalloutType("info")}
             size="lg"
             aria-label={t("Info")}
-            variant="subtle"
+            variant={editorState?.isInfo ? "light" : "default"}
-            className={clsx({ [classes.active]: editorState?.isInfo })}
           >
-            <IconInfoCircleFilled
+            <IconInfoCircleFilled size={18} />
-              size={18}
-              color="var(--mantine-color-blue-5)"
-            />
-          </ActionIcon>
-        </Tooltip>
-
-        <Tooltip position="top" label={t("Note")}>
-          <ActionIcon
-            onClick={() => setCalloutType("note")}
-            size="lg"
-            aria-label={t("Note")}
-            variant="subtle"
-            className={clsx({ [classes.active]: editorState?.isNote })}
-          >
-            <IconNotes size={18} color="var(--mantine-color-grape-5)" />
           </ActionIcon>
         </Tooltip>
 
@@ -164,13 +143,9 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
             onClick={() => setCalloutType("success")}
             size="lg"
             aria-label={t("Success")}
-            variant="subtle"
+            variant={editorState?.isSuccess ? "light" : "default"}
-            className={clsx({ [classes.active]: editorState?.isSuccess })}
           >
-            <IconCircleCheckFilled
+            <IconCircleCheckFilled size={18} />
-              size={18}
-              color="var(--mantine-color-green-5)"
-            />
           </ActionIcon>
         </Tooltip>
 
@@ -179,13 +154,9 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
             onClick={() => setCalloutType("warning")}
             size="lg"
             aria-label={t("Warning")}
-            variant="subtle"
+            variant={editorState?.isWarning ? "light" : "default"}
-            className={clsx({ [classes.active]: editorState?.isWarning })}
           >
-            <IconAlertTriangleFilled
+            <IconAlertTriangleFilled size={18} />
-              size={18}
-              color="var(--mantine-color-orange-5)"
-            />
           </ActionIcon>
         </Tooltip>
 
@@ -194,10 +165,9 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
             onClick={() => setCalloutType("danger")}
             size="lg"
             aria-label={t("Danger")}
-            variant="subtle"
+            variant={editorState?.isDanger ? "light" : "default"}
-            className={clsx({ [classes.active]: editorState?.isDanger })}
           >
-            <IconCircleXFilled size={18} color="var(--mantine-color-red-5)" />
+            <IconCircleXFilled size={18} />
           </ActionIcon>
         </Tooltip>
 
@@ -208,10 +178,11 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
           icon={currentIcon || <IconMoodSmile size={18} />}
           actionIconProps={{
             size: "lg",
-            variant: "subtle",
+            variant: "default",
+            c: undefined,
           }}
         />
-      </div>
+      </ActionIcon.Group>
     </BaseBubbleMenu>
   );
 }

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

@@ -4,7 +4,6 @@ import {
   IconCircleCheckFilled,
   IconCircleXFilled,
   IconInfoCircleFilled,
-  IconNotes,
 } from "@tabler/icons-react";
 import { Alert } from "@mantine/core";
 import classes from "./callout.module.css";
@@ -23,7 +22,6 @@ export default function CalloutView(props: NodeViewProps) {
         icon={getCalloutIcon(type, icon)}
         p="xs"
         classNames={{
-          root: classes.root,
           message: classes.message,
           icon: classes.icon,
         }}
@@ -36,14 +34,12 @@ export default function CalloutView(props: NodeViewProps) {
 
 function getCalloutIcon(type: CalloutType, customIcon?: string) {
   if (customIcon && customIcon.trim() !== "") {
-    return <span style={{ fontSize: "18px" }}>{customIcon}</span>;
+    return <span style={{ fontSize: '18px' }}>{customIcon}</span>;
   }
 
   switch (type) {
     case "info":
       return <IconInfoCircleFilled />;
-    case "note":
-      return <IconNotes />;
     case "success":
       return <IconCircleCheckFilled />;
     case "warning":
@@ -59,8 +55,6 @@ function getCalloutColor(type: CalloutType) {
   switch (type) {
     case "info":
       return "blue";
-    case "note":
-      return "grape";
     case "success":
       return "green";
     case "warning":

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

@@ -1,13 +1,9 @@
-.root {
-  overflow: visible;
-}
-
 .icon {
   font-size: 24px;
   line-height: 1;
   width: 20px;
   height: 20px;
-  margin-inline-end: var(--mantine-spacing-xs);
+  margin-inline-end: var(--mantine-spacing-md);
   margin-top: 4px;
   cursor: pointer;
 }
@@ -15,8 +11,18 @@
 .message {
   font-size: var(--mantine-font-size-md);
   color: var(--mantine-color-default-color);
-  overflow: visible;
+
-  text-overflow: unset;
+  white-space: nowrap;
   word-break: break-word;
   overflow-wrap: break-word;
 }
+
+/*
+    @mixin where-light {
+        color: var(--mantine-color-default-color);
+    }
+
+    @mixin where-dark {
+        color: var(--mantine-color-default-color);
+    }
+*/

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

@@ -1,267 +0,0 @@
-import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
-import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-import React, { useCallback, useState } from "react";
-import { Node as PMNode } from "prosemirror-model";
-import {
-  EditorMenuProps,
-  ShouldShowProps,
-} from "@/features/editor/components/table/types/types.ts";
-import { ActionIcon, Tooltip, Popover, Button } from "@mantine/core";
-import clsx from "clsx";
-import {
-  IconChevronDown,
-  IconCheck,
-  IconColumns2,
-  IconColumns3,
-  IconLayoutSidebar,
-  IconLayoutSidebarRight,
-  IconLayoutAlignCenter,
-} from "@tabler/icons-react";
-import { isTextSelected } from "@docmost/editor-ext";
-import type { WidthMode, ColumnsLayout } from "@docmost/editor-ext";
-import { useTranslation } from "react-i18next";
-import classes from "../common/toolbar-menu.module.css";
-
-type LayoutPreset = {
-  layout: ColumnsLayout;
-  label: string;
-  icon: React.ElementType;
-};
-
-const twoColumnPresets: LayoutPreset[] = [
-  { layout: "two_equal", label: "Equal columns", icon: IconColumns2 },
-  {
-    layout: "two_left_sidebar",
-    label: "Left sidebar",
-    icon: IconLayoutSidebar,
-  },
-  {
-    layout: "two_right_sidebar",
-    label: "Right sidebar",
-    icon: IconLayoutSidebarRight,
-  },
-];
-
-const threeColumnPresets: LayoutPreset[] = [
-  { layout: "three_equal", label: "Equal columns", icon: IconColumns3 },
-  {
-    layout: "three_with_sidebars",
-    label: "Wide center",
-    icon: IconLayoutAlignCenter,
-  },
-  {
-    layout: "three_left_wide",
-    label: "Left wide",
-    icon: IconLayoutSidebarRight,
-  },
-  { layout: "three_right_wide", label: "Right wide", icon: IconLayoutSidebar
-  },
-];
-
-function getPresetsForCount(count: number): LayoutPreset[] {
-  if (count === 2) return twoColumnPresets;
-  if (count === 3) return threeColumnPresets;
-  return [];
-}
-
-export function ColumnsMenu({ editor }: EditorMenuProps) {
-  const { t } = useTranslation();
-  const [isCountOpen, setIsCountOpen] = useState(false);
-
-  const nodesWithMenus = [
-    "callout",
-    "image",
-    "video",
-    "drawio",
-    "excalidraw",
-    "table",
-  ];
-
-  const shouldShow = useCallback(
-    ({ state }: ShouldShowProps) => {
-      if (!state) return false;
-      if (!editor.isActive("columns")) return false;
-      if (isTextSelected(editor)) return false;
-      if (nodesWithMenus.some((name) => editor.isActive(name))) return false;
-
-      const parent = findParentNode(
-        (node: PMNode) => node.type.name === "columns",
-      )(state.selection);
-      if (!parent) return false;
-
-      const dom = editor.view.nodeDOM(parent.pos) as HTMLElement;
-      if (!dom) return false;
-
-      const rect = dom.getBoundingClientRect();
-      return rect.bottom > 0 && rect.top < window.innerHeight;
-    },
-    [editor],
-  );
-
-  const editorState = useEditorState({
-    editor,
-    selector: (ctx) => {
-      if (!ctx.editor) return null;
-
-      const { selection } = ctx.editor.state;
-      const parent = findParentNode(
-        (node: PMNode) => node.type.name === "columns",
-      )(selection);
-
-      return {
-        columnCount: parent?.node.childCount || 2,
-        layout: (parent?.node.attrs.layout as ColumnsLayout) || "two_equal",
-        isNormal: ctx.editor.isActive("columns", { widthMode: "normal" }),
-        isWide: ctx.editor.isActive("columns", { widthMode: "wide" }),
-      };
-    },
-  });
-
-  const getReferencedVirtualElement = useCallback(() => {
-    if (!editor) return;
-    const { selection } = editor.state;
-    const predicate = (node: PMNode) => node.type.name === "columns";
-    const parent = findParentNode(predicate)(selection);
-
-    if (parent) {
-      const dom = editor.view.nodeDOM(parent?.pos) as HTMLElement;
-      const domRect = dom.getBoundingClientRect();
-
-      // Columns entirely out of viewport — return real rect so menu goes off-screen
-      if (domRect.bottom <= 0 || domRect.top >= window.innerHeight) {
-        return {
-          getBoundingClientRect: () => domRect,
-          getClientRects: () => [domRect],
-        };
-      }
-
-      // Clamp bottom so menu stays within viewport when columns extend below it
-      // 55px = 15px offset + ~40px menu height
-      const maxBottom = window.innerHeight - 55;
-      if (domRect.bottom > maxBottom) {
-        const clamped = new DOMRect(
-          domRect.x,
-          domRect.y,
-          domRect.width,
-          maxBottom - domRect.y,
-        );
-        return {
-          getBoundingClientRect: () => clamped,
-          getClientRects: () => [clamped],
-        };
-      }
-
-      return {
-        getBoundingClientRect: () => domRect,
-        getClientRects: () => [domRect],
-      };
-    }
-
-    const domRect = posToDOMRect(editor.view, selection.from, selection.to);
-    return {
-      getBoundingClientRect: () => domRect,
-      getClientRects: () => [domRect],
-    };
-  }, [editor]);
-
-  const setColumnCount = useCallback(
-    (count: number) => {
-      editor
-        .chain()
-        .focus(undefined, { scrollIntoView: false })
-        .setColumnCount(count)
-        .run();
-      setIsCountOpen(false);
-    },
-    [editor],
-  );
-
-  const setLayout = useCallback(
-    (layout: ColumnsLayout) => {
-      editor
-        .chain()
-        .focus(undefined, { scrollIntoView: false })
-        .setColumnsLayout(layout)
-        .run();
-    },
-    [editor],
-  );
-
-  const columnCount = editorState?.columnCount || 2;
-  const currentLayout = editorState?.layout || "two_equal";
-  const presets = getPresetsForCount(columnCount);
-
-  return (
-    <BaseBubbleMenu
-      editor={editor}
-      pluginKey="columns-menu"
-      updateDelay={0}
-      getReferencedVirtualElement={getReferencedVirtualElement}
-      options={{
-        placement: "bottom",
-        offset: {
-          mainAxis: 5,
-        },
-        flip: false,
-      }}
-      shouldShow={shouldShow}
-    >
-      <div className={classes.toolbar}>
-        <Popover opened={isCountOpen} onChange={setIsCountOpen} withArrow>
-          <Popover.Target>
-            <Button
-              variant="subtle"
-              color="dark"
-              size="compact-sm"
-              rightSection={<IconChevronDown size={12} />}
-              onClick={() => setIsCountOpen(!isCountOpen)}
-              aria-label={t("Column count")}
-            >
-              {t("{{count}} Columns", { count: columnCount })}
-            </Button>
-          </Popover.Target>
-          <Popover.Dropdown p={4}>
-            <Button.Group orientation="vertical">
-              {[2, 3, 4, 5].map((n) => (
-                <Button
-                  key={n}
-                  variant={n === columnCount ? "light" : "subtle"}
-                  color={n === columnCount ? "blue" : "dark"}
-                  justify="space-between"
-                  fullWidth
-                  rightSection={
-                    n === columnCount ? <IconCheck size={14} /> : null
-                  }
-                  onClick={() => setColumnCount(n)}
-                  size="xs"
-                >
-                  {t("{{count}} Columns", { count: n })}
-                </Button>
-              ))}
-            </Button.Group>
-          </Popover.Dropdown>
-        </Popover>
-
-        {presets.length > 0 && <div className={classes.divider} />}
-
-        {presets.map((preset) => (
-          <Tooltip key={preset.layout} position="top" label={t(preset.label)}>
-            <ActionIcon
-              onClick={() => setLayout(preset.layout)}
-              size="lg"
-              aria-label={t(preset.label)}
-              variant="subtle"
-              className={clsx({
-                [classes.active]: currentLayout === preset.layout,
-              })}
-            >
-              <preset.icon size={18} />
-            </ActionIcon>
-          </Tooltip>
-        ))}
-      </div>
-    </BaseBubbleMenu>
-  );
-}
-
-export default ColumnsMenu;

apps/client/src/features/editor/components/common/node-resize-handles.ts

@@ -1,35 +0,0 @@
-import type { ResizableNodeViewDirection } from "@tiptap/core";
-import classes from "./node-resize.module.css";
-
-export function createResizeHandle(
-  direction: ResizableNodeViewDirection,
-): HTMLElement {
-  const handle = document.createElement("div");
-  handle.dataset.resizeHandle = direction;
-  handle.style.position = "absolute";
-  handle.className = classes.handle;
-
-  if (direction === "left") {
-    handle.style.left = "-8px";
-    handle.style.top = "0";
-    handle.style.bottom = "0";
-  } else if (direction === "right") {
-    handle.style.right = "-8px";
-    handle.style.top = "0";
-    handle.style.bottom = "0";
-  }
-
-  const bar = document.createElement("div");
-  bar.className = classes.handleBar;
-  handle.appendChild(bar);
-
-  return handle;
-}
-
-export function buildResizeClasses(nodeClass: string) {
-  return {
-    container: `${classes.container} ${nodeClass}`,
-    wrapper: classes.wrapper,
-    resizing: classes.resizing,
-  };
-}

apps/client/src/features/editor/components/common/node-resize.module.css

@@ -1,65 +0,0 @@
-.container {
-  display: flex;
-}
-
-.wrapper {
-  position: relative;
-  border-radius: 8px;
-  overflow: visible;
-  max-width: 100%;
-}
-
-.wrapper img,
-.wrapper video {
-  height: auto !important;
-}
-
-.resizing {
-  user-select: none;
-}
-
-.handle {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: ew-resize;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  z-index: 2;
-}
-
-.handle[data-resize-handle="left"] {
-  left: -8px;
-}
-
-.handle[data-resize-handle="right"] {
-  right: -8px;
-}
-
-.wrapper:hover .handle {
-  opacity: 1;
-}
-
-.resizing .handle {
-  opacity: 1;
-}
-
-.handleBar {
-  width: 4px;
-  height: 48px;
-  border-radius: 4px;
-  transition: background-color 0.15s ease;
-  background-color: light-dark(var(--mantine-color-blue-4), var(--mantine-color-blue-5));
-}
-
-.handle:hover .handleBar {
-  background-color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
-}
-
-.resizing .handleBar {
-  background-color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
-}

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

@@ -1,29 +0,0 @@
-.toolbar {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 3px;
-  border-radius: 8px;
-  border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
-  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
-  box-shadow: 0 2px 12px light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.35));
-}
-
-.toolbar :global(.mantine-ActionIcon-root) {
-  --ai-color: light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-4)) !important;
-  --ai-hover: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5)) !important;
-}
-
-.toolbar .active {
-    --ai-color: light-dark(var(--mantine-color-blue-7), var(--mantine-color-blue-3)) !important;
-    --ai-hover: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-5)) !important;
-    background-color: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-5));
-}
-
-.divider {
-  width: 1px;
-  height: 16px;
-  align-self: center;
-  margin: 0 2px;
-  background-color: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-3));
-}

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

@@ -1,41 +1,24 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-import { useCallback, useRef, useState } from "react";
+import { useCallback } from "react";
 import { Node as PMNode } from "prosemirror-model";
 import {
   EditorMenuProps,
   ShouldShowProps,
 } from "@/features/editor/components/table/types/types.ts";
-import { ActionIcon, Modal, Tooltip, useComputedColorScheme } from "@mantine/core";
+import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
-import { useDisclosure } from "@mantine/hooks";
-import clsx from "clsx";
-import {
-  IconLayoutAlignCenter,
-  IconLayoutAlignLeft,
-  IconLayoutAlignRight,
-  IconDownload,
-  IconEdit,
-  IconTrash,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { getDrawioUrl, getFileUrl } from "@/lib/config.ts";
-import { uploadFile } from "@/features/page/services/page-service.ts";
-import {
-  DrawIoEmbed,
-  DrawIoEmbedRef,
-  EventExit,
-  EventSave,
-} from "react-drawio";
-import { decodeBase64ToSvgString, svgStringToFile } from "@/lib/utils";
-import { IAttachment } from "@/features/attachments/types/attachment.types";
-import classes from "../common/toolbar-menu.module.css";
 
 export function DrawioMenu({ editor }: EditorMenuProps) {
-  const { t } = useTranslation();
+  const shouldShow = useCallback(
-  const [opened, { open, close }] = useDisclosure(false);
+    ({ state }: ShouldShowProps) => {
-  const [initialXML, setInitialXML] = useState<string>("");
+      if (!state) {
-  const drawioRef = useRef<DrawIoEmbedRef>(null);
+        return false;
-  const computedColorScheme = useComputedColorScheme();
+      }
+
+      return editor.isActive("drawio") && editor.getAttributes("drawio")?.src;
+    },
+    [editor],
+  );
 
   const editorState = useEditorState({
     editor,
@@ -47,26 +30,11 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
       const drawioAttr = ctx.editor.getAttributes("drawio");
       return {
         isDrawio: ctx.editor.isActive("drawio"),
-        isAlignLeft: ctx.editor.isActive("drawio", { align: "left" }),
+        width: drawioAttr?.width ? parseInt(drawioAttr.width) : null,
-        isAlignCenter: ctx.editor.isActive("drawio", { align: "center" }),
-        isAlignRight: ctx.editor.isActive("drawio", { align: "right" }),
-        src: drawioAttr?.src || null,
-        attachmentId: drawioAttr?.attachmentId || null,
       };
     },
   });
 
-  const shouldShow = useCallback(
-    ({ state }: ShouldShowProps) => {
-      if (!state) {
-        return false;
-      }
-
-      return editor.isActive("drawio") && editor.getAttributes("drawio")?.src;
-    },
-    [editor],
-  );
-
   const getReferencedVirtualElement = useCallback(() => {
     if (!editor) return;
     const { selection } = editor.state;
@@ -89,218 +57,38 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
     };
   }, [editor]);
 
-  const alignLeft = useCallback(() => {
+  const onWidthChange = useCallback(
-    editor
+    (value: number) => {
-      .chain()
+      editor.commands.updateAttributes("drawio", { width: `${value}%` });
-      .focus(undefined, { scrollIntoView: false })
-      .setDrawioAlign("left")
-      .run();
-  }, [editor]);
-
-  const alignCenter = useCallback(() => {
-    editor
-      .chain()
-      .focus(undefined, { scrollIntoView: false })
-      .setDrawioAlign("center")
-      .run();
-  }, [editor]);
-
-  const alignRight = useCallback(() => {
-    editor
-      .chain()
-      .focus(undefined, { scrollIntoView: false })
-      .setDrawioAlign("right")
-      .run();
-  }, [editor]);
-
-  const handleDownload = useCallback(() => {
-    if (!editorState?.src) return;
-    const url = getFileUrl(editorState.src);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "";
-    a.click();
-  }, [editorState?.src]);
-
-  const handleDelete = useCallback(() => {
-    editor.commands.deleteSelection();
-  }, [editor]);
-
-  const handleOpen = useCallback(async () => {
-    if (!editorState?.src) return;
-
-    try {
-      const url = getFileUrl(editorState.src);
-      const request = await fetch(url, {
-        credentials: "include",
-        cache: "no-store",
-      });
-      const blob = await request.blob();
-
-      const reader = new FileReader();
-      reader.readAsDataURL(blob);
-      reader.onloadend = () => {
-        const base64data = (reader.result || "") as string;
-        setInitialXML(base64data);
-      };
-    } catch (err) {
-      console.error(err);
-    } finally {
-      open();
-    }
-  }, [editorState?.src, open]);
-
-  const handleSave = useCallback(
-    async (data: EventSave) => {
-      const svgString = decodeBase64ToSvgString(data.xml);
-      const fileName = "diagram.drawio.svg";
-      const drawioSVGFile = await svgStringToFile(svgString, fileName);
-
-      // @ts-ignore
-      const pageId = editor.storage?.pageId;
-      const attachmentId = editorState?.attachmentId;
-
-      let attachment: IAttachment = null;
-      if (attachmentId) {
-        attachment = await uploadFile(drawioSVGFile, pageId, attachmentId);
-      } else {
-        attachment = await uploadFile(drawioSVGFile, pageId);
-      }
-
-      editor.commands.updateAttributes("drawio", {
-        src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
-        title: attachment.fileName,
-        size: attachment.fileSize,
-        attachmentId: attachment.id,
-      });
-
-      close();
     },
-    [editor, editorState?.attachmentId, close],
+    [editor],
   );
 
   return (
-    <>
+    <BaseBubbleMenu
-      <BaseBubbleMenu
+      editor={editor}
-        editor={editor}
+      pluginKey={`drawio-menu`}
-        pluginKey={`drawio-menu`}
+      updateDelay={0}
-        updateDelay={0}
+      getReferencedVirtualElement={getReferencedVirtualElement}
-        getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{
-        options={{
+        placement: "top",
-          placement: "top",
+        offset: 8,
-          offset: 8,
+        flip: false,
-          flip: false,
+      }}
+      shouldShow={shouldShow}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
         }}
-        shouldShow={shouldShow}
       >
-        <div className={classes.toolbar}>
+        {editorState?.width && (
-          <Tooltip position="top" label={t("Align left")}>
+          <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
-            <ActionIcon
+        )}
-              onClick={alignLeft}
+      </div>
-              size="lg"
+    </BaseBubbleMenu>
-              aria-label={t("Align left")}
-              variant="subtle"
-              className={clsx({ [classes.active]: editorState?.isAlignLeft })}
-            >
-              <IconLayoutAlignLeft size={18} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip position="top" label={t("Align center")}>
-            <ActionIcon
-              onClick={alignCenter}
-              size="lg"
-              aria-label={t("Align center")}
-              variant="subtle"
-              className={clsx({ [classes.active]: editorState?.isAlignCenter })}
-            >
-              <IconLayoutAlignCenter size={18} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip position="top" label={t("Align right")}>
-            <ActionIcon
-              onClick={alignRight}
-              size="lg"
-              aria-label={t("Align right")}
-              variant="subtle"
-              className={clsx({ [classes.active]: editorState?.isAlignRight })}
-            >
-              <IconLayoutAlignRight size={18} />
-            </ActionIcon>
-          </Tooltip>
-
-          <div className={classes.divider} />
-
-          <Tooltip position="top" label={t("Edit")}>
-            <ActionIcon
-              onClick={handleOpen}
-              size="lg"
-              aria-label={t("Edit")}
-              variant="subtle"
-            >
-              <IconEdit size={18} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip position="top" label={t("Download")}>
-            <ActionIcon
-              onClick={handleDownload}
-              size="lg"
-              aria-label={t("Download")}
-              variant="subtle"
-            >
-              <IconDownload size={18} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip position="top" label={t("Delete")}>
-            <ActionIcon
-              onClick={handleDelete}
-              size="lg"
-              aria-label={t("Delete")}
-              variant="subtle"
-            >
-              <IconTrash size={18} />
-            </ActionIcon>
-          </Tooltip>
-        </div>
-      </BaseBubbleMenu>
-
-      <Modal.Root opened={opened} onClose={close} fullScreen>
-        <Modal.Overlay />
-        <Modal.Content style={{ overflow: "hidden" }}>
-          <Modal.Body>
-            <div style={{ height: "100vh" }}>
-              <DrawIoEmbed
-                ref={drawioRef}
-                xml={initialXML}
-                baseUrl={getDrawioUrl()}
-                urlParameters={{
-                  ui: computedColorScheme === "light" ? "kennedy" : "dark",
-                  spin: true,
-                  libraries: true,
-                  saveAndExit: true,
-                  noSaveBtn: true,
-                }}
-                onSave={(data: EventSave) => {
-                  if (data.parentEvent !== "save") {
-                    return;
-                  }
-                  handleSave(data);
-                }}
-                onClose={(data: EventExit) => {
-                  if (data.parentEvent) {
-                    return;
-                  }
-                  close();
-                }}
-              />
-            </div>
-          </Modal.Body>
-        </Modal.Content>
-      </Modal.Root>
-    </>
   );
 }
 

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

@@ -2,6 +2,7 @@ import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import {
   ActionIcon,
   Card,
+  Image,
   Modal,
   Text,
   useComputedColorScheme,
@@ -9,7 +10,7 @@ import {
 import { useRef, useState } from "react";
 import { uploadFile } from "@/features/page/services/page-service.ts";
 import { useDisclosure } from "@mantine/hooks";
-import { getDrawioUrl } from "@/lib/config.ts";
+import { getDrawioUrl, getFileUrl } from "@/lib/config.ts";
 import {
   DrawIoEmbed,
   DrawIoEmbedRef,
@@ -25,7 +26,7 @@ import { useTranslation } from "react-i18next";
 export default function DrawioView(props: NodeViewProps) {
   const { t } = useTranslation();
   const { node, updateAttributes, editor, selected } = props;
-  const { attachmentId } = node.attrs;
+  const { src, title, width, attachmentId } = node.attrs;
   const drawioRef = useRef<DrawIoEmbedRef>(null);
   const [initialXML, setInitialXML] = useState<string>("");
   const [opened, { open, close }] = useDisclosure(false);
@@ -35,11 +36,33 @@ export default function DrawioView(props: NodeViewProps) {
     if (!editor.isEditable) {
       return;
     }
-    open();
+
+    try {
+      if (src) {
+        const url = getFileUrl(src);
+        const request = await fetch(url, {
+          credentials: "include",
+          cache: "no-store",
+        });
+        const blob = await request.blob();
+
+        const reader = new FileReader();
+        reader.readAsDataURL(blob);
+        reader.onloadend = () => {
+          const base64data = (reader.result || "") as string;
+          setInitialXML(base64data);
+        };
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      open();
+    }
   };
 
   const handleSave = async (data: EventSave) => {
     const svgString = decodeBase64ToSvgString(data.xml);
+
     const fileName = "diagram.drawio.svg";
     const drawioSVGFile = await svgStringToFile(svgString, fileName);
 
@@ -47,6 +70,7 @@ export default function DrawioView(props: NodeViewProps) {
     const pageId = editor.storage?.pageId;
 
     let attachment: IAttachment = null;
+
     if (attachmentId) {
       attachment = await uploadFile(drawioSVGFile, pageId, attachmentId);
     } else {
@@ -82,12 +106,14 @@ export default function DrawioView(props: NodeViewProps) {
                   noSaveBtn: true,
                 }}
                 onSave={(data: EventSave) => {
+                  // If the save is triggered by another event, then do nothing
                   if (data.parentEvent !== "save") {
                     return;
                   }
                   handleSave(data);
                 }}
                 onClose={(data: EventExit) => {
+                  // If the exit is triggered by another event, then do nothing
                   if (data.parentEvent) {
                     return;
                   }
@@ -99,28 +125,62 @@ export default function DrawioView(props: NodeViewProps) {
         </Modal.Content>
       </Modal.Root>
 
-      <Card
+      {src ? (
-        radius="md"
+        <div style={{ position: "relative" }}>
-        onClick={(e) => e.detail === 2 && handleOpen()}
+          <Image
-        p="xs"
+            onClick={(e) => e.detail === 2 && handleOpen()}
-        style={{
+            radius="md"
-          display: "flex",
+            fit="contain"
-          justifyContent: "center",
+            w={width}
-          alignItems: "center",
+            src={getFileUrl(src)}
-        }}
+            alt={title}
-        withBorder
+            className={clsx(
-        className={clsx(selected ? "ProseMirror-selectednode" : "")}
+              selected ? "ProseMirror-selectednode" : "",
-      >
+              "alignCenter",
-        <div style={{ display: "flex", alignItems: "center" }}>
+            )}
-          <ActionIcon variant="transparent" color="gray">
+          />
-            <IconEdit size={18} />
-          </ActionIcon>
 
-          <Text component="span" size="lg" c="dimmed">
+          {selected && editor.isEditable && (
-            {t("Double-click to edit Draw.io diagram")}
+            <ActionIcon
-          </Text>
+              onClick={handleOpen}
+              variant="default"
+              color="gray"
+              mx="xs"
+              className="print-hide"
+              style={{
+                position: "absolute",
+                top: 8,
+                right: 8,
+              }}
+            >
+              <IconEdit size={18} />
+            </ActionIcon>
+          )}
         </div>
-      </Card>
+      ) : (
+        <Card
+          radius="md"
+          onClick={(e) => e.detail === 2 && handleOpen()}
+          p="xs"
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+          withBorder
+          className={clsx(selected ? "ProseMirror-selectednode" : "")}
+        >
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <ActionIcon variant="transparent" color="gray">
+              <IconEdit size={18} />
+            </ActionIcon>
+
+            <Text component="span" size="lg" c="dimmed">
+              {t("Double-click to edit Draw.io diagram")}
+            </Text>
+          </div>
+        </Card>
+      )}
     </NodeViewWrapper>
   );
 }

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

@@ -1,57 +1,26 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-import { lazy, Suspense, useCallback, useState } from "react";
+import { useCallback } from "react";
 import { Node as PMNode } from "prosemirror-model";
 import {
   EditorMenuProps,
   ShouldShowProps,
 } from "@/features/editor/components/table/types/types.ts";
-import {
+import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
-  ActionIcon,
-  Button,
-  Group,
-  Tooltip,
-  useComputedColorScheme,
-} from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import clsx from "clsx";
-import {
-  IconLayoutAlignCenter,
-  IconLayoutAlignLeft,
-  IconLayoutAlignRight,
-  IconDownload,
-  IconEdit,
-  IconTrash,
-} from "@tabler/icons-react";
-import { useTranslation } from "react-i18next";
-import { getFileUrl } from "@/lib/config.ts";
-import { uploadFile } from "@/features/page/services/page-service.ts";
-import { svgStringToFile } from "@/lib";
-import "@excalidraw/excalidraw/index.css";
-import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
-import { IAttachment } from "@/features/attachments/types/attachment.types";
-import ReactClearModal from "react-clear-modal";
-import { useHandleLibrary } from "@excalidraw/excalidraw";
-import { localStorageLibraryAdapter } from "@/features/editor/components/excalidraw/excalidraw-utils.ts";
-import classes from "../common/toolbar-menu.module.css";
-
-const ExcalidrawComponent = lazy(() =>
-  import("@excalidraw/excalidraw").then((module) => ({
-    default: module.Excalidraw,
-  })),
-);
 
 export function ExcalidrawMenu({ editor }: EditorMenuProps) {
-  const { t } = useTranslation();
+  const shouldShow = useCallback(
-  const [opened, { open, close }] = useDisclosure(false);
+    ({ state }: ShouldShowProps) => {
-  const [excalidrawAPI, setExcalidrawAPI] =
+      if (!state) {
-    useState<ExcalidrawImperativeAPI>(null);
+        return false;
-  useHandleLibrary({
+      }
-    excalidrawAPI,
+
-    adapter: localStorageLibraryAdapter,
+      return (
-  });
+        editor.isActive("excalidraw") && editor.getAttributes("excalidraw")?.src
-  const [excalidrawData, setExcalidrawData] = useState<any>(null);
+      );
-  const computedColorScheme = useComputedColorScheme();
+    },
+    [editor],
+  );
 
   const editorState = useEditorState({
     editor,
@@ -63,29 +32,11 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
       const excalidrawAttr = ctx.editor.getAttributes("excalidraw");
       return {
         isExcalidraw: ctx.editor.isActive("excalidraw"),
-        isAlignLeft: ctx.editor.isActive("excalidraw", { align: "left" }),
+        width: excalidrawAttr?.width ? parseInt(excalidrawAttr.width) : null,
-        isAlignCenter: ctx.editor.isActive("excalidraw", { align: "center" }),
-        isAlignRight: ctx.editor.isActive("excalidraw", { align: "right" }),
-        src: excalidrawAttr?.src || null,
-        attachmentId: excalidrawAttr?.attachmentId || null,
       };
     },
   });
 
-  const shouldShow = useCallback(
-    ({ state }: ShouldShowProps) => {
-      if (!state) {
-        return false;
-      }
-
-      return (
-        editor.isActive("excalidraw") &&
-        editor.getAttributes("excalidraw")?.src
-      );
-    },
-    [editor],
-  );
-
   const getReferencedVirtualElement = useCallback(() => {
     if (!editor) return;
     const { selection } = editor.state;
@@ -108,248 +59,38 @@ export function ExcalidrawMenu({ editor }: EditorMenuProps) {
     };
   }, [editor]);
 
-  const alignLeft = useCallback(() => {
+  const onWidthChange = useCallback(
-    editor
+    (value: number) => {
-      .chain()
+      editor.commands.updateAttributes("excalidraw", { width: `${value}%` });
-      .focus(undefined, { scrollIntoView: false })
+    },
-      .setExcalidrawAlign("left")
+    [editor],
-      .run();
+  );
-  }, [editor]);
-
-  const alignCenter = useCallback(() => {
-    editor
-      .chain()
-      .focus(undefined, { scrollIntoView: false })
-      .setExcalidrawAlign("center")
-      .run();
-  }, [editor]);
-
-  const alignRight = useCallback(() => {
-    editor
-      .chain()
-      .focus(undefined, { scrollIntoView: false })
-      .setExcalidrawAlign("right")
-      .run();
-  }, [editor]);
-
-  const handleDownload = useCallback(() => {
-    if (!editorState?.src) return;
-    const url = getFileUrl(editorState.src);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = "";
-    a.click();
-  }, [editorState?.src]);
-
-  const handleDelete = useCallback(() => {
-    editor.commands.deleteSelection();
-  }, [editor]);
-
-  const handleOpen = useCallback(async () => {
-    if (!editorState?.src) return;
-
-    try {
-      const url = getFileUrl(editorState.src);
-      const request = await fetch(url, {
-        credentials: "include",
-        cache: "no-store",
-      });
-
-      const { loadFromBlob } = await import("@excalidraw/excalidraw");
-      const data = await loadFromBlob(await request.blob(), null, null);
-      setExcalidrawData(data);
-    } catch (err) {
-      console.error(err);
-    } finally {
-      open();
-    }
-  }, [editorState?.src, open]);
-
-  const handleSave = useCallback(async () => {
-    if (!excalidrawAPI) {
-      return;
-    }
-
-    const { exportToSvg } = await import("@excalidraw/excalidraw");
-
-    const svg = await exportToSvg({
-      elements: excalidrawAPI?.getSceneElements(),
-      appState: {
-        exportEmbedScene: true,
-        exportWithDarkMode: false,
-      },
-      files: excalidrawAPI?.getFiles(),
-    });
-
-    const serializer = new XMLSerializer();
-    let svgString = serializer.serializeToString(svg);
-
-    svgString = svgString.replace(
-      /https:\/\/unpkg\.com\/@excalidraw\/excalidraw@undefined/g,
-      "https://unpkg.com/@excalidraw/excalidraw@latest",
-    );
-
-    const fileName = "diagram.excalidraw.svg";
-    const excalidrawSvgFile = await svgStringToFile(svgString, fileName);
-
-    // @ts-ignore
-    const pageId = editor.storage?.pageId;
-    const attachmentId = editorState?.attachmentId;
-
-    let attachment: IAttachment = null;
-    if (attachmentId) {
-      attachment = await uploadFile(excalidrawSvgFile, pageId, attachmentId);
-    } else {
-      attachment = await uploadFile(excalidrawSvgFile, pageId);
-    }
-
-    editor.commands.updateAttributes("excalidraw", {
-      src: `/api/files/${attachment.id}/${attachment.fileName}?t=${new Date(attachment.updatedAt).getTime()}`,
-      title: attachment.fileName,
-      size: attachment.fileSize,
-      attachmentId: attachment.id,
-    });
-
-    close();
-  }, [editor, excalidrawAPI, editorState?.attachmentId, close]);
 
   return (
-    <>
+    <BaseBubbleMenu
-      <BaseBubbleMenu
+      editor={editor}
-        editor={editor}
+      pluginKey={`excalidraw-menu`}
-        pluginKey={`excalidraw-menu`}
+      updateDelay={0}
-        updateDelay={0}
+      getReferencedVirtualElement={getReferencedVirtualElement}
-        getReferencedVirtualElement={getReferencedVirtualElement}
+      options={{
-        options={{
+        placement: "top",
-          placement: "top",
+        offset: 8,
-          offset: 8,
+        flip: false,
-          flip: false,
+      }}
-        }}
+      shouldShow={shouldShow}
-        shouldShow={shouldShow}
+    >
-      >
+      <div
-        <div className={classes.toolbar}>
-          <Tooltip position="top" label={t("Align left")}>
-            <ActionIcon
-              onClick={alignLeft}
-              size="lg"
-              aria-label={t("Align left")}
-              variant="subtle"
-              className={clsx({
-                [classes.active]: editorState?.isAlignLeft,
-              })}
-            >
-              <IconLayoutAlignLeft size={18} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip position="top" label={t("Align center")}>
-            <ActionIcon
-              onClick={alignCenter}
-              size="lg"
-              aria-label={t("Align center")}
-              variant="subtle"
-              className={clsx({
-                [classes.active]: editorState?.isAlignCenter,
-              })}
-            >
-              <IconLayoutAlignCenter size={18} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip position="top" label={t("Align right")}>
-            <ActionIcon
-              onClick={alignRight}
-              size="lg"
-              aria-label={t("Align right")}
-              variant="subtle"
-              className={clsx({
-                [classes.active]: editorState?.isAlignRight,
-              })}
-            >
-              <IconLayoutAlignRight size={18} />
-            </ActionIcon>
-          </Tooltip>
-
-          <div className={classes.divider} />
-
-          <Tooltip position="top" label={t("Edit")}>
-            <ActionIcon
-              onClick={handleOpen}
-              size="lg"
-              aria-label={t("Edit")}
-              variant="subtle"
-            >
-              <IconEdit size={18} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip position="top" label={t("Download")}>
-            <ActionIcon
-              onClick={handleDownload}
-              size="lg"
-              aria-label={t("Download")}
-              variant="subtle"
-            >
-              <IconDownload size={18} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip position="top" label={t("Delete")}>
-            <ActionIcon
-              onClick={handleDelete}
-              size="lg"
-              aria-label={t("Delete")}
-              variant="subtle"
-            >
-              <IconTrash size={18} />
-            </ActionIcon>
-          </Tooltip>
-        </div>
-      </BaseBubbleMenu>
-
-      <ReactClearModal
         style={{
-          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          display: "flex",
-          padding: 0,
+          flexDirection: "column",
-          zIndex: 200,
+          alignItems: "center",
-        }}
-        isOpen={opened}
-        onRequestClose={close}
-        disableCloseOnBgClick={true}
-        contentProps={{
-          style: {
-            padding: 0,
-            width: "90vw",
-          },
         }}
       >
-        <Group
+        {editorState?.width && (
-          justify="flex-end"
+          <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
-          wrap="nowrap"
+        )}
-          bg="var(--mantine-color-body)"
+      </div>
-          p="xs"
+    </BaseBubbleMenu>
-        >
-          <Button onClick={handleSave} size={"compact-sm"}>
-            {t("Save & Exit")}
-          </Button>
-          <Button onClick={close} color="red" size={"compact-sm"}>
-            {t("Exit")}
-          </Button>
-        </Group>
-        <div style={{ height: "90vh" }}>
-          <Suspense fallback={null}>
-            <ExcalidrawComponent
-              excalidrawAPI={(api) => setExcalidrawAPI(api)}
-              initialData={{
-                ...excalidrawData,
-                scrollToContent: true,
-              }}
-              theme={computedColorScheme}
-            />
-          </Suspense>
-        </div>
-      </ReactClearModal>
-    </>
   );
 }
 

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

@@ -4,24 +4,28 @@ import {
   Button,
   Card,
   Group,
+  Image,
   Text,
   useComputedColorScheme,
 } from "@mantine/core";
-import { lazy, Suspense, useState } from "react";
+import { useState } from "react";
 import { uploadFile } from "@/features/page/services/page-service.ts";
 import { svgStringToFile } from "@/lib";
 import { useDisclosure } from "@mantine/hooks";
+import { getFileUrl } from "@/lib/config.ts";
 import "@excalidraw/excalidraw/index.css";
 import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
 import { IAttachment } from "@/features/attachments/types/attachment.types";
 import ReactClearModal from "react-clear-modal";
 import clsx from "clsx";
 import { IconEdit } from "@tabler/icons-react";
+import { lazy } from "react";
+import { Suspense } from "react";
 import { useTranslation } from "react-i18next";
 import { useHandleLibrary } from "@excalidraw/excalidraw";
 import { localStorageLibraryAdapter } from "@/features/editor/components/excalidraw/excalidraw-utils.ts";
 
-const ExcalidrawComponent = lazy(() =>
+const Excalidraw = lazy(() =>
   import("@excalidraw/excalidraw").then((module) => ({
     default: module.Excalidraw,
   })),
@@ -30,7 +34,7 @@ const ExcalidrawComponent = lazy(() =>
 export default function ExcalidrawView(props: NodeViewProps) {
   const { t } = useTranslation();
   const { node, updateAttributes, editor, selected } = props;
-  const { attachmentId } = node.attrs;
+  const { src, title, width, attachmentId } = node.attrs;
 
   const [excalidrawAPI, setExcalidrawAPI] =
     useState<ExcalidrawImperativeAPI>(null);
@@ -46,7 +50,25 @@ export default function ExcalidrawView(props: NodeViewProps) {
     if (!editor.isEditable) {
       return;
     }
-    open();
+
+    try {
+      if (src) {
+        const url = getFileUrl(src);
+        const request = await fetch(url, {
+          credentials: "include",
+          cache: "no-store",
+        });
+
+        const { loadFromBlob } = await import("@excalidraw/excalidraw");
+
+        const data = await loadFromBlob(await request.blob(), null, null);
+        setExcalidrawData(data);
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      open();
+    }
   };
 
   const handleSave = async () => {
@@ -129,7 +151,7 @@ export default function ExcalidrawView(props: NodeViewProps) {
         </Group>
         <div style={{ height: "90vh" }}>
           <Suspense fallback={null}>
-            <ExcalidrawComponent
+            <Excalidraw
               excalidrawAPI={(api) => setExcalidrawAPI(api)}
               initialData={{
                 ...excalidrawData,
@@ -141,28 +163,62 @@ export default function ExcalidrawView(props: NodeViewProps) {
         </div>
       </ReactClearModal>
 
-      <Card
+      {src ? (
-        radius="md"
+        <div style={{ position: "relative" }}>
-        onClick={(e) => e.detail === 2 && handleOpen()}
+          <Image
-        p="xs"
+            onClick={(e) => e.detail === 2 && handleOpen()}
-        style={{
+            radius="md"
-          display: "flex",
+            fit="contain"
-          justifyContent: "center",
+            w={width}
-          alignItems: "center",
+            src={getFileUrl(src)}
-        }}
+            alt={title}
-        withBorder
+            className={clsx(
-        className={clsx(selected ? "ProseMirror-selectednode" : "")}
+              selected ? "ProseMirror-selectednode" : "",
-      >
+              "alignCenter",
-        <div style={{ display: "flex", alignItems: "center" }}>
+            )}
-          <ActionIcon variant="transparent" color="gray">
+          />
-            <IconEdit size={18} />
-          </ActionIcon>
 
-          <Text component="span" size="lg" c="dimmed">
+          {selected && editor.isEditable && (
-            {t("Double-click to edit Excalidraw diagram")}
+            <ActionIcon
-          </Text>
+              onClick={handleOpen}
+              variant="default"
+              color="gray"
+              mx="xs"
+              className="print-hide"
+              style={{
+                position: "absolute",
+                top: 8,
+                right: 8,
+              }}
+            >
+              <IconEdit size={18} />
+            </ActionIcon>
+          )}
         </div>
-      </Card>
+      ) : (
+        <Card
+          radius="md"
+          onClick={(e) => e.detail === 2 && handleOpen()}
+          p="xs"
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+          withBorder
+          className={clsx(selected ? "ProseMirror-selectednode" : "")}
+        >
+          <div style={{ display: "flex", alignItems: "center" }}>
+            <ActionIcon variant="transparent" color="gray">
+              <IconEdit size={18} />
+            </ActionIcon>
+
+            <Text component="span" size="lg" c="dimmed">
+              {t("Double-click to edit Excalidraw diagram")}
+            </Text>
+          </div>
+        </Card>
+      )}
     </NodeViewWrapper>
   );
 }

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

@@ -1,29 +1,22 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-import React, { useCallback, useRef } from "react";
+import React, { useCallback } from "react";
 import { Node as PMNode } from "prosemirror-model";
 import {
   EditorMenuProps,
   ShouldShowProps,
 } from "@/features/editor/components/table/types/types.ts";
 import { ActionIcon, Tooltip } from "@mantine/core";
-import clsx from "clsx";
 import {
   IconLayoutAlignCenter,
   IconLayoutAlignLeft,
   IconLayoutAlignRight,
-  IconDownload,
-  IconRefresh,
-  IconTrash,
 } from "@tabler/icons-react";
+import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
 import { useTranslation } from "react-i18next";
-import { getFileUrl } from "@/lib/config.ts";
-import { uploadImageAction } from "@/features/editor/components/image/upload-image-action.tsx";
-import classes from "../common/toolbar-menu.module.css";
 
 export function ImageMenu({ editor }: EditorMenuProps) {
   const { t } = useTranslation();
-  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const editorState = useEditorState({
     editor,
@@ -39,7 +32,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
         isAlignLeft: ctx.editor.isActive("image", { align: "left" }),
         isAlignCenter: ctx.editor.isActive("image", { align: "center" }),
         isAlignRight: ctx.editor.isActive("image", { align: "right" }),
-        src: imageAttrs?.src || null,
+        width: imageAttrs?.width ? parseInt(imageAttrs.width) : null,
       };
     },
   });
@@ -101,40 +94,17 @@ export function ImageMenu({ editor }: EditorMenuProps) {
       .run();
   }, [editor]);
 
-  const handleDownload = useCallback(() => {
+  const onWidthChange = useCallback(
-    if (!editorState?.src) return;
+    (value: number) => {
-    const url = getFileUrl(editorState.src);
+      editor
-    const a = document.createElement("a");
+        .chain()
-    a.href = url;
+        .focus(undefined, { scrollIntoView: false })
-    a.download = "";
+        .setImageWidth(value)
-    a.click();
+        .run();
-  }, [editorState?.src]);
-
-  const handleReplace = useCallback(() => {
-    fileInputRef.current?.click();
-  }, []);
-
-  const handleFileChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const file = e.target.files?.[0];
-      if (!file) return;
-
-      // @ts-ignore
-      const pageId = editor.storage?.pageId;
-      if (pageId) {
-        const pos = editor.state.selection.from;
-        uploadImageAction(file, editor, pos, pageId);
-      }
-      // Reset so the same file can be selected again
-      e.target.value = "";
     },
     [editor],
   );
 
-  const handleDelete = useCallback(() => {
-    editor.commands.deleteSelection();
-  }, [editor]);
-
   return (
     <BaseBubbleMenu
       editor={editor}
@@ -148,14 +118,13 @@ export function ImageMenu({ editor }: EditorMenuProps) {
       }}
       shouldShow={shouldShow}
     >
-      <div className={classes.toolbar}>
+      <ActionIcon.Group className="actionIconGroup">
         <Tooltip position="top" label={t("Align left")}>
           <ActionIcon
             onClick={alignImageLeft}
             size="lg"
             aria-label={t("Align left")}
-            variant="subtle"
+            variant={editorState?.isAlignLeft ? "light" : "default"}
-            className={clsx({ [classes.active]: editorState?.isAlignLeft })}
           >
             <IconLayoutAlignLeft size={18} />
           </ActionIcon>
@@ -166,8 +135,7 @@ export function ImageMenu({ editor }: EditorMenuProps) {
             onClick={alignImageCenter}
             size="lg"
             aria-label={t("Align center")}
-            variant="subtle"
+            variant={editorState?.isAlignCenter ? "light" : "default"}
-            className={clsx({ [classes.active]: editorState?.isAlignCenter })}
           >
             <IconLayoutAlignCenter size={18} />
           </ActionIcon>
@@ -178,56 +146,16 @@ export function ImageMenu({ editor }: EditorMenuProps) {
             onClick={alignImageRight}
             size="lg"
             aria-label={t("Align right")}
-            variant="subtle"
+            variant={editorState?.isAlignRight ? "light" : "default"}
-            className={clsx({ [classes.active]: editorState?.isAlignRight })}
           >
             <IconLayoutAlignRight size={18} />
           </ActionIcon>
         </Tooltip>
+      </ActionIcon.Group>
 
-        <div className={classes.divider} />
+      {editorState?.width && (
-
+        <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
-        <Tooltip position="top" label={t("Download")}>
+      )}
-          <ActionIcon
-            onClick={handleDownload}
-            size="lg"
-            aria-label={t("Download")}
-            variant="subtle"
-          >
-            <IconDownload size={18} />
-          </ActionIcon>
-        </Tooltip>
-
-        <Tooltip position="top" label={t("Replace image")}>
-          <ActionIcon
-            onClick={handleReplace}
-            size="lg"
-            aria-label={t("Replace image")}
-            variant="subtle"
-          >
-            <IconRefresh size={18} />
-          </ActionIcon>
-        </Tooltip>
-
-        <Tooltip position="top" label={t("Delete")}>
-          <ActionIcon
-            onClick={handleDelete}
-            size="lg"
-            aria-label={t("Delete")}
-            variant="subtle"
-          >
-            <IconTrash size={18} />
-          </ActionIcon>
-        </Tooltip>
-      </div>
-
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/*"
-        style={{ display: "none" }}
-        onChange={handleFileChange}
-      />
     </BaseBubbleMenu>
   );
 }

apps/client/src/features/editor/components/image/image-resize-handles.ts

@@ -1,7 +0,0 @@
-import {
-  createResizeHandle,
-  buildResizeClasses,
-} from "../common/node-resize-handles";
-
-export const createImageHandle = createResizeHandle;
-export const imageResizeClasses = buildResizeClasses("node-image");

apps/client/src/features/editor/components/image/image-resize.module.css

@@ -1,64 +0,0 @@
-.container {
-  display: flex;
-}
-
-.wrapper {
-  position: relative;
-  border-radius: 8px;
-  overflow: visible;
-  max-width: 100%;
-}
-
-.wrapper img {
-  height: auto !important;
-}
-
-.resizing {
-  user-select: none;
-}
-
-.handle {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: ew-resize;
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  z-index: 2;
-}
-
-.handle[data-resize-handle="left"] {
-  left: -8px;
-}
-
-.handle[data-resize-handle="right"] {
-  right: -8px;
-}
-
-.wrapper:hover .handle {
-  opacity: 1;
-}
-
-.resizing .handle {
-  opacity: 1;
-}
-
-.handleBar {
-  width: 4px;
-  height: 48px;
-  border-radius: 4px;
-  transition: background-color 0.15s ease;
-  background-color: light-dark(var(--mantine-color-blue-4), var(--mantine-color-blue-5));
-}
-
-.handle:hover .handleBar {
-  background-color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
-}
-
-.resizing .handleBar {
-  background-color: light-dark(var(--mantine-color-blue-6), var(--mantine-color-blue-4));
-}

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

@@ -20,8 +20,6 @@ import {
   IconCalendar,
   IconAppWindow,
   IconSitemap,
-  IconColumns3,
-  IconColumns2,
 } from "@tabler/icons-react";
 import {
   CommandProps,
@@ -33,8 +31,6 @@ import { uploadAttachmentAction } from "@/features/editor/components/attachment/
 import IconExcalidraw from "@/components/icons/icon-excalidraw";
 import IconMermaid from "@/components/icons/icon-mermaid";
 import IconDrawio from "@/components/icons/icon-drawio";
-import { IconColumns4 } from "@/components/icons/icon-columns-4";
-import { IconColumns5 } from "@/components/icons/icon-columns-5";
 import {
   AirtableIcon,
   FigmaIcon,
@@ -394,58 +390,6 @@ const CommandGroups: SlashMenuGroupedItemsType = {
         editor.chain().focus().deleteRange(range).insertSubpages().run();
       },
     },
-    {
-      title: "2 Columns",
-      description: "Split content into two columns.",
-      searchTerms: ["columns", "layout", "split", "side"],
-      icon: IconColumns2,
-      command: ({ editor, range }: CommandProps) =>
-        editor
-          .chain()
-          .focus()
-          .deleteRange(range)
-          .insertColumns({ layout: "two_equal" })
-          .run(),
-    },
-    {
-      title: "3 Columns",
-      description: "Split content into three columns.",
-      searchTerms: ["columns", "layout", "split", "triple"],
-      icon: IconColumns3,
-      command: ({ editor, range }: CommandProps) =>
-        editor
-          .chain()
-          .focus()
-          .deleteRange(range)
-          .insertColumns({ layout: "three_equal" })
-          .run(),
-    },
-    {
-      title: "4 Columns",
-      description: "Split content into four columns.",
-      searchTerms: ["columns", "layout", "split"],
-      icon: IconColumns4,
-      command: ({ editor, range }: CommandProps) =>
-        editor
-          .chain()
-          .focus()
-          .deleteRange(range)
-          .insertColumns({ layout: "four_equal" })
-          .run(),
-    },
-    {
-      title: "5 Columns",
-      description: "Split content into five columns.",
-      searchTerms: ["columns", "layout", "split"],
-      icon: IconColumns5,
-      command: ({ editor, range }: CommandProps) =>
-        editor
-          .chain()
-          .focus()
-          .deleteRange(range)
-          .insertColumns({ layout: "five_equal" })
-          .run(),
-    },
     {
       title: "Iframe embed",
       description: "Embed any Iframe",

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

@@ -95,7 +95,7 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
       <Popover.Target>
         <Tooltip label={t("Background color")} withArrow>
           <ActionIcon
-            variant="subtle"
+            variant="default"
             size="lg"
             aria-label={t("Background color")}
             onClick={() => setOpened(!opened)}

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

@@ -16,7 +16,6 @@ import { useTranslation } from "react-i18next";
 import { TableBackgroundColor } from "./table-background-color";
 import { TableTextAlignment } from "./table-text-alignment";
 import { BubbleMenu } from "@tiptap/react/menus";
-import classes from "../common/toolbar-menu.module.css";
 
 export const TableCellMenu = React.memo(
   ({ editor, appendTo }: EditorMenuProps): JSX.Element => {
@@ -70,16 +69,14 @@ export const TableCellMenu = React.memo(
         }}
         shouldShow={shouldShow}
       >
-        <div className={classes.toolbar}>
+        <ActionIcon.Group>
           <TableBackgroundColor editor={editor} />
           <TableTextAlignment editor={editor} />
 
-          <div className={classes.divider} />
-
           <Tooltip position="top" label={t("Merge cells")}>
             <ActionIcon
               onClick={mergeCells}
-              variant="subtle"
+              variant="default"
               size="lg"
               aria-label={t("Merge cells")}
             >
@@ -90,7 +87,7 @@ export const TableCellMenu = React.memo(
           <Tooltip position="top" label={t("Split cell")}>
             <ActionIcon
               onClick={splitCell}
-              variant="subtle"
+              variant="default"
               size="lg"
               aria-label={t("Split cell")}
             >
@@ -98,12 +95,10 @@ export const TableCellMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <div className={classes.divider} />
-
           <Tooltip position="top" label={t("Delete column")}>
             <ActionIcon
               onClick={deleteColumn}
-              variant="subtle"
+              variant="default"
               size="lg"
               aria-label={t("Delete column")}
             >
@@ -114,7 +109,7 @@ export const TableCellMenu = React.memo(
           <Tooltip position="top" label={t("Delete row")}>
             <ActionIcon
               onClick={deleteRow}
-              variant="subtle"
+              variant="default"
               size="lg"
               aria-label={t("Delete row")}
             >
@@ -122,19 +117,17 @@ export const TableCellMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <div className={classes.divider} />
-
           <Tooltip position="top" label={t("Toggle header cell")}>
             <ActionIcon
               onClick={toggleHeaderCell}
-              variant="subtle"
+              variant="default"
               size="lg"
               aria-label={t("Toggle header cell")}
             >
               <IconTableRow size={18} />
             </ActionIcon>
           </Tooltip>
-        </div>
+        </ActionIcon.Group>
       </BubbleMenu>
     );
   }

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

@@ -18,9 +18,8 @@ import {
   IconTrashX,
 } from "@tabler/icons-react";
 import { BubbleMenu } from "@tiptap/react/menus";
-import { isCellSelection, isTextSelected } from "@docmost/editor-ext";
+import { isCellSelection } from "@docmost/editor-ext";
 import { useTranslation } from "react-i18next";
-import classes from "../common/toolbar-menu.module.css";
 
 export const TableMenu = React.memo(
   ({ editor }: EditorMenuProps): JSX.Element => {
@@ -31,7 +30,6 @@ export const TableMenu = React.memo(
           return false;
         }
 
-        if (isTextSelected(editor)) return false;
         return editor.isActive("table") && !isCellSelection(state.selection);
       },
       [editor]
@@ -120,11 +118,11 @@ export const TableMenu = React.memo(
         }}
         shouldShow={shouldShow}
       >
-        <div className={classes.toolbar}>
+        <ActionIcon.Group>
           <Tooltip position="top" label={t("Add left column")}>
             <ActionIcon
               onClick={addColumnLeft}
-              variant="subtle"
+              variant="default"
               size="lg"
               aria-label={t("Add left column")}
             >
@@ -135,7 +133,7 @@ export const TableMenu = React.memo(
           <Tooltip position="top" label={t("Add right column")}>
             <ActionIcon
               onClick={addColumnRight}
-              variant="subtle"
+              variant="default"
               size="lg"
               aria-label={t("Add right column")}
             >
@@ -146,7 +144,7 @@ export const TableMenu = React.memo(
           <Tooltip position="top" label={t("Delete column")}>
             <ActionIcon
               onClick={deleteColumn}
-              variant="subtle"
+              variant="default"
               size="lg"
               aria-label={t("Delete column")}
             >
@@ -154,12 +152,10 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <div className={classes.divider} />
-
           <Tooltip position="top" label={t("Add row above")}>
             <ActionIcon
               onClick={addRowAbove}
-              variant="subtle"
+              variant="default"
               size="lg"
               aria-label={t("Add row above")}
             >
@@ -170,7 +166,7 @@ export const TableMenu = React.memo(
           <Tooltip position="top" label={t("Add row below")}>
             <ActionIcon
               onClick={addRowBelow}
-              variant="subtle"
+              variant="default"
               size="lg"
               aria-label={t("Add row below")}
             >
@@ -181,7 +177,7 @@ export const TableMenu = React.memo(
           <Tooltip position="top" label={t("Delete row")}>
             <ActionIcon
               onClick={deleteRow}
-              variant="subtle"
+              variant="default"
               size="lg"
               aria-label={t("Delete row")}
             >
@@ -189,12 +185,10 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <div className={classes.divider} />
-
           <Tooltip position="top" label={t("Toggle header row")}>
             <ActionIcon
               onClick={toggleHeaderRow}
-              variant="subtle"
+              variant="default"
               size="lg"
               aria-label={t("Toggle header row")}
             >
@@ -205,7 +199,7 @@ export const TableMenu = React.memo(
           <Tooltip position="top" label={t("Toggle header column")}>
             <ActionIcon
               onClick={toggleHeaderColumn}
-              variant="subtle"
+              variant="default"
               size="lg"
               aria-label={t("Toggle header column")}
             >
@@ -213,19 +207,18 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
-          <div className={classes.divider} />
-
           <Tooltip position="top" label={t("Delete table")}>
             <ActionIcon
               onClick={deleteTable}
-              variant="subtle"
+              variant="default"
               size="lg"
+              color="red"
               aria-label={t("Delete table")}
             >
               <IconTrashX size={18} />
             </ActionIcon>
           </Tooltip>
-        </div>
+        </ActionIcon.Group>
       </BubbleMenu>
     );
   }

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

@@ -88,7 +88,7 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
       <Popover.Target>
         <Tooltip label={t("Text alignment")} withArrow>
           <ActionIcon
-            variant="subtle"
+            variant="default"
             size="lg"
             aria-label={t("Text alignment")}
             onClick={() => setOpened(!opened)}

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

@@ -1,23 +1,19 @@
 import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react/menus";
 import { findParentNode, posToDOMRect, useEditorState } from "@tiptap/react";
-import { useCallback } from "react";
+import React, { useCallback } from "react";
 import { Node as PMNode } from "prosemirror-model";
 import {
   EditorMenuProps,
   ShouldShowProps,
 } from "@/features/editor/components/table/types/types.ts";
 import { ActionIcon, Tooltip } from "@mantine/core";
-import clsx from "clsx";
 import {
   IconLayoutAlignCenter,
   IconLayoutAlignLeft,
   IconLayoutAlignRight,
-  IconDownload,
-  IconTrash,
 } from "@tabler/icons-react";
+import { NodeWidthResize } from "@/features/editor/components/common/node-width-resize.tsx";
 import { useTranslation } from "react-i18next";
-import { getFileUrl } from "@/lib/config.ts";
-import classes from "../common/toolbar-menu.module.css";
 
 export function VideoMenu({ editor }: EditorMenuProps) {
   const { t } = useTranslation();
@@ -36,7 +32,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
         isAlignLeft: ctx.editor.isActive("video", { align: "left" }),
         isAlignCenter: ctx.editor.isActive("video", { align: "center" }),
         isAlignRight: ctx.editor.isActive("video", { align: "right" }),
-        src: videoAttrs?.src || null,
+        width: videoAttrs?.width ? parseInt(videoAttrs.width) : null,
       };
     },
   });
@@ -74,7 +70,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
     };
   }, [editor]);
 
-  const alignLeft = useCallback(() => {
+  const alignVideoLeft = useCallback(() => {
     editor
       .chain()
       .focus(undefined, { scrollIntoView: false })
@@ -82,7 +78,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
       .run();
   }, [editor]);
 
-  const alignCenter = useCallback(() => {
+  const alignVideoCenter = useCallback(() => {
     editor
       .chain()
       .focus(undefined, { scrollIntoView: false })
@@ -90,7 +86,7 @@ export function VideoMenu({ editor }: EditorMenuProps) {
       .run();
   }, [editor]);
 
-  const alignRight = useCallback(() => {
+  const alignVideoRight = useCallback(() => {
     editor
       .chain()
       .focus(undefined, { scrollIntoView: false })
@@ -98,18 +94,16 @@ export function VideoMenu({ editor }: EditorMenuProps) {
       .run();
   }, [editor]);
 
-  const handleDownload = useCallback(() => {
+  const onWidthChange = useCallback(
-    if (!editorState?.src) return;
+    (value: number) => {
-    const url = getFileUrl(editorState.src);
+      editor
-    const a = document.createElement("a");
+        .chain()
-    a.href = url;
+        .focus(undefined, { scrollIntoView: false })
-    a.download = "";
+        .setVideoWidth(value)
-    a.click();
+        .run();
-  }, [editorState?.src]);
+    },
-
+    [editor],
-  const handleDelete = useCallback(() => {
+  );
-    editor.commands.deleteSelection();
-  }, [editor]);
 
   return (
     <BaseBubbleMenu
@@ -124,14 +118,13 @@ export function VideoMenu({ editor }: EditorMenuProps) {
       }}
       shouldShow={shouldShow}
     >
-      <div className={classes.toolbar}>
+      <ActionIcon.Group className="actionIconGroup">
         <Tooltip position="top" label={t("Align left")}>
           <ActionIcon
-            onClick={alignLeft}
+            onClick={alignVideoLeft}
             size="lg"
             aria-label={t("Align left")}
-            variant="subtle"
+            variant={editorState?.isAlignLeft ? "light" : "default"}
-            className={clsx({ [classes.active]: editorState?.isAlignLeft })}
           >
             <IconLayoutAlignLeft size={18} />
           </ActionIcon>
@@ -139,11 +132,10 @@ export function VideoMenu({ editor }: EditorMenuProps) {
 
         <Tooltip position="top" label={t("Align center")}>
           <ActionIcon
-            onClick={alignCenter}
+            onClick={alignVideoCenter}
             size="lg"
             aria-label={t("Align center")}
-            variant="subtle"
+            variant={editorState?.isAlignCenter ? "light" : "default"}
-            className={clsx({ [classes.active]: editorState?.isAlignCenter })}
           >
             <IconLayoutAlignCenter size={18} />
           </ActionIcon>
@@ -151,40 +143,19 @@ export function VideoMenu({ editor }: EditorMenuProps) {
 
         <Tooltip position="top" label={t("Align right")}>
           <ActionIcon
-            onClick={alignRight}
+            onClick={alignVideoRight}
             size="lg"
             aria-label={t("Align right")}
-            variant="subtle"
+            variant={editorState?.isAlignRight ? "light" : "default"}
-            className={clsx({ [classes.active]: editorState?.isAlignRight })}
           >
             <IconLayoutAlignRight size={18} />
           </ActionIcon>
         </Tooltip>
+      </ActionIcon.Group>
 
-        <div className={classes.divider} />
+      {editorState?.width && (
-
+        <NodeWidthResize onChange={onWidthChange} value={editorState.width} />
-        <Tooltip position="top" label={t("Download")}>
+      )}
-          <ActionIcon
-            onClick={handleDownload}
-            size="lg"
-            aria-label={t("Download")}
-            variant="subtle"
-          >
-            <IconDownload size={18} />
-          </ActionIcon>
-        </Tooltip>
-
-        <Tooltip position="top" label={t("Delete")}>
-          <ActionIcon
-            onClick={handleDelete}
-            size="lg"
-            aria-label={t("Delete")}
-            variant="subtle"
-          >
-            <IconTrash size={18} />
-          </ActionIcon>
-        </Tooltip>
-      </div>
     </BaseBubbleMenu>
   );
 }

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

@@ -43,8 +43,6 @@ import {
   Highlight,
   UniqueID,
   SharedStorage,
-  Columns,
-  Column,
 } from "@docmost/editor-ext";
 import {
   randomElement,
@@ -54,14 +52,6 @@ import { IUser } from "@/features/user/types/user.types.ts";
 import MathInlineView from "@/features/editor/components/math/math-inline.tsx";
 import MathBlockView from "@/features/editor/components/math/math-block.tsx";
 import ImageView from "@/features/editor/components/image/image-view.tsx";
-import {
-  createImageHandle,
-  imageResizeClasses,
-} from "@/features/editor/components/image/image-resize-handles.ts";
-import {
-  createResizeHandle,
-  buildResizeClasses,
-} from "@/features/editor/components/common/node-resize-handles.ts";
 import CalloutView from "@/features/editor/components/callout/callout-view.tsx";
 import VideoView from "@/features/editor/components/video/video-view.tsx";
 import AttachmentView from "@/features/editor/components/attachment/attachment-view.tsx";
@@ -101,7 +91,6 @@ lowlight.register("fortran", fortran);
 lowlight.register("haskell", haskell);
 lowlight.register("scala", scala);
 
-// @ts-ignore
 export const mainExtensions = [
   StarterKit.configure({
     heading: false,
@@ -126,7 +115,7 @@ export const mainExtensions = [
     filterTransaction: (transaction) => !isChangeOrigin(transaction),
   }),
   Placeholder.configure({
-    placeholder: ({ editor, node, pos }) => {
+    placeholder: ({ node }) => {
       if (node.type.name === "heading") {
         return i18n.t("Heading {{level}}", { level: node.attrs.level });
       }
@@ -134,17 +123,6 @@ export const mainExtensions = [
         return i18n.t("Toggle title");
       }
       if (node.type.name === "paragraph") {
-        const $pos = editor.state.doc.resolve(pos);
-        const parentName = $pos.parent.type.name;
-        if (
-          parentName === "column" ||
-          parentName === "tableCell" ||
-          parentName === "tableHeader" ||
-          parentName === "callout" ||
-          parentName === "blockquote"
-        ) {
-          return i18n.t("Write...");
-        }
         return i18n.t('Write anything. Enter "/" for commands');
       }
     },
@@ -222,29 +200,9 @@ export const mainExtensions = [
   TiptapImage.configure({
     view: ImageView,
     allowBase64: false,
-    resize: {
-      enabled: true,
-      directions: ["left", "right"],
-      minWidth: 80,
-      minHeight: 40,
-      alwaysPreserveAspectRatio: true,
-      //@ts-ignore
-      createCustomHandle: createImageHandle,
-      className: imageResizeClasses,
-    },
   }),
   TiptapVideo.configure({
     view: VideoView,
-    resize: {
-      enabled: true,
-      directions: ["left", "right"],
-      minWidth: 80,
-      minHeight: 40,
-      alwaysPreserveAspectRatio: true,
-      //@ts-ignore
-      createCustomHandle: createResizeHandle,
-      className: buildResizeClasses("node-video"),
-    },
   }),
   Callout.configure({
     view: CalloutView,
@@ -263,29 +221,9 @@ export const mainExtensions = [
   }),
   Drawio.configure({
     view: DrawioView,
-    resize: {
-      enabled: true,
-      directions: ["left", "right"],
-      minWidth: 80,
-      minHeight: 40,
-      alwaysPreserveAspectRatio: true,
-      //@ts-ignore
-      createCustomHandle: createResizeHandle,
-      className: buildResizeClasses("node-drawio"),
-    },
   }),
   Excalidraw.configure({
     view: ExcalidrawView,
-    resize: {
-      enabled: true,
-      directions: ["left", "right"],
-      minWidth: 80,
-      minHeight: 40,
-      alwaysPreserveAspectRatio: true,
-      //@ts-ignore
-      createCustomHandle: createResizeHandle,
-      className: buildResizeClasses("node-excalidraw"),
-    },
   }),
   Embed.configure({
     view: EmbedView,
@@ -315,8 +253,6 @@ export const mainExtensions = [
       };
     },
   }).configure(),
-  Columns,
-  Column,
 ] as any;
 
 type CollabExtensions = (provider: HocuspocusProvider, user: IUser) => any[];

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

@@ -67,7 +67,6 @@ import { jwtDecode } from "jwt-decode";
 import { searchSpotlight } from "@/features/search/constants.ts";
 import { useEditorScroll } from "./hooks/use-editor-scroll";
 import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";
-import ColumnsMenu from "@/features/editor/components/columns/columns-menu.tsx";
 
 interface PageEditorProps {
   pageId: string;
@@ -417,7 +416,6 @@ export default function PageEditor({
             <SubpagesMenu editor={editor} />
             <ExcalidrawMenu editor={editor} />
             <DrawioMenu editor={editor} />
-            <ColumnsMenu editor={editor} />
             <LinkMenu editor={editor} appendTo={menuContainerRef} />
           </div>
         )}

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

@@ -1,116 +0,0 @@
-div[data-type="columns"] {
-  display: flex;
-  margin: 0.75rem 0;
-  padding: 0.5em;
-}
-
-div[data-type="columns"] > div[data-type="column"] {
-  flex: 1;
-  min-width: 0;
-}
-
-div[data-type="columns"] > div[data-type="column"] + div[data-type="column"] {
-  border-left: 1px solid transparent;
-  padding-left: 1rem;
-  transition: border 0.3s;
-}
-
-div[data-type="columns"]:hover
-  > div[data-type="column"]
-  + div[data-type="column"] {
-  border-left: 1px solid
-    light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-7));
-}
-
-/* Confluence layout types */
-div[data-type="columns"][data-layout="two_left_sidebar"]
-  > div[data-type="column"]:first-child {
-  flex: 1;
-}
-
-div[data-type="columns"][data-layout="two_left_sidebar"]
-  > div[data-type="column"]:last-child {
-  flex: 2;
-}
-
-div[data-type="columns"][data-layout="two_right_sidebar"]
-  > div[data-type="column"]:first-child {
-  flex: 2;
-}
-
-div[data-type="columns"][data-layout="two_right_sidebar"]
-  > div[data-type="column"]:last-child {
-  flex: 1;
-}
-
-div[data-type="columns"][data-layout="three_left_wide"]
-  > div[data-type="column"]:first-child {
-  flex: 2;
-}
-
-div[data-type="columns"][data-layout="three_right_wide"]
-  > div[data-type="column"]:last-child {
-  flex: 2;
-}
-
-div[data-type="columns"][data-layout="three_with_sidebars"]
-  > div[data-type="column"]:first-child,
-div[data-type="columns"][data-layout="three_with_sidebars"]
-  > div[data-type="column"]:last-child {
-  flex: 1;
-}
-
-div[data-type="columns"][data-layout="three_with_sidebars"]
-  > div[data-type="column"]:nth-child(2) {
-  flex: 2;
-}
-
-/* Stack columns vertically on small viewports */
-@media (max-width: 820px) {
-  div[data-type="columns"] {
-    flex-direction: column;
-  }
-
-  div[data-type="columns"] > div[data-type="column"] + div[data-type="column"] {
-    border-left: none;
-    padding-left: 0;
-  }
-
-  div[data-type="columns"]:hover
-    > div[data-type="column"]
-    + div[data-type="column"] {
-    border-left: none;
-  }
-}
-
-/* Wide width mode — extends columns to full container width */
-div[data-type="columns"][data-width-mode="wide"] {
-  margin-left: -3rem;
-  margin-right: -3rem;
-  width: calc(100% + 6rem);
-}
-
-@media (max-width: $mantine-breakpoint-sm) {
-  div[data-type="columns"][data-width-mode="wide"] {
-    margin-left: -1rem;
-    margin-right: -1rem;
-    width: calc(100% + 2rem);
-  }
-}
-
-@media print {
-  div[data-type="columns"] {
-    flex-direction: row !important;
-  }
-
-  div[data-type="columns"] > div[data-type="column"] + div[data-type="column"] {
-    border-left: none;
-    padding-left: 1rem;
-  }
-
-  div[data-type="columns"][data-width-mode="wide"] {
-    margin-left: 0;
-    margin-right: 0;
-    width: 100%;
-  }
-}

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

@@ -82,9 +82,13 @@
   }
 
   blockquote {
-    padding-left: 1rem;
+    padding-left: 25px;
-    border-left: 3px solid
+    padding-right: 25px;
-      light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
+    border-left: 2px solid var(--mantine-color-gray-6);
+    background-color: light-dark(
+      var(--mantine-color-gray-0),
+      var(--mantine-color-dark-8)
+    );
     margin: 0;
   }
 
@@ -122,14 +126,13 @@
       margin-bottom: 0;
     }
 
-  }
+    &.node-callout {
-
+      div[style*="white-space: inherit;"] {
-  .react-renderer.node-callout div[style*="white-space: inherit;"] > :first-child {
+        > :first-child {
-    margin-top: 0;
+          margin: 0;
-  }
+        }
-
+      }
-  .react-renderer.node-callout + .react-renderer.node-callout {
+    }
-    margin-top: 0.75em;
   }
 
   .selection {

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

@@ -13,4 +13,3 @@
 @import "./mention.css";
 @import "./ordered-list.css";
 @import "./highlight.css";
-@import "./columns.css";

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

@@ -171,11 +171,14 @@ export function TitleEditor({
   }, [pageId]);
 
   useEffect(() => {
-    // honor user default page edit mode preference
+    if (titleEditor) {
-    if (userPageEditMode && titleEditor && editable) {
+      if (userPageEditMode && editable) {
-      if (userPageEditMode === PageEditMode.Edit) {
+        if (userPageEditMode === PageEditMode.Edit) {
-        titleEditor.setEditable(true);
+          titleEditor.setEditable(true);
-      } else if (userPageEditMode === PageEditMode.Read) {
+        } else if (userPageEditMode === PageEditMode.Read) {
+          titleEditor.setEditable(false);
+        }
+      } else {
         titleEditor.setEditable(false);
       }
     }

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

@@ -40,6 +40,7 @@ import { PageStateSegmentedControl } from "@/features/user/components/page-state
 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";
+import { PageShareModal } from "@/ee/page-permission";
 
 interface PageHeaderMenuProps {
   readOnly?: boolean;
@@ -75,7 +76,9 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
 
       {!readOnly && <PageStateSegmentedControl size="xs" />}
 
-      <ShareModal readOnly={readOnly} />
+      {/*<ShareModal readOnly={readOnly} />*/}
+      <PageShareModal readOnly={readOnly}/>
+
 
       <Tooltip label={t("Comments")} openDelay={250} withArrow>
         <ActionIcon

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

@@ -22,6 +22,10 @@ export interface IPage {
   lastUpdatedBy: ILastUpdatedBy;
   deletedBy: IDeletedBy;
   space: Partial<ISpace>;
+  permissions?: {
+    canEdit: boolean;
+    hasRestriction: boolean;
+  };
 }
 
 interface ICreator {

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

@@ -9,6 +9,7 @@ import { IconGroupCircle } from "@/components/icons/icon-people-circle.tsx";
 import { useTranslation } from "react-i18next";
 
 interface MultiMemberSelectProps {
+  value?: string[];
   onChange: (value: string[]) => void;
 }
 
@@ -33,7 +34,7 @@ const renderMultiSelectOption: MultiSelectProps["renderOption"] = ({
   </Group>
 );
 
-export function MultiMemberSelect({ onChange }: MultiMemberSelectProps) {
+export function MultiMemberSelect({ value, onChange }: MultiMemberSelectProps) {
   const { t } = useTranslation();
   const [searchValue, setSearchValue] = useState("");
   const [debouncedQuery] = useDebouncedValue(searchValue, 500);
@@ -85,6 +86,7 @@ export function MultiMemberSelect({ onChange }: MultiMemberSelectProps) {
   return (
     <MultiSelect
       data={data}
+      value={value}
       renderOption={renderMultiSelectOption}
       hidePickedOptions
       maxDropdownHeight={300}

apps/client/src/main.tsx

@@ -42,7 +42,6 @@ if (isCloud() && isPostHogEnabled) {
   });
 }
 
-
 const container = document.getElementById("root") as HTMLElement;
 const root = (container as any).__reactRoot ??= ReactDOM.createRoot(container);
 

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

@@ -6,11 +6,6 @@ import { Helmet } from "react-helmet-async";
 import PageHeader from "@/features/page/components/header/page-header.tsx";
 import { extractPageSlugId } from "@/lib";
 import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
-import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
-import {
-  SpaceCaslAction,
-  SpaceCaslSubject,
-} from "@/features/space/permissions/permissions.type.ts";
 import { useTranslation } from "react-i18next";
 import React from "react";
 import { EmptyState } from "@/components/ui/empty-state.tsx";
@@ -18,7 +13,6 @@ import { IconAlertTriangle, IconFileOff } from "@tabler/icons-react";
 import { Button } from "@mantine/core";
 import { Link } from "react-router-dom";
 import { ErrorBoundary } from "react-error-boundary";
-
 const MemoizedFullEditor = React.memo(FullEditor);
 const MemoizedPageHeader = React.memo(PageHeader);
 const MemoizedHistoryModal = React.memo(HistoryModal);
@@ -58,8 +52,7 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
   } = usePageQuery({ pageId: extractPageSlugId(pageSlug) });
   const { data: space } = useGetSpaceBySlugQuery(page?.space?.slug);
 
-  const spaceRules = space?.membership?.permissions;
+  const canEdit = page?.permissions?.canEdit ?? false;
-  const spaceAbility = useSpaceAbility(spaceRules);
 
   if (isLoading) {
     return <></>;
@@ -101,12 +94,7 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
           <title>{`${page?.icon || ""}  ${page?.title || t("untitled")}`}</title>
         </Helmet>
 
-        <MemoizedPageHeader
+        <MemoizedPageHeader readOnly={!canEdit} />
-          readOnly={spaceAbility.cannot(
-            SpaceCaslAction.Manage,
-            SpaceCaslSubject.Page,
-          )}
-        />
 
         <MemoizedFullEditor
           key={page.id}
@@ -115,10 +103,7 @@ function PageContent({ pageSlug }: { pageSlug: string | undefined }) {
           content={page.content}
           slugId={page.slugId}
           spaceSlug={page?.space?.slug}
-          editable={spaceAbility.can(
+          editable={canEdit}
-            SpaceCaslAction.Manage,
-            SpaceCaslSubject.Page,
-          )}
         />
         <MemoizedHistoryModal pageId={page.id} />
       </div>

apps/server/package.json

@@ -39,10 +39,12 @@
     "@fastify/cookie": "^11.0.2",
     "@fastify/multipart": "^9.4.0",
     "@fastify/static": "^9.0.0",
+    "@keyv/redis": "^5.1.6",
     "@langchain/core": "1.1.18",
     "@langchain/textsplitters": "1.0.1",
     "@nestjs-labs/nestjs-ioredis": "^11.0.4",
     "@nestjs/bullmq": "^11.0.4",
+    "@nestjs/cache-manager": "^3.1.0",
     "@nestjs/common": "^11.1.11",
     "@nestjs/config": "^4.0.2",
     "@nestjs/core": "^11.1.13",
@@ -156,6 +158,11 @@
       "**/*.(t|j)s"
     ],
     "coverageDirectory": "../coverage",
-    "testEnvironment": "node"
+    "testEnvironment": "node",
+    "moduleNameMapper": {
+      "^@docmost/db/(.*)$": "<rootDir>/database/$1",
+      "^@docmost/transactional/(.*)$": "<rootDir>/integrations/transactional/$1",
+      "^@docmost/ee/(.*)$": "<rootDir>/ee/$1"
+    }
   }
 }

apps/server/src/app.module.ts

@@ -1,6 +1,7 @@
 import { Module } from '@nestjs/common';
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
+import { EnvironmentService } from './integrations/environment/environment.service';
 import { CoreModule } from './core/core.module';
 import { EnvironmentModule } from './integrations/environment/environment.module';
 import { CollaborationModule } from './collaboration/collaboration.module';
@@ -18,6 +19,8 @@ import { SecurityModule } from './integrations/security/security.module';
 import { TelemetryModule } from './integrations/telemetry/telemetry.module';
 import { RedisModule } from '@nestjs-labs/nestjs-ioredis';
 import { RedisConfigService } from './integrations/redis/redis-config.service';
+import { CacheModule } from '@nestjs/cache-manager';
+import KeyvRedis from '@keyv/redis';
 import { LoggerModule } from './common/logger/logger.module';
 
 const enterpriseModules = [];
@@ -43,6 +46,18 @@ try {
     RedisModule.forRootAsync({
       useClass: RedisConfigService,
     }),
+    CacheModule.registerAsync({
+      isGlobal: true,
+      useFactory: async (environmentService: EnvironmentService) => {
+        const redisUrl = environmentService.getRedisUrl();
+
+        return {
+          ttl: 5 * 1000,
+          stores: [new KeyvRedis(redisUrl)],
+        };
+      },
+      inject: [EnvironmentService],
+    }),
     CollaborationModule,
     WsModule,
     QueueModule,

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

@@ -35,8 +35,6 @@ import {
   UniqueID,
   addUniqueIdsToDoc,
   htmlToMarkdown,
-  Columns,
-  Column,
 } from '@docmost/editor-ext';
 import { generateText, getSchema, JSONContent } from '@tiptap/core';
 import { generateHTML, generateJSON } from '../common/helpers/prosemirror/html';
@@ -93,8 +91,6 @@ export const tiptapExtensions = [
   Embed,
   Mention,
   Subpages,
-  Columns,
-  Column,
 ] as any;
 
 export function jsonToHtml(tiptapJson: any) {

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

@@ -9,6 +9,7 @@ import { TokenService } from '../../core/auth/services/token.service';
 import { UserRepo } from '@docmost/db/repos/user/user.repo';
 import { PageRepo } from '@docmost/db/repos/page/page.repo';
 import { SpaceMemberRepo } from '@docmost/db/repos/space/space-member.repo';
+import { PagePermissionRepo } from '@docmost/db/repos/page/page-permission.repo';
 import { findHighestUserSpaceRole } from '@docmost/db/repos/space/utils';
 import { SpaceRole } from '../../common/helpers/types/permission';
 import { getPageId } from '../collaboration.util';
@@ -23,6 +24,7 @@ export class AuthenticationExtension implements Extension {
     private userRepo: UserRepo,
     private pageRepo: PageRepo,
     private readonly spaceMemberRepo: SpaceMemberRepo,
+    private readonly pagePermissionRepo: PagePermissionRepo,
   ) {}
 
   async onAuthenticate(data: onAuthenticatePayload) {
@@ -52,7 +54,7 @@ export class AuthenticationExtension implements Extension {
 
     const page = await this.pageRepo.findById(pageId);
     if (!page) {
-      this.logger.warn(`Page not found: ${pageId}`);
+      this.logger.debug(`Page not found: ${pageId}`);
       throw new NotFoundException('Page not found');
     }
 
@@ -68,9 +70,34 @@ export class AuthenticationExtension implements Extension {
       throw new UnauthorizedException();
     }
 
-    if (userSpaceRole === SpaceRole.READER) {
+    // Check page-level permissions
+    const { hasAnyRestriction, canAccess, canEdit } =
+      await this.pagePermissionRepo.canUserEditPage(user.id, page.id);
+
+    if (hasAnyRestriction) {
+      if (!canAccess) {
+        this.logger.warn(
+          `User ${user.id} denied page-level access to page: ${pageId}`,
+        );
+        throw new UnauthorizedException();
+      }
+
+      if (!canEdit) {
+        data.connectionConfig.readOnly = true;
+        this.logger.debug(
+          `User ${user.id} granted readonly access to restricted page: ${pageId}`,
+        );
+      }
+    } else {
+      // No restrictions - use space-level permissions
+      if (userSpaceRole === SpaceRole.READER) {
+        data.connectionConfig.readOnly = true;
+        this.logger.debug(`User granted readonly access to page: ${pageId}`);
+      }
+    }
+
+    if (page.deletedAt) {
       data.connectionConfig.readOnly = true;
-      this.logger.debug(`User granted readonly access to page: ${pageId}`);
     }
 
     this.logger.debug(`Authenticated user ${user.id} on page ${pageId}`);

apps/server/src/common/helpers/types/permission.ts

@@ -14,3 +14,12 @@ export enum SpaceVisibility {
   OPEN = 'open', // any workspace member can see that it exists and join.
   PRIVATE = 'private', // only added space users can see
 }
+
+export enum PageAccessLevel {
+  RESTRICTED = 'restricted', // only specific users/groups can view or edit
+}
+
+export enum PagePermissionRole {
+  READER = 'reader', // can only view content and descendants
+  WRITER = 'writer', // can edit content, descendants, and add new users to permission
+}

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

@@ -53,6 +53,7 @@ import { TokenService } from '../auth/services/token.service';
 import { JwtAttachmentPayload, JwtType } from '../auth/dto/jwt-payload';
 import * as path from 'path';
 import { RemoveIconDto } from './dto/attachment.dto';
+import { PageAccessService } from '../page-access/page-access.service';
 
 @Controller()
 export class AttachmentController {
@@ -67,6 +68,7 @@ export class AttachmentController {
     private readonly attachmentRepo: AttachmentRepo,
     private readonly environmentService: EnvironmentService,
     private readonly tokenService: TokenService,
+    private readonly pageAccessService: PageAccessService,
   ) {}
 
   @UseGuards(JwtAuthGuard)
@@ -111,13 +113,7 @@ export class AttachmentController {
       throw new NotFoundException('Page not found');
     }
 
-    const spaceAbility = await this.spaceAbility.createForUser(
+    await this.pageAccessService.validateCanEdit(page, user);
-      user,
-      page.spaceId,
-    );
-    if (spaceAbility.cannot(SpaceCaslAction.Manage, SpaceCaslSubject.Page)) {
-      throw new ForbiddenException();
-    }
 
     const spaceId = page.spaceId;
 
@@ -172,15 +168,13 @@ export class AttachmentController {
       throw new NotFoundException();
     }
 
-    const spaceAbility = await this.spaceAbility.createForUser(
+    const page = await this.pageRepo.findById(attachment.pageId);
-      user,
+    if (!page) {
-      attachment.spaceId,
+      throw new NotFoundException();
-    );
-
-    if (spaceAbility.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
-      throw new ForbiddenException();
     }
 
+    await this.pageAccessService.validateCanView(page, user);
+
     try {
       return await this.sendFileResponse(req, res, attachment, 'private');
     } catch (err) {

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

@@ -24,6 +24,7 @@ import {
   SpaceCaslSubject,
 } from '../casl/interfaces/space-ability.type';
 import { CommentRepo } from '@docmost/db/repos/comment/comment.repo';
+import { PageAccessService } from '../page-access/page-access.service';
 
 @UseGuards(JwtAuthGuard)
 @Controller('comments')
@@ -33,6 +34,7 @@ export class CommentController {
     private readonly commentRepo: CommentRepo,
     private readonly pageRepo: PageRepo,
     private readonly spaceAbility: SpaceAbilityFactory,
+    private readonly pageAccessService: PageAccessService,
   ) {}
 
   @HttpCode(HttpStatus.OK)
@@ -47,10 +49,7 @@ export class CommentController {
       throw new NotFoundException('Page not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(user, page.spaceId);
+    await this.pageAccessService.validateCanEdit(page, user);
-    if (ability.cannot(SpaceCaslAction.Create, SpaceCaslSubject.Page)) {
-      throw new ForbiddenException();
-    }
 
     return this.commentService.create(
       {
@@ -75,10 +74,8 @@ export class CommentController {
       throw new NotFoundException('Page not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(user, page.spaceId);
+    await this.pageAccessService.validateCanView(page, user);
-    if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
+
-      throw new ForbiddenException();
-    }
     return this.commentService.findByPageId(page.id, pagination);
   }
 
@@ -90,13 +87,13 @@ export class CommentController {
       throw new NotFoundException('Comment not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(
+    const page = await this.pageRepo.findById(comment.pageId);
-      user,
+    if (!page) {
-      comment.spaceId,
+      throw new NotFoundException('Page not found');
-    );
-    if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
-      throw new ForbiddenException();
     }
+
+    await this.pageAccessService.validateCanView(page, user);
+
     return comment;
   }
 
@@ -108,18 +105,13 @@ export class CommentController {
       throw new NotFoundException('Comment not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(
+    const page = await this.pageRepo.findById(comment.pageId);
-      user,
+    if (!page) {
-      comment.spaceId,
+      throw new NotFoundException('Page not found');
-    );
-
-    // must be a space member with edit permission
-    if (ability.cannot(SpaceCaslAction.Edit, SpaceCaslSubject.Page)) {
-      throw new ForbiddenException(
-        'You must have space edit permission to edit comments',
-      );
     }
 
+    await this.pageAccessService.validateCanEdit(page, user);
+
     return this.commentService.update(comment, dto, user);
   }
 
@@ -131,41 +123,27 @@ export class CommentController {
       throw new NotFoundException('Comment not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(
+    const page = await this.pageRepo.findById(comment.pageId);
-      user,
+    if (!page) {
-      comment.spaceId,
+      throw new NotFoundException('Page not found');
-    );
-
-    // must be a space member with edit permission
-    if (ability.cannot(SpaceCaslAction.Edit, SpaceCaslSubject.Page)) {
-      throw new ForbiddenException();
     }
 
+    // Check page-level edit permission first
+    await this.pageAccessService.validateCanEdit(page, user);
+
     // Check if user is the comment owner
     const isOwner = comment.creatorId === user.id;
 
     if (isOwner) {
-      /*
-      // Check if comment has children from other users
-      const hasChildrenFromOthers =
-        await this.commentRepo.hasChildrenFromOtherUsers(comment.id, user.id);
-
-      // Owner can delete if no children from other users
-      if (!hasChildrenFromOthers) {
-        await this.commentRepo.deleteComment(comment.id);
-        return;
-      }
-
-      // If has children from others, only space admin can delete
-      if (ability.cannot(SpaceCaslAction.Manage, SpaceCaslSubject.Settings)) {
-        throw new ForbiddenException(
-          'Only space admins can delete comments with replies from other users',
-        );
-      }*/
       await this.commentRepo.deleteComment(comment.id);
       return;
     }
 
+    const ability = await this.spaceAbility.createForUser(
+      user,
+      comment.spaceId,
+    );
+
     // Space admin can delete any comment
     if (ability.cannot(SpaceCaslAction.Manage, SpaceCaslSubject.Settings)) {
       throw new ForbiddenException(

apps/server/src/core/core.module.ts

@@ -14,6 +14,7 @@ import { SearchModule } from './search/search.module';
 import { SpaceModule } from './space/space.module';
 import { GroupModule } from './group/group.module';
 import { CaslModule } from './casl/casl.module';
+import { PageAccessModule } from './page-access/page-access.module';
 import { DomainMiddleware } from '../common/middlewares/domain.middleware';
 import { ShareModule } from './share/share.module';
 import { NotificationModule } from './notification/notification.module';
@@ -31,6 +32,7 @@ import { WatcherModule } from './watcher/watcher.module';
     SpaceModule,
     GroupModule,
     CaslModule,
+    PageAccessModule,
     ShareModule,
     NotificationModule,
     WatcherModule,

apps/server/src/core/notification/notification.module.ts

@@ -4,10 +4,9 @@ import { NotificationController } from './notification.controller';
 import { NotificationProcessor } from './notification.processor';
 import { CommentNotificationService } from './services/comment.notification';
 import { PageNotificationService } from './services/page.notification';
-import { WsModule } from '../../ws/ws.module';
 
 @Module({
-  imports: [WsModule],
+  imports: [],
   controllers: [NotificationController],
   providers: [
     NotificationService,

apps/server/src/core/page-access/page-access.module.ts

@@ -0,0 +1,9 @@
+import { Global, Module } from '@nestjs/common';
+import { PageAccessService } from './page-access.service';
+
+@Global()
+@Module({
+  providers: [PageAccessService],
+  exports: [PageAccessService],
+})
+export class PageAccessModule {}

apps/server/src/core/page-access/page-access.service.ts

@@ -0,0 +1,102 @@
+import { ForbiddenException, Injectable } from '@nestjs/common';
+import { Page, User } from '@docmost/db/types/entity.types';
+import { PagePermissionRepo } from '@docmost/db/repos/page/page-permission.repo';
+import SpaceAbilityFactory from '../casl/abilities/space-ability.factory';
+import {
+  SpaceCaslAction,
+  SpaceCaslSubject,
+} from '../casl/interfaces/space-ability.type';
+
+@Injectable()
+export class PageAccessService {
+  constructor(
+    private readonly pagePermissionRepo: PagePermissionRepo,
+    private readonly spaceAbility: SpaceAbilityFactory,
+  ) {}
+
+  /**
+   * Validate user can view page, throws ForbiddenException if not.
+   * If page has restrictions: page-level permission determines access.
+   * If no restrictions: space-level permission determines access.
+   */
+  async validateCanView(page: Page, user: User): Promise<void> {
+    // TODO: cache by pageId and userId.
+    const ability = await this.spaceAbility.createForUser(user, page.spaceId);
+
+    // User must be at least a space member
+    if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
+      throw new ForbiddenException();
+    }
+
+    const canAccess = await this.pagePermissionRepo.canUserAccessPage(
+      user.id,
+      page.id,
+    );
+    if (!canAccess) {
+      throw new ForbiddenException();
+    }
+  }
+
+  /**
+   * Validate user can view page AND return effective canEdit permission.
+   * Combines access check + edit permission in a single query pass.
+   */
+  async validateCanViewWithPermissions(
+    page: Page,
+    user: User,
+  ): Promise<{ canEdit: boolean; hasRestriction: boolean }> {
+    const ability = await this.spaceAbility.createForUser(user, page.spaceId);
+
+    if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
+      throw new ForbiddenException();
+    }
+
+    const { hasAnyRestriction, canAccess, canEdit } =
+      await this.pagePermissionRepo.canUserEditPage(user.id, page.id);
+
+    if (hasAnyRestriction && !canAccess) {
+      throw new ForbiddenException();
+    }
+
+    return {
+      canEdit: hasAnyRestriction
+        ? canEdit
+        : ability.can(SpaceCaslAction.Edit, SpaceCaslSubject.Page),
+      hasRestriction: hasAnyRestriction,
+    };
+  }
+
+  /**
+   * Validate user can edit page, throws ForbiddenException if not.
+   * If page has restrictions: page-level writer permission determines access.
+   * If no restrictions: space-level edit permission determines access.
+   */
+  async validateCanEdit(
+    page: Page,
+    user: User,
+  ): Promise<{ hasRestriction: boolean }> {
+    const ability = await this.spaceAbility.createForUser(user, page.spaceId);
+
+    // User must be at least a space member
+    if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
+      throw new ForbiddenException();
+    }
+
+    const { hasAnyRestriction, canEdit } =
+      await this.pagePermissionRepo.canUserEditPage(user.id, page.id);
+
+    if (hasAnyRestriction) {
+      // Page has restrictions - use page-level permission
+      if (!canEdit) {
+        throw new ForbiddenException();
+      }
+    } else {
+      // No restrictions - use space-level permission
+      if (ability.cannot(SpaceCaslAction.Edit, SpaceCaslSubject.Page)) {
+        throw new ForbiddenException();
+      }
+    }
+
+    return { hasRestriction: hasAnyRestriction };
+  }
+}

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

@@ -10,6 +10,7 @@ import {
   UseGuards,
 } from '@nestjs/common';
 import { PageService } from './services/page.service';
+import { PageAccessService } from '../page-access/page-access.service';
 import { CreatePageDto } from './dto/create-page.dto';
 import { UpdatePageDto } from './dto/update-page.dto';
 import { MovePageDto, MovePageToSpaceDto } from './dto/move-page.dto';
@@ -48,6 +49,7 @@ export class PageController {
     private readonly pageRepo: PageRepo,
     private readonly pageHistoryService: PageHistoryService,
     private readonly spaceAbility: SpaceAbilityFactory,
+    private readonly pageAccessService: PageAccessService,
   ) {}
 
   @HttpCode(HttpStatus.OK)
@@ -65,10 +67,10 @@ export class PageController {
       throw new NotFoundException('Page not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(user, page.spaceId);
+    const { canEdit, hasRestriction } =
-    if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
+      await this.pageAccessService.validateCanViewWithPermissions(page, user);
-      throw new ForbiddenException();
+
-    }
+    const permissions = { canEdit, hasRestriction };
 
     if (dto.format && dto.format !== 'json' && page.content) {
       const contentOutput =
@@ -78,10 +80,11 @@ export class PageController {
       return {
         ...page,
         content: contentOutput,
+        permissions,
       };
     }
 
-    return page;
+    return { ...page, permissions };
   }
 
   @HttpCode(HttpStatus.OK)
@@ -91,12 +94,28 @@ export class PageController {
     @AuthUser() user: User,
     @AuthWorkspace() workspace: Workspace,
   ) {
-    const ability = await this.spaceAbility.createForUser(
+    if (createPageDto.parentPageId) {
-      user,
+      // Creating under a parent page - check edit permission on parent
-      createPageDto.spaceId,
+      const parentPage = await this.pageRepo.findById(
-    );
+        createPageDto.parentPageId,
-    if (ability.cannot(SpaceCaslAction.Create, SpaceCaslSubject.Page)) {
+      );
-      throw new ForbiddenException();
+      if (
+        !parentPage ||
+        parentPage.deletedAt ||
+        parentPage.spaceId !== createPageDto.spaceId
+      ) {
+        throw new NotFoundException('Parent page not found');
+      }
+      await this.pageAccessService.validateCanEdit(parentPage, user);
+    } else {
+      // Creating at root level - require space-level permission
+      const ability = await this.spaceAbility.createForUser(
+        user,
+        createPageDto.spaceId,
+      );
+      if (ability.cannot(SpaceCaslAction.Create, SpaceCaslSubject.Page)) {
+        throw new ForbiddenException();
+      }
     }
 
     const page = await this.pageService.create(
@@ -105,6 +124,11 @@ export class PageController {
       createPageDto,
     );
 
+    const { canEdit, hasRestriction } =
+      await this.pageAccessService.validateCanViewWithPermissions(page, user);
+
+    const permissions = { canEdit, hasRestriction };
+
     if (
       createPageDto.format &&
       createPageDto.format !== 'json' &&
@@ -114,10 +138,10 @@ export class PageController {
         createPageDto.format === 'markdown'
           ? jsonToMarkdown(page.content)
           : jsonToHtml(page.content);
-      return { ...page, content: contentOutput };
+      return { ...page, content: contentOutput, permissions };
     }
 
-    return page;
+    return { ...page, permissions };
   }
 
   @HttpCode(HttpStatus.OK)
@@ -129,10 +153,8 @@ export class PageController {
       throw new NotFoundException('Page not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(user, page.spaceId);
+    const { hasRestriction } =
-    if (ability.cannot(SpaceCaslAction.Edit, SpaceCaslSubject.Page)) {
+      await this.pageAccessService.validateCanEdit(page, user);
-      throw new ForbiddenException();
-    }
 
     const updatedPage = await this.pageService.update(
       page,
@@ -140,6 +162,8 @@ export class PageController {
       user,
     );
 
+    const permissions = { canEdit: true, hasRestriction };
+
     if (
       updatePageDto.format &&
       updatePageDto.format !== 'json' &&
@@ -149,10 +173,10 @@ export class PageController {
         updatePageDto.format === 'markdown'
           ? jsonToMarkdown(updatedPage.content)
           : jsonToHtml(updatedPage.content);
-      return { ...updatedPage, content: contentOutput };
+      return { ...updatedPage, content: contentOutput, permissions };
     }
 
-    return updatedPage;
+    return { ...updatedPage, permissions };
   }
 
   @HttpCode(HttpStatus.OK)
@@ -179,10 +203,9 @@ export class PageController {
       }
       await this.pageService.forceDelete(deletePageDto.pageId, workspace.id);
     } else {
-      // Soft delete requires page manage permissions
+      // User with edit permission can delete
-      if (ability.cannot(SpaceCaslAction.Manage, SpaceCaslSubject.Page)) {
+      await this.pageAccessService.validateCanEdit(page, user);
-        throw new ForbiddenException();
+
-      }
       await this.pageService.removePage(
         deletePageDto.pageId,
         user.id,
@@ -204,11 +227,18 @@ export class PageController {
       throw new NotFoundException('Page not found');
     }
 
+    //Todo: currently, this means if they are not admins, they need to add a space admin to the page, which is not possible as it was soft-deleted
+    // so page is virtually lost. Fix.
     const ability = await this.spaceAbility.createForUser(user, page.spaceId);
     if (ability.cannot(SpaceCaslAction.Manage, SpaceCaslSubject.Page)) {
       throw new ForbiddenException();
     }
 
+    //TODO: can users with page level edit, but no space level edit restore pages they can edit?
+
+    // Check page-level edit permission (if restoring to a restricted ancestor)
+    await this.pageAccessService.validateCanEdit(page, user);
+
     await this.pageRepo.restorePage(pageIdDto.pageId, workspace.id);
 
     return this.pageRepo.findById(pageIdDto.pageId, {
@@ -235,6 +265,7 @@ export class PageController {
 
       return this.pageService.getRecentSpacePages(
         recentPageDto.spaceId,
+        user.id,
         pagination,
       );
     }
@@ -261,6 +292,7 @@ export class PageController {
 
       return this.pageService.getDeletedSpacePages(
         deletedPageDto.spaceId,
+        user.id,
         pagination,
       );
     }
@@ -278,10 +310,7 @@ export class PageController {
       throw new NotFoundException('Page not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(user, page.spaceId);
+    await this.pageAccessService.validateCanView(page, user);
-    if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
-      throw new ForbiddenException();
-    }
 
     return this.pageHistoryService.findHistoryByPageId(page.id, pagination);
   }
@@ -297,13 +326,14 @@ export class PageController {
       throw new NotFoundException('Page history not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(
+    // Get the page to check permissions
-      user,
+    const page = await this.pageRepo.findById(history.pageId);
-      history.spaceId,
+    if (!page) {
-    );
+      throw new NotFoundException('Page not found');
-    if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
-      throw new ForbiddenException();
     }
+
+    await this.pageAccessService.validateCanView(page, user);
+
     return history;
   }
 
@@ -335,7 +365,18 @@ export class PageController {
       throw new ForbiddenException();
     }
 
-    return this.pageService.getSidebarPages(spaceId, pagination, dto.pageId);
+    const spaceCanEdit = ability.can(
+      SpaceCaslAction.Edit,
+      SpaceCaslSubject.Page,
+    );
+
+    return this.pageService.getSidebarPages(
+      spaceId,
+      pagination,
+      dto.pageId,
+      user.id,
+      spaceCanEdit,
+    );
   }
 
   @HttpCode(HttpStatus.OK)
@@ -365,7 +406,11 @@ export class PageController {
       throw new ForbiddenException();
     }
 
-    return this.pageService.movePageToSpace(movedPage, dto.spaceId);
+    // Check page-level edit permission on the source page
+    await this.pageAccessService.validateCanEdit(movedPage, user);
+
+    // Moves only accessible pages; inaccessible child pages become root pages in original space
+    return this.pageService.movePageToSpace(movedPage, dto.spaceId, user.id);
   }
 
   @HttpCode(HttpStatus.OK)
@@ -376,6 +421,10 @@ export class PageController {
       throw new NotFoundException('Page to copy not found');
     }
 
+    // Check page-level view permission on the source page (need to read to copy)
+    // Inaccessible child branches are automatically skipped during duplication
+    await this.pageAccessService.validateCanView(copiedPage, user);
+
     // If spaceId is provided, it's a copy to different space
     if (dto.spaceId) {
       const abilities = await Promise.all([
@@ -418,10 +467,23 @@ export class PageController {
       user,
       movedPage.spaceId,
     );
+
     if (ability.cannot(SpaceCaslAction.Edit, SpaceCaslSubject.Page)) {
       throw new ForbiddenException();
     }
 
+    // Check page-level edit permission
+    await this.pageAccessService.validateCanEdit(movedPage, user);
+
+    // If moving to a new parent, check permission on the target parent
+    if (dto.parentPageId && dto.parentPageId !== movedPage.parentPageId) {
+      const targetParent = await this.pageRepo.findById(dto.parentPageId);
+      if (!targetParent || targetParent.deletedAt) {
+        throw new NotFoundException('Target parent page not found');
+      }
+      await this.pageAccessService.validateCanEdit(targetParent, user);
+    }
+
     return this.pageService.movePage(dto, movedPage);
   }
 
@@ -433,10 +495,8 @@ export class PageController {
       throw new NotFoundException('Page not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(user, page.spaceId);
+    await this.pageAccessService.validateCanView(page, user);
-    if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
+
-      throw new ForbiddenException();
-    }
     return this.pageService.getPageBreadCrumbs(page.id);
   }
 }

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

@@ -7,6 +7,7 @@ import {
 import { CreatePageDto, ContentFormat } from '../dto/create-page.dto';
 import { ContentOperation, UpdatePageDto } from '../dto/update-page.dto';
 import { PageRepo } from '@docmost/db/repos/page/page.repo';
+import { PagePermissionRepo } from '@docmost/db/repos/page/page-permission.repo';
 import { InsertablePage, Page, User } from '@docmost/db/types/entity.types';
 import { PaginationOptions } from '@docmost/db/pagination/pagination-options';
 import {
@@ -48,6 +49,7 @@ import { EventEmitter2 } from '@nestjs/event-emitter';
 import { CollaborationGateway } from '../../../collaboration/collaboration.gateway';
 import { markdownToHtml } from '@docmost/editor-ext';
 import { WatcherService } from '../../watcher/watcher.service';
+import { sql } from 'kysely';
 
 @Injectable()
 export class PageService {
@@ -55,6 +57,7 @@ export class PageService {
 
   constructor(
     private pageRepo: PageRepo,
+    private pagePermissionRepo: PagePermissionRepo,
     private attachmentRepo: AttachmentRepo,
     @InjectKysely() private readonly db: KyselyDB,
     private readonly storageService: StorageService,
@@ -92,7 +95,11 @@ export class PageService {
         createPageDto.parentPageId,
       );
 
-      if (!parentPage || parentPage.spaceId !== createPageDto.spaceId) {
+      if (
+        !parentPage ||
+        parentPage.deletedAt ||
+        parentPage.spaceId !== createPageDto.spaceId
+      ) {
         throw new NotFoundException('Parent page not found');
       }
 
@@ -262,6 +269,8 @@ export class PageService {
     spaceId: string,
     pagination: PaginationOptions,
     pageId?: string,
+    userId?: string,
+    spaceCanEdit?: boolean,
   ): Promise<CursorPaginationResult<Partial<Page> & { hasChildren: boolean }>> {
     let query = this.db
       .selectFrom('pages')
@@ -286,7 +295,7 @@ export class PageService {
       query = query.where('parentPageId', 'is', null);
     }
 
-    return executeWithCursorPagination(query, {
+    const result = await executeWithCursorPagination(query, {
       perPage: 250,
       cursor: pagination.cursor,
       beforeCursor: pagination.beforeCursor,
@@ -303,10 +312,97 @@ export class PageService {
         id: cursor.id,
       }),
     });
+
+    if (userId && result.items.length > 0) {
+      const hasRestrictions =
+        await this.pagePermissionRepo.hasRestrictedPagesInSpace(spaceId);
+
+      if (!hasRestrictions) {
+        result.items = result.items.map((p: any) => ({
+          ...p,
+          canEdit: spaceCanEdit ?? true,
+        }));
+      } else {
+        const pageIds = result.items.map((p: any) => p.id);
+
+        const accessiblePages =
+          await this.pagePermissionRepo.filterAccessiblePageIdsWithPermissions(
+            pageIds,
+            userId,
+          );
+
+        const permissionMap = new Map(
+          accessiblePages.map((p) => [p.id, p.canEdit]),
+        );
+
+        result.items = result.items
+          .filter((p: any) => permissionMap.has(p.id))
+          .map((p: any) => ({
+            ...p,
+            canEdit: permissionMap.get(p.id),
+          }));
+
+        const pagesWithChildren = result.items.filter(
+          (p: any) => p.hasChildren,
+        );
+        if (pagesWithChildren.length > 0) {
+          const parentIds = pagesWithChildren.map((p: any) => p.id);
+          const parentsWithAccessibleChildren =
+            await this.pagePermissionRepo.getParentIdsWithAccessibleChildren(
+              parentIds,
+              userId,
+            );
+          const hasAccessibleChildrenSet = new Set(
+            parentsWithAccessibleChildren,
+          );
+
+          result.items = result.items.map((p: any) => ({
+            ...p,
+            hasChildren: p.hasChildren && hasAccessibleChildrenSet.has(p.id),
+          }));
+        }
+      }
+    }
+
+    return result;
   }
 
-  async movePageToSpace(rootPage: Page, spaceId: string) {
+  async movePageToSpace(rootPage: Page, spaceId: string, userId: string) {
+    const allPages = await this.pageRepo.getPageAndDescendants(rootPage.id, {
+      includeContent: false,
+    });
+
+    // Filter to only accessible pages while maintaining tree integrity
+    const accessiblePages = await this.filterAccessibleTreePages(
+      allPages,
+      rootPage.id,
+      userId,
+      rootPage.spaceId,
+    );
+    const accessibleIds = new Set(accessiblePages.map((p) => p.id));
+
+    // Find inaccessible pages whose parent is being moved - these need to be orphaned
+    const pagesToOrphan = allPages.filter(
+      (p) =>
+        !accessibleIds.has(p.id) &&
+        p.parentPageId &&
+        accessibleIds.has(p.parentPageId),
+    );
+
     await executeTx(this.db, async (trx) => {
+      // Orphan inaccessible child pages (make them root pages in original space)
+      for (const page of pagesToOrphan) {
+        const orphanPosition = await this.nextPagePosition(
+          rootPage.spaceId,
+          null,
+        );
+        await this.pageRepo.updatePage(
+          { parentPageId: null, position: orphanPosition },
+          page.id,
+          trx,
+        );
+      }
+
       // Update root page
       const nextPosition = await this.nextPagePosition(spaceId);
       await this.pageRepo.updatePage(
@@ -314,48 +410,54 @@ export class PageService {
         rootPage.id,
         trx,
       );
-      const pageIds = await this.pageRepo
+
-        .getPageAndDescendants(rootPage.id, { includeContent: false })
+      const pageIdsToMove = accessiblePages.map((p) => p.id);
-        .then((pages) => pages.map((page) => page.id));
+
-      // The first id is the root page id
+      if (pageIdsToMove.length > 1) {
-      if (pageIds.length > 1) {
+        // Update sub pages (all accessible pages except root)
-        // Update sub pages
         await this.pageRepo.updatePages(
           { spaceId },
-          pageIds.filter((id) => id !== rootPage.id),
+          pageIdsToMove.filter((id) => id !== rootPage.id),
           trx,
         );
       }
 
-      if (pageIds.length > 0) {
+      if (pageIdsToMove.length > 0) {
+        // Clear page-level permissions - moved pages inherit destination space permissions
+        // (page_permissions cascade deletes via foreign key)
+        await trx
+          .deleteFrom('pageAccess')
+          .where('pageId', 'in', pageIdsToMove)
+          .execute();
+
         // update spaceId in shares
         await trx
           .updateTable('shares')
           .set({ spaceId: spaceId })
-          .where('pageId', 'in', pageIds)
+          .where('pageId', 'in', pageIdsToMove)
           .execute();
 
         // Update comments
         await trx
           .updateTable('comments')
           .set({ spaceId: spaceId })
-          .where('pageId', 'in', pageIds)
+          .where('pageId', 'in', pageIdsToMove)
           .execute();
 
         // Update attachments
         await this.attachmentRepo.updateAttachmentsByPageId(
           { spaceId },
-          pageIds,
+          pageIdsToMove,
           trx,
         );
 
         // Update watchers and remove those without access to new space
-        await this.watcherService.movePageWatchersToSpace(pageIds, spaceId, {
+        await this.watcherService.movePageWatchersToSpace(pageIdsToMove, spaceId, {
           trx,
         });
 
         await this.aiQueue.add(QueueJob.PAGE_MOVED_TO_SPACE, {
-          pageId: pageIds,
+          pageId: pageIdsToMove,
           workspaceId: rootPage.workspaceId,
         });
       }
@@ -381,10 +483,18 @@ export class PageService {
       nextPosition = await this.nextPagePosition(spaceId);
     }
 
-    const pages = await this.pageRepo.getPageAndDescendants(rootPage.id, {
+    const allPages = await this.pageRepo.getPageAndDescendants(rootPage.id, {
       includeContent: true,
     });
 
+    // Filter to only accessible pages while maintaining tree integrity
+    const pages = await this.filterAccessibleTreePages(
+      allPages,
+      rootPage.id,
+      authUser.id,
+      rootPage.spaceId,
+    );
+
     const pageMap = new Map<string, CopyPageMapEntry>();
     pages.forEach((page) => {
       pageMap.set(page.id, {
@@ -592,7 +702,11 @@ export class PageService {
       // changing the page's parent
       if (dto.parentPageId) {
         const parentPage = await this.pageRepo.findById(dto.parentPageId);
-        if (!parentPage || parentPage.spaceId !== movedPage.spaceId) {
+        if (
+          !parentPage ||
+          parentPage.deletedAt ||
+          parentPage.spaceId !== movedPage.spaceId
+        ) {
           throw new NotFoundException('Parent page not found');
         }
         parentPageId = parentPage.id;
@@ -623,7 +737,6 @@ export class PageService {
             'spaceId',
             'deletedAt',
           ])
-          .select((eb) => this.pageRepo.withHasChildren(eb))
           .where('id', '=', childPageId)
           .where('deletedAt', 'is', null)
           .unionAll((exp) =>
@@ -639,30 +752,21 @@ export class PageService {
                 'p.spaceId',
                 'p.deletedAt',
               ])
-              .select(
-                exp
-                  .selectFrom('pages as child')
-                  .select((eb) =>
-                    eb
-                      .case()
-                      .when(eb.fn.countAll(), '>', 0)
-                      .then(true)
-                      .else(false)
-                      .end()
-                      .as('count'),
-                  )
-                  .whereRef('child.parentPageId', '=', 'id')
-                  .where('child.deletedAt', 'is', null)
-                  .limit(1)
-                  .as('hasChildren'),
-              )
-              //.select((eb) => this.withHasChildren(eb))
               .innerJoin('page_ancestors as pa', 'pa.parentPageId', 'p.id')
               .where('p.deletedAt', 'is', null),
           ),
       )
       .selectFrom('page_ancestors')
-      .selectAll()
+      .selectAll('page_ancestors')
+      .select((eb) =>
+        eb.exists(
+          eb
+            .selectFrom('pages as child')
+            .select(sql`1`.as('one'))
+            .whereRef('child.parentPageId', '=', 'page_ancestors.id')
+            .where('child.deletedAt', 'is', null),
+        ).as('hasChildren'),
+      )
       .execute();
 
     return ancestors.reverse();
@@ -670,23 +774,72 @@ export class PageService {
 
   async getRecentSpacePages(
     spaceId: string,
+    userId: string,
     pagination: PaginationOptions,
   ): Promise<CursorPaginationResult<Page>> {
-    return this.pageRepo.getRecentPagesInSpace(spaceId, pagination);
+    const result = await this.pageRepo.getRecentPagesInSpace(
+      spaceId,
+      pagination,
+    );
+
+    if (result.items.length > 0) {
+      const pageIds = result.items.map((p) => p.id);
+      const accessibleIds =
+        await this.pagePermissionRepo.filterAccessiblePageIds({
+          pageIds,
+          userId,
+          spaceId,
+        });
+      const accessibleSet = new Set(accessibleIds);
+      result.items = result.items.filter((p) => accessibleSet.has(p.id));
+    }
+
+    return result;
   }
 
   async getRecentPages(
     userId: string,
     pagination: PaginationOptions,
   ): Promise<CursorPaginationResult<Page>> {
-    return this.pageRepo.getRecentPages(userId, pagination);
+    const result = await this.pageRepo.getRecentPages(userId, pagination);
+
+    if (result.items.length > 0) {
+      const pageIds = result.items.map((p) => p.id);
+      const accessibleIds =
+        await this.pagePermissionRepo.filterAccessiblePageIds({
+          pageIds,
+          userId,
+        });
+      const accessibleSet = new Set(accessibleIds);
+      result.items = result.items.filter((p) => accessibleSet.has(p.id));
+    }
+
+    return result;
   }
 
   async getDeletedSpacePages(
     spaceId: string,
+    userId: string,
     pagination: PaginationOptions,
   ): Promise<CursorPaginationResult<Page>> {
-    return this.pageRepo.getDeletedPagesInSpace(spaceId, pagination);
+    const result = await this.pageRepo.getDeletedPagesInSpace(
+      spaceId,
+      pagination,
+    );
+
+    if (result.items.length > 0) {
+      const pageIds = result.items.map((p) => p.id);
+      const accessibleIds =
+        await this.pagePermissionRepo.filterAccessiblePageIds({
+          pageIds,
+          userId,
+          spaceId,
+        });
+      const accessibleSet = new Set(accessibleIds);
+      result.items = result.items.filter((p) => accessibleSet.has(p.id));
+    }
+
+    return result;
   }
 
   async forceDelete(pageId: string, workspaceId: string): Promise<void> {
@@ -776,4 +929,61 @@ export class PageService {
 
     return prosemirrorJson;
   }
+
+  /**
+   * Filters a list of pages to only those accessible to the user while maintaining tree integrity.
+   * A page is included only if:
+   * 1. The user has access to it
+   * 2. Its parent is also included (or it's the root page)
+   * This ensures that if a middle page is inaccessible, its entire subtree is excluded.
+   */
+  private async filterAccessibleTreePages<
+    T extends { id: string; parentPageId: string | null },
+  >(
+    pages: T[],
+    rootPageId: string,
+    userId: string,
+    spaceId?: string,
+  ): Promise<T[]> {
+    if (pages.length === 0) return [];
+
+    const pageIds = pages.map((p) => p.id);
+    const accessibleIds = await this.pagePermissionRepo.filterAccessiblePageIds(
+      {
+        pageIds,
+        userId,
+        spaceId,
+      },
+    );
+    const accessibleSet = new Set(accessibleIds);
+
+    // Prune: include a page only if it's accessible AND its parent chain to root is included
+    const includedIds = new Set<string>();
+
+    // Process pages in a way that ensures parents are processed before children
+    // We do this by iterating until no more pages can be added
+    let changed = true;
+    while (changed) {
+      changed = false;
+      for (const page of pages) {
+        if (includedIds.has(page.id)) continue;
+        if (!accessibleSet.has(page.id)) continue;
+
+        // Root page: include if accessible
+        if (page.id === rootPageId) {
+          includedIds.add(page.id);
+          changed = true;
+          continue;
+        }
+
+        // Non-root: include if parent is already included
+        if (page.parentPageId && includedIds.has(page.parentPageId)) {
+          includedIds.add(page.id);
+          changed = true;
+        }
+      }
+    }
+
+    return pages.filter((p) => includedIds.has(p.id));
+  }
 }

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

@@ -7,6 +7,7 @@ import { sql } from 'kysely';
 import { PageRepo } from '@docmost/db/repos/page/page.repo';
 import { SpaceMemberRepo } from '@docmost/db/repos/space/space-member.repo';
 import { ShareRepo } from '@docmost/db/repos/share/share.repo';
+import { PagePermissionRepo } from '@docmost/db/repos/page/page-permission.repo';
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const tsquery = require('pg-tsquery')();
@@ -18,6 +19,7 @@ export class SearchService {
     private pageRepo: PageRepo,
     private shareRepo: ShareRepo,
     private spaceMemberRepo: SpaceMemberRepo,
+    private pagePermissionRepo: PagePermissionRepo,
   ) {}
 
   async searchPage(
@@ -115,10 +117,23 @@ export class SearchService {
     }
 
     //@ts-ignore
-    queryResults = await queryResults.execute();
+    let results: any[] = await queryResults.execute();
+
+    // Filter results by page-level permissions (if user is authenticated)
+    if (opts.userId && results.length > 0) {
+      const pageIds = results.map((r: any) => r.id);
+      const accessibleIds =
+        await this.pagePermissionRepo.filterAccessiblePageIds({
+          pageIds,
+          userId: opts.userId,
+          spaceId: searchParams.spaceId,
+        });
+      const accessibleSet = new Set(accessibleIds);
+      results = results.filter((r: any) => accessibleSet.has(r.id));
+    }
 
     //@ts-ignore
-    const searchResults = queryResults.map((result: SearchResponseDto) => {
+    const searchResults = results.map((result: SearchResponseDto) => {
       if (result.highlight) {
         result.highlight = result.highlight
           .replace(/\r\n|\r|\n/g, ' ')
@@ -207,6 +222,19 @@ export class SearchService {
         pageSearch = pageSearch.where('spaceId', 'in', userSpaceIds);
         pages = await pageSearch.execute();
       }
+
+      // Filter by page-level permissions
+      if (pages.length > 0) {
+        const pageIds = pages.map((p) => p.id);
+        const accessibleIds =
+          await this.pagePermissionRepo.filterAccessiblePageIds({
+            pageIds,
+            userId,
+            spaceId: suggestion?.spaceId,
+          });
+        const accessibleSet = new Set(accessibleIds);
+        pages = pages.filter((p) => accessibleSet.has(p.id));
+      }
     }
 
     return { users, groups, pages };

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

@@ -11,12 +11,7 @@ import {
 } from '@nestjs/common';
 import { AuthUser } from '../../common/decorators/auth-user.decorator';
 import { User, Workspace } from '@docmost/db/types/entity.types';
-import {
-  SpaceCaslAction,
-  SpaceCaslSubject,
-} from '../casl/interfaces/space-ability.type';
 import { AuthWorkspace } from '../../common/decorators/auth-workspace.decorator';
-import SpaceAbilityFactory from '../casl/abilities/space-ability.factory';
 import { ShareService } from './share.service';
 import {
   CreateShareDto,
@@ -26,6 +21,8 @@ import {
   UpdateShareDto,
 } from './dto/share.dto';
 import { PageRepo } from '@docmost/db/repos/page/page.repo';
+import { PagePermissionRepo } from '@docmost/db/repos/page/page-permission.repo';
+import { PageAccessService } from '../page-access/page-access.service';
 import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
 import { Public } from '../../common/decorators/public.decorator';
 import { ShareRepo } from '@docmost/db/repos/share/share.repo';
@@ -38,9 +35,10 @@ import { hasLicenseOrEE } from '../../common/helpers';
 export class ShareController {
   constructor(
     private readonly shareService: ShareService,
-    private readonly spaceAbility: SpaceAbilityFactory,
     private readonly shareRepo: ShareRepo,
     private readonly pageRepo: PageRepo,
+    private readonly pagePermissionRepo: PagePermissionRepo,
+    private readonly pageAccessService: PageAccessService,
     private readonly environmentService: EnvironmentService,
   ) {}
 
@@ -119,10 +117,7 @@ export class ShareController {
       throw new NotFoundException('Shared page not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(user, page.spaceId);
+    await this.pageAccessService.validateCanView(page, user);
-    if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Share)) {
-      throw new ForbiddenException();
-    }
 
     return this.shareService.getShareForPage(page.id, workspace.id);
   }
@@ -140,9 +135,17 @@ export class ShareController {
       throw new NotFoundException('Page not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(user, page.spaceId);
+    // User must be able to edit the page to create a share
-    if (ability.cannot(SpaceCaslAction.Create, SpaceCaslSubject.Share)) {
+    //TODO: i dont think this is neccessary if we prevent restricted pages from getting shared
-      throw new ForbiddenException();
+    // rather, use space level permission and workspace/space level sharing restriction
+    await this.pageAccessService.validateCanEdit(page, user);
+
+    // Prevent sharing restricted pages
+    const isRestricted = await this.pagePermissionRepo.hasRestrictedAncestor(
+      page.id,
+    );
+    if (isRestricted) {
+      throw new BadRequestException('Cannot share a restricted page');
     }
 
     const sharingAllowed = await this.shareService.isSharingAllowed(
@@ -170,11 +173,14 @@ export class ShareController {
       throw new NotFoundException('Share not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(user, share.spaceId);
+    const page = await this.pageRepo.findById(share.pageId);
-    if (ability.cannot(SpaceCaslAction.Edit, SpaceCaslSubject.Share)) {
+    if (!page) {
-      throw new ForbiddenException();
+      throw new NotFoundException('Page not found');
     }
 
+    // User must be able to edit the page to update its share
+    await this.pageAccessService.validateCanEdit(page, user);
+
     return this.shareService.updateShare(share.id, updateShareDto);
   }
 
@@ -187,11 +193,14 @@ export class ShareController {
       throw new NotFoundException('Share not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(user, share.spaceId);
+    const page = await this.pageRepo.findById(share.pageId);
-    if (ability.cannot(SpaceCaslAction.Manage, SpaceCaslSubject.Share)) {
+    if (!page) {
-      throw new ForbiddenException();
+      throw new NotFoundException('Page not found');
     }
 
+    // User must be able to edit the page to delete its share
+    await this.pageAccessService.validateCanEdit(page, user);
+
     await this.shareRepo.deleteShare(share.id);
   }
 

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

@@ -19,6 +19,7 @@ import {
 } from '../../common/helpers/prosemirror/utils';
 import { Node } from '@tiptap/pm/model';
 import { ShareRepo } from '@docmost/db/repos/share/share.repo';
+import { PagePermissionRepo } from '@docmost/db/repos/page/page-permission.repo';
 import { updateAttachmentAttr } from './share.util';
 import { Page } from '@docmost/db/types/entity.types';
 import { validate as isValidUUID } from 'uuid';
@@ -31,6 +32,7 @@ export class ShareService {
   constructor(
     private readonly shareRepo: ShareRepo,
     private readonly pageRepo: PageRepo,
+    private readonly pagePermissionRepo: PagePermissionRepo,
     @InjectKysely() private readonly db: KyselyDB,
     private readonly tokenService: TokenService,
   ) {}
@@ -41,12 +43,20 @@ export class ShareService {
       throw new NotFoundException('Share not found');
     }
 
-    if (share.includeSubPages) {
+    const isRestricted =
-      const pageList = await this.pageRepo.getPageAndDescendants(share.pageId, {
+      await this.pagePermissionRepo.hasRestrictedAncestor(share.pageId);
-        includeContent: false,
+    if (isRestricted) {
-      });
+      throw new NotFoundException('Share not found');
+    }
 
-      return { share, pageTree: pageList };
+    if (share.includeSubPages) {
+      const pageTree =
+        await this.pageRepo.getPageAndDescendantsExcludingRestricted(
+          share.pageId,
+          { includeContent: false },
+        );
+
+      return { share, pageTree };
     } else {
       return { share, pageTree: [] };
     }
@@ -112,6 +122,13 @@ export class ShareService {
       throw new NotFoundException('Shared page not found');
     }
 
+    // Block access to restricted pages
+    const isRestricted =
+      await this.pagePermissionRepo.hasRestrictedAncestor(page.id);
+    if (isRestricted) {
+      throw new NotFoundException('Shared page not found');
+    }
+
     page.content = await this.updatePublicAttachments(page);
 
     return { page, share };

apps/server/src/database/database.module.ts

@@ -15,6 +15,7 @@ import { GroupUserRepo } from '@docmost/db/repos/group/group-user.repo';
 import { SpaceRepo } from '@docmost/db/repos/space/space.repo';
 import { SpaceMemberRepo } from '@docmost/db/repos/space/space-member.repo';
 import { PageRepo } from './repos/page/page.repo';
+import { PagePermissionRepo } from './repos/page/page-permission.repo';
 import { CommentRepo } from './repos/comment/comment.repo';
 import { PageHistoryRepo } from './repos/page/page-history.repo';
 import { AttachmentRepo } from './repos/attachment/attachment.repo';
@@ -76,6 +77,7 @@ import { normalizePostgresUrl } from '../common/helpers';
     SpaceRepo,
     SpaceMemberRepo,
     PageRepo,
+    PagePermissionRepo,
     PageHistoryRepo,
     CommentRepo,
     AttachmentRepo,
@@ -94,6 +96,7 @@ import { normalizePostgresUrl } from '../common/helpers';
     SpaceRepo,
     SpaceMemberRepo,
     PageRepo,
+    PagePermissionRepo,
     PageHistoryRepo,
     CommentRepo,
     AttachmentRepo,

apps/server/src/database/migrations/20251223T130000-page-permissions.ts

@@ -0,0 +1,93 @@
+import { Kysely, sql } from 'kysely';
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await db.schema
+    .createTable('page_access')
+    .addColumn('id', 'uuid', (col) =>
+      col.primaryKey().defaultTo(sql`gen_uuid_v7()`),
+    )
+    .addColumn('page_id', 'uuid', (col) =>
+      col.notNull().unique().references('pages.id').onDelete('cascade'),
+    )
+    .addColumn('workspace_id', 'uuid', (col) =>
+      col.notNull().references('workspaces.id').onDelete('cascade'),
+    )
+    .addColumn('access_level', 'varchar', (col) => col.notNull())
+    .addColumn('creator_id', 'uuid', (col) =>
+      col.references('users.id').onDelete('set null'),
+    )
+    .addColumn('created_at', 'timestamptz', (col) =>
+      col.notNull().defaultTo(sql`now()`),
+    )
+    .addColumn('updated_at', 'timestamptz', (col) =>
+      col.notNull().defaultTo(sql`now()`),
+    )
+    .execute();
+
+  await db.schema
+    .createTable('page_permissions')
+    .addColumn('id', 'uuid', (col) =>
+      col.primaryKey().defaultTo(sql`gen_uuid_v7()`),
+    )
+    .addColumn('page_access_id', 'uuid', (col) =>
+      col.notNull().references('page_access.id').onDelete('cascade'),
+    )
+    .addColumn('user_id', 'uuid', (col) =>
+      col.references('users.id').onDelete('cascade'),
+    )
+    .addColumn('group_id', 'uuid', (col) =>
+      col.references('groups.id').onDelete('cascade'),
+    )
+    .addColumn('role', 'varchar', (col) => col.notNull())
+    .addColumn('added_by_id', 'uuid', (col) =>
+      col.references('users.id').onDelete('set null'),
+    )
+    .addColumn('created_at', 'timestamptz', (col) =>
+      col.notNull().defaultTo(sql`now()`),
+    )
+    .addColumn('updated_at', 'timestamptz', (col) =>
+      col.notNull().defaultTo(sql`now()`),
+    )
+    .addUniqueConstraint('page_access_user_unique', [
+      'page_access_id',
+      'user_id',
+    ])
+    .addUniqueConstraint('page_access_group_unique', [
+      'page_access_id',
+      'group_id',
+    ])
+    .addCheckConstraint(
+      'allow_either_user_id_or_group_id_check',
+      sql`((user_id IS NOT NULL AND group_id IS NULL) OR (user_id IS NULL AND group_id IS NOT NULL))`,
+    )
+    .execute();
+
+  await db.schema
+    .createIndex('idx_page_access_workspace')
+    .on('page_access')
+    .column('workspace_id')
+    .execute();
+
+  await db.schema
+    .createIndex('idx_page_permissions_page_access')
+    .on('page_permissions')
+    .column('page_access_id')
+    .execute();
+
+  await db.schema
+    .createIndex('idx_page_permissions_user')
+    .on('page_permissions')
+    .column('user_id')
+    .execute();
+
+  await db.schema
+    .createIndex('idx_page_permissions_group')
+    .on('page_permissions')
+    .column('group_id')
+    .execute();
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+  await db.schema.dropTable('page_permissions').ifExists().execute();
+  await db.schema.dropTable('page_access').ifExists().execute();
+}

apps/server/src/database/pagination/cursor-pagination.ts

@@ -306,6 +306,21 @@ export function defaultEncodeCursor<
   return Buffer.from(cursor.toString(), 'utf8').toString('base64url');
 }
 
+export function emptyCursorPaginationResult<T>(
+  limit: number,
+): CursorPaginationResult<T> {
+  return {
+    items: [],
+    meta: {
+      limit,
+      hasNextPage: false,
+      hasPrevPage: false,
+      nextCursor: null,
+      prevCursor: null,
+    },
+  };
+}
+
 export function defaultDecodeCursor<
   DB,
   TB extends keyof DB,

apps/server/src/database/repos/group/group-user.repo.ts

@@ -175,4 +175,14 @@ export class GroupUserRepo {
       .where('groupId', '=', groupId)
       .execute();
   }
+
+  async getUserGroupIds(userId: string): Promise<string[]> {
+    const results = await this.db
+      .selectFrom('groupUsers')
+      .select('groupId')
+      .where('userId', '=', userId)
+      .execute();
+
+    return results.map((r) => r.groupId);
+  }
 }

apps/server/src/database/repos/page/page.repo.ts

@@ -175,11 +175,13 @@ export class PageRepo {
           .selectFrom('pages')
           .select(['id'])
           .where('id', '=', pageId)
+          .where('deletedAt', 'is', null)
           .unionAll((exp) =>
             exp
               .selectFrom('pages as p')
               .select(['p.id'])
-              .innerJoin('page_descendants as pd', 'pd.id', 'p.parentPageId'),
+              .innerJoin('page_descendants as pd', 'pd.id', 'p.parentPageId')
+              .where('p.deletedAt', 'is', null),
           ),
       )
       .selectFrom('page_descendants')
@@ -197,6 +199,7 @@ export class PageRepo {
             deletedAt: currentDate,
           })
           .where('id', 'in', pageIds)
+          .where('deletedAt', 'is', null)
           .execute();
 
         await trx.deleteFrom('shares').where('pageId', 'in', pageIds).execute();
@@ -472,4 +475,75 @@ export class PageRepo {
       .selectAll()
       .execute();
   }
+
+  /**
+   * Get page and all descendants, excluding restricted pages and their subtrees.
+   * More efficient than getPageAndDescendants + filtering because:
+   * 1. Single DB query (no separate restricted IDs query)
+   * 2. Stops traversing at restricted pages (doesn't fetch data to discard)
+   * 3. No in-memory filtering needed
+   */
+  async getPageAndDescendantsExcludingRestricted(
+    parentPageId: string,
+    opts: { includeContent: boolean },
+  ) {
+    return (
+      this.db
+        .withRecursive('page_hierarchy', (db) =>
+          db
+            .selectFrom('pages')
+            .leftJoin('pageAccess', 'pageAccess.pageId', 'pages.id')
+            .select([
+              'pages.id',
+              'pages.slugId',
+              'pages.title',
+              'pages.icon',
+              'pages.position',
+              'pages.parentPageId',
+              'pages.spaceId',
+              'pages.workspaceId',
+              sql<boolean>`page_access.id IS NOT NULL`.as('isRestricted'),
+            ])
+            .$if(opts?.includeContent, (qb) => qb.select('pages.content'))
+            .where('pages.id', '=', parentPageId)
+            .where('pages.deletedAt', 'is', null)
+            .unionAll((exp) =>
+              exp
+                .selectFrom('pages as p')
+                .innerJoin('page_hierarchy as ph', 'p.parentPageId', 'ph.id')
+                .leftJoin('pageAccess', 'pageAccess.pageId', 'p.id')
+                .select([
+                  'p.id',
+                  'p.slugId',
+                  'p.title',
+                  'p.icon',
+                  'p.position',
+                  'p.parentPageId',
+                  'p.spaceId',
+                  'p.workspaceId',
+                  sql<boolean>`page_access.id IS NOT NULL`.as('isRestricted'),
+                ])
+                .$if(opts?.includeContent, (qb) => qb.select('p.content'))
+                .where('p.deletedAt', 'is', null)
+                // Only recurse into children of non-restricted pages
+                .where('ph.isRestricted', '=', false),
+            ),
+        )
+        .selectFrom('page_hierarchy')
+        .select([
+          'id',
+          'slugId',
+          'title',
+          'icon',
+          'position',
+          'parentPageId',
+          'spaceId',
+          'workspaceId',
+        ])
+        .$if(opts?.includeContent, (qb) => qb.select('content'))
+        // Filter out restricted pages from the result
+        .where('isRestricted', '=', false)
+        .execute()
+    );
+  }
 }

apps/server/src/database/repos/page/types/page-permission.types.ts

@@ -0,0 +1,23 @@
+type PagePermissionUserMember = {
+  id: string;
+  name: string;
+  email: string;
+  avatarUrl: string | null;
+  type: 'user';
+  role: string;
+  createdAt: Date;
+};
+
+type PagePermissionGroupMember = {
+  id: string;
+  name: string;
+  memberCount: number;
+  isDefault: boolean;
+  type: 'group';
+  role: string;
+  createdAt: Date;
+};
+
+export type PagePermissionMember =
+  | PagePermissionUserMember
+  | PagePermissionGroupMember;

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

@@ -390,6 +390,27 @@ export interface Watchers {
   createdAt: Generated<Timestamp>;
 }
 
+export interface PageAccess {
+  id: Generated<string>;
+  pageId: string;
+  workspaceId: string;
+  accessLevel: string;
+  creatorId: string | null;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Generated<Timestamp>;
+}
+
+export interface PagePermissions {
+  id: Generated<string>;
+  pageAccessId: string;
+  userId: string | null;
+  groupId: string | null;
+  role: string;
+  addedById: string | null;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Generated<Timestamp>;
+}
+
 export interface DB {
   apiKeys: ApiKeys;
   attachments: Attachments;
@@ -402,7 +423,10 @@ export interface DB {
   groups: Groups;
   groupUsers: GroupUsers;
   notifications: Notifications;
+  pageAccess: PageAccess;
+  pageHierarchy: PageHierarchy;
   pageHistory: PageHistory;
+  pagePermissions: PagePermissions;
   pages: Pages;
   shares: Shares;
   spaceMembers: SpaceMembers;

apps/server/src/database/types/entity.types.ts

@@ -4,6 +4,8 @@ import {
   Comments,
   Groups,
   Notifications,
+  PageAccess as _PageAccess,
+  PagePermissions as _PagePermissions,
   Pages,
   Spaces,
   Users,
@@ -143,3 +145,13 @@ export type UpdatableNotification = Updateable<Omit<Notifications, 'id'>>;
 export type Watcher = Selectable<Watchers>;
 export type InsertableWatcher = Insertable<Watchers>;
 export type UpdatableWatcher = Updateable<Omit<Watchers, 'id'>>;
+
+// Page Access
+export type PageAccess = Selectable<_PageAccess>;
+export type InsertablePageAccess = Insertable<_PageAccess>;
+export type UpdatablePageAccess = Updateable<Omit<_PageAccess, 'id'>>;
+
+// Page Permission
+export type PagePermission = Selectable<_PagePermissions>;
+export type InsertablePagePermission = Insertable<_PagePermissions>;
+export type UpdatablePagePermission = Updateable<Omit<_PagePermissions, 'id'>>;

apps/server/src/integrations/export/export.controller.ts

@@ -16,6 +16,7 @@ import { User } from '@docmost/db/types/entity.types';
 import SpaceAbilityFactory from '../../core/casl/abilities/space-ability.factory';
 import { JwtAuthGuard } from '../../common/guards/jwt-auth.guard';
 import { PageRepo } from '@docmost/db/repos/page/page.repo';
+import { PageAccessService } from '../../core/page-access/page-access.service';
 import {
   SpaceCaslAction,
   SpaceCaslSubject,
@@ -32,6 +33,7 @@ export class ExportController {
     private readonly exportService: ExportService,
     private readonly pageRepo: PageRepo,
     private readonly spaceAbility: SpaceAbilityFactory,
+    private readonly pageAccessService: PageAccessService,
   ) {}
 
   @UseGuards(JwtAuthGuard)
@@ -50,16 +52,14 @@ export class ExportController {
       throw new NotFoundException('Page not found');
     }
 
-    const ability = await this.spaceAbility.createForUser(user, page.spaceId);
+    await this.pageAccessService.validateCanView(page, user);
-    if (ability.cannot(SpaceCaslAction.Read, SpaceCaslSubject.Page)) {
-      throw new ForbiddenException();
-    }
 
     const zipFileStream = await this.exportService.exportPages(
       dto.pageId,
       dto.format,
       dto.includeAttachments,
       dto.includeChildren,
+      user.id,
     );
 
     const fileName = sanitize(page.title || 'untitled') + '.zip';
@@ -90,6 +90,7 @@ export class ExportController {
       dto.spaceId,
       dto.format,
       dto.includeAttachments,
+      user.id,
     );
 
     res.headers({

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

@@ -25,6 +25,7 @@ import {
   ExportPageMetadata,
 } from '../../common/helpers/types/export-metadata.types';
 import { PageRepo } from '@docmost/db/repos/page/page.repo';
+import { PagePermissionRepo } from '@docmost/db/repos/page/page-permission.repo';
 import { Node } from '@tiptap/pm/model';
 import { EditorState } from '@tiptap/pm/state';
 // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -44,6 +45,7 @@ export class ExportService {
 
   constructor(
     private readonly pageRepo: PageRepo,
+    private readonly pagePermissionRepo: PagePermissionRepo,
     @InjectKysely() private readonly db: KyselyDB,
     private readonly storageService: StorageService,
     private readonly environmentService: EnvironmentService,
@@ -100,6 +102,8 @@ export class ExportService {
     format: string,
     includeAttachments: boolean,
     includeChildren: boolean,
+    userId?: string,
+    ignorePermissions = false,
   ) {
     let pages: Page[];
 
@@ -113,7 +117,7 @@ export class ExportService {
       const page = await this.pageRepo.findById(pageId, {
         includeContent: true,
       });
-      if (page){
+      if (page) {
         pages = [page];
       }
     }
@@ -122,14 +126,38 @@ export class ExportService {
       throw new BadRequestException('No pages to export');
     }
 
+    if (!ignorePermissions && userId) {
+      pages = await this.filterPagesForExport(
+        pages,
+        pageId,
+        userId,
+        pages[0].spaceId,
+      );
+      if (pages.length === 0) {
+        throw new BadRequestException('No accessible pages to export');
+      }
+    }
+
     const parentPageIndex = pages.findIndex((obj) => obj.id === pageId);
+
+    //After filtering by permissions, if the root page itself is not accessible to the user, findIndex returns -1
+    if (parentPageIndex === -1) {
+      throw new BadRequestException('Root page is not accessible');
+    }
     // set to null to make export of pages with parentId work
     pages[parentPageIndex].parentPageId = null;
 
     const tree = buildTree(pages as Page[]);
 
     const zip = new JSZip();
-    await this.zipPages(tree, format, zip, includeAttachments);
+    await this.zipPages(
+      tree,
+      format,
+      zip,
+      includeAttachments,
+      userId,
+      ignorePermissions,
+    );
 
     const zipFile = zip.generateNodeStream({
       type: 'nodebuffer',
@@ -144,6 +172,8 @@ export class ExportService {
     spaceId: string,
     format: string,
     includeAttachments: boolean,
+    userId?: string,
+    ignorePermissions = false,
   ) {
     const space = await this.db
       .selectFrom('spaces')
@@ -155,7 +185,7 @@ export class ExportService {
       throw new NotFoundException('Space not found');
     }
 
-    const pages = await this.db
+    let pages = await this.db
       .selectFrom('pages')
       .select([
         'pages.id',
@@ -174,11 +204,30 @@ export class ExportService {
       .where('deletedAt', 'is', null)
       .execute();
 
+    if (!ignorePermissions && userId) {
+      pages = await this.filterPagesForExport(
+        pages as Page[],
+        null,
+        userId,
+        spaceId,
+      );
+      if (pages.length === 0) {
+        throw new BadRequestException('No accessible pages to export');
+      }
+    }
+
     const tree = buildTree(pages as Page[]);
 
     const zip = new JSZip();
 
-    await this.zipPages(tree, format, zip, includeAttachments);
+    await this.zipPages(
+      tree,
+      format,
+      zip,
+      includeAttachments,
+      userId,
+      ignorePermissions,
+    );
 
     const zipFile = zip.generateNodeStream({
       type: 'nodebuffer',
@@ -198,6 +247,8 @@ export class ExportService {
     format: string,
     zip: JSZip,
     includeAttachments: boolean,
+    userId?: string,
+    ignorePermissions = false,
   ): Promise<void> {
     const slugIdToPath: Record<string, string> = {};
     const pageIdToFilePath: Record<string, string> = {};
@@ -219,6 +270,8 @@ export class ExportService {
         const prosemirrorJson = await this.turnPageMentionsToLinks(
           getProsemirrorContent(page.content),
           page.workspaceId,
+          userId,
+          ignorePermissions,
         );
 
         const currentPagePath = slugIdToPath[page.slugId];
@@ -303,10 +356,15 @@ export class ExportService {
     }
   }
 
-  async turnPageMentionsToLinks(prosemirrorJson: any, workspaceId: string) {
+  async turnPageMentionsToLinks(
+    prosemirrorJson: any,
+    workspaceId: string,
+    userId?: string,
+    ignorePermissions = false,
+  ) {
     const doc = jsonToNode(prosemirrorJson);
 
-    const pageMentionIds = [];
+    let pageMentionIds: string[] = [];
 
     doc.descendants((node: Node) => {
       if (node.type.name === 'mention' && node.attrs.entityType === 'page') {
@@ -320,13 +378,32 @@ export class ExportService {
       return prosemirrorJson;
     }
 
-    const pages = await this.db
+    // Filter to only accessible pages if permissions are enforced
-      .selectFrom('pages')
+    if (!ignorePermissions && userId) {
-      .select(['id', 'slugId', 'title', 'creatorId', 'spaceId', 'workspaceId'])
+      pageMentionIds =
-      .select((eb) => this.pageRepo.withSpace(eb))
+        await this.pagePermissionRepo.filterAccessiblePageIds({
-      .where('id', 'in', pageMentionIds)
+          pageIds: pageMentionIds,
-      .where('workspaceId', '=', workspaceId)
+          userId,
-      .execute();
+        });
+    }
+
+    const pages =
+      pageMentionIds.length > 0
+        ? await this.db
+            .selectFrom('pages')
+            .select([
+              'id',
+              'slugId',
+              'title',
+              'creatorId',
+              'spaceId',
+              'workspaceId',
+            ])
+            .select((eb) => this.pageRepo.withSpace(eb))
+            .where('id', 'in', pageMentionIds)
+            .where('workspaceId', '=', workspaceId)
+            .execute()
+        : [];
 
     const pageMap = new Map(pages.map((page) => [page.id, page]));
 
@@ -398,4 +475,51 @@ export class ExportService {
 
     return updatedDoc.toJSON();
   }
+
+  private async filterPagesForExport(
+    pages: Page[],
+    rootPageId: string | null,
+    userId: string,
+    spaceId: string,
+  ): Promise<Page[]> {
+    if (pages.length === 0) return [];
+
+    const pageIds = pages.map((p) => p.id);
+    const accessibleIds =
+      await this.pagePermissionRepo.filterAccessiblePageIds({
+        pageIds,
+        userId,
+        spaceId,
+      });
+    const accessibleSet = new Set(accessibleIds);
+
+    const includedIds = new Set<string>();
+
+    let changed = true;
+    while (changed) {
+      changed = false;
+      for (const page of pages) {
+        if (includedIds.has(page.id)) continue;
+        if (!accessibleSet.has(page.id)) continue;
+
+        // Root page or top-level page in space export
+        if (
+          page.id === rootPageId ||
+          (rootPageId === null && page.parentPageId === null)
+        ) {
+          includedIds.add(page.id);
+          changed = true;
+          continue;
+        }
+
+        // Non-root: include if parent is already included
+        if (page.parentPageId && includedIds.has(page.parentPageId)) {
+          includedIds.add(page.id);
+          changed = true;
+        }
+      }
+    }
+
+    return pages.filter((p) => includedIds.has(p.id));
+  }
 }

apps/server/src/integrations/queue/constants/queue.interface.ts

@@ -1,5 +1,4 @@
-import { MentionNode } from "../../../common/helpers/prosemirror/utils";
+import { MentionNode } from '../../../common/helpers/prosemirror/utils';
-
 
 export interface IPageBacklinkJob {
   pageId: string;

apps/server/src/ws/ws-tree.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@nestjs/common';
+import { Page } from '@docmost/db/types/entity.types';
+import { WsService } from './ws.service';
+
+@Injectable()
+export class WsTreeService {
+  constructor(private readonly wsService: WsService) {}
+
+  async notifyPageRestricted(page: Page, excludeUserId: string): Promise<void> {
+    await this.wsService.emitToSpaceExceptUsers(page.spaceId, [excludeUserId], {
+      operation: 'deleteTreeNode',
+      spaceId: page.spaceId,
+      payload: {
+        node: {
+          id: page.id,
+          slugId: page.slugId,
+        },
+      },
+    });
+  }
+
+  async notifyPermissionGranted(page: Page, userIds: string[]): Promise<void> {
+    if (userIds.length === 0) return;
+
+    await this.wsService.emitToUsers(userIds, {
+      operation: 'addTreeNode',
+      spaceId: page.spaceId,
+      payload: {
+        parentId: page.parentPageId ?? null,
+        index: 0,
+        data: {
+          id: page.id,
+          slugId: page.slugId,
+          name: page.title ?? '',
+          title: page.title,
+          icon: page.icon,
+          position: page.position,
+          spaceId: page.spaceId,
+          parentPageId: page.parentPageId,
+          creatorId: page.creatorId,
+          hasChildren: false,
+          children: [],
+        },
+      },
+    });
+  }
+}

apps/server/src/ws/ws.gateway.ts

@@ -1,6 +1,7 @@
 import {
   MessageBody,
   OnGatewayConnection,
+  OnGatewayInit,
   SubscribeMessage,
   WebSocketGateway,
   WebSocketServer,
@@ -10,20 +11,30 @@ import { TokenService } from '../core/auth/services/token.service';
 import { JwtPayload, JwtType } from '../core/auth/dto/jwt-payload';
 import { OnModuleDestroy } from '@nestjs/common';
 import { SpaceMemberRepo } from '@docmost/db/repos/space/space-member.repo';
+import { WsService } from './ws.service';
+import { getSpaceRoomName, getUserRoomName } from './ws.utils';
 import * as cookie from 'cookie';
 
 @WebSocketGateway({
   cors: { origin: '*' },
   transports: ['websocket'],
 })
-export class WsGateway implements OnGatewayConnection, OnModuleDestroy {
+export class WsGateway
+  implements OnGatewayConnection, OnGatewayInit, OnModuleDestroy
+{
   @WebSocketServer()
   server: Server;
+
   constructor(
     private tokenService: TokenService,
     private spaceMemberRepo: SpaceMemberRepo,
+    private wsService: WsService,
   ) {}
 
+  afterInit(server: Server): void {
+    this.wsService.setServer(server);
+  }
+
   async handleConnection(client: Socket, ...args: any[]): Promise<void> {
     try {
       const cookies = cookie.parse(client.handshake.headers.cookie);
@@ -35,11 +46,13 @@ export class WsGateway implements OnGatewayConnection, OnModuleDestroy {
       const userId = token.sub;
       const workspaceId = token.workspaceId;
 
+      client.data.userId = userId;
+
       const userSpaceIds = await this.spaceMemberRepo.getUserSpaceIds(userId);
 
-      const userRoom = `user-${userId}`;
+      const userRoom = getUserRoomName(userId);
       const workspaceRoom = `workspace-${workspaceId}`;
-      const spaceRooms = userSpaceIds.map((id) => this.getSpaceRoomName(id));
+      const spaceRooms = userSpaceIds.map((id) => getSpaceRoomName(id));
 
       client.join([userRoom, workspaceRoom, ...spaceRooms]);
     } catch (err) {
@@ -49,17 +62,9 @@ export class WsGateway implements OnGatewayConnection, OnModuleDestroy {
   }
 
   @SubscribeMessage('message')
-  handleMessage(client: Socket, data: any): void {
+  async handleMessage(client: Socket, data: any): Promise<void> {
-    const spaceEvents = [
+    if (this.wsService.isTreeEvent(data)) {
-      'updateOne',
+      await this.wsService.handleTreeEvent(client, data);
-      'addTreeNode',
-      'moveTreeNode',
-      'deleteTreeNode',
-    ];
-
-    if (spaceEvents.includes(data?.operation) && data?.spaceId) {
-      const room = this.getSpaceRoomName(data.spaceId);
-      client.broadcast.to(room).emit('message', data);
       return;
     }
 
@@ -82,8 +87,4 @@ export class WsGateway implements OnGatewayConnection, OnModuleDestroy {
       this.server.close();
     }
   }
-
-  getSpaceRoomName(spaceId: string): string {
-    return `space-${spaceId}`;
-  }
 }

apps/server/src/ws/ws.module.ts

@@ -1,10 +1,13 @@
-import { Module } from '@nestjs/common';
+import { Global, Module } from '@nestjs/common';
 import { WsGateway } from './ws.gateway';
+import { WsService } from './ws.service';
+import { WsTreeService } from './ws-tree.service';
 import { TokenModule } from '../core/auth/token.module';
 
+@Global()
 @Module({
   imports: [TokenModule],
-  providers: [WsGateway],
+  providers: [WsGateway, WsService, WsTreeService],
-  exports: [WsGateway],
+  exports: [WsGateway, WsService, WsTreeService],
 })
 export class WsModule {}

apps/server/src/ws/ws.service.ts

@@ -0,0 +1,157 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { CACHE_MANAGER } from '@nestjs/cache-manager';
+import { Cache } from 'cache-manager';
+import { Server, Socket } from 'socket.io';
+import { PagePermissionRepo } from '@docmost/db/repos/page/page-permission.repo';
+import {
+  TREE_EVENTS,
+  WS_SPACE_RESTRICTION_CACHE_PREFIX,
+  WS_CACHE_TTL_MS,
+  getSpaceRoomName,
+  getUserRoomName,
+} from './ws.utils';
+
+@Injectable()
+export class WsService {
+  private server: Server;
+
+  constructor(
+    private readonly pagePermissionRepo: PagePermissionRepo,
+    @Inject(CACHE_MANAGER) private readonly cacheManager: Cache,
+  ) {}
+
+  setServer(server: Server): void {
+    this.server = server;
+  }
+
+  async handleTreeEvent(client: Socket, data: any): Promise<void> {
+    const room = getSpaceRoomName(data.spaceId);
+
+    const hasRestrictions = await this.spaceHasRestrictions(data.spaceId);
+    if (!hasRestrictions) {
+      client.broadcast.to(room).emit('message', data);
+      return;
+    }
+
+    const pageId = this.extractPageId(data);
+    if (!pageId) {
+      client.broadcast.to(room).emit('message', data);
+      return;
+    }
+
+    const isRestricted =
+      await this.pagePermissionRepo.hasRestrictedAncestor(pageId);
+    if (!isRestricted) {
+      client.broadcast.to(room).emit('message', data);
+      return;
+    }
+
+    await this.broadcastToAuthorizedUsers(client, room, pageId, data);
+  }
+
+  async invalidateSpaceRestrictionCache(spaceId: string): Promise<void> {
+    await this.cacheManager.del(
+      `${WS_SPACE_RESTRICTION_CACHE_PREFIX}${spaceId}`,
+    );
+  }
+
+  async emitToUsers(userIds: string[], data: any): Promise<void> {
+    if (userIds.length === 0) return;
+    const rooms = userIds.map((id) => getUserRoomName(id));
+    this.server.to(rooms).emit('message', data);
+  }
+
+  async emitToSpaceExceptUsers(
+    spaceId: string,
+    excludeUserIds: string[],
+    data: any,
+  ): Promise<void> {
+    const room = getSpaceRoomName(spaceId);
+    const sockets = await this.server.in(room).fetchSockets();
+    const excludeSet = new Set(excludeUserIds);
+
+    for (const socket of sockets) {
+      const userId = socket.data.userId as string;
+      if (userId && !excludeSet.has(userId)) {
+        socket.emit('message', data);
+      }
+    }
+  }
+
+  isTreeEvent(data: any): boolean {
+    return TREE_EVENTS.has(data?.operation) && !!data?.spaceId;
+  }
+
+  private async broadcastToAuthorizedUsers(
+    sender: Socket,
+    room: string,
+    pageId: string,
+    data: any,
+  ): Promise<void> {
+    const sockets = await this.server.in(room).fetchSockets();
+
+    const otherSockets = sockets.filter((s) => s.id !== sender.id);
+    if (otherSockets.length === 0) return;
+
+    const userSocketMap = new Map<string, typeof otherSockets>();
+    for (const socket of otherSockets) {
+      const userId = socket.data.userId as string;
+      if (!userId) continue;
+      const existing = userSocketMap.get(userId);
+      if (existing) {
+        existing.push(socket);
+      } else {
+        userSocketMap.set(userId, [socket]);
+      }
+    }
+
+    const candidateUserIds = Array.from(userSocketMap.keys());
+    if (candidateUserIds.length === 0) return;
+
+    const authorizedUserIds =
+      await this.pagePermissionRepo.getUserIdsWithPageAccess(
+        pageId,
+        candidateUserIds,
+      );
+
+    const authorizedSet = new Set(authorizedUserIds);
+    for (const [userId, userSockets] of userSocketMap) {
+      if (authorizedSet.has(userId)) {
+        for (const socket of userSockets) {
+          socket.emit('message', data);
+        }
+      }
+    }
+  }
+
+  private async spaceHasRestrictions(spaceId: string): Promise<boolean> {
+    const cacheKey = `${WS_SPACE_RESTRICTION_CACHE_PREFIX}${spaceId}`;
+
+    const cached = await this.cacheManager.get<boolean>(cacheKey);
+    if (cached !== undefined && cached !== null) {
+      return cached;
+    }
+
+    const hasRestrictions =
+      await this.pagePermissionRepo.hasRestrictedPagesInSpace(spaceId);
+
+    await this.cacheManager.set(cacheKey, hasRestrictions, WS_CACHE_TTL_MS);
+
+    return hasRestrictions;
+  }
+
+  private extractPageId(data: any): string | null {
+    switch (data.operation) {
+      case 'addTreeNode':
+        return data.payload?.data?.id ?? null;
+      case 'moveTreeNode':
+        return data.payload?.id ?? null;
+      case 'deleteTreeNode':
+        return data.payload?.node?.id ?? null;
+      case 'updateOne':
+        return data.id ?? null;
+      default:
+        return null;
+    }
+  }
+}

apps/server/src/ws/ws.utils.ts

@@ -0,0 +1,17 @@
+export const WS_CACHE_TTL_MS = 30_000;
+export const WS_SPACE_RESTRICTION_CACHE_PREFIX = 'ws:space-restrictions:';
+
+export function getSpaceRoomName(spaceId: string): string {
+  return `space-${spaceId}`;
+}
+
+export function getUserRoomName(userId: string): string {
+  return `user-${userId}`;
+}
+
+export const TREE_EVENTS = new Set([
+  'updateOne',
+  'addTreeNode',
+  'moveTreeNode',
+  'deleteTreeNode',
+]);

apps/server/test/jest-e2e.json

@@ -5,5 +5,10 @@
   "testRegex": ".e2e-spec.ts$",
   "transform": {
     "^.+\\.(t|j)s$": "ts-jest"
+  },
+  "moduleNameMapper": {
+    "^@docmost/db/(.*)$": "<rootDir>/../src/database/$1",
+    "^@docmost/transactional/(.*)$": "<rootDir>/../src/integrations/transactional/$1",
+    "^@docmost/ee/(.*)$": "<rootDir>/../src/ee/$1"
   }
 }

package.json

@@ -96,8 +96,7 @@
   "packageManager": "pnpm@10.4.0",
   "pnpm": {
     "patchedDependencies": {
-      "react-arborist@3.4.0": "patches/react-arborist@3.4.0.patch",
+      "react-arborist@3.4.0": "patches/react-arborist@3.4.0.patch"
-      "@tiptap/core": "patches/@tiptap__core.patch"
     },
     "overrides": {
       "jsdom": "25.0.1",

packages/editor-ext/src/index.ts

@@ -25,4 +25,3 @@ export * from "./lib/heading/heading";
 export * from "./lib/unique-id";
 export * from "./lib/shared-storage";
 export * from "./lib/recreate-transform";
-export * from "./lib/columns";

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

@@ -1,21 +1,8 @@
-export type CalloutType =
+export type CalloutType = "default" | "info" | "success" | "warning" | "danger";
-  | 'default'
+const validCalloutTypes = ["default", "info", "success", "warning", "danger"];
-  | 'info'
-  | 'note'
-  | 'success'
-  | 'warning'
-  | 'danger';
-const validCalloutTypes = [
-  'default',
-  'info',
-  'note',
-  'success',
-  'warning',
-  'danger',
-];
 
 export function getValidCalloutType(value: string): string {
   if (value) {
-    return validCalloutTypes.includes(value) ? value : 'info';
+    return validCalloutTypes.includes(value) ? value : "info";
   }
 }

packages/editor-ext/src/lib/columns/column.ts

@@ -1,127 +0,0 @@
-import { Node, mergeAttributes, findParentNode } from "@tiptap/core";
-import { TextSelection } from "prosemirror-state";
-
-export interface ColumnOptions {
-  HTMLAttributes: Record<string, any>;
-}
-
-export interface ColumnAttributes {
-  width?: number | null;
-}
-
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    column: {
-      setColumnWidth: (width: number | null) => ReturnType;
-    };
-  }
-}
-
-export const Column = Node.create<ColumnOptions>({
-  name: "column",
-  group: "block",
-  content: "block+",
-  defining: true,
-  isolating: true,
-  selectable: false,
-
-  addOptions() {
-    return {
-      HTMLAttributes: {},
-    };
-  },
-
-  addAttributes() {
-    return {
-      width: {
-        default: null,
-        parseHTML: (element) => {
-          const value = element.getAttribute("data-width");
-          return value ? parseFloat(value) : null;
-        },
-        renderHTML: (attributes: ColumnAttributes) => {
-          if (!attributes.width) return {};
-          return {
-            "data-width": attributes.width,
-            style: `flex: ${attributes.width}`,
-          };
-        },
-      },
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: `div[data-type="${this.name}"]`,
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "div",
-      mergeAttributes(
-        { "data-type": this.name },
-        this.options.HTMLAttributes,
-        HTMLAttributes,
-      ),
-      0,
-    ];
-  },
-
-  addKeyboardShortcuts() {
-    const jumpToColumn = (direction: 1 | -1) => () => {
-      const { state, dispatch } = this.editor.view;
-
-      const columns = findParentNode(
-        (node) => node.type.name === "columns",
-      )(state.selection);
-      if (!columns) return false;
-
-      const column = findParentNode(
-        (node) => node.type.name === "column",
-      )(state.selection);
-      if (!column) return false;
-
-      let currentIndex = -1;
-      columns.node.forEach((_child, offset, index) => {
-        if (columns.pos + 1 + offset === column.pos) {
-          currentIndex = index;
-        }
-      });
-
-      const targetIndex = currentIndex + direction;
-      if (targetIndex < 0 || targetIndex >= columns.node.childCount) {
-        return true;
-      }
-
-      let offset = 0;
-      for (let j = 0; j < targetIndex; j++) {
-        offset += columns.node.child(j).nodeSize;
-      }
-
-      const targetPos = columns.pos + 1 + offset + 1 + 1;
-      if (dispatch) {
-        dispatch(
-          state.tr.setSelection(TextSelection.create(state.doc, targetPos)),
-        );
-      }
-      return true;
-    };
-
-    return {
-      Tab: jumpToColumn(1),
-      "Shift-Tab": jumpToColumn(-1),
-    };
-  },
-
-  addCommands() {
-    return {
-      setColumnWidth:
-        (width) =>
-        ({ commands }) =>
-          commands.updateAttributes("column", { width }),
-    };
-  },
-});

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

@@ -1,196 +0,0 @@
-import { Node, mergeAttributes, findParentNode } from "@tiptap/core";
-import { Fragment, Node as PMNode } from "prosemirror-model";
-import { TextSelection } from "prosemirror-state";
-
-export type ColumnsLayout =
-  | "two_equal"
-  | "two_left_sidebar"
-  | "two_right_sidebar"
-  | "three_equal"
-  | "three_left_wide"
-  | "three_right_wide"
-  | "three_with_sidebars"
-  | "four_equal"
-  | "five_equal";
-
-export interface ColumnsOptions {
-  HTMLAttributes: Record<string, any>;
-}
-
-export type WidthMode = "normal" | "wide";
-
-export interface ColumnsAttributes {
-  layout?: ColumnsLayout;
-  widthMode?: WidthMode;
-}
-
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    columns: {
-      insertColumns: (attributes?: ColumnsAttributes) => ReturnType;
-      setColumnsWidthMode: (widthMode: WidthMode) => ReturnType;
-      setColumnCount: (count: number) => ReturnType;
-      setColumnsLayout: (layout: ColumnsLayout) => ReturnType;
-    };
-  }
-}
-
-function columnCountFromLayout(layout: string): number {
-  if (layout.startsWith("five")) return 5;
-  if (layout.startsWith("four")) return 4;
-  if (layout.startsWith("three")) return 3;
-  return 2;
-}
-
-function defaultLayoutForCount(count: number): ColumnsLayout {
-  if (count === 3) return "three_equal";
-  if (count === 4) return "four_equal";
-  if (count === 5) return "five_equal";
-  return "two_equal";
-}
-
-export const Columns = Node.create<ColumnsOptions>({
-  name: "columns",
-  group: "block",
-  content: "column+",
-  defining: true,
-  isolating: true,
-
-  addOptions() {
-    return {
-      HTMLAttributes: {},
-    };
-  },
-
-  addAttributes() {
-    return {
-      layout: {
-        default: "two_equal",
-        parseHTML: (element) => element.getAttribute("data-layout"),
-        renderHTML: (attributes: ColumnsAttributes) => ({
-          "data-layout": attributes.layout,
-        }),
-      },
-      widthMode: {
-        default: "normal",
-        parseHTML: (element) =>
-          element.getAttribute("data-width-mode") || "normal",
-        renderHTML: (attributes: ColumnsAttributes) => {
-          if (!attributes.widthMode || attributes.widthMode === "normal")
-            return {};
-          return { "data-width-mode": attributes.widthMode };
-        },
-      },
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: `div[data-type="${this.name}"]`,
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return [
-      "div",
-      mergeAttributes(
-        { "data-type": this.name },
-        this.options.HTMLAttributes,
-        HTMLAttributes,
-      ),
-      0,
-    ];
-  },
-
-  addCommands() {
-    return {
-      insertColumns:
-        (attributes) =>
-        ({ tr, state, dispatch }) => {
-          const layout = attributes?.layout || "two_equal";
-          const count = columnCountFromLayout(layout);
-
-          const columnType = state.schema.nodes.column;
-          const paraType = state.schema.nodes.paragraph;
-          const children = Array.from({ length: count }, () =>
-            columnType.create(null, paraType.create()),
-          );
-          const columnsNode = this.type.create(
-            attributes,
-            Fragment.from(children),
-          );
-
-          const stepsBefore = tr.steps.length;
-          tr.replaceSelectionWith(columnsNode);
-
-          if (tr.steps.length > stepsBefore) {
-            const stepMap = tr.steps[tr.steps.length - 1].getMap();
-            let insertStart = 0;
-            stepMap.forEach((_from, _to, newFrom) => {
-              insertStart = newFrom;
-            });
-            tr.setSelection(
-              TextSelection.near(tr.doc.resolve(insertStart + 1), 1),
-            );
-          }
-
-          if (dispatch) dispatch(tr);
-          return true;
-        },
-
-      setColumnsWidthMode:
-        (widthMode) =>
-        ({ commands }) =>
-          commands.updateAttributes("columns", { widthMode }),
-
-      setColumnCount:
-        (count: number) =>
-        ({ tr, state }) => {
-          const predicate = (node: PMNode) => node.type.name === "columns";
-          const parent = findParentNode(predicate)(state.selection);
-          if (!parent) return false;
-
-          const { node: columnsNode, pos: parentPos } = parent;
-          const currentCount = columnsNode.childCount;
-          if (count === currentCount || count < 2 || count > 5) return false;
-
-          const columnType = state.schema.nodes.column;
-          const paraType = state.schema.nodes.paragraph;
-          const newChildren: PMNode[] = [];
-
-          if (count > currentCount) {
-            for (let i = 0; i < currentCount; i++) {
-              newChildren.push(columnsNode.child(i));
-            }
-            for (let i = currentCount; i < count; i++) {
-              newChildren.push(columnType.create(null, paraType.create()));
-            }
-          } else {
-            for (let i = 0; i < count - 1; i++) {
-              newChildren.push(columnsNode.child(i));
-            }
-            let mergedContent = columnsNode.child(count - 1).content;
-            for (let j = count; j < currentCount; j++) {
-              mergedContent = mergedContent.append(columnsNode.child(j).content);
-            }
-            newChildren.push(columnType.create(null, mergedContent));
-          }
-
-          const newLayout = defaultLayoutForCount(count);
-          const newNode = columnsNode.type.create(
-            { ...columnsNode.attrs, layout: newLayout },
-            Fragment.from(newChildren),
-          );
-          tr.replaceWith(parentPos, parentPos + columnsNode.nodeSize, newNode);
-          return true;
-        },
-
-      setColumnsLayout:
-        (layout) =>
-        ({ commands }) =>
-          commands.updateAttributes("columns", { layout }),
-    };
-  },
-});

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

@@ -1,4 +0,0 @@
-export { Columns } from "./columns";
-export type { ColumnsOptions, ColumnsAttributes, ColumnsLayout, WidthMode } from "./columns";
-export { Column } from "./column";
-export type { ColumnOptions, ColumnAttributes } from "./column";

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

@@ -1,35 +1,15 @@
-import { Node, mergeAttributes, ResizableNodeView } from "@tiptap/core";
+import { Node, mergeAttributes } from "@tiptap/core";
-import type { ResizableNodeViewDirection } from "@tiptap/core";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 
-export type DrawioResizeOptions = {
-  enabled: boolean;
-  directions?: ResizableNodeViewDirection[];
-  minWidth?: number;
-  minHeight?: number;
-  alwaysPreserveAspectRatio?: boolean;
-  createCustomHandle?: (direction: ResizableNodeViewDirection) => HTMLElement;
-  className?: {
-    container?: string;
-    wrapper?: string;
-    handle?: string;
-    resizing?: string;
-  };
-};
-
 export interface DrawioOptions {
   HTMLAttributes: Record<string, any>;
   view: any;
-  resize: DrawioResizeOptions | false;
 }
-
 export interface DrawioAttributes {
   src?: string;
   title?: string;
   size?: number;
-  width?: number | string;
+  width?: string;
-  height?: number;
-  aspectRatio?: number;
   align?: string;
   attachmentId?: string;
 }
@@ -38,8 +18,6 @@ declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     drawio: {
       setDrawio: (attributes?: DrawioAttributes) => ReturnType;
-      setDrawioAlign: (align: "left" | "center" | "right") => ReturnType;
-      setDrawioSize: (width: number, height: number) => ReturnType;
     };
   }
 }
@@ -57,7 +35,6 @@ export const Drawio = Node.create<DrawioOptions>({
     return {
       HTMLAttributes: {},
       view: null,
-      resize: false,
     };
   },
 
@@ -78,30 +55,12 @@ export const Drawio = Node.create<DrawioOptions>({
         }),
       },
       width: {
-        default: null,
+        default: "100%",
-        parseHTML: (element) => {
+        parseHTML: (element) => element.getAttribute("data-width"),
-          const raw = element.getAttribute("data-width");
-          if (!raw) return null;
-          if (raw.endsWith("%")) return raw;
-          const num = parseFloat(raw);
-          return isNaN(num) ? null : num;
-        },
         renderHTML: (attributes: DrawioAttributes) => ({
           "data-width": attributes.width,
         }),
       },
-      height: {
-        default: null,
-        parseHTML: (element) => {
-          const raw = element.getAttribute("data-height");
-          if (!raw) return null;
-          const num = parseFloat(raw);
-          return isNaN(num) ? null : num;
-        },
-        renderHTML: (attributes: DrawioAttributes) => ({
-          "data-height": attributes.height,
-        }),
-      },
       size: {
         default: null,
         parseHTML: (element) => element.getAttribute("data-size"),
@@ -109,13 +68,6 @@ export const Drawio = Node.create<DrawioOptions>({
           "data-size": attributes.size,
         }),
       },
-      aspectRatio: {
-        default: null,
-        parseHTML: (element) => element.getAttribute("data-aspect-ratio"),
-        renderHTML: (attributes: DrawioAttributes) => ({
-          "data-aspect-ratio": attributes.aspectRatio,
-        }),
-      },
       align: {
         default: "center",
         parseHTML: (element) => element.getAttribute("data-align"),
@@ -147,7 +99,7 @@ export const Drawio = Node.create<DrawioOptions>({
       mergeAttributes(
         { "data-type": this.name },
         this.options.HTMLAttributes,
-        HTMLAttributes,
+        HTMLAttributes
       ),
       [
         "img",
@@ -170,172 +122,13 @@ export const Drawio = Node.create<DrawioOptions>({
             attrs: attrs,
           });
         },
-
-      setDrawioAlign:
-        (align) =>
-        ({ commands }) =>
-          commands.updateAttributes("drawio", { align }),
-
-      setDrawioSize:
-        (width, height) =>
-        ({ commands }) =>
-          commands.updateAttributes("drawio", { width, height }),
     };
   },
 
   addNodeView() {
-    const resize = this.options.resize;
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
 
-    if (!resize || !resize.enabled) {
+    return ReactNodeViewRenderer(this.options.view);
-      this.editor.isInitialized = true;
-      return ReactNodeViewRenderer(this.options.view);
-    }
-
-    const {
-      directions,
-      minWidth,
-      minHeight,
-      alwaysPreserveAspectRatio,
-      createCustomHandle,
-      className,
-    } = resize;
-
-    return (props) => {
-      const { node, getPos, HTMLAttributes, editor } = props;
-
-      if (!node.attrs.src) {
-        editor.isInitialized = true;
-        const reactView = ReactNodeViewRenderer(this.options.view);
-        const view = reactView(props);
-
-        const originalUpdate = view.update?.bind(view);
-        view.update = (updatedNode, decorations, innerDecorations) => {
-          if (updatedNode.attrs.src && !node.attrs.src) {
-            return false;
-          }
-          if (originalUpdate) {
-            return originalUpdate(updatedNode, decorations, innerDecorations);
-          }
-          return true;
-        };
-
-        return view;
-      }
-
-      const el = document.createElement("img");
-      el.src = node.attrs.src;
-      el.alt = node.attrs.title || "";
-      el.style.display = "block";
-      el.style.maxWidth = "100%";
-      el.style.borderRadius = "8px";
-
-      let currentNode = node;
-
-      const nodeView = new ResizableNodeView({
-        element: el,
-        editor,
-        node,
-        getPos,
-        onResize: (w, h) => {
-          el.style.width = `${w}px`;
-          el.style.height = `${h}px`;
-        },
-        onCommit: () => {
-          const pos = getPos();
-          if (pos === undefined) return;
-
-          this.editor
-            .chain()
-            .setNodeSelection(pos)
-            .updateAttributes(this.name, {
-              width: Math.round(el.offsetWidth),
-              height: Math.round(el.offsetHeight),
-            })
-            .run();
-        },
-        onUpdate: (updatedNode, _decorations, _innerDecorations) => {
-          if (updatedNode.type !== currentNode.type) {
-            return false;
-          }
-
-          if (updatedNode.attrs.src !== currentNode.attrs.src) {
-            el.src = updatedNode.attrs.src || "";
-          }
-
-          const w = updatedNode.attrs.width;
-          const h = updatedNode.attrs.height;
-          if (w != null) {
-            el.style.width = `${w}px`;
-          }
-          if (h != null) {
-            el.style.height = `${h}px`;
-          }
-
-          const align = updatedNode.attrs.align || "center";
-          const container = nodeView.dom as HTMLElement;
-          applyAlignment(container, align);
-
-          currentNode = updatedNode;
-          return true;
-        },
-        options: {
-          directions,
-          min: {
-            width: minWidth,
-            height: minHeight,
-          },
-          preserveAspectRatio: alwaysPreserveAspectRatio === true,
-          createCustomHandle,
-          className,
-        },
-      });
-
-      const dom = nodeView.dom as HTMLElement;
-
-      applyAlignment(dom, node.attrs.align || "center");
-
-      // Handle percentage width backward compat
-      const widthAttr = node.attrs.width;
-      if (typeof widthAttr === "string" && widthAttr.endsWith("%")) {
-        requestAnimationFrame(() => {
-          const parentEl = dom.parentElement;
-          if (parentEl) {
-            const containerWidth = parentEl.clientWidth;
-            const pctValue = parseInt(widthAttr, 10);
-            if (!isNaN(pctValue) && containerWidth > 0) {
-              const pxWidth = Math.round(
-                containerWidth * (pctValue / 100),
-              );
-              el.style.width = `${pxWidth}px`;
-              if (node.attrs.aspectRatio) {
-                el.style.height = `${Math.round(pxWidth / node.attrs.aspectRatio)}px`;
-              }
-            }
-          }
-          dom.style.visibility = "";
-          dom.style.pointerEvents = "";
-        });
-      }
-
-      // Hide until image loads
-      dom.style.visibility = "hidden";
-      dom.style.pointerEvents = "none";
-      el.onload = () => {
-        dom.style.visibility = "";
-        dom.style.pointerEvents = "";
-      };
-
-      return nodeView;
-    };
   },
 });
-
-function applyAlignment(container: HTMLElement, align: string) {
-  if (align === "left") {
-    container.style.justifyContent = "flex-start";
-  } else if (align === "right") {
-    container.style.justifyContent = "flex-end";
-  } else {
-    container.style.justifyContent = "center";
-  }
-}

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

@@ -1,35 +1,15 @@
-import { Node, mergeAttributes, ResizableNodeView } from "@tiptap/core";
+import { Node, mergeAttributes } from "@tiptap/core";
-import type { ResizableNodeViewDirection } from "@tiptap/core";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 
-export type ExcalidrawResizeOptions = {
-  enabled: boolean;
-  directions?: ResizableNodeViewDirection[];
-  minWidth?: number;
-  minHeight?: number;
-  alwaysPreserveAspectRatio?: boolean;
-  createCustomHandle?: (direction: ResizableNodeViewDirection) => HTMLElement;
-  className?: {
-    container?: string;
-    wrapper?: string;
-    handle?: string;
-    resizing?: string;
-  };
-};
-
 export interface ExcalidrawOptions {
   HTMLAttributes: Record<string, any>;
   view: any;
-  resize: ExcalidrawResizeOptions | false;
 }
-
 export interface ExcalidrawAttributes {
   src?: string;
   title?: string;
   size?: number;
-  width?: number | string;
+  width?: string;
-  height?: number;
-  aspectRatio?: number;
   align?: string;
   attachmentId?: string;
 }
@@ -38,8 +18,6 @@ declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     excalidraw: {
       setExcalidraw: (attributes?: ExcalidrawAttributes) => ReturnType;
-      setExcalidrawAlign: (align: "left" | "center" | "right") => ReturnType;
-      setExcalidrawSize: (width: number, height: number) => ReturnType;
     };
   }
 }
@@ -57,10 +35,8 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
     return {
       HTMLAttributes: {},
       view: null,
-      resize: false,
     };
   },
-
   addAttributes() {
     return {
       src: {
@@ -78,30 +54,12 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
         }),
       },
       width: {
-        default: null,
+        default: "100%",
-        parseHTML: (element) => {
+        parseHTML: (element) => element.getAttribute("data-width"),
-          const raw = element.getAttribute("data-width");
-          if (!raw) return null;
-          if (raw.endsWith("%")) return raw;
-          const num = parseFloat(raw);
-          return isNaN(num) ? null : num;
-        },
         renderHTML: (attributes: ExcalidrawAttributes) => ({
           "data-width": attributes.width,
         }),
       },
-      height: {
-        default: null,
-        parseHTML: (element) => {
-          const raw = element.getAttribute("data-height");
-          if (!raw) return null;
-          const num = parseFloat(raw);
-          return isNaN(num) ? null : num;
-        },
-        renderHTML: (attributes: ExcalidrawAttributes) => ({
-          "data-height": attributes.height,
-        }),
-      },
       size: {
         default: null,
         parseHTML: (element) => element.getAttribute("data-size"),
@@ -109,13 +67,6 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
           "data-size": attributes.size,
         }),
       },
-      aspectRatio: {
-        default: null,
-        parseHTML: (element) => element.getAttribute("data-aspect-ratio"),
-        renderHTML: (attributes: ExcalidrawAttributes) => ({
-          "data-aspect-ratio": attributes.aspectRatio,
-        }),
-      },
       align: {
         default: "center",
         parseHTML: (element) => element.getAttribute("data-align"),
@@ -147,7 +98,7 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
       mergeAttributes(
         { "data-type": this.name },
         this.options.HTMLAttributes,
-        HTMLAttributes,
+        HTMLAttributes
       ),
       [
         "img",
@@ -170,172 +121,13 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
             attrs: attrs,
           });
         },
-
-      setExcalidrawAlign:
-        (align) =>
-        ({ commands }) =>
-          commands.updateAttributes("excalidraw", { align }),
-
-      setExcalidrawSize:
-        (width, height) =>
-        ({ commands }) =>
-          commands.updateAttributes("excalidraw", { width, height }),
     };
   },
 
   addNodeView() {
-    const resize = this.options.resize;
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
 
-    if (!resize || !resize.enabled) {
+    return ReactNodeViewRenderer(this.options.view);
-      this.editor.isInitialized = true;
-      return ReactNodeViewRenderer(this.options.view);
-    }
-
-    const {
-      directions,
-      minWidth,
-      minHeight,
-      alwaysPreserveAspectRatio,
-      createCustomHandle,
-      className,
-    } = resize;
-
-    return (props) => {
-      const { node, getPos, HTMLAttributes, editor } = props;
-
-      if (!node.attrs.src) {
-        editor.isInitialized = true;
-        const reactView = ReactNodeViewRenderer(this.options.view);
-        const view = reactView(props);
-
-        const originalUpdate = view.update?.bind(view);
-        view.update = (updatedNode, decorations, innerDecorations) => {
-          if (updatedNode.attrs.src && !node.attrs.src) {
-            return false;
-          }
-          if (originalUpdate) {
-            return originalUpdate(updatedNode, decorations, innerDecorations);
-          }
-          return true;
-        };
-
-        return view;
-      }
-
-      const el = document.createElement("img");
-      el.src = node.attrs.src;
-      el.alt = node.attrs.title || "";
-      el.style.display = "block";
-      el.style.maxWidth = "100%";
-      el.style.borderRadius = "8px";
-
-      let currentNode = node;
-
-      const nodeView = new ResizableNodeView({
-        element: el,
-        editor,
-        node,
-        getPos,
-        onResize: (w, h) => {
-          el.style.width = `${w}px`;
-          el.style.height = `${h}px`;
-        },
-        onCommit: () => {
-          const pos = getPos();
-          if (pos === undefined) return;
-
-          this.editor
-            .chain()
-            .setNodeSelection(pos)
-            .updateAttributes(this.name, {
-              width: Math.round(el.offsetWidth),
-              height: Math.round(el.offsetHeight),
-            })
-            .run();
-        },
-        onUpdate: (updatedNode, _decorations, _innerDecorations) => {
-          if (updatedNode.type !== currentNode.type) {
-            return false;
-          }
-
-          if (updatedNode.attrs.src !== currentNode.attrs.src) {
-            el.src = updatedNode.attrs.src || "";
-          }
-
-          const w = updatedNode.attrs.width;
-          const h = updatedNode.attrs.height;
-          if (w != null) {
-            el.style.width = `${w}px`;
-          }
-          if (h != null) {
-            el.style.height = `${h}px`;
-          }
-
-          const align = updatedNode.attrs.align || "center";
-          const container = nodeView.dom as HTMLElement;
-          applyAlignment(container, align);
-
-          currentNode = updatedNode;
-          return true;
-        },
-        options: {
-          directions,
-          min: {
-            width: minWidth,
-            height: minHeight,
-          },
-          preserveAspectRatio: alwaysPreserveAspectRatio === true,
-          createCustomHandle,
-          className,
-        },
-      });
-
-      const dom = nodeView.dom as HTMLElement;
-
-      applyAlignment(dom, node.attrs.align || "center");
-
-      // Handle percentage width backward compat
-      const widthAttr = node.attrs.width;
-      if (typeof widthAttr === "string" && widthAttr.endsWith("%")) {
-        requestAnimationFrame(() => {
-          const parentEl = dom.parentElement;
-          if (parentEl) {
-            const containerWidth = parentEl.clientWidth;
-            const pctValue = parseInt(widthAttr, 10);
-            if (!isNaN(pctValue) && containerWidth > 0) {
-              const pxWidth = Math.round(
-                containerWidth * (pctValue / 100),
-              );
-              el.style.width = `${pxWidth}px`;
-              if (node.attrs.aspectRatio) {
-                el.style.height = `${Math.round(pxWidth / node.attrs.aspectRatio)}px`;
-              }
-            }
-          }
-          dom.style.visibility = "";
-          dom.style.pointerEvents = "";
-        });
-      }
-
-      // Hide until image loads
-      dom.style.visibility = "hidden";
-      dom.style.pointerEvents = "none";
-      el.onload = () => {
-        dom.style.visibility = "";
-        dom.style.pointerEvents = "";
-      };
-
-      return nodeView;
-    };
   },
 });
-
-function applyAlignment(container: HTMLElement, align: string) {
-  if (align === "left") {
-    container.style.justifyContent = "flex-start";
-  } else if (align === "right") {
-    container.style.justifyContent = "flex-end";
-  } else {
-    container.style.justifyContent = "center";
-  }
-}

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

@@ -1,41 +1,18 @@
 import Image from "@tiptap/extension-image";
 import { ImageOptions as DefaultImageOptions } from "@tiptap/extension-image";
 import { ReactNodeViewRenderer } from "@tiptap/react";
-import {
+import { mergeAttributes, Range } from "@tiptap/core";
-  mergeAttributes,
-  Range,
-  ResizableNodeView,
-} from "@tiptap/core";
-import type { ResizableNodeViewDirection } from "@tiptap/core";
-
-export type ImageResizeOptions = {
-  enabled: boolean;
-  directions?: ResizableNodeViewDirection[];
-  minWidth?: number;
-  minHeight?: number;
-  alwaysPreserveAspectRatio?: boolean;
-  createCustomHandle?: (direction: ResizableNodeViewDirection) => HTMLElement;
-  className?: {
-    container?: string;
-    wrapper?: string;
-    handle?: string;
-    resizing?: string;
-  };
-};
 
 export interface ImageOptions extends DefaultImageOptions {
   view: any;
-  resize: ImageResizeOptions | false;
 }
-
 export interface ImageAttributes {
   src?: string;
   alt?: string;
   align?: string;
   attachmentId?: string;
   size?: number;
-  width?: number | string;
+  width?: number;
-  height?: number;
   aspectRatio?: number;
   placeholder?: {
     id: string;
@@ -48,11 +25,10 @@ declare module "@tiptap/core" {
     imageBlock: {
       setImage: (attributes: ImageAttributes) => ReturnType;
       setImageAt: (
-        attributes: ImageAttributes & { pos: number | Range },
+        attributes: ImageAttributes & { pos: number | Range }
       ) => ReturnType;
       setImageAlign: (align: "left" | "center" | "right") => ReturnType;
       setImageWidth: (width: number) => ReturnType;
-      setImageSize: (width: number, height: number) => ReturnType;
     };
   }
 }
@@ -70,7 +46,6 @@ export const TiptapImage = Image.extend<ImageOptions>({
     return {
       ...this.parent?.(),
       view: null,
-      resize: false,
     };
   },
 
@@ -84,30 +59,12 @@ export const TiptapImage = Image.extend<ImageOptions>({
         }),
       },
       width: {
-        default: null,
+        default: "100%",
-        parseHTML: (element) => {
+        parseHTML: (element) => element.getAttribute("width"),
-          const raw = element.getAttribute("width");
-          if (!raw) return null;
-          if (raw.endsWith("%")) return raw;
-          const num = parseFloat(raw);
-          return isNaN(num) ? null : num;
-        },
         renderHTML: (attributes: ImageAttributes) => ({
           width: attributes.width,
         }),
       },
-      height: {
-        default: null,
-        parseHTML: (element) => {
-          const raw = element.getAttribute("height");
-          if (!raw) return null;
-          const num = parseFloat(raw);
-          return isNaN(num) ? null : num;
-        },
-        renderHTML: (attributes: ImageAttributes) => ({
-          height: attributes.height,
-        }),
-      },
       align: {
         default: "center",
         parseHTML: (element) => element.getAttribute("data-align"),
@@ -185,192 +142,16 @@ export const TiptapImage = Image.extend<ImageOptions>({
       setImageWidth:
         (width) =>
         ({ commands }) =>
-          commands.updateAttributes("image", { width }),
+          commands.updateAttributes("image", {
-
+            width: `${Math.max(0, Math.min(100, width))}%`,
-      setImageSize:
+          }),
-        (width, height) =>
-        ({ commands }) =>
-          commands.updateAttributes("image", { width, height }),
     };
   },
 
   addNodeView() {
-    const resize = this.options.resize;
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
 
-    if (!resize || !resize.enabled) {
+    return ReactNodeViewRenderer(this.options.view);
-      // Fallback to React node view (existing behavior)
-      this.editor.isInitialized = true;
-      return ReactNodeViewRenderer(this.options.view);
-    }
-
-    const {
-      directions,
-      minWidth,
-      minHeight,
-      alwaysPreserveAspectRatio,
-      createCustomHandle,
-      className,
-    } = resize;
-
-    return (props) => {
-      const { node, getPos, HTMLAttributes, editor } = props;
-
-      // If no src yet (placeholder/uploading), use React view for loading UI
-      if (!HTMLAttributes.src) {
-        editor.isInitialized = true;
-        const reactView = ReactNodeViewRenderer(this.options.view);
-        const view = reactView(props);
-
-        // When the node gets a src, return false from update to force rebuild
-        const originalUpdate = view.update?.bind(view);
-        view.update = (updatedNode, decorations, innerDecorations) => {
-          if (updatedNode.attrs.src && !node.attrs.src) {
-            return false;
-          }
-          if (originalUpdate) {
-            return originalUpdate(updatedNode, decorations, innerDecorations);
-          }
-          return true;
-        };
-
-        return view;
-      }
-
-      // Has src — use ResizableNodeView
-      const el = document.createElement("img");
-
-      Object.entries(HTMLAttributes).forEach(([key, value]) => {
-        if (value != null) {
-          switch (key) {
-            case "width":
-            case "height":
-              break;
-            default:
-              el.setAttribute(key, String(value));
-              break;
-          }
-        }
-      });
-
-      el.src = HTMLAttributes.src;
-      el.style.display = "block";
-      el.style.maxWidth = "100%";
-      el.style.borderRadius = "8px";
-
-      let currentNode = node;
-
-      const nodeView = new ResizableNodeView({
-        element: el,
-        editor,
-        node,
-        getPos,
-        onResize: (w, h) => {
-          el.style.width = `${w}px`;
-          el.style.height = `${h}px`;
-        },
-        onCommit: () => {
-          const pos = getPos();
-          if (pos === undefined) return;
-
-          this.editor
-            .chain()
-            .setNodeSelection(pos)
-            .updateAttributes(this.name, {
-              width: Math.round(el.offsetWidth),
-              height: Math.round(el.offsetHeight),
-            })
-            .run();
-        },
-        onUpdate: (updatedNode, _decorations, _innerDecorations) => {
-          if (updatedNode.type !== currentNode.type) {
-            return false;
-          }
-
-          if (updatedNode.attrs.src !== currentNode.attrs.src) {
-            el.src = updatedNode.attrs.src || "";
-          }
-
-          if (updatedNode.attrs.alt !== currentNode.attrs.alt) {
-            el.alt = updatedNode.attrs.alt || "";
-          }
-
-          const w = updatedNode.attrs.width;
-          const h = updatedNode.attrs.height;
-          if (w != null) {
-            el.style.width = `${w}px`;
-          }
-          if (h != null) {
-            el.style.height = `${h}px`;
-          }
-
-          // Update alignment on container
-          const align = updatedNode.attrs.align || "center";
-          const container = nodeView.dom as HTMLElement;
-          applyAlignment(container, align);
-
-          currentNode = updatedNode;
-          return true;
-        },
-        options: {
-          directions,
-          min: {
-            width: minWidth,
-            height: minHeight,
-          },
-          preserveAspectRatio: alwaysPreserveAspectRatio === true,
-          createCustomHandle,
-          className,
-        },
-      });
-
-      const dom = nodeView.dom as HTMLElement;
-
-      // Apply initial alignment
-      applyAlignment(dom, node.attrs.align || "center");
-
-      // Handle percentage width backward compat
-      const widthAttr = node.attrs.width;
-      if (typeof widthAttr === "string" && widthAttr.endsWith("%")) {
-        // Defer conversion until we can measure the container
-        requestAnimationFrame(() => {
-          const parentEl = dom.parentElement;
-          if (parentEl) {
-            const containerWidth = parentEl.clientWidth;
-            const pctValue = parseInt(widthAttr, 10);
-            if (!isNaN(pctValue) && containerWidth > 0) {
-              const pxWidth = Math.round(
-                containerWidth * (pctValue / 100),
-              );
-              el.style.width = `${pxWidth}px`;
-              if (node.attrs.aspectRatio) {
-                el.style.height = `${Math.round(pxWidth / node.attrs.aspectRatio)}px`;
-              }
-            }
-          }
-          dom.style.visibility = "";
-          dom.style.pointerEvents = "";
-        });
-      }
-
-      // Hide until image loads (official TipTap pattern)
-      dom.style.visibility = "hidden";
-      dom.style.pointerEvents = "none";
-      el.onload = () => {
-        dom.style.visibility = "";
-        dom.style.pointerEvents = "";
-      };
-
-      return nodeView;
-    };
   },
 });
-
-function applyAlignment(container: HTMLElement, align: string) {
-  if (align === "left") {
-    container.style.justifyContent = "flex-start";
-  } else if (align === "right") {
-    container.style.justifyContent = "flex-end";
-  } else {
-    container.style.justifyContent = "center";
-  }
-}

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

@@ -1,35 +1,16 @@
 import { ReactNodeViewRenderer } from "@tiptap/react";
-import { Range, Node, mergeAttributes, ResizableNodeView } from "@tiptap/core";
+import { Range, Node } from "@tiptap/core";
-import type { ResizableNodeViewDirection } from "@tiptap/core";
-
-export type VideoResizeOptions = {
-  enabled: boolean;
-  directions?: ResizableNodeViewDirection[];
-  minWidth?: number;
-  minHeight?: number;
-  alwaysPreserveAspectRatio?: boolean;
-  createCustomHandle?: (direction: ResizableNodeViewDirection) => HTMLElement;
-  className?: {
-    container?: string;
-    wrapper?: string;
-    handle?: string;
-    resizing?: string;
-  };
-};
 
 export interface VideoOptions {
   view: any;
   HTMLAttributes: Record<string, any>;
-  resize: VideoResizeOptions | false;
 }
-
 export interface VideoAttributes {
   src?: string;
   align?: string;
   attachmentId?: string;
   size?: number;
-  width?: number | string;
+  width?: number;
-  height?: number;
   aspectRatio?: number;
   placeholder?: {
     id: string;
@@ -46,7 +27,6 @@ declare module "@tiptap/core" {
       ) => ReturnType;
       setVideoAlign: (align: "left" | "center" | "right") => ReturnType;
       setVideoWidth: (width: number) => ReturnType;
-      setVideoSize: (width: number, height: number) => ReturnType;
     };
   }
 }
@@ -64,7 +44,6 @@ export const TiptapVideo = Node.create<VideoOptions>({
     return {
       view: null,
       HTMLAttributes: {},
-      resize: false,
     };
   },
 
@@ -85,30 +64,12 @@ export const TiptapVideo = Node.create<VideoOptions>({
         }),
       },
       width: {
-        default: null,
+        default: "100%",
-        parseHTML: (element) => {
+        parseHTML: (element) => element.getAttribute("width"),
-          const raw = element.getAttribute("width");
-          if (!raw) return null;
-          if (raw.endsWith("%")) return raw;
-          const num = parseFloat(raw);
-          return isNaN(num) ? null : num;
-        },
         renderHTML: (attributes: VideoAttributes) => ({
           width: attributes.width,
         }),
       },
-      height: {
-        default: null,
-        parseHTML: (element) => {
-          const raw = element.getAttribute("height");
-          if (!raw) return null;
-          const num = parseFloat(raw);
-          return isNaN(num) ? null : num;
-        },
-        renderHTML: (attributes: VideoAttributes) => ({
-          height: attributes.height,
-        }),
-      },
       size: {
         default: null,
         parseHTML: (element) => element.getAttribute("data-size"),
@@ -175,168 +136,13 @@ export const TiptapVideo = Node.create<VideoOptions>({
           commands.updateAttributes("video", {
             width: `${Math.max(0, Math.min(100, width))}%`,
           }),
-
-      setVideoSize:
-        (width, height) =>
-        ({ commands }) =>
-          commands.updateAttributes("video", { width, height }),
     };
   },
 
   addNodeView() {
-    const resize = this.options.resize;
+    // Force the react node view to render immediately using flush sync (https://github.com/ueberdosis/tiptap/blob/b4db352f839e1d82f9add6ee7fb45561336286d8/packages/react/src/ReactRenderer.tsx#L183-L191)
+    this.editor.isInitialized = true;
 
-    if (!resize || !resize.enabled) {
+    return ReactNodeViewRenderer(this.options.view);
-      this.editor.isInitialized = true;
-      return ReactNodeViewRenderer(this.options.view);
-    }
-
-    const {
-      directions,
-      minWidth,
-      minHeight,
-      alwaysPreserveAspectRatio,
-      createCustomHandle,
-      className,
-    } = resize;
-
-    return (props) => {
-      const { node, getPos, HTMLAttributes, editor } = props;
-
-      if (!node.attrs.src) {
-        editor.isInitialized = true;
-        const reactView = ReactNodeViewRenderer(this.options.view);
-        const view = reactView(props);
-
-        const originalUpdate = view.update?.bind(view);
-        view.update = (updatedNode, decorations, innerDecorations) => {
-          if (updatedNode.attrs.src && !node.attrs.src) {
-            return false;
-          }
-          if (originalUpdate) {
-            return originalUpdate(updatedNode, decorations, innerDecorations);
-          }
-          return true;
-        };
-
-        return view;
-      }
-
-      const el = document.createElement("video");
-      el.src = node.attrs.src;
-      el.controls = true;
-      el.preload = "metadata";
-      el.style.display = "block";
-      el.style.maxWidth = "100%";
-      el.style.borderRadius = "8px";
-
-      let currentNode = node;
-
-      const nodeView = new ResizableNodeView({
-        element: el,
-        editor,
-        node,
-        getPos,
-        onResize: (w, h) => {
-          el.style.width = `${w}px`;
-          el.style.height = `${h}px`;
-        },
-        onCommit: () => {
-          const pos = getPos();
-          if (pos === undefined) return;
-
-          this.editor
-            .chain()
-            .setNodeSelection(pos)
-            .updateAttributes(this.name, {
-              width: Math.round(el.offsetWidth),
-              height: Math.round(el.offsetHeight),
-            })
-            .run();
-        },
-        onUpdate: (updatedNode, _decorations, _innerDecorations) => {
-          if (updatedNode.type !== currentNode.type) {
-            return false;
-          }
-
-          if (updatedNode.attrs.src !== currentNode.attrs.src) {
-            el.src = updatedNode.attrs.src || "";
-          }
-
-          const w = updatedNode.attrs.width;
-          const h = updatedNode.attrs.height;
-          if (w != null) {
-            el.style.width = `${w}px`;
-          }
-          if (h != null) {
-            el.style.height = `${h}px`;
-          }
-
-          const align = updatedNode.attrs.align || "center";
-          const container = nodeView.dom as HTMLElement;
-          applyAlignment(container, align);
-
-          currentNode = updatedNode;
-          return true;
-        },
-        options: {
-          directions,
-          min: {
-            width: minWidth,
-            height: minHeight,
-          },
-          preserveAspectRatio: alwaysPreserveAspectRatio === true,
-          createCustomHandle,
-          className,
-        },
-      });
-
-      const dom = nodeView.dom as HTMLElement;
-
-      applyAlignment(dom, node.attrs.align || "center");
-
-      // Handle percentage width backward compat
-      const widthAttr = node.attrs.width;
-      if (typeof widthAttr === "string" && widthAttr.endsWith("%")) {
-        requestAnimationFrame(() => {
-          const parentEl = dom.parentElement;
-          if (parentEl) {
-            const containerWidth = parentEl.clientWidth;
-            const pctValue = parseInt(widthAttr, 10);
-            if (!isNaN(pctValue) && containerWidth > 0) {
-              const pxWidth = Math.round(
-                containerWidth * (pctValue / 100),
-              );
-              el.style.width = `${pxWidth}px`;
-              if (node.attrs.aspectRatio) {
-                el.style.height = `${Math.round(pxWidth / node.attrs.aspectRatio)}px`;
-              }
-            }
-          }
-          dom.style.visibility = "";
-          dom.style.pointerEvents = "";
-        });
-      }
-
-      // Hide until video metadata loads
-      dom.style.visibility = "hidden";
-      dom.style.pointerEvents = "none";
-      el.onloadedmetadata = () => {
-        dom.style.visibility = "";
-        dom.style.pointerEvents = "";
-      };
-
-      return nodeView;
-    };
   },
 });
-
-function applyAlignment(container: HTMLElement, align: string) {
-  if (align === "left") {
-    container.style.justifyContent = "flex-start";
-  } else if (align === "right") {
-    container.style.justifyContent = "flex-end";
-  } else {
-    container.style.justifyContent = "center";
-  }
-}

patches/@tiptap__core.patch

@@ -1,105 +0,0 @@
-diff --git a/dist/index.cjs b/dist/index.cjs
-index 01d6999642c5ae990083798a1bf0ef87068e4192..891b13c6901f28a6ab413c6dbae0ea726a76a196 100644
---- a/dist/index.cjs
-+++ b/dist/index.cjs
-@@ -5463,7 +5463,10 @@ var ResizableNodeView = class {
-         this.container.classList.remove(this.classNames.resizing);
-       }
-       document.removeEventListener("mousemove", this.handleMouseMove);
-+      document.removeEventListener("touchmove", this.handleTouchMove);
-       document.removeEventListener("mouseup", this.handleMouseUp);
-+      document.removeEventListener("touchend", this.handleMouseUp);
-+      window.removeEventListener("blur", this.handleMouseUp);
-       document.removeEventListener("keydown", this.handleKeyDown);
-       document.removeEventListener("keyup", this.handleKeyUp);
-     };
-@@ -5593,7 +5596,10 @@ var ResizableNodeView = class {
-         this.container.classList.remove(this.classNames.resizing);
-       }
-       document.removeEventListener("mousemove", this.handleMouseMove);
-+      document.removeEventListener("touchmove", this.handleTouchMove);
-       document.removeEventListener("mouseup", this.handleMouseUp);
-+      document.removeEventListener("touchend", this.handleMouseUp);
-+      window.removeEventListener("blur", this.handleMouseUp);
-       document.removeEventListener("keydown", this.handleKeyDown);
-       document.removeEventListener("keyup", this.handleKeyUp);
-       this.isResizing = false;
-@@ -5796,6 +5802,8 @@ var ResizableNodeView = class {
-     document.addEventListener("mousemove", this.handleMouseMove);
-     document.addEventListener("touchmove", this.handleTouchMove);
-     document.addEventListener("mouseup", this.handleMouseUp);
-+    document.addEventListener("touchend", this.handleMouseUp);
-+    window.addEventListener("blur", this.handleMouseUp);
-     document.addEventListener("keydown", this.handleKeyDown);
-     document.addEventListener("keyup", this.handleKeyUp);
-   }
-diff --git a/dist/index.js b/dist/index.js
-index 6f357a03b038abeb5ed86967b7fc7c3e5eb1d2d6..2d2742532860821984e1ba82625821504538ebbe 100644
---- a/dist/index.js
-+++ b/dist/index.js
-@@ -5330,7 +5330,10 @@ var ResizableNodeView = class {
-         this.container.classList.remove(this.classNames.resizing);
-       }
-       document.removeEventListener("mousemove", this.handleMouseMove);
-+      document.removeEventListener("touchmove", this.handleTouchMove);
-       document.removeEventListener("mouseup", this.handleMouseUp);
-+      document.removeEventListener("touchend", this.handleMouseUp);
-+      window.removeEventListener("blur", this.handleMouseUp);
-       document.removeEventListener("keydown", this.handleKeyDown);
-       document.removeEventListener("keyup", this.handleKeyUp);
-     };
-@@ -5460,7 +5463,10 @@ var ResizableNodeView = class {
-         this.container.classList.remove(this.classNames.resizing);
-       }
-       document.removeEventListener("mousemove", this.handleMouseMove);
-+      document.removeEventListener("touchmove", this.handleTouchMove);
-       document.removeEventListener("mouseup", this.handleMouseUp);
-+      document.removeEventListener("touchend", this.handleMouseUp);
-+      window.removeEventListener("blur", this.handleMouseUp);
-       document.removeEventListener("keydown", this.handleKeyDown);
-       document.removeEventListener("keyup", this.handleKeyUp);
-       this.isResizing = false;
-@@ -5663,6 +5669,8 @@ var ResizableNodeView = class {
-     document.addEventListener("mousemove", this.handleMouseMove);
-     document.addEventListener("touchmove", this.handleTouchMove);
-     document.addEventListener("mouseup", this.handleMouseUp);
-+    document.addEventListener("touchend", this.handleMouseUp);
-+    window.addEventListener("blur", this.handleMouseUp);
-     document.addEventListener("keydown", this.handleKeyDown);
-     document.addEventListener("keyup", this.handleKeyUp);
-   }
-diff --git a/src/lib/ResizableNodeView.ts b/src/lib/ResizableNodeView.ts
-index f13e210b0aa46aefe7c31105deee3d2aa8a26cd5..9bac138dbf17c6ae6c3c129cbedb3a81bd39b60c 100644
---- a/src/lib/ResizableNodeView.ts
-+++ b/src/lib/ResizableNodeView.ts
-@@ -523,7 +523,10 @@ export class ResizableNodeView {
-       }
- 
-       document.removeEventListener('mousemove', this.handleMouseMove)
-+      document.removeEventListener('touchmove', this.handleTouchMove)
-       document.removeEventListener('mouseup', this.handleMouseUp)
-+      document.removeEventListener('touchend', this.handleMouseUp)
-+      window.removeEventListener('blur', this.handleMouseUp)
-       document.removeEventListener('keydown', this.handleKeyDown)
-       document.removeEventListener('keyup', this.handleKeyUp)
-       this.isResizing = false
-@@ -774,6 +777,8 @@ export class ResizableNodeView {
-     document.addEventListener('mousemove', this.handleMouseMove)
-     document.addEventListener('touchmove', this.handleTouchMove)
-     document.addEventListener('mouseup', this.handleMouseUp)
-+    document.addEventListener('touchend', this.handleMouseUp)
-+    window.addEventListener('blur', this.handleMouseUp)
-     document.addEventListener('keydown', this.handleKeyDown)
-     document.addEventListener('keyup', this.handleKeyUp)
-   }
-@@ -859,7 +864,10 @@ export class ResizableNodeView {
- 
-     // Clean up document-level listeners
-     document.removeEventListener('mousemove', this.handleMouseMove)
-+    document.removeEventListener('touchmove', this.handleTouchMove)
-     document.removeEventListener('mouseup', this.handleMouseUp)
-+    document.removeEventListener('touchend', this.handleMouseUp)
-+    window.removeEventListener('blur', this.handleMouseUp)
-     document.removeEventListener('keydown', this.handleKeyDown)
-     document.removeEventListener('keyup', this.handleKeyUp)
-   }

pnpm-lock.yaml

@@ -29,9 +29,6 @@ overrides:
   '@tiptap/extension-code': 3.17.1
 
 patchedDependencies:
-  '@tiptap/core':
-    hash: efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00
-    path: patches/@tiptap__core.patch
   react-arborist@3.4.0:
     hash: 419b3b02e24afe928cc006a006f6e906666aff19aa6fd7daaa788ccc2202678a
     path: patches/react-arborist@3.4.0.patch
@@ -60,7 +57,7 @@ importers:
         version: 3.4.4(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29)
       '@hocuspocus/transformer':
         specifier: 3.4.4
-        version: 3.4.4(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(y-prosemirror@1.3.7(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29))(yjs@13.6.29)
+        version: 3.4.4(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(y-prosemirror@1.3.7(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29))(yjs@13.6.29)
       '@joplin/turndown':
         specifier: ^4.0.74
         version: 4.0.74
@@ -72,85 +69,85 @@ importers:
         version: 1.1.0
       '@tiptap/core':
         specifier: 3.17.1
-        version: 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+        version: 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/extension-code-block':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
       '@tiptap/extension-collaboration':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29))(yjs@13.6.29)
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29))(yjs@13.6.29)
       '@tiptap/extension-collaboration-caret':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29))
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29))
       '@tiptap/extension-color':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/extension-text-style@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)))
+        version: 3.17.1(@tiptap/extension-text-style@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1)))
       '@tiptap/extension-document':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
       '@tiptap/extension-heading':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
       '@tiptap/extension-highlight':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
       '@tiptap/extension-history':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
+        version: 3.17.1(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
       '@tiptap/extension-image':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
       '@tiptap/extension-link':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
       '@tiptap/extension-list':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
       '@tiptap/extension-placeholder':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
+        version: 3.17.1(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
       '@tiptap/extension-subscript':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
       '@tiptap/extension-superscript':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
       '@tiptap/extension-table':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
       '@tiptap/extension-text':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
       '@tiptap/extension-text-align':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
       '@tiptap/extension-text-style':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
       '@tiptap/extension-typography':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
       '@tiptap/extension-unique-id':
         specifier: ^3.17.1
-        version: 3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+        version: 3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
       '@tiptap/extension-youtube':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
       '@tiptap/html':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(happy-dom@20.1.0)
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(happy-dom@20.1.0)
       '@tiptap/pm':
         specifier: 3.17.1
         version: 3.17.1
       '@tiptap/react':
         specifier: 3.17.1
-        version: 3.17.1(@floating-ui/dom@1.7.3)(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 3.17.1(@floating-ui/dom@1.7.3)(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tiptap/starter-kit':
         specifier: 3.17.1
         version: 3.17.1
       '@tiptap/suggestion':
         specifier: 3.17.1
-        version: 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+        version: 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
       '@tiptap/y-tiptap':
         specifier: ^3.0.2
         version: 3.0.2(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29)
@@ -477,6 +474,9 @@ importers:
       '@fastify/static':
         specifier: ^9.0.0
         version: 9.0.0
+      '@keyv/redis':
+        specifier: ^5.1.6
+        version: 5.1.6(keyv@5.6.0)
       '@langchain/core':
         specifier: 1.1.18
         version: 1.1.18(@opentelemetry/api@1.9.0)(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(openai@6.2.0(ws@8.19.0)(zod@4.3.6))
@@ -489,6 +489,9 @@ importers:
       '@nestjs/bullmq':
         specifier: ^11.0.4
         version: 11.0.4(@nestjs/common@11.1.11(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.13)(bullmq@5.65.0)
+      '@nestjs/cache-manager':
+        specifier: ^3.1.0
+        version: 3.1.0(@nestjs/common@11.1.11(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.13)(cache-manager@7.2.8)(keyv@5.6.0)(rxjs@7.8.2)
       '@nestjs/common':
         specifier: ^11.1.11
         version: 11.1.11(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2)
@@ -2567,6 +2570,12 @@ packages:
   '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
 
+  '@keyv/redis@5.1.6':
+    resolution: {integrity: sha512-eKvW6pspvVaU5dxigaIDZr635/Uw6urTXL3gNbY9WTR8d3QigZQT+r8gxYSEOsw4+1cCBsC4s7T2ptR0WC9LfQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      keyv: ^5.6.0
+
   '@keyv/serialize@1.1.1':
     resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
 
@@ -2770,6 +2779,15 @@ packages:
       '@nestjs/core': ^10.0.0 || ^11.0.0
       bullmq: ^3.0.0 || ^4.0.0 || ^5.0.0
 
+  '@nestjs/cache-manager@3.1.0':
+    resolution: {integrity: sha512-pEIqYZrBcE8UdkJmZRduurvoUfdU+3kRPeO1R2muiMbZnRuqlki5klFFNllO9LyYWzrx98bd1j0PSPKSJk1Wbw==}
+    peerDependencies:
+      '@nestjs/common': ^9.0.0 || ^10.0.0 || ^11.0.0
+      '@nestjs/core': ^9.0.0 || ^10.0.0 || ^11.0.0
+      cache-manager: '>=6'
+      keyv: '>=5'
+      rxjs: ^7.8.1
+
   '@nestjs/cli@11.0.16':
     resolution: {integrity: sha512-P0H+Vcjki6P5160E5QnMt3Q0X5FTg4PZkP99Ig4lm/4JWqfw32j3EXv3YBTJ2DmxLwOQ/IS9F7dzKpMAgzKTGg==}
     engines: {node: '>= 20.11'}
@@ -4029,6 +4047,15 @@ packages:
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
+  '@redis/client@5.11.0':
+    resolution: {integrity: sha512-GHoprlNQD51Xq2Ztd94HHV94MdFZQ3CVrpA04Fz8MVoHM0B7SlbmPEVIjwTbcv58z8QyjnrOuikS0rWF03k5dQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      '@node-rs/xxhash': ^1.1.0
+    peerDependenciesMeta:
+      '@node-rs/xxhash':
+        optional: true
+
   '@remirror/core-constants@3.0.0':
     resolution: {integrity: sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==}
 
@@ -12335,9 +12362,9 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@hocuspocus/transformer@3.4.4(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(y-prosemirror@1.3.7(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29))(yjs@13.6.29)':
+  '@hocuspocus/transformer@3.4.4(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(y-prosemirror@1.3.7(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29))(yjs@13.6.29)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
       '@tiptap/starter-kit': 3.17.1
       y-prosemirror: 1.3.7(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29)
@@ -12870,6 +12897,15 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@keyv/redis@5.1.6(keyv@5.6.0)':
+    dependencies:
+      '@redis/client': 5.11.0
+      cluster-key-slot: 1.1.2
+      hookified: 1.15.1
+      keyv: 5.6.0
+    transitivePeerDependencies:
+      - '@node-rs/xxhash'
+
   '@keyv/serialize@1.1.1': {}
 
   '@langchain/core@1.1.18(@opentelemetry/api@1.9.0)(@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0))(openai@6.2.0(ws@8.19.0)(zod@4.3.6))':
@@ -13062,6 +13098,14 @@ snapshots:
       bullmq: 5.65.0
       tslib: 2.8.1
 
+  '@nestjs/cache-manager@3.1.0(@nestjs/common@11.1.11(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/core@11.1.13)(cache-manager@7.2.8)(keyv@5.6.0)(rxjs@7.8.2)':
+    dependencies:
+      '@nestjs/common': 11.1.11(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2)
+      '@nestjs/core': 11.1.13(@nestjs/common@11.1.11(class-transformer@0.5.1)(class-validator@0.14.3)(reflect-metadata@0.2.2)(rxjs@7.8.2))(@nestjs/websockets@11.1.13)(reflect-metadata@0.2.2)(rxjs@7.8.2)
+      cache-manager: 7.2.8
+      keyv: 5.6.0
+      rxjs: 7.8.2
+
   '@nestjs/cli@11.0.16(@swc/core@1.5.25(@swc/helpers@0.5.5))(@types/node@22.13.4)':
     dependencies:
       '@angular-devkit/core': 19.2.19(chokidar@4.0.3)
@@ -14368,6 +14412,10 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  '@redis/client@5.11.0':
+    dependencies:
+      cluster-key-slot: 1.1.2
+
   '@remirror/core-constants@3.0.0': {}
 
   '@rolldown/pluginutils@1.0.0-beta.47': {}
@@ -14898,191 +14946,191 @@ snapshots:
       '@tanstack/query-core': 5.90.17
       react: 18.3.1
 
-  '@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)':
+  '@tiptap/core@3.17.1(@tiptap/pm@3.17.1)':
     dependencies:
       '@tiptap/pm': 3.17.1
 
-  '@tiptap/extension-blockquote@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-blockquote@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-bold@3.17.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-bold@3.17.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-bubble-menu@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
+  '@tiptap/extension-bubble-menu@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
     dependencies:
       '@floating-ui/dom': 1.7.4
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
     optional: true
 
-  '@tiptap/extension-bullet-list@3.17.1(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-bullet-list@3.17.1(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/extension-list': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extension-list': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-code-block@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
+  '@tiptap/extension-code-block@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
 
-  '@tiptap/extension-code@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-code@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-collaboration-caret@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29))':
+  '@tiptap/extension-collaboration-caret@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
       '@tiptap/y-tiptap': 3.0.2(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29)
 
-  '@tiptap/extension-collaboration@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29))(yjs@13.6.29)':
+  '@tiptap/extension-collaboration@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29))(yjs@13.6.29)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
       '@tiptap/y-tiptap': 3.0.2(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29)
       yjs: 13.6.29
 
-  '@tiptap/extension-color@3.17.1(@tiptap/extension-text-style@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)))':
+  '@tiptap/extension-color@3.17.1(@tiptap/extension-text-style@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1)))':
     dependencies:
-      '@tiptap/extension-text-style': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+      '@tiptap/extension-text-style': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
 
-  '@tiptap/extension-document@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-document@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-dropcursor@3.19.0(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-dropcursor@3.19.0(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/extensions': 3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extensions': 3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-floating-menu@3.19.0(@floating-ui/dom@1.7.3)(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
+  '@tiptap/extension-floating-menu@3.19.0(@floating-ui/dom@1.7.3)(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
     dependencies:
       '@floating-ui/dom': 1.7.3
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
     optional: true
 
-  '@tiptap/extension-gapcursor@3.19.0(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-gapcursor@3.19.0(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/extensions': 3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extensions': 3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-hard-break@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-hard-break@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-heading@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-heading@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-highlight@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-highlight@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-history@3.17.1(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-history@3.17.1(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/extensions': 3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extensions': 3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-horizontal-rule@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
+  '@tiptap/extension-horizontal-rule@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
 
-  '@tiptap/extension-image@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-image@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-italic@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-italic@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-link@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
+  '@tiptap/extension-link@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
       linkifyjs: 4.3.2
 
-  '@tiptap/extension-list-item@3.19.0(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-list-item@3.19.0(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/extension-list': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extension-list': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-list-keymap@3.19.0(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-list-keymap@3.19.0(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/extension-list': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extension-list': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
+  '@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
 
-  '@tiptap/extension-ordered-list@3.19.0(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-ordered-list@3.19.0(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/extension-list': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extension-list': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-paragraph@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-paragraph@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-placeholder@3.17.1(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-placeholder@3.17.1(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/extensions': 3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extensions': 3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-strike@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-strike@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-subscript@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
+  '@tiptap/extension-subscript@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
 
-  '@tiptap/extension-superscript@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
+  '@tiptap/extension-superscript@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
 
-  '@tiptap/extension-table@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
+  '@tiptap/extension-table@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
 
-  '@tiptap/extension-text-align@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-text-align@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-text-style@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-text-style@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-text@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-text@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-typography@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-typography@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-underline@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-underline@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extension-unique-id@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
+  '@tiptap/extension-unique-id@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
       uuid: 10.0.0
 
-  '@tiptap/extension-youtube@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))':
+  '@tiptap/extension-youtube@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
 
-  '@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
+  '@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
 
-  '@tiptap/html@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(happy-dom@20.1.0)':
+  '@tiptap/html@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(happy-dom@20.1.0)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
       happy-dom: 20.1.0
 
@@ -15107,9 +15155,9 @@ snapshots:
       prosemirror-transform: 1.10.4
       prosemirror-view: 1.40.0
 
-  '@tiptap/react@3.17.1(@floating-ui/dom@1.7.3)(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@tiptap/react@3.17.1(@floating-ui/dom@1.7.3)(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
@@ -15119,41 +15167,41 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       use-sync-external-store: 1.6.0(react@18.3.1)
     optionalDependencies:
-      '@tiptap/extension-bubble-menu': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extension-bubble-menu': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
-      '@tiptap/extension-floating-menu': 3.19.0(@floating-ui/dom@1.7.3)(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extension-floating-menu': 3.19.0(@floating-ui/dom@1.7.3)(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
     transitivePeerDependencies:
       - '@floating-ui/dom'
 
   '@tiptap/starter-kit@3.17.1':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
-      '@tiptap/extension-blockquote': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+      '@tiptap/extension-blockquote': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
-      '@tiptap/extension-bold': 3.17.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+      '@tiptap/extension-bold': 3.17.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
-      '@tiptap/extension-bullet-list': 3.17.1(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
+      '@tiptap/extension-bullet-list': 3.17.1(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
-      '@tiptap/extension-code': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+      '@tiptap/extension-code': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
-      '@tiptap/extension-code-block': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extension-code-block': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
-      '@tiptap/extension-document': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+      '@tiptap/extension-document': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
-      '@tiptap/extension-dropcursor': 3.19.0(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
+      '@tiptap/extension-dropcursor': 3.19.0(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
-      '@tiptap/extension-gapcursor': 3.19.0(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
+      '@tiptap/extension-gapcursor': 3.19.0(@tiptap/extensions@3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
-      '@tiptap/extension-hard-break': 3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+      '@tiptap/extension-hard-break': 3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
-      '@tiptap/extension-heading': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+      '@tiptap/extension-heading': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
-      '@tiptap/extension-horizontal-rule': 3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extension-horizontal-rule': 3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
-      '@tiptap/extension-italic': 3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+      '@tiptap/extension-italic': 3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
-      '@tiptap/extension-link': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extension-link': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
-      '@tiptap/extension-list': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extension-list': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
-      '@tiptap/extension-list-item': 3.19.0(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
+      '@tiptap/extension-list-item': 3.19.0(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
-      '@tiptap/extension-list-keymap': 3.19.0(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
+      '@tiptap/extension-list-keymap': 3.19.0(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
-      '@tiptap/extension-ordered-list': 3.19.0(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
+      '@tiptap/extension-ordered-list': 3.19.0(@tiptap/extension-list@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1))
-      '@tiptap/extension-paragraph': 3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+      '@tiptap/extension-paragraph': 3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
-      '@tiptap/extension-strike': 3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+      '@tiptap/extension-strike': 3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
-      '@tiptap/extension-text': 3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+      '@tiptap/extension-text': 3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
-      '@tiptap/extension-underline': 3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))
+      '@tiptap/extension-underline': 3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))
-      '@tiptap/extensions': 3.19.0(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
+      '@tiptap/extensions': 3.19.0(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
 
-  '@tiptap/suggestion@3.17.1(@tiptap/core@3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
+  '@tiptap/suggestion@3.17.1(@tiptap/core@3.17.1(@tiptap/pm@3.17.1))(@tiptap/pm@3.17.1)':
     dependencies:
-      '@tiptap/core': 3.17.1(patch_hash=efe36d923d71b90e115d2d468ea1ddaf04a78c2e43c811a1a4b667989c39ea00)(@tiptap/pm@3.17.1)
+      '@tiptap/core': 3.17.1(@tiptap/pm@3.17.1)
       '@tiptap/pm': 3.17.1
 
   '@tiptap/y-tiptap@3.0.2(prosemirror-model@1.25.1)(prosemirror-state@1.4.3)(prosemirror-view@1.40.0)(y-protocols@1.0.6(yjs@13.6.29))(yjs@13.6.29)':