Merge branch 'preview' of https://github.com/makeplane/plane into chore/issues-events

admin/app/ai/page.tsx

@@ -19,14 +19,14 @@ const InstanceAIPage = observer(() => {
   return (
     <>
       <PageHeader title="Artificial Intelligence - God Mode" />
-      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">AI features for all your workspaces</div>
           <div className="text-sm font-normal text-custom-text-300">
             Configure your AI API credentials so Plane AI features are turned on for all your workspaces.
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-auto">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <InstanceAIForm config={formattedConfig} />
           ) : (

admin/app/authentication/github/page.tsx

@@ -64,8 +64,8 @@ const InstanceGithubAuthenticationPage = observer(() => {
   return (
     <>
       <PageHeader title="Authentication - God Mode" />
-      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="Github"
             description="Allow members to login or sign up to plane with their Github accounts."
@@ -93,7 +93,7 @@ const InstanceGithubAuthenticationPage = observer(() => {
             withBorder={false}
           />
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-auto">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md p-4">
           {formattedConfig ? (
             <InstanceGithubConfigForm config={formattedConfig} />
           ) : (

admin/app/authentication/google/page.tsx

@@ -58,8 +58,8 @@ const InstanceGoogleAuthenticationPage = observer(() => {
   return (
     <>
       <PageHeader title="Authentication - God Mode" />
-      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
             name="Google"
             description="Allow members to login or sign up to plane with their Google
@@ -81,7 +81,7 @@ const InstanceGoogleAuthenticationPage = observer(() => {
             withBorder={false}
           />
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-auto">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md p-4">
           {formattedConfig ? (
             <InstanceGoogleConfigForm config={formattedConfig} />
           ) : (

admin/app/authentication/page.tsx

@@ -119,14 +119,14 @@ const InstanceAuthenticationPage = observer(() => {
   return (
     <>
       <PageHeader title="Authentication - God Mode" />
-      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Manage authentication for your instance</div>
           <div className="text-sm font-normal text-custom-text-300">
             Configure authentication modes for your team and restrict sign ups to be invite only.
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-auto">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <div className="space-y-3">
               <div className="text-lg font-medium">Authentication modes</div>

admin/app/email/page.tsx

@@ -19,8 +19,8 @@ const InstanceEmailPage = observer(() => {
   return (
     <>
       <PageHeader title="Email - God Mode" />
-      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Secure emails from your own instance</div>
           <div className="text-sm font-normal text-custom-text-300">
             Plane can send useful emails to you and your users from your own instance without talking to the Internet.
@@ -30,7 +30,7 @@ const InstanceEmailPage = observer(() => {
             </div>
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-auto">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <InstanceEmailForm config={formattedConfig} />
           ) : (

admin/app/email/test-email-modal.tsx

@@ -51,7 +51,7 @@ export const SendTestEmailModal: FC<Props> = (props) => {
         setSendEmailStep(ESendEmailSteps.SUCCESS);
       })
       .catch((error) => {
-        setError(error?.message || "Failed to send email");
+        setError(error?.error || "Failed to send email");
         setSendEmailStep(ESendEmailSteps.FAILED);
       })
       .finally(() => {

admin/app/general/page.tsx

@@ -10,15 +10,15 @@ function GeneralPage() {
   console.log("instance", instance);
   return (
     <>
-      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">General settings</div>
           <div className="text-sm font-normal text-custom-text-300">
             Change the name of your instance and instance admin e-mail addresses. Enable or disable telemetry in your
             instance.
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-auto">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {instance && instanceAdmins && (
             <GeneralConfigurationForm instance={instance} instanceAdmins={instanceAdmins} />
           )}

admin/app/globals.css

@@ -332,42 +332,90 @@ body {
 }
 
 /* scrollbar style */
-::-webkit-scrollbar {
-  display: none;
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: none;
+  }
+  .vertical-scrollbar,
+  .horizontal-scrollbar {
+    scrollbar-width: initial;
+    scrollbar-color: rgba(96, 100, 108, 0.1) transparent;
+  }
+  .vertical-scrollbar:hover,
+  .horizontal-scrollbar:hover {
+    scrollbar-color: rgba(96, 100, 108, 0.25) transparent;
+  }
+  .vertical-scrollbar:active,
+  .horizontal-scrollbar:active {
+    scrollbar-color: rgba(96, 100, 108, 0.7) transparent;
+  }
 }
 
-.horizontal-scroll-enable {
-  overflow-x: scroll;
+.vertical-scrollbar {
+  overflow-y: auto;
 }
-
-.horizontal-scroll-enable::-webkit-scrollbar {
+.horizontal-scrollbar {
+  overflow-x: auto;
+}
+.vertical-scrollbar::-webkit-scrollbar,
+.horizontal-scrollbar::-webkit-scrollbar {
   display: block;
-  height: 7px;
-  width: 0;
+}
+.vertical-scrollbar::-webkit-scrollbar-track,
+.horizontal-scrollbar::-webkit-scrollbar-track {
+  background-color: transparent;
+  border-radius: 9999px;
+}
+.vertical-scrollbar::-webkit-scrollbar-thumb,
+.horizontal-scrollbar::-webkit-scrollbar-thumb {
+  background-clip: padding-box;
+  background-color: rgba(96, 100, 108, 0.1);
+  border-radius: 9999px;
+}
+.vertical-scrollbar:hover::-webkit-scrollbar-thumb,
+.horizontal-scrollbar:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(96, 100, 108, 0.25);
+}
+.vertical-scrollbar::-webkit-scrollbar-thumb:hover,
+.horizontal-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(96, 100, 108, 0.5);
+}
+.vertical-scrollbar::-webkit-scrollbar-thumb:active,
+.horizontal-scrollbar::-webkit-scrollbar-thumb:active {
+  background-color: rgba(96, 100, 108, 0.7);
+}
+.vertical-scrollbar::-webkit-scrollbar-corner,
+.horizontal-scrollbar::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+.vertical-scrollbar-margin-top-md::-webkit-scrollbar-track {
+  margin-top: 44px;
 }
 
-.horizontal-scroll-enable::-webkit-scrollbar-track {
-  height: 7px;
-  background-color: rgba(var(--color-background-100));
+/* scrollbar sm size */
+.scrollbar-sm::-webkit-scrollbar {
+  height: 12px;
+  width: 12px;
 }
-
-.horizontal-scroll-enable::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background-color: rgba(var(--color-scrollbar));
+.scrollbar-sm::-webkit-scrollbar-thumb {
+  border: 3px solid rgba(0, 0, 0, 0);
 }
-
-.vertical-scroll-enable::-webkit-scrollbar {
-  display: block;
-  width: 5px;
+/* scrollbar md size */
+.scrollbar-md::-webkit-scrollbar {
+  height: 14px;
+  width: 14px;
 }
-
-.vertical-scroll-enable::-webkit-scrollbar-track {
-  width: 5px;
+.scrollbar-md::-webkit-scrollbar-thumb {
+  border: 3px solid rgba(0, 0, 0, 0);
 }
+/* scrollbar lg size */
 
-.vertical-scroll-enable::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background-color: rgba(var(--color-background-90));
+.scrollbar-lg::-webkit-scrollbar {
+  height: 16px;
+  width: 16px;
+}
+.scrollbar-lg::-webkit-scrollbar-thumb {
+  border: 4px solid rgba(0, 0, 0, 0);
 }
 /* end scrollbar style */
 

admin/app/image/page.tsx

@@ -19,14 +19,14 @@ const InstanceImagePage = observer(() => {
   return (
     <>
       <PageHeader title="Image - God Mode" />
-      <div className="relative container mx-auto w-full h-full p-8 py-4 space-y-6 flex flex-col">
-        <div className="border-b border-custom-border-100 pb-3 space-y-1 flex-shrink-0">
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <div className="text-xl font-medium text-custom-text-100">Third-party image libraries</div>
           <div className="text-sm font-normal text-custom-text-300">
             Let your users search and choose images from third-party libraries
           </div>
         </div>
-        <div className="flex-grow overflow-hidden overflow-y-auto">
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <InstanceImageConfigForm config={formattedConfig} />
           ) : (

admin/components/admin-sidebar/help-section.tsx

@@ -38,7 +38,7 @@ export const HelpSection: FC = observer(() => {
   // refs
   const helpOptionsRef = useRef<HTMLDivElement | null>(null);
 
-  const redirectionLink = encodeURI(WEB_BASE_URL + "/create-workspace");
+  const redirectionLink = encodeURI(WEB_BASE_URL + "/");
 
   return (
     <div

admin/components/admin-sidebar/sidebar-menu.tsx

@@ -56,7 +56,7 @@ export const SidebarMenu = observer(() => {
   };
 
   return (
-    <div className="flex h-full w-full flex-col gap-2.5 overflow-y-auto px-4 py-4">
+    <div className="flex h-full w-full flex-col gap-2.5 overflow-y-scroll vertical-scrollbar scrollbar-sm px-4 py-4">
       {INSTANCE_ADMIN_LINKS.map((item, index) => {
         const isActive = item.href === pathName || pathName.includes(item.href);
         return (

admin/components/instance/setup-form.tsx

@@ -158,6 +158,7 @@ export const InstanceSetupForm: FC = (props) => {
           onError={() => setIsSubmitting(false)}
         >
           <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+          <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
 
           <div className="flex flex-col sm:flex-row items-center gap-4">
             <div className="w-full space-y-1">
@@ -319,8 +320,6 @@ export const InstanceSetupForm: FC = (props) => {
             <div>
               <Checkbox
                 id="is_telemetry_enabled"
-                name="is_telemetry_enabled"
-                value={formData.is_telemetry_enabled ? "True" : "False"}
                 onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
                 checked={formData.is_telemetry_enabled}
               />

admin/components/new-user-popup.tsx

@@ -7,9 +7,9 @@ import { useTheme as nextUseTheme } from "next-themes";
 // ui
 import { Button, getButtonStyling } from "@plane/ui";
 // helpers
-import { resolveGeneralTheme } from "helpers/common.helper";
+import { WEB_BASE_URL, resolveGeneralTheme } from "helpers/common.helper";
 // hooks
-import { useInstance, useTheme } from "@/hooks/store";
+import { useTheme } from "@/hooks/store";
 // icons
 import TakeoffIconLight from "/public/logos/takeoff-icon-light.svg";
 import TakeoffIconDark from "/public/logos/takeoff-icon-dark.svg";
@@ -17,11 +17,10 @@ import TakeoffIconDark from "/public/logos/takeoff-icon-dark.svg";
 export const NewUserPopup: React.FC = observer(() => {
   // hooks
   const { isNewUserPopup, toggleNewUserPopup } = useTheme();
-  const { config } = useInstance();
   // theme
   const { resolvedTheme } = nextUseTheme();
 
-  const redirectionLink = `${config?.app_base_url ? `${config?.app_base_url}/create-workspace` : `/god-mode/`}`;
+  const redirectionLink = encodeURI(WEB_BASE_URL + "/create-workspace");
 
   if (!isNewUserPopup) return <></>;
   return (

admin/next.config.js

@@ -1,4 +1,5 @@
 /** @type {import('next').NextConfig} */
+
 const nextConfig = {
   trailingSlash: true,
   reactStrictMode: false,

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/error.py

@@ -17,6 +17,7 @@ AUTHENTICATION_ERROR_CODES = {
     "INVALID_EMAIL_SIGN_UP": 5045,
     "INVALID_EMAIL_MAGIC_SIGN_UP": 5050,
     "MAGIC_SIGN_UP_EMAIL_CODE_REQUIRED": 5055,
+    "EMAIL_PASSWORD_AUTHENTICATION_DISABLED": 5056,
     # Sign In
     "USER_DOES_NOT_EXIST": 5060,
     "AUTHENTICATION_FAILED_SIGN_IN": 5065,

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/credentials/email.py

@@ -41,8 +41,10 @@ class EmailProvider(CredentialAdapter):
 
         if ENABLE_EMAIL_PASSWORD == "0":
             raise AuthenticationException(
-                error_code=AUTHENTICATION_ERROR_CODES["ENABLE_EMAIL_PASSWORD"],
-                error_message="ENABLE_EMAIL_PASSWORD",
+                error_code=AUTHENTICATION_ERROR_CODES[
+                    "EMAIL_PASSWORD_AUTHENTICATION_DISABLED"
+                ],
+                error_message="EMAIL_PASSWORD_AUTHENTICATION_DISABLED",
             )
 
     def set_user_data(self):

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"

apiserver/plane/license/api/views/instance.py

@@ -148,7 +148,7 @@ class InstanceEndpoint(BaseAPIView):
         data["app_base_url"] = settings.APP_BASE_URL
 
         instance_data = serializer.data
-        instance_data["workspaces_exist"] = Workspace.objects.count() > 1
+        instance_data["workspaces_exist"] = Workspace.objects.count() >= 1
 
         response_data = {"config": data, "instance": instance_data}
         return Response(response_data, status=status.HTTP_200_OK)

deploy/selfhost/docker-compose.yml

@@ -128,7 +128,7 @@ services:
     image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-stable}
     platform: ${DOCKER_PLATFORM:-}
     pull_policy: ${PULL_POLICY:-always}
-    restart: no
+    restart: "no"
     command: ./bin/docker-entrypoint-migrator.sh
     volumes:
       - logs_migrator:/code/plane/logs

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>
-);

space/.gitignore

@@ -37,3 +37,6 @@ next-env.d.ts
 
 # env
 .env
+
+# Sentry Config File
+.env.sentry-build-plugin

space/instrumentation.ts

@@ -0,0 +1,9 @@
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./sentry.server.config');
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('./sentry.edge.config');
+  }
+}

space/next.config.js

@@ -28,12 +28,46 @@ const nextConfig = {
   },
 };
 
-if (parseInt(process.env.NEXT_PUBLIC_ENABLE_SENTRY || "0", 10)) {
-  module.exports = withSentryConfig(
-    nextConfig,
-    { silent: true, authToken: process.env.SENTRY_AUTH_TOKEN },
-    { hideSourceMaps: true }
-  );
+
+const sentryConfig = {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
+
+  org: process.env.SENTRY_ORG_ID || "plane-hq",
+  project: process.env.SENTRY_PROJECT_ID || "plane-space",
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+  // Only print logs for uploading source maps in CI
+  silent: true,
+
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  tunnelRoute: "/monitoring",
+
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+
+  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+  // See the following for more information:
+  // https://docs.sentry.io/product/crons/
+  // https://vercel.com/docs/cron-jobs
+  automaticVercelMonitors: true,
+}
+
+
+if (parseInt(process.env.SENTRY_MONITORING_ENABLED || "0", 10)) {
+  module.exports = withSentryConfig(nextConfig, sentryConfig);
 } else {
   module.exports = nextConfig;
 }
+

space/package.json

@@ -23,7 +23,7 @@
     "@plane/rich-text-editor": "*",
     "@plane/types": "*",
     "@plane/ui": "*",
-    "@sentry/nextjs": "^7.108.0",
+    "@sentry/nextjs": "^8",
     "axios": "^1.3.4",
     "clsx": "^2.0.0",
     "dompurify": "^3.0.11",

space/sentry.client.config.js

@@ -1,18 +0,0 @@
-// This file configures the initialization of Sentry on the browser.
-// The config you add here will be used whenever a page is visited.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-
-const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
-
-Sentry.init({
-  dsn: SENTRY_DSN,
-  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1.0,
-  // ...
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
-});

space/sentry.client.config.ts

@@ -0,0 +1,31 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  replaysOnErrorSampleRate: 1.0,
+
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+  integrations: [
+    Sentry.replayIntegration({
+      // Additional Replay configuration goes in here, for example:
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
+});

space/sentry.edge.config.js

@@ -1,18 +0,0 @@
-// This file configures the initialization of Sentry on the server.
-// The config you add here will be used whenever middleware or an Edge route handles a request.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-
-const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
-
-Sentry.init({
-  dsn: SENTRY_DSN,
-  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1.0,
-  // ...
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
-});

space/sentry.edge.config.ts

@@ -0,0 +1,17 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

space/sentry.server.config.ts

@@ -4,15 +4,16 @@
 
 import * as Sentry from "@sentry/nextjs";
 
-const SENTRY_DSN = process.env.NEXT_PUBLIC_SENTRY_DSN;
-
 Sentry.init({
-  dsn: SENTRY_DSN,
+  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
+
   // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1.0,
-  // ...
-  // Note: if you want to override the automatic release value, do not set a
-  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
-  // that it will also get attached to your source maps
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  // Uncomment the line below to enable Spotlight (https://spotlightjs.com)
+  // spotlight: process.env.NODE_ENV === 'development',
 });

turbo.json

@@ -8,10 +8,6 @@
     "NEXT_PUBLIC_SPACE_BASE_URL",
     "NEXT_PUBLIC_SPACE_BASE_PATH",
     "NEXT_PUBLIC_WEB_BASE_URL",
-    "NEXT_PUBLIC_SENTRY_DSN",
-    "NEXT_PUBLIC_SENTRY_ENVIRONMENT",
-    "NEXT_PUBLIC_ENABLE_SENTRY",
-    "NEXT_PUBLIC_TRACK_EVENTS",
     "NEXT_PUBLIC_PLAUSIBLE_DOMAIN",
     "NEXT_PUBLIC_CRISP_ID",
     "NEXT_PUBLIC_ENABLE_SESSION_RECORDER",
@@ -21,7 +17,12 @@
     "NEXT_PUBLIC_POSTHOG_HOST",
     "NEXT_PUBLIC_POSTHOG_DEBUG",
     "NEXT_PUBLIC_SUPPORT_EMAIL",
-    "SENTRY_AUTH_TOKEN"
+    "SENTRY_AUTH_TOKEN",
+    "SENTRY_ORG_ID",
+    "SENTRY_PROJECT_ID",
+    "NEXT_PUBLIC_SENTRY_ENVIRONMENT",
+    "NEXT_PUBLIC_SENTRY_DSN",
+    "SENTRY_MONITORING_ENABLED"
   ],
   "pipeline": {
     "build": {

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

@@ -514,7 +514,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/core/list/list-item.tsx

@@ -2,6 +2,8 @@ import React, { FC } from "react";
 import Link from "next/link";
 // ui
 import { Tooltip } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
 
 interface IListItemProps {
   title: string;
@@ -12,6 +14,7 @@ interface IListItemProps {
   actionableItems?: JSX.Element;
   isMobile?: boolean;
   parentRef: React.RefObject<HTMLDivElement>;
+  className?: string;
 }
 
 export const ListItem: FC<IListItemProps> = (props) => {
@@ -24,12 +27,18 @@ export const ListItem: FC<IListItemProps> = (props) => {
     onItemClick,
     isMobile = false,
     parentRef,
+    className = "",
   } = props;
 
   return (
     <div ref={parentRef} className="relative">
       <Link href={itemLink} onClick={onItemClick}>
-        <div className="group h-24 sm:h-[52px] flex w-full flex-col items-center justify-between gap-3 sm:gap-5 px-6 py-4 sm:py-0 text-sm border-b border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90 sm:flex-row">
+        <div
+          className={cn(
+            "group h-24 sm:h-[52px] flex w-full flex-col items-center justify-between gap-3 sm:gap-5 px-6 py-4 sm:py-0 text-sm border-b border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90 sm:flex-row",
+            className
+          )}
+        >
           <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
             <div className="relative flex w-full items-center gap-3 overflow-hidden">
               <div className="flex items-center gap-4 truncate">

web/components/core/sidebar/sidebar-progress-stats.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-
+import { observer } from "mobx-react";
 import Image from "next/image";
 // headless ui
 import { Tab } from "@headlessui/react";
@@ -15,6 +15,7 @@ import {
 // hooks
 import { Avatar, StateGroupIcon } from "@plane/ui";
 import { SingleProgressStats } from "@/components/core";
+import { useProjectState } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
 // images
 import emptyLabel from "public/empty-state/empty_label.svg";
@@ -44,20 +45,23 @@ type Props = {
   handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
 };
 
-export const SidebarProgressStats: React.FC<Props> = ({
-  distribution,
-  groupedIssues,
-  totalIssues,
-  module,
-  roundedTab,
-  noBackground,
-  isPeekView = false,
-  isCompleted = false,
-  filters,
-  handleFiltersUpdate,
-}) => {
+export const SidebarProgressStats: React.FC<Props> = observer((props) => {
+  const {
+    distribution,
+    groupedIssues,
+    totalIssues,
+    module,
+    roundedTab,
+    noBackground,
+    isPeekView = false,
+    isCompleted = false,
+    filters,
+    handleFiltersUpdate,
+  } = props;
   const { storedValue: tab, setValue: setTab } = useLocalStorage("tab", "Assignees");
 
+  const { groupedProjectStates } = useProjectState();
+
   const currentValue = (tab: string | null) => {
     switch (tab) {
       case "Assignees":
@@ -71,6 +75,12 @@ export const SidebarProgressStats: React.FC<Props> = ({
     }
   };
 
+  const getStateGroupState = (stateGroup: string) => {
+    const stateGroupStates = groupedProjectStates?.[stateGroup];
+    const stateGroupStatesId = stateGroupStates?.map((state) => state.id);
+    return stateGroupStatesId;
+  };
+
   return (
     <Tab.Group
       defaultIndex={currentValue(tab)}
@@ -261,10 +271,14 @@ export const SidebarProgressStats: React.FC<Props> = ({
               }
               completed={groupedIssues[group]}
               total={totalIssues}
+              {...(!isPeekView &&
+                !isCompleted && {
+                  onClick: () => handleFiltersUpdate("state", getStateGroupState(group) ?? []),
+                })}
             />
           ))}
         </Tab.Panel>
       </Tab.Panels>
     </Tab.Group>
   );
-};
+});

web/components/cycles/active-cycle/productivity.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import Link from "next/link";
 // types
 import { ICycle } from "@plane/types";
 // components
@@ -8,14 +9,19 @@ import { EmptyState } from "@/components/empty-state";
 import { EmptyStateType } from "@/constants/empty-state";
 
 export type ActiveCycleProductivityProps = {
+  workspaceSlug: string;
+  projectId: string;
   cycle: ICycle;
 };
 
 export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = (props) => {
-  const { cycle } = props;
+  const { workspaceSlug, projectId, cycle } = props;
 
   return (
-    <div className="flex flex-col justify-center min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
+    <Link
+      href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}
+      className="flex flex-col justify-center min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg"
+    >
       <div className="flex items-center justify-between gap-4">
         <h3 className="text-base text-custom-text-300 font-semibold">Issue burndown</h3>
       </div>
@@ -53,6 +59,6 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = (props)
           </div>
         </>
       )}
-    </div>
+    </Link>
   );
 };

web/components/cycles/active-cycle/progress.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import Link from "next/link";
 // types
 import { ICycle } from "@plane/types";
 // ui
@@ -10,11 +11,13 @@ import { CYCLE_STATE_GROUPS_DETAILS } from "@/constants/cycle";
 import { EmptyStateType } from "@/constants/empty-state";
 
 export type ActiveCycleProgressProps = {
+  workspaceSlug: string;
+  projectId: string;
   cycle: ICycle;
 };
 
 export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
-  const { cycle } = props;
+  const { workspaceSlug, projectId, cycle } = props;
 
   const progressIndicatorData = CYCLE_STATE_GROUPS_DETAILS.map((group, index) => ({
     id: index,
@@ -31,7 +34,10 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
   };
 
   return (
-    <div className="flex flex-col min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
+    <Link
+      href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}
+      className="flex flex-col min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg"
+    >
       <div className="flex flex-col gap-3">
         <div className="flex items-center justify-between gap-4">
           <h3 className="text-base text-custom-text-300 font-semibold">Progress</h3>
@@ -85,6 +91,6 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = (props) => {
           <EmptyState type={EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE} layout="screen-simple" size="sm" />
         </div>
       )}
-    </div>
+    </Link>
   );
 };

web/components/cycles/active-cycle/root.tsx

@@ -62,13 +62,18 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
                       cycleId={currentProjectActiveCycleId}
                       workspaceSlug={workspaceSlug}
                       projectId={projectId}
+                      className="!border-b-transparent"
                     />
                   )}
-                  <div className="bg-custom-background-90 py-6 px-8">
-                    <div className="grid grid-cols-1 bg-custom-background-90 gap-3 lg:grid-cols-2 xl:grid-cols-3">
-                      <ActiveCycleProgress cycle={activeCycle} />
-                      <ActiveCycleProductivity cycle={activeCycle} />
-                      <ActiveCycleStats cycle={activeCycle} workspaceSlug={workspaceSlug} projectId={projectId} />
+                  <div className="bg-custom-background-100 pt-3 pb-6 px-6">
+                    <div className="grid grid-cols-1 bg-custom-background-100 gap-3 lg:grid-cols-2 xl:grid-cols-3">
+                      <ActiveCycleProgress workspaceSlug={workspaceSlug} projectId={projectId} cycle={activeCycle} />
+                      <ActiveCycleProductivity
+                        workspaceSlug={workspaceSlug}
+                        projectId={projectId}
+                        cycle={activeCycle}
+                      />
+                      <ActiveCycleStats workspaceSlug={workspaceSlug} projectId={projectId} cycle={activeCycle} />
                     </div>
                   </div>
                 </div>

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/list/cycles-list-item.tsx

@@ -22,10 +22,11 @@ type TCyclesListItem = {
   handleRemoveFromFavorites?: () => void;
   workspaceSlug: string;
   projectId: string;
+  className?: string;
 };
 
 export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
-  const { cycleId, workspaceSlug, projectId } = props;
+  const { cycleId, workspaceSlug, projectId, className = "" } = props;
   // refs
   const parentRef = useRef(null);
   // router
@@ -83,6 +84,7 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
       onItemClick={(e) => {
         if (cycleDetails.archived_at) openCycleOverview(e);
       }}
+      className={className}
       prependTitleElement={
         <CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
           {isCompleted ? (

web/components/cycles/sidebar.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import isEmpty from "lodash/isEmpty";
+import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
@@ -9,10 +10,10 @@ import {
   ChevronDown,
   LinkIcon,
   Trash2,
-  UserCircle2,
   AlertCircle,
   ChevronRight,
   CalendarClock,
+  SquareUser,
 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // types
@@ -199,14 +200,18 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
   const handleFiltersUpdate = useCallback(
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
       if (!workspaceSlug || !projectId) return;
-      const newValues = issueFilters?.filters?.[key] ?? [];
+      let newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
-        // this validation is majorly for the filter start_date, target_date custom
-        value.forEach((val) => {
-          if (!newValues.includes(val)) newValues.push(val);
-          else newValues.splice(newValues.indexOf(val), 1);
-        });
+        if (key === "state") {
+          if (isEqual(newValues, value)) newValues = [];
+          else newValues = value;
+        } else {
+          value.forEach((val) => {
+            if (!newValues.includes(val)) newValues.push(val);
+            else newValues.splice(newValues.indexOf(val), 1);
+          });
+        }
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
         else newValues.push(value);
@@ -427,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/parent-select.tsx

@@ -103,7 +103,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
           <div className="flex items-center gap-1 bg-green-500/20 text-green-700 rounded px-1.5 py-1">
             <Tooltip tooltipHeading="Title" tooltipContent={parentIssue.name} isMobile={isMobile}>
               <Link
-                href={`/${workspaceSlug}/projects/${projectId}/issues/${parentIssue?.id}`}
+                href={`/${workspaceSlug}/projects/${parentIssue.project_id}/issues/${parentIssue?.id}`}
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-xs font-medium"

web/components/issues/issue-detail/parent/root.tsx

@@ -56,7 +56,7 @@ export const IssueParentDetail: FC<TIssueParentDetail> = observer((props) => {
             Sibling issues
           </div>
 
-          <IssueParentSiblings currentIssue={issue} parentIssue={parentIssue} />
+          <IssueParentSiblings workspaceSlug={workspaceSlug} currentIssue={issue} parentIssue={parentIssue} />
 
           <CustomMenu.MenuItem
             onClick={() => issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: null })}

web/components/issues/issue-detail/parent/sibling-item.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { observer } from "mobx-react";
 import Link from "next/link";
 // ui
 import { CustomMenu, LayersIcon } from "@plane/ui";
@@ -6,15 +7,15 @@ import { CustomMenu, LayersIcon } from "@plane/ui";
 import { useIssueDetail, useProject } from "@/hooks/store";
 
 type TIssueParentSiblingItem = {
+  workspaceSlug: string;
   issueId: string;
 };
 
-export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = (props) => {
-  const { issueId } = props;
+export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = observer((props) => {
+  const { workspaceSlug, issueId } = props;
   // hooks
   const { getProjectById } = useProject();
   const {
-    peekIssue,
     issue: { getIssueById },
   } = useIssueDetail();
 
@@ -27,7 +28,7 @@ export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = (props) => {
     <>
       <CustomMenu.MenuItem key={issueDetail.id}>
         <Link
-          href={`/${peekIssue?.workspaceSlug}/projects/${issueDetail?.project_id as string}/issues/${issueDetail.id}`}
+          href={`/${workspaceSlug}/projects/${issueDetail?.project_id as string}/issues/${issueDetail.id}`}
           className="flex items-center gap-2 py-2"
         >
           <LayersIcon className="h-4 w-4" />
@@ -36,4 +37,4 @@ export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = (props) => {
       </CustomMenu.MenuItem>
     </>
   );
-};
+});

web/components/issues/issue-detail/parent/siblings.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { observer } from "mobx-react";
 import useSWR from "swr";
 import { TIssue } from "@plane/types";
 // components
@@ -8,25 +9,25 @@ import { useIssueDetail } from "@/hooks/store";
 import { IssueParentSiblingItem } from "./sibling-item";
 
 export type TIssueParentSiblings = {
+  workspaceSlug: string;
   currentIssue: TIssue;
   parentIssue: TIssue;
 };
 
-export const IssueParentSiblings: FC<TIssueParentSiblings> = (props) => {
-  const { currentIssue, parentIssue } = props;
+export const IssueParentSiblings: FC<TIssueParentSiblings> = observer((props) => {
+  const { workspaceSlug, currentIssue, parentIssue } = props;
   // hooks
   const {
-    peekIssue,
     fetchSubIssues,
     subIssues: { subIssuesByIssueId },
   } = useIssueDetail();
 
   const { isLoading } = useSWR(
-    peekIssue && parentIssue && parentIssue.project_id
-      ? `ISSUE_PARENT_CHILD_ISSUES_${peekIssue?.workspaceSlug}_${parentIssue.project_id}_${parentIssue.id}`
+    parentIssue && parentIssue.project_id
+      ? `ISSUE_PARENT_CHILD_ISSUES_${workspaceSlug}_${parentIssue.project_id}_${parentIssue.id}`
       : null,
-    peekIssue && parentIssue && parentIssue.project_id
-      ? () => fetchSubIssues(peekIssue?.workspaceSlug, parentIssue.project_id, parentIssue.id)
+    parentIssue && parentIssue.project_id
+      ? () => fetchSubIssues(workspaceSlug, parentIssue.project_id, parentIssue.id)
       : null
   );
 
@@ -40,7 +41,10 @@ export const IssueParentSiblings: FC<TIssueParentSiblings> = (props) => {
         </div>
       ) : subIssueIds && subIssueIds.length > 0 ? (
         subIssueIds.map(
-          (issueId) => currentIssue.id != issueId && <IssueParentSiblingItem key={issueId} issueId={issueId} />
+          (issueId) =>
+            currentIssue.id != issueId && (
+              <IssueParentSiblingItem key={issueId} workspaceSlug={workspaceSlug} issueId={issueId} />
+            )
         )
       ) : (
         <div className="flex items-center gap-2 whitespace-nowrap px-1 py-1 text-left text-xs text-custom-text-200">
@@ -49,4 +53,4 @@ export const IssueParentSiblings: FC<TIssueParentSiblings> = (props) => {
       )}
     </div>
   );
-};
+});

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 {
@@ -219,7 +219,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/list/block.tsx

@@ -68,7 +68,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
     setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id, nestingLevel: nestingLevel });
 
     const issue = issuesMap[issueId];
-    const subIssuesCount = issue.sub_issues_count;
+    const subIssuesCount = issue?.sub_issues_count ?? 0;
 
   const { isMobile } = usePlatformOS();
 

web/components/issues/issue-layouts/properties/all-properties.tsx

@@ -63,7 +63,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const currentLayout = `${activeLayout} layout`;
   // derived values
   const stateDetails = getStateById(issue.state_id);
-  const subIssueCount = issue.sub_issues_count;
+  const subIssueCount = issue?.sub_issues_count ?? 0;
 
   const issueOperations = useMemo(
     () => ({

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-layouts/spreadsheet/columns/sub-issue-column.tsx

@@ -19,7 +19,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = observer((props: Props
   // hooks
   const { workspaceSlug } = useAppRouter();
   // derived values
-  const subIssueCount = issue.sub_issues_count;
+  const subIssueCount = issue?.sub_issues_count ?? 0;
 
   const redirectToIssueDetail = () => {
     router.push({

web/components/issues/issue-layouts/spreadsheet/issue-row.tsx

@@ -203,7 +203,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
   };
 
   const disableUserActions = !canEditProperties(issueDetail.project_id);
-  const subIssuesCount = issueDetail.sub_issues_count;
+  const subIssuesCount = issueDetail?.sub_issues_count ?? 0;
 
   return (
     <>

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

@@ -109,6 +109,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;
@@ -470,6 +471,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                           onChange(description_html);
                           handleFormChange();
                         }}
+                        onEnterKeyPress={() => submitBtnRef?.current?.click()}
                         ref={editorRef}
                         tabIndex={getTabIndex("description_html")}
                         placeholder={getDescriptionPlaceholder}
@@ -770,6 +772,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/issues/sub-issues/issue-list-item.tsx

@@ -61,7 +61,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
     undefined;
 
   const subIssueHelpers = subIssueHelpersByIssueId(parentIssueId);
-  const subIssueCount = issue?.sub_issues_count || 0;
+  const subIssueCount = issue?.sub_issues_count ?? 0;
 
   const handleIssuePeekOverview = (issue: TIssue) =>
     workspaceSlug &&

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

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
+import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
@@ -11,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";
@@ -23,7 +25,6 @@ import {
   LayersIcon,
   CustomSelect,
   ModuleStatusIcon,
-  UserGroupIcon,
   TOAST_TYPE,
   setToast,
   ArchiveIcon,
@@ -252,14 +253,18 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
   const handleFiltersUpdate = useCallback(
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
       if (!workspaceSlug || !projectId) return;
-      const newValues = issueFilters?.filters?.[key] ?? [];
+      let newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
-        // this validation is majorly for the filter start_date, target_date custom
-        value.forEach((val) => {
-          if (!newValues.includes(val)) newValues.push(val);
-          else newValues.splice(newValues.indexOf(val), 1);
-        });
+        if (key === "state") {
+          if (isEqual(newValues, value)) newValues = [];
+          else newValues = value;
+        } else {
+          value.forEach((val) => {
+            if (!newValues.includes(val)) newValues.push(val);
+            else newValues.splice(newValues.indexOf(val), 1);
+          });
+        }
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
         else newValues.push(value);
@@ -493,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
@@ -511,6 +516,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
                     buttonVariant="background-with-text"
                     placeholder="Lead"
                     disabled={!isEditingAllowed || isArchived}
+                    icon={SquareUser}
                   />
                 </div>
               )}
@@ -518,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,
               }}