Merge 6942fb4f16e43c3a9464128535d78215934ccf03 into a74d3feae425063e559d9d185cdbf2af1fa61885

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

@@ -353,5 +353,9 @@
   "Word count: {{wordCount}}": "Word count: {{wordCount}}",
   "Character count: {{characterCount}}": "Character count: {{characterCount}}",
   "New update": "New update",
-  "{{latestVersion}} is available": "{{latestVersion}} is available"
+  "{{latestVersion}} is available": "{{latestVersion}} is available",
+  "Real-time editor connection was lost. Retrying...": "Real-time editor connection was lost. Retrying...",
+  "Default page edit mode": "Default page edit mode",
+  "Choose your preferred page edit mode. Avoid accidental edits.": "Choose your preferred page edit mode. Avoid accidental edits.",
+  "Reading": "Reading"
 }

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

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

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

@@ -52,6 +52,7 @@ import { IPage } from "@/features/page/types/page.types.ts";
 import { useParams } from "react-router-dom";
 import { extractPageSlugId } from "@/lib";
 import { FIVE_MINUTES } from "@/lib/constants.ts";
+import { PageEditMode } from "@/features/user/types/user.types.ts";
 
 interface PageEditorProps {
   pageId: string;
@@ -85,6 +86,9 @@ export default function PageEditor({
   const { pageSlug } = useParams();
   const collabRetryCount = useRef(0);
   const slugId = extractPageSlugId(pageSlug);
+  const { data } = useCollabToken();
+  const userPageEditMode =
+    currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
 
   const localProvider = useMemo(() => {
     const provider = new IndexeddbPersistence(documentName, ydoc);
@@ -294,6 +298,17 @@ export default function PageEditor({
     return () => clearTimeout(collabReadyTimeout);
   }, [isRemoteSynced, isLocalSynced, remoteProvider?.status]);
 
+  useEffect(() => {
+    // honor user default page edit mode preference
+    if (userPageEditMode && editor && editable && isSynced) {
+      if (userPageEditMode === PageEditMode.Edit) {
+        editor.setEditable(true);
+      } else if (userPageEditMode === PageEditMode.Read) {
+        editor.setEditable(false);
+      }
+    }
+  }, [userPageEditMode, editor, editable, isSynced]);
+
   return isCollabReady ? (
     <div>
       <div ref={menuContainerRef}>

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

@@ -21,6 +21,8 @@ import { useTranslation } from "react-i18next";
 import EmojiCommand from "@/features/editor/extensions/emoji-command.ts";
 import { UpdateEvent } from "@/features/websocket/types";
 import localEmitter from "@/lib/local-emitter.ts";
+import { currentUserAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { PageEditMode } from "@/features/user/types/user.types.ts";
 
 export interface TitleEditorProps {
   pageId: string;
@@ -44,6 +46,9 @@ export function TitleEditor({
   const emit = useQueryEmit();
   const navigate = useNavigate();
   const [activePageId, setActivePageId] = useState(pageId);
+  const [currentUser] = useAtom(currentUserAtom);
+  const userPageEditMode =
+    currentUser?.user?.settings?.preferences?.pageEditMode ?? PageEditMode.Edit;
 
   const titleEditor = useEditor({
     extensions: [
@@ -132,7 +137,18 @@ export function TitleEditor({
     };
   }, [pageId]);
 
-  function handleTitleKeyDown(event) {
+  useEffect(() => {
+    // honor user default page edit mode preference
+    if (userPageEditMode && titleEditor && editable) {
+      if (userPageEditMode === PageEditMode.Edit) {
+        titleEditor.setEditable(true);
+      } else if (userPageEditMode === PageEditMode.Read) {
+        titleEditor.setEditable(false);
+      }
+    }
+  }, [userPageEditMode, titleEditor, editable]);
+
+  function handleTitleKeyDown(event: any) {
     if (!titleEditor || !pageEditor || event.shiftKey) return;
 
     const { key } = event;

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

@@ -31,6 +31,7 @@ import {
   yjsConnectionStatusAtom,
 } from "@/features/editor/atoms/editor-atoms.ts";
 import { formattedDate, timeAgo } from "@/lib/time.ts";
+import { PageStateSegmentedControl } from "@/features/user/components/page-state-pref.tsx";
 
 interface PageHeaderMenuProps {
   readOnly?: boolean;
@@ -38,12 +39,13 @@ interface PageHeaderMenuProps {
 export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
   const toggleAside = useToggleAside();
   const [yjsConnectionStatus] = useAtom(yjsConnectionStatusAtom);
+  const { t } = useTranslation();
 
   return (
     <>
       {yjsConnectionStatus === "disconnected" && (
         <Tooltip
-          label="Real-time editor connection lost. Retrying..."
+          label={t("Real-time editor connection was lost. Retrying...")}
           openDelay={250}
           withArrow
         >
@@ -53,6 +55,8 @@ export default function PageHeaderMenu({ readOnly }: PageHeaderMenuProps) {
         </Tooltip>
       )}
 
+      {!readOnly && <PageStateSegmentedControl />}
+
       <Tooltip label="Comments" openDelay={250} withArrow>
         <ActionIcon
           variant="default"

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { OmitType, PartialType } from '@nestjs/mapped-types';
 import { CreateUserDto } from '../../auth/dto/create-user.dto';
-import { IsBoolean, IsOptional, IsString } from 'class-validator';
+import { IsBoolean, IsIn, IsOptional, IsString } from 'class-validator';
 
 export class UpdateUserDto extends PartialType(
   OmitType(CreateUserDto, ['password'] as const),
@@ -13,6 +13,11 @@ export class UpdateUserDto extends PartialType(
   @IsBoolean()
   fullPageWidth: boolean;
 
+  @IsOptional()
+  @IsString()
+  @IsIn(['read', 'edit'])
+  pageEditMode: string;
+
   @IsOptional()
   @IsString()
   locale: string;

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

@@ -27,12 +27,21 @@ export class UserService {
 
     // preference update
     if (typeof updateUserDto.fullPageWidth !== 'undefined') {
-      return this.updateUserPageWidthPreference(
+      return this.userRepo.updatePreference(
         userId,
+        'fullPageWidth',
         updateUserDto.fullPageWidth,
       );
     }
 
+    if (typeof updateUserDto.pageEditMode !== 'undefined') {
+      return this.userRepo.updatePreference(
+        userId,
+        'pageEditMode',
+        updateUserDto.pageEditMode.toLowerCase(),
+      );
+    }
+
     if (updateUserDto.name) {
       user.name = updateUserDto.name;
     }
@@ -55,12 +64,4 @@ export class UserService {
     await this.userRepo.updateUser(updateUserDto, userId, workspaceId);
     return user;
   }
-
-  async updateUserPageWidthPreference(userId: string, fullPageWidth: boolean) {
-    return this.userRepo.updatePreference(
-      userId,
-      'fullPageWidth',
-      fullPageWidth,
-    );
-  }
 }