fix: yarn lock

* chore: pages realtime

* chore: empty binary response

* chore: added a ypy package

* feat: pages collaboration

* chore: update fetching logic

* chore: degrade ypy version

* chore: replace useEffect fetch logic with useSWR

* chore: move all the update logic to the page store

* refactor: remove react-hook-form

* chore: save description_html as well

* chore: migrate old data logic

* fix: added description_binary as field name

* fix: code cleanup

* refactor: create separate hook to handle page description

* fix: build errors

* chore: combine updates instead of using the whole document

* chore: removed ypy package

* chore: added conflict resolving logic to the client side

* chore: add a save changes button

* chore: add read-only validation

* chore: remove saving state information

* chore: added permission class

* chore: removed the migration file

* chore: corrected the model field

* chore: rename pageStore to page

* chore: update collaboration provider

* chore: add try catch to handle error

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>

apiserver/plane/app/urls/inbox.py

@@ -4,6 +4,7 @@ from django.urls import path
 from plane.app.views import (
     InboxViewSet,
     InboxIssueViewSet,
+    InboxIssueDescriptionViewSet,
 )
 
 
@@ -50,4 +51,14 @@ urlpatterns = [
         ),
         name="inbox-issue",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/inbox-issues/<uuid:issue_id>/description/",
+        InboxIssueDescriptionViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+            }
+        ),
+        name="inbox-issue-description",
+    ),
 ]

apiserver/plane/app/urls/issue.py

@@ -19,8 +19,8 @@ from plane.app.views import (
     IssueUserDisplayPropertyEndpoint,
     IssueViewSet,
     LabelViewSet,
-    BulkIssueOperationsEndpoint,
-    BulkArchiveIssuesEndpoint,
+    IssueDescriptionViewSet,
+    ArchivedIssueDescriptionViewSet,
 )
 
 urlpatterns = [
@@ -51,6 +51,16 @@ urlpatterns = [
         ),
         name="project-issue",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:pk>/description/",
+        IssueDescriptionViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+            }
+        ),
+        name="issue-description",
+    ),
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/issue-labels/",
         LabelViewSet.as_view(
@@ -83,11 +93,6 @@ urlpatterns = [
         BulkDeleteIssuesEndpoint.as_view(),
         name="project-issues-bulk",
     ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-archive-issues/",
-        BulkArchiveIssuesEndpoint.as_view(),
-        name="bulk-archive-issues",
-    ),
     ##
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/sub-issues/",
@@ -261,6 +266,16 @@ urlpatterns = [
         ),
         name="project-issue-archive-unarchive",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/<uuid:pk>/description/",
+        ArchivedIssueDescriptionViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+            }
+        ),
+        name="archived-issue-description",
+    ),
     ## End Issue Archives
     ## Issue Relation
     path(
@@ -306,8 +321,13 @@ urlpatterns = [
         name="project-issue-draft",
     ),
     path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/bulk-operation-issues/",
-        BulkIssueOperationsEndpoint.as_view(),
-        name="bulk-operations-issues",
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-drafts/<uuid:pk>/description/",
+        IssueDraftViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+            }
+        ),
+        name="draft-issue-description",
     ),
 ]

apiserver/plane/app/views/__init__.py

@@ -106,6 +106,7 @@ from .issue.base import (
     IssueListEndpoint,
     IssueViewSet,
     IssueUserDisplayPropertyEndpoint,
+    IssueDescriptionViewSet,
     BulkDeleteIssuesEndpoint,
 )
 
@@ -113,7 +114,8 @@ from .issue.activity import (
     IssueActivityEndpoint,
 )
 
-from .issue.archive import IssueArchiveViewSet, BulkArchiveIssuesEndpoint
+from .issue.archive import IssueArchiveViewSet
+from .issue.archive import IssueArchiveViewSet, ArchivedIssueDescriptionViewSet
 
 from .issue.attachment import (
     IssueAttachmentEndpoint,
@@ -124,7 +126,7 @@ from .issue.comment import (
     CommentReactionViewSet,
 )
 
-from .issue.draft import IssueDraftViewSet
+from .issue.draft import IssueDraftViewSet, DraftIssueDescriptionViewSet
 
 from .issue.label import (
     LabelViewSet,
@@ -151,9 +153,6 @@ from .issue.subscriber import (
     IssueSubscriberViewSet,
 )
 
-
-from .issue.bulk_operations import BulkIssueOperationsEndpoint
-
 from .module.base import (
     ModuleViewSet,
     ModuleLinkViewSet,
@@ -194,7 +193,11 @@ from .estimate.base import (
     EstimatePointEndpoint,
 )
 
-from .inbox.base import InboxViewSet, InboxIssueViewSet
+from .inbox.base import (
+    InboxViewSet,
+    InboxIssueViewSet,
+    InboxIssueDescriptionViewSet,
+)
 
 from .analytic.base import (
     AnalyticsEndpoint,

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

@@ -1,5 +1,6 @@
 # Python imports
 import json
+import base64
 
 # Django import
 from django.utils import timezone
@@ -9,6 +10,7 @@ from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
 from django.db.models import Value, UUIDField
 from django.db.models.functions import Coalesce
+from django.http import StreamingHttpResponse
 
 # Third party imports
 from rest_framework import status
@@ -578,3 +580,48 @@ class InboxIssueViewSet(BaseViewSet):
 
         inbox_issue.delete()
         return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class InboxIssueDescriptionViewSet(BaseViewSet):
+    permission_classes = [
+        ProjectLitePermission,
+    ]
+
+    def retrieve(self, request, slug, project_id, pk):
+        issue = Issue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id
+        )
+        binary_data = issue.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="issue_description.bin"'
+        )
+        return response
+
+    def partial_update(self, request, slug, project_id, pk):
+        issue = Issue.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
+            issue.description_binary = new_binary_data
+            issue.description_html = request.data.get("description_html")
+            issue.save()
+            return Response({"message": "Updated successfully"})
+        else:
+            return Response({"error": "No binary data provided"})

apiserver/plane/app/views/issue/archive.py

@@ -1,5 +1,6 @@
 # Python imports
 import json
+import base64
 
 # Django imports
 from django.core.serializers.json import DjangoJSONEncoder
@@ -12,6 +13,7 @@ from django.db.models import (
     Exists,
 )
 from django.utils import timezone
+from django.http import StreamingHttpResponse
 from django.utils.decorators import method_decorator
 from django.views.decorators.gzip import gzip_page
 
@@ -319,56 +321,46 @@ class IssueArchiveViewSet(BaseViewSet):
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
-class BulkArchiveIssuesEndpoint(BaseAPIView):
+class ArchivedIssueDescriptionViewSet(BaseViewSet):
     permission_classes = [
         ProjectEntityPermission,
     ]
 
-    def post(self, request, slug, project_id):
-        issue_ids = request.data.get("issue_ids", [])
-
-        if not len(issue_ids):
-            return Response(
-                {"error": "Issue IDs are required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        issues = Issue.objects.filter(
-            workspace__slug=slug, project_id=project_id, pk__in=issue_ids
-        ).select_related("state")
-        bulk_archive_issues = []
-        for issue in issues:
-            if issue.state.group not in ["completed", "cancelled"]:
-                return Response(
-                    {
-                        "error_code": 4091,
-                        "error_message": "INVALID_ARCHIVE_STATE_GROUP"
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-            issue_activity.delay(
-                type="issue.activity.updated",
-                requested_data=json.dumps(
-                    {
-                        "archived_at": str(timezone.now().date()),
-                        "automation": False,
-                    }
-                ),
-                actor_id=str(request.user.id),
-                issue_id=str(issue.id),
-                project_id=str(project_id),
-                current_instance=json.dumps(
-                    IssueSerializer(issue).data, cls=DjangoJSONEncoder
-                ),
-                epoch=int(timezone.now().timestamp()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            issue.archived_at = timezone.now().date()
-            bulk_archive_issues.append(issue)
-        Issue.objects.bulk_update(bulk_archive_issues, ["archived_at"])
-
-        return Response(
-            {"archived_at": str(timezone.now().date())},
-            status=status.HTTP_200_OK,
+    def retrieve(self, request, slug, project_id, pk):
+        issue = Issue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id
         )
+        binary_data = issue.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="issue_description.bin"'
+        )
+        return response
+
+    def partial_update(self, request, slug, project_id, pk):
+        issue = Issue.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
+            issue.description_binary = new_binary_data
+            issue.description_html = request.data.get("description_html")
+            issue.save()
+            return Response({"message": "Updated successfully"})
+        else:
+            return Response({"error": "No binary data provided"})

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

@@ -1,9 +1,11 @@
 # Python imports
 import json
+import base64
 
 # Django imports
 from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
+from django.http import StreamingHttpResponse
 from django.core.serializers.json import DjangoJSONEncoder
 from django.db.models import (
     Exists,
@@ -59,8 +61,6 @@ from plane.utils.paginator import (
 from .. import BaseAPIView, BaseViewSet
 from plane.utils.user_timezone_converter import user_timezone_converter
 
-# Module imports
-
 
 class IssueListEndpoint(BaseAPIView):
 
@@ -591,3 +591,48 @@ class BulkDeleteIssuesEndpoint(BaseAPIView):
             {"message": f"{total_issues} issues were deleted"},
             status=status.HTTP_200_OK,
         )
+
+
+class IssueDescriptionViewSet(BaseViewSet):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def retrieve(self, request, slug, project_id, pk):
+        issue = Issue.issue_objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id
+        )
+        binary_data = issue.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="issue_description.bin"'
+        )
+        return response
+
+    def partial_update(self, request, slug, project_id, pk):
+        issue = Issue.issue_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
+            issue.description_binary = new_binary_data
+            issue.description_html = request.data.get("description_html")
+            issue.save()
+            return Response({"message": "Updated successfully"})
+        else:
+            return Response({"error": "No binary data provided"})

apiserver/plane/app/views/issue/bulk_operations.py

@@ -1,288 +0,0 @@
-# Python imports
-import json
-from datetime import datetime
-
-# Django imports
-from django.utils import timezone
-
-# Third Party imports
-from rest_framework.response import Response
-from rest_framework import status
-
-# Module imports
-from .. import BaseAPIView
-from plane.app.permissions import (
-    ProjectEntityPermission,
-)
-from plane.db.models import (
-    Project,
-    Issue,
-    IssueLabel,
-    IssueAssignee,
-)
-from plane.bgtasks.issue_activites_task import issue_activity
-
-
-class BulkIssueOperationsEndpoint(BaseAPIView):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-
-    def post(self, request, slug, project_id):
-        issue_ids = request.data.get("issue_ids", [])
-        if not len(issue_ids):
-            return Response(
-                {"error": "Issue IDs are required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        # Get all the issues
-        issues = (
-            Issue.objects.filter(
-                workspace__slug=slug, project_id=project_id, pk__in=issue_ids
-            )
-            .select_related("state")
-            .prefetch_related("labels", "assignees")
-        )
-        # Current epoch
-        epoch = int(timezone.now().timestamp())
-
-        # Project details
-        project = Project.objects.get(workspace__slug=slug, pk=project_id)
-        workspace_id = project.workspace_id
-
-        # Initialize arrays
-        bulk_update_issues = []
-        bulk_issue_activities = []
-        bulk_update_issue_labels = []
-        bulk_update_issue_assignees = []
-
-        properties = request.data.get("properties", {})
-
-        if properties.get("start_date", False) and properties.get("target_date", False):
-            if (
-                datetime.strptime(properties.get("start_date"), "%Y-%m-%d").date()
-                > datetime.strptime(properties.get("target_date"), "%Y-%m-%d").date()
-            ):
-                return Response(
-                    {
-                        "error_code": 4100,
-                        "error_message": "INVALID_ISSUE_DATES",
-                    },
-                    status=status.HTTP_400_BAD_REQUEST,
-                )
-
-        for issue in issues:
-
-            # Priority
-            if properties.get("priority", False):
-                bulk_issue_activities.append(
-                    {
-                        "type": "issue.activity.updated",
-                        "requested_data": json.dumps(
-                            {"priority": properties.get("priority")}
-                        ),
-                        "current_instance": json.dumps(
-                            {"priority": (issue.priority)}
-                        ),
-                        "issue_id": str(issue.id),
-                        "actor_id": str(request.user.id),
-                        "project_id": str(project_id),
-                        "epoch": epoch,
-                    }
-                )
-                issue.priority = properties.get("priority")
-
-            # State
-            if properties.get("state_id", False):
-                bulk_issue_activities.append(
-                    {
-                        "type": "issue.activity.updated",
-                        "requested_data": json.dumps(
-                            {"state": properties.get("state")}
-                        ),
-                        "current_instance": json.dumps(
-                            {"state": str(issue.state_id)}
-                        ),
-                        "issue_id": str(issue.id),
-                        "actor_id": str(request.user.id),
-                        "project_id": str(project_id),
-                        "epoch": epoch,
-                    }
-                )
-                issue.state_id = properties.get("state_id")
-
-            # Start date
-            if properties.get("start_date", False):
-                if (
-                    issue.target_date
-                    and not properties.get("target_date", False)
-                    and issue.target_date
-                    <= datetime.strptime(
-                        properties.get("start_date"), "%Y-%m-%d"
-                    ).date()
-                ):
-                    return Response(
-                        {
-                            "error_code": 4101,
-                            "error_message": "INVALID_ISSUE_START_DATE",
-                        },
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-                bulk_issue_activities.append(
-                    {
-                        "type": "issue.activity.updated",
-                        "requested_data": json.dumps(
-                            {"start_date": properties.get("start_date")}
-                        ),
-                        "current_instance": json.dumps(
-                            {"start_date": str(issue.start_date)}
-                        ),
-                        "issue_id": str(issue.id),
-                        "actor_id": str(request.user.id),
-                        "project_id": str(project_id),
-                        "epoch": epoch,
-                    }
-                )
-                issue.start_date = properties.get("start_date")
-
-            # Target date
-            if properties.get("target_date", False):
-                if (
-                    issue.start_date
-                    and not properties.get("start_date", False)
-                    and issue.start_date
-                    >= datetime.strptime(
-                        properties.get("target_date"), "%Y-%m-%d"
-                    ).date()
-                ):
-                    return Response(
-                        {
-                            "error_code": 4102,
-                            "error_message": "INVALID_ISSUE_TARGET_DATE",
-                        },
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-                bulk_issue_activities.append(
-                    {
-                        "type": "issue.activity.updated",
-                        "requested_data": json.dumps(
-                            {"target_date": properties.get("target_date")}
-                        ),
-                        "current_instance": json.dumps(
-                            {"target_date": str(issue.target_date)}
-                        ),
-                        "issue_id": str(issue.id),
-                        "actor_id": str(request.user.id),
-                        "project_id": str(project_id),
-                        "epoch": epoch,
-                    }
-                )
-                issue.target_date = properties.get("target_date")
-
-            bulk_update_issues.append(issue)
-
-            # Labels
-            if properties.get("label_ids", []):
-                for label_id in properties.get("label_ids", []):
-                    bulk_update_issue_labels.append(
-                        IssueLabel(
-                            issue=issue,
-                            label_id=label_id,
-                            created_by=request.user,
-                            project_id=project_id,
-                            workspace_id=workspace_id,
-                        )
-                    )
-                bulk_issue_activities.append(
-                    {
-                        "type": "issue.activity.updated",
-                        "requested_data": json.dumps(
-                            {"label_ids": properties.get("label_ids", [])}
-                        ),
-                        "current_instance": json.dumps(
-                            {
-                                "label_ids": [
-                                    str(label.id)
-                                    for label in issue.labels.all()
-                                ]
-                            }
-                        ),
-                        "issue_id": str(issue.id),
-                        "actor_id": str(request.user.id),
-                        "project_id": str(project_id),
-                        "epoch": epoch,
-                    }
-                )
-
-            # Assignees
-            if properties.get("assignee_ids", []):
-                for assignee_id in properties.get(
-                    "assignee_ids", issue.assignees
-                ):
-                    bulk_update_issue_assignees.append(
-                        IssueAssignee(
-                            issue=issue,
-                            assignee_id=assignee_id,
-                            created_by=request.user,
-                            project_id=project_id,
-                            workspace_id=workspace_id,
-                        )
-                    )
-                bulk_issue_activities.append(
-                    {
-                        "type": "issue.activity.updated",
-                        "requested_data": json.dumps(
-                            {
-                                "assignee_ids": properties.get(
-                                    "assignee_ids", []
-                                )
-                            }
-                        ),
-                        "current_instance": json.dumps(
-                            {
-                                "assignee_ids": [
-                                    str(assignee.id)
-                                    for assignee in issue.assignees.all()
-                                ]
-                            }
-                        ),
-                        "issue_id": str(issue.id),
-                        "actor_id": str(request.user.id),
-                        "project_id": str(project_id),
-                        "epoch": epoch,
-                    }
-                )
-
-        # Bulk update all the objects
-        Issue.objects.bulk_update(
-            bulk_update_issues,
-            [
-                "priority",
-                "start_date",
-                "target_date",
-                "state",
-            ],
-            batch_size=100,
-        )
-
-        # Create new labels
-        IssueLabel.objects.bulk_create(
-            bulk_update_issue_labels,
-            ignore_conflicts=True,
-            batch_size=100,
-        )
-
-        # Create new assignees
-        IssueAssignee.objects.bulk_create(
-            bulk_update_issue_assignees,
-            ignore_conflicts=True,
-            batch_size=100,
-        )
-        # update the issue activity
-        [
-            issue_activity.delay(**activity)
-            for activity in bulk_issue_activities
-        ]
-
-        return Response(status=status.HTTP_204_NO_CONTENT)

apiserver/plane/app/views/issue/draft.py

@@ -1,8 +1,10 @@
 # Python imports
 import json
+import base64
 
 # Django imports
 from django.contrib.postgres.aggregates import ArrayAgg
+from django.http import StreamingHttpResponse
 from django.contrib.postgres.fields import ArrayField
 from django.core.serializers.json import DjangoJSONEncoder
 from django.db.models import (
@@ -393,3 +395,48 @@ class IssueDraftViewSet(BaseViewSet):
             origin=request.META.get("HTTP_ORIGIN"),
         )
         return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class DraftIssueDescriptionViewSet(BaseViewSet):
+    permission_classes = [
+        ProjectEntityPermission,
+    ]
+
+    def retrieve(self, request, slug, project_id, pk):
+        issue = Issue.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id
+        )
+        binary_data = issue.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="issue_description.bin"'
+        )
+        return response
+
+    def partial_update(self, request, slug, project_id, pk):
+        issue = Issue.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
+            issue.description_binary = new_binary_data
+            issue.description_html = request.data.get("description_html")
+            issue.save()
+            return Response({"message": "Updated successfully"})
+        else:
+            return Response({"error": "No binary data provided"})

packages/editor/core/package.json

@@ -54,7 +54,11 @@
     "react-moveable": "^0.54.2",
     "tailwind-merge": "^1.14.0",
     "tippy.js": "^6.3.7",
-    "tiptap-markdown": "^0.8.9"
+    "tiptap-markdown": "^0.8.9",
+    "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/core/src/hooks/use-conflict-free-editor.ts

@@ -0,0 +1,78 @@
+import { useEffect, useLayoutEffect, useMemo } from "react";
+import { EditorProps } from "@tiptap/pm/view";
+import { IndexeddbPersistence } from "y-indexeddb";
+import * as Y from "yjs";
+import { EditorRefApi, IMentionHighlight, IMentionSuggestion, TFileHandler, useEditor } from "src";
+// custom provider
+import { CollaborationProvider } from "src/providers/collaboration-provider";
+
+type DocumentEditorProps = {
+  id: string;
+  fileHandler: TFileHandler;
+  value: Uint8Array;
+  extensions?: any;
+  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);
+  tabIndex?: number;
+};
+
+export const useConflictFreeEditor = ({
+  id,
+  editorProps = {},
+  value,
+  extensions,
+  editorClassName,
+  fileHandler,
+  onChange,
+  forwardedRef,
+  tabIndex,
+  handleEditorReady,
+  mentionHandler,
+  placeholder,
+}: 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,
+    placeholder,
+    tabIndex,
+  });
+
+  return editor;
+};

packages/editor/core/src/index.ts

@@ -17,6 +17,7 @@ export { EditorContentWrapper } from "src/ui/components/editor-content";
 
 // hooks
 export { useEditor } from "src/hooks/use-editor";
+export { useConflictFreeEditor } from "src/hooks/use-conflict-free-editor";
 export { useReadOnlyEditor } from "src/hooks/use-read-only-editor";
 
 // helper items

packages/editor/core/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/rich-text-editor/src/ui/index.tsx

@@ -7,9 +7,9 @@ import {
   getEditorClassNames,
   IMentionHighlight,
   IMentionSuggestion,
-  useEditor,
   EditorRefApi,
   TFileHandler,
+  useConflictFreeEditor,
 } from "@plane/editor-core";
 // extensions
 import { RichTextEditorExtensions } from "src/ui/extensions";
@@ -17,14 +17,13 @@ import { RichTextEditorExtensions } from "src/ui/extensions";
 import { EditorBubbleMenu } from "src/ui/menus/bubble-menu";
 
 export type IRichTextEditor = {
-  initialValue: string;
-  value?: string | null;
+  value: Uint8Array;
   dragDropEnabled?: boolean;
   fileHandler: TFileHandler;
   id?: string;
   containerClassName?: string;
   editorClassName?: string;
-  onChange?: (json: object, html: string) => void;
+  onChange: (updates: Uint8Array) => void;
   forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
   debouncedUpdatesEnabled?: boolean;
   mentionHandler: {
@@ -40,7 +39,6 @@ const RichTextEditor = (props: IRichTextEditor) => {
   const {
     onChange,
     dragDropEnabled,
-    initialValue,
     value,
     fileHandler,
     containerClassName,
@@ -62,24 +60,22 @@ const RichTextEditor = (props: IRichTextEditor) => {
     setHideDragHandleOnMouseLeave(() => hideDragHandlerFromDragDrop);
   };
 
-  const editor = useEditor({
+  const editor = useConflictFreeEditor({
     id,
     editorClassName,
     fileHandler,
-    onChange,
-    initialValue,
     value,
+    onChange,
     forwardedRef,
-    // rerenderOnPropsChange,
     extensions: RichTextEditorExtensions({
       uploadFile: fileHandler.upload,
       dragDropEnabled,
       setHideDragHandle: setHideDragHandleFunction,
       onEnterKeyPress,
     }),
-    tabIndex,
     mentionHandler,
     placeholder,
+    tabIndex,
   });
 
   const editorContainerClassName = getEditorClassNames({

packages/types/src/issues/issue.d.ts

@@ -3,9 +3,13 @@ import { TIssueAttachment } from "./issue_attachment";
 import { TIssueLink } from "./issue_link";
 import { TIssueReaction } from "./issue_reaction";
 
-// new issue structure types
+export type TIssueDescription = {
+  description_binary: string;
+  description_html: string;
+};
 
-export type TBaseIssue = {
+// new issue structure types
+export type TIssue = TIssueDescription & {
   id: string;
   sequence_id: number;
   name: string;

web/core/components/inbox/content/issue-root.tsx

@@ -2,8 +2,8 @@
 
 import { Dispatch, SetStateAction, useEffect, useMemo } from "react";
 import { observer } from "mobx-react";
+import { TIssue, TIssueDescription } from "@plane/types";
 import { usePathname } from "next/navigation";
-import { TIssue } from "@plane/types";
 import { Loader, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { InboxIssueContentProperties } from "@/components/inbox/content";
@@ -20,6 +20,7 @@ import { useEventTracker, useProjectInbox, useUser } from "@/hooks/store";
 import useReloadConfirmations from "@/hooks/use-reload-confirmation";
 // store types
 import { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
+import { useIssueDescription } from "@/hooks/use-issue-description";
 
 type Props = {
   workspaceSlug: string;
@@ -39,6 +40,16 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
   const { captureIssueEvent } = useEventTracker();
   const { loader } = useProjectInbox();
 
+  const { issueDescriptionYJS, handleDescriptionChange, isDescriptionReady } = useIssueDescription({
+    canUpdateDescription: isEditable,
+    isSubmitting,
+    issueId,
+    projectId,
+    setIsSubmitting,
+    updateIssueDescription: issueOperations.updateDescription,
+    workspaceSlug,
+  });
+
   useEffect(() => {
     if (isSubmitting === "submitted") {
       setShowAlert(false);
@@ -108,8 +119,37 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           });
         }
       },
+      updateDescription: async (workspaceSlug: string, projectId: string, issueId: string, data: TIssueDescription) => {
+        try {
+          await inboxIssue.updateIssueDescription(data);
+          captureIssueEvent({
+            eventName: "Inbox issue updated",
+            payload: { ...data, state: "SUCCESS", element: "Inbox" },
+            updates: {
+              changed_property: Object.keys(data).join(","),
+              change_details: Object.values(data).join(","),
+            },
+            path: router.asPath,
+          });
+        } catch (error) {
+          setToast({
+            title: "Issue update failed",
+            type: TOAST_TYPE.ERROR,
+            message: "Issue update failed",
+          });
+          captureIssueEvent({
+            eventName: "Inbox issue updated",
+            payload: { state: "SUCCESS", element: "Inbox" },
+            updates: {
+              changed_property: Object.keys(data).join(","),
+              change_details: Object.values(data).join(","),
+            },
+            path: router.asPath,
+          });
+        }
+      },
     }),
-    [inboxIssue]
+    [captureIssueEvent, inboxIssue, router.asPath]
   );
 
   if (!issue?.project_id || !issue?.id) return <></>;
@@ -135,11 +175,10 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           </Loader>
         ) : (
           <IssueDescriptionInput
+            value={issueDescriptionYJS}
             workspaceSlug={workspaceSlug}
             projectId={issue.project_id}
             issueId={issue.id}
-            swrIssueDescription={issue.description_html ?? "<p></p>"}
-            initialValue={issue.description_html ?? "<p></p>"}
             disabled={!isEditable}
             issueOperations={issueOperations}
             setIsSubmitting={(value) => setIsSubmitting(value)}

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

@@ -6,7 +6,7 @@ import { EditorRefApi } from "@plane/rich-text-editor";
 import { TIssue } from "@plane/types";
 import { Loader } from "@plane/ui";
 // components
-import { RichTextEditor } from "@/components/editor/rich-text-editor/rich-text-editor";
+import { RichTextEditor } from "@/components/editor";
 // helpers
 import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
 // hooks

web/core/components/issues/description-input.tsx

@@ -15,18 +15,18 @@ import { TIssueOperations } from "@/components/issues/issue-detail";
 import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
 // hooks
 import { useWorkspace } from "@/hooks/store";
+import { useIssueDescription } from "@/hooks/use-issue-description";
 
 export type IssueDescriptionInputProps = {
   containerClassName?: string;
   workspaceSlug: string;
   projectId: string;
   issueId: string;
-  initialValue: string | undefined;
   disabled?: boolean;
   issueOperations: TIssueOperations;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
   setIsSubmitting: (initialValue: "submitting" | "submitted" | "saved") => void;
-  swrIssueDescription: string | null | undefined;
+  value: Uint8Array;
 };
 
 export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((props) => {
@@ -36,98 +36,42 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
     projectId,
     issueId,
     disabled,
-    swrIssueDescription,
-    initialValue,
     issueOperations,
     setIsSubmitting,
     placeholder,
+    value,
   } = props;
 
-  const { handleSubmit, reset, control } = useForm<TIssue>({
-    defaultValues: {
-      description_html: initialValue,
-    },
-  });
-
-  const [localIssueDescription, setLocalIssueDescription] = useState({
-    id: issueId,
-    description_html: initialValue,
-  });
-
-  const handleDescriptionFormSubmit = useCallback(
-    async (formData: Partial<TIssue>) => {
-      await issueOperations.update(workspaceSlug, projectId, issueId, {
-        description_html: formData.description_html ?? "<p></p>",
-      });
-    },
-    [workspaceSlug, projectId, issueId, issueOperations]
-  );
-
   const { getWorkspaceBySlug } = useWorkspace();
   // computed values
   const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id as string;
 
-  // reset form values
-  useEffect(() => {
-    if (!issueId) return;
-    reset({
-      id: issueId,
-      description_html: initialValue === "" ? "<p></p>" : initialValue,
-    });
-    setLocalIssueDescription({
-      id: issueId,
-      description_html: initialValue === "" ? "<p></p>" : initialValue,
-    });
-  }, [initialValue, issueId, reset]);
-
-  // ADDING handleDescriptionFormSubmit TO DEPENDENCY ARRAY PRODUCES ADVERSE EFFECTS
-  // TODO: Verify the exhaustive-deps warning
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debouncedFormSave = useCallback(
-    debounce(async () => {
-      handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
-    }, 1500),
-    [handleSubmit, issueId]
-  );
+  if (!isDescriptionReady)
+    return (
+      <Loader>
+        <Loader.Item height="150px" />
+      </Loader>
+    );
 
   return (
     <>
-      {localIssueDescription.description_html ? (
-        <Controller
-          name="description_html"
-          control={control}
-          render={({ field: { onChange } }) =>
-            !disabled ? (
-              <RichTextEditor
-                id={issueId}
-                initialValue={localIssueDescription.description_html ?? "<p></p>"}
-                value={swrIssueDescription ?? null}
-                workspaceSlug={workspaceSlug}
-                workspaceId={workspaceId}
-                projectId={projectId}
-                dragDropEnabled
-                onChange={(_description: object, description_html: string) => {
-                  setIsSubmitting("submitting");
-                  onChange(description_html);
-                  debouncedFormSave();
-                }}
-                placeholder={
-                  placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value)
-                }
-                containerClassName={containerClassName}
-              />
-            ) : (
-              <RichTextReadOnlyEditor
-                initialValue={localIssueDescription.description_html ?? ""}
-                containerClassName={containerClassName}
-              />
-            )
-          }
+      {!disabled ? (
+        <RichTextEditor
+          id={issueId}
+          value={value}
+          workspaceSlug={workspaceSlug}
+          workspaceId={workspaceId}
+          projectId={projectId}
+          dragDropEnabled
+          onChange={handleDescriptionChange}
+          placeholder={placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value)}
+          containerClassName={containerClassName}
         />
       ) : (
-        <Loader>
-          <Loader.Item height="150px" />
-        </Loader>
+        <RichTextReadOnlyEditor
+          initialValue={localIssueDescription.description_html ?? ""}
+          containerClassName={containerClassName}
+        />
       )}
     </>
   );

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

@@ -4,7 +4,7 @@ import { FC, useMemo } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter } from "next/navigation";
 // types
-import { TIssue } from "@plane/types";
+import { TIssue, TIssueDescription } from "@plane/types";
 // ui
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
 // components
@@ -25,6 +25,12 @@ import { IssueDetailsSidebar } from "./sidebar";
 export type TIssueOperations = {
   fetch: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   update: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  updateDescription: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: TIssueDescription
+  ) => Promise<void>;
   remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   archive?: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   restore?: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
@@ -64,6 +70,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
     issue: { getIssueById },
     fetchIssue,
     updateIssue,
+    updateIssueDescription,
     removeIssue,
     archiveIssue,
     addCycleToIssue,
@@ -120,6 +127,35 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
           });
         }
       },
+      updateDescription: async (workspaceSlug: string, projectId: string, issueId: string, data: TIssueDescription) => {
+        try {
+          await updateIssueDescription(workspaceSlug, projectId, issueId, data);
+          captureIssueEvent({
+            eventName: ISSUE_UPDATED,
+            payload: { ...data, issueId, state: "SUCCESS", element: "Issue detail page" },
+            updates: {
+              changed_property: Object.keys(data).join(","),
+              change_details: Object.values(data).join(","),
+            },
+            path: router.asPath,
+          });
+        } catch (error) {
+          captureIssueEvent({
+            eventName: ISSUE_UPDATED,
+            payload: { state: "FAILED", element: "Issue detail page" },
+            updates: {
+              changed_property: Object.keys(data).join(","),
+              change_details: Object.values(data).join(","),
+            },
+            path: router.asPath,
+          });
+          setToast({
+            title: "Error!",
+            type: TOAST_TYPE.ERROR,
+            message: "Issue update failed",
+          });
+        }
+      },
       remove: async (workspaceSlug: string, projectId: string, issueId: string) => {
         try {
           if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);

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

@@ -1,12 +1,10 @@
-"use client";
-
 // ui
 import { Loader } from "@plane/ui";
 
 export const PageContentLoader = () => (
   <div className="relative w-full h-full flex flex-col">
     {/* header */}
-    <div className="px-16 flex-shrink-0 relative flex items-center justify-between h-12 border-b border-custom-border-100">
+    <div className="px-4 flex-shrink-0 relative flex items-center justify-between h-12 border-b border-custom-border-100">
       {/* left options */}
       <Loader className="flex-shrink-0 w-[280px]">
         <Loader.Item width="26px" height="26px" />
@@ -47,7 +45,34 @@ export const PageContentLoader = () => (
     </div>
 
     {/* content */}
-    <div className="px-16 w-full h-full overflow-hidden relative flex">
+    <div className="px-4 w-full h-full overflow-hidden relative flex">
+      {/* table of content loader */}
+      <div className="flex-shrink-0 w-[280px] pr-5 py-5">
+        <Loader className="w-full space-y-4">
+          <Loader.Item width="100%" height="24px" />
+          <div className="space-y-2">
+            <Loader.Item width="60%" height="12px" />
+            <div className="ml-6 space-y-2">
+              <Loader.Item width="80%" height="12px" />
+              <Loader.Item width="100%" height="12px" />
+            </div>
+            <Loader.Item width="60%" height="12px" />
+            <div className="ml-6 space-y-2">
+              <Loader.Item width="80%" height="12px" />
+              <Loader.Item width="100%" height="12px" />
+            </div>
+            <Loader.Item width="100%" height="12px" />
+            <Loader.Item width="60%" height="12px" />
+            <div className="ml-6 space-y-2">
+              <Loader.Item width="80%" height="12px" />
+              <Loader.Item width="100%" height="12px" />
+            </div>
+            <Loader.Item width="80%" height="12px" />
+            <Loader.Item width="100%" height="12px" />
+          </div>
+        </Loader>
+      </div>
+
       {/* editor loader */}
       <div className="w-full h-full py-5">
         <Loader className="relative space-y-4">

web/core/hooks/use-issue-description.ts

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

web/core/services/inbox/inbox-issue.service.ts

@@ -1,5 +1,5 @@
 // types
-import type { TInboxIssue, TIssue, TInboxIssueWithPagination } from "@plane/types";
+import type { TInboxIssue, TIssue, TInboxIssueWithPagination, TIssueDescription } from "@plane/types";
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { APIService } from "@/services/api.service";
 // helpers
@@ -68,6 +68,38 @@ export class InboxIssueService extends APIService {
       });
   }
 
+  async fetchDescriptionBinary(workspaceSlug: string, projectId: string, inboxIssueId: string): Promise<any> {
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inbox-issues/${inboxIssueId}/description/`,
+      {
+        headers: {
+          "Content-Type": "application/octet-stream",
+        },
+        responseType: "arraybuffer",
+      }
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateDescriptionBinary(
+    workspaceSlug: string,
+    projectId: string,
+    inboxIssueId: string,
+    data: TIssueDescription
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inbox-issues/${inboxIssueId}/description/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async destroy(workspaceSlug: string, projectId: string, inboxIssueId: string): Promise<void> {
     return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inbox-issues/${inboxIssueId}/`)
       .then((response) => response?.data)

web/core/services/issue/issue.service.ts

@@ -1,5 +1,5 @@
 // types
-import type { TIssue, IIssueDisplayProperties, TIssueLink, TIssueSubIssues, TIssueActivity, TIssuesResponse, TBulkOperationsPayload } from "@plane/types";
+import type { TIssue, IIssueDisplayProperties, TIssueLink, TIssueSubIssues, TIssueActivity, TIssuesResponse, TBulkOperationsPayload, TIssueDescription } from "@plane/types";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
 // services
@@ -56,6 +56,32 @@ export class IssueService extends APIService {
       });
   }
 
+  async fetchDescriptionBinary(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/description/`, {
+      headers: {
+        "Content-Type": "application/octet-stream",
+      },
+      responseType: "arraybuffer",
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateDescriptionBinary(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: TIssueDescription
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/description/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async retrieveIssues(workspaceSlug: string, projectId: string, issueIds: string[]): Promise<TIssue[]> {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/list/`, {
       params: { issues: issueIds.join(",") },

web/core/store/inbox/inbox-issue.store.ts

@@ -1,7 +1,7 @@
 import clone from "lodash/clone";
 import set from "lodash/set";
 import { makeObservable, observable, runInAction, action } from "mobx";
-import { TIssue, TInboxIssue, TInboxIssueStatus, TInboxDuplicateIssueDetails } from "@plane/types";
+import { TIssue, TInboxIssue, TInboxIssueStatus, TInboxDuplicateIssueDetails, TIssueDescription } from "@plane/types";
 // helpers
 import { EInboxIssueStatus } from "@/helpers/inbox.helper";
 // services
@@ -24,6 +24,7 @@ export interface IInboxIssueStore {
   updateInboxIssueDuplicateTo: (issueId: string) => Promise<void>; // connecting the inbox issue to the project existing issue
   updateInboxIssueSnoozeTill: (date: Date) => Promise<void>; // snooze the issue
   updateIssue: (issue: Partial<TIssue>) => Promise<void>; // updating the issue
+  updateIssueDescription: (issue: TIssueDescription) => Promise<void>; // updating the issue
   updateProjectIssue: (issue: Partial<TIssue>) => Promise<void>; // updating the issue
   fetchIssueActivity: () => Promise<void>; // fetching the issue activity
 }
@@ -76,6 +77,7 @@ export class InboxIssueStore implements IInboxIssueStore {
       updateInboxIssueDuplicateTo: action,
       updateInboxIssueSnoozeTill: action,
       updateIssue: action,
+      updateIssueDescription: action,
       updateProjectIssue: action,
       fetchIssueActivity: action,
     });
@@ -167,6 +169,25 @@ export class InboxIssueStore implements IInboxIssueStore {
     }
   };
 
+  updateIssueDescription = async (issue: TIssueDescription) => {
+    const inboxIssue = clone(this.issue);
+    try {
+      if (!this.issue.id) return;
+      runInAction(() => {
+        this.issue.description_binary = issue.description_binary;
+        this.issue.description_html = issue.description_html;
+      });
+      await this.inboxIssueService.updateDescriptionBinary(this.workspaceSlug, this.projectId, this.issue.id, issue);
+      // fetching activity
+      this.fetchIssueActivity();
+    } catch {
+      runInAction(() => {
+        this.issue.description_binary = inboxIssue.description_binary;
+        this.issue.description_html = inboxIssue.description_html;
+      });
+    }
+  };
+
   updateProjectIssue = async (issue: Partial<TIssue>) => {
     const inboxIssue = clone(this.issue);
     try {

web/core/store/issue/helpers/base-issues.store.ts

@@ -27,6 +27,7 @@ import {
   TGroupedIssueCount,
   TPaginationData,
   TBulkOperationsPayload,
+  TIssueDescription,
 } from "@plane/types";
 import { ALL_ISSUES, EIssueLayoutTypes, ISSUE_PRIORITIES } from "@/constants/issue";
 import { convertToISODateString } from "@/helpers/date-time.helper";
@@ -221,6 +222,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
 
       createIssue: action,
       updateIssue: action,
+      updateIssueDescription: action,
       createDraftIssue: action,
       updateDraftIssue: action,
       issueQuickAdd: action.bound,
@@ -554,6 +556,20 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
     }
   }
 
+  updateIssueDescription = async (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: TIssueDescription
+  ) => {
+    try {
+      this.rootIssueStore.issues.updateIssue(issueId, data);
+      await this.issueService.updateDescriptionBinary(workspaceSlug, projectId, issueId, data);
+    } catch (error) {
+      throw error;
+    }
+  }
+
   /**
    * Similar to Create Issue but for creating Draft issues
    * @param workspaceSlug

web/core/store/issue/issue-details/issue.store.ts

@@ -1,7 +1,7 @@
 import { makeObservable } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
-import { TIssue } from "@plane/types";
+import { TIssue, TIssueDescription } from "@plane/types";
 // services
 import { IssueArchiveService, IssueDraftService, IssueService } from "@/services/issue";
 // types
@@ -16,6 +16,12 @@ export interface IIssueStoreActions {
     issueType?: "DEFAULT" | "DRAFT" | "ARCHIVED"
   ) => Promise<TIssue>;
   updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  updateIssueDescription: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: TIssueDescription
+  ) => Promise<void>;
   removeIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   addCycleToIssue: (workspaceSlug: string, projectId: string, cycleId: string, issueId: string) => Promise<void>;
@@ -157,6 +163,19 @@ export class IssueStore implements IIssueStore {
     await this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
   };
 
+  /**
+   * @description update the issue description
+   * @param {string} binaryString
+   * @param {string} descriptionHTML
+   */
+  updateIssueDescription = async (workspaceSlug: string, projectId: string, issueId: string, data: TIssueDescription) =>
+    this.rootIssueDetailStore.rootIssueStore.projectIssues.updateIssueDescription(
+      workspaceSlug,
+      projectId,
+      issueId,
+      data
+    );
+
   removeIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>
     this.rootIssueDetailStore.rootIssueStore.projectIssues.removeIssue(workspaceSlug, projectId, issueId);
 

web/core/store/issue/project/issue.store.ts

@@ -1,6 +1,6 @@
 import { action, makeObservable, runInAction, } from "mobx";
 // types
-import { TIssue, TLoader, ViewFlags, IssuePaginationOptions, TIssuesResponse, TBulkOperationsPayload } from "@plane/types";
+import { TIssue, TLoader, ViewFlags, IssuePaginationOptions, TIssuesResponse, TBulkOperationsPayload, TIssueDescription } from "@plane/types";
 // helpers
 // base class
 import { BaseIssuesStore, IBaseIssuesStore } from "../helpers/base-issues.store";
@@ -31,6 +31,12 @@ export interface IProjectIssues extends IBaseIssuesStore {
 
   createIssue: (workspaceSlug: string, projectId: string, data: Partial<TIssue>) => Promise<TIssue>;
   updateIssue: (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => Promise<void>;
+  updateIssueDescription: (
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: TIssueDescription
+  ) => Promise<void>;
   archiveIssue: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
   quickAddIssue: (workspaceSlug: string, projectId: string, data: TIssue) => Promise<TIssue | undefined>;
   removeBulkIssues: (workspaceSlug: string, projectId: string, issueIds: string[]) => Promise<void>;