chore: resolved in merge conflicts

apiserver/plane/app/serializers/page.py

@@ -106,7 +106,9 @@ class PageDetailSerializer(PageSerializer):
     description_html = serializers.CharField()
 
     class Meta(PageSerializer.Meta):
-        fields = PageSerializer.Meta.fields + ["description_html"]
+        fields = PageSerializer.Meta.fields + [
+            "description_html",
+        ]
 
 
 class SubPageSerializer(BaseSerializer):

apiserver/plane/app/urls/page.py

@@ -6,6 +6,7 @@ from plane.app.views import (
     PageFavoriteViewSet,
     PageLogEndpoint,
     SubPagesEndpoint,
+    PagesDescriptionViewSet,
 )
 
 
@@ -79,4 +80,14 @@ urlpatterns = [
         SubPagesEndpoint.as_view(),
         name="sub-page",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:pk>/description/",
+        PagesDescriptionViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+            }
+        ),
+        name="page-description",
+    ),
 ]

apiserver/plane/app/views/__init__.py

@@ -177,6 +177,7 @@ from .page.base import (
     PageFavoriteViewSet,
     PageLogEndpoint,
     SubPagesEndpoint,
+    PagesDescriptionViewSet,
 )
 
 from .search import GlobalSearchEndpoint, IssueSearchEndpoint

apiserver/plane/app/views/page/base.py

@@ -1,5 +1,6 @@
 # Python imports
 import json
+import base64
 from datetime import datetime
 from django.core.serializers.json import DjangoJSONEncoder
 
@@ -8,6 +9,7 @@ from django.db import connection
 from django.db.models import Exists, OuterRef, Q
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
+from django.http import StreamingHttpResponse
 
 # Third party imports
 from rest_framework import status
@@ -388,3 +390,48 @@ class SubPagesEndpoint(BaseAPIView):
         return Response(
             SubPageSerializer(pages, many=True).data, status=status.HTTP_200_OK
         )
+
+
+class PagesDescriptionViewSet(BaseViewSet):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def retrieve(self, request, slug, project_id, pk):
+        page = Page.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id
+        )
+        binary_data = page.description_binary
+
+        def stream_data():
+            if binary_data:
+                yield binary_data
+            else:
+                yield b""
+
+        response = StreamingHttpResponse(
+            stream_data(), content_type="application/octet-stream"
+        )
+        response["Content-Disposition"] = (
+            'attachment; filename="page_description.bin"'
+        )
+        return response
+
+    def partial_update(self, request, slug, project_id, pk):
+        page = Page.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id
+        )
+
+        base64_data = request.data.get("description_binary")
+
+        if base64_data:
+            # Decode the base64 data to bytes
+            new_binary_data = base64.b64decode(base64_data)
+
+            # Store the updated binary data
+            page.description_binary = new_binary_data
+            page.description_html = request.data.get("description_html")
+            page.save()
+            return Response({"message": "Updated successfully"})
+        else:
+            return Response({"error": "No binary data provided"})

apiserver/plane/app/views/user/base.py

@@ -1,5 +1,5 @@
 # Python imports
-# import uuid
+import uuid
 
 # Django imports
 from django.db.models import Case, Count, IntegerField, Q, When
@@ -183,8 +183,8 @@ class UserEndpoint(BaseViewSet):
         profile.save()
 
         # Reset password
-        # user.is_password_autoset = True
-        # user.set_password(uuid.uuid4().hex)
+        user.is_password_autoset = True
+        user.set_password(uuid.uuid4().hex)
 
         # Deactivate the user
         user.is_active = False

apiserver/plane/authentication/adapter/oauth.py

@@ -8,6 +8,10 @@ from django.utils import timezone
 from plane.db.models import Account
 
 from .base import Adapter
+from plane.authentication.adapter.error import (
+    AuthenticationException,
+    AUTHENTICATION_ERROR_CODES,
+)
 
 
 class OauthAdapter(Adapter):
@@ -50,20 +54,42 @@ class OauthAdapter(Adapter):
         return self.complete_login_or_signup()
 
     def get_user_token(self, data, headers=None):
-        headers = headers or {}
-        response = requests.post(
-            self.get_token_url(), data=data, headers=headers
-        )
-        response.raise_for_status()
-        return response.json()
+        try:
+            headers = headers or {}
+            response = requests.post(
+                self.get_token_url(), data=data, headers=headers
+            )
+            response.raise_for_status()
+            return response.json()
+        except requests.RequestException:
+            code = (
+                "GOOGLE_OAUTH_PROVIDER_ERROR"
+                if self.provider == "google"
+                else "GITHUB_OAUTH_PROVIDER_ERROR"
+            )
+            raise AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[code],
+                error_message=str(code),
+            )
 
     def get_user_response(self):
-        headers = {
-            "Authorization": f"Bearer {self.token_data.get('access_token')}"
-        }
-        response = requests.get(self.get_user_info_url(), headers=headers)
-        response.raise_for_status()
-        return response.json()
+        try:
+            headers = {
+                "Authorization": f"Bearer {self.token_data.get('access_token')}"
+            }
+            response = requests.get(self.get_user_info_url(), headers=headers)
+            response.raise_for_status()
+            return response.json()
+        except requests.RequestException:
+            code = (
+                "GOOGLE_OAUTH_PROVIDER_ERROR"
+                if self.provider == "google"
+                else "GITHUB_OAUTH_PROVIDER_ERROR"
+            )
+            raise AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[code],
+                error_message=str(code),
+            )
 
     def set_user_data(self, data):
         self.user_data = data

apiserver/plane/authentication/provider/oauth/github.py

@@ -105,14 +105,26 @@ class GitHubOAuthProvider(OauthAdapter):
         )
 
     def __get_email(self, headers):
-        # Github does not provide email in user response
-        emails_url = "https://api.github.com/user/emails"
-        emails_response = requests.get(emails_url, headers=headers).json()
-        email = next(
-            (email["email"] for email in emails_response if email["primary"]),
-            None,
-        )
-        return email
+        try:
+            # Github does not provide email in user response
+            emails_url = "https://api.github.com/user/emails"
+            emails_response = requests.get(emails_url, headers=headers).json()
+            email = next(
+                (
+                    email["email"]
+                    for email in emails_response
+                    if email["primary"]
+                ),
+                None,
+            )
+            return email
+        except requests.RequestException:
+            raise AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[
+                    "GITHUB_OAUTH_PROVIDER_ERROR"
+                ],
+                error_message="GITHUB_OAUTH_PROVIDER_ERROR",
+            )
 
     def set_user_data(self):
         user_info_response = self.get_user_response()

apiserver/plane/db/models/page.py

@@ -18,6 +18,7 @@ def get_view_props():
 class Page(ProjectBaseModel):
     name = models.CharField(max_length=255, blank=True)
     description = models.JSONField(default=dict, blank=True)
+    description_binary = models.BinaryField(null=True)
     description_html = models.TextField(blank=True, default="<p></p>")
     description_stripped = models.TextField(blank=True, null=True)
     owned_by = models.ForeignKey(
@@ -43,7 +44,6 @@ class Page(ProjectBaseModel):
     is_locked = models.BooleanField(default=False)
     view_props = models.JSONField(default=get_view_props)
     logo_props = models.JSONField(default=dict)
-    description_binary = models.BinaryField(null=True)
 
     class Meta:
         verbose_name = "Page"

packages/editor/core/src/hooks/use-editor.tsx

@@ -13,17 +13,21 @@ import { EditorMenuItemNames, getEditorMenuItems } from "src/ui/menus/menu-items
 import { EditorRefApi } from "src/types/editor-ref-api";
 import { IMarking, scrollSummary } from "src/helpers/scroll-to-node";
 
-interface CustomEditorProps {
+export type TFileHandler = {
+  cancel: () => void;
+  delete: DeleteImage;
+  upload: UploadImage;
+  restore: RestoreImage;
+};
+
+export interface CustomEditorProps {
   id?: string;
-  uploadFile: UploadImage;
-  restoreFile: RestoreImage;
-  deleteFile: DeleteImage;
-  cancelUploadImage?: () => void;
-  initialValue: string;
+  fileHandler: TFileHandler;
+  initialValue?: string;
   editorClassName: string;
   // undefined when prop is not passed, null if intentionally passed to stop
   // swr syncing
-  value: string | null | undefined;
+  value?: string | null | undefined;
   onChange?: (json: object, html: string) => void;
   extensions?: any;
   editorProps?: EditorProps;
@@ -38,19 +42,16 @@ interface CustomEditorProps {
 }
 
 export const useEditor = ({
-  uploadFile,
   id = "",
-  deleteFile,
-  cancelUploadImage,
   editorProps = {},
   initialValue,
   editorClassName,
   value,
   extensions = [],
+  fileHandler,
   onChange,
   forwardedRef,
   tabIndex,
-  restoreFile,
   handleEditorReady,
   mentionHandler,
   placeholder,
@@ -67,10 +68,10 @@ export const useEditor = ({
           mentionHighlights: mentionHandler.highlights ?? [],
         },
         fileConfig: {
-          deleteFile,
-          restoreFile,
-          cancelUploadImage,
-          uploadFile,
+          uploadFile: fileHandler.upload,
+          deleteFile: fileHandler.delete,
+          restoreFile: fileHandler.restore,
+          cancelUploadImage: fileHandler.cancel,
         },
         placeholder,
         tabIndex,
@@ -139,7 +140,7 @@ export const useEditor = ({
         }
       },
       executeMenuItemCommand: (itemName: EditorMenuItemNames) => {
-        const editorItems = getEditorMenuItems(editorRef.current, uploadFile);
+        const editorItems = getEditorMenuItems(editorRef.current, fileHandler.upload);
 
         const getEditorMenuItem = (itemName: EditorMenuItemNames) => editorItems.find((item) => item.key === itemName);
 
@@ -155,7 +156,7 @@ export const useEditor = ({
         }
       },
       isMenuItemActive: (itemName: EditorMenuItemNames): boolean => {
-        const editorItems = getEditorMenuItems(editorRef.current, uploadFile);
+        const editorItems = getEditorMenuItems(editorRef.current, fileHandler.upload);
 
         const getEditorMenuItem = (itemName: EditorMenuItemNames) => editorItems.find((item) => item.key === itemName);
         const item = getEditorMenuItem(itemName);
@@ -177,6 +178,10 @@ export const useEditor = ({
         const markdownOutput = editorRef.current?.storage.markdown.getMarkdown();
         return markdownOutput;
       },
+      getHTML: (): string => {
+        const htmlOutput = editorRef.current?.getHTML() ?? "<p></p>";
+        return htmlOutput;
+      },
       scrollSummary: (marking: IMarking): void => {
         if (!editorRef.current) return;
         scrollSummary(editorRef.current, marking);
@@ -199,7 +204,7 @@ export const useEditor = ({
         }
       },
     }),
-    [editorRef, savedSelection, uploadFile]
+    [editorRef, savedSelection, fileHandler.upload]
   );
 
   if (!editor) {

packages/editor/core/src/hooks/use-read-only-editor.tsx

@@ -68,6 +68,10 @@ export const useReadOnlyEditor = ({
       const markdownOutput = editorRef.current?.storage.markdown.getMarkdown();
       return markdownOutput;
     },
+    getHTML: (): string => {
+      const htmlOutput = editorRef.current?.getHTML() ?? "<p></p>";
+      return htmlOutput;
+    },
     scrollSummary: (marking: IMarking): void => {
       if (!editorRef.current) return;
       scrollSummary(editorRef.current, marking);

packages/editor/core/src/index.ts

@@ -24,6 +24,7 @@ export * from "src/ui/menus/menu-items";
 export * from "src/lib/editor-commands";
 
 // types
+export type { CustomEditorProps, TFileHandler } from "src/hooks/use-editor";
 export type { DeleteImage } from "src/types/delete-image";
 export type { UploadImage } from "src/types/upload-image";
 export type { EditorRefApi, EditorReadOnlyRefApi } from "src/types/editor-ref-api";

packages/editor/core/src/lib/utils.ts

@@ -1,5 +1,7 @@
+import { Extensions, generateJSON, getSchema } from "@tiptap/core";
 import { Selection } from "@tiptap/pm/state";
 import { clsx, type ClassValue } from "clsx";
+import { CoreEditorExtensionsWithoutProps } from "src/ui/extensions/core-without-props";
 import { twMerge } from "tailwind-merge";
 interface EditorClassNames {
   noBorder?: boolean;
@@ -58,3 +60,20 @@ export const isValidHttpUrl = (string: string): boolean => {
 
   return url.protocol === "http:" || url.protocol === "https:";
 };
+
+/**
+ * @description return an object with contentJSON and editorSchema
+ * @description contentJSON- ProseMirror JSON from HTML content
+ * @description editorSchema- editor schema from extensions
+ * @param {string} html
+ * @returns {object} {contentJSON, editorSchema}
+ */
+export const generateJSONfromHTML = (html: string) => {
+  const extensions = CoreEditorExtensionsWithoutProps();
+  const contentJSON = generateJSON(html ?? "<p></p>", extensions as Extensions);
+  const editorSchema = getSchema(extensions as Extensions);
+  return {
+    contentJSON,
+    editorSchema,
+  };
+};

packages/editor/core/src/types/editor-ref-api.ts

@@ -3,6 +3,7 @@ import { EditorMenuItemNames } from "src/ui/menus/menu-items";
 
 export type EditorReadOnlyRefApi = {
   getMarkDown: () => string;
+  getHTML: () => string;
   clearEditor: () => void;
   setEditorValue: (content: string) => void;
   scrollSummary: (marking: IMarking) => void;

packages/editor/core/src/ui/extensions/core-without-props.tsx

@@ -0,0 +1,121 @@
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import TextStyle from "@tiptap/extension-text-style";
+import TiptapUnderline from "@tiptap/extension-underline";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Markdown } from "tiptap-markdown";
+
+import { Table } from "src/ui/extensions/table/table";
+import { TableCell } from "src/ui/extensions/table/table-cell/table-cell";
+import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
+import { TableRow } from "src/ui/extensions/table/table-row/table-row";
+
+import { isValidHttpUrl } from "src/lib/utils";
+
+import { CustomCodeBlockExtension } from "src/ui/extensions/code";
+import { CustomKeymap } from "src/ui/extensions/keymap";
+import { CustomQuoteExtension } from "src/ui/extensions/quote";
+
+import { CustomLinkExtension } from "src/ui/extensions/custom-link";
+import { CustomCodeInlineExtension } from "src/ui/extensions/code-inline";
+import { CustomTypographyExtension } from "src/ui/extensions/typography";
+import { CustomHorizontalRule } from "src/ui/extensions/horizontal-rule/horizontal-rule";
+import { CustomCodeMarkPlugin } from "src/ui/extensions/custom-code-inline/inline-code-plugin";
+import { MentionsWithoutProps } from "src/ui/mentions/mention-without-props";
+import { ImageExtensionWithoutProps } from "src/ui/extensions/image/image-extension-without-props";
+
+import StarterKit from "@tiptap/starter-kit";
+
+export const CoreEditorExtensionsWithoutProps = () => [
+  StarterKit.configure({
+    bulletList: {
+      HTMLAttributes: {
+        class: "list-disc pl-7 space-y-2",
+      },
+    },
+    orderedList: {
+      HTMLAttributes: {
+        class: "list-decimal pl-7 space-y-2",
+      },
+    },
+    listItem: {
+      HTMLAttributes: {
+        class: "not-prose space-y-2",
+      },
+    },
+    code: false,
+    codeBlock: false,
+    horizontalRule: false,
+    blockquote: false,
+    dropcursor: {
+      color: "rgba(var(--color-text-100))",
+      width: 1,
+    },
+  }),
+  CustomQuoteExtension,
+  CustomHorizontalRule.configure({
+    HTMLAttributes: {
+      class: "my-4 border-custom-border-400",
+    },
+  }),
+  CustomKeymap,
+  // ListKeymap,
+  CustomLinkExtension.configure({
+    openOnClick: true,
+    autolink: true,
+    linkOnPaste: true,
+    protocols: ["http", "https"],
+    validate: (url: string) => isValidHttpUrl(url),
+    HTMLAttributes: {
+      class:
+        "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
+    },
+  }),
+  CustomTypographyExtension,
+  ImageExtensionWithoutProps().configure({
+    HTMLAttributes: {
+      class: "rounded-md",
+    },
+  }),
+  TiptapUnderline,
+  TextStyle,
+  TaskList.configure({
+    HTMLAttributes: {
+      class: "not-prose pl-2 space-y-2",
+    },
+  }),
+  TaskItem.configure({
+    HTMLAttributes: {
+      class: "flex",
+    },
+    nested: true,
+  }),
+  CustomCodeBlockExtension.configure({
+    HTMLAttributes: {
+      class: "",
+    },
+  }),
+  CustomCodeMarkPlugin,
+  CustomCodeInlineExtension,
+  Markdown.configure({
+    html: true,
+    transformPastedText: true,
+  }),
+  Table,
+  TableHeader,
+  TableCell,
+  TableRow,
+  MentionsWithoutProps(),
+  Placeholder.configure({
+    placeholder: ({ editor, node }) => {
+      if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
+
+      const shouldHidePlaceholder =
+        editor.isActive("table") || editor.isActive("codeBlock") || editor.isActive("image");
+      if (shouldHidePlaceholder) return "";
+
+      return "Press '/' for commands...";
+    },
+    includeChildren: true,
+  }),
+];

packages/editor/core/src/ui/extensions/image/image-extension-without-props.tsx

@@ -0,0 +1,33 @@
+import ImageExt from "@tiptap/extension-image";
+import { insertLineBelowImageAction } from "./utilities/insert-line-below-image";
+import { insertLineAboveImageAction } from "./utilities/insert-line-above-image";
+
+export const ImageExtensionWithoutProps = () =>
+  ImageExt.extend({
+    addKeyboardShortcuts() {
+      return {
+        ArrowDown: insertLineBelowImageAction,
+        ArrowUp: insertLineAboveImageAction,
+      };
+    },
+
+    // storage to keep track of image states Map<src, isDeleted>
+    addStorage() {
+      return {
+        images: new Map<string, boolean>(),
+        uploadInProgress: false,
+      };
+    },
+
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        width: {
+          default: "35%",
+        },
+        height: {
+          default: null,
+        },
+      };
+    },
+  });

packages/editor/core/src/ui/mentions/mention-without-props.tsx

@@ -0,0 +1,79 @@
+import { CustomMention } from "./custom";
+import { ReactRenderer } from "@tiptap/react";
+import { Editor } from "@tiptap/core";
+import tippy from "tippy.js";
+
+import { MentionList } from "./mention-list";
+
+export const MentionsWithoutProps = () =>
+  CustomMention.configure({
+    HTMLAttributes: {
+      class: "mention",
+    },
+    // mentionHighlights: mentionHighlights,
+    suggestion: {
+      // @ts-expect-error - Tiptap types are incorrect
+      render: () => {
+        let component: ReactRenderer | null = null;
+        let popup: any | null = null;
+
+        return {
+          onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+            if (!props.clientRect) {
+              return;
+            }
+            component = new ReactRenderer(MentionList, {
+              props: { ...props },
+              editor: props.editor,
+            });
+            props.editor.storage.mentionsOpen = true;
+            // @ts-expect-error - Tippy types are incorrect
+            popup = tippy("body", {
+              getReferenceClientRect: props.clientRect,
+              appendTo: () => document.querySelector(".active-editor") ?? document.querySelector("#editor-container"),
+              content: component.element,
+              showOnCreate: true,
+              interactive: true,
+              trigger: "manual",
+              placement: "bottom-start",
+            });
+          },
+          onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
+            component?.updateProps(props);
+
+            if (!props.clientRect) {
+              return;
+            }
+
+            popup &&
+              popup[0].setProps({
+                getReferenceClientRect: props.clientRect,
+              });
+          },
+
+          onKeyDown: (props: { event: KeyboardEvent }) => {
+            if (props.event.key === "Escape") {
+              popup?.[0].hide();
+
+              return true;
+            }
+
+            const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
+
+            if (navigationKeys.includes(props.event.key)) {
+              // @ts-expect-error - Tippy types are incorrect
+              component?.ref?.onKeyDown(props);
+              event?.stopPropagation();
+              return true;
+            }
+            return false;
+          },
+          onExit: (props: { editor: Editor; event: KeyboardEvent }) => {
+            props.editor.storage.mentionsOpen = false;
+            popup?.[0].destroy();
+            component?.destroy();
+          },
+        };
+      },
+    },
+  });

packages/editor/document-editor/package.json

@@ -34,12 +34,17 @@
     "@plane/ui": "*",
     "@tippyjs/react": "^4.2.6",
     "@tiptap/core": "^2.1.13",
+    "@tiptap/extension-collaboration": "^2.3.2",
     "@tiptap/pm": "^2.1.13",
     "@tiptap/suggestion": "^2.1.13",
     "lucide-react": "^0.378.0",
     "react-popper": "^2.3.0",
     "tippy.js": "^6.3.7",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "y-indexeddb": "^9.0.12",
+    "y-prosemirror": "^1.2.5",
+    "y-protocols": "^1.0.6",
+    "yjs": "^13.6.15"
   },
   "devDependencies": {
     "@types/node": "18.15.3",

packages/editor/document-editor/src/hooks/use-document-editor.ts

@@ -0,0 +1,85 @@
+import { useEffect, useLayoutEffect, useMemo } from "react";
+import { EditorProps } from "@tiptap/pm/view";
+import { IndexeddbPersistence } from "y-indexeddb";
+import * as Y from "yjs";
+// editor-core
+import { EditorRefApi, IMentionHighlight, IMentionSuggestion, TFileHandler, useEditor } from "@plane/editor-core";
+// custom provider
+import { CollaborationProvider } from "src/providers/collaboration-provider";
+// extensions
+import { DocumentEditorExtensions } from "src/ui/extensions";
+
+type DocumentEditorProps = {
+  id: string;
+  fileHandler: TFileHandler;
+  value: Uint8Array;
+  editorClassName: string;
+  onChange: (updates: Uint8Array) => void;
+  editorProps?: EditorProps;
+  forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
+  mentionHandler: {
+    highlights: () => Promise<IMentionHighlight[]>;
+    suggestions?: () => Promise<IMentionSuggestion[]>;
+  };
+  handleEditorReady?: (value: boolean) => void;
+  placeholder?: string | ((isFocused: boolean, value: string) => string);
+  setHideDragHandleFunction: (hideDragHandlerFromDragDrop: () => void) => void;
+  tabIndex?: number;
+};
+
+export const useDocumentEditor = ({
+  id,
+  editorProps = {},
+  value,
+  editorClassName,
+  fileHandler,
+  onChange,
+  forwardedRef,
+  tabIndex,
+  handleEditorReady,
+  mentionHandler,
+  placeholder,
+  setHideDragHandleFunction,
+}: DocumentEditorProps) => {
+  const provider = useMemo(
+    () =>
+      new CollaborationProvider({
+        name: id,
+        onChange,
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [id]
+  );
+
+  // update document on value change
+  useEffect(() => {
+    if (value.byteLength > 0) Y.applyUpdate(provider.document, value);
+  }, [value, provider.document]);
+
+  // indexedDB provider
+  useLayoutEffect(() => {
+    const localProvider = new IndexeddbPersistence(id, provider.document);
+    return () => {
+      localProvider?.destroy();
+    };
+  }, [provider, id]);
+
+  const editor = useEditor({
+    id,
+    editorProps,
+    editorClassName,
+    fileHandler,
+    handleEditorReady,
+    forwardedRef,
+    mentionHandler,
+    extensions: DocumentEditorExtensions({
+      uploadFile: fileHandler.upload,
+      setHideDragHandle: setHideDragHandleFunction,
+      provider,
+    }),
+    placeholder,
+    tabIndex,
+  });
+
+  return editor;
+};

packages/editor/document-editor/src/index.ts

@@ -3,6 +3,8 @@ export { DocumentReadOnlyEditor, DocumentReadOnlyEditorWithRef } from "src/ui/re
 
 // hooks
 export { useEditorMarkings } from "src/hooks/use-editor-markings";
+// utils
+export { proseMirrorJSONToBinaryString, applyUpdates, mergeUpdates } from "src/utils/yjs";
 
 export type { EditorRefApi, EditorReadOnlyRefApi, EditorMenuItem, EditorMenuItemNames } from "@plane/editor-core";
 

packages/editor/document-editor/src/providers/collaboration-provider.ts

@@ -0,0 +1,60 @@
+import * as Y from "yjs";
+
+export interface CompleteCollaboratorProviderConfiguration {
+  /**
+   * The identifier/name of your document
+   */
+  name: string;
+  /**
+   * The actual Y.js document
+   */
+  document: Y.Doc;
+  /**
+   * onChange callback
+   */
+  onChange: (updates: Uint8Array) => void;
+}
+
+export type CollaborationProviderConfiguration = Required<Pick<CompleteCollaboratorProviderConfiguration, "name">> &
+  Partial<CompleteCollaboratorProviderConfiguration>;
+
+export class CollaborationProvider {
+  public configuration: CompleteCollaboratorProviderConfiguration = {
+    name: "",
+    // @ts-expect-error cannot be undefined
+    document: undefined,
+    onChange: () => {},
+  };
+
+  constructor(configuration: CollaborationProviderConfiguration) {
+    this.setConfiguration(configuration);
+
+    this.configuration.document = configuration.document ?? new Y.Doc();
+    this.document.on("update", this.documentUpdateHandler.bind(this));
+    this.document.on("destroy", this.documentDestroyHandler.bind(this));
+  }
+
+  public setConfiguration(configuration: Partial<CompleteCollaboratorProviderConfiguration> = {}): void {
+    this.configuration = {
+      ...this.configuration,
+      ...configuration,
+    };
+  }
+
+  get document() {
+    return this.configuration.document;
+  }
+
+  documentUpdateHandler(update: Uint8Array, origin: any) {
+    // return if the update is from the provider itself
+    if (origin === this) return;
+
+    // call onChange with the update
+    this.configuration.onChange?.(update);
+  }
+
+  documentDestroyHandler() {
+    this.document.off("update", this.documentUpdateHandler);
+    this.document.off("destroy", this.documentDestroyHandler);
+  }
+}

packages/editor/document-editor/src/ui/extensions/index.tsx

@@ -2,14 +2,20 @@ import { IssueWidgetPlaceholder } from "src/ui/extensions/widgets/issue-embed-wi
 
 import { SlashCommand, DragAndDrop } from "@plane/editor-extensions";
 import { UploadImage } from "@plane/editor-core";
+import { CollaborationProvider } from "src/providers/collaboration-provider";
+import Collaboration from "@tiptap/extension-collaboration";
 
 type TArguments = {
   uploadFile: UploadImage;
   setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void;
+  provider: CollaborationProvider;
 };
 
-export const DocumentEditorExtensions = ({ uploadFile, setHideDragHandle }: TArguments) => [
+export const DocumentEditorExtensions = ({ uploadFile, setHideDragHandle, provider }: TArguments) => [
   SlashCommand(uploadFile),
   DragAndDrop(setHideDragHandle),
   IssueWidgetPlaceholder(),
+  Collaboration.configure({
+    document: provider.document,
+  }),
 ];

packages/editor/document-editor/src/ui/index.tsx

@@ -1,30 +1,25 @@
 import React, { useState } from "react";
+// editor-core
 import {
-  UploadImage,
-  DeleteImage,
-  RestoreImage,
   getEditorClassNames,
-  useEditor,
   EditorRefApi,
   IMentionHighlight,
   IMentionSuggestion,
+  TFileHandler,
 } from "@plane/editor-core";
-import { DocumentEditorExtensions } from "src/ui/extensions";
+// components
 import { PageRenderer } from "src/ui/components/page-renderer";
+// hooks
+import { useDocumentEditor } from "src/hooks/use-document-editor";
 
 interface IDocumentEditor {
-  initialValue: string;
-  value?: string;
-  fileHandler: {
-    cancel: () => void;
-    delete: DeleteImage;
-    upload: UploadImage;
-    restore: RestoreImage;
-  };
+  id: string;
+  value: Uint8Array;
+  fileHandler: TFileHandler;
   handleEditorReady?: (value: boolean) => void;
   containerClassName?: string;
   editorClassName?: string;
-  onChange: (json: object, html: string) => void;
+  onChange: (updates: Uint8Array) => void;
   forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
   mentionHandler: {
     highlights: () => Promise<IMentionHighlight[]>;
@@ -37,7 +32,7 @@ interface IDocumentEditor {
 const DocumentEditor = (props: IDocumentEditor) => {
   const {
     onChange,
-    initialValue,
+    id,
     value,
     fileHandler,
     containerClassName,
@@ -50,32 +45,24 @@ const DocumentEditor = (props: IDocumentEditor) => {
   } = props;
   // states
   const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = useState<() => void>(() => {});
-
   // this essentially sets the hideDragHandle function from the DragAndDrop extension as the Plugin
   // loads such that we can invoke it from react when the cursor leaves the container
   const setHideDragHandleFunction = (hideDragHandlerFromDragDrop: () => void) => {
     setHideDragHandleOnMouseLeave(() => hideDragHandlerFromDragDrop);
   };
-  // use editor
-  const editor = useEditor({
-    onChange(json, html) {
-      onChange(json, html);
-    },
+
+  // use document editor
+  const editor = useDocumentEditor({
+    id,
     editorClassName,
-    restoreFile: fileHandler.restore,
-    uploadFile: fileHandler.upload,
-    deleteFile: fileHandler.delete,
-    cancelUploadImage: fileHandler.cancel,
-    initialValue,
+    fileHandler,
     value,
+    onChange,
     handleEditorReady,
     forwardedRef,
     mentionHandler,
-    extensions: DocumentEditorExtensions({
-      uploadFile: fileHandler.upload,
-      setHideDragHandle: setHideDragHandleFunction,
-    }),
     placeholder,
+    setHideDragHandleFunction,
     tabIndex,
   });
 

packages/editor/document-editor/src/utils/yjs.ts

@@ -0,0 +1,76 @@
+import { Schema } from "@tiptap/pm/model";
+import { prosemirrorJSONToYDoc } from "y-prosemirror";
+import * as Y from "yjs";
+
+const defaultSchema: Schema = new Schema({
+  nodes: {
+    text: {},
+    doc: { content: "text*" },
+  },
+});
+
+/**
+ * @description converts ProseMirror JSON to Yjs document
+ * @param document prosemirror JSON
+ * @param fieldName
+ * @param schema
+ * @returns {Y.Doc} Yjs document
+ */
+export const proseMirrorJSONToBinaryString = (
+  document: any,
+  fieldName: string | Array<string> = "default",
+  schema?: Schema
+): string => {
+  if (!document) {
+    throw new Error(
+      `You've passed an empty or invalid document to the Transformer. Make sure to pass ProseMirror-compatible JSON. Actually passed JSON: ${document}`
+    );
+  }
+
+  // allow a single field name
+  if (typeof fieldName === "string") {
+    const yDoc = prosemirrorJSONToYDoc(schema ?? defaultSchema, document, fieldName);
+    const docAsUint8Array = Y.encodeStateAsUpdate(yDoc);
+    const base64Doc = Buffer.from(docAsUint8Array).toString("base64");
+    return base64Doc;
+  }
+
+  const yDoc = new Y.Doc();
+
+  fieldName.forEach((field) => {
+    const update = Y.encodeStateAsUpdate(prosemirrorJSONToYDoc(schema ?? defaultSchema, document, field));
+
+    Y.applyUpdate(yDoc, update);
+  });
+
+  const docAsUint8Array = Y.encodeStateAsUpdate(yDoc);
+  const base64Doc = Buffer.from(docAsUint8Array).toString("base64");
+
+  return base64Doc;
+};
+
+/**
+ * @description apply updates to a doc and return the updated doc in base64(binary) format
+ * @param {Uint8Array} document
+ * @param {Uint8Array} updates
+ * @returns {string} base64(binary) form of the updated doc
+ */
+export const applyUpdates = (document: Uint8Array, updates: Uint8Array): string => {
+  const yDoc = new Y.Doc();
+  Y.applyUpdate(yDoc, document);
+  Y.applyUpdate(yDoc, updates);
+
+  const encodedDoc = Y.encodeStateAsUpdate(yDoc);
+  const base64Updates = Buffer.from(encodedDoc).toString("base64");
+  return base64Updates;
+};
+
+/**
+ * @description merge multiple updates into one single update
+ * @param {Uint8Array[]} updates
+ * @returns {Uint8Array} merged updates
+ */
+export const mergeUpdates = (updates: Uint8Array[]): Uint8Array => {
+  const mergedUpdates = Y.mergeUpdates(updates);
+  return mergedUpdates;
+};

packages/editor/lite-text-editor/src/ui/index.tsx

@@ -1,27 +1,22 @@
 import * as React from "react";
+// editor-core
 import {
-  UploadImage,
-  DeleteImage,
   IMentionSuggestion,
-  RestoreImage,
   EditorContainer,
   EditorContentWrapper,
   getEditorClassNames,
   useEditor,
   IMentionHighlight,
   EditorRefApi,
+  TFileHandler,
 } from "@plane/editor-core";
+// extensions
 import { LiteTextEditorExtensions } from "src/ui/extensions";
 
 export interface ILiteTextEditor {
   initialValue: string;
   value?: string | null;
-  fileHandler: {
-    cancel: () => void;
-    delete: DeleteImage;
-    upload: UploadImage;
-    restore: RestoreImage;
-  };
+  fileHandler: TFileHandler;
   containerClassName?: string;
   editorClassName?: string;
   onChange?: (json: object, html: string) => void;
@@ -58,10 +53,7 @@ const LiteTextEditor = (props: ILiteTextEditor) => {
     value,
     id,
     editorClassName,
-    restoreFile: fileHandler.restore,
-    uploadFile: fileHandler.upload,
-    deleteFile: fileHandler.delete,
-    cancelUploadImage: fileHandler.cancel,
+    fileHandler,
     forwardedRef,
     extensions: LiteTextEditorExtensions(onEnterKeyPress),
     mentionHandler,

packages/editor/rich-text-editor/src/ui/extensions/enter-key-extension.tsx

@@ -0,0 +1,25 @@
+import { Extension } from "@tiptap/core";
+
+export const EnterKeyExtension = (onEnterKeyPress?: () => void) =>
+  Extension.create({
+    name: "enterKey",
+
+    addKeyboardShortcuts(this) {
+      return {
+        Enter: () => {
+          if (onEnterKeyPress) {
+            onEnterKeyPress();
+          }
+          return true;
+        },
+        "Shift-Enter": ({ editor }) =>
+          editor.commands.first(({ commands }) => [
+            () => commands.newlineInCode(),
+            () => commands.splitListItem("listItem"),
+            () => commands.createParagraphNear(),
+            () => commands.liftEmptyBlock(),
+            () => commands.splitBlock(),
+          ]),
+      };
+    },
+  });

packages/editor/rich-text-editor/src/ui/extensions/index.tsx

@@ -1,13 +1,21 @@
 import { UploadImage } from "@plane/editor-core";
 import { DragAndDrop, SlashCommand } from "@plane/editor-extensions";
+import { EnterKeyExtension } from "./enter-key-extension";
 
 type TArguments = {
   uploadFile: UploadImage;
   dragDropEnabled?: boolean;
   setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void;
+  onEnterKeyPress?: () => void;
 };
 
-export const RichTextEditorExtensions = ({ uploadFile, dragDropEnabled, setHideDragHandle }: TArguments) => [
+export const RichTextEditorExtensions = ({
+  uploadFile,
+  dragDropEnabled,
+  setHideDragHandle,
+  onEnterKeyPress,
+}: TArguments) => [
   SlashCommand(uploadFile),
   dragDropEnabled === true && DragAndDrop(setHideDragHandle),
+  EnterKeyExtension(onEnterKeyPress),
 ];

packages/editor/rich-text-editor/src/ui/index.tsx

@@ -1,30 +1,26 @@
 "use client";
+import * as React from "react";
+// editor-core
 import {
-  DeleteImage,
   EditorContainer,
   EditorContentWrapper,
   getEditorClassNames,
   IMentionHighlight,
   IMentionSuggestion,
-  RestoreImage,
-  UploadImage,
   useEditor,
   EditorRefApi,
+  TFileHandler,
 } from "@plane/editor-core";
-import * as React from "react";
+// extensions
 import { RichTextEditorExtensions } from "src/ui/extensions";
+// components
 import { EditorBubbleMenu } from "src/ui/menus/bubble-menu";
 
 export type IRichTextEditor = {
   initialValue: string;
   value?: string | null;
   dragDropEnabled?: boolean;
-  fileHandler: {
-    cancel: () => void;
-    delete: DeleteImage;
-    upload: UploadImage;
-    restore: RestoreImage;
-  };
+  fileHandler: TFileHandler;
   id?: string;
   containerClassName?: string;
   editorClassName?: string;
@@ -37,6 +33,7 @@ export type IRichTextEditor = {
   };
   placeholder?: string | ((isFocused: boolean, value: string) => string);
   tabIndex?: number;
+  onEnterKeyPress?: (e?: any) => void;
 };
 
 const RichTextEditor = (props: IRichTextEditor) => {
@@ -54,6 +51,7 @@ const RichTextEditor = (props: IRichTextEditor) => {
     placeholder,
     tabIndex,
     mentionHandler,
+    onEnterKeyPress,
   } = props;
 
   const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = React.useState<() => void>(() => {});
@@ -67,10 +65,7 @@ const RichTextEditor = (props: IRichTextEditor) => {
   const editor = useEditor({
     id,
     editorClassName,
-    restoreFile: fileHandler.restore,
-    uploadFile: fileHandler.upload,
-    deleteFile: fileHandler.delete,
-    cancelUploadImage: fileHandler.cancel,
+    fileHandler,
     onChange,
     initialValue,
     value,
@@ -80,6 +75,7 @@ const RichTextEditor = (props: IRichTextEditor) => {
       uploadFile: fileHandler.upload,
       dragDropEnabled,
       setHideDragHandle: setHideDragHandleFunction,
+      onEnterKeyPress,
     }),
     tabIndex,
     mentionHandler,

packages/ui/src/icons/index.ts

@@ -19,4 +19,3 @@ export * from "./priority-icon";
 export * from "./related-icon";
 export * from "./side-panel-icon";
 export * from "./transfer-icon";
-export * from "./user-group-icon";

packages/ui/src/icons/user-group-icon.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-
-import { ISvgIcons } from "./type";
-
-export const UserGroupIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M18 19C18 17.4087 17.3679 15.8826 16.2426 14.7574C15.1174 13.6321 13.5913 13 12 13C10.4087 13 8.88258 13.6321 7.75736 14.7574C6.63214 15.8826 6 17.4087 6 19"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M12 13C14.2091 13 16 11.2091 16 9C16 6.79086 14.2091 5 12 5C9.79086 5 8 6.79086 8 9C8 11.2091 9.79086 13 12 13Z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M23 18C23 16.636 22.4732 15.3279 21.5355 14.3635C20.5979 13.399 19.3261 12.8571 18 12.8571C18.8841 12.8571 19.7319 12.4959 20.357 11.8529C20.9821 11.21 21.3333 10.3379 21.3333 9.42857C21.3333 8.51926 20.9821 7.64719 20.357 7.00421C19.7319 6.36122 18.8841 6 18 6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M1 18C1 16.636 1.52678 15.3279 2.46447 14.3635C3.40215 13.399 4.67392 12.8571 6 12.8571C5.11595 12.8571 4.2681 12.4959 3.64298 11.8529C3.01786 11.21 2.66667 10.3379 2.66667 9.42857C2.66667 8.51926 3.01786 7.64719 3.64298 7.00421C4.2681 6.36122 5.11595 6 6 6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);

turbo.json

@@ -8,7 +8,6 @@
     "NEXT_PUBLIC_SPACE_BASE_URL",
     "NEXT_PUBLIC_SPACE_BASE_PATH",
     "NEXT_PUBLIC_WEB_BASE_URL",
-    "NEXT_PUBLIC_TRACK_EVENTS",
     "NEXT_PUBLIC_PLAUSIBLE_DOMAIN",
     "NEXT_PUBLIC_CRISP_ID",
     "NEXT_PUBLIC_ENABLE_SESSION_RECORDER",

web/components/analytics/project-modal/main-content.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 import { ICycle, IModule, IProject } from "@plane/types";
@@ -20,20 +20,21 @@ export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props
 
   return (
     <Tab.Group as={React.Fragment}>
-      <Tab.List as="div" className="flex space-x-2 border-b border-custom-border-200 px-0 md:px-5 py-0 md:py-3">
+      <Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200 px-0 md:px-3">
         {ANALYTICS_TABS.map((tab) => (
-          <Tab
-            key={tab.key}
-            className={({ selected }) =>
-              `rounded-0 w-full md:w-max md:rounded-3xl border-b md:border border-custom-border-200 focus:outline-none px-0 md:px-4 py-2 text-xs hover:bg-custom-background-80 ${
-                selected
-                  ? "border-custom-primary-100 text-custom-primary-100 md:bg-custom-background-80 md:text-custom-text-200 md:border-custom-border-200"
-                  : "border-transparent"
-              }`
-            }
-            onClick={() => {}}
-          >
-            {tab.title}
+          <Tab key={tab.key} as={Fragment}>
+            {({ selected }) => (
+              <button
+                className={`text-sm group relative flex items-center gap-1 h-[50px] px-3 cursor-pointer transition-all font-medium outline-none  ${
+                  selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
+                }`}
+              >
+                {tab.title}
+                <div
+                  className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
+                />
+              </button>
+            )}
           </Tab>
         ))}
       </Tab.List>

web/components/command-palette/actions/issue-actions/actions-list.tsx

@@ -1,10 +1,10 @@
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
-import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2 } from "lucide-react";
+import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2, Users } from "lucide-react";
 import { TIssue } from "@plane/types";
 // hooks
-import { DoubleCircleIcon, UserGroupIcon, TOAST_TYPE, setToast } from "@plane/ui";
+import { DoubleCircleIcon, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { EIssuesStoreType } from "@/constants/issue";
 // helpers
@@ -115,7 +115,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
         className="focus:outline-none"
       >
         <div className="flex items-center gap-2 text-custom-text-200">
-          <UserGroupIcon className="h-3.5 w-3.5" />
+          <Users className="h-3.5 w-3.5" />
           Assign to...
         </div>
       </Command.Item>

web/components/core/activity.tsx

@@ -506,7 +506,7 @@ const activityDetails: {
   name: {
     message: (activity, showIssue) => (
       <>
-        set the name to <span className="break-all">{activity.new_value}</span>
+        set the title to <span className="break-all">{activity.new_value}</span>
         {showIssue && (
           <>
             {" "}

web/components/cycles/active-cycle/upcoming-cycles-list-item.tsx

@@ -2,7 +2,7 @@ import { useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { User2 } from "lucide-react";
+import { Users } from "lucide-react";
 // ui
 import { Avatar, AvatarGroup, setPromiseToast } from "@plane/ui";
 // components
@@ -112,9 +112,7 @@ export const UpcomingCycleListItem: React.FC<Props> = observer((props) => {
             })}
           </AvatarGroup>
         ) : (
-          <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-            <User2 className="h-4 w-4 text-custom-text-400" />
-          </span>
+          <Users className="h-4 w-4 text-custom-text-300" />
         )}
 
         <FavoriteStar

web/components/cycles/list/cycle-list-item-action.tsx

@@ -1,6 +1,6 @@
 import React, { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
-import { CalendarCheck2, CalendarClock, MoveRight, User2 } from "lucide-react";
+import { CalendarCheck2, CalendarClock, MoveRight, Users } from "lucide-react";
 // types
 import { ICycle, TCycleGroups } from "@plane/types";
 // ui
@@ -146,9 +146,7 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
               })}
             </AvatarGroup>
           ) : (
-            <span className="flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-              <User2 className="h-4 w-4 text-custom-text-400" />
-            </span>
+            <Users className="h-4 w-4 text-custom-text-300" />
           )}
         </div>
       </Tooltip>

web/components/cycles/sidebar.tsx

@@ -10,10 +10,10 @@ import {
   ChevronDown,
   LinkIcon,
   Trash2,
-  UserCircle2,
   AlertCircle,
   ChevronRight,
   CalendarClock,
+  SquareUser,
 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // types
@@ -432,7 +432,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
 
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
-              <UserCircle2 className="h-4 w-4" />
+              <SquareUser className="h-4 w-4" />
               <span className="text-base">Lead</span>
             </div>
             <div className="flex w-3/5 items-center rounded-sm">

web/components/dropdowns/member/avatar.tsx

@@ -1,16 +1,19 @@
 import { observer } from "mobx-react";
-// hooks
-import { Avatar, AvatarGroup, UserGroupIcon } from "@plane/ui";
-import { useMember } from "@/hooks/store";
+// icons
+import { LucideIcon, Users } from "lucide-react";
 // ui
+import { Avatar, AvatarGroup } from "@plane/ui";
+// hooks
+import { useMember } from "@/hooks/store";
 
 type AvatarProps = {
   showTooltip: boolean;
   userIds: string | string[] | null;
+  icon?: LucideIcon;
 };
 
 export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
-  const { showTooltip, userIds } = props;
+  const { showTooltip, userIds, icon: Icon } = props;
   // store hooks
   const { getUserDetails } = useMember();
 
@@ -33,5 +36,9 @@ export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
     }
   }
 
-  return <UserGroupIcon className="h-3 w-3 flex-shrink-0" />;
+  return Icon ? (
+    <Icon className="h-3 w-3 flex-shrink-0" />
+  ) : (
+    <Users className="h-3 w-3 flex-shrink-0" />
+  );
 });

web/components/dropdowns/member/index.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, LucideIcon } from "lucide-react";
 // headless ui
 import { Combobox } from "@headlessui/react";
 // helpers
@@ -19,6 +19,7 @@ import { MemberDropdownProps } from "./types";
 
 type Props = {
   projectId?: string;
+  icon?: LucideIcon;
   onClose?: () => void;
 } & MemberDropdownProps;
 
@@ -43,6 +44,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
     showTooltip = false,
     tabIndex,
     value,
+    icon,
   } = props;
   // states
   const [isOpen, setIsOpen] = useState(false);
@@ -115,7 +117,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
               showTooltip={showTooltip}
               variant={buttonVariant}
             >
-              {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} />}
+              {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} icon={icon} />}
               {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
                 <span className="flex-grow truncate text-xs leading-5">
                   {Array.isArray(value) && value.length > 0

web/components/headers/page-details.tsx

@@ -1,30 +1,26 @@
-import { FC } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { FileText } from "lucide-react";
-// hooks
 // ui
 import { Breadcrumbs, Button } from "@plane/ui";
-// helpers
-import { BreadcrumbLink } from "@/components/common";
 // components
+import { BreadcrumbLink } from "@/components/common";
 import { ProjectLogo } from "@/components/project";
-import { useCommandPalette, usePage, useProject } from "@/hooks/store";
+// hooks
+import { usePage, useProject } from "@/hooks/store";
+import { usePlatformOS } from "@/hooks/use-platform-os";
 
-export interface IPagesHeaderProps {
-  showButton?: boolean;
-}
-
-export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
-  const { showButton = false } = props;
+export const PageDetailsHeader = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, pageId } = router.query;
   // store hooks
-  const { toggleCreatePageModal } = useCommandPalette();
   const { currentProjectDetails } = useProject();
-
-  const { name } = usePage(pageId?.toString() ?? "");
+  const { isContentEditable, isSubmitting, name } = usePage(pageId?.toString() ?? "");
+  // use platform
+  const { platform } = usePlatformOS();
+  // derived values
+  const isMac = platform === "MacOS";
 
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
@@ -77,12 +73,24 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
           </Breadcrumbs>
         </div>
       </div>
-      {showButton && (
-        <div className="flex items-center gap-2">
-          <Button variant="primary" size="sm" onClick={() => toggleCreatePageModal(true)}>
-            Add Page
-          </Button>
-        </div>
+      {isContentEditable && (
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={() => {
+            // ctrl/cmd + s to save the changes
+            const event = new KeyboardEvent("keydown", {
+              key: "s",
+              ctrlKey: !isMac,
+              metaKey: isMac,
+            });
+            window.dispatchEvent(event);
+          }}
+          className="flex-shrink-0"
+          loading={isSubmitting === "submitting"}
+        >
+          {isSubmitting === "submitting" ? "Saving" : "Save changes"}
+        </Button>
       )}
     </div>
   );

web/components/inbox/content/issue-properties.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
-import { CalendarCheck2, CopyPlus, Signal, Tag } from "lucide-react";
+import { CalendarCheck2, CopyPlus, Signal, Tag, Users } from "lucide-react";
 import { TInboxDuplicateIssueDetails, TIssue } from "@plane/types";
-import { ControlLink, DoubleCircleIcon, Tooltip, UserGroupIcon } from "@plane/ui";
+import { ControlLink, DoubleCircleIcon, Tooltip } from "@plane/ui";
 // components
 import { DateDropdown, PriorityDropdown, MemberDropdown, StateDropdown } from "@/components/dropdowns";
 import { IssueLabel, TIssueOperations } from "@/components/issues";
@@ -64,7 +64,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
             {/* Assignee */}
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+                <Users className="h-4 w-4 flex-shrink-0" />
                 <span>Assignees</span>
               </div>
               <MemberDropdown

web/components/inbox/modals/create-edit-modal/create-root.tsx

@@ -42,6 +42,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
   const router = useRouter();
   // refs
   const descriptionEditorRef = useRef<EditorRefApi>(null);
+  const submitBtnRef = useRef<HTMLButtonElement | null>(null);
   // hooks
   const { captureIssueEvent } = useEventTracker();
   const { createInboxIssue } = useProjectInbox();
@@ -139,6 +140,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
             handleData={handleFormData}
             editorRef={descriptionEditorRef}
             containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
+            onEnterKeyPress={() => submitBtnRef?.current?.click()}
           />
           <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} />
         </div>
@@ -158,6 +160,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
           </Button>
           <Button
             variant="primary"
+            ref={submitBtnRef}
             size="sm"
             type="submit"
             loading={formSubmitting}

web/components/inbox/modals/create-edit-modal/edit-root.tsx

@@ -34,6 +34,7 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
   const router = useRouter();
   // refs
   const descriptionEditorRef = useRef<EditorRefApi>(null);
+  const submitBtnRef = useRef<HTMLButtonElement | null>(null);
   // store hooks
   const { captureIssueEvent } = useEventTracker();
   const { currentProjectDetails } = useProject();
@@ -148,6 +149,7 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
             handleData={handleFormData}
             editorRef={descriptionEditorRef}
             containerClassName="border-[0.5px] border-custom-border-200 py-3 min-h-[150px]"
+            onEnterKeyPress={() => submitBtnRef?.current?.click()}
           />
           <InboxIssueProperties projectId={projectId} data={formData} handleData={handleFormData} isVisible />
         </div>
@@ -160,6 +162,7 @@ export const InboxIssueEditRoot: FC<TInboxIssueEditRoot> = observer((props) => {
           variant="primary"
           size="sm"
           type="button"
+          ref={submitBtnRef}
           loading={formSubmitting}
           disabled={isTitleLengthMoreThan255Character}
           onClick={handleFormSubmit}

web/components/inbox/modals/create-edit-modal/issue-description.tsx

@@ -18,11 +18,13 @@ type TInboxIssueDescription = {
   data: Partial<TIssue>;
   handleData: (issueKey: keyof Partial<TIssue>, issueValue: Partial<TIssue>[keyof Partial<TIssue>]) => void;
   editorRef: RefObject<EditorRefApi>;
+  onEnterKeyPress?: (e?: any) => void;
 };
 
 // TODO: have to implement GPT Assistance
 export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props) => {
-  const { containerClassName, workspaceSlug, projectId, workspaceId, data, handleData, editorRef } = props;
+  const { containerClassName, workspaceSlug, projectId, workspaceId, data, handleData, editorRef, onEnterKeyPress } =
+    props;
   // hooks
   const { loader } = useProjectInbox();
 
@@ -44,6 +46,7 @@ export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props
       onChange={(_description: object, description_html: string) => handleData("description_html", description_html)}
       placeholder={getDescriptionPlaceholder}
       containerClassName={containerClassName}
+      onEnterKeyPress={onEnterKeyPress}
     />
   );
 });

web/components/integration/github/root.tsx

@@ -10,9 +10,9 @@ import useSWR, { mutate } from "swr";
 // react-hook-form
 // services
 // components
-import { ArrowLeft, Check, List, Settings, UploadCloud } from "lucide-react";
+import { ArrowLeft, Check, List, Settings, UploadCloud, Users } from "lucide-react";
 import { IGithubRepoCollaborator, IGithubServiceImportFormData } from "@plane/types";
-import { UserGroupIcon, TOAST_TYPE, setToast } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/ui";
 import {
   GithubImportConfigure,
   GithubImportData,
@@ -72,7 +72,7 @@ const integrationWorkflowData = [
   {
     title: "Users",
     key: "import-users",
-    icon: UserGroupIcon,
+    icon: Users,
   },
   {
     title: "Confirm",

web/components/integration/jira/root.tsx

@@ -5,12 +5,12 @@ import { useRouter } from "next/router";
 import { FormProvider, useForm } from "react-hook-form";
 import { mutate } from "swr";
 // icons
-import { ArrowLeft, Check, List, Settings } from "lucide-react";
+import { ArrowLeft, Check, List, Settings, Users } from "lucide-react";
 import { IJiraImporterForm } from "@plane/types";
 // services
 // fetch keys
 // components
-import { Button, UserGroupIcon } from "@plane/ui";
+import { Button } from "@plane/ui";
 import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
 // assets
 import { JiraImporterService } from "@/services/integrations";
@@ -44,7 +44,7 @@ const integrationWorkflowData: Array<{
   {
     title: "Users",
     key: "import-users",
-    icon: UserGroupIcon,
+    icon: Users,
   },
   {
     title: "Confirm",

web/components/issues/issue-detail/issue-activity/activity/actions/assignee.tsx

@@ -1,11 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
-// hooks
-import { UserGroupIcon } from "@plane/ui";
+// icons
+import { Users } from "lucide-react";
+// hooks;
 import { useIssueDetail } from "@/hooks/store";
 // components
 import { IssueActivityBlockComponent, IssueLink } from "./";
-// icons
 
 type TIssueAssigneeActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
@@ -21,7 +21,7 @@ export const IssueAssigneeActivity: FC<TIssueAssigneeActivity> = observer((props
   if (!activity) return <></>;
   return (
     <IssueActivityBlockComponent
-      icon={<UserGroupIcon className="h-4 w-4 flex-shrink-0" />}
+      icon={<Users className="h-3 w-3 flex-shrink-0" />}
       activityId={activityId}
       ends={ends}
     >

web/components/issues/issue-detail/sidebar.tsx

@@ -12,6 +12,7 @@ import {
   Tag,
   Trash2,
   Triangle,
+  Users,
   XCircle,
 } from "lucide-react";
 // hooks
@@ -24,7 +25,6 @@ import {
   RelatedIcon,
   TOAST_TYPE,
   Tooltip,
-  UserGroupIcon,
   setToast,
 } from "@plane/ui";
 import {
@@ -226,7 +226,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
 
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
-                <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+                <Users className="h-4 w-4 flex-shrink-0" />
                 <span>Assignees</span>
               </div>
               <MemberDropdown

web/components/issues/issue-layouts/empty-states/cycle.tsx

@@ -68,7 +68,6 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
     ? EmptyStateType.PROJECT_EMPTY_FILTER
     : EmptyStateType.PROJECT_CYCLE_NO_ISSUES;
   const additionalPath = isCompletedAndEmpty ? undefined : activeLayout ?? "list";
-  const emptyStateSize = isEmptyFilters ? "lg" : "sm";
 
   return (
     <>
@@ -84,7 +83,6 @@ export const CycleEmptyState: React.FC<Props> = observer((props) => {
         <EmptyState
           type={emptyStateType}
           additionalPath={additionalPath}
-          size={emptyStateSize}
           primaryButtonOnClick={
             !isCompletedAndEmpty && !isEmptyFilters
               ? () => {

web/components/issues/issue-layouts/empty-states/draft-issues.tsx

@@ -41,14 +41,12 @@ export const ProjectDraftEmptyState: React.FC = observer(() => {
   const emptyStateType =
     issueFilterCount > 0 ? EmptyStateType.PROJECT_DRAFT_EMPTY_FILTER : EmptyStateType.PROJECT_DRAFT_NO_ISSUES;
   const additionalPath = issueFilterCount > 0 ? activeLayout ?? "list" : undefined;
-  const emptyStateSize = issueFilterCount > 0 ? "lg" : "sm";
 
   return (
     <div className="relative h-full w-full overflow-y-auto">
       <EmptyState
         type={emptyStateType}
         additionalPath={additionalPath}
-        size={emptyStateSize}
         secondaryButtonOnClick={issueFilterCount > 0 ? handleClearAllFilters : undefined}
       />
     </div>

web/components/issues/issue-layouts/empty-states/project-issues.tsx

@@ -43,14 +43,12 @@ export const ProjectEmptyState: React.FC = observer(() => {
 
   const emptyStateType = issueFilterCount > 0 ? EmptyStateType.PROJECT_EMPTY_FILTER : EmptyStateType.PROJECT_NO_ISSUES;
   const additionalPath = issueFilterCount > 0 ? activeLayout ?? "list" : undefined;
-  const emptyStateSize = issueFilterCount > 0 ? "lg" : "sm";
 
   return (
     <div className="relative h-full w-full overflow-y-auto">
       <EmptyState
         type={emptyStateType}
         additionalPath={additionalPath}
-        size={emptyStateSize}
         primaryButtonOnClick={
           issueFilterCount > 0
             ? undefined

web/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -182,14 +182,14 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
   };
 
   const handleKanbanFilters = (toggle: "group_by" | "sub_group_by", value: string) => {
-    if (workspaceSlug && projectId) {
+    if (workspaceSlug) {
       let kanbanFilters = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || [];
       if (kanbanFilters.includes(value)) {
         kanbanFilters = kanbanFilters.filter((_value) => _value != value);
       } else {
         kanbanFilters.push(value);
       }
-      updateFilters(projectId.toString(), EIssueFilterType.KANBAN_FILTERS, {
+      updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, {
         [toggle]: kanbanFilters,
       });
     }

web/components/issues/issue-layouts/roots/all-issue-layout-root.tsx

@@ -154,12 +154,11 @@ export const AllIssueLayoutRoot: React.FC = observer(() => {
 
   return (
     <div className="relative flex h-full w-full flex-col overflow-hidden">
-      <div className="relative flex h-full w-full flex-col">
+      <div className="relative flex h-full w-full flex-col overflow-auto">
         <GlobalViewsAppliedFiltersRoot globalViewId={globalViewId} />
         {issueIds.length === 0 ? (
           <EmptyState
             type={emptyStateType as keyof typeof EMPTY_STATE_DETAILS}
-            size="sm"
             primaryButtonOnClick={
               (workspaceProjectIds ?? []).length > 0
                 ? currentView !== "custom-view" && currentView !== "subscribed"

web/components/issues/issue-modal/form.tsx

@@ -116,6 +116,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
   // refs
   const editorRef = useRef<EditorRefApi>(null);
+  const submitBtnRef = useRef<HTMLButtonElement | null>(null);
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -477,6 +478,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           onChange(description_html);
                           handleFormChange();
                         }}
+                        onEnterKeyPress={() => submitBtnRef?.current?.click()}
                         ref={editorRef}
                         tabIndex={getTabIndex("description_html")}
                         placeholder={getDescriptionPlaceholder}
@@ -777,6 +779,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
               variant="primary"
               type="submit"
               size="sm"
+              ref={submitBtnRef}
               loading={isSubmitting}
               tabIndex={isDraft ? getTabIndex("submit_button") : getTabIndex("draft_button")}
             >

web/components/issues/peek-overview/properties.tsx

@@ -10,10 +10,11 @@ import {
   XCircle,
   CalendarClock,
   CalendarCheck2,
+  Users,
 } from "lucide-react";
 // hooks
 // ui icons
-import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
+import { DiceIcon, DoubleCircleIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
 // components
 import {
   DateDropdown,
@@ -94,7 +95,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         {/* assignee */}
         <div className="flex w-full items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
-            <UserGroupIcon className="h-4 w-4 flex-shrink-0" />
+            <Users className="h-4 w-4 flex-shrink-0" />
             <span>Assignees</span>
           </div>
           <MemberDropdown

web/components/modules/module-card-item.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { CalendarCheck2, CalendarClock, Info, MoveRight, User2 } from "lucide-react";
+import { CalendarCheck2, CalendarClock, Info, MoveRight, SquareUser } from "lucide-react";
 // ui
 import { LayersIcon, Tooltip, setPromiseToast } from "@plane/ui";
 // components
@@ -188,9 +188,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                 </span>
               ) : (
                 <Tooltip tooltipContent="No lead">
-                  <span className="cursor-default flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-                    <User2 className="h-4 w-4 text-custom-text-400" />
-                  </span>
+                  <SquareUser className="h-4 w-4 mx-1 text-custom-text-300 " />
                 </Tooltip>
               )}
             </div>

web/components/modules/module-list-item-action.tsx

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 // icons
-import { CalendarCheck2, CalendarClock, MoveRight, User2 } from "lucide-react";
+import { CalendarCheck2, CalendarClock, MoveRight, SquareUser } from "lucide-react";
 // types
 import { IModule } from "@plane/types";
 // ui
@@ -140,9 +140,7 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
         </span>
       ) : (
         <Tooltip tooltipContent="No lead">
-          <span className="cursor-default flex h-5 w-5 items-end justify-center rounded-full border border-dashed border-custom-text-400 bg-custom-background-80">
-            <User2 className="h-4 w-4 text-custom-text-400" />
-          </span>
+          <SquareUser className="h-4 w-4 text-custom-text-300" />
         </Tooltip>
       )}
 

web/components/modules/sidebar.tsx

@@ -12,8 +12,9 @@ import {
   Info,
   LinkIcon,
   Plus,
+  SquareUser,
   Trash2,
-  UserCircle2,
+  Users,
 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { IIssueFilterOptions, ILinkDetails, IModule, ModuleLink } from "@plane/types";
@@ -24,7 +25,6 @@ import {
   LayersIcon,
   CustomSelect,
   ModuleStatusIcon,
-  UserGroupIcon,
   TOAST_TYPE,
   setToast,
   ArchiveIcon,
@@ -498,7 +498,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
         <div className="flex flex-col gap-5 pb-6 pt-2.5">
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
-              <UserCircle2 className="h-4 w-4" />
+              <SquareUser className="h-4 w-4" />
               <span className="text-base">Lead</span>
             </div>
             <Controller
@@ -516,6 +516,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                     buttonVariant="background-with-text"
                     placeholder="Lead"
                     disabled={!isEditingAllowed || isArchived}
+                    icon={SquareUser}
                   />
                 </div>
               )}
@@ -523,7 +524,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
           </div>
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
-              <UserGroupIcon className="h-4 w-4" />
+              <Users className="h-4 w-4" />
               <span className="text-base">Members</span>
             </div>
             <Controller

web/components/pages/editor/editor-body.tsx

@@ -1,8 +1,7 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
-import { Control, Controller } from "react-hook-form";
-// document editor
+// document-editor
 import {
   DocumentEditorWithRef,
   DocumentReadOnlyEditorWithRef,
@@ -11,15 +10,15 @@ import {
   IMarking,
 } from "@plane/document-editor";
 // types
-import { IUserLite, TPage } from "@plane/types";
+import { IUserLite } from "@plane/types";
 // components
 import { PageContentBrowser, PageContentLoader, PageEditorTitle } from "@/components/pages";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useMember, useMention, useUser, useWorkspace } from "@/hooks/store";
+import { usePageDescription } from "@/hooks/use-page-description";
 import { usePageFilters } from "@/hooks/use-page-filters";
-import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 // services
 import { FileService } from "@/services/file.service";
 // store
@@ -28,13 +27,10 @@ import { IPageStore } from "@/store/pages/page.store";
 const fileService = new FileService();
 
 type Props = {
-  control: Control<TPage, any>;
   editorRef: React.RefObject<EditorRefApi>;
   readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
-  swrPageDetails: TPage | undefined;
-  handleSubmit: () => void;
   markings: IMarking[];
-  pageStore: IPageStore;
+  page: IPageStore;
   sidePeekVisible: boolean;
   handleEditorReady: (value: boolean) => void;
   handleReadOnlyEditorReady: (value: boolean) => void;
@@ -43,15 +39,12 @@ type Props = {
 
 export const PageEditorBody: React.FC<Props> = observer((props) => {
   const {
-    control,
     handleReadOnlyEditorReady,
     handleEditorReady,
     editorRef,
     markings,
     readOnlyEditorRef,
-    handleSubmit,
-    pageStore,
-    swrPageDetails,
+    page,
     sidePeekVisible,
     updateMarkings,
   } = props;
@@ -67,11 +60,19 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
   } = useMember();
   // derived values
   const workspaceId = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "" : "";
-  const pageTitle = pageStore?.name ?? "";
-  const pageDescription = pageStore?.description_html;
-  const { description_html, isContentEditable, updateTitle, isSubmitting, setIsSubmitting } = pageStore;
+  const pageId = page?.id;
+  const pageTitle = page?.name ?? "";
+  const pageDescription = page?.description_html;
+  const { isContentEditable, updateTitle, setIsSubmitting } = page;
   const projectMemberIds = projectId ? getProjectMemberIds(projectId.toString()) : [];
   const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
+  // project-description
+  const { handleDescriptionChange, isDescriptionReady, pageDescriptionYJS } = usePageDescription({
+    editorRef,
+    page,
+    projectId,
+    workspaceSlug,
+  });
   // use-mention
   const { mentionHighlights, mentionSuggestions } = useMention({
     workspaceSlug: workspaceSlug?.toString() ?? "",
@@ -82,13 +83,11 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
   // page filters
   const { isFullWidth } = usePageFilters();
 
-  const { setShowAlert } = useReloadConfirmations(isSubmitting === "submitting");
-
   useEffect(() => {
-    updateMarkings(description_html ?? "<p></p>");
-  }, [description_html, updateMarkings]);
+    updateMarkings(pageDescription ?? "<p></p>");
+  }, [pageDescription, updateMarkings]);
 
-  if (pageDescription === undefined) return <PageContentLoader />;
+  if (pageId === undefined || !pageDescriptionYJS || !isDescriptionReady) return <PageContentLoader />;
 
   return (
     <div className="flex items-center h-full w-full overflow-y-auto">
@@ -122,35 +121,24 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
             />
           </div>
           {isContentEditable ? (
-            <Controller
-              name="description_html"
-              control={control}
-              render={({ field: { onChange } }) => (
-                <DocumentEditorWithRef
-                  fileHandler={{
-                    cancel: fileService.cancelUpload,
-                    delete: fileService.getDeleteImageFunction(workspaceId),
-                    restore: fileService.getRestoreImageFunction(workspaceId),
-                    upload: fileService.getUploadFileFunction(workspaceSlug as string, setIsSubmitting),
-                  }}
-                  handleEditorReady={handleEditorReady}
-                  initialValue={pageDescription ?? "<p></p>"}
-                  value={swrPageDetails?.description_html ?? "<p></p>"}
-                  ref={editorRef}
-                  containerClassName="p-0 pb-64"
-                  editorClassName="lg:px-10 pl-8"
-                  onChange={(_description_json, description_html) => {
-                    setIsSubmitting("submitting");
-                    setShowAlert(true);
-                    onChange(description_html);
-                    handleSubmit();
-                  }}
-                  mentionHandler={{
-                    highlights: mentionHighlights,
-                    suggestions: mentionSuggestions,
-                  }}
-                />
-              )}
+            <DocumentEditorWithRef
+              id={pageId}
+              fileHandler={{
+                cancel: fileService.cancelUpload,
+                delete: fileService.getDeleteImageFunction(workspaceId),
+                restore: fileService.getRestoreImageFunction(workspaceId),
+                upload: fileService.getUploadFileFunction(workspaceSlug as string, setIsSubmitting),
+              }}
+              handleEditorReady={handleEditorReady}
+              value={pageDescriptionYJS}
+              ref={editorRef}
+              containerClassName="p-0 pb-64"
+              editorClassName="pl-10"
+              onChange={handleDescriptionChange}
+              mentionHandler={{
+                highlights: mentionHighlights,
+                suggestions: mentionSuggestions,
+              }}
             />
           ) : (
             <DocumentReadOnlyEditorWithRef
@@ -158,7 +146,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
               initialValue={pageDescription ?? "<p></p>"}
               handleEditorReady={handleReadOnlyEditorReady}
               containerClassName="p-0 pb-64 border-none"
-              editorClassName="lg:px-10 pl-8"
+              editorClassName="pl-10"
               mentionHandler={{
                 highlights: mentionHighlights,
               }}

web/components/pages/editor/header/extra-options.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
-import { Lock, RefreshCw, Sparkle } from "lucide-react";
+import { Lock, Sparkle } from "lucide-react";
 // editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/document-editor";
 // ui
@@ -9,7 +9,6 @@ import { ArchiveIcon } from "@plane/ui";
 import { GptAssistantPopover } from "@/components/core";
 import { PageInfoPopover, PageOptionsDropdown } from "@/components/pages";
 // helpers
-import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -19,20 +18,19 @@ import { IPageStore } from "@/store/pages/page.store";
 type Props = {
   editorRef: React.RefObject<EditorRefApi>;
   handleDuplicatePage: () => void;
-  isSyncing: boolean;
-  pageStore: IPageStore;
+  page: IPageStore;
   projectId: string;
   readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
 };
 
 export const PageExtraOptions: React.FC<Props> = observer((props) => {
-  const { editorRef, handleDuplicatePage, isSyncing, pageStore, projectId, readOnlyEditorRef } = props;
+  const { editorRef, handleDuplicatePage, page, projectId, readOnlyEditorRef } = props;
   // states
   const [gptModalOpen, setGptModal] = useState(false);
   // store hooks
   const { config } = useInstance();
   // derived values
-  const { archived_at, isContentEditable, isSubmitting, is_locked } = pageStore;
+  const { archived_at, isContentEditable, is_locked } = page;
 
   const handleAiAssistance = async (response: string) => {
     if (!editorRef) return;
@@ -41,22 +39,6 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
 
   return (
     <div className="flex flex-grow items-center justify-end gap-3">
-      {isContentEditable && (
-        <div
-          className={cn("fade-in flex items-center gap-x-2 transition-all duration-300", {
-            "fade-out": isSubmitting === "saved",
-          })}
-        >
-          {isSubmitting === "submitting" && <RefreshCw className="h-4 w-4 stroke-custom-text-300" />}
-          <span className="text-sm text-custom-text-300">{isSubmitting === "submitting" ? "Saving..." : "Saved"}</span>
-        </div>
-      )}
-      {isSyncing && (
-        <div className="flex items-center gap-x-2">
-          <RefreshCw className="h-4 w-4 stroke-custom-text-300" />
-          <span className="text-sm text-custom-text-300">Syncing...</span>
-        </div>
-      )}
       {is_locked && (
         <div className="flex h-7 items-center gap-2 rounded-full bg-custom-background-80 px-3 py-0.5 text-xs font-medium text-custom-text-300">
           <Lock className="h-3 w-3" />
@@ -93,11 +75,11 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
           className="!min-w-[38rem]"
         />
       )}
-      <PageInfoPopover pageStore={pageStore} />
+      <PageInfoPopover page={page} />
       <PageOptionsDropdown
         editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
         handleDuplicatePage={handleDuplicatePage}
-        pageStore={pageStore}
+        page={page}
       />
     </div>
   );

web/components/pages/editor/header/info-popover.tsx

@@ -7,11 +7,11 @@ import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { IPageStore } from "@/store/pages/page.store";
 
 type Props = {
-  pageStore: IPageStore;
+  page: IPageStore;
 };
 
 export const PageInfoPopover: React.FC<Props> = (props) => {
-  const { pageStore } = props;
+  const { page } = props;
   // states
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
   // refs
@@ -22,7 +22,7 @@ export const PageInfoPopover: React.FC<Props> = (props) => {
     placement: "bottom-start",
   });
   // derived values
-  const { created_at, updated_at } = pageStore;
+  const { created_at, updated_at } = page;
 
   return (
     <div onMouseEnter={() => setIsPopoverOpen(true)} onMouseLeave={() => setIsPopoverOpen(false)}>

web/components/pages/editor/header/mobile-root.tsx

@@ -11,9 +11,8 @@ type Props = {
   editorRef: React.RefObject<EditorRefApi>;
   readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
   handleDuplicatePage: () => void;
-  isSyncing: boolean;
   markings: IMarking[];
-  pageStore: IPageStore;
+  page: IPageStore;
   projectId: string;
   sidePeekVisible: boolean;
   setSidePeekVisible: (sidePeekState: boolean) => void;
@@ -29,14 +28,13 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
     markings,
     readOnlyEditorReady,
     handleDuplicatePage,
-    isSyncing,
-    pageStore,
+    page,
     projectId,
     sidePeekVisible,
     setSidePeekVisible,
   } = props;
   // derived values
-  const { isContentEditable } = pageStore;
+  const { isContentEditable } = page;
   // page filters
   const { isFullWidth } = usePageFilters();
 
@@ -57,8 +55,7 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
         <PageExtraOptions
           editorRef={editorRef}
           handleDuplicatePage={handleDuplicatePage}
-          isSyncing={isSyncing}
-          pageStore={pageStore}
+          page={page}
           projectId={projectId}
           readOnlyEditorRef={readOnlyEditorRef}
         />

web/components/pages/editor/header/options-dropdown.tsx

@@ -16,11 +16,11 @@ import { IPageStore } from "@/store/pages/page.store";
 type Props = {
   editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
   handleDuplicatePage: () => void;
-  pageStore: IPageStore;
+  page: IPageStore;
 };
 
 export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
-  const { editorRef, handleDuplicatePage, pageStore } = props;
+  const { editorRef, handleDuplicatePage, page } = props;
   // store values
   const {
     archived_at,
@@ -33,7 +33,7 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
     canCurrentUserDuplicatePage,
     canCurrentUserLockPage,
     restore,
-  } = pageStore;
+  } = page;
   // store hooks
   const { workspaceSlug, projectId } = useAppRouter();
   // page filters

web/components/pages/editor/header/root.tsx

@@ -13,9 +13,8 @@ type Props = {
   editorRef: React.RefObject<EditorRefApi>;
   readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
   handleDuplicatePage: () => void;
-  isSyncing: boolean;
   markings: IMarking[];
-  pageStore: IPageStore;
+  page: IPageStore;
   projectId: string;
   sidePeekVisible: boolean;
   setSidePeekVisible: (sidePeekState: boolean) => void;
@@ -31,14 +30,13 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
     markings,
     readOnlyEditorReady,
     handleDuplicatePage,
-    isSyncing,
-    pageStore,
+    page,
     projectId,
     sidePeekVisible,
     setSidePeekVisible,
   } = props;
   // derived values
-  const { isContentEditable } = pageStore;
+  const { isContentEditable } = page;
   // page filters
   const { isFullWidth } = usePageFilters();
 
@@ -67,8 +65,7 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
         <PageExtraOptions
           editorRef={editorRef}
           handleDuplicatePage={handleDuplicatePage}
-          isSyncing={isSyncing}
-          pageStore={pageStore}
+          page={page}
           projectId={projectId}
           readOnlyEditorRef={readOnlyEditorRef}
         />
@@ -81,8 +78,7 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
           readOnlyEditorReady={readOnlyEditorReady}
           markings={markings}
           handleDuplicatePage={handleDuplicatePage}
-          isSyncing={isSyncing}
-          pageStore={pageStore}
+          page={page}
           projectId={projectId}
           sidePeekVisible={sidePeekVisible}
           setSidePeekVisible={setSidePeekVisible}

web/components/pages/editor/title.tsx

@@ -33,7 +33,6 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
       ) : (
         <>
           <TextArea
-            onChange={(e) => updateTitle(e.target.value)}
             className="w-full bg-custom-background text-[1.75rem] font-semibold outline-none p-0 border-none resize-none rounded-none"
             style={{
               lineHeight: "1.2",
@@ -46,6 +45,7 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
               }
             }}
             value={title}
+            onChange={(e) => updateTitle(e.target.value)}
             maxLength={255}
             onFocus={() => setIsLengthVisible(true)}
             onBlur={() => setIsLengthVisible(false)}

web/components/pages/index.ts

@@ -4,6 +4,5 @@ export * from "./header";
 export * from "./list";
 export * from "./loaders";
 export * from "./modals";
-export * from "./page-detail";
 export * from "./pages-list-main-content";
 export * from "./pages-list-view";

web/components/pages/loaders/page-content-loader.tsx

@@ -2,27 +2,116 @@
 import { Loader } from "@plane/ui";
 
 export const PageContentLoader = () => (
-  <div className="flex">
-    <div className="w-[5%]" />
-    <Loader className="flex-shrink-0 flex-grow">
-      <div className="mt-10 space-y-2">
-        <Loader.Item height="20px" />
-        <Loader.Item height="20px" width="80%" />
-        <Loader.Item height="20px" width="80%" />
+  <div className="relative w-full h-full flex flex-col">
+    {/* header */}
+    <div className="px-4 flex-shrink-0 relative flex items-center justify-between h-12 border-b border-custom-border-100">
+      {/* left options */}
+      <Loader className="flex-shrink-0 w-[280px]">
+        <Loader.Item width="26px" height="26px" />
+      </Loader>
+
+      {/* editor options */}
+      <div className="w-full relative flex items-center divide-x divide-custom-border-100">
+        <Loader className="relative flex items-center gap-1 pr-2">
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+        </Loader>
+        <Loader className="relative flex items-center gap-1 px-2">
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+        </Loader>
+        <Loader className="relative flex items-center gap-1 px-2">
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+        </Loader>
+        <Loader className="relative flex items-center gap-1 pl-2">
+          <Loader.Item width="26px" height="26px" />
+          <Loader.Item width="26px" height="26px" />
+        </Loader>
       </div>
-      <div className="mt-12 space-y-10">
-        {Array.from(Array(4)).map((i) => (
-          <div key={i}>
-            <Loader.Item height="25px" width="20%" />
-            <div className="mt-5 space-y-3">
-              <Loader.Item height="15px" width="40%" />
-              <Loader.Item height="15px" width="30%" />
-              <Loader.Item height="15px" width="35%" />
+
+      {/* right options */}
+      <Loader className="w-full relative flex justify-end items-center gap-1">
+        <Loader.Item width="60px" height="26px" />
+        <Loader.Item width="40px" height="26px" />
+        <Loader.Item width="26px" height="26px" />
+        <Loader.Item width="26px" height="26px" />
+      </Loader>
+    </div>
+
+    {/* content */}
+    <div className="px-4 w-full h-full overflow-hidden relative flex">
+      {/* table of content loader */}
+      <div className="flex-shrink-0 w-[280px] pr-5 py-5">
+        <Loader className="w-full space-y-4">
+          <Loader.Item width="100%" height="24px" />
+          <div className="space-y-2">
+            <Loader.Item width="60%" height="12px" />
+            <div className="ml-6 space-y-2">
+              <Loader.Item width="80%" height="12px" />
+              <Loader.Item width="100%" height="12px" />
+            </div>
+            <Loader.Item width="60%" height="12px" />
+            <div className="ml-6 space-y-2">
+              <Loader.Item width="80%" height="12px" />
+              <Loader.Item width="100%" height="12px" />
+            </div>
+            <Loader.Item width="100%" height="12px" />
+            <Loader.Item width="60%" height="12px" />
+            <div className="ml-6 space-y-2">
+              <Loader.Item width="80%" height="12px" />
+              <Loader.Item width="100%" height="12px" />
+            </div>
+            <Loader.Item width="80%" height="12px" />
+            <Loader.Item width="100%" height="12px" />
+          </div>
+        </Loader>
+      </div>
+
+      {/* editor loader */}
+      <div className="w-full h-full py-5">
+        <Loader className="relative space-y-4">
+          <Loader.Item width="50%" height="36px" />
+          <div className="space-y-2">
+            <div className="py-2">
+              <Loader.Item width="100%" height="36px" />
+            </div>
+            <Loader.Item width="80%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <Loader.Item width="30px" height="30px" />
+              <Loader.Item width="30%" height="22px" />
+            </div>
+            <div className="py-2">
+              <Loader.Item width="60%" height="36px" />
+            </div>
+            <Loader.Item width="70%" height="22px" />
+            <Loader.Item width="30%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <Loader.Item width="30px" height="30px" />
+              <Loader.Item width="30%" height="22px" />
+            </div>
+            <div className="py-2">
+              <Loader.Item width="50%" height="30px" />
+            </div>
+            <Loader.Item width="100%" height="22px" />
+            <div className="py-2">
+              <Loader.Item width="30%" height="30px" />
+            </div>
+            <Loader.Item width="30%" height="22px" />
+            <div className="relative flex items-center gap-2">
+              <div className="py-2">
+                <Loader.Item width="30px" height="30px" />
+              </div>
+              <Loader.Item width="30%" height="22px" />
             </div>
           </div>
-        ))}
+        </Loader>
       </div>
-    </Loader>
-    <div className="w-[5%]" />
+    </div>
   </div>
 );

web/components/pages/modals/delete-page-modal.tsx

@@ -23,11 +23,11 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
   // store hooks
   const { removePage } = useProjectPages(projectId);
   const { capturePageEvent } = useEventTracker();
-  const pageStore = usePage(pageId);
+  const page = usePage(pageId);
 
-  if (!pageStore) return null;
+  if (!page) return null;
 
-  const { name } = pageStore;
+  const { name } = page;
 
   const handleClose = () => {
     setIsDeleting(false);
@@ -41,7 +41,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
         capturePageEvent({
           eventName: PAGE_DELETED,
           payload: {
-            ...pageStore,
+            ...page,
             state: "SUCCESS",
           },
         });
@@ -56,7 +56,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
         capturePageEvent({
           eventName: PAGE_DELETED,
           payload: {
-            ...pageStore,
+            ...page,
             state: "FAILED",
           },
         });

web/components/pages/page-detail/index.ts

@@ -1,3 +0,0 @@
-export * from "./loader";
-
-export * from "./root";

web/components/pages/page-detail/loader.tsx

@@ -1,118 +0,0 @@
-import { FC } from "react";
-// components/ui
-import { Loader } from "@plane/ui";
-
-export const PageDetailRootLoader: FC = () => (
-  <div className=" relative w-full h-full flex flex-col">
-    {/* header */}
-    <div className="px-4 flex-shrink-0 relative flex items-center justify-between h-12 border-b border-custom-border-100">
-      {/* left options */}
-      <Loader className="flex-shrink-0 w-[280px]">
-        <Loader.Item width="26px" height="26px" />
-      </Loader>
-
-      {/* editor options */}
-      <div className="w-full relative flex items-center divide-x divide-custom-border-100">
-        <Loader className="relative flex items-center gap-1 pr-2">
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-        </Loader>
-        <Loader className="relative flex items-center gap-1 px-2">
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-        </Loader>
-        <Loader className="relative flex items-center gap-1 px-2">
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-        </Loader>
-        <Loader className="relative flex items-center gap-1 pl-2">
-          <Loader.Item width="26px" height="26px" />
-          <Loader.Item width="26px" height="26px" />
-        </Loader>
-      </div>
-
-      {/* right options */}
-      <Loader className="w-full relative flex justify-end items-center gap-1">
-        <Loader.Item width="60px" height="26px" />
-        <Loader.Item width="40px" height="26px" />
-        <Loader.Item width="26px" height="26px" />
-        <Loader.Item width="26px" height="26px" />
-      </Loader>
-    </div>
-
-    {/* content */}
-    <div className="px-4 w-full h-full overflow-hidden relative flex">
-      {/* table of content loader */}
-      <div className="flex-shrink-0 w-[280px] pr-5 py-5">
-        <Loader className="w-full space-y-4">
-          <Loader.Item width="100%" height="24px" />
-          <div className="space-y-2">
-            <Loader.Item width="60%" height="12px" />
-            <div className="ml-6 space-y-2">
-              <Loader.Item width="80%" height="12px" />
-              <Loader.Item width="100%" height="12px" />
-            </div>
-            <Loader.Item width="60%" height="12px" />
-            <div className="ml-6 space-y-2">
-              <Loader.Item width="80%" height="12px" />
-              <Loader.Item width="100%" height="12px" />
-            </div>
-            <Loader.Item width="100%" height="12px" />
-            <Loader.Item width="60%" height="12px" />
-            <div className="ml-6 space-y-2">
-              <Loader.Item width="80%" height="12px" />
-              <Loader.Item width="100%" height="12px" />
-            </div>
-            <Loader.Item width="80%" height="12px" />
-            <Loader.Item width="100%" height="12px" />
-          </div>
-        </Loader>
-      </div>
-
-      {/* editor loader */}
-      <div className="w-full h-full py-5">
-        <Loader className="relative space-y-4">
-          <Loader.Item width="50%" height="36px" />
-          <div className="space-y-2">
-            <div className="py-2">
-              <Loader.Item width="100%" height="36px" />
-            </div>
-            <Loader.Item width="80%" height="22px" />
-            <div className="relative flex items-center gap-2">
-              <Loader.Item width="30px" height="30px" />
-              <Loader.Item width="30%" height="22px" />
-            </div>
-            <div className="py-2">
-              <Loader.Item width="60%" height="36px" />
-            </div>
-            <Loader.Item width="70%" height="22px" />
-            <Loader.Item width="30%" height="22px" />
-            <div className="relative flex items-center gap-2">
-              <Loader.Item width="30px" height="30px" />
-              <Loader.Item width="30%" height="22px" />
-            </div>
-            <div className="py-2">
-              <Loader.Item width="50%" height="30px" />
-            </div>
-            <Loader.Item width="100%" height="22px" />
-            <div className="py-2">
-              <Loader.Item width="30%" height="30px" />
-            </div>
-            <Loader.Item width="30%" height="22px" />
-            <div className="relative flex items-center gap-2">
-              <div className="py-2">
-                <Loader.Item width="30px" height="30px" />
-              </div>
-              <Loader.Item width="30%" height="22px" />
-            </div>
-          </div>
-        </Loader>
-      </div>
-    </div>
-  </div>
-);

web/components/pages/page-detail/root.tsx

@@ -1,54 +0,0 @@
-import { FC, Fragment } from "react";
-import { observer } from "mobx-react-lite";
-// hooks
-import { PageHead } from "@/components/core";
-import { useProjectPages, usePage } from "@/hooks/store";
-// components
-import { PageDetailRootLoader } from "./";
-
-type TPageDetailRoot = {
-  projectId: string;
-  pageId: string;
-};
-
-export const PageDetailRoot: FC<TPageDetailRoot> = observer((props) => {
-  const { projectId, pageId } = props;
-  // hooks
-  const { loader } = useProjectPages(projectId);
-  const { id, name } = usePage(pageId);
-
-  if (loader === "init-loader") return <PageDetailRootLoader />;
-
-  if (!id) return <div className="">No page is available.</div>;
-
-  return (
-    <Fragment>
-      <PageHead title={name || "Pages"} />
-
-      <div className="relative w-full h-full flex flex-col">
-        <div className="flex-shrink-0 px-4 relative flex items-center justify-between h-12 border-b border-custom-border-100">
-          {/* header left container */}
-          <div className="flex-shrink-0 w-[280px]">Icon</div>
-          {/* header editor tool container */}
-          <div className="w-full relative hidden md:flex items-center divide-x divide-custom-border-100 ">
-            Editor keys
-          </div>
-          {/* header right operations container */}
-          <div className="w-full relative flex justify-end">right saved</div>
-        </div>
-
-        {/* editor container for small screens */}
-        <div className="px-4 h-12 relative flex md:hidden items-center border-b border-custom-border-100">
-          Editor keys
-        </div>
-
-        <div className="px-4 w-full h-full overflow-hidden relative flex">
-          {/* editor table of content content container */}
-          <div className="flex-shrink-0 w-[280px] pr-5 py-5">Table of content</div>
-          {/* editor container */}
-          <div className="w-full h-full py-5">Editor Container</div>
-        </div>
-      </div>
-    </Fragment>
-  );
-});

web/components/workspace/sidebar-dropdown.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { usePopper } from "react-popper";
 // icons
-import { Check, ChevronDown, CircleUserRound, LogOut, Mails, PlusSquare, Settings, UserCircle2 } from "lucide-react";
+import { Activity, Check, ChevronDown, LogOut, Mails, PlusSquare, Settings } from "lucide-react";
 // ui
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
 // types
@@ -27,7 +27,7 @@ const userLinks = (workspaceSlug: string, userId: string) => [
     key: "my_activity",
     name: "My activity",
     href: `/${workspaceSlug}/profile/${userId}`,
-    icon: CircleUserRound,
+    icon: Activity,
   },
   {
     key: "settings",
@@ -39,7 +39,7 @@ const userLinks = (workspaceSlug: string, userId: string) => [
 const profileLinks = (workspaceSlug: string, userId: string) => [
   {
     name: "My activity",
-    icon: UserCircle2,
+    icon: Activity,
     link: `/${workspaceSlug}/profile/${userId}`,
   },
   {

web/constants/spreadsheet.ts

@@ -1,7 +1,12 @@
 import { FC } from "react";
+// icons
+import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip, CalendarCheck2, CalendarClock, Users } from "lucide-react";
+// types
+import { IIssueDisplayProperties, TIssue, TIssueOrderByOptions } from "@plane/types";
+// ui
+import { LayersIcon, DoubleCircleIcon, DiceIcon, ContrastIcon } from "@plane/ui";
 import { ISvgIcons } from "@plane/ui/src/icons/type";
-import { CalendarDays, Link2, Signal, Tag, Triangle, Paperclip, CalendarCheck2, CalendarClock } from "lucide-react";
-import { LayersIcon, DoubleCircleIcon, UserGroupIcon, DiceIcon, ContrastIcon } from "@plane/ui";
+// components
 import {
   SpreadsheetAssigneeColumn,
   SpreadsheetAttachmentColumn,
@@ -18,7 +23,6 @@ import {
   SpreadsheetSubIssueColumn,
   SpreadsheetUpdatedOnColumn,
 } from "@/components/issues/issue-layouts/spreadsheet";
-import { IIssueDisplayProperties, TIssue, TIssueOrderByOptions } from "@plane/types";
 
 export const SPREADSHEET_PROPERTY_DETAILS: {
   [key: string]: {
@@ -42,7 +46,7 @@ export const SPREADSHEET_PROPERTY_DETAILS: {
     ascendingOrderTitle: "A",
     descendingOrderKey: "-assignees__first_name",
     descendingOrderTitle: "Z",
-    icon: UserGroupIcon,
+    icon: Users,
     Column: SpreadsheetAssigneeColumn,
   },
   created_on: {

web/hooks/use-page-description.ts

@@ -0,0 +1,153 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import useSWR from "swr";
+// editor
+import { applyUpdates, mergeUpdates, proseMirrorJSONToBinaryString } from "@plane/document-editor";
+import { EditorRefApi, generateJSONfromHTML } from "@plane/editor-core";
+// hooks
+import useReloadConfirmations from "@/hooks/use-reload-confirmation";
+// services
+import { PageService } from "@/services/page.service";
+import { IPageStore } from "@/store/pages/page.store";
+const pageService = new PageService();
+
+type Props = {
+  editorRef: React.RefObject<EditorRefApi>;
+  page: IPageStore;
+  projectId: string | string[] | undefined;
+  workspaceSlug: string | string[] | undefined;
+};
+
+const AUTO_SAVE_TIME = 10000;
+
+export const usePageDescription = (props: Props) => {
+  const { editorRef, page, projectId, workspaceSlug } = props;
+  // states
+  const [isDescriptionReady, setIsDescriptionReady] = useState(false);
+  const [descriptionUpdates, setDescriptionUpdates] = useState<Uint8Array[]>([]);
+  // derived values
+  const { isContentEditable, isSubmitting, updateDescription, setIsSubmitting } = page;
+  const pageDescription = page.description_html;
+  const pageId = page.id;
+
+  const { data: descriptionYJS, mutate: mutateDescriptionYJS } = useSWR(
+    workspaceSlug && projectId && pageId ? `PAGE_DESCRIPTION_${workspaceSlug}_${projectId}_${pageId}` : null,
+    workspaceSlug && projectId && pageId
+      ? () => pageService.fetchDescriptionYJS(workspaceSlug.toString(), projectId.toString(), pageId.toString())
+      : null,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      revalidateIfStale: false,
+    }
+  );
+  // description in Uint8Array format
+  const pageDescriptionYJS = useMemo(
+    () => (descriptionYJS ? new Uint8Array(descriptionYJS) : undefined),
+    [descriptionYJS]
+  );
+
+  // push the new updates to the updates array
+  const handleDescriptionChange = useCallback((updates: Uint8Array) => {
+    setDescriptionUpdates((prev) => [...prev, updates]);
+  }, []);
+
+  // if description_binary field is empty, convert description_html to yDoc and update the DB
+  // TODO: this is a one-time operation, and needs to be removed once all the pages are updated
+  useEffect(() => {
+    const changeHTMLToBinary = async () => {
+      if (!pageDescriptionYJS || !pageDescription) return;
+      if (pageDescriptionYJS.byteLength === 0) {
+        const { contentJSON, editorSchema } = generateJSONfromHTML(pageDescription ?? "<p></p>");
+        const yDocBinaryString = proseMirrorJSONToBinaryString(contentJSON, "default", editorSchema);
+        await updateDescription(yDocBinaryString, pageDescription ?? "<p></p>");
+        await mutateDescriptionYJS();
+        setIsDescriptionReady(true);
+      } else setIsDescriptionReady(true);
+    };
+    changeHTMLToBinary();
+  }, [mutateDescriptionYJS, pageDescription, pageDescriptionYJS, updateDescription]);
+
+  const handleSaveDescription = useCallback(async () => {
+    if (!isContentEditable) return;
+
+    const applyUpdatesAndSave = async (latestDescription: any, updates: Uint8Array) => {
+      if (!workspaceSlug || !projectId || !pageId || !latestDescription) return;
+      // convert description to Uint8Array
+      const descriptionArray = new Uint8Array(latestDescription);
+      // apply the updates to the description
+      const combinedBinaryString = applyUpdates(descriptionArray, updates);
+      // get the latest html content
+      const descriptionHTML = editorRef.current?.getHTML() ?? "<p></p>";
+      // make a request to update the descriptions
+      await updateDescription(combinedBinaryString, descriptionHTML).finally(() => setIsSubmitting("saved"));
+    };
+
+    try {
+      setIsSubmitting("submitting");
+      // fetch the latest description
+      const latestDescription = await mutateDescriptionYJS();
+      // return if there are no updates
+      if (descriptionUpdates.length <= 0) {
+        setIsSubmitting("saved");
+        return;
+      }
+      // merge the updates array into one single update
+      const mergedUpdates = mergeUpdates(descriptionUpdates);
+      await applyUpdatesAndSave(latestDescription, mergedUpdates);
+      // reset the updates array to empty
+      setDescriptionUpdates([]);
+    } catch (error) {
+      setIsSubmitting("saved");
+      throw error;
+    }
+  }, [
+    descriptionUpdates,
+    editorRef,
+    isContentEditable,
+    mutateDescriptionYJS,
+    pageId,
+    projectId,
+    setIsSubmitting,
+    updateDescription,
+    workspaceSlug,
+  ]);
+
+  // auto-save updates every 10 seconds
+  // handle ctrl/cmd + S to save the description
+  useEffect(() => {
+    const intervalId = setInterval(handleSaveDescription, AUTO_SAVE_TIME);
+
+    const handleSave = (e: KeyboardEvent) => {
+      const { ctrlKey, metaKey, key } = e;
+      const cmdClicked = ctrlKey || metaKey;
+
+      if (cmdClicked && key.toLowerCase() === "s") {
+        e.preventDefault();
+        e.stopPropagation();
+        handleSaveDescription();
+
+        // reset interval timer
+        clearInterval(intervalId);
+      }
+    };
+    window.addEventListener("keydown", handleSave);
+
+    return () => {
+      clearInterval(intervalId);
+      window.removeEventListener("keydown", handleSave);
+    };
+  }, [handleSaveDescription]);
+
+  // show a confirm dialog if there are any unsaved changes, or saving is going on
+  const { setShowAlert } = useReloadConfirmations(descriptionUpdates.length > 0 || isSubmitting === "submitting");
+  useEffect(() => {
+    if (descriptionUpdates.length > 0 || isSubmitting === "submitting") setShowAlert(true);
+    else setShowAlert(false);
+  }, [descriptionUpdates, isSubmitting, setShowAlert]);
+
+  return {
+    handleDescriptionChange,
+    isDescriptionReady,
+    pageDescriptionYJS,
+  };
+};

web/lib/posthog-provider.tsx

@@ -20,7 +20,7 @@ export interface IPosthogWrapper {
 }
 
 const PostHogProvider: FC<IPosthogWrapper> = (props) => {
-  const { children, user, workspaceRole, currentWorkspaceId, projectRole, posthogAPIKey, posthogHost } = props;
+  const { children, user, workspaceRole, currentWorkspaceId, projectRole } = props;
   // states
   const [lastWorkspaceId, setLastWorkspaceId] = useState(currentWorkspaceId);
   // router
@@ -42,15 +42,16 @@ const PostHogProvider: FC<IPosthogWrapper> = (props) => {
   }, [user, workspaceRole, projectRole]);
 
   useEffect(() => {
-    if (posthogAPIKey && (process.env.NEXT_PUBLIC_POSTHOG_HOST || posthogHost)) {
-      posthog.init(posthogAPIKey, {
-        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || posthogHost || "https://app.posthog.com",
+    if (process.env.NEXT_PUBLIC_POSTHOG_KEY && process.env.NEXT_PUBLIC_POSTHOG_HOST) {
+      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+        api_host: "/ingest",
+        ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
         debug: process.env.NEXT_PUBLIC_POSTHOG_DEBUG === "1", // Debug mode based on the environment variable
         autocapture: false,
         capture_pageview: false, // Disable automatic pageview capture, as we capture manually
       });
     }
-  }, [posthogAPIKey, posthogHost]);
+  }, []);
 
   useEffect(() => {
     // Join workspace group on workspace change

web/next.config.js

@@ -55,14 +55,15 @@ const nextConfig = {
     ];
   },
   async rewrites() {
+    const posthogHost = process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://app.posthog.com"
     const rewrites = [
       {
         source: "/ingest/static/:path*",
-        destination: "https://us-assets.i.posthog.com/static/:path*",
+        destination: `${posthogHost}/static/:path*`,
       },
       {
         source: "/ingest/:path*",
-        destination: "https://us.i.posthog.com/:path*",
+        destination: `${posthogHost}/:path*`,
       },
     ];
     if (process.env.NEXT_PUBLIC_ADMIN_BASE_URL || process.env.NEXT_PUBLIC_ADMIN_BASE_PATH) {

web/pages/[workspaceSlug]/analytics.tsx

@@ -34,23 +34,21 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
       {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
         <div className="flex h-full flex-col overflow-hidden bg-custom-background-100">
           <Tab.Group as={Fragment} defaultIndex={analytics_tab === "custom" ? 1 : 0}>
-            <Tab.List as="div" className="flex space-x-2 border-b border-custom-border-200 px-0 py-0 md:px-5 md:py-3">
+            <Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200 px-0 md:px-5">
               {ANALYTICS_TABS.map((tab) => (
-                <Tab
-                  key={tab.key}
-                  className={({ selected }) =>
-                    `rounded-0 w-full border-b border-custom-border-200 px-0 py-2 text-xs hover:bg-custom-background-80 focus:outline-none md:w-max md:rounded-3xl md:border md:px-4 ${
-                      selected
-                        ? "border-custom-primary-100 text-custom-primary-100 md:border-custom-border-200 md:bg-custom-background-80 md:text-custom-text-200"
-                        : "border-transparent"
-                    }`
-                  }
-                  onClick={() => {
-                    router.query.analytics_tab = tab.key;
-                    router.push(router);
-                  }}
-                >
-                  {tab.title}
+                <Tab key={tab.key} as={Fragment}>
+                  {({ selected }) => (
+                    <button
+                      className={`text-sm group relative flex items-center gap-1 h-[50px] px-3 cursor-pointer transition-all font-medium outline-none  ${
+                        selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
+                      }`}
+                    >
+                      {tab.title}
+                      <div
+                        className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
+                      />
+                    </button>
+                  )}
                 </Tab>
               ))}
             </Tab.List>

web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx

@@ -1,8 +1,7 @@
-import { ReactElement, useEffect, useRef, useState } from "react";
+import { ReactElement, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useForm } from "react-hook-form";
 import useSWR from "swr";
 // document-editor
 import { EditorRefApi, useEditorMarkings } from "@plane/document-editor";
@@ -38,38 +37,24 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
   const { workspaceSlug, projectId, pageId } = router.query;
   // store hooks
   const { createPage, getPageById } = useProjectPages(projectId?.toString() ?? "");
-  const pageStore = usePage(pageId?.toString() ?? "");
+  const page = usePage(pageId?.toString() ?? "");
+  const { description_html, id, name } = page;
   // editor markings hook
   const { markings, updateMarkings } = useEditorMarkings();
-  // form info
-  const { handleSubmit, getValues, control } = useForm<TPage>({
-    defaultValues: {
-      name: "",
-      description_html: "",
-    },
-  });
-
-  // fetching page details
-  const {
-    data: swrPageDetails,
-    isValidating,
-    error: pageDetailsError,
-  } = useSWR(pageId ? `PAGE_DETAILS_${pageId}` : null, pageId ? () => getPageById(pageId.toString()) : null, {
-    revalidateIfStale: false,
-    revalidateOnFocus: true,
-    revalidateOnReconnect: true,
-  });
-
-  useEffect(
-    () => () => {
-      if (pageStore.cleanup) pageStore.cleanup();
-    },
-    [pageStore]
+  // fetch page details
+  const { error: pageDetailsError } = useSWR(
+    pageId ? `PAGE_DETAILS_${pageId}` : null,
+    pageId ? () => getPageById(pageId.toString()) : null,
+    {
+      revalidateIfStale: false,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+    }
   );
 
-  if ((!pageStore || !pageStore.id) && !pageDetailsError)
+  if ((!page || !id) && !pageDetailsError)
     return (
-      <div className="h-full w-full grid place-items-center">
+      <div className="size-full grid place-items-center">
         <LogoSpinner />
       </div>
     );
@@ -90,28 +75,12 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
       </div>
     );
 
-  // we need to get the values of title and description from the page store but we don't have to subscribe to those values
-  const pageTitle = pageStore?.name;
-
   const handleCreatePage = async (payload: Partial<TPage>) => await createPage(payload);
 
-  const handleUpdatePage = async (formData: TPage) => {
-    let updatedDescription = formData.description_html;
-    if (!updatedDescription || updatedDescription.trim() === "") updatedDescription = "<p></p>";
-    pageStore.updateDescription(updatedDescription);
-  };
-
   const handleDuplicatePage = async () => {
-    const currentPageValues = getValues();
-
-    if (!currentPageValues?.description_html) {
-      // TODO: We need to get latest data the above variable will give us stale data
-      currentPageValues.description_html = pageStore.description_html;
-    }
-
     const formData: Partial<TPage> = {
-      name: "Copy of " + pageStore.name,
-      description_html: currentPageValues.description_html,
+      name: "Copy of " + name,
+      description_html: description_html ?? "<p></p>",
     };
 
     await handleCreatePage(formData)
@@ -127,7 +96,7 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
 
   return (
     <>
-      <PageHead title={pageTitle} />
+      <PageHead title={name} />
       <div className="flex h-full flex-col justify-between">
         <div className="h-full w-full flex-shrink-0 flex flex-col overflow-hidden">
           {projectId && (
@@ -137,24 +106,20 @@ const PageDetailsPage: NextPageWithLayout = observer(() => {
               editorReady={editorReady}
               readOnlyEditorReady={readOnlyEditorReady}
               handleDuplicatePage={handleDuplicatePage}
-              isSyncing={isValidating}
               markings={markings}
-              pageStore={pageStore}
+              page={page}
               projectId={projectId.toString()}
               sidePeekVisible={sidePeekVisible}
               setSidePeekVisible={(state) => setSidePeekVisible(state)}
             />
           )}
           <PageEditorBody
-            swrPageDetails={swrPageDetails}
-            control={control}
             editorRef={editorRef}
             handleEditorReady={(val) => setEditorReady(val)}
             readOnlyEditorRef={readOnlyEditorRef}
             handleReadOnlyEditorReady={() => setReadOnlyEditorReady(true)}
-            handleSubmit={() => handleSubmit(handleUpdatePage)()}
             markings={markings}
-            pageStore={pageStore}
+            page={page}
             sidePeekVisible={sidePeekVisible}
             updateMarkings={updateMarkings}
           />

web/pages/profile/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, ReactElement } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { ChevronDown, User2 } from "lucide-react";
+import { ChevronDown, CircleUserRound } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // services
 // hooks
@@ -172,7 +172,7 @@ const ProfileSettingsPage: NextPageWithLayout = observer(() => {
                         <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
                           {!watch("avatar") || watch("avatar") === "" ? (
                             <div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
-                              <User2 className="h-full w-full text-custom-text-200" />
+                              <CircleUserRound className="h-full w-full text-custom-text-200" />
                             </div>
                           ) : (
                             <div className="relative h-16 w-16 overflow-hidden">

web/services/api.service.ts

@@ -31,8 +31,11 @@ export abstract class APIService {
     );
   }
 
-  get(url: string, params = {}) {
-    return this.axiosInstance.get(url, params);
+  get(url: string, params = {}, config = {}) {
+    return this.axiosInstance.get(url, {
+      ...params,
+      ...config,
+    });
   }
 
   post(url: string, data = {}, config = {}) {

web/services/page.service.ts

@@ -119,4 +119,33 @@ export class PageService extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async fetchDescriptionYJS(workspaceSlug: string, projectId: string, pageId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/description/`, {
+      headers: {
+        "Content-Type": "application/octet-stream",
+      },
+      responseType: "arraybuffer",
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateDescriptionYJS(
+    workspaceSlug: string,
+    projectId: string,
+    pageId: string,
+    data: {
+      description_binary: string;
+      description_html: string;
+    }
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/description/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }

web/store/pages/page.store.ts

@@ -9,12 +9,11 @@ import { EUserProjectRoles } from "@/constants/project";
 import { PageService } from "@/services/page.service";
 import { RootStore } from "../root.store";
 
-export type TLoader = "submitting" | "submitted" | "saved" | undefined;
+export type TLoader = "submitting" | "submitted" | "saved";
 
 export interface IPageStore extends TPage {
   // observables
-  isSubmitting: "submitting" | "submitted" | "saved";
-  loader: TLoader;
+  isSubmitting: TLoader;
   // computed
   asJSON: TPage | undefined;
   isCurrentUserOwner: boolean; // it will give the user is the owner of the page or not
@@ -27,12 +26,12 @@ export interface IPageStore extends TPage {
   isContentEditable: boolean;
   // helpers
   oldName: string;
-  updateTitle: (name: string) => void;
-  updateDescription: (description: string) => void;
-  setIsSubmitting: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+  setIsSubmitting: (value: TLoader) => void;
   cleanup: () => void;
   // actions
   update: (pageData: Partial<TPage>) => Promise<TPage | undefined>;
+  updateTitle: (title: string) => void;
+  updateDescription: (binaryString: string, descriptionHTML: string) => Promise<void>;
   makePublic: () => Promise<void>;
   makePrivate: () => Promise<void>;
   lock: () => Promise<void>;
@@ -45,8 +44,7 @@ export interface IPageStore extends TPage {
 
 export class PageStore implements IPageStore {
   // loaders
-  isSubmitting: "submitting" | "submitted" | "saved" = "saved";
-  loader: TLoader = undefined;
+  isSubmitting: TLoader = "saved";
   // page properties
   id: string | undefined;
   name: string | undefined;
@@ -68,7 +66,7 @@ export class PageStore implements IPageStore {
   oldName: string = "";
   // reactions
   disposers: Array<() => void> = [];
-  // service
+  // services
   pageService: PageService;
 
   constructor(
@@ -96,7 +94,6 @@ export class PageStore implements IPageStore {
     makeObservable(this, {
       // loaders
       isSubmitting: observable.ref,
-      loader: observable.ref,
       // page properties
       id: observable.ref,
       name: observable.ref,
@@ -115,7 +112,9 @@ export class PageStore implements IPageStore {
       created_at: observable.ref,
       updated_at: observable.ref,
       // helpers
-      oldName: observable,
+      oldName: observable.ref,
+      setIsSubmitting: action,
+      cleanup: action,
       // computed
       asJSON: computed,
       isCurrentUserOwner: computed,
@@ -126,13 +125,10 @@ export class PageStore implements IPageStore {
       canCurrentUserArchivePage: computed,
       canCurrentUserDeletePage: computed,
       isContentEditable: computed,
-      // helper actions
-      updateTitle: action,
-      updateDescription: action.bound,
-      setIsSubmitting: action,
-      cleanup: action,
       // actions
       update: action,
+      updateTitle: action,
+      updateDescription: action,
       makePublic: action,
       makePrivate: action,
       lock: action,
@@ -169,27 +165,7 @@ export class PageStore implements IPageStore {
       { delay: 2000 }
     );
 
-    const descriptionDisposer = reaction(
-      () => this.description_html,
-      (description_html) => {
-        //TODO: Fix reaction to only run when the data is changed, not when the page is loaded
-        const { workspaceSlug, projectId } = this.store.router;
-        if (!workspaceSlug || !projectId || !this.id) return;
-        this.isSubmitting = "submitting";
-        this.pageService
-          .update(workspaceSlug, projectId, this.id, {
-            description_html,
-          })
-          .finally(() =>
-            runInAction(() => {
-              this.isSubmitting = "submitted";
-            })
-          );
-      },
-      { delay: 3000 }
-    );
-
-    this.disposers.push(titleDisposer, descriptionDisposer);
+    this.disposers.push(titleDisposer);
   }
 
   // computed
@@ -284,24 +260,21 @@ export class PageStore implements IPageStore {
     );
   }
 
-  updateTitle = action("updateTitle", (name: string) => {
-    this.oldName = this.name ?? "";
-    this.name = name;
-  });
+  /**
+   * @description update the submitting state
+   * @param value
+   */
+  setIsSubmitting = (value: TLoader) => {
+    runInAction(() => {
+      this.isSubmitting = value;
+    });
+  };
 
-  updateDescription = action("updateDescription", (description_html: string) => {
-    this.description_html = description_html;
-  });
-
-  setIsSubmitting = action("setIsSubmitting", (isSubmitting: "submitting" | "submitted" | "saved") => {
-    this.isSubmitting = isSubmitting;
-  });
-
-  cleanup = action("cleanup", () => {
+  cleanup = () => {
     this.disposers.forEach((disposer) => {
       disposer();
     });
-  });
+  };
 
   /**
    * @description update the page
@@ -313,14 +286,14 @@ export class PageStore implements IPageStore {
 
     const currentPage = this.asJSON;
     try {
-      const currentPageResponse = await this.pageService.update(workspaceSlug, projectId, this.id, currentPage);
-      if (currentPageResponse)
-        runInAction(() => {
-          Object.keys(pageData).forEach((key) => {
-            const currentPageKey = key as keyof TPage;
-            set(this, key, currentPageResponse?.[currentPageKey] || undefined);
-          });
+      runInAction(() => {
+        Object.keys(pageData).forEach((key) => {
+          const currentPageKey = key as keyof TPage;
+          set(this, key, pageData[currentPageKey] || undefined);
         });
+      });
+
+      await this.pageService.update(workspaceSlug, projectId, this.id, currentPage);
     } catch (error) {
       runInAction(() => {
         Object.keys(pageData).forEach((key) => {
@@ -332,6 +305,42 @@ export class PageStore implements IPageStore {
     }
   };
 
+  /**
+   * @description update the page title
+   * @param title
+   */
+  updateTitle = (title: string) => {
+    this.oldName = this.name ?? "";
+    this.name = title;
+  };
+
+  /**
+   * @description update the page description
+   * @param {string} binaryString
+   * @param {string} descriptionHTML
+   */
+  updateDescription = async (binaryString: string, descriptionHTML: string) => {
+    const { workspaceSlug, projectId } = this.store.router;
+    if (!workspaceSlug || !projectId || !this.id) return undefined;
+
+    const currentDescription = this.description_html;
+    runInAction(() => {
+      this.description_html = descriptionHTML;
+    });
+
+    try {
+      await this.pageService.updateDescriptionYJS(workspaceSlug, projectId, this.id, {
+        description_binary: binaryString,
+        description_html: descriptionHTML,
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.description_html = currentDescription;
+      });
+      throw error;
+    }
+  };
+
   /**
    * @description make the page public
    */

yarn.lock

@@ -2698,61 +2698,61 @@
   dependencies:
     "@daybrush/utils" "^1.4.0"
 
-"@sentry-internal/browser-utils@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/browser-utils/-/browser-utils-8.4.0.tgz#5b108878e93713757d75e7e8ae7780297d36ad17"
-  integrity sha512-Mfm3TK3KUlghhuKM3rjTeD4D5kAiB7iVNFoaDJIJBVKa67M9BvlNTnNJMDi7+9rV4RuLQYxXn0p5HEZJFYp3Zw==
+"@sentry-internal/browser-utils@8.5.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/browser-utils/-/browser-utils-8.5.0.tgz#9eaca49d5e458f8591c771675f42549b1db10521"
+  integrity sha512-R2h4JssvmY/mnq3iW49Oxas9BJ8CPR7yP88lCHiCHtwH/gHxemgCtq/NY1ptA0t45Eae+4ILU0ppOsJcDg9VBw==
   dependencies:
-    "@sentry/core" "8.4.0"
-    "@sentry/types" "8.4.0"
-    "@sentry/utils" "8.4.0"
+    "@sentry/core" "8.5.0"
+    "@sentry/types" "8.5.0"
+    "@sentry/utils" "8.5.0"
 
-"@sentry-internal/feedback@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-8.4.0.tgz#81067dadda249b354b72f5adba20374dea43fdf4"
-  integrity sha512-1/WshI2X9seZAQXrOiv6/LU08fbSSvJU0b1ZWMhn+onb/FWPomsL/UN0WufCYA65S5JZGdaWC8fUcJxWC8PATQ==
+"@sentry-internal/feedback@8.5.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-8.5.0.tgz#715e18ba724d5db7638dc46c8cefe9efc181d39c"
+  integrity sha512-GTLIfRKx2Ye0pIxhVUSxxwPbQfiSNhXpQMnSrSYHDo1KHLgbgZ4MaX2Qnx+CZN6mXDVVrtk1sqTR83ytFCwRcw==
   dependencies:
-    "@sentry/core" "8.4.0"
-    "@sentry/types" "8.4.0"
-    "@sentry/utils" "8.4.0"
+    "@sentry/core" "8.5.0"
+    "@sentry/types" "8.5.0"
+    "@sentry/utils" "8.5.0"
 
-"@sentry-internal/replay-canvas@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/replay-canvas/-/replay-canvas-8.4.0.tgz#cf5e903d8935ba6b60a5027d0055902987353920"
-  integrity sha512-g+U4IPQdODCg7fQQVNvH6ix05Tl1mOQXXRexgtp+tXdys4sHQSBUYraJYZy+mY3OGnLRgKFqELM0fnffJSpuyQ==
+"@sentry-internal/replay-canvas@8.5.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/replay-canvas/-/replay-canvas-8.5.0.tgz#ad0ed761a2564177483d5675ac875407f7f456b7"
+  integrity sha512-BOwoUjRHQ0OUsUwHiBhXtkvJXe+9LlB9cb8KmhcHdfqajp4L10aN+4OC8UTSbCX832Ph/K6nu5gelK4wAI9NVw==
   dependencies:
-    "@sentry-internal/replay" "8.4.0"
-    "@sentry/core" "8.4.0"
-    "@sentry/types" "8.4.0"
-    "@sentry/utils" "8.4.0"
+    "@sentry-internal/replay" "8.5.0"
+    "@sentry/core" "8.5.0"
+    "@sentry/types" "8.5.0"
+    "@sentry/utils" "8.5.0"
 
-"@sentry-internal/replay@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/replay/-/replay-8.4.0.tgz#8fc4a6bf1d5f480fcde2d56cd75042953e44efda"
-  integrity sha512-RSzQwCF/QTi5/5XAuj0VJImAhu4MheeHYvAbr/PuMSF4o1j89gBA7e3boA4u8633IqUeu5w3S5sb6jVrKaVifg==
+"@sentry-internal/replay@8.5.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/replay/-/replay-8.5.0.tgz#aa8f1675893973c751a955f806545a5987b7dd1b"
+  integrity sha512-eluGqUjuSZKqe3dqqBvMkh3HJ9aPxXOT0i3ydUHoV9XWA7oeUfWk6gIqMm7WLTHagOGYp3v4KTOYdzu4QS6OMA==
   dependencies:
-    "@sentry-internal/browser-utils" "8.4.0"
-    "@sentry/core" "8.4.0"
-    "@sentry/types" "8.4.0"
-    "@sentry/utils" "8.4.0"
+    "@sentry-internal/browser-utils" "8.5.0"
+    "@sentry/core" "8.5.0"
+    "@sentry/types" "8.5.0"
+    "@sentry/utils" "8.5.0"
 
 "@sentry/babel-plugin-component-annotate@2.16.0":
   version "2.16.0"
   resolved "https://registry.yarnpkg.com/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.16.0.tgz#c831713b85516fb3f9da2985836ddf444dc634e6"
   integrity sha512-+uy1qPkA5MSNgJ0L9ur/vNTydfdHwHnBX2RQ+0thsvkqf90fU788YjkkXwUiBBNuqNyI69JiOW6frixAWy7oUg==
 
-"@sentry/browser@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-8.4.0.tgz#f4aa381eab212432d71366884693a36c2e3a1675"
-  integrity sha512-hmXeIZBdN0A6yCuoMTcigGxLl42nbeb205fXtouwE7Maa0qM2HM+Ijq0sHzbhxR3zU0JXDtcJh1k6wtJOREJ3g==
+"@sentry/browser@8.5.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-8.5.0.tgz#048a755913fbd54ce11d2ab4bca6197978095345"
+  integrity sha512-rxthVdwkkGqArQLM+/O8y0J4oe/J5MLE7WzzRkzSJWLdt6cJMrrb43sKGQf2IQSg6kf1se+qKmpRly5uEOf8OA==
   dependencies:
-    "@sentry-internal/browser-utils" "8.4.0"
-    "@sentry-internal/feedback" "8.4.0"
-    "@sentry-internal/replay" "8.4.0"
-    "@sentry-internal/replay-canvas" "8.4.0"
-    "@sentry/core" "8.4.0"
-    "@sentry/types" "8.4.0"
-    "@sentry/utils" "8.4.0"
+    "@sentry-internal/browser-utils" "8.5.0"
+    "@sentry-internal/feedback" "8.5.0"
+    "@sentry-internal/replay" "8.5.0"
+    "@sentry-internal/replay-canvas" "8.5.0"
+    "@sentry/core" "8.5.0"
+    "@sentry/types" "8.5.0"
+    "@sentry/utils" "8.5.0"
 
 "@sentry/bundler-plugin-core@2.16.0":
   version "2.16.0"
@@ -2768,45 +2768,45 @@
     magic-string "0.27.0"
     unplugin "1.0.1"
 
-"@sentry/cli-darwin@2.31.2":
-  version "2.31.2"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-darwin/-/cli-darwin-2.31.2.tgz#faeb87d09d8b21b8b8dd2e2aa848b538f01ddd26"
-  integrity sha512-BHA/JJXj1dlnoZQdK4efRCtHRnbBfzbIZUKAze7oRR1RfNqERI84BVUQeKateD3jWSJXQfEuclIShc61KOpbKw==
+"@sentry/cli-darwin@2.32.0":
+  version "2.32.0"
+  resolved "https://registry.yarnpkg.com/@sentry/cli-darwin/-/cli-darwin-2.32.0.tgz#3dcceb0c54587117cdffac3385b9d1a6e5e5e5e8"
+  integrity sha512-XXk3mlDVmltSnGdm4J6cIp92DNCOl6MHnipXmhHh6Ty97M92I3OvXDJsIl8nRTsXYkziMkYNQ4TFudnoxWlPuQ==
 
-"@sentry/cli-linux-arm64@2.31.2":
-  version "2.31.2"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.31.2.tgz#669c9c3f7f9130d26f5db732f793378863d58869"
-  integrity sha512-FLVKkJ/rWvPy/ka7OrUdRW63a/z8HYI1Gt8Pr6rWs50hb7YJja8lM8IO10tYmcFE/tODICsnHO9HTeUg2g2d1w==
+"@sentry/cli-linux-arm64@2.32.0":
+  version "2.32.0"
+  resolved "https://registry.yarnpkg.com/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.32.0.tgz#a4d091a6caabcd06bad08ffb75950f82b7eeb2fc"
+  integrity sha512-y/5r4+KJ0Df1g0OpimtOUKwzm52pDfXvPj3m4VpwZ9LO1VSLdjLbgcKEh+hM3Wrdb55yVvOr0tQlQp5TQXpf2A==
 
-"@sentry/cli-linux-arm@2.31.2":
-  version "2.31.2"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-linux-arm/-/cli-linux-arm-2.31.2.tgz#3e36ed7db09e922f00221281252e58dfd8755ea5"
-  integrity sha512-W8k5mGYYZz/I/OxZH65YAK7dCkQAl+wbuoASGOQjUy5VDgqH0QJ8kGJufXvFPM+f3ZQGcKAnVsZ6tFqZXETBAw==
+"@sentry/cli-linux-arm@2.32.0":
+  version "2.32.0"
+  resolved "https://registry.yarnpkg.com/@sentry/cli-linux-arm/-/cli-linux-arm-2.32.0.tgz#f383d4f9276e60e8486efa2ca4aca54a18d3f866"
+  integrity sha512-mZy7/Bz7YgTZbgLk4ebKwkxfLS5/Fzperob2/pideU2Vm9PSqi0pEFMwcnjVC45BK5nSdO1NnfgEysCbVFScAw==
 
-"@sentry/cli-linux-i686@2.31.2":
-  version "2.31.2"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-linux-i686/-/cli-linux-i686-2.31.2.tgz#02b7da274369b78a5676c20bb26cc37caed5244b"
-  integrity sha512-A64QtzaPi3MYFpZ+Fwmi0mrSyXgeLJ0cWr4jdeTGrzNpeowSteKgd6tRKU+LVq0k5shKE7wdnHk+jXnoajulMA==
+"@sentry/cli-linux-i686@2.32.0":
+  version "2.32.0"
+  resolved "https://registry.yarnpkg.com/@sentry/cli-linux-i686/-/cli-linux-i686-2.32.0.tgz#54894800f6b913025d39582bc1954443411a3ebf"
+  integrity sha512-jfB5OiKL/B5lQLIlNrXZMIeh+xIVJg/sWuqlFniIeiFTAXFecrwFzjV45IgNRzrJqcAwjmKZht5lY2EqmQgMrQ==
 
-"@sentry/cli-linux-x64@2.31.2":
-  version "2.31.2"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-linux-x64/-/cli-linux-x64-2.31.2.tgz#54f74a9e5925db9ddafebc0efd4056c5377be5fd"
-  integrity sha512-YL/r+15R4mOEiU3mzn7iFQOeFEUB6KxeKGTTrtpeOGynVUGIdq4nV5rHow5JDbIzOuBS3SpOmcIMluvo1NCh0g==
+"@sentry/cli-linux-x64@2.32.0":
+  version "2.32.0"
+  resolved "https://registry.yarnpkg.com/@sentry/cli-linux-x64/-/cli-linux-x64-2.32.0.tgz#efafcd5e63afa80730964d50baa2896a45e09898"
+  integrity sha512-Fxy6jDYacApqsqPCr9dgCGs/ihR2UW9M7XWmw+RQSEKOYP5c8+6mjs4RWMylmnHZQIrWePAQKAozqgznw0Ux2w==
 
-"@sentry/cli-win32-i686@2.31.2":
-  version "2.31.2"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-win32-i686/-/cli-win32-i686-2.31.2.tgz#5dab845a824be0927566171aa05f015e887fe82d"
-  integrity sha512-Az/2bmW+TFI059RE0mSBIxTBcoShIclz7BDebmIoCkZ+retrwAzpmBnBCDAHow+Yi43utOow+3/4idGa2OxcLw==
+"@sentry/cli-win32-i686@2.32.0":
+  version "2.32.0"
+  resolved "https://registry.yarnpkg.com/@sentry/cli-win32-i686/-/cli-win32-i686-2.32.0.tgz#80371864a96bb4e9700e9032a1469d0a47d0fe93"
+  integrity sha512-fbjA35jcEWTMarX8LyUkTt6nSeehIeLvGWdRcBM/z6EPFr8gPQpYvceBJj5s37Yg0/IaVhWhKIs2mgwOQ52y+A==
 
-"@sentry/cli-win32-x64@2.31.2":
-  version "2.31.2"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-win32-x64/-/cli-win32-x64-2.31.2.tgz#e12fec0a54f6d9cced5235fbc68ba8f94165634b"
-  integrity sha512-XIzyRnJu539NhpFa+JYkotzVwv3NrZ/4GfHB/JWA2zReRvsk39jJG8D5HOmm0B9JA63QQT7Dt39RW8g3lkmb6w==
+"@sentry/cli-win32-x64@2.32.0":
+  version "2.32.0"
+  resolved "https://registry.yarnpkg.com/@sentry/cli-win32-x64/-/cli-win32-x64-2.32.0.tgz#3e1c3dd83b647d7f43783582de1f5d4091f3828b"
+  integrity sha512-/zr63MKCid9qvrQvUsxBGiudekdNBuw9PR+zsb24tFCUjC67RGmTXNRwzIg4/esLSMQAIyq5p6xXTk1yLXLN9w==
 
 "@sentry/cli@^2.22.3":
-  version "2.31.2"
-  resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-2.31.2.tgz#39df8e52966aa8db4f9c51f4bc77abd62b6a630e"
-  integrity sha512-2aKyUx6La2P+pplL8+2vO67qJ+c1C79KYWAyQBE0JIT5kvKK9JpwtdNoK1F0/2mRpwhhYPADCz3sVIRqmL8cQQ==
+  version "2.32.0"
+  resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-2.32.0.tgz#9967946e744302135c9b5969d8e1feb1edc875f0"
+  integrity sha512-wcwxIpcRSGBNWJjMQscbYveuchU9XruyzYlsKl8iW6T2neXAuM13I4CaJCUnnXmIwvxjSbfaoLZXDsQ8vUXS2A==
   dependencies:
     https-proxy-agent "^5.0.0"
     node-fetch "^2.6.7"
@@ -2814,46 +2814,46 @@
     proxy-from-env "^1.1.0"
     which "^2.0.2"
   optionalDependencies:
-    "@sentry/cli-darwin" "2.31.2"
-    "@sentry/cli-linux-arm" "2.31.2"
-    "@sentry/cli-linux-arm64" "2.31.2"
-    "@sentry/cli-linux-i686" "2.31.2"
-    "@sentry/cli-linux-x64" "2.31.2"
-    "@sentry/cli-win32-i686" "2.31.2"
-    "@sentry/cli-win32-x64" "2.31.2"
+    "@sentry/cli-darwin" "2.32.0"
+    "@sentry/cli-linux-arm" "2.32.0"
+    "@sentry/cli-linux-arm64" "2.32.0"
+    "@sentry/cli-linux-i686" "2.32.0"
+    "@sentry/cli-linux-x64" "2.32.0"
+    "@sentry/cli-win32-i686" "2.32.0"
+    "@sentry/cli-win32-x64" "2.32.0"
 
-"@sentry/core@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-8.4.0.tgz#ab3f7202f3cae82daf4c3c408f50d2c6fb913620"
-  integrity sha512-0eACPlJvKloFIlcT1c/vjGnvqxLxpGyGuSsU7uonrkmBqIRwLYXWtR4PoHapysKtjPVoHAn9au50ut6ymC2V8Q==
+"@sentry/core@8.5.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-8.5.0.tgz#ddad729e94bab81c7e9a2d9ef295d40cdb02ed8e"
+  integrity sha512-SO3ddBzGdha+Oflp+IKwBxj+7ds1q69OAT3VsypTd+WUFQdI9DIhR92Bjf+QQZCIzUNOi79VWOh3aOi3f6hMnw==
   dependencies:
-    "@sentry/types" "8.4.0"
-    "@sentry/utils" "8.4.0"
+    "@sentry/types" "8.5.0"
+    "@sentry/utils" "8.5.0"
 
 "@sentry/nextjs@^8":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-8.4.0.tgz#c1b80256f003bf0c63d6b5220b51adff9e6cab7e"
-  integrity sha512-g0C/vDrK3NeJhw/xXpUZCS/NuuTluSixlS3tZOd82AJVXGhepNlzm+RAbuMv2R9CVfvdHvZYDtZf7WxWDrhrrg==
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-8.5.0.tgz#fea0001b4a40dfd4637c1fb2df61779b92052653"
+  integrity sha512-ltCKlBzegIOjTraEcC2NhSX4RSNs//eODat4FOlwYMK/SMWR4Ixj7LPgmUYGnQ6UC8DNEyUD/bYbO/Jgnhqj2A==
   dependencies:
     "@opentelemetry/instrumentation-http" "0.51.1"
     "@rollup/plugin-commonjs" "24.0.0"
-    "@sentry/core" "8.4.0"
-    "@sentry/node" "8.4.0"
-    "@sentry/opentelemetry" "8.4.0"
-    "@sentry/react" "8.4.0"
-    "@sentry/types" "8.4.0"
-    "@sentry/utils" "8.4.0"
-    "@sentry/vercel-edge" "8.4.0"
+    "@sentry/core" "8.5.0"
+    "@sentry/node" "8.5.0"
+    "@sentry/opentelemetry" "8.5.0"
+    "@sentry/react" "8.5.0"
+    "@sentry/types" "8.5.0"
+    "@sentry/utils" "8.5.0"
+    "@sentry/vercel-edge" "8.5.0"
     "@sentry/webpack-plugin" "2.16.0"
     chalk "3.0.0"
     resolve "1.22.8"
     rollup "3.29.4"
     stacktrace-parser "^0.1.10"
 
-"@sentry/node@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-8.4.0.tgz#342a92c0937aa149fb428928f9ea7e0c3e8d2158"
-  integrity sha512-k0uqG2F8BQWATIEghA1jQ0tBAr9mJsyS+ZiruXjbixy8kd7+ZM1CCiqeqqrYaanS0hI0mvtg9uxTQzBa1SMQsA==
+"@sentry/node@8.5.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-8.5.0.tgz#46fc78bd4d1f566ca3e564e538f5dd8c04e99a5e"
+  integrity sha512-t9cHAx/wLJYtdVf2XlzKlRJGvwdAp1wjzG0tC4E1Znx74OuUS1cFNo5WrGuOi0/YcWSxiJaxBvtUcsWK86fIgw==
   dependencies:
     "@opentelemetry/api" "^1.8.0"
     "@opentelemetry/context-async-hooks" "^1.23.0"
@@ -2877,53 +2877,53 @@
     "@opentelemetry/sdk-trace-base" "^1.23.0"
     "@opentelemetry/semantic-conventions" "^1.23.0"
     "@prisma/instrumentation" "5.14.0"
-    "@sentry/core" "8.4.0"
-    "@sentry/opentelemetry" "8.4.0"
-    "@sentry/types" "8.4.0"
-    "@sentry/utils" "8.4.0"
+    "@sentry/core" "8.5.0"
+    "@sentry/opentelemetry" "8.5.0"
+    "@sentry/types" "8.5.0"
+    "@sentry/utils" "8.5.0"
   optionalDependencies:
     opentelemetry-instrumentation-fetch-node "1.2.0"
 
-"@sentry/opentelemetry@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@sentry/opentelemetry/-/opentelemetry-8.4.0.tgz#0f7a0f197031bf387421f78487a3767e724828b3"
-  integrity sha512-1YXLuRHMhzPzoiD8Pzts5GlZY4V5GSXGn5aBmFlJ13vSrUK6C4qhPfZMboppntPihOxupCPg3XP76ZMj6+XuOg==
+"@sentry/opentelemetry@8.5.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@sentry/opentelemetry/-/opentelemetry-8.5.0.tgz#34b01e029439988939b0e21a6d2314f61ab18406"
+  integrity sha512-AbxFUNjuTKQ9ugZrssmGtPxWkBr4USNoP7GjaaGCNwNzvIVYCa+i8dv7BROJiW2lsxNAremULEbh+nbVmhGxDA==
   dependencies:
-    "@sentry/core" "8.4.0"
-    "@sentry/types" "8.4.0"
-    "@sentry/utils" "8.4.0"
+    "@sentry/core" "8.5.0"
+    "@sentry/types" "8.5.0"
+    "@sentry/utils" "8.5.0"
 
-"@sentry/react@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-8.4.0.tgz#95f4fed03709b231770a4f32d3c960c544b0dc3c"
-  integrity sha512-YnDN+szKFm1fQ9311nAulsRbboeMbqNmosMLA6PweBDEwD0HEJsovQT+ZJxXiOL220qsgWVJzk+aTPtf+oY4wA==
+"@sentry/react@8.5.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-8.5.0.tgz#1cd6b9f57ca5061b0347d14d68ea05a6c218c23b"
+  integrity sha512-0YdzA3ZvqZeP5uE7v9o95q7cBH9x1IV4uNPSyBr/AcK/RD8O1G1phbfphmkckf2F15zqH6Ala8bT3+J//nGKMA==
   dependencies:
-    "@sentry/browser" "8.4.0"
-    "@sentry/core" "8.4.0"
-    "@sentry/types" "8.4.0"
-    "@sentry/utils" "8.4.0"
+    "@sentry/browser" "8.5.0"
+    "@sentry/core" "8.5.0"
+    "@sentry/types" "8.5.0"
+    "@sentry/utils" "8.5.0"
     hoist-non-react-statics "^3.3.2"
 
-"@sentry/types@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-8.4.0.tgz#42500005a198ff8c247490434ed55e0a9f975ad1"
-  integrity sha512-mHUaaYEQCNukzYsTLp4rP2NNO17vUf+oSGS6qmhrsGqmGNICKw2CIwJlPPGeAkq9Y4tiUOye2m5OT1xsOtxLIw==
+"@sentry/types@8.5.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-8.5.0.tgz#03b4925fbcda918a0290f8fc668b62129e3408df"
+  integrity sha512-eDgkSmKI4+XL0QZm4H3j/n1RgnrbnjXZmjj+LsfccRZQwbPu9bWlc8q7Y7Ty1gOsoUpX+TecNLp2a8CRID4KHA==
 
-"@sentry/utils@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-8.4.0.tgz#1b816e65d8dbf055c5e1554361aaf9a8a8a94102"
-  integrity sha512-oDF0RVWW0AyEnsP1x4McHUvQSAxJgx3G6wM9Sb4wc1F8rwsHnCtGHc+WRZ5Gd2AXC5EGkfbg5919+1ku/L4Dww==
+"@sentry/utils@8.5.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-8.5.0.tgz#95987f34cc79b34cd7a80959abd615c42d9e5c7e"
+  integrity sha512-fdrCzo8SAYiw9JBhkJPqYqJkDXZ/wICzN7+zcXIuzKNhE1hdoFjeKcPnpUI3bKZCG6e3hT1PTYQXhVw7GIZV9w==
   dependencies:
-    "@sentry/types" "8.4.0"
+    "@sentry/types" "8.5.0"
 
-"@sentry/vercel-edge@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@sentry/vercel-edge/-/vercel-edge-8.4.0.tgz#64905348220a90fb9f1a747aea26e84735518ae0"
-  integrity sha512-iT/lZYYHziAQH0OdSCjqA1WJ1gkwAiE/Aosn3h+ddktqoU7DG/bknzwD+QSt4EQjTn3GvuXFj/JonEfbA1wlow==
+"@sentry/vercel-edge@8.5.0":
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/@sentry/vercel-edge/-/vercel-edge-8.5.0.tgz#a1ca712f418ec0a559d67fd616cfe021cc495d44"
+  integrity sha512-aMEay0urVeHJawhbpdDhoCAzDuzvZj36PVAvuCa0FB7jel5bEmpyUHauFW414jin3jFOpBBUTxPERCBRat+P5w==
   dependencies:
-    "@sentry/core" "8.4.0"
-    "@sentry/types" "8.4.0"
-    "@sentry/utils" "8.4.0"
+    "@sentry/core" "8.5.0"
+    "@sentry/types" "8.5.0"
+    "@sentry/utils" "8.5.0"
 
 "@sentry/webpack-plugin@2.16.0":
   version "2.16.0"
@@ -3860,6 +3860,11 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.4.0.tgz#3a9fed3585bf49f445505c2e9ad71fd66e117304"
   integrity sha512-wjhBukuiyJMq4cTcK3RBTzUPV24k5n1eEPlpmzku6ThwwkMdwynnMGMAmSF3fErh3AOyOUPoTTjgMYN2d10SJA==
 
+"@tiptap/extension-collaboration@^2.3.2":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-collaboration/-/extension-collaboration-2.4.0.tgz#d830694ac61a4b9857ffb77f24585e13a9cd6a0c"
+  integrity sha512-achU+GU9tqxn3zsU61CbwWrCausf0U23MJIpo8vnywOIx6E955by6okHEHoUazLIGVFXVc5DBzBP7bf+Snzk0Q==
+
 "@tiptap/extension-document@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.4.0.tgz#a396b2cbcc8708aa2a0a41d0be481fda4b61c77b"
@@ -4597,15 +4602,15 @@
     tsutils "^3.21.0"
 
 "@typescript-eslint/eslint-plugin@^7.1.1":
-  version "7.10.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.10.0.tgz#07854a236f107bb45cbf4f62b89474cbea617f50"
-  integrity sha512-PzCr+a/KAef5ZawX7nbyNwBDtM1HdLIT53aSA2DDlxmxMngZ43O8SIePOeX8H5S+FHXeI6t97mTt/dDdzY4Fyw==
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.11.0.tgz#f90f0914657ead08e1c75f66939c926edeab42dd"
+  integrity sha512-P+qEahbgeHW4JQ/87FuItjBj8O3MYv5gELDzr8QaQ7fsll1gSMTYb6j87MYyxwf3DtD7uGFB9ShwgmCJB5KmaQ==
   dependencies:
     "@eslint-community/regexpp" "^4.10.0"
-    "@typescript-eslint/scope-manager" "7.10.0"
-    "@typescript-eslint/type-utils" "7.10.0"
-    "@typescript-eslint/utils" "7.10.0"
-    "@typescript-eslint/visitor-keys" "7.10.0"
+    "@typescript-eslint/scope-manager" "7.11.0"
+    "@typescript-eslint/type-utils" "7.11.0"
+    "@typescript-eslint/utils" "7.11.0"
+    "@typescript-eslint/visitor-keys" "7.11.0"
     graphemer "^1.4.0"
     ignore "^5.3.1"
     natural-compare "^1.4.0"
@@ -4623,14 +4628,14 @@
     debug "^4.3.4"
 
 "@typescript-eslint/parser@^7.1.1":
-  version "7.10.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.10.0.tgz#e6ac1cba7bc0400a4459e7eb5b23115bd71accfb"
-  integrity sha512-2EjZMA0LUW5V5tGQiaa2Gys+nKdfrn2xiTIBLR4fxmPmVSvgPcKNW+AE/ln9k0A4zDUti0J/GZXMDupQoI+e1w==
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-7.11.0.tgz#525ad8bee54a8f015f134edd241d91b84ab64839"
+  integrity sha512-yimw99teuaXVWsBcPO1Ais02kwJ1jmNA1KxE7ng0aT7ndr1pT1wqj0OJnsYVGKKlc4QJai86l/025L6z8CljOg==
   dependencies:
-    "@typescript-eslint/scope-manager" "7.10.0"
-    "@typescript-eslint/types" "7.10.0"
-    "@typescript-eslint/typescript-estree" "7.10.0"
-    "@typescript-eslint/visitor-keys" "7.10.0"
+    "@typescript-eslint/scope-manager" "7.11.0"
+    "@typescript-eslint/types" "7.11.0"
+    "@typescript-eslint/typescript-estree" "7.11.0"
+    "@typescript-eslint/visitor-keys" "7.11.0"
     debug "^4.3.4"
 
 "@typescript-eslint/scope-manager@5.62.0":
@@ -4641,13 +4646,13 @@
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
 
-"@typescript-eslint/scope-manager@7.10.0":
-  version "7.10.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.10.0.tgz#054a27b1090199337a39cf755f83d9f2ce26546b"
-  integrity sha512-7L01/K8W/VGl7noe2mgH0K7BE29Sq6KAbVmxurj8GGaPDZXPr8EEQ2seOeAS+mEV9DnzxBQB6ax6qQQ5C6P4xg==
+"@typescript-eslint/scope-manager@7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-7.11.0.tgz#cf5619b01de62a226a59add15a02bde457335d1d"
+  integrity sha512-27tGdVEiutD4POirLZX4YzT180vevUURJl4wJGmm6TrQoiYwuxTIY98PBp6L2oN+JQxzE0URvYlzJaBHIekXAw==
   dependencies:
-    "@typescript-eslint/types" "7.10.0"
-    "@typescript-eslint/visitor-keys" "7.10.0"
+    "@typescript-eslint/types" "7.11.0"
+    "@typescript-eslint/visitor-keys" "7.11.0"
 
 "@typescript-eslint/scope-manager@7.2.0":
   version "7.2.0"
@@ -4667,13 +4672,13 @@
     debug "^4.3.4"
     tsutils "^3.21.0"
 
-"@typescript-eslint/type-utils@7.10.0":
-  version "7.10.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.10.0.tgz#8a75accce851d0a331aa9331268ef64e9b300270"
-  integrity sha512-D7tS4WDkJWrVkuzgm90qYw9RdgBcrWmbbRkrLA4d7Pg3w0ttVGDsvYGV19SH8gPR5L7OtcN5J1hTtyenO9xE9g==
+"@typescript-eslint/type-utils@7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-7.11.0.tgz#ac216697d649084fedf4a910347b9642bd0ff099"
+  integrity sha512-WmppUEgYy+y1NTseNMJ6mCFxt03/7jTOy08bcg7bxJJdsM4nuhnchyBbE8vryveaJUf62noH7LodPSo5Z0WUCg==
   dependencies:
-    "@typescript-eslint/typescript-estree" "7.10.0"
-    "@typescript-eslint/utils" "7.10.0"
+    "@typescript-eslint/typescript-estree" "7.11.0"
+    "@typescript-eslint/utils" "7.11.0"
     debug "^4.3.4"
     ts-api-utils "^1.3.0"
 
@@ -4682,10 +4687,10 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
   integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
 
-"@typescript-eslint/types@7.10.0":
-  version "7.10.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.10.0.tgz#da92309c97932a3a033762fd5faa8b067de84e3b"
-  integrity sha512-7fNj+Ya35aNyhuqrA1E/VayQX9Elwr8NKZ4WueClR3KwJ7Xx9jcCdOrLW04h51de/+gNbyFMs+IDxh5xIwfbNg==
+"@typescript-eslint/types@7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-7.11.0.tgz#5e9702a5e8b424b7fc690e338d359939257d6722"
+  integrity sha512-MPEsDRZTyCiXkD4vd3zywDCifi7tatc4K37KqTprCvaXptP7Xlpdw0NR2hRJTetG5TxbWDB79Ys4kLmHliEo/w==
 
 "@typescript-eslint/types@7.2.0":
   version "7.2.0"
@@ -4705,13 +4710,13 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@7.10.0":
-  version "7.10.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.10.0.tgz#6dcdc5de3149916a6a599fa89dde5c471b88b8bb"
-  integrity sha512-LXFnQJjL9XIcxeVfqmNj60YhatpRLt6UhdlFwAkjNc6jSUlK8zQOl1oktAP8PlWFzPQC1jny/8Bai3/HPuvN5g==
+"@typescript-eslint/typescript-estree@7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-7.11.0.tgz#7cbc569bc7336c3a494ceaf8204fdee5d5dbb7fa"
+  integrity sha512-cxkhZ2C/iyi3/6U9EPc5y+a6csqHItndvN/CzbNXTNrsC3/ASoYQZEt9uMaEp+xFNjasqQyszp5TumAVKKvJeQ==
   dependencies:
-    "@typescript-eslint/types" "7.10.0"
-    "@typescript-eslint/visitor-keys" "7.10.0"
+    "@typescript-eslint/types" "7.11.0"
+    "@typescript-eslint/visitor-keys" "7.11.0"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
@@ -4747,15 +4752,15 @@
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
-"@typescript-eslint/utils@7.10.0":
-  version "7.10.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.10.0.tgz#8ee43e5608c9f439524eaaea8de5b358b15c51b3"
-  integrity sha512-olzif1Fuo8R8m/qKkzJqT7qwy16CzPRWBvERS0uvyc+DHd8AKbO4Jb7kpAvVzMmZm8TrHnI7hvjN4I05zow+tg==
+"@typescript-eslint/utils@7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-7.11.0.tgz#524f047f2209959424c3ef689b0d83b3bc09919c"
+  integrity sha512-xlAWwPleNRHwF37AhrZurOxA1wyXowW4PqVXZVUNCLjB48CqdPJoJWkrpH2nij9Q3Lb7rtWindtoXwxjxlKKCA==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
-    "@typescript-eslint/scope-manager" "7.10.0"
-    "@typescript-eslint/types" "7.10.0"
-    "@typescript-eslint/typescript-estree" "7.10.0"
+    "@typescript-eslint/scope-manager" "7.11.0"
+    "@typescript-eslint/types" "7.11.0"
+    "@typescript-eslint/typescript-estree" "7.11.0"
 
 "@typescript-eslint/visitor-keys@5.62.0":
   version "5.62.0"
@@ -4765,12 +4770,12 @@
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
-"@typescript-eslint/visitor-keys@7.10.0":
-  version "7.10.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.10.0.tgz#2af2e91e73a75dd6b70b4486c48ae9d38a485a78"
-  integrity sha512-9ntIVgsi6gg6FIq9xjEO4VQJvwOqA3jaBFQJ/6TK5AvEup2+cECI6Fh7QiBxmfMHXU0V0J4RyPeOU1VDNzl9cg==
+"@typescript-eslint/visitor-keys@7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-7.11.0.tgz#2c50cd292e67645eec05ac0830757071b4a4d597"
+  integrity sha512-7syYk4MzjxTEk0g/w3iqtgxnFQspDJfn6QKD36xMuuhTzjcxY7F8EmBLnALjVyaOF1/bVocu3bS/2/F7rXrveQ==
   dependencies:
-    "@typescript-eslint/types" "7.10.0"
+    "@typescript-eslint/types" "7.11.0"
     eslint-visitor-keys "^3.4.3"
 
 "@typescript-eslint/visitor-keys@7.2.0":
@@ -5186,7 +5191,7 @@ array-flatten@1.1.1:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
 
-array-includes@^3.1.6, array-includes@^3.1.7:
+array-includes@^3.1.6, array-includes@^3.1.7, array-includes@^3.1.8:
   version "3.1.8"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
   integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
@@ -5215,7 +5220,7 @@ array-uniq@^1.0.1:
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
   integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
 
-array.prototype.findlast@^1.2.4:
+array.prototype.findlast@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
   integrity sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==
@@ -5689,9 +5694,9 @@ camelcase-css@^2.0.1:
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
 caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001579, caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001599:
-  version "1.0.30001623"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001623.tgz#e982099dcb229bb6ab35f5aebe2f8d79ccf6e8a8"
-  integrity sha512-X/XhAVKlpIxWPpgRTnlgZssJrF0m6YtRA0QDWgsBNT12uZM6LPRydR7ip405Y3t1LamD8cP2TZFEDZFBf5ApcA==
+  version "1.0.30001624"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001624.tgz#0ec4c8fa7a46e5b785477c70b38a56d0b10058eb"
+  integrity sha512-0dWnQG87UevOCPYaOR49CBcLBwoZLpws+k6W37nLjWUhumP1Isusj0p2u+3KhjNloRWK9OKMgjBBzPujQHw4nA==
 
 capital-case@^1.0.4:
   version "1.0.4"
@@ -6898,7 +6903,7 @@ es-get-iterator@^1.1.3:
     isarray "^2.0.5"
     stop-iteration-iterator "^1.0.0"
 
-es-iterator-helpers@^1.0.15, es-iterator-helpers@^1.0.17:
+es-iterator-helpers@^1.0.15, es-iterator-helpers@^1.0.19:
   version "1.0.19"
   resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.0.19.tgz#117003d0e5fec237b4b5c08aded722e0c6d50ca8"
   integrity sha512-zoMwbCcH5hwUkKJkT8kDIBZSz9I6mVG//+lDCinLCGov4+r7NIy0ld8o03M0cJxl2spVf6ESYVS6/gpIfq1FFw==
@@ -7298,28 +7303,28 @@ eslint-plugin-prettier@^5.1.3:
   integrity sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==
 
 eslint-plugin-react@^7.33.2:
-  version "7.34.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz#6806b70c97796f5bbfb235a5d3379ece5f4da997"
-  integrity sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==
+  version "7.34.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.34.2.tgz#2780a1a35a51aca379d86d29b9a72adc6bfe6b66"
+  integrity sha512-2HCmrU+/JNigDN6tg55cRDKCQWicYAPB38JGSFDQt95jDm8rrvSUo7YPkOIm5l6ts1j1zCvysNcasvfTMQzUOw==
   dependencies:
-    array-includes "^3.1.7"
-    array.prototype.findlast "^1.2.4"
+    array-includes "^3.1.8"
+    array.prototype.findlast "^1.2.5"
     array.prototype.flatmap "^1.3.2"
     array.prototype.toreversed "^1.1.2"
     array.prototype.tosorted "^1.1.3"
     doctrine "^2.1.0"
-    es-iterator-helpers "^1.0.17"
+    es-iterator-helpers "^1.0.19"
     estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
-    object.entries "^1.1.7"
-    object.fromentries "^2.0.7"
-    object.hasown "^1.1.3"
-    object.values "^1.1.7"
+    object.entries "^1.1.8"
+    object.fromentries "^2.0.8"
+    object.hasown "^1.1.4"
+    object.values "^1.2.0"
     prop-types "^15.8.1"
     resolve "^2.0.0-next.5"
     semver "^6.3.1"
-    string.prototype.matchall "^4.0.10"
+    string.prototype.matchall "^4.0.11"
 
 eslint-plugin-turbo@1.13.3:
   version "1.13.3"
@@ -8828,6 +8833,11 @@ isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
+isomorphic.js@^0.2.4:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/isomorphic.js/-/isomorphic.js-0.2.5.tgz#13eecf36f2dba53e85d355e11bf9d4208c6f7f88"
+  integrity sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==
+
 iterator.prototype@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
@@ -9092,6 +9102,13 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lib0@^0.2.42, lib0@^0.2.74, lib0@^0.2.85, lib0@^0.2.86:
+  version "0.2.94"
+  resolved "https://registry.yarnpkg.com/lib0/-/lib0-0.2.94.tgz#fc28b4b65f816599f1e2f59d3401e231709535b3"
+  integrity sha512-hZ3p54jL4Wpu7IOg26uC7dnEWiMyNlUrb9KoG7+xYs45WkQwpVvKFndVq2+pqLYKe1u8Fp3+zAfZHVvTK34PvQ==
+  dependencies:
+    isomorphic.js "^0.2.4"
+
 lilconfig@^2.0.5, lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
@@ -10064,7 +10081,7 @@ object.assign@^4.1.4, object.assign@^4.1.5:
     has-symbols "^1.0.3"
     object-keys "^1.1.1"
 
-object.entries@^1.1.7:
+object.entries@^1.1.7, object.entries@^1.1.8:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
   integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
@@ -10073,7 +10090,7 @@ object.entries@^1.1.7:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-object.fromentries@^2.0.7:
+object.fromentries@^2.0.7, object.fromentries@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
   integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
@@ -10092,7 +10109,7 @@ object.groupby@^1.0.1:
     define-properties "^1.2.1"
     es-abstract "^1.23.2"
 
-object.hasown@^1.1.3:
+object.hasown@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.4.tgz#e270ae377e4c120cdcb7656ce66884a6218283dc"
   integrity sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==
@@ -10101,7 +10118,7 @@ object.hasown@^1.1.3:
     es-abstract "^1.23.2"
     es-object-atoms "^1.0.0"
 
-object.values@^1.1.6, object.values@^1.1.7:
+object.values@^1.1.6, object.values@^1.1.7, object.values@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.0.tgz#65405a9d92cee68ac2d303002e0b8470a4d9ab1b"
   integrity sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
@@ -12210,7 +12227,7 @@ string-width@^7.0.0:
     get-east-asian-width "^1.0.0"
     strip-ansi "^7.1.0"
 
-string.prototype.matchall@^4.0.10, string.prototype.matchall@^4.0.6:
+string.prototype.matchall@^4.0.11, string.prototype.matchall@^4.0.6:
   version "4.0.11"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz#1092a72c59268d2abaad76582dccc687c0297e0a"
   integrity sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==
@@ -13747,6 +13764,27 @@ xtend@^4.0.0, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
+y-indexeddb@^9.0.12:
+  version "9.0.12"
+  resolved "https://registry.yarnpkg.com/y-indexeddb/-/y-indexeddb-9.0.12.tgz#73657f31d52886d7532256610babf5cca4ad5e58"
+  integrity sha512-9oCFRSPPzBK7/w5vOkJBaVCQZKHXB/v6SIT+WYhnJxlEC61juqG0hBrAf+y3gmSMLFLwICNH9nQ53uscuse6Hg==
+  dependencies:
+    lib0 "^0.2.74"
+
+y-prosemirror@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/y-prosemirror/-/y-prosemirror-1.2.5.tgz#c448f80a6017190bc69a30a33f3930e9924fad3a"
+  integrity sha512-T/JATxC8P2Dbvq/dAiaiztD1a8KEwRP8oLRlT8YlaZdNlLGE1Ea0IJ8If25UlDYmk+4+uqLbqT/S+dzUmwwgbA==
+  dependencies:
+    lib0 "^0.2.42"
+
+y-protocols@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/y-protocols/-/y-protocols-1.0.6.tgz#66dad8a95752623443e8e28c0e923682d2c0d495"
+  integrity sha512-vHRF2L6iT3rwj1jub/K5tYcTT/mEYDUppgNPXwp8fmLpui9f7Yeq3OEtTLVF012j39QnV+KEQpNqoN7CWU7Y9Q==
+  dependencies:
+    lib0 "^0.2.85"
+
 y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
@@ -13790,6 +13828,13 @@ yargs@^17.0.0:
     y18n "^5.0.5"
     yargs-parser "^21.1.1"
 
+yjs@^13.6.15:
+  version "13.6.15"
+  resolved "https://registry.yarnpkg.com/yjs/-/yjs-13.6.15.tgz#5a2402632aabf83e5baf56342b4c82fe40859306"
+  integrity sha512-moFv4uNYhp8BFxIk3AkpoAnnjts7gwdpiG8RtyFiKbMtxKCS0zVZ5wPaaGpwC3V2N/K8TK8MwtSI3+WO9CHWjQ==
+  dependencies:
+    lib0 "^0.2.86"
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"