Merge branch 'preview' of https://github.com/makeplane/plane into dev/custom-text-highlight-extensions

* fix: create cycle function

* chore: draft and cycle version changes

---------

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

apiserver/plane/api/views/cycle.py

@@ -207,8 +207,7 @@ class CycleAPIEndpoint(BaseAPIView):
         # Incomplete Cycles
         if cycle_view == "incomplete":
             queryset = queryset.filter(
-                Q(end_date__gte=timezone.now().date())
-                | Q(end_date__isnull=True),
+                Q(end_date__gte=timezone.now()) | Q(end_date__isnull=True),
             )
             return self.paginate(
                 request=request,
@@ -309,10 +308,7 @@ class CycleAPIEndpoint(BaseAPIView):
 
         request_data = request.data
 
-        if (
-            cycle.end_date is not None
-            and cycle.end_date < timezone.now().date()
-        ):
+        if cycle.end_date is not None and cycle.end_date < timezone.now():
             if "sort_order" in request_data:
                 # Can only change sort order
                 request_data = {
@@ -537,7 +533,7 @@ class CycleArchiveUnarchiveAPIEndpoint(BaseAPIView):
         cycle = Cycle.objects.get(
             pk=cycle_id, project_id=project_id, workspace__slug=slug
         )
-        if cycle.end_date >= timezone.now().date():
+        if cycle.end_date >= timezone.now():
             return Response(
                 {"error": "Only completed cycles can be archived"},
                 status=status.HTTP_400_BAD_REQUEST,
@@ -1146,7 +1142,7 @@ class TransferCycleIssueAPIEndpoint(BaseAPIView):
 
         if (
             new_cycle.end_date is not None
-            and new_cycle.end_date < timezone.now().date()
+            and new_cycle.end_date < timezone.now()
         ):
             return Response(
                 {

apiserver/plane/app/serializers/__init__.py

@@ -124,3 +124,9 @@ from .webhook import WebhookSerializer, WebhookLogSerializer
 from .dashboard import DashboardSerializer, WidgetSerializer
 
 from .favorite import UserFavoriteSerializer
+
+from .draft import (
+    DraftIssueCreateSerializer,
+    DraftIssueSerializer,
+    DraftIssueDetailSerializer,
+)

apiserver/plane/app/serializers/draft.py

@@ -0,0 +1,290 @@
+# Django imports
+from django.utils import timezone
+
+# Third Party imports
+from rest_framework import serializers
+
+# Module imports
+from .base import BaseSerializer
+from plane.db.models import (
+    User,
+    Issue,
+    Label,
+    State,
+    DraftIssue,
+    DraftIssueAssignee,
+    DraftIssueLabel,
+    DraftIssueCycle,
+    DraftIssueModule,
+)
+
+
+class DraftIssueCreateSerializer(BaseSerializer):
+    # ids
+    state_id = serializers.PrimaryKeyRelatedField(
+        source="state",
+        queryset=State.objects.all(),
+        required=False,
+        allow_null=True,
+    )
+    parent_id = serializers.PrimaryKeyRelatedField(
+        source="parent",
+        queryset=Issue.objects.all(),
+        required=False,
+        allow_null=True,
+    )
+    label_ids = serializers.ListField(
+        child=serializers.PrimaryKeyRelatedField(queryset=Label.objects.all()),
+        write_only=True,
+        required=False,
+    )
+    assignee_ids = serializers.ListField(
+        child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
+        write_only=True,
+        required=False,
+    )
+
+    class Meta:
+        model = DraftIssue
+        fields = "__all__"
+        read_only_fields = [
+            "workspace",
+            "created_by",
+            "updated_by",
+            "created_at",
+            "updated_at",
+        ]
+
+    def to_representation(self, instance):
+        data = super().to_representation(instance)
+        assignee_ids = self.initial_data.get("assignee_ids")
+        data["assignee_ids"] = assignee_ids if assignee_ids else []
+        label_ids = self.initial_data.get("label_ids")
+        data["label_ids"] = label_ids if label_ids else []
+        return data
+
+    def validate(self, data):
+        if (
+            data.get("start_date", None) is not None
+            and data.get("target_date", None) is not None
+            and data.get("start_date", None) > data.get("target_date", None)
+        ):
+            raise serializers.ValidationError(
+                "Start date cannot exceed target date"
+            )
+        return data
+
+    def create(self, validated_data):
+        assignees = validated_data.pop("assignee_ids", None)
+        labels = validated_data.pop("label_ids", None)
+        modules = validated_data.pop("module_ids", None)
+        cycle_id = self.initial_data.get("cycle_id", None)
+        modules = self.initial_data.get("module_ids", None)
+
+        workspace_id = self.context["workspace_id"]
+        project_id = self.context["project_id"]
+
+        # Create Issue
+        issue = DraftIssue.objects.create(
+            **validated_data,
+            workspace_id=workspace_id,
+            project_id=project_id,
+        )
+
+        # Issue Audit Users
+        created_by_id = issue.created_by_id
+        updated_by_id = issue.updated_by_id
+
+        if assignees is not None and len(assignees):
+            DraftIssueAssignee.objects.bulk_create(
+                [
+                    DraftIssueAssignee(
+                        assignee=user,
+                        draft_issue=issue,
+                        workspace_id=workspace_id,
+                        project_id=project_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
+                    )
+                    for user in assignees
+                ],
+                batch_size=10,
+            )
+
+        if labels is not None and len(labels):
+            DraftIssueLabel.objects.bulk_create(
+                [
+                    DraftIssueLabel(
+                        label=label,
+                        draft_issue=issue,
+                        project_id=project_id,
+                        workspace_id=workspace_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
+                    )
+                    for label in labels
+                ],
+                batch_size=10,
+            )
+
+        if cycle_id is not None:
+            DraftIssueCycle.objects.create(
+                cycle_id=cycle_id,
+                draft_issue=issue,
+                project_id=project_id,
+                workspace_id=workspace_id,
+                created_by_id=created_by_id,
+                updated_by_id=updated_by_id,
+            )
+
+        if modules is not None and len(modules):
+            DraftIssueModule.objects.bulk_create(
+                [
+                    DraftIssueModule(
+                        module_id=module_id,
+                        draft_issue=issue,
+                        project_id=project_id,
+                        workspace_id=workspace_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
+                    )
+                    for module_id in modules
+                ],
+                batch_size=10,
+            )
+
+        return issue
+
+    def update(self, instance, validated_data):
+        assignees = validated_data.pop("assignee_ids", None)
+        labels = validated_data.pop("label_ids", None)
+        cycle_id = self.context.get("cycle_id", None)
+        modules = self.initial_data.get("module_ids", None)
+
+        # Related models
+        workspace_id = instance.workspace_id
+        project_id = instance.project_id
+
+        created_by_id = instance.created_by_id
+        updated_by_id = instance.updated_by_id
+
+        if assignees is not None:
+            DraftIssueAssignee.objects.filter(draft_issue=instance).delete()
+            DraftIssueAssignee.objects.bulk_create(
+                [
+                    DraftIssueAssignee(
+                        assignee=user,
+                        draft_issue=instance,
+                        workspace_id=workspace_id,
+                        project_id=project_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
+                    )
+                    for user in assignees
+                ],
+                batch_size=10,
+            )
+
+        if labels is not None:
+            DraftIssueLabel.objects.filter(draft_issue=instance).delete()
+            DraftIssueLabel.objects.bulk_create(
+                [
+                    DraftIssueLabel(
+                        label=label,
+                        draft_issue=instance,
+                        workspace_id=workspace_id,
+                        project_id=project_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
+                    )
+                    for label in labels
+                ],
+                batch_size=10,
+            )
+
+        if cycle_id != "not_provided":
+            DraftIssueCycle.objects.filter(draft_issue=instance).delete()
+            if cycle_id is not None:
+                DraftIssueCycle.objects.create(
+                    cycle_id=cycle_id,
+                    draft_issue=instance,
+                    workspace_id=workspace_id,
+                    project_id=project_id,
+                    created_by_id=created_by_id,
+                    updated_by_id=updated_by_id,
+                )
+
+        if modules is not None:
+            DraftIssueModule.objects.filter(draft_issue=instance).delete()
+            DraftIssueModule.objects.bulk_create(
+                [
+                    DraftIssueModule(
+                        module_id=module_id,
+                        draft_issue=instance,
+                        workspace_id=workspace_id,
+                        project_id=project_id,
+                        created_by_id=created_by_id,
+                        updated_by_id=updated_by_id,
+                    )
+                    for module_id in modules
+                ],
+                batch_size=10,
+            )
+
+        # Time updation occurs even when other related models are updated
+        instance.updated_at = timezone.now()
+        return super().update(instance, validated_data)
+
+
+class DraftIssueSerializer(BaseSerializer):
+    # ids
+    cycle_id = serializers.PrimaryKeyRelatedField(read_only=True)
+    module_ids = serializers.ListField(
+        child=serializers.UUIDField(),
+        required=False,
+    )
+
+    # Many to many
+    label_ids = serializers.ListField(
+        child=serializers.UUIDField(),
+        required=False,
+    )
+    assignee_ids = serializers.ListField(
+        child=serializers.UUIDField(),
+        required=False,
+    )
+
+    class Meta:
+        model = DraftIssue
+        fields = [
+            "id",
+            "name",
+            "state_id",
+            "sort_order",
+            "completed_at",
+            "estimate_point",
+            "priority",
+            "start_date",
+            "target_date",
+            "project_id",
+            "parent_id",
+            "cycle_id",
+            "module_ids",
+            "label_ids",
+            "assignee_ids",
+            "created_at",
+            "updated_at",
+            "created_by",
+            "updated_by",
+        ]
+        read_only_fields = fields
+
+
+class DraftIssueDetailSerializer(DraftIssueSerializer):
+    description_html = serializers.CharField()
+
+    class Meta(DraftIssueSerializer.Meta):
+        fields = DraftIssueSerializer.Meta.fields + [
+            "description_html",
+        ]
+        read_only_fields = fields

apiserver/plane/app/urls/issue.py

@@ -11,7 +11,6 @@ from plane.app.views import (
     IssueActivityEndpoint,
     IssueArchiveViewSet,
     IssueCommentViewSet,
-    IssueDraftViewSet,
     IssueListEndpoint,
     IssueReactionViewSet,
     IssueRelationViewSet,
@@ -290,28 +289,6 @@ urlpatterns = [
         name="issue-relation",
     ),
     ## End Issue Relation
-    ## Issue Drafts
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-drafts/",
-        IssueDraftViewSet.as_view(
-            {
-                "get": "list",
-                "post": "create",
-            }
-        ),
-        name="project-issue-draft",
-    ),
-    path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/issue-drafts/<uuid:pk>/",
-        IssueDraftViewSet.as_view(
-            {
-                "get": "retrieve",
-                "patch": "partial_update",
-                "delete": "destroy",
-            }
-        ),
-        name="project-issue-draft",
-    ),
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/deleted-issues/",
         DeletedIssuesListViewSet.as_view(),

apiserver/plane/app/urls/workspace.py

@@ -27,6 +27,7 @@ from plane.app.views import (
     WorkspaceCyclesEndpoint,
     WorkspaceFavoriteEndpoint,
     WorkspaceFavoriteGroupEndpoint,
+    WorkspaceDraftIssueViewSet,
 )
 
 
@@ -254,4 +255,30 @@ urlpatterns = [
         WorkspaceFavoriteGroupEndpoint.as_view(),
         name="workspace-user-favorites-groups",
     ),
+    path(
+        "workspaces/<str:slug>/draft-issues/",
+        WorkspaceDraftIssueViewSet.as_view(
+            {
+                "get": "list",
+                "post": "create",
+            }
+        ),
+        name="workspace-draft-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/draft-issues/<uuid:pk>/",
+        WorkspaceDraftIssueViewSet.as_view(
+            {
+                "get": "retrieve",
+                "patch": "partial_update",
+                "delete": "destroy",
+            }
+        ),
+        name="workspace-drafts-issues",
+    ),
+    path(
+        "workspaces/<str:slug>/draft-to-issue/<uuid:draft_id>/",
+        WorkspaceDraftIssueViewSet.as_view({"post": "create_draft_to_issue"}),
+        name="workspace-drafts-issues",
+    ),
 ]

apiserver/plane/app/views/__init__.py

@@ -40,6 +40,8 @@ from .workspace.base import (
     ExportWorkspaceUserActivityEndpoint,
 )
 
+from .workspace.draft import WorkspaceDraftIssueViewSet
+
 from .workspace.favorite import (
     WorkspaceFavoriteEndpoint,
     WorkspaceFavoriteGroupEndpoint,
@@ -133,8 +135,6 @@ from .issue.comment import (
     CommentReactionViewSet,
 )
 
-from .issue.draft import IssueDraftViewSet
-
 from .issue.label import (
     LabelViewSet,
     BulkCreateIssueLabelsEndpoint,

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

@@ -604,7 +604,7 @@ class CycleArchiveUnarchiveEndpoint(BaseAPIView):
             pk=cycle_id, project_id=project_id, workspace__slug=slug
         )
 
-        if cycle.end_date >= timezone.now().date():
+        if cycle.end_date >= timezone.now():
             return Response(
                 {"error": "Only completed cycles can be archived"},
                 status=status.HTTP_400_BAD_REQUEST,

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

@@ -187,6 +187,7 @@ class CycleViewSet(BaseViewSet):
                 "completed_issues",
                 "assignee_ids",
                 "status",
+                "version",
                 "created_by",
             )
 
@@ -216,6 +217,7 @@ class CycleViewSet(BaseViewSet):
             "completed_issues",
             "assignee_ids",
             "status",
+            "version",
             "created_by",
         )
         return Response(data, status=status.HTTP_200_OK)
@@ -255,6 +257,7 @@ class CycleViewSet(BaseViewSet):
                         "external_id",
                         "progress_snapshot",
                         "logo_props",
+                        "version",
                         # meta fields
                         "is_favorite",
                         "total_issues",
@@ -306,10 +309,7 @@ class CycleViewSet(BaseViewSet):
 
         request_data = request.data
 
-        if (
-            cycle.end_date is not None
-            and cycle.end_date < timezone.now().date()
-        ):
+        if cycle.end_date is not None and cycle.end_date < timezone.now():
             if "sort_order" in request_data:
                 # Can only change sort order for a completed cycle``
                 request_data = {
@@ -347,6 +347,7 @@ class CycleViewSet(BaseViewSet):
                 "external_id",
                 "progress_snapshot",
                 "logo_props",
+                "version",
                 # meta fields
                 "is_favorite",
                 "total_issues",
@@ -412,6 +413,7 @@ class CycleViewSet(BaseViewSet):
                 "progress_snapshot",
                 "sub_issues",
                 "logo_props",
+                "version",
                 # meta fields
                 "is_favorite",
                 "total_issues",
@@ -925,7 +927,7 @@ class TransferCycleIssueEndpoint(BaseAPIView):
 
         if (
             new_cycle.end_date is not None
-            and new_cycle.end_date < timezone.now().date()
+            and new_cycle.end_date < timezone.now()
         ):
             return Response(
                 {
@@ -1148,6 +1150,7 @@ class CycleProgressEndpoint(BaseAPIView):
             status=status.HTTP_200_OK,
         )
 
+
 class CycleAnalyticsEndpoint(BaseAPIView):
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])

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

@@ -248,7 +248,7 @@ class CycleIssueViewSet(BaseViewSet):
 
         if (
             cycle.end_date is not None
-            and cycle.end_date < timezone.now().date()
+            and cycle.end_date < timezone.now()
         ):
             return Response(
                 {

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

@@ -40,8 +40,6 @@ from plane.db.models import (
     IssueLink,
     IssueRelation,
     Project,
-    ProjectMember,
-    User,
     Widget,
     WorkspaceMember,
 )

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

@@ -1,410 +0,0 @@
-# Python imports
-import json
-
-# Django imports
-from django.contrib.postgres.aggregates import ArrayAgg
-from django.contrib.postgres.fields import ArrayField
-from django.core.serializers.json import DjangoJSONEncoder
-from django.db.models import (
-    Exists,
-    F,
-    Func,
-    OuterRef,
-    Prefetch,
-    Q,
-    UUIDField,
-    Value,
-)
-from django.db.models.functions import Coalesce
-from django.utils import timezone
-from django.utils.decorators import method_decorator
-from django.views.decorators.gzip import gzip_page
-
-# Third Party imports
-from rest_framework import status
-from rest_framework.response import Response
-
-# Module imports
-from plane.app.permissions import ProjectEntityPermission
-from plane.app.serializers import (
-    IssueCreateSerializer,
-    IssueDetailSerializer,
-    IssueFlatSerializer,
-    IssueSerializer,
-)
-from plane.bgtasks.issue_activities_task import issue_activity
-from plane.db.models import (
-    Issue,
-    IssueAttachment,
-    IssueLink,
-    IssueReaction,
-    IssueSubscriber,
-    Project,
-    ProjectMember,
-)
-from plane.utils.grouper import (
-    issue_group_values,
-    issue_on_results,
-    issue_queryset_grouper,
-)
-from plane.utils.issue_filters import issue_filters
-from plane.utils.order_queryset import order_issue_queryset
-from plane.utils.paginator import (
-    GroupedOffsetPaginator,
-    SubGroupedOffsetPaginator,
-)
-from .. import BaseViewSet
-
-
-class IssueDraftViewSet(BaseViewSet):
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
-    serializer_class = IssueFlatSerializer
-    model = Issue
-
-    def get_queryset(self):
-        return (
-            Issue.objects.filter(project_id=self.kwargs.get("project_id"))
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .filter(is_draft=True)
-            .filter(deleted_at__isnull=True)
-            .select_related("workspace", "project", "state", "parent")
-            .prefetch_related("assignees", "labels", "issue_module__module")
-            .annotate(cycle_id=F("issue_cycle__cycle_id"))
-            .annotate(
-                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                attachment_count=IssueAttachment.objects.filter(
-                    issue=OuterRef("id")
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                sub_issues_count=Issue.issue_objects.filter(
-                    parent=OuterRef("id")
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-        ).distinct()
-
-    @method_decorator(gzip_page)
-    def list(self, request, slug, project_id):
-        filters = issue_filters(request.query_params, "GET")
-
-        order_by_param = request.GET.get("order_by", "-created_at")
-
-        issue_queryset = self.get_queryset().filter(**filters)
-        # Issue queryset
-        issue_queryset, order_by_param = order_issue_queryset(
-            issue_queryset=issue_queryset,
-            order_by_param=order_by_param,
-        )
-
-        # Group by
-        group_by = request.GET.get("group_by", False)
-        sub_group_by = request.GET.get("sub_group_by", False)
-
-        # issue queryset
-        issue_queryset = issue_queryset_grouper(
-            queryset=issue_queryset,
-            group_by=group_by,
-            sub_group_by=sub_group_by,
-        )
-
-        if group_by:
-            # Check group and sub group value paginate
-            if sub_group_by:
-                if group_by == sub_group_by:
-                    return Response(
-                        {
-                            "error": "Group by and sub group by cannot have same parameters"
-                        },
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
-                else:
-                    # group and sub group pagination
-                    return self.paginate(
-                        request=request,
-                        order_by=order_by_param,
-                        queryset=issue_queryset,
-                        on_results=lambda issues: issue_on_results(
-                            group_by=group_by,
-                            issues=issues,
-                            sub_group_by=sub_group_by,
-                        ),
-                        paginator_cls=SubGroupedOffsetPaginator,
-                        group_by_fields=issue_group_values(
-                            field=group_by,
-                            slug=slug,
-                            project_id=project_id,
-                            filters=filters,
-                        ),
-                        sub_group_by_fields=issue_group_values(
-                            field=sub_group_by,
-                            slug=slug,
-                            project_id=project_id,
-                            filters=filters,
-                        ),
-                        group_by_field_name=group_by,
-                        sub_group_by_field_name=sub_group_by,
-                        count_filter=Q(
-                            Q(issue_inbox__status=1)
-                            | Q(issue_inbox__status=-1)
-                            | Q(issue_inbox__status=2)
-                            | Q(issue_inbox__isnull=True),
-                            archived_at__isnull=True,
-                            is_draft=False,
-                        ),
-                    )
-            # Group Paginate
-            else:
-                # Group paginate
-                return self.paginate(
-                    request=request,
-                    order_by=order_by_param,
-                    queryset=issue_queryset,
-                    on_results=lambda issues: issue_on_results(
-                        group_by=group_by,
-                        issues=issues,
-                        sub_group_by=sub_group_by,
-                    ),
-                    paginator_cls=GroupedOffsetPaginator,
-                    group_by_fields=issue_group_values(
-                        field=group_by,
-                        slug=slug,
-                        project_id=project_id,
-                        filters=filters,
-                    ),
-                    group_by_field_name=group_by,
-                    count_filter=Q(
-                        Q(issue_inbox__status=1)
-                        | Q(issue_inbox__status=-1)
-                        | Q(issue_inbox__status=2)
-                        | Q(issue_inbox__isnull=True),
-                        archived_at__isnull=True,
-                        is_draft=False,
-                    ),
-                )
-        else:
-            # List Paginate
-            return self.paginate(
-                order_by=order_by_param,
-                request=request,
-                queryset=issue_queryset,
-                on_results=lambda issues: issue_on_results(
-                    group_by=group_by, issues=issues, sub_group_by=sub_group_by
-                ),
-            )
-
-    def create(self, request, slug, project_id):
-        project = Project.objects.get(pk=project_id)
-
-        serializer = IssueCreateSerializer(
-            data=request.data,
-            context={
-                "project_id": project_id,
-                "workspace_id": project.workspace_id,
-                "default_assignee_id": project.default_assignee_id,
-            },
-        )
-
-        if serializer.is_valid():
-            serializer.save(is_draft=True)
-
-            # Track the issue
-            issue_activity.delay(
-                type="issue_draft.activity.created",
-                requested_data=json.dumps(
-                    self.request.data, cls=DjangoJSONEncoder
-                ),
-                actor_id=str(request.user.id),
-                issue_id=str(serializer.data.get("id", None)),
-                project_id=str(project_id),
-                current_instance=None,
-                epoch=int(timezone.now().timestamp()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-
-            issue = (
-                issue_queryset_grouper(
-                    queryset=self.get_queryset().filter(
-                        pk=serializer.data["id"]
-                    ),
-                    group_by=None,
-                    sub_group_by=None,
-                )
-                .values(
-                    "id",
-                    "name",
-                    "state_id",
-                    "sort_order",
-                    "completed_at",
-                    "estimate_point",
-                    "priority",
-                    "start_date",
-                    "target_date",
-                    "sequence_id",
-                    "project_id",
-                    "parent_id",
-                    "cycle_id",
-                    "module_ids",
-                    "label_ids",
-                    "assignee_ids",
-                    "sub_issues_count",
-                    "created_at",
-                    "updated_at",
-                    "created_by",
-                    "updated_by",
-                    "attachment_count",
-                    "link_count",
-                    "is_draft",
-                    "archived_at",
-                )
-                .first()
-            )
-            return Response(issue, status=status.HTTP_201_CREATED)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-    def partial_update(self, request, slug, project_id, pk):
-        issue = self.get_queryset().filter(pk=pk).first()
-
-        if not issue:
-            return Response(
-                {"error": "Issue does not exist"},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-
-        serializer = IssueCreateSerializer(
-            issue, data=request.data, partial=True
-        )
-
-        if serializer.is_valid():
-            serializer.save()
-            issue_activity.delay(
-                type="issue_draft.activity.updated",
-                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                actor_id=str(self.request.user.id),
-                issue_id=str(self.kwargs.get("pk", None)),
-                project_id=str(self.kwargs.get("project_id", None)),
-                current_instance=json.dumps(
-                    IssueSerializer(issue).data,
-                    cls=DjangoJSONEncoder,
-                ),
-                epoch=int(timezone.now().timestamp()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            return Response(status=status.HTTP_204_NO_CONTENT)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-
-    def retrieve(self, request, slug, project_id, pk=None):
-        issue = (
-            self.get_queryset()
-            .filter(pk=pk)
-            .annotate(
-                label_ids=Coalesce(
-                    ArrayAgg(
-                        "labels__id",
-                        distinct=True,
-                        filter=~Q(labels__id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                assignee_ids=Coalesce(
-                    ArrayAgg(
-                        "assignees__id",
-                        distinct=True,
-                        filter=~Q(assignees__id__isnull=True)
-                        & Q(assignees__member_project__is_active=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-                module_ids=Coalesce(
-                    ArrayAgg(
-                        "issue_module__module_id",
-                        distinct=True,
-                        filter=~Q(issue_module__module_id__isnull=True),
-                    ),
-                    Value([], output_field=ArrayField(UUIDField())),
-                ),
-            )
-            .prefetch_related(
-                Prefetch(
-                    "issue_reactions",
-                    queryset=IssueReaction.objects.select_related(
-                        "issue", "actor"
-                    ),
-                )
-            )
-            .prefetch_related(
-                Prefetch(
-                    "issue_attachment",
-                    queryset=IssueAttachment.objects.select_related("issue"),
-                )
-            )
-            .prefetch_related(
-                Prefetch(
-                    "issue_link",
-                    queryset=IssueLink.objects.select_related("created_by"),
-                )
-            )
-            .annotate(
-                is_subscribed=Exists(
-                    IssueSubscriber.objects.filter(
-                        workspace__slug=slug,
-                        project_id=project_id,
-                        issue_id=OuterRef("pk"),
-                        subscriber=request.user,
-                    )
-                )
-            )
-        ).first()
-
-        if not issue:
-            return Response(
-                {"error": "The required object does not exist."},
-                status=status.HTTP_404_NOT_FOUND,
-            )
-        serializer = IssueDetailSerializer(issue, expand=self.expand)
-        return Response(serializer.data, status=status.HTTP_200_OK)
-
-    def destroy(self, request, slug, project_id, pk=None):
-        issue = Issue.objects.get(
-            workspace__slug=slug, project_id=project_id, pk=pk
-        )
-        if issue.created_by_id != request.user.id and (
-            not ProjectMember.objects.filter(
-                workspace__slug=slug,
-                member=request.user,
-                role=20,
-                project_id=project_id,
-                is_active=True,
-            ).exists()
-        ):
-            return Response(
-                {"error": "Only admin or creator can delete the issue"},
-                status=status.HTTP_403_FORBIDDEN,
-            )
-        issue.delete()
-        issue_activity.delay(
-            type="issue_draft.activity.deleted",
-            requested_data=json.dumps({"issue_id": str(pk)}),
-            actor_id=str(request.user.id),
-            issue_id=str(pk),
-            project_id=str(project_id),
-            current_instance={},
-            epoch=int(timezone.now().timestamp()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
-        return Response(status=status.HTTP_204_NO_CONTENT)

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

@@ -0,0 +1,412 @@
+# Python imports
+import json
+
+# Django imports
+from django.utils import timezone
+from django.core import serializers
+from django.core.serializers.json import DjangoJSONEncoder
+from django.contrib.postgres.aggregates import ArrayAgg
+from django.contrib.postgres.fields import ArrayField
+from django.db.models import (
+    F,
+    Q,
+    UUIDField,
+    Value,
+)
+from django.db.models.functions import Coalesce
+from django.utils.decorators import method_decorator
+from django.views.decorators.gzip import gzip_page
+
+# Third Party imports
+from rest_framework import status
+from rest_framework.response import Response
+
+# Module imports
+from plane.app.permissions import allow_permission, ROLE
+from plane.app.serializers import (
+    IssueCreateSerializer,
+    DraftIssueCreateSerializer,
+    DraftIssueSerializer,
+    DraftIssueDetailSerializer,
+)
+from plane.db.models import (
+    Issue,
+    DraftIssue,
+    CycleIssue,
+    ModuleIssue,
+    DraftIssueModule,
+    DraftIssueCycle,
+    Workspace,
+)
+from .. import BaseViewSet
+from plane.bgtasks.issue_activities_task import issue_activity
+from plane.utils.issue_filters import issue_filters
+
+
+class WorkspaceDraftIssueViewSet(BaseViewSet):
+
+    model = DraftIssue
+
+    @method_decorator(gzip_page)
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
+    )
+    def list(self, request, slug):
+        filters = issue_filters(request.query_params, "GET")
+        issues = (
+            DraftIssue.objects.filter(workspace__slug=slug)
+            .filter(created_by=request.user)
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related(
+                "assignees", "labels", "draft_issue_module__module"
+            )
+            .annotate(cycle_id=F("draft_issue_cycle__cycle_id"))
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=~Q(labels__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "draft_issue_module__module_id",
+                        distinct=True,
+                        filter=~Q(draft_issue_module__module_id__isnull=True)
+                        & Q(
+                            draft_issue_module__module__archived_at__isnull=True
+                        ),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+            .order_by("-created_at")
+        )
+
+        issues = issues.filter(**filters)
+        # List Paginate
+        return self.paginate(
+            request=request,
+            queryset=(issues),
+            on_results=lambda issues: DraftIssueSerializer(
+                issues,
+                many=True,
+            ).data,
+        )
+
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
+    )
+    def create(self, request, slug):
+        workspace = Workspace.objects.get(slug=slug)
+
+        serializer = DraftIssueCreateSerializer(
+            data=request.data,
+            context={
+                "workspace_id": workspace.id,
+                "project_id": request.data.get("project_id", None),
+            },
+        )
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER],
+        creator=True,
+        model=Issue,
+        level="WORKSPACE",
+    )
+    def partial_update(self, request, slug, pk):
+        issue = (
+            DraftIssue.objects.filter(workspace__slug=slug)
+            .filter(pk=pk)
+            .filter(created_by=request.user)
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related(
+                "assignees", "labels", "draft_issue_module__module"
+            )
+            .annotate(cycle_id=F("draft_issue_cycle__cycle_id"))
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=~Q(labels__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "draft_issue_module__module_id",
+                        distinct=True,
+                        filter=~Q(draft_issue_module__module_id__isnull=True)
+                        & Q(
+                            draft_issue_module__module__archived_at__isnull=True
+                        ),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+            .first()
+        )
+
+        if not issue:
+            return Response(
+                {"error": "Issue not found"},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+
+        serializer = DraftIssueCreateSerializer(
+            issue,
+            data=request.data,
+            partial=True,
+            context={
+                "project_id": request.data.get("project_id", None),
+                "cycle_id": request.data.get("cycle_id", "not_provided"),
+            },
+        )
+
+        if serializer.is_valid():
+            serializer.save()
+
+            return Response(status=status.HTTP_204_NO_CONTENT)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN],
+        creator=True,
+        model=Issue,
+        level="WORKSPACE",
+    )
+    def retrieve(self, request, slug, pk=None):
+        issue = (
+            DraftIssue.objects.filter(workspace__slug=slug)
+            .filter(pk=pk)
+            .filter(created_by=request.user)
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related(
+                "assignees", "labels", "draft_issue_module__module"
+            )
+            .annotate(cycle_id=F("draft_issue_cycle__cycle_id"))
+            .filter(pk=pk)
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=~Q(labels__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "draft_issue_module__module_id",
+                        distinct=True,
+                        filter=~Q(draft_issue_module__module_id__isnull=True)
+                        & Q(
+                            draft_issue_module__module__archived_at__isnull=True
+                        ),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+        ).first()
+
+        if not issue:
+            return Response(
+                {"error": "The required object does not exist."},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+
+        serializer = DraftIssueDetailSerializer(issue)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN],
+        creator=True,
+        model=Issue,
+        level="WORKSPACE",
+    )
+    def destroy(self, request, slug, pk=None):
+        draft_issue = DraftIssue.objects.get(workspace__slug=slug, pk=pk)
+        draft_issue.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER],
+        level="WORKSPACE",
+    )
+    def create_draft_to_issue(self, request, slug, draft_id):
+        draft_issue = (
+            DraftIssue.objects.filter(workspace__slug=slug, pk=draft_id)
+            .annotate(cycle_id=F("draft_issue_cycle__cycle_id"))
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=~Q(labels__id__isnull=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=~Q(assignees__id__isnull=True)
+                        & Q(assignees__member_project__is_active=True),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "draft_issue_module__module_id",
+                        distinct=True,
+                        filter=~Q(draft_issue_module__module_id__isnull=True)
+                        & Q(
+                            draft_issue_module__module__archived_at__isnull=True
+                        ),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+            .select_related("project", "workspace")
+            .first()
+        )
+
+        if not draft_issue.project_id:
+            return Response(
+                {"error": "Project is required to create an issue."},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        serializer = IssueCreateSerializer(
+            data=request.data,
+            context={
+                "project_id": draft_issue.project_id,
+                "workspace_id": draft_issue.project.workspace_id,
+                "default_assignee_id": draft_issue.project.default_assignee_id,
+            },
+        )
+
+        if serializer.is_valid():
+            serializer.save()
+
+            issue_activity.delay(
+                type="issue.activity.created",
+                requested_data=json.dumps(
+                    self.request.data, cls=DjangoJSONEncoder
+                ),
+                actor_id=str(request.user.id),
+                issue_id=str(serializer.data.get("id", None)),
+                project_id=str(draft_issue.project_id),
+                current_instance=None,
+                epoch=int(timezone.now().timestamp()),
+                notification=True,
+                origin=request.META.get("HTTP_ORIGIN"),
+            )
+
+            if draft_issue.cycle_id:
+                created_records = CycleIssue.objects.create(
+                    cycle_id=draft_issue.cycle_id,
+                    issue_id=serializer.data.get("id", None),
+                    project_id=draft_issue.project_id,
+                    workspace_id=draft_issue.workspace_id,
+                    created_by_id=draft_issue.created_by_id,
+                    updated_by_id=draft_issue.updated_by_id,
+                )
+                # Capture Issue Activity
+                issue_activity.delay(
+                    type="cycle.activity.created",
+                    requested_data=None,
+                    actor_id=str(self.request.user.id),
+                    issue_id=None,
+                    project_id=str(self.kwargs.get("project_id", None)),
+                    current_instance=json.dumps(
+                        {
+                            "updated_cycle_issues": None,
+                            "created_cycle_issues": serializers.serialize(
+                                "json", created_records
+                            ),
+                        }
+                    ),
+                    epoch=int(timezone.now().timestamp()),
+                    notification=True,
+                    origin=request.META.get("HTTP_ORIGIN"),
+                )
+
+            if draft_issue.module_ids:
+                # bulk create the module
+                ModuleIssue.objects.bulk_create(
+                    [
+                        ModuleIssue(
+                            module_id=module,
+                            issue_id=serializer.data.get("id", None),
+                            workspace_id=draft_issue.workspace_id,
+                            project_id=draft_issue.project_id,
+                            created_by_id=draft_issue.created_by_id,
+                            updated_by_id=draft_issue.updated_by_id,
+                        )
+                        for module in draft_issue.module_ids
+                    ],
+                    batch_size=10,
+                )
+                # Bulk Update the activity
+                _ = [
+                    issue_activity.delay(
+                        type="module.activity.created",
+                        requested_data=json.dumps({"module_id": str(module)}),
+                        actor_id=str(request.user.id),
+                        issue_id=serializer.data.get("id", None),
+                        project_id=draft_issue.project_id,
+                        current_instance=None,
+                        epoch=int(timezone.now().timestamp()),
+                        notification=True,
+                        origin=request.META.get("HTTP_ORIGIN"),
+                    )
+                    for module in draft_issue.module_ids
+                ]
+
+            # delete the draft issue
+            draft_issue.delete()
+
+            # delete the draft issue module
+            DraftIssueModule.objects.filter(draft_issue=draft_issue).delete()
+
+            # delete the draft issue cycle
+            DraftIssueCycle.objects.filter(draft_issue=draft_issue).delete()
+
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

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

@@ -504,7 +504,7 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
 
         upcoming_cycles = CycleIssue.objects.filter(
             workspace__slug=slug,
-            cycle__start_date__gt=timezone.now().date(),
+            cycle__start_date__gt=timezone.now(),
             issue__assignees__in=[
                 user_id,
             ],
@@ -512,8 +512,8 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
 
         present_cycle = CycleIssue.objects.filter(
             workspace__slug=slug,
-            cycle__start_date__lt=timezone.now().date(),
-            cycle__end_date__gt=timezone.now().date(),
+            cycle__start_date__lt=timezone.now(),
+            cycle__end_date__gt=timezone.now(),
             issue__assignees__in=[
                 user_id,
             ],

apiserver/plane/bgtasks/issue_automation_task.py

@@ -42,14 +42,12 @@ def archive_old_issues():
                 ),
                 Q(issue_cycle__isnull=True)
                 | (
-                    Q(issue_cycle__cycle__end_date__lt=timezone.now().date())
+                    Q(issue_cycle__cycle__end_date__lt=timezone.now())
                     & Q(issue_cycle__isnull=False)
                 ),
                 Q(issue_module__isnull=True)
                 | (
-                    Q(
-                        issue_module__module__target_date__lt=timezone.now().date()
-                    )
+                    Q(issue_module__module__target_date__lt=timezone.now())
                     & Q(issue_module__isnull=False)
                 ),
             ).filter(
@@ -122,14 +120,12 @@ def close_old_issues():
                 ),
                 Q(issue_cycle__isnull=True)
                 | (
-                    Q(issue_cycle__cycle__end_date__lt=timezone.now().date())
+                    Q(issue_cycle__cycle__end_date__lt=timezone.now())
                     & Q(issue_cycle__isnull=False)
                 ),
                 Q(issue_module__isnull=True)
                 | (
-                    Q(
-                        issue_module__module__target_date__lt=timezone.now().date()
-                    )
+                    Q(issue_module__module__target_date__lt=timezone.now())
                     & Q(issue_module__isnull=False)
                 ),
             ).filter(

apiserver/plane/db/models/__init__.py

@@ -5,6 +5,7 @@ from .base import BaseModel
 from .cycle import Cycle, CycleFavorite, CycleIssue, CycleUserProperties
 from .dashboard import Dashboard, DashboardWidget, Widget
 from .deploy_board import DeployBoard
+from .draft import DraftIssue, DraftIssueAssignee, DraftIssueLabel, DraftIssueModule, DraftIssueCycle
 from .estimate import Estimate, EstimatePoint
 from .exporter import ExporterHistory
 from .importer import Importer

apiserver/plane/db/models/cycle.py

@@ -1,3 +1,6 @@
+# Python imports
+import pytz
+
 # Django imports
 from django.conf import settings
 from django.db import models
@@ -55,10 +58,12 @@ class Cycle(ProjectBaseModel):
     description = models.TextField(
         verbose_name="Cycle Description", blank=True
     )
-    start_date = models.DateField(
+    start_date = models.DateTimeField(
         verbose_name="Start Date", blank=True, null=True
     )
-    end_date = models.DateField(verbose_name="End Date", blank=True, null=True)
+    end_date = models.DateTimeField(
+        verbose_name="End Date", blank=True, null=True
+    )
     owned_by = models.ForeignKey(
         settings.AUTH_USER_MODEL,
         on_delete=models.CASCADE,
@@ -71,6 +76,12 @@ class Cycle(ProjectBaseModel):
     progress_snapshot = models.JSONField(default=dict)
     archived_at = models.DateTimeField(null=True)
     logo_props = models.JSONField(default=dict)
+    # timezone
+    TIMEZONE_CHOICES = tuple(zip(pytz.all_timezones, pytz.all_timezones))
+    timezone = models.CharField(
+        max_length=255, default="UTC", choices=TIMEZONE_CHOICES
+    )
+    version = models.IntegerField(default=1)
 
     class Meta:
         verbose_name = "Cycle"

apiserver/plane/db/models/draft.py

@@ -0,0 +1,253 @@
+# Django imports
+from django.conf import settings
+from django.db import models
+from django.utils import timezone
+
+# Module imports
+from plane.utils.html_processor import strip_tags
+
+from .workspace import WorkspaceBaseModel
+
+
+class DraftIssue(WorkspaceBaseModel):
+    PRIORITY_CHOICES = (
+        ("urgent", "Urgent"),
+        ("high", "High"),
+        ("medium", "Medium"),
+        ("low", "Low"),
+        ("none", "None"),
+    )
+    parent = models.ForeignKey(
+        "db.Issue",
+        on_delete=models.CASCADE,
+        null=True,
+        blank=True,
+        related_name="draft_parent_issue",
+    )
+    state = models.ForeignKey(
+        "db.State",
+        on_delete=models.CASCADE,
+        null=True,
+        blank=True,
+        related_name="state_draft_issue",
+    )
+    estimate_point = models.ForeignKey(
+        "db.EstimatePoint",
+        on_delete=models.SET_NULL,
+        related_name="draft_issue_estimates",
+        null=True,
+        blank=True,
+    )
+    name = models.CharField(
+        max_length=255, verbose_name="Issue Name", blank=True, null=True
+    )
+    description = models.JSONField(blank=True, default=dict)
+    description_html = models.TextField(blank=True, default="<p></p>")
+    description_stripped = models.TextField(blank=True, null=True)
+    description_binary = models.BinaryField(null=True)
+    priority = models.CharField(
+        max_length=30,
+        choices=PRIORITY_CHOICES,
+        verbose_name="Issue Priority",
+        default="none",
+    )
+    start_date = models.DateField(null=True, blank=True)
+    target_date = models.DateField(null=True, blank=True)
+    assignees = models.ManyToManyField(
+        settings.AUTH_USER_MODEL,
+        blank=True,
+        related_name="draft_assignee",
+        through="DraftIssueAssignee",
+        through_fields=("draft_issue", "assignee"),
+    )
+    labels = models.ManyToManyField(
+        "db.Label",
+        blank=True,
+        related_name="draft_labels",
+        through="DraftIssueLabel",
+    )
+    sort_order = models.FloatField(default=65535)
+    completed_at = models.DateTimeField(null=True)
+    external_source = models.CharField(max_length=255, null=True, blank=True)
+    external_id = models.CharField(max_length=255, blank=True, null=True)
+    type = models.ForeignKey(
+        "db.IssueType",
+        on_delete=models.SET_NULL,
+        related_name="draft_issue_type",
+        null=True,
+        blank=True,
+    )
+
+    class Meta:
+        verbose_name = "DraftIssue"
+        verbose_name_plural = "DraftIssues"
+        db_table = "draft_issues"
+        ordering = ("-created_at",)
+
+    def save(self, *args, **kwargs):
+        if self.state is None:
+            try:
+                from plane.db.models import State
+
+                default_state = State.objects.filter(
+                    ~models.Q(is_triage=True),
+                    project=self.project,
+                    default=True,
+                ).first()
+                if default_state is None:
+                    random_state = State.objects.filter(
+                        ~models.Q(is_triage=True), project=self.project
+                    ).first()
+                    self.state = random_state
+                else:
+                    self.state = default_state
+            except ImportError:
+                pass
+        else:
+            try:
+                from plane.db.models import State
+
+                if self.state.group == "completed":
+                    self.completed_at = timezone.now()
+                else:
+                    self.completed_at = None
+            except ImportError:
+                pass
+
+        if self._state.adding:
+            # Strip the html tags using html parser
+            self.description_stripped = (
+                None
+                if (
+                    self.description_html == ""
+                    or self.description_html is None
+                )
+                else strip_tags(self.description_html)
+            )
+            largest_sort_order = DraftIssue.objects.filter(
+                project=self.project, state=self.state
+            ).aggregate(largest=models.Max("sort_order"))["largest"]
+            if largest_sort_order is not None:
+                self.sort_order = largest_sort_order + 10000
+
+            super(DraftIssue, self).save(*args, **kwargs)
+
+        else:
+            # Strip the html tags using html parser
+            self.description_stripped = (
+                None
+                if (
+                    self.description_html == ""
+                    or self.description_html is None
+                )
+                else strip_tags(self.description_html)
+            )
+            super(DraftIssue, self).save(*args, **kwargs)
+
+    def __str__(self):
+        """Return name of the draft issue"""
+        return f"{self.name} <{self.project.name}>"
+
+
+class DraftIssueAssignee(WorkspaceBaseModel):
+    draft_issue = models.ForeignKey(
+        DraftIssue,
+        on_delete=models.CASCADE,
+        related_name="draft_issue_assignee",
+    )
+    assignee = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="draft_issue_assignee",
+    )
+
+    class Meta:
+        unique_together = ["draft_issue", "assignee", "deleted_at"]
+        constraints = [
+            models.UniqueConstraint(
+                fields=["draft_issue", "assignee"],
+                condition=models.Q(deleted_at__isnull=True),
+                name="draft_issue_assignee_unique_issue_assignee_when_deleted_at_null",
+            )
+        ]
+        verbose_name = "Draft Issue Assignee"
+        verbose_name_plural = "Draft Issue Assignees"
+        db_table = "draft_issue_assignees"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return f"{self.draft_issue.name} {self.assignee.email}"
+
+
+class DraftIssueLabel(WorkspaceBaseModel):
+    draft_issue = models.ForeignKey(
+        "db.DraftIssue",
+        on_delete=models.CASCADE,
+        related_name="draft_label_issue",
+    )
+    label = models.ForeignKey(
+        "db.Label", on_delete=models.CASCADE, related_name="draft_label_issue"
+    )
+
+    class Meta:
+        verbose_name = "Draft Issue Label"
+        verbose_name_plural = "Draft Issue Labels"
+        db_table = "draft_issue_labels"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return f"{self.draft_issue.name} {self.label.name}"
+
+
+class DraftIssueModule(WorkspaceBaseModel):
+    module = models.ForeignKey(
+        "db.Module",
+        on_delete=models.CASCADE,
+        related_name="draft_issue_module",
+    )
+    draft_issue = models.ForeignKey(
+        "db.DraftIssue",
+        on_delete=models.CASCADE,
+        related_name="draft_issue_module",
+    )
+
+    class Meta:
+        unique_together = ["draft_issue", "module", "deleted_at"]
+        constraints = [
+            models.UniqueConstraint(
+                fields=["draft_issue", "module"],
+                condition=models.Q(deleted_at__isnull=True),
+                name="module_draft_issue_unique_issue_module_when_deleted_at_null",
+            )
+        ]
+        verbose_name = "Draft Issue Module"
+        verbose_name_plural = "Draft Issue Modules"
+        db_table = "draft_issue_modules"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return f"{self.module.name} {self.draft_issue.name}"
+
+
+class DraftIssueCycle(WorkspaceBaseModel):
+    """
+    Draft Issue Cycles
+    """
+
+    draft_issue = models.OneToOneField(
+        "db.DraftIssue",
+        on_delete=models.CASCADE,
+        related_name="draft_issue_cycle",
+    )
+    cycle = models.ForeignKey(
+        "db.Cycle", on_delete=models.CASCADE, related_name="draft_issue_cycle"
+    )
+
+    class Meta:
+        verbose_name = "Draft Issue Cycle"
+        verbose_name_plural = "Draft Issue Cycles"
+        db_table = "draft_issue_cycles"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return f"{self.cycle}"

apiserver/plane/db/models/project.py

@@ -1,4 +1,5 @@
 # Python imports
+import pytz
 from uuid import uuid4
 
 # Django imports
@@ -7,7 +8,7 @@ from django.core.validators import MaxValueValidator, MinValueValidator
 from django.db import models
 from django.db.models import Q
 
-# Modeule imports
+# Module imports
 from plane.db.mixins import AuditModel
 
 # Module imports
@@ -119,6 +120,11 @@ class Project(BaseModel):
         related_name="default_state",
     )
     archived_at = models.DateTimeField(null=True)
+    # timezone
+    TIMEZONE_CHOICES = tuple(zip(pytz.all_timezones, pytz.all_timezones))
+    timezone = models.CharField(
+        max_length=255, default="UTC", choices=TIMEZONE_CHOICES
+    )
 
     def __str__(self):
         """Return name of the project"""

apiserver/plane/utils/analytics_plot.py

@@ -163,7 +163,7 @@ def burndown_plot(
         if queryset.end_date and queryset.start_date:
             # Get all dates between the two dates
             date_range = [
-                queryset.start_date + timedelta(days=x)
+                (queryset.start_date + timedelta(days=x)).date()
                 for x in range(
                     (queryset.end_date - queryset.start_date).days + 1
                 )
@@ -203,7 +203,7 @@ def burndown_plot(
     if module_id:
         # Get all dates between the two dates
         date_range = [
-            queryset.start_date + timedelta(days=x)
+            (queryset.start_date + timedelta(days=x)).date()
             for x in range(
                 (queryset.target_date - queryset.start_date).days + 1
             )

live/src/ce/lib/authentication.ts

@@ -1,15 +0,0 @@
-import { ConnectionConfiguration } from "@hocuspocus/server";
-// types
-import { TDocumentTypes } from "@/core/types/common.js";
-
-type TArgs = {
-  connection: ConnectionConfiguration
-  cookie: string;
-  documentType: TDocumentTypes | undefined;
-  params: URLSearchParams;
-}
-
-export const authenticateUser = async (args: TArgs): Promise<void> => {
-  const { documentType } = args;
-  throw Error(`Authentication failed: Invalid document type ${documentType} provided.`);
-}

live/src/core/hocuspocus-server.ts

@@ -12,15 +12,11 @@ export const getHocusPocusServer = async () => {
     name: serverName,
     onAuthenticate: async ({
       requestHeaders,
-      requestParameters,
-      connection,
       // user id used as token for authentication
       token,
     }) => {
       // request headers
       const cookie = requestHeaders.cookie?.toString();
-      // params
-      const params = requestParameters;
 
       if (!cookie) {
         throw Error("Credentials not provided");
@@ -28,9 +24,7 @@ export const getHocusPocusServer = async () => {
 
       try {
         await handleAuthentication({
-          connection,
           cookie,
-          params,
           token,
         });
       } catch (error) {
@@ -38,6 +32,6 @@ export const getHocusPocusServer = async () => {
       }
     },
     extensions,
-    debounce: 10000
+    debounce: 10000,
   });
 };

live/src/core/lib/authentication.ts

@@ -1,28 +1,17 @@
-import { ConnectionConfiguration } from "@hocuspocus/server";
 // services
 import { UserService } from "@/core/services/user.service.js";
-// types
-import { TDocumentTypes } from "@/core/types/common.js";
-// plane live lib
-import { authenticateUser } from "@/plane-live/lib/authentication.js";
 // core helpers
 import { manualLogger } from "@/core/helpers/logger.js";
 
 const userService = new UserService();
 
 type Props = {
-  connection: ConnectionConfiguration;
   cookie: string;
-  params: URLSearchParams;
   token: string;
 };
 
 export const handleAuthentication = async (props: Props) => {
-  const { connection, cookie, params, token } = props;
-  // params
-  const documentType = params.get("documentType")?.toString() as
-    | TDocumentTypes
-    | undefined;
+  const { cookie, token } = props;
   // fetch current user info
   let response;
   try {
@@ -35,40 +24,6 @@ export const handleAuthentication = async (props: Props) => {
     throw Error("Authentication failed: Token doesn't match the current user.");
   }
 
-  if (documentType === "project_page") {
-    // params
-    const workspaceSlug = params.get("workspaceSlug")?.toString();
-    const projectId = params.get("projectId")?.toString();
-    if (!workspaceSlug || !projectId) {
-      throw Error(
-        "Authentication failed: Incomplete query params. Either workspaceSlug or projectId is missing."
-      );
-    }
-    // fetch current user's project membership info
-    try {
-      const projectMembershipInfo = await userService.getUserProjectMembership(
-        workspaceSlug,
-        projectId,
-        cookie
-      );
-      const projectRole = projectMembershipInfo.role;
-      // make the connection read only for roles lower than a member
-      if (projectRole < 15) {
-        connection.readOnly = true;
-      }
-    } catch (error) {
-      manualLogger.error("Failed to fetch project membership info:", error);
-      throw error;
-    }
-  } else {
-    await authenticateUser({
-      connection,
-      cookie,
-      documentType,
-      params,
-    });
-  }
-
   return {
     user: {
       id: response.id,

live/src/core/services/user.service.ts

@@ -1,5 +1,5 @@
 // types
-import type { IProjectMember, IUser } from "@plane/types";
+import type { IUser } from "@plane/types";
 // services
 import { API_BASE_URL, APIService } from "@/core/services/api.service.js";
 
@@ -25,37 +25,4 @@ export class UserService extends APIService {
         throw error;
       });
   }
-
-  async getUserWorkspaceMembership(
-    workspaceSlug: string,
-    cookie: string
-  ): Promise<IProjectMember> {
-    return this.get(`/api/workspaces/${workspaceSlug}/workspace-members/me/`,
-      {
-        headers: {
-          Cookie: cookie,
-        },
-      })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async getUserProjectMembership(
-    workspaceSlug: string,
-    projectId: string,
-    cookie: string
-  ): Promise<IProjectMember> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/project-members/me/`,
-      {
-        headers: {
-          Cookie: cookie,
-        },
-      })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
 }

packages/editor/package.json

@@ -48,7 +48,7 @@
     "@tiptap/extension-placeholder": "^2.3.0",
     "@tiptap/extension-task-item": "^2.1.13",
     "@tiptap/extension-task-list": "^2.1.13",
-    "@tiptap/extension-text-style": "^2.1.13",
+    "@tiptap/extension-text-style": "^2.7.1",
     "@tiptap/extension-underline": "^2.1.13",
     "@tiptap/pm": "^2.1.13",
     "@tiptap/react": "^2.1.13",

packages/editor/src/ce/extensions/document-extensions.tsx

@@ -1,6 +1,6 @@
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import { Extensions } from "@tiptap/core";
-import { SlashCommand } from "@/extensions";
+import { SlashCommands } from "@/extensions";
 // plane editor types
 import { TIssueEmbedConfig } from "@/plane-editor/types";
 // types
@@ -14,7 +14,7 @@ type Props = {
 };
 
 export const DocumentEditorAdditionalExtensions = (_props: Props) => {
-  const extensions: Extensions = [SlashCommand()];
+  const extensions: Extensions = [SlashCommands()];
 
   return extensions;
 };

packages/editor/src/core/components/editors/rich-text/editor.tsx

@@ -3,7 +3,7 @@ import { forwardRef, useCallback } from "react";
 import { EditorWrapper } from "@/components/editors";
 import { EditorBubbleMenu } from "@/components/menus";
 // extensions
-import { SideMenuExtension, SlashCommand } from "@/extensions";
+import { SideMenuExtension, SlashCommands } from "@/extensions";
 // types
 import { EditorRefApi, IRichTextEditor } from "@/types";
 
@@ -11,7 +11,7 @@ const RichTextEditor = (props: IRichTextEditor) => {
   const { dragDropEnabled } = props;
 
   const getExtensions = useCallback(() => {
-    const extensions = [SlashCommand()];
+    const extensions = [SlashCommands()];
 
     extensions.push(
       SideMenuExtension({

packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx

@@ -0,0 +1,106 @@
+import { Dispatch, FC, SetStateAction } from "react";
+import { Editor } from "@tiptap/react";
+import { ALargeSmall, Ban } from "lucide-react";
+// constants
+import { COLORS_LIST } from "@/constants/common";
+// helpers
+import { cn } from "@/helpers/common";
+import { BackgroundColorItem, TextColorItem } from "../menu-items";
+
+type Props = {
+  editor: Editor;
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+export const BubbleMenuColorSelector: FC<Props> = (props) => {
+  const { editor, isOpen, setIsOpen } = props;
+
+  const activeTextColor = COLORS_LIST.find((c) => editor.getAttributes("textStyle").color === c.key);
+  const activeBackgroundColor = COLORS_LIST.find((c) => editor.getAttributes("textStyle").backgroundColor === c.key);
+
+  return (
+    <div className="relative h-full">
+      <button
+        type="button"
+        onClick={(e) => {
+          setIsOpen(!isOpen);
+          e.stopPropagation();
+        }}
+        className="flex items-center gap-1 h-full whitespace-nowrap px-3 text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 rounded transition-colors"
+      >
+        <span>Color</span>
+        <span
+          className={cn(
+            "flex-shrink-0 size-6 grid place-items-center rounded border-[0.5px] border-custom-border-300",
+            {
+              "bg-custom-background-100": !activeBackgroundColor,
+            }
+          )}
+          style={{
+            backgroundColor: activeBackgroundColor ? activeBackgroundColor.backgroundColor : "transparent",
+          }}
+        >
+          <ALargeSmall
+            className={cn("size-3.5", {
+              "text-custom-text-100": !activeTextColor,
+            })}
+            style={{
+              color: activeTextColor ? activeTextColor.textColor : "inherit",
+            }}
+          />
+        </span>
+      </button>
+      {isOpen && (
+        <section className="fixed top-full z-[99999] mt-1 rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-2 space-y-2 shadow-custom-shadow-rg animate-in fade-in slide-in-from-top-1">
+          <div className="space-y-1.5">
+            <p className="text-xs text-custom-text-300 font-semibold">Text colors</p>
+            <div className="flex items-center gap-2">
+              {COLORS_LIST.map((color) => (
+                <button
+                  key={color.key}
+                  type="button"
+                  className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
+                  style={{
+                    backgroundColor: color.textColor,
+                  }}
+                  onClick={() => TextColorItem(editor).command(color.key)}
+                />
+              ))}
+              <button
+                type="button"
+                className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
+                onClick={() => TextColorItem(editor).command(undefined)}
+              >
+                <Ban className="size-4" />
+              </button>
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <p className="text-xs text-custom-text-300 font-semibold">Background colors</p>
+            <div className="flex items-center gap-2">
+              {COLORS_LIST.map((color) => (
+                <button
+                  key={color.key}
+                  type="button"
+                  className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
+                  style={{
+                    backgroundColor: color.backgroundColor,
+                  }}
+                  onClick={() => BackgroundColorItem(editor).command(color.key)}
+                />
+              ))}
+              <button
+                type="button"
+                className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
+                onClick={() => BackgroundColorItem(editor).command(undefined)}
+              >
+                <Ban className="size-4" />
+              </button>
+            </div>
+          </div>
+        </section>
+      )}
+    </div>
+  );
+};

packages/editor/src/core/components/menus/bubble-menu/index.ts

@@ -1,3 +1,4 @@
+export * from "./color-selector";
 export * from "./link-selector";
 export * from "./node-selector";
 export * from "./root";

packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
 import { Editor } from "@tiptap/core";
-import { Check, Trash } from "lucide-react";
+import { Check, Link, Trash } from "lucide-react";
 // helpers
 import { cn, isValidHttpUrl } from "@/helpers/common";
 import { setLinkEditor, unsetLinkEditor } from "@/helpers/editor-commands";
@@ -11,7 +11,9 @@ type Props = {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 };
 
-export const BubbleMenuLinkSelector: FC<Props> = ({ editor, isOpen, setIsOpen }) => {
+export const BubbleMenuLinkSelector: FC<Props> = (props) => {
+  const { editor, isOpen, setIsOpen } = props;
+  // refs
   const inputRef = useRef<HTMLInputElement>(null);
 
   const onLinkSubmit = useCallback(() => {
@@ -28,26 +30,23 @@ export const BubbleMenuLinkSelector: FC<Props> = ({ editor, isOpen, setIsOpen })
   });
 
   return (
-    <div className="relative">
+    <div className="relative h-full">
       <button
         type="button"
         className={cn(
-          "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100",
-          { "bg-custom-background-100": isOpen }
+          "h-full flex items-center gap-1 px-3 text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 rounded transition-colors",
+          {
+            "bg-custom-background-80": isOpen,
+            "text-custom-text-100": editor.isActive("link"),
+          }
         )}
         onClick={(e) => {
           setIsOpen(!isOpen);
           e.stopPropagation();
         }}
       >
-        <p className="text-base">↗</p>
-        <p
-          className={cn("underline underline-offset-4", {
-            "text-custom-text-100": editor.isActive("link"),
-          })}
-        >
-          Link
-        </p>
+        <span>Link</span>
+        <Link className="flex-shrink-0 size-3" />
       </button>
       {isOpen && (
         <div

packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx

@@ -15,7 +15,7 @@ import {
   HeadingFourItem,
   HeadingFiveItem,
   HeadingSixItem,
-  BubbleMenuItem,
+  EditorMenuItem,
 } from "@/components/menus";
 // helpers
 import { cn } from "@/helpers/common";
@@ -26,8 +26,10 @@ type Props = {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 };
 
-export const BubbleMenuNodeSelector: FC<Props> = ({ editor, isOpen, setIsOpen }) => {
-  const items: BubbleMenuItem[] = [
+export const BubbleMenuNodeSelector: FC<Props> = (props) => {
+  const { editor, isOpen, setIsOpen } = props;
+
+  const items: EditorMenuItem[] = [
     TextItem(editor),
     HeadingOneItem(editor),
     HeadingTwoItem(editor),
@@ -42,7 +44,7 @@ export const BubbleMenuNodeSelector: FC<Props> = ({ editor, isOpen, setIsOpen })
     CodeItem(editor),
   ];
 
-  const activeItem = items.filter((item) => item.isActive()).pop() ?? {
+  const activeItem = items.filter((item) => item.isActive("")).pop() ?? {
     name: "Multiple",
   };
 
@@ -54,12 +56,11 @@ export const BubbleMenuNodeSelector: FC<Props> = ({ editor, isOpen, setIsOpen })
           setIsOpen(!isOpen);
           e.stopPropagation();
         }}
-        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
+        className="flex items-center gap-1 h-full whitespace-nowrap px-3 text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 rounded transition-colors"
       >
         <span>{activeItem?.name}</span>
-        <ChevronDown className="h-4 w-4" />
+        <ChevronDown className="flex-shrink-0 size-3" />
       </button>
-
       {isOpen && (
         <section className="fixed top-full z-[99999] mt-1 flex w-48 flex-col overflow-hidden rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg animate-in fade-in slide-in-from-top-1">
           {items.map((item) => (

packages/editor/src/core/components/menus/bubble-menu/root.tsx

@@ -1,12 +1,13 @@
 import { FC, useEffect, useState } from "react";
 import { BubbleMenu, BubbleMenuProps, isNodeSelection } from "@tiptap/react";
-import { LucideIcon } from "lucide-react";
 // components
 import {
   BoldItem,
+  BubbleMenuColorSelector,
   BubbleMenuLinkSelector,
   BubbleMenuNodeSelector,
   CodeItem,
+  EditorMenuItem,
   ItalicItem,
   StrikeThroughItem,
   UnderLineItem,
@@ -16,34 +17,23 @@ import { isCellSelection } from "@/extensions/table/table/utilities/is-cell-sele
 // helpers
 import { cn } from "@/helpers/common";
 
-export interface BubbleMenuItem {
-  key: string;
-  name: string;
-  isActive: () => boolean;
-  command: () => void;
-  icon: LucideIcon;
-}
-
 type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
 
 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
-  const items: BubbleMenuItem[] = [
-    ...(props.editor.isActive("code")
-      ? []
-      : [
-          BoldItem(props.editor),
-          ItalicItem(props.editor),
-          UnderLineItem(props.editor),
-          StrikeThroughItem(props.editor),
-        ]),
-    CodeItem(props.editor),
-  ];
+  // states
+  const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
+  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
+  const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
+  const [isSelecting, setIsSelecting] = useState(false);
+
+  const items: EditorMenuItem[] = props.editor.isActive("code")
+    ? [CodeItem(props.editor)]
+    : [BoldItem(props.editor), ItalicItem(props.editor), UnderLineItem(props.editor), StrikeThroughItem(props.editor)];
 
   const bubbleMenuProps: EditorBubbleMenuProps = {
     ...props,
     shouldShow: ({ state, editor }) => {
       const { selection } = state;
-
       const { empty } = selection;
 
       if (
@@ -63,15 +53,11 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
       onHidden: () => {
         setIsNodeSelectorOpen(false);
         setIsLinkSelectorOpen(false);
+        setIsColorSelectorOpen(false);
       },
     },
   };
 
-  const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
-  const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
-
-  const [isSelecting, setIsSelecting] = useState(false);
-
   useEffect(() => {
     function handleMouseDown() {
       function handleMouseMove() {
@@ -102,51 +88,66 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
   return (
     <BubbleMenu
       {...bubbleMenuProps}
-      className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl"
+      className="flex py-2 divide-x divide-custom-border-200 rounded-lg border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
     >
-      {isSelecting ? null : (
+      {!isSelecting && (
         <>
-          {!props.editor.isActive("table") && (
-            <BubbleMenuNodeSelector
-              editor={props.editor!}
-              isOpen={isNodeSelectorOpen}
-              setIsOpen={() => {
-                setIsNodeSelectorOpen(!isNodeSelectorOpen);
-                setIsLinkSelectorOpen(false);
-              }}
-            />
-          )}
-          {!props.editor.isActive("code") && (
-            <BubbleMenuLinkSelector
-              editor={props.editor}
-              isOpen={isLinkSelectorOpen}
-              setIsOpen={() => {
-                setIsLinkSelectorOpen(!isLinkSelectorOpen);
-                setIsNodeSelectorOpen(false);
-              }}
-            />
-          )}
-          <div className="flex">
+          <div className="px-2">
+            {!props.editor.isActive("table") && (
+              <BubbleMenuNodeSelector
+                editor={props.editor!}
+                isOpen={isNodeSelectorOpen}
+                setIsOpen={() => {
+                  setIsNodeSelectorOpen((prev) => !prev);
+                  setIsLinkSelectorOpen(false);
+                  setIsColorSelectorOpen(false);
+                }}
+              />
+            )}
+          </div>
+          <div className="px-2">
+            {!props.editor.isActive("code") && (
+              <BubbleMenuLinkSelector
+                editor={props.editor}
+                isOpen={isLinkSelectorOpen}
+                setIsOpen={() => {
+                  setIsLinkSelectorOpen((prev) => !prev);
+                  setIsNodeSelectorOpen(false);
+                  setIsColorSelectorOpen(false);
+                }}
+              />
+            )}
+          </div>
+          <div className="px-2">
+            {!props.editor.isActive("code") && (
+              <BubbleMenuColorSelector
+                editor={props.editor}
+                isOpen={isColorSelectorOpen}
+                setIsOpen={() => {
+                  setIsColorSelectorOpen((prev) => !prev);
+                  setIsNodeSelectorOpen(false);
+                  setIsLinkSelectorOpen(false);
+                }}
+              />
+            )}
+          </div>
+          <div className="flex gap-0.5 px-2">
             {items.map((item) => (
               <button
-                key={item.name}
+                key={item.key}
                 type="button"
                 onClick={(e) => {
                   item.command();
                   e.stopPropagation();
                 }}
                 className={cn(
-                  "p-2 text-custom-text-300 transition-colors hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5",
+                  "size-7 grid place-items-center rounded text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 transition-colors",
                   {
-                    "bg-custom-primary-100/5 text-custom-text-100": item.isActive(),
+                    "bg-custom-background-80 text-custom-text-100": item.isActive(""),
                   }
                 )}
               >
-                <item.icon
-                  className={cn("h-4 w-4", {
-                    "text-custom-text-100": item.isActive(),
-                  })}
-                />
+                <item.icon className="size-4" />
               </button>
             ))}
           </div>

packages/editor/src/core/components/menus/menu-items.ts

@@ -20,12 +20,14 @@ import {
   Heading6,
   CaseSensitive,
   LucideIcon,
+  Palette,
 } from "lucide-react";
 // helpers
 import {
   insertImage,
   insertTableCommand,
   setText,
+  toggleBackgroundColor,
   toggleBlockquote,
   toggleBold,
   toggleBulletList,
@@ -40,18 +42,26 @@ import {
   toggleOrderedList,
   toggleStrike,
   toggleTaskList,
+  toggleTextColor,
   toggleUnderline,
 } from "@/helpers/editor-commands";
 // types
-import { TEditorCommands } from "@/types";
+import { TColorEditorCommands, TNonColorEditorCommands } from "@/types";
 
-export interface EditorMenuItem {
-  key: TEditorCommands;
+export type EditorMenuItem = {
   name: string;
-  isActive: () => boolean;
-  command: () => void;
+  command: (...args: any) => void;
   icon: LucideIcon;
-}
+} & (
+  | {
+      key: TNonColorEditorCommands;
+      isActive: () => boolean;
+    }
+  | {
+      key: TColorEditorCommands;
+      isActive: (color: string | undefined) => boolean;
+    }
+);
 
 export const TextItem = (editor: Editor): EditorMenuItem => ({
   key: "text",
@@ -198,10 +208,25 @@ export const ImageItem = (editor: Editor) =>
     icon: ImageIcon,
   }) as const;
 
-export function getEditorMenuItems(editor: Editor | null) {
-  if (!editor) {
-    return [];
-  }
+export const TextColorItem = (editor: Editor): EditorMenuItem => ({
+  key: "text-color",
+  name: "Color",
+  isActive: (color) => editor.getAttributes("textStyle").color === color,
+  command: (color: string) => toggleTextColor(color, editor),
+  icon: Palette,
+});
+
+export const BackgroundColorItem = (editor: Editor): EditorMenuItem => ({
+  key: "background-color",
+  name: "Background color",
+  isActive: (color) => editor.getAttributes("textStyle").backgroundColor === color,
+  command: (color: string) => toggleBackgroundColor(color, editor),
+  icon: Palette,
+});
+
+export const getEditorMenuItems = (editor: Editor | null): EditorMenuItem[] => {
+  if (!editor) return [];
+
   return [
     TextItem(editor),
     HeadingOneItem(editor),
@@ -221,5 +246,7 @@ export function getEditorMenuItems(editor: Editor | null) {
     QuoteItem(editor),
     TableItem(editor),
     ImageItem(editor),
+    TextColorItem(editor),
+    BackgroundColorItem(editor),
   ];
-}
+};

packages/editor/src/core/constants/common.ts

@@ -0,0 +1,61 @@
+export const COLORS_LIST: {
+  key: string;
+  label: string;
+  textColor: string;
+  backgroundColor: string;
+}[] = [
+  {
+    key: "gray",
+    label: "Gray",
+    textColor: "var(--editor-colors-gray-text)",
+    backgroundColor: "var(--editor-colors-gray-background)",
+  },
+  {
+    key: "peach",
+    label: "Peach",
+    textColor: "var(--editor-colors-peach-text)",
+    backgroundColor: "var(--editor-colors-peach-background)",
+  },
+  {
+    key: "pink",
+    label: "Pink",
+    textColor: "var(--editor-colors-pink-text)",
+    backgroundColor: "var(--editor-colors-pink-background)",
+  },
+  {
+    key: "orange",
+    label: "Orange",
+    textColor: "var(--editor-colors-orange-text)",
+    backgroundColor: "var(--editor-colors-orange-background)",
+  },
+  {
+    key: "green",
+    label: "Green",
+    textColor: "var(--editor-colors-green-text)",
+    backgroundColor: "var(--editor-colors-green-background)",
+  },
+  {
+    key: "light-blue",
+    label: "Light blue",
+    textColor: "var(--editor-colors-light-blue-text)",
+    backgroundColor: "var(--editor-colors-light-blue-background)",
+  },
+  {
+    key: "dark-blue",
+    label: "Dark blue",
+    textColor: "var(--editor-colors-dark-blue-text)",
+    backgroundColor: "var(--editor-colors-dark-blue-background)",
+  },
+  {
+    key: "purple",
+    label: "Purple",
+    textColor: "var(--editor-colors-purple-text)",
+    backgroundColor: "var(--editor-colors-purple-background)",
+  },
+  // {
+  //   key: "pink-blue-gradient",
+  //   label: "Pink blue gradient",
+  //   textColor: "var(--editor-colors-pink-blue-gradient-text)",
+  //   backgroundColor: "var(--editor-colors-pink-blue-gradient-background)",
+  // },
+];

packages/editor/src/core/extensions/core-without-props.ts

@@ -16,6 +16,8 @@ import { IssueWidgetWithoutProps } from "./issue-embed/issue-embed-without-props
 import { CustomMentionWithoutProps } from "./mentions/mentions-without-props";
 import { CustomQuoteExtension } from "./quote";
 import { TableHeader, TableCell, TableRow, Table } from "./table";
+import { CustomTextColorExtension } from "./custom-text-color";
+import { CustomBackgroundColorExtension } from "./custom-background-color";
 
 export const CoreEditorExtensionsWithoutProps = [
   StarterKit.configure({
@@ -83,6 +85,8 @@ export const CoreEditorExtensionsWithoutProps = [
   TableCell,
   TableRow,
   CustomMentionWithoutProps(),
+  CustomTextColorExtension,
+  CustomBackgroundColorExtension,
 ];
 
 export const DocumentEditorExtensionsWithoutProps = [IssueWidgetWithoutProps()];

packages/editor/src/core/extensions/custom-background-color.ts

@@ -0,0 +1,65 @@
+import { Extension } from "@tiptap/core";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    backgroundColor: {
+      /**
+       * Set the background color
+       * @param color The color to set
+       * @example editor.commands.setBackgroundColor('red')
+       */
+      setBackgroundColor: (color: string) => ReturnType;
+
+      /**
+       * Unset the background color
+       * @example editor.commands.unsetBackgroundColor()
+       */
+      unsetBackgroundColor: () => ReturnType;
+    };
+  }
+}
+
+export const CustomBackgroundColorExtension = Extension.create({
+  name: "customBackgroundColor",
+
+  addOptions() {
+    return {
+      types: ["textStyle"],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          backgroundColor: {
+            default: null,
+            parseHTML: (element: HTMLElement) => element.getAttribute("data-background-color"),
+            renderHTML: (attributes: { backgroundColor: string }) => {
+              if (!attributes.backgroundColor) {
+                return {};
+              }
+              return {
+                "data-background-color": attributes.backgroundColor,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setBackgroundColor:
+        (backgroundColor: string) =>
+        ({ chain }) =>
+          chain().setMark("textStyle", { backgroundColor }).run(),
+      unsetBackgroundColor:
+        () =>
+        ({ chain }) =>
+          chain().setMark("textStyle", { backgroundColor: null }).run(),
+    };
+  },
+});

packages/editor/src/core/extensions/custom-image/components/image-block.tsx

@@ -201,8 +201,10 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   // show the image loader if the remote image's src or preview image from filesystem is not set yet (while loading the image post upload) (or)
   // if the initial resize (from 35% width and "auto" height attrs to the actual size in px) is not complete
   const showImageLoader = !(remoteImageSrc || imageFromFileSystem) || !initialResizeComplete;
-  // show the image utils only if the editor is editable, the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
-  const showImageUtils = editor.isEditable && remoteImageSrc && initialResizeComplete;
+  // show the image utils only if the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
+  const showImageUtils = remoteImageSrc && initialResizeComplete;
+  // show the image resizer only if the editor is editable, the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
+  const showImageResizer = editor.isEditable && remoteImageSrc && initialResizeComplete;
   // show the preview image from the file system if the remote image's src is not set
   const displayedImageSrc = remoteImageSrc ?? imageFromFileSystem;
 
@@ -258,7 +260,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       {selected && displayedImageSrc === remoteImageSrc && (
         <div className="absolute inset-0 size-full bg-custom-primary-500/30" />
       )}
-      {showImageUtils && (
+      {showImageResizer && (
         <>
           <div
             className={cn(

packages/editor/src/core/extensions/custom-text-color.ts

@@ -0,0 +1,77 @@
+import { COLORS_LIST } from "@/constants/common";
+import { Extension } from "@tiptap/core";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    color: {
+      /**
+       * Set the text color
+       * @param color The color to set
+       * @example editor.commands.setColor('red')
+       */
+      setTextColor: (color: string) => ReturnType;
+
+      /**
+       * Unset the text color
+       * @example editor.commands.unsetColor()
+       */
+      unsetTextColor: () => ReturnType;
+    };
+  }
+}
+
+export const CustomTextColorExtension = Extension.create({
+  name: "customTextColor",
+
+  addOptions() {
+    return {
+      types: ["textStyle"],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          color: {
+            default: null,
+            parseHTML: (element: HTMLElement) => element.getAttribute("data-text-color"),
+            renderHTML: (attributes: { color: string }) => {
+              const { color } = attributes;
+              if (!color) {
+                return {};
+              }
+
+              let elementAttributes: Record<string, string> = {
+                "data-text-color": color,
+              };
+
+              if (!COLORS_LIST.find((c) => c.key === color)) {
+                elementAttributes = {
+                  ...elementAttributes,
+                  style: `color: ${color}`,
+                };
+              }
+
+              return elementAttributes;
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setTextColor:
+        (color: string) =>
+        ({ chain }) =>
+          chain().setMark("textStyle", { color }).run(),
+      unsetTextColor:
+        () =>
+        ({ chain }) =>
+          chain().setMark("textStyle", { color: null }).run(),
+    };
+  },
+});

packages/editor/src/core/extensions/extensions.tsx

@@ -8,6 +8,7 @@ import StarterKit from "@tiptap/starter-kit";
 import { Markdown } from "tiptap-markdown";
 // extensions
 import {
+  CustomBackgroundColorExtension,
   CustomCodeBlockExtension,
   CustomCodeInlineExtension,
   CustomCodeMarkPlugin,
@@ -17,6 +18,7 @@ import {
   CustomLinkExtension,
   CustomMention,
   CustomQuoteExtension,
+  CustomTextColorExtension,
   CustomTypographyExtension,
   DropHandlerExtension,
   ImageExtension,
@@ -166,4 +168,6 @@ export const CoreEditorExtensions = ({
     includeChildren: true,
   }),
   CharacterCount,
+  CustomTextColorExtension,
+  CustomBackgroundColorExtension,
 ];

packages/editor/src/core/extensions/index.ts

@@ -6,10 +6,13 @@ export * from "./custom-list-keymap";
 export * from "./image";
 export * from "./issue-embed";
 export * from "./mentions";
+export * from "./slash-commands";
 export * from "./table";
 export * from "./typography";
 export * from "./core-without-props";
+export * from "./custom-background-color";
 export * from "./custom-code-inline";
+export * from "./custom-text-color";
 export * from "./drop";
 export * from "./enter-key-extension";
 export * from "./extensions";

packages/editor/src/core/extensions/read-only-extensions.tsx

@@ -21,6 +21,8 @@ import {
   CustomMention,
   HeadingListExtension,
   CustomReadOnlyImageExtension,
+  CustomTextColorExtension,
+  CustomBackgroundColorExtension,
 } from "@/extensions";
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
@@ -109,5 +111,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
     readonly: true,
   }),
   CharacterCount,
+  CustomTextColorExtension,
+  CustomBackgroundColorExtension,
   HeadingListExtension,
 ];

packages/editor/src/core/extensions/side-menu.tsx

@@ -42,7 +42,7 @@ export const SideMenuExtension = (props: Props) => {
             ai: aiEnabled,
             dragDrop: dragDropEnabled,
           },
-          scrollThreshold: { up: 300, down: 100 },
+          scrollThreshold: { up: 200, down: 100 },
         }),
       ];
     },

packages/editor/src/core/extensions/slash-commands.tsx

@@ -1,422 +0,0 @@
-import { useState, useEffect, useCallback, ReactNode, useRef, useLayoutEffect } from "react";
-import { Editor, Range, Extension } from "@tiptap/core";
-import { ReactRenderer } from "@tiptap/react";
-import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
-import tippy from "tippy.js";
-import {
-  CaseSensitive,
-  Code2,
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
-  Heading5,
-  Heading6,
-  ImageIcon,
-  List,
-  ListOrdered,
-  ListTodo,
-  MinusSquare,
-  Quote,
-  Table,
-} from "lucide-react";
-// helpers
-import { cn } from "@/helpers/common";
-import {
-  insertTableCommand,
-  toggleBlockquote,
-  toggleBulletList,
-  toggleOrderedList,
-  toggleTaskList,
-  toggleHeadingOne,
-  toggleHeadingTwo,
-  toggleHeadingThree,
-  toggleHeadingFour,
-  toggleHeadingFive,
-  toggleHeadingSix,
-  insertImage,
-} from "@/helpers/editor-commands";
-// types
-import { CommandProps, ISlashCommandItem } from "@/types";
-
-interface CommandItemProps {
-  key: string;
-  title: string;
-  description: string;
-  icon: ReactNode;
-}
-
-export type SlashCommandOptions = {
-  suggestion: Omit<SuggestionOptions, "editor">;
-};
-
-const Command = Extension.create<SlashCommandOptions>({
-  name: "slash-command",
-  addOptions() {
-    return {
-      suggestion: {
-        char: "/",
-        command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => {
-          props.command({ editor, range });
-        },
-        allow({ editor }: { editor: Editor }) {
-          const { selection } = editor.state;
-
-          const parentNode = selection.$from.node(selection.$from.depth);
-          const blockType = parentNode.type.name;
-
-          if (blockType === "codeBlock") {
-            return false;
-          }
-
-          if (editor.isActive("table")) {
-            return false;
-          }
-
-          return true;
-        },
-      },
-    };
-  },
-  addProseMirrorPlugins() {
-    return [
-      Suggestion({
-        editor: this.editor,
-        ...this.options.suggestion,
-      }),
-    ];
-  },
-});
-
-const getSuggestionItems =
-  (additionalOptions?: Array<ISlashCommandItem>) =>
-  ({ query }: { query: string }) => {
-    let slashCommands: ISlashCommandItem[] = [
-      {
-        key: "text",
-        title: "Text",
-        description: "Just start typing with plain text.",
-        searchTerms: ["p", "paragraph"],
-        icon: <CaseSensitive className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => {
-          if (range) {
-            editor.chain().focus().deleteRange(range).clearNodes().run();
-          }
-          editor.chain().focus().clearNodes().run();
-        },
-      },
-      {
-        key: "h1",
-        title: "Heading 1",
-        description: "Big section heading.",
-        searchTerms: ["title", "big", "large"],
-        icon: <Heading1 className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => {
-          toggleHeadingOne(editor, range);
-        },
-      },
-      {
-        key: "h2",
-        title: "Heading 2",
-        description: "Medium section heading.",
-        searchTerms: ["subtitle", "medium"],
-        icon: <Heading2 className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => {
-          toggleHeadingTwo(editor, range);
-        },
-      },
-      {
-        key: "h3",
-        title: "Heading 3",
-        description: "Small section heading.",
-        searchTerms: ["subtitle", "small"],
-        icon: <Heading3 className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => {
-          toggleHeadingThree(editor, range);
-        },
-      },
-      {
-        key: "h4",
-        title: "Heading 4",
-        description: "Small section heading.",
-        searchTerms: ["subtitle", "small"],
-        icon: <Heading4 className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => {
-          toggleHeadingFour(editor, range);
-        },
-      },
-      {
-        key: "h5",
-        title: "Heading 5",
-        description: "Small section heading.",
-        searchTerms: ["subtitle", "small"],
-        icon: <Heading5 className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => {
-          toggleHeadingFive(editor, range);
-        },
-      },
-      {
-        key: "h6",
-        title: "Heading 6",
-        description: "Small section heading.",
-        searchTerms: ["subtitle", "small"],
-        icon: <Heading6 className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => {
-          toggleHeadingSix(editor, range);
-        },
-      },
-      {
-        key: "to-do-list",
-        title: "To do",
-        description: "Track tasks with a to-do list.",
-        searchTerms: ["todo", "task", "list", "check", "checkbox"],
-        icon: <ListTodo className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => {
-          toggleTaskList(editor, range);
-        },
-      },
-      {
-        key: "bulleted-list",
-        title: "Bullet list",
-        description: "Create a simple bullet list.",
-        searchTerms: ["unordered", "point"],
-        icon: <List className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => {
-          toggleBulletList(editor, range);
-        },
-      },
-      {
-        key: "numbered-list",
-        title: "Numbered list",
-        description: "Create a list with numbering.",
-        searchTerms: ["ordered"],
-        icon: <ListOrdered className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => {
-          toggleOrderedList(editor, range);
-        },
-      },
-      {
-        key: "table",
-        title: "Table",
-        description: "Create a table",
-        searchTerms: ["table", "cell", "db", "data", "tabular"],
-        icon: <Table className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => {
-          insertTableCommand(editor, range);
-        },
-      },
-      {
-        key: "quote",
-        title: "Quote",
-        description: "Capture a quote.",
-        searchTerms: ["blockquote"],
-        icon: <Quote className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => toggleBlockquote(editor, range),
-      },
-      {
-        key: "code",
-        title: "Code",
-        description: "Capture a code snippet.",
-        searchTerms: ["codeblock"],
-        icon: <Code2 className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
-      },
-      {
-        key: "image",
-        title: "Image",
-        icon: <ImageIcon className="size-3.5" />,
-        description: "Insert an image",
-        searchTerms: ["img", "photo", "picture", "media", "upload"],
-        command: ({ editor, range }: CommandProps) => insertImage({ editor, event: "insert", range }),
-      },
-      {
-        key: "divider",
-        title: "Divider",
-        description: "Visually divide blocks.",
-        searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
-        icon: <MinusSquare className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => {
-          editor.chain().focus().deleteRange(range).setHorizontalRule().run();
-        },
-      },
-    ];
-
-    if (additionalOptions) {
-      additionalOptions.map((item) => {
-        slashCommands.push(item);
-      });
-    }
-
-    slashCommands = slashCommands.filter((item) => {
-      if (typeof query === "string" && query.length > 0) {
-        const search = query.toLowerCase();
-        return (
-          item.title.toLowerCase().includes(search) ||
-          item.description.toLowerCase().includes(search) ||
-          (item.searchTerms && item.searchTerms.some((term: string) => term.includes(search)))
-        );
-      }
-      return true;
-    });
-
-    return slashCommands;
-  };
-
-export const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
-  const containerHeight = container.offsetHeight;
-  const itemHeight = item ? item.offsetHeight : 0;
-
-  const top = item.offsetTop;
-  const bottom = top + itemHeight;
-
-  if (top < container.scrollTop) {
-    container.scrollTop -= container.scrollTop - top + 5;
-  } else if (bottom > containerHeight + container.scrollTop) {
-    container.scrollTop += bottom - containerHeight - container.scrollTop + 5;
-  }
-};
-
-const CommandList = ({ items, command }: { items: CommandItemProps[]; command: any; editor: any; range: any }) => {
-  // states
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  // refs
-  const commandListContainer = useRef<HTMLDivElement>(null);
-
-  const selectItem = useCallback(
-    (index: number) => {
-      const item = items[index];
-      if (item) command(item);
-    },
-    [command, items]
-  );
-
-  useEffect(() => {
-    const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (navigationKeys.includes(e.key)) {
-        e.preventDefault();
-        if (e.key === "ArrowUp") {
-          setSelectedIndex((selectedIndex + items.length - 1) % items.length);
-          return true;
-        }
-        if (e.key === "ArrowDown") {
-          setSelectedIndex((selectedIndex + 1) % items.length);
-          return true;
-        }
-        if (e.key === "Enter") {
-          selectItem(selectedIndex);
-          return true;
-        }
-        return false;
-      }
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [items, selectedIndex, setSelectedIndex, selectItem]);
-
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [items]);
-
-  useLayoutEffect(() => {
-    const container = commandListContainer?.current;
-
-    const item = container?.children[selectedIndex] as HTMLElement;
-
-    if (item && container) updateScrollView(container, item);
-  }, [selectedIndex]);
-
-  if (items.length <= 0) return null;
-
-  return (
-    <div
-      id="slash-command"
-      ref={commandListContainer}
-      className="z-10 max-h-80 min-w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg"
-    >
-      {items.map((item, index) => (
-        <button
-          key={item.key}
-          className={cn(
-            "flex items-center gap-2 w-full rounded px-1 py-1.5 text-sm text-left truncate text-custom-text-200 hover:bg-custom-background-80",
-            {
-              "bg-custom-background-80": index === selectedIndex,
-            }
-          )}
-          onClick={(e) => {
-            e.stopPropagation();
-            selectItem(index);
-          }}
-        >
-          <span className="grid place-items-center flex-shrink-0">{item.icon}</span>
-          <p className="flex-grow truncate">{item.title}</p>
-        </button>
-      ))}
-    </div>
-  );
-};
-
-interface CommandListInstance {
-  onKeyDown: (props: { event: KeyboardEvent }) => boolean;
-}
-
-const renderItems = () => {
-  let component: ReactRenderer<CommandListInstance, typeof CommandList> | null = null;
-  let popup: any | null = null;
-  return {
-    onStart: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
-      component = new ReactRenderer(CommandList, {
-        props,
-        editor: props.editor,
-      });
-
-      const tippyContainer =
-        document.querySelector(".active-editor") ?? document.querySelector('[id^="editor-container"]');
-
-      // @ts-expect-error Tippy overloads are messed up
-      popup = tippy("body", {
-        getReferenceClientRect: props.clientRect,
-        appendTo: tippyContainer,
-        content: component.element,
-        showOnCreate: true,
-        interactive: true,
-        trigger: "manual",
-        placement: "bottom-start",
-      });
-    },
-    onUpdate: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
-      component?.updateProps(props);
-
-      popup &&
-        popup[0].setProps({
-          getReferenceClientRect: props.clientRect,
-        });
-    },
-    onKeyDown: (props: { event: KeyboardEvent }) => {
-      if (props.event.key === "Escape") {
-        popup?.[0].hide();
-
-        return true;
-      }
-
-      if (component?.ref?.onKeyDown(props)) {
-        return true;
-      }
-      return false;
-    },
-    onExit: () => {
-      popup?.[0].destroy();
-      component?.destroy();
-    },
-  };
-};
-
-export const SlashCommand = (additionalOptions?: Array<ISlashCommandItem>) =>
-  Command.configure({
-    suggestion: {
-      items: getSuggestionItems(additionalOptions),
-      render: renderItems,
-    },
-  });

packages/editor/src/core/extensions/slash-commands/command-items-list.tsx

@@ -0,0 +1,294 @@
+import {
+  ALargeSmall,
+  CaseSensitive,
+  Code2,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Heading6,
+  ImageIcon,
+  List,
+  ListOrdered,
+  ListTodo,
+  MinusSquare,
+  Quote,
+  Table,
+} from "lucide-react";
+// constants
+import { COLORS_LIST } from "@/constants/common";
+// helpers
+import {
+  insertTableCommand,
+  toggleBlockquote,
+  toggleBulletList,
+  toggleOrderedList,
+  toggleTaskList,
+  toggleHeadingOne,
+  toggleHeadingTwo,
+  toggleHeadingThree,
+  toggleHeadingFour,
+  toggleHeadingFive,
+  toggleHeadingSix,
+  toggleTextColor,
+  toggleBackgroundColor,
+  insertImage,
+} from "@/helpers/editor-commands";
+// types
+import { CommandProps, ISlashCommandItem } from "@/types";
+
+export type TSlashCommandSection = {
+  key: string;
+  title?: string;
+  items: ISlashCommandItem[];
+};
+
+export const getSlashCommandFilteredSections =
+  (additionalOptions?: ISlashCommandItem[]) =>
+  ({ query }: { query: string }): TSlashCommandSection[] => {
+    const SLASH_COMMAND_SECTIONS: TSlashCommandSection[] = [
+      {
+        key: "general",
+        items: [
+          {
+            commandKey: "text",
+            key: "text",
+            title: "Text",
+            description: "Just start typing with plain text.",
+            searchTerms: ["p", "paragraph"],
+            icon: <CaseSensitive className="size-3.5" />,
+            command: ({ editor, range }: CommandProps) => {
+              if (range) {
+                editor.chain().focus().deleteRange(range).clearNodes().run();
+              }
+              editor.chain().focus().clearNodes().run();
+            },
+          },
+          {
+            commandKey: "h1",
+            key: "h1",
+            title: "Heading 1",
+            description: "Big section heading.",
+            searchTerms: ["title", "big", "large"],
+            icon: <Heading1 className="size-3.5" />,
+            command: ({ editor, range }) => toggleHeadingOne(editor, range),
+          },
+          {
+            commandKey: "h2",
+            key: "h2",
+            title: "Heading 2",
+            description: "Medium section heading.",
+            searchTerms: ["subtitle", "medium"],
+            icon: <Heading2 className="size-3.5" />,
+            command: ({ editor, range }) => toggleHeadingTwo(editor, range),
+          },
+          {
+            commandKey: "h3",
+            key: "h3",
+            title: "Heading 3",
+            description: "Small section heading.",
+            searchTerms: ["subtitle", "small"],
+            icon: <Heading3 className="size-3.5" />,
+            command: ({ editor, range }) => toggleHeadingThree(editor, range),
+          },
+          {
+            commandKey: "h4",
+            key: "h4",
+            title: "Heading 4",
+            description: "Small section heading.",
+            searchTerms: ["subtitle", "small"],
+            icon: <Heading4 className="size-3.5" />,
+            command: ({ editor, range }) => toggleHeadingFour(editor, range),
+          },
+          {
+            commandKey: "h5",
+            key: "h5",
+            title: "Heading 5",
+            description: "Small section heading.",
+            searchTerms: ["subtitle", "small"],
+            icon: <Heading5 className="size-3.5" />,
+            command: ({ editor, range }) => toggleHeadingFive(editor, range),
+          },
+          {
+            commandKey: "h6",
+            key: "h6",
+            title: "Heading 6",
+            description: "Small section heading.",
+            searchTerms: ["subtitle", "small"],
+            icon: <Heading6 className="size-3.5" />,
+            command: ({ editor, range }) => toggleHeadingSix(editor, range),
+          },
+          {
+            commandKey: "to-do-list",
+            key: "to-do-list",
+            title: "To do",
+            description: "Track tasks with a to-do list.",
+            searchTerms: ["todo", "task", "list", "check", "checkbox"],
+            icon: <ListTodo className="size-3.5" />,
+            command: ({ editor, range }) => toggleTaskList(editor, range),
+          },
+          {
+            commandKey: "bulleted-list",
+            key: "bulleted-list",
+            title: "Bullet list",
+            description: "Create a simple bullet list.",
+            searchTerms: ["unordered", "point"],
+            icon: <List className="size-3.5" />,
+            command: ({ editor, range }) => toggleBulletList(editor, range),
+          },
+          {
+            commandKey: "numbered-list",
+            key: "numbered-list",
+            title: "Numbered list",
+            description: "Create a list with numbering.",
+            searchTerms: ["ordered"],
+            icon: <ListOrdered className="size-3.5" />,
+            command: ({ editor, range }) => toggleOrderedList(editor, range),
+          },
+          {
+            commandKey: "table",
+            key: "table",
+            title: "Table",
+            description: "Create a table",
+            searchTerms: ["table", "cell", "db", "data", "tabular"],
+            icon: <Table className="size-3.5" />,
+            command: ({ editor, range }) => insertTableCommand(editor, range),
+          },
+          {
+            commandKey: "quote",
+            key: "quote",
+            title: "Quote",
+            description: "Capture a quote.",
+            searchTerms: ["blockquote"],
+            icon: <Quote className="size-3.5" />,
+            command: ({ editor, range }) => toggleBlockquote(editor, range),
+          },
+          {
+            commandKey: "code",
+            key: "code",
+            title: "Code",
+            description: "Capture a code snippet.",
+            searchTerms: ["codeblock"],
+            icon: <Code2 className="size-3.5" />,
+            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
+          },
+          {
+            commandKey: "image",
+            key: "image",
+            title: "Image",
+            icon: <ImageIcon className="size-3.5" />,
+            description: "Insert an image",
+            searchTerms: ["img", "photo", "picture", "media", "upload"],
+            command: ({ editor, range }: CommandProps) => insertImage({ editor, event: "insert", range }),
+          },
+          {
+            commandKey: "divider",
+            key: "divider",
+            title: "Divider",
+            description: "Visually divide blocks.",
+            searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
+            icon: <MinusSquare className="size-3.5" />,
+            command: ({ editor, range }) => editor.chain().focus().deleteRange(range).setHorizontalRule().run(),
+          },
+        ],
+      },
+      {
+        key: "text-color",
+        title: "Colors",
+        items: [
+          {
+            commandKey: "text-color",
+            key: "text-color-default",
+            title: "Default",
+            description: "Change text color",
+            searchTerms: ["color", "text", "default"],
+            icon: (
+              <ALargeSmall
+                className="size-3.5"
+                style={{
+                  color: "rgba(var(--color-text-100))",
+                }}
+              />
+            ),
+            command: ({ editor, range }) => toggleTextColor(undefined, editor, range),
+          },
+          ...COLORS_LIST.map(
+            (color) =>
+              ({
+                commandKey: "text-color",
+                key: `text-color-${color.key}`,
+                title: color.label,
+                description: "Change text color",
+                searchTerms: ["color", "text", color.label],
+                icon: (
+                  <ALargeSmall
+                    className="size-3.5"
+                    style={{
+                      color: color.textColor,
+                    }}
+                  />
+                ),
+                command: ({ editor, range }) => toggleTextColor(color.key, editor, range),
+              }) as ISlashCommandItem
+          ),
+        ],
+      },
+      {
+        key: "background-color",
+        title: "Background colors",
+        items: [
+          {
+            commandKey: "background-color",
+            key: "background-color-default",
+            title: "Default background",
+            description: "Change background color",
+            searchTerms: ["color", "bg", "background", "default"],
+            icon: <ALargeSmall className="size-3.5" />,
+            iconContainerStyle: {
+              borderRadius: "4px",
+              backgroundColor: "rgba(var(--color-background-100))",
+              border: "1px solid rgba(var(--color-border-300))",
+            },
+            command: ({ editor, range }) => toggleTextColor(undefined, editor, range),
+          },
+          ...COLORS_LIST.map(
+            (color) =>
+              ({
+                commandKey: "background-color",
+                key: `background-color-${color.key}`,
+                title: color.label,
+                description: "Change background color",
+                searchTerms: ["color", "bg", "background", color.label],
+                icon: <ALargeSmall className="size-3.5" />,
+                iconContainerStyle: {
+                  borderRadius: "4px",
+                  backgroundColor: color.backgroundColor,
+                },
+                command: ({ editor, range }) => toggleBackgroundColor(color.key, editor, range),
+              }) as ISlashCommandItem
+          ),
+        ],
+      },
+    ];
+
+    additionalOptions?.map((item) => {
+      SLASH_COMMAND_SECTIONS?.[0]?.items.push(item);
+    });
+
+    const filteredSlashSections = SLASH_COMMAND_SECTIONS.map((section) => ({
+      ...section,
+      items: section.items.filter((item) => {
+        if (typeof query !== "string") return;
+
+        const lowercaseQuery = query.toLowerCase();
+        return (
+          item.title.toLowerCase().includes(lowercaseQuery) ||
+          item.description.toLowerCase().includes(lowercaseQuery) ||
+          item.searchTerms.some((t) => t.includes(lowercaseQuery))
+        );
+      }),
+    }));
+
+    return filteredSlashSections.filter((s) => s.items.length !== 0);
+  };

packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx

@@ -0,0 +1,37 @@
+// helpers
+import { cn } from "@/helpers/common";
+// types
+import { ISlashCommandItem } from "@/types";
+
+type Props = {
+  isSelected: boolean;
+  item: ISlashCommandItem;
+  itemIndex: number;
+  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onMouseEnter: () => void;
+  sectionIndex: number;
+};
+
+export const CommandMenuItem: React.FC<Props> = (props) => {
+  const { isSelected, item, itemIndex, onClick, onMouseEnter, sectionIndex } = props;
+
+  return (
+    <button
+      type="button"
+      id={`item-${sectionIndex}-${itemIndex}`}
+      className={cn(
+        "flex items-center gap-2 w-full rounded px-1 py-1.5 text-sm text-left truncate text-custom-text-200",
+        {
+          "bg-custom-background-80": isSelected,
+        }
+      )}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+    >
+      <span className="size-5 grid place-items-center flex-shrink-0" style={item.iconContainerStyle}>
+        {item.icon}
+      </span>
+      <p className="flex-grow truncate">{item.title}</p>
+    </button>
+  );
+};

packages/editor/src/core/extensions/slash-commands/command-menu.tsx

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+// components
+import { TSlashCommandSection } from "./command-items-list";
+import { CommandMenuItem } from "./command-menu-item";
+
+type Props = {
+  items: TSlashCommandSection[];
+  command: any;
+};
+
+export const SlashCommandsMenu = (props: Props) => {
+  const { items: sections, command } = props;
+  // states
+  const [selectedIndex, setSelectedIndex] = useState({
+    section: 0,
+    item: 0,
+  });
+  // refs
+  const commandListContainer = useRef<HTMLDivElement>(null);
+
+  const selectItem = useCallback(
+    (sectionIndex: number, itemIndex: number) => {
+      const item = sections[sectionIndex]?.items?.[itemIndex];
+      if (item) command(item);
+    },
+    [command, sections]
+  );
+  // handle arrow key navigation
+  useEffect(() => {
+    const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (navigationKeys.includes(e.key)) {
+        e.preventDefault();
+        const currentSection = selectedIndex.section;
+        const currentItem = selectedIndex.item;
+        let nextSection = currentSection;
+        let nextItem = currentItem;
+
+        if (e.key === "ArrowUp") {
+          nextItem = currentItem - 1;
+          if (nextItem < 0) {
+            nextSection = currentSection - 1;
+            if (nextSection < 0) nextSection = sections.length - 1;
+            nextItem = sections[nextSection].items.length - 1;
+          }
+        }
+        if (e.key === "ArrowDown") {
+          nextItem = currentItem + 1;
+          if (nextItem >= sections[currentSection].items.length) {
+            nextSection = currentSection + 1;
+            if (nextSection >= sections.length) nextSection = 0;
+            nextItem = 0;
+          }
+        }
+        if (e.key === "Enter") {
+          selectItem(currentSection, currentItem);
+        }
+        setSelectedIndex({
+          section: nextSection,
+          item: nextItem,
+        });
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [sections, selectedIndex, setSelectedIndex, selectItem]);
+  // initialize the select index to 0 by default
+  useEffect(() => {
+    setSelectedIndex({
+      section: 0,
+      item: 0,
+    });
+  }, [sections]);
+  // scroll to the dropdown item when navigating via keyboard
+  useLayoutEffect(() => {
+    const container = commandListContainer?.current;
+    if (!container) return;
+
+    const item = container.querySelector(`#item-${selectedIndex.section}-${selectedIndex.item}`) as HTMLElement;
+
+    // use scroll into view to bring the item in view if it is not in view
+    item?.scrollIntoView({ block: "nearest" });
+  }, [sections, selectedIndex]);
+
+  const areSearchResultsEmpty = sections.map((s) => s.items.length).reduce((acc, curr) => acc + curr, 0) === 0;
+
+  if (areSearchResultsEmpty) return null;
+
+  return (
+    <div
+      id="slash-command"
+      ref={commandListContainer}
+      className="z-10 max-h-80 min-w-[12rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg space-y-2"
+    >
+      {sections.map((section, sectionIndex) => (
+        <div key={section.key} className="space-y-2">
+          {section.title && <h6 className="text-xs font-semibold text-custom-text-300">{section.title}</h6>}
+          <div>
+            {section.items.map((item, itemIndex) => (
+              <CommandMenuItem
+                key={item.key}
+                isSelected={sectionIndex === selectedIndex.section && itemIndex === selectedIndex.item}
+                item={item}
+                itemIndex={itemIndex}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  selectItem(sectionIndex, itemIndex);
+                }}
+                onMouseEnter={() =>
+                  setSelectedIndex({
+                    section: sectionIndex,
+                    item: itemIndex,
+                  })
+                }
+                sectionIndex={sectionIndex}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};

packages/editor/src/core/extensions/slash-commands/index.ts

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

packages/editor/src/core/extensions/slash-commands/root.tsx

@@ -0,0 +1,111 @@
+import { Editor, Range, Extension } from "@tiptap/core";
+import { ReactRenderer } from "@tiptap/react";
+import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
+import tippy from "tippy.js";
+// types
+import { ISlashCommandItem } from "@/types";
+// components
+import { getSlashCommandFilteredSections } from "./command-items-list";
+import { SlashCommandsMenu } from "./command-menu";
+
+export type SlashCommandOptions = {
+  suggestion: Omit<SuggestionOptions, "editor">;
+};
+
+const Command = Extension.create<SlashCommandOptions>({
+  name: "slash-command",
+  addOptions() {
+    return {
+      suggestion: {
+        char: "/",
+        command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => {
+          props.command({ editor, range });
+        },
+        allow({ editor }: { editor: Editor }) {
+          const { selection } = editor.state;
+
+          const parentNode = selection.$from.node(selection.$from.depth);
+          const blockType = parentNode.type.name;
+
+          if (blockType === "codeBlock") {
+            return false;
+          }
+
+          if (editor.isActive("table")) {
+            return false;
+          }
+
+          return true;
+        },
+      },
+    };
+  },
+  addProseMirrorPlugins() {
+    return [
+      Suggestion({
+        editor: this.editor,
+        ...this.options.suggestion,
+      }),
+    ];
+  },
+});
+
+interface CommandListInstance {
+  onKeyDown: (props: { event: KeyboardEvent }) => boolean;
+}
+
+const renderItems = () => {
+  let component: ReactRenderer<CommandListInstance, typeof SlashCommandsMenu> | null = null;
+  let popup: any | null = null;
+  return {
+    onStart: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
+      component = new ReactRenderer(SlashCommandsMenu, {
+        props,
+        editor: props.editor,
+      });
+
+      const tippyContainer =
+        document.querySelector(".active-editor") ?? document.querySelector('[id^="editor-container"]');
+      popup = tippy("body", {
+        getReferenceClientRect: props.clientRect,
+        appendTo: tippyContainer,
+        content: component.element,
+        showOnCreate: true,
+        interactive: true,
+        trigger: "manual",
+        placement: "bottom-start",
+      });
+    },
+    onUpdate: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
+      component?.updateProps(props);
+
+      popup?.[0]?.setProps({
+        getReferenceClientRect: props.clientRect,
+      });
+    },
+    onKeyDown: (props: { event: KeyboardEvent }) => {
+      if (props.event.key === "Escape") {
+        popup?.[0].hide();
+
+        return true;
+      }
+
+      if (component?.ref?.onKeyDown(props)) {
+        return true;
+      }
+      return false;
+    },
+    onExit: () => {
+      popup?.[0].destroy();
+      component?.destroy();
+    },
+  };
+};
+
+export const SlashCommands = (additionalOptions?: ISlashCommandItem[]) =>
+  Command.configure({
+    suggestion: {
+      items: getSlashCommandFilteredSections(additionalOptions),
+      render: renderItems,
+    },
+  });

packages/editor/src/core/helpers/editor-commands.ts

@@ -154,3 +154,29 @@ export const unsetLinkEditor = (editor: Editor) => {
 export const setLinkEditor = (editor: Editor, url: string) => {
   editor.chain().focus().setLink({ href: url }).run();
 };
+
+export const toggleTextColor = (color: string | undefined, editor: Editor, range?: Range) => {
+  if (color) {
+    if (range) editor.chain().focus().deleteRange(range).setTextColor(color).run();
+    else editor.chain().focus().setTextColor(color).run();
+  } else {
+    if (range) editor.chain().focus().deleteRange(range).unsetTextColor().run();
+    else editor.chain().focus().unsetTextColor().run();
+  }
+};
+
+export const toggleBackgroundColor = (color: string | undefined, editor: Editor, range?: Range) => {
+  if (color) {
+    if (range) {
+      editor.chain().focus().deleteRange(range).setBackgroundColor(color).run();
+    } else {
+      editor.chain().focus().setBackgroundColor(color).run();
+    }
+  } else {
+    if (range) {
+      editor.chain().focus().deleteRange(range).unsetBackgroundColor().run();
+    } else {
+      editor.chain().focus().unsetBackgroundColor().run();
+    }
+  }
+};

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

@@ -136,7 +136,8 @@ export const useEditor = (props: CustomEditorProps) => {
           insertContentAtSavedSelection(editorRef, content, savedSelection);
         }
       },
-      executeMenuItemCommand: (itemKey: TEditorCommands) => {
+      executeMenuItemCommand: (props) => {
+        const { itemKey } = props;
         const editorItems = getEditorMenuItems(editorRef.current);
 
         const getEditorMenuItem = (itemKey: TEditorCommands) => editorItems.find((item) => item.key === itemKey);
@@ -145,6 +146,8 @@ export const useEditor = (props: CustomEditorProps) => {
         if (item) {
           if (item.key === "image") {
             item.command(savedSelectionRef.current);
+          } else if (itemKey === "text-color" || itemKey === "background-color") {
+            item.command(props.color);
           } else {
             item.command();
           }
@@ -152,12 +155,19 @@ export const useEditor = (props: CustomEditorProps) => {
           console.warn(`No command found for item: ${itemKey}`);
         }
       },
-      isMenuItemActive: (itemName: TEditorCommands): boolean => {
+      isMenuItemActive: (props) => {
+        const { itemKey } = props;
         const editorItems = getEditorMenuItems(editorRef.current);
 
-        const getEditorMenuItem = (itemName: TEditorCommands) => editorItems.find((item) => item.key === itemName);
-        const item = getEditorMenuItem(itemName);
-        return item ? item.isActive() : false;
+        const getEditorMenuItem = (itemKey: TEditorCommands) => editorItems.find((item) => item.key === itemKey);
+        const item = getEditorMenuItem(itemKey);
+        if (!item) return false;
+
+        if (itemKey === "text-color" || itemKey === "background-color") {
+          return item.isActive(props.color);
+        } else {
+          return item.isActive("");
+        }
       },
       onHeadingChange: (callback: (headings: IMarking[]) => void) => {
         // Subscribe to update event emitted from headers extension

packages/editor/src/core/plugins/drag-handle.ts

@@ -233,14 +233,46 @@ export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOp
     dragHandleElement.addEventListener("click", (e) => handleClick(e, view));
     dragHandleElement.addEventListener("contextmenu", (e) => handleClick(e, view));
 
+    const isScrollable = (node: HTMLElement | SVGElement) => {
+      if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
+        return false;
+      }
+      const style = getComputedStyle(node);
+      return ["overflow", "overflow-y"].some((propertyName) => {
+        const value = style.getPropertyValue(propertyName);
+        return value === "auto" || value === "scroll";
+      });
+    };
+
+    const getScrollParent = (node: HTMLElement | SVGElement) => {
+      let currentParent = node.parentElement;
+      while (currentParent) {
+        if (isScrollable(currentParent)) {
+          return currentParent;
+        }
+        currentParent = currentParent.parentElement;
+      }
+      return document.scrollingElement || document.documentElement;
+    };
+
+    const maxScrollSpeed = 100;
+
     dragHandleElement.addEventListener("drag", (e) => {
       hideDragHandle();
-      const frameRenderer = document.querySelector(".frame-renderer");
-      if (!frameRenderer) return;
-      if (e.clientY < options.scrollThreshold.up) {
-        frameRenderer.scrollBy({ top: -70, behavior: "smooth" });
-      } else if (window.innerHeight - e.clientY < options.scrollThreshold.down) {
-        frameRenderer.scrollBy({ top: 70, behavior: "smooth" });
+      const scrollableParent = getScrollParent(dragHandleElement);
+      if (!scrollableParent) return;
+      const scrollThreshold = options.scrollThreshold;
+
+      if (e.clientY < scrollThreshold.up) {
+        const overflow = scrollThreshold.up - e.clientY;
+        const ratio = Math.min(overflow / scrollThreshold.up, 1);
+        const scrollAmount = -maxScrollSpeed * ratio;
+        scrollableParent.scrollBy({ top: scrollAmount });
+      } else if (window.innerHeight - e.clientY < scrollThreshold.down) {
+        const overflow = e.clientY - (window.innerHeight - scrollThreshold.down);
+        const ratio = Math.min(overflow / scrollThreshold.down, 1);
+        const scrollAmount = maxScrollSpeed * ratio;
+        scrollableParent.scrollBy({ top: scrollAmount });
       }
     });
 

packages/editor/src/core/types/editor.ts

@@ -6,14 +6,15 @@ import {
   IMentionHighlight,
   IMentionSuggestion,
   TAIHandler,
+  TColorEditorCommands,
   TDisplayConfig,
   TEditorCommands,
   TEmbedConfig,
   TExtensions,
   TFileHandler,
+  TNonColorEditorCommands,
   TServerHandler,
 } from "@/types";
-
 // editor refs
 export type EditorReadOnlyRefApi = {
   getMarkDown: () => string;
@@ -36,8 +37,26 @@ export type EditorReadOnlyRefApi = {
 
 export interface EditorRefApi extends EditorReadOnlyRefApi {
   setEditorValueAtCursorPosition: (content: string) => void;
-  executeMenuItemCommand: (itemKey: TEditorCommands) => void;
-  isMenuItemActive: (itemKey: TEditorCommands) => boolean;
+  executeMenuItemCommand: (
+    props:
+      | {
+          itemKey: TNonColorEditorCommands;
+        }
+      | {
+          itemKey: TColorEditorCommands;
+          color: string | undefined;
+        }
+  ) => void;
+  isMenuItemActive: (
+    props:
+      | {
+          itemKey: TNonColorEditorCommands;
+        }
+      | {
+          itemKey: TColorEditorCommands;
+          color: string | undefined;
+        }
+  ) => boolean;
   onStateChange: (callback: () => void) => () => void;
   setFocusAtPosition: (position: number) => void;
   isEditorReadyToDiscard: () => boolean;

packages/editor/src/core/types/slash-commands-suggestion.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { CSSProperties } from "react";
 import { Editor, Range } from "@tiptap/core";
 
 export type TEditorCommands =
@@ -21,7 +21,12 @@ export type TEditorCommands =
   | "table"
   | "image"
   | "divider"
-  | "issue-embed";
+  | "issue-embed"
+  | "text-color"
+  | "background-color";
+
+export type TColorEditorCommands = Extract<TEditorCommands, "text-color" | "background-color">;
+export type TNonColorEditorCommands = Exclude<TEditorCommands, "text-color" | "background-color">;
 
 export type CommandProps = {
   editor: Editor;
@@ -29,10 +34,12 @@ export type CommandProps = {
 };
 
 export type ISlashCommandItem = {
-  key: TEditorCommands;
+  commandKey: TEditorCommands;
+  key: string;
   title: string;
   description: string;
   searchTerms: string[];
-  icon: ReactNode;
+  icon: React.ReactNode;
+  iconContainerStyle?: CSSProperties;
   command: ({ editor, range }: CommandProps) => void;
 };

packages/editor/src/index.ts

@@ -1,5 +1,6 @@
 // styles
 // import "./styles/tailwind.css";
+import "src/styles/variables.css";
 import "src/styles/editor.css";
 import "src/styles/table.css";
 import "src/styles/github-dark.css";
@@ -18,6 +19,9 @@ export {
 
 export { isCellSelection } from "@/extensions/table/table/utilities/is-cell-selection";
 
+// constants
+export * from "@/constants/common";
+
 // helpers
 export * from "@/helpers/common";
 export * from "@/helpers/editor-commands";

packages/editor/src/styles/editor.css

@@ -1,61 +1,3 @@
-.editor-container {
-  &.large-font {
-    --font-size-h1: 1.75rem;
-    --font-size-h2: 1.5rem;
-    --font-size-h3: 1.375rem;
-    --font-size-h4: 1.25rem;
-    --font-size-h5: 1.125rem;
-    --font-size-h6: 1rem;
-    --font-size-regular: 1rem;
-    --font-size-list: var(--font-size-regular);
-    --font-size-code: var(--font-size-regular);
-
-    --line-height-h1: 2.25rem;
-    --line-height-h2: 2rem;
-    --line-height-h3: 1.75rem;
-    --line-height-h4: 1.5rem;
-    --line-height-h5: 1.5rem;
-    --line-height-h6: 1.5rem;
-    --line-height-regular: 1.5rem;
-    --line-height-list: var(--line-height-regular);
-    --line-height-code: var(--line-height-regular);
-  }
-
-  &.small-font {
-    --font-size-h1: 1.4rem;
-    --font-size-h2: 1.2rem;
-    --font-size-h3: 1.1rem;
-    --font-size-h4: 1rem;
-    --font-size-h5: 0.9rem;
-    --font-size-h6: 0.8rem;
-    --font-size-regular: 0.8rem;
-    --font-size-list: var(--font-size-regular);
-    --font-size-code: var(--font-size-regular);
-
-    --line-height-h1: 1.8rem;
-    --line-height-h2: 1.6rem;
-    --line-height-h3: 1.4rem;
-    --line-height-h4: 1.2rem;
-    --line-height-h5: 1.2rem;
-    --line-height-h6: 1.2rem;
-    --line-height-regular: 1.2rem;
-    --line-height-list: var(--line-height-regular);
-    --line-height-code: var(--line-height-regular);
-  }
-
-  &.sans-serif {
-    --font-style: sans-serif;
-  }
-
-  &.serif {
-    --font-style: serif;
-  }
-
-  &.monospace {
-    --font-style: monospace;
-  }
-}
-
 .ProseMirror {
   position: relative;
   word-wrap: break-word;
@@ -439,3 +381,62 @@ ul[data-type="taskList"] ul[data-type="taskList"] {
   margin-top: 0;
 }
 /* end tailwind typography */
+
+/* text colors */
+[data-text-color="gray"] {
+  color: var(--editor-colors-gray-text);
+}
+[data-text-color="peach"] {
+  color: var(--editor-colors-peach-text);
+}
+[data-text-color="pink"] {
+  color: var(--editor-colors-pink-text);
+}
+[data-text-color="orange"] {
+  color: var(--editor-colors-orange-text);
+}
+[data-text-color="green"] {
+  color: var(--editor-colors-green-text);
+}
+[data-text-color="light-blue"] {
+  color: var(--editor-colors-light-blue-text);
+}
+[data-text-color="dark-blue"] {
+  color: var(--editor-colors-dark-blue-text);
+}
+[data-text-color="purple"] {
+  color: var(--editor-colors-purple-text);
+}
+/* [data-text-color="pink-blue-gradient"] {
+  background-clip: text;
+  color: transparent;
+  background-image: linear-gradient(90deg, #a961cd 50%, #e75962 100%);
+} */
+/* end text colors */
+
+/* background colors */
+[data-background-color="gray"] {
+  background-color: var(--editor-colors-gray-background);
+}
+[data-background-color="peach"] {
+  background-color: var(--editor-colors-peach-background);
+}
+[data-background-color="pink"] {
+  background-color: var(--editor-colors-pink-background);
+}
+[data-background-color="orange"] {
+  background-color: var(--editor-colors-orange-background);
+}
+[data-background-color="green"] {
+  background-color: var(--editor-colors-green-background);
+}
+[data-background-color="light-blue"] {
+  background-color: var(--editor-colors-light-blue-background);
+}
+[data-background-color="dark-blue"] {
+  background-color: var(--editor-colors-dark-blue-background);
+}
+[data-background-color="purple"] {
+  background-color: var(--editor-colors-purple-background);
+}
+/* end background colors */

packages/editor/src/styles/variables.css

@@ -0,0 +1,94 @@
+:root {
+  /* text colors */
+  --editor-colors-gray-text: #5c5e63;
+  --editor-colors-peach-text: #ff5b59;
+  --editor-colors-pink-text: #f65385;
+  --editor-colors-orange-text: #fd9038;
+  --editor-colors-green-text: #0fc27b;
+  --editor-colors-light-blue-text: #17bee9;
+  --editor-colors-dark-blue-text: #266df0;
+  --editor-colors-purple-text: #9162f9;
+  /* end text colors */
+}
+
+/* text background colors */
+[data-theme="light"] {
+  --editor-colors-gray-background: #d6d6d8;
+  --editor-colors-peach-background: #ffd5d7;
+  --editor-colors-pink-background: #fdd4e3;
+  --editor-colors-orange-background: #ffe3cd;
+  --editor-colors-green-background: #c3f0de;
+  --editor-colors-light-blue-background: #c5eff9;
+  --editor-colors-dark-blue-background: #c9dafb;
+  --editor-colors-purple-background: #e3d8fd;
+}
+[data-theme="dark"] {
+  --editor-colors-gray-background: #404144;
+  --editor-colors-peach-background: #593032;
+  --editor-colors-pink-background: #562e3d;
+  --editor-colors-orange-background: #583e2a;
+  --editor-colors-green-background: #1d4a3b;
+  --editor-colors-light-blue-background: #1f495c;
+  --editor-colors-dark-blue-background: #223558;
+  --editor-colors-purple-background: #3d325a;
+}
+/* end text background colors */
+
+.editor-container {
+  /* font sizes and line heights */
+  &.large-font {
+    --font-size-h1: 1.75rem;
+    --font-size-h2: 1.5rem;
+    --font-size-h3: 1.375rem;
+    --font-size-h4: 1.25rem;
+    --font-size-h5: 1.125rem;
+    --font-size-h6: 1rem;
+    --font-size-regular: 1rem;
+    --font-size-list: var(--font-size-regular);
+    --font-size-code: var(--font-size-regular);
+
+    --line-height-h1: 2.25rem;
+    --line-height-h2: 2rem;
+    --line-height-h3: 1.75rem;
+    --line-height-h4: 1.5rem;
+    --line-height-h5: 1.5rem;
+    --line-height-h6: 1.5rem;
+    --line-height-regular: 1.5rem;
+    --line-height-list: var(--line-height-regular);
+    --line-height-code: var(--line-height-regular);
+  }
+  &.small-font {
+    --font-size-h1: 1.4rem;
+    --font-size-h2: 1.2rem;
+    --font-size-h3: 1.1rem;
+    --font-size-h4: 1rem;
+    --font-size-h5: 0.9rem;
+    --font-size-h6: 0.8rem;
+    --font-size-regular: 0.8rem;
+    --font-size-list: var(--font-size-regular);
+    --font-size-code: var(--font-size-regular);
+
+    --line-height-h1: 1.8rem;
+    --line-height-h2: 1.6rem;
+    --line-height-h3: 1.4rem;
+    --line-height-h4: 1.2rem;
+    --line-height-h5: 1.2rem;
+    --line-height-h6: 1.2rem;
+    --line-height-regular: 1.2rem;
+    --line-height-list: var(--line-height-regular);
+    --line-height-code: var(--line-height-regular);
+  }
+  /* end font sizes and line heights */
+
+  /* font styles */
+  &.sans-serif {
+    --font-style: "Inter", sans-serif;
+  }
+  &.serif {
+    --font-style: serif;
+  }
+  &.monospace {
+    --font-style: monospace;
+  }
+  /* end font styles */
+}

packages/ui/src/modals/constants.ts

@@ -4,6 +4,9 @@ export enum EModalPosition {
 }
 
 export enum EModalWidth {
+  SM = "sm:max-w-sm",
+  MD = "sm:max-w-md",
+  LG = "sm:max-w-lg",
   XL = "sm:max-w-xl",
   XXL = "sm:max-w-2xl",
   XXXL = "sm:max-w-3xl",

space/core/components/editor/lite-text-editor.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // editor
-import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef } from "@plane/editor";
+import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef, TNonColorEditorCommands } from "@plane/editor";
 // components
 import { IssueCommentToolbar } from "@/components/editor";
 // helpers
@@ -56,7 +56,9 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
       <IssueCommentToolbar
         executeCommand={(key) => {
           if (isMutableRefObject<EditorRefApi>(ref)) {
-            ref.current?.executeMenuItemCommand(key);
+            ref.current?.executeMenuItemCommand({
+              itemKey: key as TNonColorEditorCommands,
+            });
           }
         }}
         isSubmitting={isSubmitting}

space/core/components/editor/toolbar.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState, useCallback } from "react";
 // editor
-import { EditorRefApi, TEditorCommands } from "@plane/editor";
+import { EditorRefApi, TEditorCommands, TNonColorEditorCommands } from "@plane/editor";
 // ui
 import { Button, Tooltip } from "@plane/ui";
 // constants
@@ -34,7 +34,9 @@ export const IssueCommentToolbar: React.FC<Props> = (props) => {
         .flat()
         .forEach((item) => {
           // Assert that editorRef.current is not null
-          newActiveStates[item.key] = (editorRef.current as EditorRefApi).isMenuItemActive(item.key);
+          newActiveStates[item.key] = (editorRef.current as EditorRefApi).isMenuItemActive({
+            itemKey: item.key as TNonColorEditorCommands,
+          });
         });
       setActiveStates(newActiveStates);
     }

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx

@@ -29,7 +29,7 @@ export const CycleIssuesMobileHeader = () => {
   const { getCycleById } = useCycle();
   const layouts = [
     { key: "list", title: "List", icon: List },
-    { key: "kanban", title: "Kanban", icon: Kanban },
+    { key: "kanban", title: "Board", icon: Kanban },
     { key: "calendar", title: "Calendar", icon: Calendar },
   ];
 

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx

@@ -28,7 +28,7 @@ import { useIssues, useLabel, useMember, useProject, useProjectState } from "@/h
 export const ProjectIssuesMobileHeader = observer(() => {
   const layouts = [
     { key: "list", title: "List", icon: List },
-    { key: "kanban", title: "Kanban", icon: Kanban },
+    { key: "kanban", title: "Board", icon: Kanban },
     { key: "calendar", title: "Calendar", icon: Calendar },
   ];
   const [analyticsModal, setAnalyticsModal] = useState(false);

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx

@@ -31,7 +31,7 @@ export const ModuleIssuesMobileHeader = observer(() => {
   const { getModuleById } = useModule();
   const layouts = [
     { key: "list", title: "List", icon: List },
-    { key: "kanban", title: "Kanban", icon: Kanban },
+    { key: "kanban", title: "Board", icon: Kanban },
     { key: "calendar", title: "Calendar", icon: Calendar },
   ];
   const { workspaceSlug, projectId, moduleId } = useParams() as {

web/app/profile/appearance/page.tsx

@@ -52,13 +52,8 @@ const ProfileAppearancePage = observer(() => {
   const applyThemeChange = (theme: Partial<IUserTheme>) => {
     setTheme(theme?.theme || "system");
 
-    const customThemeElement = window.document?.querySelector<HTMLElement>("[data-theme='custom']");
-    if (theme?.theme === "custom" && theme?.palette && customThemeElement) {
-      applyTheme(
-        theme?.palette !== ",,,," ? theme?.palette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
-        false,
-        customThemeElement
-      );
+    if (theme?.theme === "custom" && theme?.palette) {
+      applyTheme(theme?.palette !== ",,,," ? theme?.palette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5", false);
     } else unsetCustomCssVariables();
   };
 

web/ce/components/cycles/analytics-sidebar/base.tsx

@@ -0,0 +1,69 @@
+"use client";
+import { FC, Fragment } from "react";
+import { observer } from "mobx-react";
+// plane ui
+import { Loader } from "@plane/ui";
+// components
+import ProgressChart from "@/components/core/sidebar/progress-chart";
+import { validateCycleSnapshot } from "@/components/cycles";
+// helpers
+import { getDate } from "@/helpers/date-time.helper";
+// hooks
+import { useCycle } from "@/hooks/store";
+
+type ProgressChartProps = {
+  workspaceSlug: string;
+  projectId: string;
+  cycleId: string;
+};
+export const SidebarChart: FC<ProgressChartProps> = observer((props) => {
+  const { workspaceSlug, projectId, cycleId } = props;
+
+  // hooks
+  const { getEstimateTypeByCycleId, getCycleById } = useCycle();
+
+  // derived data
+  const cycleDetails = validateCycleSnapshot(getCycleById(cycleId));
+  const cycleStartDate = getDate(cycleDetails?.start_date);
+  const cycleEndDate = getDate(cycleDetails?.end_date);
+  const totalEstimatePoints = cycleDetails?.total_estimate_points || 0;
+  const totalIssues = cycleDetails?.total_issues || 0;
+  const estimateType = getEstimateTypeByCycleId(cycleId);
+
+  const chartDistributionData =
+    estimateType === "points" ? cycleDetails?.estimate_distribution : cycleDetails?.distribution || undefined;
+
+  const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
+
+  if (!workspaceSlug || !projectId || !cycleId) return null;
+
+  return (
+    <div>
+      <div className="relative flex items-center gap-2">
+        <div className="flex items-center justify-center gap-1 text-xs">
+          <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
+          <span>Ideal</span>
+        </div>
+        <div className="flex items-center justify-center gap-1 text-xs">
+          <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
+          <span>Current</span>
+        </div>
+      </div>
+      {cycleStartDate && cycleEndDate && completionChartDistributionData ? (
+        <Fragment>
+          <ProgressChart
+            distribution={completionChartDistributionData}
+            startDate={cycleStartDate}
+            endDate={cycleEndDate}
+            totalIssues={estimateType === "points" ? totalEstimatePoints : totalIssues}
+            plotTitle={estimateType === "points" ? "points" : "issues"}
+          />
+        </Fragment>
+      ) : (
+        <Loader className="w-full h-[160px] mt-4">
+          <Loader.Item width="100%" height="100%" />
+        </Loader>
+      )}
+    </div>
+  );
+});

web/ce/components/cycles/analytics-sidebar/index.ts

@@ -1 +1 @@
-export * from "./sidebar-chart";
+export * from "./root";

web/ce/components/cycles/analytics-sidebar/root.tsx

@@ -0,0 +1,12 @@
+"use client";
+import React, { FC } from "react";
+// components
+import { SidebarChart } from "./base";
+
+type Props = {
+  workspaceSlug: string;
+  projectId: string;
+  cycleId: string;
+};
+
+export const SidebarChartRoot: FC<Props> = (props) => <SidebarChart {...props} />;

web/ce/components/cycles/analytics-sidebar/sidebar-chart.tsx

@@ -1,57 +0,0 @@
-import { Fragment } from "react";
-import { TCycleDistribution, TCycleEstimateDistribution } from "@plane/types";
-import { Loader } from "@plane/ui";
-import ProgressChart from "@/components/core/sidebar/progress-chart";
-
-type ProgressChartProps = {
-  chartDistributionData: TCycleEstimateDistribution | TCycleDistribution | undefined;
-  cycleStartDate: Date | undefined;
-  cycleEndDate: Date | undefined;
-  totalEstimatePoints: number;
-  totalIssues: number;
-  plotType: string;
-};
-export const SidebarBaseChart = (props: ProgressChartProps) => {
-  const { chartDistributionData, cycleStartDate, cycleEndDate, totalEstimatePoints, totalIssues, plotType } = props;
-  const completionChartDistributionData = chartDistributionData?.completion_chart || undefined;
-
-  return (
-    <div>
-      <div className="relative flex items-center gap-2">
-        <div className="flex items-center justify-center gap-1 text-xs">
-          <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
-          <span>Ideal</span>
-        </div>
-        <div className="flex items-center justify-center gap-1 text-xs">
-          <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
-          <span>Current</span>
-        </div>
-      </div>
-      {cycleStartDate && cycleEndDate && completionChartDistributionData ? (
-        <Fragment>
-          {plotType === "points" ? (
-            <ProgressChart
-              distribution={completionChartDistributionData}
-              startDate={cycleStartDate}
-              endDate={cycleEndDate}
-              totalIssues={totalEstimatePoints}
-              plotTitle={"points"}
-            />
-          ) : (
-            <ProgressChart
-              distribution={completionChartDistributionData}
-              startDate={cycleStartDate}
-              endDate={cycleEndDate}
-              totalIssues={totalIssues}
-              plotTitle={"issues"}
-            />
-          )}
-        </Fragment>
-      ) : (
-        <Loader className="w-full h-[160px] mt-4">
-          <Loader.Item width="100%" height="100%" />
-        </Loader>
-      )}
-    </div>
-  );
-};

web/ce/components/issues/issue-details/issue-identifier.tsx

@@ -1,6 +1,8 @@
 import { observer } from "mobx-react";
 // types
 import { IIssueDisplayProperties } from "@plane/types";
+// ui
+import { setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -11,6 +13,7 @@ type TIssueIdentifierBaseProps = {
   size?: "xs" | "sm" | "md" | "lg";
   textContainerClassName?: string;
   displayProperties?: IIssueDisplayProperties | undefined;
+  enableClickToCopyIdentifier?: boolean;
 };
 
 type TIssueIdentifierFromStore = TIssueIdentifierBaseProps & {
@@ -23,9 +26,48 @@ type TIssueIdentifierWithDetails = TIssueIdentifierBaseProps & {
   issueSequenceId: string | number;
 };
 
-type TIssueIdentifierProps = TIssueIdentifierFromStore | TIssueIdentifierWithDetails;
+export type TIssueIdentifierProps = TIssueIdentifierFromStore | TIssueIdentifierWithDetails;
+
+type TIdentifierTextProps = {
+  identifier: string;
+  enableClickToCopyIdentifier?: boolean;
+  textContainerClassName?: string;
+};
+
+export const IdentifierText: React.FC<TIdentifierTextProps> = (props) => {
+  const { identifier, enableClickToCopyIdentifier = false, textContainerClassName } = props;
+  // handlers
+  const handleCopyIssueIdentifier = () => {
+    if (enableClickToCopyIdentifier) {
+      navigator.clipboard.writeText(identifier).then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Issue ID copied to clipboard",
+        });
+      });
+    }
+  };
+
+  return (
+    <Tooltip tooltipContent="Click to copy" disabled={!enableClickToCopyIdentifier} position="top">
+      <span
+        className={cn(
+          "text-base font-medium text-custom-text-300",
+          {
+            "cursor-pointer": enableClickToCopyIdentifier,
+          },
+          textContainerClassName
+        )}
+        onClick={handleCopyIssueIdentifier}
+      >
+        {identifier}
+      </span>
+    </Tooltip>
+  );
+};
+
 export const IssueIdentifier: React.FC<TIssueIdentifierProps> = observer((props) => {
-  const { projectId, textContainerClassName, displayProperties } = props;
+  const { projectId, textContainerClassName, displayProperties, enableClickToCopyIdentifier = false } = props;
   // store hooks
   const { getProjectIdentifierById } = useProject();
   const {
@@ -43,9 +85,11 @@ export const IssueIdentifier: React.FC<TIssueIdentifierProps> = observer((props)
 
   return (
     <div className="flex items-center space-x-2">
-      <span className={cn("text-base font-medium text-custom-text-300", textContainerClassName)}>
-        {projectIdentifier}-{issueSequenceId}
-      </span>
+      <IdentifierText
+        identifier={`${projectIdentifier}-${issueSequenceId}`}
+        enableClickToCopyIdentifier={enableClickToCopyIdentifier}
+        textContainerClassName={textContainerClassName}
+      />
     </div>
   );
 });

web/ce/components/issues/issue-details/issue-type-switcher.tsx

@@ -20,5 +20,5 @@ export const IssueTypeSwitcher: React.FC<TIssueTypeSwitcherProps> = observer((pr
 
   if (!issue || !issue.project_id) return <></>;
 
-  return <IssueIdentifier issueId={issueId} projectId={issue.project_id} size="md" />;
+  return <IssueIdentifier issueId={issueId} projectId={issue.project_id} size="md" enableClickToCopyIdentifier />;
 });

web/core/components/cycles/analytics-sidebar/issue-progress.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, Fragment, useCallback, useMemo, useState } from "react";
+import { FC, Fragment, useCallback, useMemo } from "react";
 import isEmpty from "lodash/isEmpty";
 import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";
@@ -16,10 +16,9 @@ import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 // helpers
 import { getDate } from "@/helpers/date-time.helper";
 // hooks
-import { useIssues, useCycle, useProjectEstimates } from "@/hooks/store";
-// plane web constants
-import { SidebarBaseChart } from "@/plane-web/components/cycles/analytics-sidebar";
-import { EEstimateSystem } from "@/plane-web/constants/estimates";
+import { useIssues, useCycle } from "@/hooks/store";
+// plane web components
+import { SidebarChartRoot } from "@/plane-web/components/cycles";
 
 type TCycleAnalyticsProgress = {
   workspaceSlug: string;
@@ -27,7 +26,7 @@ type TCycleAnalyticsProgress = {
   cycleId: string;
 };
 
-const validateCycleSnapshot = (cycleDetails: ICycle | null): ICycle | null => {
+export const validateCycleSnapshot = (cycleDetails: ICycle | null): ICycle | null => {
   if (!cycleDetails || cycleDetails === null) return cycleDetails;
 
   const updatedCycleDetails: any = { ...cycleDetails };
@@ -60,12 +59,9 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
   // router
   const searchParams = useSearchParams();
   const peekCycle = searchParams.get("peekCycle") || undefined;
-  // hooks
-  const { areEstimateEnabledByProjectId, currentActiveEstimateId, estimateById } = useProjectEstimates();
   const {
     getPlotTypeByCycleId,
     getEstimateTypeByCycleId,
-    setPlotType,
     getCycleById,
     fetchCycleDetails,
     fetchArchivedCycleDetails,
@@ -74,17 +70,11 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.CYCLE);
-  // state
-  const [loader, setLoader] = useState(false);
 
   // derived values
   const cycleDetails = validateCycleSnapshot(getCycleById(cycleId));
   const plotType: TCyclePlotType = getPlotTypeByCycleId(cycleId);
   const estimateType = getEstimateTypeByCycleId(cycleId);
-  const isCurrentProjectEstimateEnabled = projectId && areEstimateEnabledByProjectId(projectId) ? true : false;
-  const estimateDetails =
-    isCurrentProjectEstimateEnabled && currentActiveEstimateId && estimateById(currentActiveEstimateId);
-  const isCurrentEstimateTypeIsPoints = estimateDetails && estimateDetails?.type === EEstimateSystem.POINTS;
 
   const completedIssues = cycleDetails?.completed_issues || 0;
   const totalIssues = cycleDetails?.total_issues || 0;
@@ -132,15 +122,13 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
     setEstimateType(cycleId, value);
     if (!workspaceSlug || !projectId || !cycleId) return;
     try {
-      setLoader(true);
       if (isArchived) {
         await fetchArchivedCycleDetails(workspaceSlug, projectId, cycleId);
       } else {
         await fetchCycleDetails(workspaceSlug, projectId, cycleId);
       }
-      setLoader(false);
-    } catch (error) {
-      setLoader(false);
+    } catch (err) {
+      console.error(err);
       setEstimateType(cycleId, estimateType);
     }
   };
@@ -218,16 +206,15 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
                       </CustomSelect.Option>
                     ))}
                   </CustomSelect>
+                  <div className="flex items-center justify-center gap-2">
+                    <div className="flex items-center gap-1 text-xs">
+                      <span className="text-custom-text-300">Done</span>
+                      <span className="font-semibold text-custom-text-400">{progressHeaderPercentage}%</span>
+                    </div>
+                  </div>
                 </div>
                 <div className="py-4">
-                  <SidebarBaseChart
-                    chartDistributionData={chartDistributionData}
-                    cycleStartDate={cycleStartDate}
-                    cycleEndDate={cycleEndDate}
-                    totalEstimatePoints={totalEstimatePoints}
-                    totalIssues={totalIssues}
-                    plotType={plotType}
-                  />
+                  <SidebarChartRoot workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleId} />
                 </div>
                 {/* progress detailed view */}
                 {chartDistributionData && (

web/core/components/cycles/analytics-sidebar/sidebar-details.tsx

@@ -3,10 +3,10 @@ import React, { FC } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { LayersIcon, SquareUser, Users } from "lucide-react";
-// ui
-import { ICycle } from "@plane/types";
-import { Avatar, AvatarGroup, TextArea } from "@plane/ui";
 // types
+import { ICycle } from "@plane/types";
+// ui
+import { Avatar, AvatarGroup, TextArea } from "@plane/ui";
 // hooks
 import { useMember, useProjectEstimates } from "@/hooks/store";
 // plane web

web/core/components/editor/index.ts

@@ -1,2 +1,3 @@
 export * from "./lite-text-editor";
+export * from "./pdf";
 export * from "./rich-text-editor";

web/core/components/editor/lite-text-editor/lite-text-editor.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // editor
-import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef } from "@plane/editor";
+import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef, TNonColorEditorCommands } from "@plane/editor";
 // types
 import { IUserLite } from "@plane/types";
 // components
@@ -87,7 +87,9 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
         accessSpecifier={accessSpecifier}
         executeCommand={(key) => {
           if (isMutableRefObject<EditorRefApi>(ref)) {
-            ref.current?.executeMenuItemCommand(key);
+            ref.current?.executeMenuItemCommand({
+              itemKey: key as TNonColorEditorCommands,
+            });
           }
         }}
         handleAccessChange={handleAccessChange}

web/core/components/editor/lite-text-editor/toolbar.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { Globe2, Lock, LucideIcon } from "lucide-react";
 // editor
-import { EditorRefApi, TEditorCommands } from "@plane/editor";
+import { EditorRefApi, TEditorCommands, TNonColorEditorCommands } from "@plane/editor";
 // ui
 import { Button, Tooltip } from "@plane/ui";
 // constants
@@ -69,7 +69,9 @@ export const IssueCommentToolbar: React.FC<Props> = (props) => {
         .flat()
         .forEach((item) => {
           // Assert that editorRef.current is not null
-          newActiveStates[item.key] = (editorRef.current as EditorRefApi).isMenuItemActive(item.key);
+          newActiveStates[item.key] = (editorRef.current as EditorRefApi).isMenuItemActive({
+            itemKey: item.key as TNonColorEditorCommands,
+          });
         });
       setActiveStates(newActiveStates);
     }

web/core/components/editor/pdf/document.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Document, Font, Page, PageProps } from "@react-pdf/renderer";
+import { Html } from "react-pdf-html";
+// constants
+import { EDITOR_PDF_DOCUMENT_STYLESHEET } from "@/constants/editor";
+
+Font.register({
+  family: "Inter",
+  fonts: [
+    { src: "/fonts/inter/thin.ttf", fontWeight: "thin" },
+    { src: "/fonts/inter/thin.ttf", fontWeight: "thin", fontStyle: "italic" },
+    { src: "/fonts/inter/ultralight.ttf", fontWeight: "ultralight" },
+    { src: "/fonts/inter/ultralight.ttf", fontWeight: "ultralight", fontStyle: "italic" },
+    { src: "/fonts/inter/light.ttf", fontWeight: "light" },
+    { src: "/fonts/inter/light.ttf", fontWeight: "light", fontStyle: "italic" },
+    { src: "/fonts/inter/regular.ttf", fontWeight: "normal" },
+    { src: "/fonts/inter/regular.ttf", fontWeight: "normal", fontStyle: "italic" },
+    { src: "/fonts/inter/medium.ttf", fontWeight: "medium" },
+    { src: "/fonts/inter/medium.ttf", fontWeight: "medium", fontStyle: "italic" },
+    { src: "/fonts/inter/semibold.ttf", fontWeight: "semibold" },
+    { src: "/fonts/inter/semibold.ttf", fontWeight: "semibold", fontStyle: "italic" },
+    { src: "/fonts/inter/bold.ttf", fontWeight: "bold" },
+    { src: "/fonts/inter/bold.ttf", fontWeight: "bold", fontStyle: "italic" },
+    { src: "/fonts/inter/extrabold.ttf", fontWeight: "ultrabold" },
+    { src: "/fonts/inter/extrabold.ttf", fontWeight: "ultrabold", fontStyle: "italic" },
+    { src: "/fonts/inter/heavy.ttf", fontWeight: "heavy" },
+    { src: "/fonts/inter/heavy.ttf", fontWeight: "heavy", fontStyle: "italic" },
+  ],
+});
+
+type Props = {
+  content: string;
+  pageFormat: PageProps["size"];
+};
+
+export const PDFDocument: React.FC<Props> = (props) => {
+  const { content, pageFormat } = props;
+
+  return (
+    <Document>
+      <Page
+        size={pageFormat}
+        style={{
+          backgroundColor: "#ffffff",
+          padding: 64,
+        }}
+      >
+        <Html stylesheet={EDITOR_PDF_DOCUMENT_STYLESHEET}>{content}</Html>
+      </Page>
+    </Document>
+  );
+};

web/core/components/editor/pdf/index.ts

@@ -0,0 +1 @@
+export * from "./document";

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

@@ -18,7 +18,7 @@ import { SPREADSHEET_SELECT_GROUP } from "@/constants/spreadsheet";
 // helper
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useIssueDetail, useProject } from "@/hooks/store";
+import { useIssueDetail, useIssues, useProject } from "@/hooks/store";
 import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import { TSelectionHelper } from "@/hooks/use-multiple-select";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -26,6 +26,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 import { IssueIdentifier } from "@/plane-web/components/issues";
 // local components
 import { TRenderQuickActions } from "../list/list-view-types";
+import { isIssueNew } from "../utils";
 import { IssueColumn } from "./issue-column";
 
 interface Props {
@@ -42,6 +43,7 @@ interface Props {
   spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
   spacingLeft?: number;
   selectionHelpers: TSelectionHelper;
+  shouldRenderByDefault?: boolean;
 }
 
 export const SpreadsheetIssueRow = observer((props: Props) => {
@@ -59,11 +61,14 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
     spreadsheetColumnsList,
     spacingLeft = 6,
     selectionHelpers,
+    shouldRenderByDefault,
   } = props;
   // states
   const [isExpanded, setExpanded] = useState<boolean>(false);
   // store hooks
   const { subIssues: subIssuesStore } = useIssueDetail();
+  const { issueMap } = useIssues();
+
   // derived values
   const subIssues = subIssuesStore.subIssuesByIssueId(issueId);
   const isIssueSelected = selectionHelpers.getIsEntitySelected(issueId);
@@ -88,6 +93,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
         })}
         verticalOffset={100}
         shouldRecordHeights={false}
+        defaultValue={shouldRenderByDefault || isIssueNew(issueMap[issueId])}
       >
         <IssueRowDetails
           issueId={issueId}
@@ -124,6 +130,7 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
             containerRef={containerRef}
             spreadsheetColumnsList={spreadsheetColumnsList}
             selectionHelpers={selectionHelpers}
+            shouldRenderByDefault={isExpanded}
           />
         ))}
     </>

web/core/components/issues/peek-overview/issue-detail.tsx

@@ -1,7 +1,7 @@
 import { FC, useEffect } from "react";
 import { observer } from "mobx-react";
 // components
-import { TIssueOperations } from "@/components/issues";
+import { IssueParentDetail, TIssueOperations } from "@/components/issues";
 // store hooks
 import { useIssueDetail, useUser } from "@/hooks/store";
 // hooks
@@ -57,6 +57,15 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
 
   return (
     <div className="space-y-2">
+      {issue.parent_id && (
+        <IssueParentDetail
+          workspaceSlug={workspaceSlug}
+          projectId={issue.project_id}
+          issueId={issueId}
+          issue={issue}
+          issueOperations={issueOperations}
+        />
+      )}
       <IssueTypeSwitcher issueId={issueId} disabled={isArchived || disabled} />
       <IssueTitleInput
         workspaceSlug={workspaceSlug}

web/core/components/pages/editor/header/color-dropdown.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { memo } from "react";
+import { ALargeSmall, Ban } from "lucide-react";
+import { Popover } from "@headlessui/react";
+// plane editor
+import { COLORS_LIST, TColorEditorCommands } from "@plane/editor";
+// helpers
+import { cn } from "@/helpers/common.helper";
+
+type Props = {
+  handleColorSelect: (key: TColorEditorCommands, color: string | undefined) => void;
+  isColorActive: (key: TColorEditorCommands, color: string | undefined) => boolean;
+};
+
+export const ColorDropdown: React.FC<Props> = memo((props) => {
+  const { handleColorSelect, isColorActive } = props;
+
+  const activeTextColor = COLORS_LIST.find((c) => isColorActive("text-color", c.key));
+  const activeBackgroundColor = COLORS_LIST.find((c) => isColorActive("background-color", c.key));
+
+  return (
+    <Popover as="div" className="h-7 px-2">
+      <Popover.Button
+        as="button"
+        type="button"
+        className={({ open }) =>
+          cn("h-full", {
+            "outline-none": open,
+          })
+        }
+      >
+        {({ open }) => (
+          <span
+            className={cn(
+              "h-full px-2 text-custom-text-300 text-sm flex items-center gap-1.5 rounded hover:bg-custom-background-80",
+              {
+                "text-custom-text-100 bg-custom-background-80": open,
+              }
+            )}
+          >
+            Color
+            <span
+              className={cn(
+                "flex-shrink-0 size-6 grid place-items-center rounded border-[0.5px] border-custom-border-300",
+                {
+                  "bg-custom-background-100": !activeBackgroundColor,
+                }
+              )}
+              style={{
+                backgroundColor: activeBackgroundColor ? activeBackgroundColor.backgroundColor : "transparent",
+              }}
+            >
+              <ALargeSmall
+                className={cn("size-3.5", {
+                  "text-custom-text-100": !activeTextColor,
+                })}
+                style={{
+                  color: activeTextColor ? activeTextColor.textColor : "inherit",
+                }}
+              />
+            </span>
+          </span>
+        )}
+      </Popover.Button>
+      <Popover.Panel
+        as="div"
+        className="fixed z-20 mt-1 rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-rg p-2 space-y-2"
+      >
+        <div className="space-y-1.5">
+          <p className="text-xs text-custom-text-300 font-semibold">Text colors</p>
+          <div className="flex items-center gap-2">
+            {COLORS_LIST.map((color) => (
+              <button
+                key={color.key}
+                type="button"
+                className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
+                style={{
+                  backgroundColor: color.textColor,
+                }}
+                onClick={() => handleColorSelect("text-color", color.key)}
+              />
+            ))}
+            <button
+              type="button"
+              className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
+              onClick={() => handleColorSelect("text-color", undefined)}
+            >
+              <Ban className="size-4" />
+            </button>
+          </div>
+        </div>
+        <div className="space-y-1.5">
+          <p className="text-xs text-custom-text-300 font-semibold">Background colors</p>
+          <div className="flex items-center gap-2">
+            {COLORS_LIST.map((color) => (
+              <button
+                key={color.key}
+                type="button"
+                className="flex-shrink-0 size-6 rounded border-[0.5px] border-custom-border-400 hover:opacity-60 transition-opacity"
+                style={{
+                  backgroundColor: color.backgroundColor,
+                }}
+                onClick={() => handleColorSelect("background-color", color.key)}
+              />
+            ))}
+            <button
+              type="button"
+              className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
+              onClick={() => handleColorSelect("background-color", undefined)}
+            >
+              <Ban className="size-4" />
+            </button>
+          </div>
+        </div>
+      </Popover.Panel>
+    </Popover>
+  );
+});
+
+ColorDropdown.displayName = "ColorDropdown";

web/core/components/pages/editor/header/index.ts

@@ -1,3 +1,4 @@
+export * from "./color-dropdown";
 export * from "./extra-options";
 export * from "./info-popover";
 export * from "./options-dropdown";

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

@@ -1,12 +1,15 @@
 "use client";
 
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
-import { ArchiveRestoreIcon, Clipboard, Copy, History, Link, Lock, LockOpen } from "lucide-react";
+import { ArchiveRestoreIcon, ArrowUpToLine, Clipboard, Copy, History, Link, Lock, LockOpen } from "lucide-react";
 // document editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
 // ui
 import { ArchiveIcon, CustomMenu, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
+// components
+import { ExportPageModal } from "@/components/pages";
 // helpers
 import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
@@ -27,6 +30,7 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   const router = useRouter();
   // store values
   const {
+    name,
     archived_at,
     is_locked,
     id,
@@ -38,6 +42,8 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
     canCurrentUserLockPage,
     restore,
   } = page;
+  // states
+  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
   // store hooks
   const { workspaceSlug, projectId } = useParams();
   // page filters
@@ -157,26 +163,41 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
       icon: History,
       shouldRender: true,
     },
+    {
+      key: "export",
+      action: () => setIsExportModalOpen(true),
+      label: "Export",
+      icon: ArrowUpToLine,
+      shouldRender: true,
+    },
   ];
 
   return (
-    <CustomMenu maxHeight="lg" placement="bottom-start" verticalEllipsis closeOnSelect>
-      <CustomMenu.MenuItem
-        className="hidden md:flex w-full items-center justify-between gap-2"
-        onClick={() => handleFullWidth(!isFullWidth)}
-      >
-        Full width
-        <ToggleSwitch value={isFullWidth} onChange={() => {}} />
-      </CustomMenu.MenuItem>
-      {MENU_ITEMS.map((item) => {
-        if (!item.shouldRender) return null;
-        return (
-          <CustomMenu.MenuItem key={item.key} onClick={item.action} className="flex items-center gap-2">
-            <item.icon className="h-3 w-3" />
-            {item.label}
-          </CustomMenu.MenuItem>
-        );
-      })}
-    </CustomMenu>
+    <>
+      <ExportPageModal
+        editorRef={editorRef}
+        isOpen={isExportModalOpen}
+        onClose={() => setIsExportModalOpen(false)}
+        pageTitle={name ?? ""}
+      />
+      <CustomMenu maxHeight="lg" placement="bottom-start" verticalEllipsis closeOnSelect>
+        <CustomMenu.MenuItem
+          className="hidden md:flex w-full items-center justify-between gap-2"
+          onClick={() => handleFullWidth(!isFullWidth)}
+        >
+          Full width
+          <ToggleSwitch value={isFullWidth} onChange={() => {}} />
+        </CustomMenu.MenuItem>
+        {MENU_ITEMS.map((item) => {
+          if (!item.shouldRender) return null;
+          return (
+            <CustomMenu.MenuItem key={item.key} onClick={item.action} className="flex items-center gap-2">
+              <item.icon className="h-3 w-3" />
+              {item.label}
+            </CustomMenu.MenuItem>
+          );
+        })}
+      </CustomMenu>
+    </>
   );
 });

web/core/components/pages/editor/header/toolbar.tsx

@@ -3,9 +3,11 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { Check, ChevronDown } from "lucide-react";
 // editor
-import { EditorRefApi, TEditorCommands } from "@plane/editor";
+import { EditorRefApi, TNonColorEditorCommands } from "@plane/editor";
 // ui
 import { CustomMenu, Tooltip } from "@plane/ui";
+// components
+import { ColorDropdown } from "@/components/pages";
 // constants
 import { TOOLBAR_ITEMS, TYPOGRAPHY_ITEMS, ToolbarMenuItem } from "@/constants/editor";
 // helpers
@@ -18,7 +20,7 @@ type Props = {
 type ToolbarButtonProps = {
   item: ToolbarMenuItem;
   isActive: boolean;
-  executeCommand: (commandKey: TEditorCommands) => void;
+  executeCommand: EditorRefApi["executeMenuItemCommand"];
 };
 
 const ToolbarButton: React.FC<ToolbarButtonProps> = React.memo((props) => {
@@ -36,7 +38,11 @@ const ToolbarButton: React.FC<ToolbarButtonProps> = React.memo((props) => {
       <button
         key={item.key}
         type="button"
-        onClick={() => executeCommand(item.key)}
+        onClick={() =>
+          executeCommand({
+            itemKey: item.key as TNonColorEditorCommands,
+          })
+        }
         className={cn("grid size-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80", {
           "bg-custom-background-80 text-custom-text-100": isActive,
         })}
@@ -56,6 +62,7 @@ ToolbarButton.displayName = "ToolbarButton";
 const toolbarItems = TOOLBAR_ITEMS.document;
 
 export const PageToolbar: React.FC<Props> = ({ editorRef }) => {
+  // states
   const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
 
   const updateActiveStates = useCallback(() => {
@@ -63,7 +70,9 @@ export const PageToolbar: React.FC<Props> = ({ editorRef }) => {
     Object.values(toolbarItems)
       .flat()
       .forEach((item) => {
-        newActiveStates[item.key] = editorRef.isMenuItemActive(item.key);
+        newActiveStates[item.key] = editorRef.isMenuItemActive({
+          itemKey: item.key as TNonColorEditorCommands,
+        });
       });
     setActiveStates(newActiveStates);
   }, [editorRef]);
@@ -74,7 +83,11 @@ export const PageToolbar: React.FC<Props> = ({ editorRef }) => {
     return () => unsubscribe();
   }, [editorRef, updateActiveStates]);
 
-  const activeTypography = TYPOGRAPHY_ITEMS.find((item) => editorRef.isMenuItemActive(item.key));
+  const activeTypography = TYPOGRAPHY_ITEMS.find((item) =>
+    editorRef.isMenuItemActive({
+      itemKey: item.key as TNonColorEditorCommands,
+    })
+  );
 
   return (
     <div className="flex flex-wrap items-center divide-x divide-custom-border-200">
@@ -94,7 +107,11 @@ export const PageToolbar: React.FC<Props> = ({ editorRef }) => {
           <CustomMenu.MenuItem
             key={item.key}
             className="flex items-center justify-between gap-2"
-            onClick={() => editorRef.executeMenuItemCommand(item.key)}
+            onClick={() =>
+              editorRef.executeMenuItemCommand({
+                itemKey: item.key as TNonColorEditorCommands,
+              })
+            }
           >
             <span className="flex items-center gap-2">
               <item.icon className="size-3" />
@@ -104,6 +121,20 @@ export const PageToolbar: React.FC<Props> = ({ editorRef }) => {
           </CustomMenu.MenuItem>
         ))}
       </CustomMenu>
+      <ColorDropdown
+        handleColorSelect={(key, color) =>
+          editorRef.executeMenuItemCommand({
+            itemKey: key,
+            color,
+          })
+        }
+        isColorActive={(key, color) =>
+          editorRef.isMenuItemActive({
+            itemKey: key,
+            color,
+          })
+        }
+      />
       {Object.keys(toolbarItems).map((key) => (
         <div key={key} className="flex items-center gap-0.5 px-2 first:pl-0 last:pr-0">
           {toolbarItems[key].map((item) => (

web/core/components/pages/editor/title.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CSSProperties, useState } from "react";
+import { useState } from "react";
 import { observer } from "mobx-react";
 // editor
 import { EditorRefApi } from "@plane/editor";
@@ -23,27 +23,21 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
   // states
   const [isLengthVisible, setIsLengthVisible] = useState(false);
   // page filters
-  const { fontSize, fontStyle } = usePageFilters();
+  const { fontSize } = usePageFilters();
   // ui
   const titleClassName = cn("bg-transparent tracking-[-2%] font-semibold", {
     "text-[1.6rem] leading-[1.8rem]": fontSize === "small-font",
     "text-[2rem] leading-[2.25rem]": fontSize === "large-font",
   });
-  const titleStyle: CSSProperties = {
-    fontFamily: fontStyle,
-  };
 
   return (
     <>
       {readOnly ? (
-        <h6 className={cn(titleClassName, "break-words")} style={titleStyle}>
-          {title}
-        </h6>
+        <h6 className={cn(titleClassName, "break-words")}>{title}</h6>
       ) : (
         <>
           <TextArea
             className={cn(titleClassName, "w-full outline-none p-0 border-none resize-none rounded-none")}
-            style={titleStyle}
             placeholder="Untitled"
             onKeyDown={(e) => {
               if (e.key === "Enter") {

web/core/components/pages/modals/export-page-modal.tsx

@@ -0,0 +1,282 @@
+"use client";
+
+import { useState } from "react";
+import { PageProps, pdf } from "@react-pdf/renderer";
+import { Controller, useForm } from "react-hook-form";
+// plane editor
+import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+// plane ui
+import { Button, CustomSelect, EModalPosition, EModalWidth, ModalCore, setToast, TOAST_TYPE } from "@plane/ui";
+// components
+import { PDFDocument } from "@/components/editor";
+// helpers
+import {
+  replaceCustomComponentsFromHTMLContent,
+  replaceCustomComponentsFromMarkdownContent,
+} from "@/helpers/editor.helper";
+
+type Props = {
+  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  isOpen: boolean;
+  onClose: () => void;
+  pageTitle: string;
+};
+
+type TExportFormats = "pdf" | "markdown";
+type TPageFormats = Exclude<PageProps["size"], undefined>;
+type TContentVariety = "everything" | "no-assets";
+
+type TFormValues = {
+  export_format: TExportFormats;
+  page_format: TPageFormats;
+  content_variety: TContentVariety;
+};
+
+const EXPORT_FORMATS: {
+  key: TExportFormats;
+  label: string;
+}[] = [
+  {
+    key: "pdf",
+    label: "PDF",
+  },
+  {
+    key: "markdown",
+    label: "Markdown",
+  },
+];
+
+const PAGE_FORMATS: {
+  key: TPageFormats;
+  label: string;
+}[] = [
+  {
+    key: "A4",
+    label: "A4",
+  },
+  {
+    key: "A3",
+    label: "A3",
+  },
+  {
+    key: "A2",
+    label: "A2",
+  },
+  {
+    key: "LETTER",
+    label: "Letter",
+  },
+  {
+    key: "LEGAL",
+    label: "Legal",
+  },
+  {
+    key: "TABLOID",
+    label: "Tabloid",
+  },
+];
+
+const CONTENT_VARIETY: {
+  key: TContentVariety;
+  label: string;
+}[] = [
+  {
+    key: "everything",
+    label: "Everything",
+  },
+  {
+    key: "no-assets",
+    label: "No images",
+  },
+];
+
+const defaultValues: TFormValues = {
+  export_format: "pdf",
+  page_format: "A4",
+  content_variety: "everything",
+};
+
+export const ExportPageModal: React.FC<Props> = (props) => {
+  const { editorRef, isOpen, onClose, pageTitle } = props;
+  // states
+  const [isExporting, setIsExporting] = useState(false);
+  // form info
+  const { control, reset, watch } = useForm<TFormValues>({
+    defaultValues,
+  });
+  // derived values
+  const selectedExportFormat = watch("export_format");
+  const selectedPageFormat = watch("page_format");
+  const selectedContentVariety = watch("content_variety");
+  const isPDFSelected = selectedExportFormat === "pdf";
+  const fileName = pageTitle
+    ?.toLowerCase()
+    ?.replace(/[^a-z0-9-_]/g, "-")
+    .replace(/-+/g, "-");
+  // handle modal close
+  const handleClose = () => {
+    onClose();
+    setTimeout(() => {
+      reset();
+    }, 300);
+  };
+
+  const initiateDownload = (blob: Blob, filename: string) => {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = filename;
+    link.click();
+    setTimeout(() => {
+      URL.revokeObjectURL(url);
+    }, 1000);
+  };
+
+  // handle export as a PDF
+  const handleExportAsPDF = async () => {
+    try {
+      const pageContent = `<h1 class="page-title">${pageTitle}</h1>${editorRef?.getDocument().html ?? "<p></p>"}`;
+      const parsedPageContent = await replaceCustomComponentsFromHTMLContent({
+        htmlContent: pageContent,
+        noAssets: selectedContentVariety === "no-assets",
+      });
+
+      const blob = await pdf(<PDFDocument content={parsedPageContent} pageFormat={selectedPageFormat} />).toBlob();
+      initiateDownload(blob, `${fileName}-${selectedPageFormat.toString().toLowerCase()}.pdf`);
+    } catch (error) {
+      throw new Error(`Error in exporting as a PDF: ${error}`);
+    }
+  };
+  // handle export as markdown
+  const handleExportAsMarkdown = async () => {
+    try {
+      const markdownContent = editorRef?.getMarkDown() ?? "";
+      const parsedMarkdownContent = replaceCustomComponentsFromMarkdownContent({
+        markdownContent,
+        noAssets: selectedContentVariety === "no-assets",
+      });
+
+      const blob = new Blob([parsedMarkdownContent], { type: "text/markdown" });
+      initiateDownload(blob, `${fileName}.md`);
+    } catch (error) {
+      throw new Error(`Error in exporting as markdown: ${error}`);
+    }
+  };
+  // handle export
+  const handleExport = async () => {
+    setIsExporting(true);
+    try {
+      if (selectedExportFormat === "pdf") {
+        await handleExportAsPDF();
+      }
+      if (selectedExportFormat === "markdown") {
+        await handleExportAsMarkdown();
+      }
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: "Success!",
+        message: "Page exported successfully.",
+      });
+      handleClose();
+    } catch (error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Page could not be exported. Please try again later.",
+      });
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.SM}>
+      <div>
+        <div className="p-5 space-y-5">
+          <h3 className="text-xl font-medium text-custom-text-200">Export page</h3>
+          <div className="space-y-3">
+            <div className="flex items-center justify-between gap-2">
+              <h6 className="flex-shrink-0 text-sm text-custom-text-200">Export format</h6>
+              <Controller
+                control={control}
+                name="export_format"
+                render={({ field: { onChange, value } }) => (
+                  <CustomSelect
+                    label={EXPORT_FORMATS.find((format) => format.key === value)?.label}
+                    buttonClassName="border-none"
+                    value={value}
+                    onChange={(val: TExportFormats) => onChange(val)}
+                    className="flex-shrink-0"
+                    placement="bottom-end"
+                  >
+                    {EXPORT_FORMATS.map((format) => (
+                      <CustomSelect.Option key={format.key} value={format.key}>
+                        {format.label}
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                )}
+              />
+            </div>
+            <div className="flex items-center justify-between gap-2">
+              <h6 className="flex-shrink-0 text-sm text-custom-text-200">Include content</h6>
+              <Controller
+                control={control}
+                name="content_variety"
+                render={({ field: { onChange, value } }) => (
+                  <CustomSelect
+                    label={CONTENT_VARIETY.find((variety) => variety.key === value)?.label}
+                    buttonClassName="border-none"
+                    value={value}
+                    onChange={(val: TContentVariety) => onChange(val)}
+                    className="flex-shrink-0"
+                    placement="bottom-end"
+                  >
+                    {CONTENT_VARIETY.map((variety) => (
+                      <CustomSelect.Option key={variety.key} value={variety.key}>
+                        {variety.label}
+                      </CustomSelect.Option>
+                    ))}
+                  </CustomSelect>
+                )}
+              />
+            </div>
+            {isPDFSelected && (
+              <div className="flex items-center justify-between gap-2">
+                <h6 className="flex-shrink-0 text-sm text-custom-text-200">Page format</h6>
+                <Controller
+                  control={control}
+                  name="page_format"
+                  render={({ field: { onChange, value } }) => (
+                    <CustomSelect
+                      label={PAGE_FORMATS.find((format) => format.key === value)?.label}
+                      buttonClassName="border-none"
+                      value={value}
+                      onChange={(val: TPageFormats) => onChange(val)}
+                      className="flex-shrink-0"
+                      placement="bottom-end"
+                    >
+                      {PAGE_FORMATS.map((format) => (
+                        <CustomSelect.Option key={format.key.toString()} value={format.key}>
+                          {format.label}
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  )}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
+          <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" size="sm" loading={isExporting} onClick={handleExport}>
+            {isExporting ? "Exporting" : "Export"}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
+  );
+};

web/core/components/pages/modals/index.ts

@@ -1,3 +1,4 @@
 export * from "./create-page-modal";
 export * from "./delete-page-modal";
+export * from "./export-page-modal";
 export * from "./page-form";

web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx

@@ -2,20 +2,14 @@
 
 import { FC, ReactNode } from "react";
 import { observer } from "mobx-react";
-import { Check, CheckCheck, CheckCircle, Clock } from "lucide-react";
+import { Check, CheckCircle, Clock } from "lucide-react";
 import { TNotificationFilter } from "@plane/types";
-import { ArchiveIcon, PopoverMenu, Spinner } from "@plane/ui";
+import { ArchiveIcon, PopoverMenu } from "@plane/ui";
 // components
 import { NotificationMenuOptionItem } from "@/components/workspace-notifications";
 // constants
-import { NOTIFICATIONS_READ } from "@/constants/event-tracker";
-import { ENotificationLoader } from "@/constants/notification";
 // hooks
-import { useEventTracker, useWorkspaceNotifications } from "@/hooks/store";
-
-type TNotificationHeaderMenuOption = {
-  workspaceSlug: string;
-};
+import { useWorkspaceNotifications } from "@/hooks/store";
 
 export type TPopoverMenuOptions = {
   key: string;
@@ -27,44 +21,16 @@ export type TPopoverMenuOptions = {
   onClick?: (() => void) | undefined;
 };
 
-export const NotificationHeaderMenuOption: FC<TNotificationHeaderMenuOption> = observer((props) => {
-  const { workspaceSlug } = props;
+export const NotificationHeaderMenuOption = observer(() => {
   // hooks
-  const { captureEvent } = useEventTracker();
-  const { loader, filters, updateFilters, updateBulkFilters, markAllNotificationsAsRead } = useWorkspaceNotifications();
+  const { filters, updateFilters, updateBulkFilters } = useWorkspaceNotifications();
 
   const handleFilterChange = (filterType: keyof TNotificationFilter, filterValue: boolean) =>
     updateFilters(filterType, filterValue);
 
   const handleBulkFilterChange = (filter: Partial<TNotificationFilter>) => updateBulkFilters(filter);
 
-  const handleMarkAllNotificationsAsRead = async () => {
-    // NOTE: We are using loader to prevent continues request when we are making all the notification to read
-    if (loader) return;
-    try {
-      await markAllNotificationsAsRead(workspaceSlug);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
   const popoverMenuOptions: TPopoverMenuOptions[] = [
-    {
-      key: "menu-mark-all-read",
-      type: "menu-item",
-      label: "Mark all as read",
-      isActive: true,
-      prependIcon: <CheckCheck className="h-3 w-3" />,
-      appendIcon: loader === ENotificationLoader.MARK_ALL_AS_READY ? <Spinner height="14px" width="14px" /> : undefined,
-      onClick: () => {
-        captureEvent(NOTIFICATIONS_READ);
-        handleMarkAllNotificationsAsRead();
-      },
-    },
-    {
-      key: "menu-divider",
-      type: "divider",
-    },
     {
       key: "menu-unread",
       type: "menu-item",

web/core/components/workspace-notifications/sidebar/header/options/root.tsx

@@ -1,13 +1,14 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { RefreshCw } from "lucide-react";
-import { Tooltip } from "@plane/ui";
+import { CheckCheck, RefreshCw } from "lucide-react";
+import { Spinner, Tooltip } from "@plane/ui";
 // components
 import { NotificationFilter, NotificationHeaderMenuOption } from "@/components/workspace-notifications";
 // constants
+import { NOTIFICATIONS_READ } from "@/constants/event-tracker";
 import { ENotificationLoader, ENotificationQueryParamType } from "@/constants/notification";
 // hooks
-import { useWorkspaceNotifications } from "@/hooks/store";
+import { useEventTracker, useWorkspaceNotifications } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type TNotificationSidebarHeaderOptions = {
@@ -18,7 +19,8 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
   const { workspaceSlug } = props;
   // hooks
   const { isMobile } = usePlatformOS();
-  const { loader, getNotifications } = useWorkspaceNotifications();
+  const { loader, getNotifications, markAllNotificationsAsRead } = useWorkspaceNotifications();
+  const { captureEvent } = useEventTracker();
 
   const refreshNotifications = async () => {
     if (loader) return;
@@ -29,8 +31,35 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
     }
   };
 
+  const handleMarkAllNotificationsAsRead = async () => {
+    // NOTE: We are using loader to prevent continues request when we are making all the notification to read
+    if (loader) return;
+    try {
+      await markAllNotificationsAsRead(workspaceSlug);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   return (
     <div className="relative flex justify-center items-center gap-2 text-sm">
+      {/* mark all notifications as read*/}
+      <Tooltip tooltipContent="Mark all as read" isMobile={isMobile} position="bottom">
+        <div
+          className="flex-shrink-0 w-5 h-5 flex justify-center items-center overflow-hidden cursor-pointer transition-all hover:bg-custom-background-80 rounded-sm"
+          onClick={() => {
+            captureEvent(NOTIFICATIONS_READ);
+            handleMarkAllNotificationsAsRead();
+          }}
+        >
+          {loader === ENotificationLoader.MARK_ALL_AS_READY ? (
+            <Spinner height="14px" width="14px" />
+          ) : (
+            <CheckCheck className="h-3 w-3" />
+          )}
+        </div>
+      </Tooltip>
+
       {/* refetch current notifications */}
       <Tooltip tooltipContent="Refresh" isMobile={isMobile} position="bottom">
         <div
@@ -45,7 +74,7 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
       <NotificationFilter />
 
       {/* notification menu options */}
-      <NotificationHeaderMenuOption workspaceSlug={workspaceSlug} />
+      <NotificationHeaderMenuOption />
     </div>
   );
 });

web/core/constants/cycle.ts

@@ -40,12 +40,12 @@ export const CYCLE_VIEW_LAYOUTS: {
   {
     key: "board",
     icon: LayoutGrid,
-    title: "Grid layout",
+    title: "Gallery layout",
   },
   {
     key: "gantt",
     icon: GanttChartSquare,
-    title: "Gantt layout",
+    title: "Timeline layout",
   },
 ];
 

web/core/constants/editor.ts

@@ -1,3 +1,4 @@
+import { Styles, StyleSheet } from "@react-pdf/renderer";
 import {
   Bold,
   CaseSensitive,
@@ -23,6 +24,8 @@ import {
 import { TEditorCommands, TEditorFontStyle } from "@plane/editor";
 // ui
 import { MonospaceIcon, SansSerifIcon, SerifIcon } from "@plane/ui";
+// helpers
+import { convertRemToPixel } from "@/helpers/common.helper";
 
 type TEditorTypes = "lite" | "document";
 
@@ -131,3 +134,179 @@ export const EDITOR_FONT_STYLES: {
     icon: MonospaceIcon,
   },
 ];
+
+const EDITOR_PDF_FONT_FAMILY_STYLES: Styles = {
+  "*:not(.courier, .courier-bold)": {
+    fontFamily: "Inter",
+  },
+  ".courier": {
+    fontFamily: "Courier",
+  },
+  ".courier-bold": {
+    fontFamily: "Courier-Bold",
+  },
+};
+
+const EDITOR_PDF_TYPOGRAPHY_STYLES: Styles = {
+  // page title
+  "h1.page-title": {
+    fontSize: convertRemToPixel(1.6),
+    fontWeight: "bold",
+    marginTop: 0,
+    marginBottom: convertRemToPixel(2),
+  },
+  // headings
+  "h1:not(.page-title)": {
+    fontSize: convertRemToPixel(1.4),
+    fontWeight: "semibold",
+    marginTop: convertRemToPixel(2),
+    marginBottom: convertRemToPixel(0.25),
+  },
+  h2: {
+    fontSize: convertRemToPixel(1.2),
+    fontWeight: "semibold",
+    marginTop: convertRemToPixel(1.4),
+    marginBottom: convertRemToPixel(0.0625),
+  },
+  h3: {
+    fontSize: convertRemToPixel(1.1),
+    fontWeight: "semibold",
+    marginTop: convertRemToPixel(1),
+    marginBottom: convertRemToPixel(0.0625),
+  },
+  h4: {
+    fontSize: convertRemToPixel(1),
+    fontWeight: "semibold",
+    marginTop: convertRemToPixel(1),
+    marginBottom: convertRemToPixel(0.0625),
+  },
+  h5: {
+    fontSize: convertRemToPixel(0.9),
+    fontWeight: "semibold",
+    marginTop: convertRemToPixel(1),
+    marginBottom: convertRemToPixel(0.0625),
+  },
+  h6: {
+    fontSize: convertRemToPixel(0.8),
+    fontWeight: "semibold",
+    marginTop: convertRemToPixel(1),
+    marginBottom: convertRemToPixel(0.0625),
+  },
+  // paragraph
+  "p:not(table p)": {
+    fontSize: convertRemToPixel(0.8),
+  },
+  "p:not(ol p, ul p)": {
+    marginTop: convertRemToPixel(0.25),
+    marginBottom: convertRemToPixel(0.0625),
+  },
+};
+
+const EDITOR_PDF_LIST_STYLES: Styles = {
+  "ul, ol": {
+    fontSize: convertRemToPixel(0.8),
+    marginHorizontal: -20,
+  },
+  "ol p, ul p": {
+    marginVertical: 0,
+  },
+  "ol li, ul li": {
+    marginTop: convertRemToPixel(0.45),
+  },
+  "ul ul, ul ol, ol ol, ol ul": {
+    marginVertical: 0,
+  },
+  "ul[data-type='taskList']": {
+    position: "relative",
+  },
+  "div.input-checkbox": {
+    position: "absolute",
+    top: convertRemToPixel(0.15),
+    left: -convertRemToPixel(1.2),
+    height: convertRemToPixel(0.75),
+    width: convertRemToPixel(0.75),
+    borderWidth: "1.5px",
+    borderStyle: "solid",
+    borderRadius: convertRemToPixel(0.125),
+  },
+  "div.input-checkbox:not(.checked)": {
+    backgroundColor: "#ffffff",
+    borderColor: "#171717",
+  },
+  "div.input-checkbox.checked": {
+    backgroundColor: "#3f76ff",
+    borderColor: "#3f76ff",
+  },
+  "ul li[data-checked='true'] p": {
+    color: "#a3a3a3",
+  },
+};
+
+const EDITOR_PDF_CODE_STYLES: Styles = {
+  // code block
+  "[data-node-type='code-block']": {
+    marginVertical: convertRemToPixel(0.5),
+    padding: convertRemToPixel(1),
+    borderRadius: convertRemToPixel(0.5),
+    backgroundColor: "#f7f7f7",
+    fontSize: convertRemToPixel(0.7),
+  },
+  // inline code block
+  "[data-node-type='inline-code-block']": {
+    margin: 0,
+    paddingVertical: convertRemToPixel(0.25 / 4 + 0.25 / 8),
+    paddingHorizontal: convertRemToPixel(0.375),
+    border: "0.5px solid #e5e5e5",
+    borderRadius: convertRemToPixel(0.25),
+    backgroundColor: "#e8e8e8",
+    color: "#f97316",
+    fontSize: convertRemToPixel(0.7),
+  },
+};
+
+export const EDITOR_PDF_DOCUMENT_STYLESHEET = StyleSheet.create({
+  ...EDITOR_PDF_FONT_FAMILY_STYLES,
+  ...EDITOR_PDF_TYPOGRAPHY_STYLES,
+  ...EDITOR_PDF_LIST_STYLES,
+  ...EDITOR_PDF_CODE_STYLES,
+  // quote block
+  blockquote: {
+    borderLeft: "3px solid gray",
+    paddingLeft: convertRemToPixel(1),
+    marginTop: convertRemToPixel(0.625),
+    marginBottom: 0,
+    marginHorizontal: 0,
+  },
+  // image
+  img: {
+    marginVertical: 0,
+    borderRadius: convertRemToPixel(0.375),
+  },
+  // divider
+  "div[data-type='horizontalRule']": {
+    marginVertical: convertRemToPixel(1),
+    height: 1,
+    width: "100%",
+    backgroundColor: "gray",
+  },
+  // mention block
+  "[data-node-type='mention-block']": {
+    margin: 0,
+    color: "#3f76ff",
+    backgroundColor: "#3f76ff33",
+    paddingHorizontal: convertRemToPixel(0.375),
+  },
+  // table
+  table: {
+    marginTop: convertRemToPixel(0.5),
+    marginBottom: convertRemToPixel(1),
+    marginHorizontal: 0,
+  },
+  "table td": {
+    padding: convertRemToPixel(0.625),
+    border: "1px solid #e5e5e5",
+  },
+  "table p": {
+    fontSize: convertRemToPixel(0.7),
+  },
+});

web/core/constants/issue.ts

@@ -156,24 +156,24 @@ export const ISSUE_EXTRA_OPTIONS: {
 ];
 
 export const ISSUE_LAYOUT_MAP = {
-  [EIssueLayoutTypes.LIST]: { key: EIssueLayoutTypes.LIST, title: "List Layout", label: "List", icon: List },
-  [EIssueLayoutTypes.KANBAN]: { key: EIssueLayoutTypes.KANBAN, title: "Kanban Layout", label: "Kanban", icon: Kanban },
+  [EIssueLayoutTypes.LIST]: { key: EIssueLayoutTypes.LIST, title: "List layout", label: "List", icon: List },
+  [EIssueLayoutTypes.KANBAN]: { key: EIssueLayoutTypes.KANBAN, title: "Board layout", label: "Board", icon: Kanban },
   [EIssueLayoutTypes.CALENDAR]: {
     key: EIssueLayoutTypes.CALENDAR,
-    title: "Calendar Layout",
+    title: "Calendar layout",
     label: "Calendar",
     icon: Calendar,
   },
   [EIssueLayoutTypes.SPREADSHEET]: {
     key: EIssueLayoutTypes.SPREADSHEET,
-    title: "Spreadsheet Layout",
-    label: "Spreadsheet",
+    title: "Table layout",
+    label: "Table",
     icon: Sheet,
   },
   [EIssueLayoutTypes.GANTT]: {
     key: EIssueLayoutTypes.GANTT,
-    title: "Gantt Chart Layout",
-    label: "Gantt",
+    title: "Timeline layout",
+    label: "Timeline",
     icon: GanttChartSquare,
   },
 };

web/core/constants/module.ts

@@ -62,12 +62,12 @@ export const MODULE_VIEW_LAYOUTS: { key: TModuleLayoutOptions; icon: any; title:
   {
     key: "board",
     icon: LayoutGrid,
-    title: "Grid layout",
+    title: "Gallery layout",
   },
   {
     key: "gantt",
     icon: GanttChartSquare,
-    title: "Gantt layout",
+    title: "Timeline layout",
   },
 ];
 

web/core/lib/wrappers/store-wrapper.tsx

@@ -21,8 +21,6 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
   const { setQuery } = useRouterParams();
   const { sidebarCollapsed, toggleSidebar } = useAppTheme();
   const { data: userProfile } = useUserProfile();
-  // states
-  const [dom, setDom] = useState<HTMLElement | null>(null);
 
   /**
    * Sidebar collapsed fetching from local storage
@@ -44,36 +42,14 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
     const currentThemePalette = userProfile?.theme?.palette;
     if (currentTheme) {
       setTheme(currentTheme);
-      if (currentTheme === "custom" && currentThemePalette && dom) {
+      if (currentTheme === "custom" && currentThemePalette) {
         applyTheme(
           currentThemePalette !== ",,,," ? currentThemePalette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
-          false,
-          dom
+          false
         );
       } else unsetCustomCssVariables();
     }
-  }, [userProfile?.theme?.theme, userProfile?.theme?.palette, setTheme, dom]);
-
-  useEffect(() => {
-    if (dom) return;
-
-    const observer = new MutationObserver((mutationsList, observer) => {
-      for (const mutation of mutationsList) {
-        if (mutation.type === "childList") {
-          const customThemeElement = window.document?.querySelector<HTMLElement>("[data-theme='custom']");
-          if (customThemeElement) {
-            setDom(customThemeElement);
-            observer.disconnect();
-            break;
-          }
-        }
-      }
-    });
-
-    observer.observe(document.body, { childList: true, subtree: true });
-
-    return () => observer.disconnect();
-  }, [dom]);
+  }, [userProfile?.theme?.theme, userProfile?.theme?.palette, setTheme]);
 
   useEffect(() => {
     if (!params) return;

web/core/store/cycle.store.ts

@@ -144,7 +144,6 @@ export class CycleStore implements ICycleStore {
       fetchActiveCycleProgress: action,
       fetchActiveCycleAnalytics: action,
       fetchCycleDetails: action,
-      createCycle: action,
       updateCycleDetails: action,
       deleteCycle: action,
       addCycleToFavorites: action,
@@ -617,13 +616,15 @@ export class CycleStore implements ICycleStore {
    * @param data
    * @returns
    */
-  createCycle = async (workspaceSlug: string, projectId: string, data: Partial<ICycle>) =>
-    await this.cycleService.createCycle(workspaceSlug, projectId, data).then((response) => {
-      runInAction(() => {
-        set(this.cycleMap, [response.id], response);
-      });
-      return response;
-    });
+  createCycle = action(
+    async (workspaceSlug: string, projectId: string, data: Partial<ICycle>) =>
+      await this.cycleService.createCycle(workspaceSlug, projectId, data).then((response) => {
+        runInAction(() => {
+          set(this.cycleMap, [response.id], response);
+        });
+        return response;
+      })
+  );
 
   /**
    * @description updates cycle details

web/helpers/common.helper.ts

@@ -37,3 +37,5 @@ export const debounce = (func: any, wait: number, immediate: boolean = false) =>
 };
 
 export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
+
+export const convertRemToPixel = (rem: number): number => rem * 0.9 * 16;

web/helpers/editor.helper.ts

@@ -0,0 +1,157 @@
+// helpers
+import { getBase64Image } from "@/helpers/file.helper";
+
+/**
+ * @description function to replace all the custom components from the html component to make it pdf compatible
+ * @param props
+ * @returns {Promise<string>}
+ */
+export const replaceCustomComponentsFromHTMLContent = async (props: {
+  htmlContent: string;
+  noAssets?: boolean;
+}): Promise<string> => {
+  const { htmlContent, noAssets = false } = props;
+  // create a DOM parser
+  const parser = new DOMParser();
+  // parse the HTML string into a DOM document
+  const doc = parser.parseFromString(htmlContent, "text/html");
+  // replace all mention-component elements
+  const mentionComponents = doc.querySelectorAll("mention-component");
+  mentionComponents.forEach((component) => {
+    // get the user label from the component (or use any other attribute)
+    const label = component.getAttribute("label") || "user";
+    // create a span element to replace the mention-component
+    const span = doc.createElement("span");
+    span.setAttribute("data-node-type", "mention-block");
+    span.textContent = `@${label}`;
+    // replace the mention-component with the anchor element
+    component.replaceWith(span);
+  });
+  // handle code inside pre elements
+  const preElements = doc.querySelectorAll("pre");
+  preElements.forEach((preElement) => {
+    const codeElement = preElement.querySelector("code");
+    if (codeElement) {
+      // create a div element with the required attributes for code blocks
+      const div = doc.createElement("div");
+      div.setAttribute("data-node-type", "code-block");
+      div.setAttribute("class", "courier");
+      // transfer the content from the code block
+      div.innerHTML = codeElement.innerHTML.replace(/\n/g, "<br>") || "";
+      // replace the pre element with the new div
+      preElement.replaceWith(div);
+    }
+  });
+  // handle inline code elements (not inside pre tags)
+  const inlineCodeElements = doc.querySelectorAll("code");
+  inlineCodeElements.forEach((codeElement) => {
+    // check if the code element is inside a pre element
+    if (!codeElement.closest("pre")) {
+      // create a span element with the required attributes for inline code blocks
+      const span = doc.createElement("span");
+      span.setAttribute("data-node-type", "inline-code-block");
+      span.setAttribute("class", "courier-bold");
+      // transfer the code content
+      span.textContent = codeElement.textContent || "";
+      // replace the standalone code element with the new span
+      codeElement.replaceWith(span);
+    }
+  });
+  // handle image-component elements
+  const imageComponents = doc.querySelectorAll("image-component");
+  if (noAssets) {
+    // if no assets is enabled, remove the image component elements
+    imageComponents.forEach((component) => component.remove());
+    // remove default img elements
+    const imageElements = doc.querySelectorAll("img");
+    imageElements.forEach((img) => img.remove());
+  } else {
+    // if no assets is not enabled, replace the image component elements with img elements
+    imageComponents.forEach((component) => {
+      // get the image src from the component
+      const src = component.getAttribute("src") ?? "";
+      const height = component.getAttribute("height") ?? "";
+      const width = component.getAttribute("width") ?? "";
+      // create an img element to replace the image-component
+      const img = doc.createElement("img");
+      img.src = src;
+      img.style.height = height;
+      img.style.width = width;
+      // replace the image-component with the img element
+      component.replaceWith(img);
+    });
+  }
+  // convert all images to base64
+  const imgElements = doc.querySelectorAll("img");
+  await Promise.all(
+    Array.from(imgElements).map(async (img) => {
+      // get the image src from the img element
+      const src = img.getAttribute("src");
+      if (src) {
+        try {
+          const base64Image = await getBase64Image(src);
+          img.src = base64Image;
+        } catch (error) {
+          // log the error if the image conversion fails
+          console.error("Failed to convert image to base64:", error);
+        }
+      }
+    })
+  );
+  // replace all checkbox elements
+  const checkboxComponents = doc.querySelectorAll("input[type='checkbox']");
+  checkboxComponents.forEach((component) => {
+    // get the checked status from the element
+    const checked = component.getAttribute("checked");
+    // create a div element to replace the input element
+    const div = doc.createElement("div");
+    div.classList.value = "input-checkbox";
+    // add the checked class if the checkbox is checked
+    if (checked === "checked" || checked === "true") div.classList.add("checked");
+    // replace the input element with the div element
+    component.replaceWith(div);
+  });
+  // remove all issue-embed-component elements
+  const issueEmbedComponents = doc.querySelectorAll("issue-embed-component");
+  issueEmbedComponents.forEach((component) => component.remove());
+  // serialize the document back into a string
+  let serializedDoc = doc.body.innerHTML;
+  // remove null colors from table elements
+  serializedDoc = serializedDoc.replace(/background-color: null/g, "").replace(/color: null/g, "");
+  return serializedDoc;
+};
+
+/**
+ * @description function to replace all the custom components from the markdown content
+ * @param props
+ * @returns {string}
+ */
+export const replaceCustomComponentsFromMarkdownContent = (props: {
+  markdownContent: string;
+  noAssets?: boolean;
+}): string => {
+  const { markdownContent, noAssets = false } = props;
+  let parsedMarkdownContent = markdownContent;
+  // replace the matched mention components with [label](redirect_uri)
+  const mentionRegex = /<mention-component[^>]*label="([^"]+)"[^>]*redirect_uri="([^"]+)"[^>]*><\/mention-component>/g;
+  const originUrl = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+  parsedMarkdownContent = parsedMarkdownContent.replace(
+    mentionRegex,
+    (_match, label, redirectUri) => `[${label}](${originUrl}/${redirectUri})`
+  );
+  // replace the matched image components with <img src={src} >
+  const imageComponentRegex = /<image-component[^>]*src="([^"]+)"[^>]*>[^]*<\/image-component>/g;
+  const imgTagRegex = /<img[^>]*src="([^"]+)"[^>]*\/?>/g;
+  if (noAssets) {
+    // remove all image components
+    parsedMarkdownContent = parsedMarkdownContent.replace(imageComponentRegex, "").replace(imgTagRegex, "");
+  } else {
+    // replace the matched image components with <img src={src} >
+    parsedMarkdownContent = parsedMarkdownContent.replace(imageComponentRegex, (_match, src) => `<img src="${src}" >`);
+  }
+  // remove all issue-embed components
+  const issueEmbedRegex = /<issue-embed-component[^>]*>[^]*<\/issue-embed-component>/g;
+  parsedMarkdownContent = parsedMarkdownContent.replace(issueEmbedRegex, "");
+  return parsedMarkdownContent;
+};

web/helpers/file.helper.ts

@@ -0,0 +1,42 @@
+/**
+ * @description encode image via URL to base64
+ * @param {string} url
+ * @returns
+ */
+export const getBase64Image = async (url: string): Promise<string> => {
+  if (!url || typeof url !== "string") {
+    throw new Error("Invalid URL provided");
+  }
+
+  // Try to create a URL object to validate the URL
+  try {
+    new URL(url);
+  } catch (error) {
+    throw new Error("Invalid URL format");
+  }
+
+  const response = await fetch(url);
+  // check if the response is OK
+  if (!response.ok) {
+    throw new Error(`Failed to fetch image: ${response.statusText}`);
+  }
+
+  const blob = await response.blob();
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onloadend = () => {
+      if (reader.result) {
+        resolve(reader.result as string);
+      } else {
+        reject(new Error("Failed to convert image to base64."));
+      }
+    };
+
+    reader.onerror = () => {
+      reject(new Error("Failed to read the image file."));
+    };
+
+    reader.readAsDataURL(blob);
+  });
+};

web/helpers/string.helper.ts

@@ -270,7 +270,7 @@ export const isCommentEmpty = (comment: string | undefined): boolean => {
 export const checkURLValidity = (url: string): boolean => {
   if (!url) return false;
   // regex to match valid URLs (with or without http/https)
-  const urlPattern = /^(https?:\/\/)?([\da-z.-]+)\.([a-z]{2,6})(\/[\w.-]*)*\/?(\?[=&\w.-]*)?$/i;
+  const urlPattern = /^(https?:\/\/)?([\w.-]+\.[a-z]{2,6})(\/[\w\-.~:/?#[\]@!$&'()*+,;=%]*)?$/i;
   // test if the URL matches the pattern
   return urlPattern.test(url);
 };

web/helpers/theme.helper.ts

@@ -59,8 +59,9 @@ const calculateShades = (hexValue: string): TShades => {
   return shades as TShades;
 };
 
-export const applyTheme = (palette: string, isDarkPalette: boolean, dom: HTMLElement | null) => {
+export const applyTheme = (palette: string, isDarkPalette: boolean) => {
   if (!palette) return;
+  const themeElement = document?.querySelector("html");
   // palette: [bg, text, primary, sidebarBg, sidebarText]
   const values: string[] = palette.split(",");
   values.push(isDarkPalette ? "dark" : "light");
@@ -80,27 +81,27 @@ export const applyTheme = (palette: string, isDarkPalette: boolean, dom: HTMLEle
     const sidebarBackgroundRgbValues = `${sidebarBackgroundShades[shade].r}, ${sidebarBackgroundShades[shade].g}, ${sidebarBackgroundShades[shade].b}`;
     const sidebarTextRgbValues = `${sidebarTextShades[shade].r}, ${sidebarTextShades[shade].g}, ${sidebarTextShades[shade].b}`;
 
-    dom?.style.setProperty(`--color-background-${shade}`, bgRgbValues);
-    dom?.style.setProperty(`--color-text-${shade}`, textRgbValues);
-    dom?.style.setProperty(`--color-primary-${shade}`, primaryRgbValues);
-    dom?.style.setProperty(`--color-sidebar-background-${shade}`, sidebarBackgroundRgbValues);
-    dom?.style.setProperty(`--color-sidebar-text-${shade}`, sidebarTextRgbValues);
+    themeElement?.style.setProperty(`--color-background-${shade}`, bgRgbValues);
+    themeElement?.style.setProperty(`--color-text-${shade}`, textRgbValues);
+    themeElement?.style.setProperty(`--color-primary-${shade}`, primaryRgbValues);
+    themeElement?.style.setProperty(`--color-sidebar-background-${shade}`, sidebarBackgroundRgbValues);
+    themeElement?.style.setProperty(`--color-sidebar-text-${shade}`, sidebarTextRgbValues);
 
     if (i >= 100 && i <= 400) {
       const borderShade = i === 100 ? 70 : i === 200 ? 80 : i === 300 ? 90 : 100;
 
-      dom?.style.setProperty(
+      themeElement?.style.setProperty(
         `--color-border-${shade}`,
         `${bgShades[borderShade].r}, ${bgShades[borderShade].g}, ${bgShades[borderShade].b}`
       );
-      dom?.style.setProperty(
+      themeElement?.style.setProperty(
         `--color-sidebar-border-${shade}`,
         `${sidebarBackgroundShades[borderShade].r}, ${sidebarBackgroundShades[borderShade].g}, ${sidebarBackgroundShades[borderShade].b}`
       );
     }
   }
 
-  dom?.style.setProperty("--color-scheme", values[5]);
+  themeElement?.style.setProperty("--color-scheme", values[5]);
 };
 
 export const unsetCustomCssVariables = () => {

web/package.json

@@ -32,6 +32,7 @@
     "@plane/types": "*",
     "@plane/ui": "*",
     "@popperjs/core": "^2.11.8",
+    "@react-pdf/renderer": "^3.4.5",
     "@sentry/nextjs": "^8.32.0",
     "@sqlite.org/sqlite-wasm": "^3.46.0-build2",
     "axios": "^1.7.4",
@@ -57,6 +58,7 @@
     "react-dropzone": "^14.2.3",
     "react-hook-form": "7.51.5",
     "react-markdown": "^8.0.7",
+    "react-pdf-html": "^2.1.2",
     "react-popper": "^2.3.0",
     "sharp": "^0.32.1",
     "smooth-scroll-into-view-if-needed": "^2.0.2",