fix: added capture message

* chore: peekoverview edit permission updated

* chore: tab index added in create project modal

* chore: project card improvement

* style: avatar component improvement

* chore: create issue modal improvement

* style: global style sidebar border variable name fix

.github/workflows/build-branch.yml

@@ -0,0 +1,205 @@
+
+name: Docker Branch Build
+
+on:
+  workflow_dispatch:
+    inputs:
+      logLevel:
+        description: 'Log level'     
+        required: true
+        default: 'warning'
+      tags:
+        description: 'Dev/QA Builds'
+
+env:
+  gh_branch: ${{ github.ref_name }}
+  img_tag: latest
+
+jobs:
+  branch_build_and_push:
+    name: Build-Push Web/Space/API/Proxy Docker Image
+    runs-on: ubuntu-20.04
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3.3.0
+
+      - uses: ASzc/change-string-case-action@v2
+        id: gh_branch_upper_lower
+        with:
+          string: ${{ env.gh_branch }}
+
+      - uses: mad9000/actions-find-and-replace-string@2
+        id: gh_branch_replace_slash
+        with:
+          source: ${{ steps.gh_branch_upper_lower.outputs.lowercase }}
+          find: '/'        
+          replace: '-'
+
+      - uses: mad9000/actions-find-and-replace-string@2
+        id: gh_branch_replace_dot
+        with:
+          source: ${{ steps.gh_branch_replace_slash.outputs.value }}
+          find: '.'        
+          replace: ''
+          
+      - uses: mad9000/actions-find-and-replace-string@2
+        id: gh_branch_clean
+        with:
+          source: ${{ steps.gh_branch_replace_dot.outputs.value }}
+          find: '_'
+          replace: ''
+      - name: Uploading Proxy Source
+        uses: actions/upload-artifact@v3
+        with:
+          name: proxy-src-code
+          path: ./nginx
+      - name: Uploading Backend Source
+        uses: actions/upload-artifact@v3
+        with:
+          name: backend-src-code
+          path: ./apiserver
+      - name: Uploading Web Source
+        uses: actions/upload-artifact@v3
+        with:
+          name: web-src-code
+          path: |
+            ./
+            !./apiserver
+            !./nginx
+            !./deploy
+            !./space
+      
+      - name: Uploading Space Source
+        uses: actions/upload-artifact@v3
+        with:
+          name: space-src-code
+          path: |
+            ./
+            !./apiserver
+            !./nginx
+            !./deploy
+            !./web
+    outputs:
+        gh_branch_name: ${{ steps.gh_branch_clean.outputs.value }}
+
+  branch_build_push_frontend:
+    runs-on: ubuntu-20.04
+    needs: [ branch_build_and_push ]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Downloading Web Source Code
+        uses: actions/download-artifact@v3
+        with:
+          name: web-src-code
+
+      - name: Build and Push Frontend to Docker Container Registry
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./web/Dockerfile.web
+          platforms: linux/amd64
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+  branch_build_push_space:
+    runs-on: ubuntu-20.04
+    needs: [ branch_build_and_push ]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Downloading Space Source Code
+        uses: actions/download-artifact@v3
+        with:
+          name: space-src-code
+
+      - name: Build and Push Space to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./space/Dockerfile.space
+          platforms: linux/amd64
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+  branch_build_push_backend:
+    runs-on: ubuntu-20.04
+    needs: [ branch_build_and_push ]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Downloading Backend Source Code
+        uses: actions/download-artifact@v3
+        with:
+          name: backend-src-code
+
+      - name: Build and Push Backend to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./Dockerfile.api
+          platforms: linux/amd64
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}
+
+  branch_build_push_proxy:
+    runs-on: ubuntu-20.04
+    needs: [ branch_build_and_push ]
+    steps:
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2.5.0
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v2.1.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Downloading Proxy Source Code
+        uses: actions/download-artifact@v3
+        with:
+          name: proxy-src-code
+
+      - name: Build and Push Plane-Proxy to Docker Hub
+        uses: docker/build-push-action@v4.0.0
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-private:${{ needs.branch_build_and_push.outputs.gh_branch_name }}
+          push: true
+        env:
+          DOCKER_BUILDKIT: 1
+          DOCKER_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+          DOCKET_PASSWORD: ${{ secrets.DOCKERHUB_TOKEN }}

.gitignore

@@ -75,7 +75,7 @@ pnpm-lock.yaml
 pnpm-workspace.yaml
 
 .npmrc
+.secrets
 tmp/
-
 ## packages
 dist

CODE_OF_CONDUCT.md

@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-hello@plane.so.
+squawk@plane.so.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

README.md

@@ -7,7 +7,7 @@
 </p>
 
 <h3 align="center"><b>Plane</b></h3>
-<p align="center"><b>Open-source, self-hosted project planning tool</b></p>
+<p align="center"><b>Flexible, extensible open-source project management</b></p>
 
 <p align="center">
 <a href="https://discord.com/invite/A92xrEGCge">

apiserver/plane/api/urls/__init__.py

@@ -1,7 +1,7 @@
 from .analytic import urlpatterns as analytic_urls
 from .asset import urlpatterns as asset_urls
 from .authentication import urlpatterns as authentication_urls
-from .configuration import urlpatterns as configuration_urls
+from .config import urlpatterns as configuration_urls
 from .cycle import urlpatterns as cycle_urls
 from .estimate import urlpatterns as estimate_urls
 from .gpt import urlpatterns as gpt_urls

apiserver/plane/api/views/config.py

@@ -30,4 +30,5 @@ class ConfigurationEndpoint(BaseAPIView):
         data["email_password_login"] = (
             os.environ.get("ENABLE_EMAIL_PASSWORD", "0") == "1"
         )
+        data["slack"] = os.environ.get("SLACK_CLIENT_ID", None)
         return Response(data, status=status.HTTP_200_OK)

apiserver/plane/api/views/integration/base.py

@@ -1,13 +1,13 @@
 # Python improts
 import uuid
-
+import requests
 # Django imports
 from django.contrib.auth.hashers import make_password
 
 # Third party imports
 from rest_framework.response import Response
 from rest_framework import status
-from sentry_sdk import capture_exception
+from sentry_sdk import capture_exception, capture_message
 
 # Module imports
 from plane.api.views import BaseViewSet
@@ -25,7 +25,7 @@ from plane.utils.integrations.github import (
     delete_github_installation,
 )
 from plane.api.permissions import WorkSpaceAdminPermission
-
+from plane.utils.integrations.slack import slack_oauth
 
 class IntegrationViewSet(BaseViewSet):
     serializer_class = IntegrationSerializer
@@ -98,12 +98,20 @@ class WorkspaceIntegrationViewSet(BaseViewSet):
             config = {"installation_id": installation_id}
 
         if provider == "slack":
-            metadata = request.data.get("metadata", {})
+            code = request.data.get("code", False)
+
+            if not code:
+                return Response({"error": "Code is required"}, status=status.HTTP_400_BAD_REQUEST)
+
+            slack_response = slack_oauth(code=code)
+
+            metadata = slack_response
             access_token = metadata.get("access_token", False)
             team_id = metadata.get("team", {}).get("id", False)
             if not metadata or not access_token or not team_id:
+                capture_message(slack_response)
                 return Response(
-                    {"error": "Access token and team id is required"},
+                    {"error": "Slack could not be installed. Please try again later"},
                     status=status.HTTP_400_BAD_REQUEST,
                 )
             config = {"team_id": team_id, "access_token": access_token}
@@ -126,6 +134,7 @@ class WorkspaceIntegrationViewSet(BaseViewSet):
             user=bot_user,
             user_type=1,  # bot user
             workspace=workspace,
+            description="",
         )
 
         workspace_integration = WorkspaceIntegration.objects.create(

apiserver/plane/api/views/integration/slack.py

@@ -11,6 +11,7 @@ from plane.api.views import BaseViewSet, BaseAPIView
 from plane.db.models import SlackProjectSync, WorkspaceIntegration, ProjectMember
 from plane.api.serializers import SlackProjectSyncSerializer
 from plane.api.permissions import ProjectBasePermission, ProjectEntityPermission
+from plane.utils.integrations.slack import slack_oauth
 
 
 class SlackProjectSyncViewSet(BaseViewSet):
@@ -32,25 +33,46 @@ class SlackProjectSyncViewSet(BaseViewSet):
         )
 
     def create(self, request, slug, project_id, workspace_integration_id):
-        serializer = SlackProjectSyncSerializer(data=request.data)
+        try:
+            code = request.data.get("code", False)
 
-        workspace_integration = WorkspaceIntegration.objects.get(
-            workspace__slug=slug, pk=workspace_integration_id
-        )
+            if not code:
+                return Response(
+                    {"error": "Code is required"}, status=status.HTTP_400_BAD_REQUEST
+                )
 
-        if serializer.is_valid():
-            serializer.save(
-                project_id=project_id,
-                workspace_integration_id=workspace_integration_id,
+            slack_response = slack_oauth(code=code)
+
+            workspace_integration = WorkspaceIntegration.objects.get(
+                workspace__slug=slug, pk=workspace_integration_id
             )
 
             workspace_integration = WorkspaceIntegration.objects.get(
                 pk=workspace_integration_id, workspace__slug=slug
             )
-
+            slack_project_sync = SlackProjectSync.objects.create(
+                access_token=slack_response.get("access_token"),
+                scopes=slack_response.get("scope"),
+                bot_user_id=slack_response.get("bot_user_id"),
+                webhook_url=slack_response.get("incoming_webhook", {}).get("url"),
+                data=slack_response,
+                team_id=slack_response.get("team", {}).get("id"),
+                team_name=slack_response.get("team", {}).get("name"),
+                workspace_integration=workspace_integration,
+            )
             _ = ProjectMember.objects.get_or_create(
                 member=workspace_integration.actor, role=20, project_id=project_id
             )
-
+            serializer = SlackProjectSyncSerializer(slack_project_sync)
             return Response(serializer.data, status=status.HTTP_200_OK)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        except IntegrityError as e:
+            if "already exists" in str(e):
+                return Response(
+                    {"error": "Slack is already installed for the project"},
+                    status=status.HTTP_410_GONE,
+                )
+            capture_exception(e)
+            return Response(
+                {"error": "Slack could not be installed. Please try again later"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )

apiserver/plane/api/views/issue.py

@@ -773,6 +773,20 @@ class SubIssuesEndpoint(BaseAPIView):
 
         updated_sub_issues = Issue.issue_objects.filter(id__in=sub_issue_ids)
 
+        # Track the issue
+        _ = [
+            issue_activity.delay(
+                type="issue.activity.updated",
+                requested_data=json.dumps({"parent": str(issue_id)}),
+                actor_id=str(request.user.id),
+                issue_id=str(sub_issue_id),
+                project_id=str(project_id),
+                current_instance=json.dumps({"parent": str(sub_issue_id)}),
+                epoch=int(timezone.now().timestamp()),
+            )
+            for sub_issue_id in sub_issue_ids
+        ]
+
         return Response(
             IssueFlatSerializer(updated_sub_issues, many=True).data,
             status=status.HTTP_200_OK,

apiserver/plane/bgtasks/analytic_plot_export.py

@@ -408,7 +408,6 @@ def analytic_export_task(email, data, slug):
                 distribution,
                 x_axis,
                 y_axis,
-                segment,
                 key,
                 assignee_details,
                 label_details,

apiserver/plane/bgtasks/issue_activites_task.py

@@ -131,7 +131,7 @@ def track_parent(
                 else "",
                 field="parent",
                 project_id=project_id,
-                workspace=workspace_id,
+                workspace_id=workspace_id,
                 comment=f"updated the parent issue to",
                 old_identifier=old_parent.id if old_parent is not None else None,
                 new_identifier=new_parent.id if new_parent is not None else None,
@@ -334,9 +334,7 @@ def track_assignees(
     issue_activities,
     epoch,
 ):
-    requested_assignees = set(
-        [str(asg) for asg in requested_data.get("assignees", [])]
-    )
+    requested_assignees = set([str(asg) for asg in requested_data.get("assignees", [])])
     current_assignees = set([str(asg) for asg in current_instance.get("assignees", [])])
 
     added_assignees = requested_assignees - current_assignees
@@ -363,17 +361,19 @@ def track_assignees(
     for dropped_assignee in dropped_assginees:
         assignee = User.objects.get(pk=dropped_assignee)
         issue_activities.append(
-            issue_id=issue_id,
-            actor_id=actor_id,
-            verb="updated",
-            old_value=assignee.display_name,
-            new_value="",
-            field="assignees",
-            project_id=project_id,
-            workspace_id=workspace_id,
-            comment=f"removed assignee ",
-            old_identifier=assignee.id,
-            epoch=epoch,
+            IssueActivity(
+                issue_id=issue_id,
+                actor_id=actor_id,
+                verb="updated",
+                old_value=assignee.display_name,
+                new_value="",
+                field="assignees",
+                project_id=project_id,
+                workspace_id=workspace_id,
+                comment=f"removed assignee ",
+                old_identifier=assignee.id,
+                epoch=epoch,
+            )
         )
 
 
@@ -1536,7 +1536,7 @@ def issue_activity(
                 cls=DjangoJSONEncoder,
             ),
             requested_data=requested_data,
-            current_instance=current_instance
+            current_instance=current_instance,
         )
 
         return

apiserver/plane/bgtasks/notification_task.py

@@ -5,7 +5,16 @@ import json
 from django.utils import timezone
 
 # Module imports
-from plane.db.models import IssueMention, IssueSubscriber, Project, User, IssueAssignee, Issue, Notification
+from plane.db.models import (
+    IssueMention,
+    IssueSubscriber,
+    Project,
+    User,
+    IssueAssignee,
+    Issue,
+    Notification,
+    IssueComment,
+)
 
 # Third Party imports
 from celery import shared_task
@@ -165,6 +174,9 @@ def notifications(type, issue_id, project_id, actor_id, subscriber, issue_activi
 
         for subscriber in list(set(issue_subscribers)):
             for issue_activity in issue_activities_created:
+                issue_comment = issue_activity.get("issue_comment")
+                if issue_comment is not None:
+                    issue_comment = IssueComment.objects.get(id=issue_comment, issue_id=issue_id, project_id=project_id, workspace_id=project.workspace_id)
                 bulk_notifications.append(
                     Notification(
                         workspace=project.workspace,
@@ -192,8 +204,7 @@ def notifications(type, issue_id, project_id, actor_id, subscriber, issue_activi
                                 "new_value": str(issue_activity.get("new_value")),
                                 "old_value": str(issue_activity.get("old_value")),
                                 "issue_comment": str(
-                                    issue_activity.get(
-                                        "issue_comment").comment_stripped
+                                    issue_comment.comment_stripped
                                     if issue_activity.get("issue_comment") is not None
                                     else ""
                                 ),
@@ -257,7 +268,7 @@ def notifications(type, issue_id, project_id, actor_id, subscriber, issue_activi
         IssueMention.objects.bulk_create(
             aggregated_issue_mentions, batch_size=100)
         IssueMention.objects.filter(
-            issue=issue.id, mention__in=removed_mention).delete()
+            issue=issue, mention__in=removed_mention).delete()
 
         # Bulk create notifications
         Notification.objects.bulk_create(bulk_notifications, batch_size=100)

apiserver/plane/db/migrations/0046_alter_analyticview_created_by_and_more.py

@@ -4,6 +4,7 @@ from django.conf import settings
 from django.db import migrations, models
 import django.db.models.deletion
 import plane.db.models.issue
+import uuid
 
 class Migration(migrations.Migration):
 
@@ -12,6 +13,26 @@ class Migration(migrations.Migration):
     ]
 
     operations = [
+        migrations.CreateModel(
+            name="issue_mentions",
+            fields=[
+                ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
+                ('updated_at', models.DateTimeField(auto_now=True, verbose_name='Last Modified At')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4,editable=False, primary_key=True, serialize=False, unique=True)),
+                ('mention', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='issue_mention', to=settings.AUTH_USER_MODEL)),
+                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL,related_name='issuemention_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
+                ('issue', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='issue_mention', to='db.issue')),
+                ('project', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='project_issuemention', to='db.project')),
+                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='issuemention_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
+                ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='workspace_issuemention', to='db.workspace')),
+            ],
+            options={
+                'verbose_name': 'IssueMention',
+                'verbose_name_plural': 'IssueMentions',
+                'db_table': 'issue_mentions',
+                'ordering': ('-created_at',),
+            },
+        ),
         migrations.AlterField(
             model_name='issueproperty',
             name='properties',

apiserver/plane/db/migrations/0047_issue_mention_and_more.py

@@ -1,45 +0,0 @@
-# Generated by Django 4.2.5 on 2023-10-25 05:01
-
-from django.conf import settings
-from django.db import migrations, models
-import django.db.models.deletion
-import uuid
-
-
-class Migration(migrations.Migration):
-
-    dependencies = [
-        ('db', '0046_alter_analyticview_created_by_and_more'),
-    ]
-
-    operations = [
-        migrations.CreateModel(
-            name="issue_mentions",
-            fields=[
-                ('created_at', models.DateTimeField(
-                    auto_now_add=True, verbose_name='Created At')),
-                ('updated_at', models.DateTimeField(
-                    auto_now=True, verbose_name='Last Modified At')),
-                ('id', models.UUIDField(db_index=True, default=uuid.uuid4,
-                                        editable=False, primary_key=True, serialize=False, unique=True)),
-                ('mention', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE,
-                                              related_name='issue_mention', to=settings.AUTH_USER_MODEL)),
-                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL,
-                                                 related_name='issuemention_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
-                ('issue', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE,
-                                            related_name='issue_mention', to='db.issue')),
-                ('project', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE,
-                                              related_name='project_issuemention', to='db.project')),
-                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL,
-                                                 related_name='issuemention_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
-                ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE,
-                                                related_name='workspace_issuemention', to='db.workspace')),
-            ],
-            options={
-                'verbose_name': 'IssueMention',
-                'verbose_name_plural': 'IssueMentions',
-                'db_table': 'issue_mentions',
-                'ordering': ('-created_at',),
-            },
-        )
-    ]

apiserver/plane/utils/analytics_plot.py

@@ -12,19 +12,19 @@ from django.db.models.functions import Coalesce, ExtractMonth, ExtractYear, Conc
 from plane.db.models import Issue
 
 
-def annotate_with_monthly_dimension(queryset, field_name):
+def annotate_with_monthly_dimension(queryset, field_name, attribute):
     # Get the year and the months
     year = ExtractYear(field_name)
     month = ExtractMonth(field_name)
     # Concat the year and month
     dimension = Concat(year, Value("-"), month, output_field=CharField())
     # Annotate the dimension
-    return queryset.annotate(dimension=dimension)
+    return queryset.annotate(**{attribute: dimension})
 
 def extract_axis(queryset, x_axis):
     # Format the dimension when the axis is in date
     if x_axis in ["created_at", "start_date", "target_date", "completed_at"]:
-        queryset = annotate_with_monthly_dimension(queryset, x_axis)
+        queryset = annotate_with_monthly_dimension(queryset, x_axis, "dimension")
         return queryset, "dimension"
     else:
         return queryset.annotate(dimension=F(x_axis)), "dimension"
@@ -47,7 +47,7 @@ def build_graph_plot(queryset, x_axis, y_axis, segment=None):
 
     # 
     if segment in ["created_at", "start_date", "target_date", "completed_at"]:
-        queryset = annotate_with_monthly_dimension(queryset, segment)
+        queryset = annotate_with_monthly_dimension(queryset, segment, "segmented")
         segment = "segmented"
 
     queryset = queryset.values(x_axis)

apiserver/plane/utils/integrations/slack.py

@@ -0,0 +1,20 @@
+import os
+import requests
+
+def slack_oauth(code):
+    SLACK_OAUTH_URL = os.environ.get("SLACK_OAUTH_URL", False)
+    SLACK_CLIENT_ID = os.environ.get("SLACK_CLIENT_ID", False)
+    SLACK_CLIENT_SECRET = os.environ.get("SLACK_CLIENT_SECRET", False)
+
+    # Oauth Slack
+    if SLACK_OAUTH_URL and SLACK_CLIENT_ID and SLACK_CLIENT_SECRET:
+        response = requests.get(
+            SLACK_OAUTH_URL,
+            params={
+                "code": code,
+                "client_id": SLACK_CLIENT_ID,
+                "client_secret": SLACK_CLIENT_SECRET,
+            },
+        )
+        return response.json()
+    return {}

packages/editor/core/package.json

@@ -2,6 +2,7 @@
   "name": "@plane/editor-core",
   "version": "0.0.1",
   "description": "Core Editor that powers Plane",
+  "private": true,
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -41,6 +42,8 @@
     "@tiptap/extension-task-list": "^2.1.7",
     "@tiptap/extension-text-style": "^2.1.11",
     "@tiptap/extension-underline": "^2.1.7",
+    "@tiptap/prosemirror-tables": "^1.1.4",
+    "jsx-dom-cjs": "^8.0.3",
     "@tiptap/pm": "^2.1.7",
     "@tiptap/react": "^2.1.7",
     "@tiptap/starter-kit": "^2.1.10",

packages/editor/core/src/index.ts

@@ -2,8 +2,11 @@
 // import "./styles/tailwind.css";
 // import "./styles/editor.css";
 
+export { isCellSelection } from "./ui/extensions/table/table/utilities/is-cell-selection";
+
 // utils
 export * from "./lib/utils";
+export * from "./ui/extensions/table/table";
 export { startImageUpload } from "./ui/plugins/upload-image";
 
 // components

packages/editor/core/src/ui/components/editor-container.tsx

@@ -7,7 +7,11 @@ interface EditorContainerProps {
   children: ReactNode;
 }
 
-export const EditorContainer = ({ editor, editorClassNames, children }: EditorContainerProps) => (
+export const EditorContainer = ({
+  editor,
+  editorClassNames,
+  children,
+}: EditorContainerProps) => (
   <div
     id="editor-container"
     onClick={() => {

packages/editor/core/src/ui/components/editor-content.tsx

@@ -1,7 +1,6 @@
 import { Editor, EditorContent } from "@tiptap/react";
 import { ReactNode } from "react";
 import { ImageResizer } from "../extensions/image/image-resize";
-import { TableMenu } from "../menus/table-menu";
 
 interface EditorContentProps {
   editor: Editor | null;
@@ -10,10 +9,8 @@ interface EditorContentProps {
 }
 
 export const EditorContentWrapper = ({ editor, editorContentCustomClassNames = '', children }: EditorContentProps) => (
-  <div className={`${editorContentCustomClassNames}`}>
-    {/* @ts-ignore */}
+  <div className={`contentEditor ${editorContentCustomClassNames}`}>
     <EditorContent editor={editor} />
-    {editor?.isEditable && <TableMenu editor={editor} />}
     {(editor?.isActive("image") && editor?.isEditable) && <ImageResizer editor={editor} />}
     {children}
   </div>

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

@@ -8,10 +8,10 @@ import TaskList from "@tiptap/extension-task-list";
 import { Markdown } from "tiptap-markdown";
 import Gapcursor from "@tiptap/extension-gapcursor";
 
-import { CustomTableCell } from "./table/table-cell";
-import { Table } from "./table";
-import { TableHeader } from "./table/table-header";
-import { TableRow } from "@tiptap/extension-table-row";
+import TableHeader from "./table/table-header/table-header";
+import Table from "./table/table";
+import TableCell from "./table/table-cell/table-cell";
+import TableRow from "./table/table-row/table-row";
 
 import ImageExtension from "./image";
 
@@ -95,7 +95,7 @@ export const CoreEditorExtensions = (
     }),
     Table,
     TableHeader,
-    CustomTableCell,
+    TableCell,
     TableRow,
     Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, false),
   ];

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

@@ -1,9 +0,0 @@
-import { Table as BaseTable } from "@tiptap/extension-table";
-
-const Table = BaseTable.configure({
-  resizable: true,
-  cellMinWidth: 100,
-  allowTableNodeSelection: true,
-});
-
-export { Table };

packages/editor/core/src/ui/extensions/table/table-cell.ts

@@ -1,32 +0,0 @@
-import { TableCell } from "@tiptap/extension-table-cell";
-
-export const CustomTableCell = TableCell.extend({
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      isHeader: {
-        default: false,
-        parseHTML: (element) => {
-          isHeader: element.tagName === "TD";
-        },
-        renderHTML: (attributes) => {
-          tag: attributes.isHeader ? "th" : "td";
-        },
-      },
-    };
-  },
-  renderHTML({ HTMLAttributes }) {
-    if (HTMLAttributes.isHeader) {
-      return [
-        "th",
-        {
-          ...HTMLAttributes,
-          class: `relative ${HTMLAttributes.class}`,
-        },
-        ["span", { class: "absolute top-0 right-0" }],
-        0,
-      ];
-    }
-    return ["td", HTMLAttributes, 0];
-  },
-});

packages/editor/core/src/ui/extensions/table/table-cell/index.ts

@@ -0,0 +1 @@
+export { default as default } from "./table-cell"

packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts

@@ -0,0 +1,58 @@
+import { mergeAttributes, Node } from "@tiptap/core"
+
+export interface TableCellOptions {
+  HTMLAttributes: Record<string, any>
+}
+
+export default Node.create<TableCellOptions>({
+  name: "tableCell",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    }
+  },
+
+  content: "paragraph+",
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1
+      },
+      rowspan: {
+        default: 1
+      },
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth")
+          const value = colwidth ? [parseInt(colwidth, 10)] : null
+
+          return value
+        }
+      },
+      background: {
+        default: "none"
+      }
+    }
+  },
+
+  tableRole: "cell",
+
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: "td" }]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "td",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        style: `background-color: ${node.attrs.background}`
+      }),
+      0
+    ]
+  }
+})

packages/editor/core/src/ui/extensions/table/table-header.ts

@@ -1,7 +0,0 @@
-import { TableHeader as BaseTableHeader } from "@tiptap/extension-table-header";
-
-const TableHeader = BaseTableHeader.extend({
-  content: "paragraph",
-});
-
-export { TableHeader };

packages/editor/core/src/ui/extensions/table/table-header/index.ts

@@ -0,0 +1 @@
+export { default as default } from "./table-header"

packages/editor/core/src/ui/extensions/table/table-header/table-header.ts

@@ -0,0 +1,57 @@
+import { mergeAttributes, Node } from "@tiptap/core"
+
+export interface TableHeaderOptions {
+  HTMLAttributes: Record<string, any>
+}
+export default Node.create<TableHeaderOptions>({
+  name: "tableHeader",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {}
+    }
+  },
+
+  content: "paragraph+",
+
+  addAttributes() {
+    return {
+      colspan: {
+        default: 1
+      },
+      rowspan: {
+        default: 1
+      },
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const colwidth = element.getAttribute("colwidth")
+          const value = colwidth ? [parseInt(colwidth, 10)] : null
+
+          return value
+        }
+      },
+      background: {
+        default: "rgb(var(--color-primary-100))"
+      }
+    }
+  },
+
+  tableRole: "header_cell",
+
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: "th" }]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    return [
+      "th",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        style: `background-color: ${node.attrs.background}`
+      }),
+      0
+    ]
+  }
+})

packages/editor/core/src/ui/extensions/table/table-row/index.ts

@@ -0,0 +1 @@
+export { default as default } from "./table-row"

packages/editor/core/src/ui/extensions/table/table-row/table-row.ts

@@ -0,0 +1,31 @@
+import { mergeAttributes, Node } from "@tiptap/core"
+
+export interface TableRowOptions {
+    HTMLAttributes: Record<string, any>
+}
+
+export default Node.create<TableRowOptions>({
+    name: "tableRow",
+
+    addOptions() {
+        return {
+            HTMLAttributes: {}
+        }
+    },
+
+    content: "(tableCell | tableHeader)*",
+
+    tableRole: "row",
+
+    parseHTML() {
+        return [{ tag: "tr" }]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "tr",
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+            0
+        ]
+    }
+})

packages/editor/core/src/ui/extensions/table/table/icons.ts

@@ -0,0 +1,55 @@
+const icons = {
+  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
+  deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M12 3c.552 0 1 .448 1 1v8c.835-.628 1.874-1 3-1 2.761 0 5 2.239 5 5s-2.239 5-5 5c-1.032 0-1.99-.313-2.787-.848L13 20c0 .552-.448 1-1 1H6c-.552 0-1-.448-1-1V4c0-.552.448-1 1-1h6zm-1 2H7v14h4V5zm8 10h-6v2h6v-2z"/></svg>`,
+  deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M20 5c.552 0 1 .448 1 1v6c0 .552-.448 1-1 1 .628.835 1 1.874 1 3 0 2.761-2.239 5-5 5s-5-2.239-5-5c0-1.126.372-2.165 1-3H4c-.552 0-1-.448-1-1V6c0-.552.448-1 1-1h16zm-7 10v2h6v-2h-6zm6-8H5v4h14V7z"/></svg>`,
+  insertLeftTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+      >
+    <path
+      d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+`,
+  insertRightTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+  >
+    <path
+      d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+`,
+  insertTopTableIcon: `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+  >
+    <path
+      d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+`,
+  insertBottomTableIcon:`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+  >
+    <path
+      d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
+      fill="rgb(var(--color-text-300))"
+    />
+  </svg>
+`,
+};
+
+export default icons;

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

@@ -0,0 +1 @@
+export { default as default } from "./table"

packages/editor/core/src/ui/extensions/table/table/table-controls.ts

@@ -0,0 +1,117 @@
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { findParentNode } from "@tiptap/core";
+import { DecorationSet, Decoration } from "@tiptap/pm/view";
+
+const key = new PluginKey("tableControls");
+
+export function tableControls() {
+  return new Plugin({
+    key,
+    state: {
+      init() {
+        return new TableControlsState();
+      },
+      apply(tr, prev) {
+        return prev.apply(tr);
+      },
+    },
+    props: {
+      handleDOMEvents: {
+        mousemove: (view, event) => {
+          const pluginState = key.getState(view.state);
+
+          if (
+            !(event.target as HTMLElement).closest(".tableWrapper") &&
+            pluginState.values.hoveredTable
+          ) {
+            return view.dispatch(
+              view.state.tr.setMeta(key, {
+                setHoveredTable: null,
+                setHoveredCell: null,
+              }),
+            );
+          }
+
+          const pos = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY,
+          });
+
+          if (!pos) return;
+
+          const table = findParentNode((node) => node.type.name === "table")(
+            TextSelection.create(view.state.doc, pos.pos),
+          );
+          const cell = findParentNode(
+            (node) =>
+              node.type.name === "tableCell" ||
+              node.type.name === "tableHeader",
+          )(TextSelection.create(view.state.doc, pos.pos));
+
+          if (!table || !cell) return;
+
+          if (pluginState.values.hoveredCell?.pos !== cell.pos) {
+            return view.dispatch(
+              view.state.tr.setMeta(key, {
+                setHoveredTable: table,
+                setHoveredCell: cell,
+              }),
+            );
+          }
+        },
+      },
+      decorations: (state) => {
+        const pluginState = key.getState(state);
+        if (!pluginState) {
+          return null;
+        }
+
+        const { hoveredTable, hoveredCell } = pluginState.values;
+        const docSize = state.doc.content.size;
+        if (hoveredTable && hoveredCell && hoveredTable.pos < docSize && hoveredCell.pos < docSize) {
+          const decorations = [
+            Decoration.node(
+              hoveredTable.pos,
+              hoveredTable.pos + hoveredTable.node.nodeSize,
+              {},
+              {
+                hoveredTable,
+                hoveredCell,
+              },
+            ),
+          ];
+
+          return DecorationSet.create(state.doc, decorations);
+        }
+
+        return null;
+      },
+    },
+  });
+}
+
+class TableControlsState {
+  values;
+
+  constructor(props = {}) {
+    this.values = {
+      hoveredTable: null,
+      hoveredCell: null,
+      ...props,
+    };
+  }
+
+  apply(tr: any) {
+    const actions = tr.getMeta(key);
+
+    if (actions?.setHoveredTable !== undefined) {
+      this.values.hoveredTable = actions.setHoveredTable;
+    }
+
+    if (actions?.setHoveredCell !== undefined) {
+      this.values.hoveredCell = actions.setHoveredCell;
+    }
+
+    return this;
+  }
+}

packages/editor/core/src/ui/extensions/table/table/table-view.tsx

@@ -0,0 +1,530 @@
+import { h } from "jsx-dom-cjs";
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { Decoration, NodeView } from "@tiptap/pm/view";
+import tippy, { Instance, Props } from "tippy.js";
+
+import { Editor } from "@tiptap/core";
+import {
+  CellSelection,
+  TableMap,
+  updateColumnsOnResize,
+} from "@tiptap/prosemirror-tables";
+
+import icons from "./icons";
+
+export function updateColumns(
+  node: ProseMirrorNode,
+  colgroup: HTMLElement,
+  table: HTMLElement,
+  cellMinWidth: number,
+  overrideCol?: number,
+  overrideValue?: any,
+) {
+  let totalWidth = 0;
+  let fixedWidth = true;
+  let nextDOM = colgroup.firstChild as HTMLElement;
+  const row = node.firstChild;
+
+  if (!row) return;
+
+  for (let i = 0, col = 0; i < row.childCount; i += 1) {
+    const { colspan, colwidth } = row.child(i).attrs;
+
+    for (let j = 0; j < colspan; j += 1, col += 1) {
+      const hasWidth =
+        overrideCol === col ? overrideValue : colwidth && colwidth[j];
+      const cssWidth = hasWidth ? `${hasWidth}px` : "";
+
+      totalWidth += hasWidth || cellMinWidth;
+
+      if (!hasWidth) {
+        fixedWidth = false;
+      }
+
+      if (!nextDOM) {
+        colgroup.appendChild(document.createElement("col")).style.width =
+          cssWidth;
+      } else {
+        if (nextDOM.style.width !== cssWidth) {
+          nextDOM.style.width = cssWidth;
+        }
+
+        nextDOM = nextDOM.nextSibling as HTMLElement;
+      }
+    }
+  }
+
+  while (nextDOM) {
+    const after = nextDOM.nextSibling;
+
+    nextDOM.parentNode?.removeChild(nextDOM);
+    nextDOM = after as HTMLElement;
+  }
+
+  if (fixedWidth) {
+    table.style.width = `${totalWidth}px`;
+    table.style.minWidth = "";
+  } else {
+    table.style.width = "";
+    table.style.minWidth = `${totalWidth}px`;
+  }
+}
+
+const defaultTippyOptions: Partial<Props> = {
+  allowHTML: true,
+  arrow: false,
+  trigger: "click",
+  animation: "scale-subtle",
+  theme: "light-border no-padding",
+  interactive: true,
+  hideOnClick: true,
+  placement: "right",
+};
+
+function setCellsBackgroundColor(editor: Editor, backgroundColor) {
+  return editor
+    .chain()
+    .focus()
+    .updateAttributes("tableCell", {
+      background: backgroundColor,
+    })
+    .updateAttributes("tableHeader", {
+      background: backgroundColor,
+    })
+    .run();
+}
+
+const columnsToolboxItems = [
+  {
+    label: "Add Column Before",
+    icon: icons.insertLeftTableIcon,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addColumnBefore().run(),
+  },
+  {
+    label: "Add Column After",
+    icon: icons.insertRightTableIcon,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addColumnAfter().run(),
+  },
+  {
+    label: "Pick Column Color",
+    icon: icons.colorPicker,
+    action: ({
+      editor,
+      triggerButton,
+      controlsContainer,
+    }: {
+      editor: Editor;
+      triggerButton: HTMLElement;
+      controlsContainer;
+    }) => {
+      createColorPickerToolbox({
+        triggerButton,
+        tippyOptions: {
+          appendTo: controlsContainer,
+        },
+        onSelectColor: (color) => setCellsBackgroundColor(editor, color),
+      });
+    },
+  },
+  {
+    label: "Delete Column",
+    icon: icons.deleteColumn,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().deleteColumn().run(),
+  },
+];
+
+const rowsToolboxItems = [
+  {
+    label: "Add Row Above",
+    icon: icons.insertTopTableIcon,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addRowBefore().run(),
+  },
+  {
+    label: "Add Row Below",
+    icon: icons.insertBottomTableIcon,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addRowAfter().run(),
+  },
+  {
+    label: "Pick Row Color",
+    icon: icons.colorPicker,
+    action: ({
+      editor,
+      triggerButton,
+      controlsContainer,
+    }: {
+      editor: Editor;
+      triggerButton: HTMLButtonElement;
+      controlsContainer:
+        | Element
+        | "parent"
+        | ((ref: Element) => Element)
+        | undefined;
+    }) => {
+      createColorPickerToolbox({
+        triggerButton,
+        tippyOptions: {
+          appendTo: controlsContainer,
+        },
+        onSelectColor: (color) => setCellsBackgroundColor(editor, color),
+      });
+    },
+  },
+  {
+    label: "Delete Row",
+    icon: icons.deleteRow,
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().deleteRow().run(),
+  },
+];
+
+function createToolbox({
+  triggerButton,
+  items,
+  tippyOptions,
+  onClickItem,
+}: {
+  triggerButton: HTMLElement;
+  items: { icon: string; label: string }[];
+  tippyOptions: any;
+  onClickItem: any;
+}): Instance<Props> {
+  const toolbox = tippy(triggerButton, {
+    content: h(
+      "div",
+      { className: "tableToolbox" },
+      items.map((item) =>
+        h(
+          "div",
+          {
+            className: "toolboxItem",
+            onClick() {
+              onClickItem(item);
+            },
+          },
+          [
+            h("div", {
+              className: "iconContainer",
+              innerHTML: item.icon,
+            }),
+            h("div", { className: "label" }, item.label),
+          ],
+        ),
+      ),
+    ),
+    ...tippyOptions,
+  });
+
+  return Array.isArray(toolbox) ? toolbox[0] : toolbox;
+}
+
+function createColorPickerToolbox({
+  triggerButton,
+  tippyOptions,
+  onSelectColor = () => {},
+}: {
+  triggerButton: HTMLElement;
+  tippyOptions: Partial<Props>;
+  onSelectColor?: (color: string) => void;
+}) {
+  const items = {
+    Default: "rgb(var(--color-primary-100))",
+    Orange: "#FFE5D1",
+    Grey: "#F1F1F1",
+    Yellow: "#FEF3C7",
+    Green: "#DCFCE7",
+    Red: "#FFDDDD",
+    Blue: "#D9E4FF",
+    Pink: "#FFE8FA",
+    Purple: "#E8DAFB",
+  };
+
+  const colorPicker = tippy(triggerButton, {
+    ...defaultTippyOptions,
+    content: h(
+      "div",
+      { className: "tableColorPickerToolbox" },
+      Object.entries(items).map(([key, value]) =>
+        h(
+          "div",
+          {
+            className: "toolboxItem",
+            onClick: () => {
+              onSelectColor(value);
+              colorPicker.hide();
+            },
+          },
+          [
+            h("div", {
+              className: "colorContainer",
+              style: {
+                backgroundColor: value,
+              },
+            }),
+            h(
+              "div",
+              {
+                className: "label",
+              },
+              key,
+            ),
+          ],
+        ),
+      ),
+    ),
+    onHidden: (instance) => {
+      instance.destroy();
+    },
+    showOnCreate: true,
+    ...tippyOptions,
+  });
+
+  return colorPicker;
+}
+
+export class TableView implements NodeView {
+  node: ProseMirrorNode;
+  cellMinWidth: number;
+  decorations: Decoration[];
+  editor: Editor;
+  getPos: () => number;
+  hoveredCell;
+  map: TableMap;
+  root: HTMLElement;
+  table: HTMLElement;
+  colgroup: HTMLElement;
+  tbody: HTMLElement;
+  rowsControl?: HTMLElement;
+  columnsControl?: HTMLElement;
+  columnsToolbox?: Instance<Props>;
+  rowsToolbox?: Instance<Props>;
+  controls?: HTMLElement;
+
+  get dom() {
+    return this.root;
+  }
+
+  get contentDOM() {
+    return this.tbody;
+  }
+
+  constructor(
+    node: ProseMirrorNode,
+    cellMinWidth: number,
+    decorations: Decoration[],
+    editor: Editor,
+    getPos: () => number,
+  ) {
+    this.node = node;
+    this.cellMinWidth = cellMinWidth;
+    this.decorations = decorations;
+    this.editor = editor;
+    this.getPos = getPos;
+    this.hoveredCell = null;
+    this.map = TableMap.get(node);
+
+    if (editor.isEditable) {
+      this.rowsControl = h(
+        "div",
+        { className: "rowsControl" },
+        h("button", {
+          onClick: () => this.selectRow(),
+        }),
+      );
+
+      this.columnsControl = h(
+        "div",
+        { className: "columnsControl" },
+        h("button", {
+          onClick: () => this.selectColumn(),
+        }),
+      );
+
+      this.controls = h(
+        "div",
+        { className: "tableControls", contentEditable: "false" },
+        this.rowsControl,
+        this.columnsControl,
+      );
+
+      this.columnsToolbox = createToolbox({
+        triggerButton: this.columnsControl.querySelector("button"),
+        items: columnsToolboxItems,
+        tippyOptions: {
+          ...defaultTippyOptions,
+          appendTo: this.controls,
+        },
+        onClickItem: (item) => {
+          item.action({
+            editor: this.editor,
+            triggerButton: this.columnsControl?.firstElementChild,
+            controlsContainer: this.controls,
+          });
+          this.columnsToolbox?.hide();
+        },
+      });
+
+      this.rowsToolbox = createToolbox({
+        triggerButton: this.rowsControl.firstElementChild,
+        items: rowsToolboxItems,
+        tippyOptions: {
+          ...defaultTippyOptions,
+          appendTo: this.controls,
+        },
+        onClickItem: (item) => {
+          item.action({
+            editor: this.editor,
+            triggerButton: this.rowsControl?.firstElementChild,
+            controlsContainer: this.controls,
+          });
+          this.rowsToolbox?.hide();
+        },
+      });
+    }
+
+    // Table
+
+    this.colgroup = h(
+      "colgroup",
+      null,
+      Array.from({ length: this.map.width }, () => 1).map(() => h("col")),
+    );
+    this.tbody = h("tbody");
+    this.table = h("table", null, this.colgroup, this.tbody);
+
+    this.root = h(
+      "div",
+      {
+        className: "tableWrapper controls--disabled",
+      },
+      this.controls,
+      this.table,
+    );
+
+    this.render();
+  }
+
+  update(node: ProseMirrorNode, decorations) {
+    if (node.type !== this.node.type) {
+      return false;
+    }
+
+    this.node = node;
+    this.decorations = decorations;
+    this.map = TableMap.get(this.node);
+
+    if (this.editor.isEditable) {
+      this.updateControls();
+    }
+
+    this.render();
+
+    return true;
+  }
+
+  render() {
+    if (this.colgroup.children.length !== this.map.width) {
+      const cols = Array.from({ length: this.map.width }, () => 1).map(() =>
+        h("col"),
+      );
+      this.colgroup.replaceChildren(...cols);
+    }
+
+    updateColumnsOnResize(
+      this.node,
+      this.colgroup,
+      this.table,
+      this.cellMinWidth,
+    );
+  }
+
+  ignoreMutation() {
+    return true;
+  }
+
+  updateControls() {
+    const { hoveredTable: table, hoveredCell: cell } = Object.values(
+      this.decorations,
+    ).reduce(
+      (acc, curr) => {
+        if (curr.spec.hoveredCell !== undefined) {
+          acc["hoveredCell"] = curr.spec.hoveredCell;
+        }
+
+        if (curr.spec.hoveredTable !== undefined) {
+          acc["hoveredTable"] = curr.spec.hoveredTable;
+        }
+        return acc;
+      },
+      {} as Record<string, HTMLElement>,
+    ) as any;
+
+    if (table === undefined || cell === undefined) {
+      return this.root.classList.add("controls--disabled");
+    }
+
+    this.root.classList.remove("controls--disabled");
+    this.hoveredCell = cell;
+
+    const cellDom = this.editor.view.nodeDOM(cell.pos) as HTMLElement;
+
+    const tableRect = this.table.getBoundingClientRect();
+    const cellRect = cellDom.getBoundingClientRect();
+
+    this.columnsControl.style.left = `${
+      cellRect.left - tableRect.left - this.table.parentElement!.scrollLeft
+    }px`;
+    this.columnsControl.style.width = `${cellRect.width}px`;
+
+    this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`;
+    this.rowsControl.style.height = `${cellRect.height}px`;
+  }
+
+  selectColumn() {
+    if (!this.hoveredCell) return;
+
+    const colIndex = this.map.colCount(
+      this.hoveredCell.pos - (this.getPos() + 1),
+    );
+    const anchorCellPos = this.hoveredCell.pos;
+    const headCellPos =
+      this.map.map[colIndex + this.map.width * (this.map.height - 1)] +
+      (this.getPos() + 1);
+
+    const cellSelection = CellSelection.create(
+      this.editor.view.state.doc,
+      anchorCellPos,
+      headCellPos,
+    );
+    this.editor.view.dispatch(
+      // @ts-ignore
+      this.editor.state.tr.setSelection(cellSelection),
+    );
+  }
+
+  selectRow() {
+    if (!this.hoveredCell) return;
+
+    const anchorCellPos = this.hoveredCell.pos;
+    const anchorCellIndex = this.map.map.indexOf(
+      anchorCellPos - (this.getPos() + 1),
+    );
+    const headCellPos =
+      this.map.map[anchorCellIndex + (this.map.width - 1)] +
+      (this.getPos() + 1);
+
+    const cellSelection = CellSelection.create(
+      this.editor.state.doc,
+      anchorCellPos,
+      headCellPos,
+    );
+    this.editor.view.dispatch(
+      // @ts-ignore
+      this.editor.view.state.tr.setSelection(cellSelection),
+    );
+  }
+}

packages/editor/core/src/ui/extensions/table/table/table.ts

@@ -0,0 +1,298 @@
+import { TextSelection } from "@tiptap/pm/state"
+
+import { callOrReturn, getExtensionField, mergeAttributes, Node, ParentConfig } from "@tiptap/core"
+import {
+    addColumnAfter,
+    addColumnBefore,
+    addRowAfter,
+    addRowBefore,
+    CellSelection,
+    columnResizing,
+    deleteColumn,
+    deleteRow,
+    deleteTable,
+    fixTables,
+    goToNextCell,
+    mergeCells,
+    setCellAttr,
+    splitCell,
+    tableEditing,
+    toggleHeader,
+    toggleHeaderCell
+} from "@tiptap/prosemirror-tables"
+
+import { tableControls } from "./table-controls"
+import { TableView } from "./table-view"
+import { createTable } from "./utilities/create-table"
+import { deleteTableWhenAllCellsSelected } from "./utilities/delete-table-when-all-cells-selected"
+
+export interface TableOptions {
+    HTMLAttributes: Record<string, any>
+    resizable: boolean
+    handleWidth: number
+    cellMinWidth: number
+    lastColumnResizable: boolean
+    allowTableNodeSelection: boolean
+}
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        table: {
+            insertTable: (options?: {
+                rows?: number
+                cols?: number
+                withHeaderRow?: boolean
+            }) => ReturnType
+            addColumnBefore: () => ReturnType
+            addColumnAfter: () => ReturnType
+            deleteColumn: () => ReturnType
+            addRowBefore: () => ReturnType
+            addRowAfter: () => ReturnType
+            deleteRow: () => ReturnType
+            deleteTable: () => ReturnType
+            mergeCells: () => ReturnType
+            splitCell: () => ReturnType
+            toggleHeaderColumn: () => ReturnType
+            toggleHeaderRow: () => ReturnType
+            toggleHeaderCell: () => ReturnType
+            mergeOrSplit: () => ReturnType
+            setCellAttribute: (name: string, value: any) => ReturnType
+            goToNextCell: () => ReturnType
+            goToPreviousCell: () => ReturnType
+            fixTables: () => ReturnType
+            setCellSelection: (position: {
+                anchorCell: number
+                headCell?: number
+            }) => ReturnType
+        }
+    }
+
+    interface NodeConfig<Options, Storage> {
+        tableRole?:
+            | string
+            | ((this: {
+                  name: string
+                  options: Options
+                  storage: Storage
+                  parent: ParentConfig<NodeConfig<Options>>["tableRole"]
+              }) => string)
+    }
+}
+
+export default Node.create({
+    name: "table",
+
+    addOptions() {
+        return {
+            HTMLAttributes: {},
+            resizable: true,
+            handleWidth: 5,
+            cellMinWidth: 100,
+            lastColumnResizable: true,
+            allowTableNodeSelection: true
+        }
+    },
+
+    content: "tableRow+",
+
+    tableRole: "table",
+
+    isolating: true,
+
+    group: "block",
+
+    allowGapCursor: false,
+
+    parseHTML() {
+        return [{ tag: "table" }]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "table",
+            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+            ["tbody", 0]
+        ]
+    },
+
+    addCommands() {
+        return {
+            insertTable:
+                ({ rows = 3, cols = 3, withHeaderRow = true} = {}) =>
+                ({ tr, dispatch, editor }) => {
+                    const node = createTable(
+                        editor.schema,
+                        rows,
+                        cols,
+                        withHeaderRow
+                    )
+
+                    if (dispatch) {
+                        const offset = tr.selection.anchor + 1
+
+                        tr.replaceSelectionWith(node)
+                            .scrollIntoView()
+                            .setSelection(
+                                TextSelection.near(tr.doc.resolve(offset))
+                            )
+                    }
+
+                    return true
+                },
+            addColumnBefore:
+                () =>
+                ({ state, dispatch }) => addColumnBefore(state, dispatch),
+            addColumnAfter:
+                () =>
+                ({ state, dispatch }) => addColumnAfter(state, dispatch),
+            deleteColumn:
+                () =>
+                ({ state, dispatch }) => deleteColumn(state, dispatch),
+            addRowBefore:
+                () =>
+                ({ state, dispatch }) => addRowBefore(state, dispatch),
+            addRowAfter:
+                () =>
+                ({ state, dispatch }) => addRowAfter(state, dispatch),
+            deleteRow:
+                () =>
+                ({ state, dispatch }) => deleteRow(state, dispatch),
+            deleteTable:
+                () =>
+                ({ state, dispatch }) => deleteTable(state, dispatch),
+            mergeCells:
+                () =>
+                ({ state, dispatch }) => mergeCells(state, dispatch),
+            splitCell:
+                () =>
+                ({ state, dispatch }) => splitCell(state, dispatch),
+            toggleHeaderColumn:
+                () =>
+                ({ state, dispatch }) => toggleHeader("column")(state, dispatch),
+            toggleHeaderRow:
+                () =>
+                ({ state, dispatch }) => toggleHeader("row")(state, dispatch),
+            toggleHeaderCell:
+                () =>
+                ({ state, dispatch }) => toggleHeaderCell(state, dispatch),
+            mergeOrSplit:
+                () =>
+                ({ state, dispatch }) => {
+                    if (mergeCells(state, dispatch)) {
+                        return true
+                    }
+
+                    return splitCell(state, dispatch)
+                },
+            setCellAttribute:
+                (name, value) =>
+                ({ state, dispatch }) => setCellAttr(name, value)(state, dispatch),
+            goToNextCell:
+                () =>
+                ({ state, dispatch }) => goToNextCell(1)(state, dispatch),
+            goToPreviousCell:
+                () =>
+                ({ state, dispatch }) => goToNextCell(-1)(state, dispatch),
+            fixTables:
+                () =>
+                ({ state, dispatch }) => {
+                    if (dispatch) {
+                        fixTables(state)
+                    }
+
+                    return true
+                },
+            setCellSelection:
+                (position) =>
+                ({ tr, dispatch }) => {
+                    if (dispatch) {
+                        const selection = CellSelection.create(
+                            tr.doc,
+                            position.anchorCell,
+                            position.headCell
+                        )
+
+                        // @ts-ignore
+                        tr.setSelection(selection)
+                    }
+
+                    return true
+                }
+        }
+    },
+
+    addKeyboardShortcuts() {
+        return {
+            Tab: () => {
+                if (this.editor.commands.goToNextCell()) {
+                    return true
+                }
+
+                if (!this.editor.can().addRowAfter()) {
+                    return false
+                }
+
+                return this.editor.chain().addRowAfter().goToNextCell().run()
+            },
+            "Shift-Tab": () => this.editor.commands.goToPreviousCell(),
+            Backspace: deleteTableWhenAllCellsSelected,
+            "Mod-Backspace": deleteTableWhenAllCellsSelected,
+            Delete: deleteTableWhenAllCellsSelected,
+            "Mod-Delete": deleteTableWhenAllCellsSelected
+        }
+    },
+
+    addNodeView() {
+        return ({ editor, getPos, node, decorations }) => {
+            const { cellMinWidth } = this.options
+
+            return new TableView(
+                node,
+                cellMinWidth,
+                decorations,
+                editor,
+                getPos as () => number
+            )
+        }
+    },
+
+    addProseMirrorPlugins() {
+        const isResizable = this.options.resizable && this.editor.isEditable
+
+        const plugins = [
+            tableEditing({
+                allowTableNodeSelection: this.options.allowTableNodeSelection
+            }),
+            tableControls()
+        ]
+
+        if (isResizable) {
+            plugins.unshift(
+                columnResizing({
+                    handleWidth: this.options.handleWidth,
+                    cellMinWidth: this.options.cellMinWidth,
+                    // View: TableView,
+
+                    // @ts-ignore
+                    lastColumnResizable: this.options.lastColumnResizable
+                })
+            )
+        }
+
+        return plugins
+    },
+
+    extendNodeSchema(extension) {
+        const context = {
+            name: extension.name,
+            options: extension.options,
+            storage: extension.storage
+        }
+
+        return {
+            tableRole: callOrReturn(
+                getExtensionField(extension, "tableRole", context)
+            )
+        }
+    }
+})

packages/editor/core/src/ui/extensions/table/table/utilities/create-cell.ts

@@ -0,0 +1,12 @@
+import { Fragment, Node as ProsemirrorNode, NodeType } from "prosemirror-model"
+
+export function createCell(
+    cellType: NodeType,
+    cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
+): ProsemirrorNode | null | undefined {
+    if (cellContent) {
+        return cellType.createChecked(null, cellContent)
+    }
+
+    return cellType.createAndFill()
+}

packages/editor/core/src/ui/extensions/table/table/utilities/create-table.ts

@@ -0,0 +1,45 @@
+import { Fragment, Node as ProsemirrorNode, Schema } from "@tiptap/pm/model"
+
+import { createCell } from "./create-cell"
+import { getTableNodeTypes } from "./get-table-node-types"
+
+export function createTable(
+    schema: Schema,
+    rowsCount: number,
+    colsCount: number,
+    withHeaderRow: boolean,
+    cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
+): ProsemirrorNode {
+    const types = getTableNodeTypes(schema)
+    const headerCells: ProsemirrorNode[] = []
+    const cells: ProsemirrorNode[] = []
+
+    for (let index = 0; index < colsCount; index += 1) {
+        const cell = createCell(types.cell, cellContent)
+
+        if (cell) {
+            cells.push(cell)
+        }
+
+        if (withHeaderRow) {
+            const headerCell = createCell(types.header_cell, cellContent)
+
+            if (headerCell) {
+                headerCells.push(headerCell)
+            }
+        }
+    }
+
+    const rows: ProsemirrorNode[] = []
+
+    for (let index = 0; index < rowsCount; index += 1) {
+        rows.push(
+            types.row.createChecked(
+                null,
+                withHeaderRow && index === 0 ? headerCells : cells
+            )
+        )
+    }
+
+    return types.table.createChecked(null, rows)
+}

packages/editor/core/src/ui/extensions/table/table/utilities/delete-table-when-all-cells-selected.ts

@@ -0,0 +1,39 @@
+import { findParentNodeClosestToPos, KeyboardShortcutCommand } from "@tiptap/core"
+
+import { isCellSelection } from "./is-cell-selection"
+
+export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({
+    editor
+}) => {
+    const { selection } = editor.state
+
+    if (!isCellSelection(selection)) {
+        return false
+    }
+
+    let cellCount = 0
+    const table = findParentNodeClosestToPos(
+        selection.ranges[0].$from,
+        (node) => node.type.name === "table"
+    )
+
+    table?.node.descendants((node) => {
+        if (node.type.name === "table") {
+            return false
+        }
+
+        if (["tableCell", "tableHeader"].includes(node.type.name)) {
+            cellCount += 1
+        }
+    })
+
+    const allCellsSelected = cellCount === selection.ranges.length
+
+    if (!allCellsSelected) {
+        return false
+    }
+
+    editor.commands.deleteTable()
+
+    return true
+}

packages/editor/core/src/ui/extensions/table/table/utilities/get-table-node-types.ts

@@ -0,0 +1,21 @@
+import { NodeType, Schema } from "prosemirror-model"
+
+export function getTableNodeTypes(schema: Schema): { [key: string]: NodeType } {
+    if (schema.cached.tableNodeTypes) {
+        return schema.cached.tableNodeTypes
+    }
+
+    const roles: { [key: string]: NodeType } = {}
+
+    Object.keys(schema.nodes).forEach((type) => {
+        const nodeType = schema.nodes[type]
+
+        if (nodeType.spec.tableRole) {
+            roles[nodeType.spec.tableRole] = nodeType
+        }
+    })
+
+    schema.cached.tableNodeTypes = roles
+
+    return roles
+}

packages/editor/core/src/ui/extensions/table/table/utilities/is-cell-selection.ts

@@ -0,0 +1,5 @@
+import { CellSelection } from "@tiptap/prosemirror-tables"
+
+export function isCellSelection(value: unknown): value is CellSelection {
+    return value instanceof CellSelection
+}

packages/editor/core/src/ui/index.tsx

@@ -1,14 +1,14 @@
-"use client"
-import * as React from 'react';
+"use client";
+import * as React from "react";
 import { Extension } from "@tiptap/react";
-import { UploadImage } from '../types/upload-image';
-import { DeleteImage } from '../types/delete-image';
-import { getEditorClassNames } from '../lib/utils';
-import { EditorProps } from '@tiptap/pm/view';
-import { useEditor } from './hooks/useEditor';
-import { EditorContainer } from '../ui/components/editor-container';
-import { EditorContentWrapper } from '../ui/components/editor-content';
-import { IMentionSuggestion } from '../types/mention-suggestion';
+import { UploadImage } from "../types/upload-image";
+import { DeleteImage } from "../types/delete-image";
+import { getEditorClassNames } from "../lib/utils";
+import { EditorProps } from "@tiptap/pm/view";
+import { useEditor } from "./hooks/useEditor";
+import { EditorContainer } from "../ui/components/editor-container";
+import { EditorContentWrapper } from "../ui/components/editor-content";
+import { IMentionSuggestion } from "../types/mention-suggestion";
 
 interface ICoreEditor {
   value: string;
@@ -19,7 +19,9 @@ interface ICoreEditor {
   customClassName?: string;
   editorContentCustomClassNames?: string;
   onChange?: (json: any, html: string) => void;
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
   setShouldShowAlert?: (showAlert: boolean) => void;
   editable?: boolean;
   forwardedRef?: any;
@@ -72,22 +74,29 @@ const CoreEditor = ({
     forwardedRef,
   });
 
-  const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });
 
   if (!editor) return null;
 
   return (
     <EditorContainer editor={editor} editorClassNames={editorClassNames}>
       <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
       </div>
-    </EditorContainer >
+    </EditorContainer>
   );
 };
 
-const CoreEditorWithRef = React.forwardRef<EditorHandle, ICoreEditor>((props, ref) => (
-  <CoreEditor {...props} forwardedRef={ref} />
-));
+const CoreEditorWithRef = React.forwardRef<EditorHandle, ICoreEditor>(
+  (props, ref) => <CoreEditor {...props} forwardedRef={ref} />,
+);
 
 CoreEditorWithRef.displayName = "CoreEditorWithRef";
 

packages/editor/core/src/ui/mentions/MentionList.tsx

@@ -1,111 +1,120 @@
-import { Editor } from '@tiptap/react';
+import { Editor } from "@tiptap/react";
 import React, {
   forwardRef,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useState,
-} from 'react'
+} from "react";
 
-import { IMentionSuggestion } from '../../types/mention-suggestion';
+import { IMentionSuggestion } from "../../types/mention-suggestion";
 
 interface MentionListProps {
   items: IMentionSuggestion[];
-  command: (item: { id: string, label: string, target: string, redirect_uri: string }) => void;
+  command: (item: {
+    id: string;
+    label: string;
+    target: string;
+    redirect_uri: string;
+  }) => void;
   editor: Editor;
 }
 
 // eslint-disable-next-line react/display-name
 const MentionList = forwardRef((props: MentionListProps, ref) => {
-  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
   const selectItem = (index: number) => {
-    const item = props.items[index]
+    const item = props.items[index];
 
     if (item) {
-      props.command({ id: item.id, label: item.title, target: "users", redirect_uri: item.redirect_uri })
+      props.command({
+        id: item.id,
+        label: item.title,
+        target: "users",
+        redirect_uri: item.redirect_uri,
+      });
     }
-  }
+  };
 
   const upHandler = () => {
-    setSelectedIndex(((selectedIndex + props.items.length) - 1) % props.items.length)
-  }
+    setSelectedIndex(
+      (selectedIndex + props.items.length - 1) % props.items.length,
+    );
+  };
 
   const downHandler = () => {
-    setSelectedIndex((selectedIndex + 1) % props.items.length)
-  }
+    setSelectedIndex((selectedIndex + 1) % props.items.length);
+  };
 
   const enterHandler = () => {
-    selectItem(selectedIndex)
-  }
+    selectItem(selectedIndex);
+  };
 
   useEffect(() => {
-    setSelectedIndex(0)
-  }, [props.items])
+    setSelectedIndex(0);
+  }, [props.items]);
 
   useImperativeHandle(ref, () => ({
     onKeyDown: ({ event }: { event: KeyboardEvent }) => {
-      if (event.key === 'ArrowUp') {
-        upHandler()
-        return true
+      if (event.key === "ArrowUp") {
+        upHandler();
+        return true;
       }
 
-      if (event.key === 'ArrowDown') {
-        downHandler()
-        return true
+      if (event.key === "ArrowDown") {
+        downHandler();
+        return true;
       }
 
-      if (event.key === 'Enter') {
-        enterHandler()
-        return true
+      if (event.key === "Enter") {
+        enterHandler();
+        return true;
       }
 
-      return false
+      return false;
     },
-  }))
+  }));
 
-  return (
-    props.items && props.items.length !== 0 ? <div className="items">
-      { props.items.length ? props.items.map((item, index) => (
-            <div className={`item ${index === selectedIndex ? 'is-selected' : ''} w-72 flex items-center p-3 rounded shadow-md`} onClick={() => selectItem(index)}>
-                {item.avatar ? <div
-                  className={`rounded border-[0.5px] ${index ? "border-custom-border-200 bg-custom-background-100" : "border-transparent"
-                    }`}
-                  style={{
-                    height: "24px",
-                    width: "24px",
-                  }}
-                >
-                  <img
-                    src={item.avatar}
-                    className="absolute top-0 left-0 h-full w-full object-cover rounded"
-                    alt={item.title}
-                  />
-                </div> :
-                  <div
-                    className="grid place-items-center text-xs capitalize text-white rounded bg-gray-700  border-[0.5px] border-custom-border-200"
-                    style={{
-                      height: "24px",
-                      width: "24px",
-                      fontSize: "12px",
-                    }}
-                  >
-                    {item.title.charAt(0)}
-                  </div>
-                }
-              <div className="ml-7 space-y-1">
-                <p className="text-sm font-medium leading-none">{item.title}</p>
-                <p className="text-xs text-gray-400">
-                  {item.subtitle}
-                </p>
-              </div>
+  return props.items && props.items.length !== 0 ? (
+    <div className="mentions absolute max-h-40 bg-custom-background-100 rounded-md shadow-custom-shadow-sm text-custom-text-300 text-sm overflow-y-auto w-48 p-1 space-y-0.5">
+      {props.items.length ? (
+        props.items.map((item, index) => (
+          <div
+            key={item.id}
+            className={`flex items-center gap-2 rounded p-1 hover:bg-custom-background-80 cursor-pointer ${
+              index === selectedIndex ? "bg-custom-background-80" : ""
+            }`}
+            onClick={() => selectItem(index)}
+          >
+            <div className="flex-shrink-0 h-4 w-4 grid place-items-center overflow-hidden">
+              {item.avatar && item.avatar.trim() !== "" ? (
+                <img
+                  src={item.avatar}
+                  className="h-full w-full object-cover rounded-sm"
+                  alt={item.title}
+                />
+              ) : (
+                <div className="h-full w-full grid place-items-center text-xs capitalize text-white rounded-sm bg-gray-700">
+                  {item.title[0]}
+                </div>
+              )}
             </div>
-          )
-        )
-        : <div className="item">No result</div>
-      }
-    </div> : <></>
-  )
-})
+            <div className="flex-grow space-y-1 truncate">
+              <p className="text-sm font-medium truncate">{item.title}</p>
+              {/* <p className="text-xs text-gray-400">{item.subtitle}</p> */}
+            </div>
+          </div>
+        ))
+      ) : (
+        <div className="item">No result</div>
+      )}
+    </div>
+  ) : (
+    <></>
+  );
+});
 
-MentionList.displayName = "MentionList"
+MentionList.displayName = "MentionList";
 
-export default MentionList
+export default MentionList;

packages/editor/core/src/ui/mentions/custom.tsx

@@ -9,7 +9,6 @@ export interface CustomMentionOptions extends MentionOptions {
 }
 
 export const CustomMention = Mention.extend<CustomMentionOptions>({
-
   addAttributes() {
     return {
       id: {
@@ -54,6 +53,3 @@ export const CustomMention = Mention.extend<CustomMentionOptions>({
     return ['mention-component', mergeAttributes(HTMLAttributes)]
   },
 })
-
-
-

packages/editor/core/src/ui/mentions/mentionNodeView.tsx

@@ -1,32 +1,41 @@
 /* eslint-disable react/display-name */
 // @ts-nocheck
-import { NodeViewWrapper } from '@tiptap/react'
-import { cn } from '../../lib/utils'
-import React from 'react'
-import { useRouter } from 'next/router'
-import { IMentionHighlight } from '../../types/mention-suggestion'
+import { NodeViewWrapper } from "@tiptap/react";
+import { cn } from "../../lib/utils";
+import { useRouter } from "next/router";
+import { IMentionHighlight } from "../../types/mention-suggestion";
 
 // eslint-disable-next-line import/no-anonymous-default-export
-export default props => {
-
-  const router = useRouter()
-  const highlights = props.extension.options.mentionHighlights as IMentionHighlight[]
+export default (props) => {
+  const router = useRouter();
+  const highlights = props.extension.options
+    .mentionHighlights as IMentionHighlight[];
 
   const handleClick = () => {
-    if (!props.extension.options.readonly){
-      router.push(props.node.attrs.redirect_uri)
+    if (!props.extension.options.readonly) {
+      router.push(props.node.attrs.redirect_uri);
     }
-  }
+  };
 
   return (
-    <NodeViewWrapper className="w-fit inline mention-component" >
-      <span className={cn("px-1 py-0.5 inline rounded-md font-bold bg-custom-primary-500 mention", {
-        "text-[#D9C942] bg-[#544D3B] hover:bg-[#544D3B]" : highlights ? highlights.includes(props.node.attrs.id) : false,
-        "cursor-pointer" : !props.extension.options.readonly,
-        "hover:bg-custom-primary-300" : !props.extension.options.readonly && !highlights.includes(props.node.attrs.id)
-      })} onClick={handleClick} data-mention-target={props.node.attrs.target} data-mention-id={props.node.attrs.id}>@{ props.node.attrs.label }</span>
+    <NodeViewWrapper className="w-fit inline mention-component">
+      <span
+        className={cn(
+          "px-1 py-0.5 bg-custom-primary-100/20 text-custom-primary-100 rounded font-medium mention",
+          {
+            "text-yellow-500 bg-yellow-500/20": highlights
+              ? highlights.includes(props.node.attrs.id)
+              : false,
+            "cursor-pointer": !props.extension.options.readonly,
+            // "hover:bg-custom-primary-300" : !props.extension.options.readonly && !highlights.includes(props.node.attrs.id)
+          },
+        )}
+        onClick={handleClick}
+        data-mention-target={props.node.attrs.target}
+        data-mention-id={props.node.attrs.id}
+      >
+        @{props.node.attrs.label}
+      </span>
     </NodeViewWrapper>
-  )
-}
-
-
+  );
+};

packages/editor/core/src/ui/mentions/suggestion.ts

@@ -3,7 +3,7 @@ import { Editor } from "@tiptap/core";
 import tippy from 'tippy.js'
 
 import MentionList from './MentionList'
-import { IMentionSuggestion } from './mentions';
+import { IMentionSuggestion } from '../../types/mention-suggestion';
 
 const Suggestion = (suggestions: IMentionSuggestion[]) => ({
   items: ({ query }: { query: string }) => suggestions.filter(suggestion => suggestion.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5),

packages/editor/core/src/ui/menus/menu-items/index.tsx

@@ -1,7 +1,37 @@
-import { BoldIcon, Heading1, CheckSquare, Heading2, Heading3, QuoteIcon, ImageIcon, TableIcon, ListIcon, ListOrderedIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeIcon } from "lucide-react";
+import {
+  BoldIcon,
+  Heading1,
+  CheckSquare,
+  Heading2,
+  Heading3,
+  QuoteIcon,
+  ImageIcon,
+  TableIcon,
+  ListIcon,
+  ListOrderedIcon,
+  ItalicIcon,
+  UnderlineIcon,
+  StrikethroughIcon,
+  CodeIcon,
+} from "lucide-react";
 import { Editor } from "@tiptap/react";
 import { UploadImage } from "../../../types/upload-image";
-import { insertImageCommand, insertTableCommand, toggleBlockquote, toggleBold, toggleBulletList, toggleCode, toggleHeadingOne, toggleHeadingThree, toggleHeadingTwo, toggleItalic, toggleOrderedList, toggleStrike, toggleTaskList, toggleUnderline, } from "../../../lib/editor-commands";
+import {
+  insertImageCommand,
+  insertTableCommand,
+  toggleBlockquote,
+  toggleBold,
+  toggleBulletList,
+  toggleCode,
+  toggleHeadingOne,
+  toggleHeadingThree,
+  toggleHeadingTwo,
+  toggleItalic,
+  toggleOrderedList,
+  toggleStrike,
+  toggleTaskList,
+  toggleUnderline,
+} from "../../../lib/editor-commands";
 
 export interface EditorMenuItem {
   name: string;
@@ -15,95 +45,101 @@ export const HeadingOneItem = (editor: Editor): EditorMenuItem => ({
   isActive: () => editor.isActive("heading", { level: 1 }),
   command: () => toggleHeadingOne(editor),
   icon: Heading1,
-})
+});
 
 export const HeadingTwoItem = (editor: Editor): EditorMenuItem => ({
   name: "H2",
   isActive: () => editor.isActive("heading", { level: 2 }),
   command: () => toggleHeadingTwo(editor),
   icon: Heading2,
-})
+});
 
 export const HeadingThreeItem = (editor: Editor): EditorMenuItem => ({
   name: "H3",
   isActive: () => editor.isActive("heading", { level: 3 }),
   command: () => toggleHeadingThree(editor),
   icon: Heading3,
-})
+});
 
 export const BoldItem = (editor: Editor): EditorMenuItem => ({
   name: "bold",
   isActive: () => editor?.isActive("bold"),
   command: () => toggleBold(editor),
   icon: BoldIcon,
-})
+});
 
 export const ItalicItem = (editor: Editor): EditorMenuItem => ({
   name: "italic",
   isActive: () => editor?.isActive("italic"),
   command: () => toggleItalic(editor),
   icon: ItalicIcon,
-})
+});
 
 export const UnderLineItem = (editor: Editor): EditorMenuItem => ({
   name: "underline",
   isActive: () => editor?.isActive("underline"),
   command: () => toggleUnderline(editor),
   icon: UnderlineIcon,
-})
+});
 
 export const StrikeThroughItem = (editor: Editor): EditorMenuItem => ({
   name: "strike",
   isActive: () => editor?.isActive("strike"),
   command: () => toggleStrike(editor),
   icon: StrikethroughIcon,
-})
+});
 
 export const CodeItem = (editor: Editor): EditorMenuItem => ({
   name: "code",
   isActive: () => editor?.isActive("code"),
   command: () => toggleCode(editor),
   icon: CodeIcon,
-})
+});
 
 export const BulletListItem = (editor: Editor): EditorMenuItem => ({
   name: "bullet-list",
   isActive: () => editor?.isActive("bulletList"),
   command: () => toggleBulletList(editor),
   icon: ListIcon,
-})
+});
 
 export const TodoListItem = (editor: Editor): EditorMenuItem => ({
   name: "To-do List",
   isActive: () => editor.isActive("taskItem"),
   command: () => toggleTaskList(editor),
   icon: CheckSquare,
-})
+});
 
 export const NumberedListItem = (editor: Editor): EditorMenuItem => ({
   name: "ordered-list",
   isActive: () => editor?.isActive("orderedList"),
   command: () => toggleOrderedList(editor),
-  icon: ListOrderedIcon
-})
+  icon: ListOrderedIcon,
+});
 
 export const QuoteItem = (editor: Editor): EditorMenuItem => ({
   name: "quote",
   isActive: () => editor?.isActive("quote"),
   command: () => toggleBlockquote(editor),
-  icon: QuoteIcon
-})
+  icon: QuoteIcon,
+});
 
 export const TableItem = (editor: Editor): EditorMenuItem => ({
-  name: "quote",
+  name: "table",
   isActive: () => editor?.isActive("table"),
   command: () => insertTableCommand(editor),
-  icon: TableIcon
-})
+  icon: TableIcon,
+});
 
-export const ImageItem = (editor: Editor, uploadFile: UploadImage, setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void): EditorMenuItem => ({
+export const ImageItem = (
+  editor: Editor,
+  uploadFile: UploadImage,
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
+): EditorMenuItem => ({
   name: "image",
   isActive: () => editor?.isActive("image"),
   command: () => insertImageCommand(editor, uploadFile, setIsSubmitting),
   icon: ImageIcon,
-})
+});

packages/editor/core/src/ui/menus/table-menu/index.tsx

@@ -1,120 +0,0 @@
-import { useState, useEffect } from "react";
-import { Rows, Columns, ToggleRight } from "lucide-react";
-import InsertLeftTableIcon from "./InsertLeftTableIcon";
-import InsertRightTableIcon from "./InsertRightTableIcon";
-import InsertTopTableIcon from "./InsertTopTableIcon";
-import InsertBottomTableIcon from "./InsertBottomTableIcon";
-import { cn, findTableAncestor } from "../../../lib/utils";
-import { Tooltip } from "./tooltip";
-
-interface TableMenuItem {
-  command: () => void;
-  icon: any;
-  key: string;
-  name: string;
-}
-
-
-
-export const TableMenu = ({ editor }: { editor: any }) => {
-  const [tableLocation, setTableLocation] = useState({ bottom: 0, left: 0 });
-  const isOpen = editor?.isActive("table");
-
-  const items: TableMenuItem[] = [
-    {
-      command: () => editor.chain().focus().addColumnBefore().run(),
-      icon: InsertLeftTableIcon,
-      key: "insert-column-left",
-      name: "Insert 1 column left",
-    },
-    {
-      command: () => editor.chain().focus().addColumnAfter().run(),
-      icon: InsertRightTableIcon,
-      key: "insert-column-right",
-      name: "Insert 1 column right",
-    },
-    {
-      command: () => editor.chain().focus().addRowBefore().run(),
-      icon: InsertTopTableIcon,
-      key: "insert-row-above",
-      name: "Insert 1 row above",
-    },
-    {
-      command: () => editor.chain().focus().addRowAfter().run(),
-      icon: InsertBottomTableIcon,
-      key: "insert-row-below",
-      name: "Insert 1 row below",
-    },
-    {
-      command: () => editor.chain().focus().deleteColumn().run(),
-      icon: Columns,
-      key: "delete-column",
-      name: "Delete column",
-    },
-    {
-      command: () => editor.chain().focus().deleteRow().run(),
-      icon: Rows,
-      key: "delete-row",
-      name: "Delete row",
-    },
-    {
-      command: () => editor.chain().focus().toggleHeaderRow().run(),
-      icon: ToggleRight,
-      key: "toggle-header-row",
-      name: "Toggle header row",
-    },
-  ];
-
-  useEffect(() => {
-    if (!window) return;
-
-    const handleWindowClick = () => {
-      const selection: any = window?.getSelection();
-
-      if (selection.rangeCount !== 0) {
-        const range = selection.getRangeAt(0);
-        const tableNode = findTableAncestor(range.startContainer);
-
-        if (tableNode) {
-          const tableRect = tableNode.getBoundingClientRect();
-          const tableCenter = tableRect.left + tableRect.width / 2;
-          const menuWidth = 45;
-          const menuLeft = tableCenter - menuWidth / 2;
-          const tableBottom = tableRect.bottom;
-
-          setTableLocation({ bottom: tableBottom, left: menuLeft });
-        }
-      }
-    };
-
-    window.addEventListener("click", handleWindowClick);
-
-    return () => {
-      window.removeEventListener("click", handleWindowClick);
-    };
-  }, [tableLocation, editor]);
-
-  return (
-    <section
-      className={`absolute z-20 left-1/2 -translate-x-1/2 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 shadow-custom-shadow-sm p-1 ${
-        isOpen ? "block" : "hidden"
-      }`}
-    >
-      {items.map((item, index) => (
-        <Tooltip key={index} tooltipContent={item.name}>
-          <button
-            onClick={item.command}
-            className="p-1.5 text-custom-text-200 hover:bg-text-custom-text-100 hover:bg-custom-background-80 active:bg-custom-background-80 rounded"
-            title={item.name}
-          >
-            <item.icon
-              className={cn("h-4 w-4 text-lg", {
-                "text-red-600": item.key.includes("delete"),
-              })}
-            />
-          </button>
-        </Tooltip>
-      ))}
-    </section>
-  );
-};

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

@@ -8,10 +8,10 @@ import TaskList from "@tiptap/extension-task-list";
 import { Markdown } from "tiptap-markdown";
 import Gapcursor from "@tiptap/extension-gapcursor";
 
-import { CustomTableCell } from "../extensions/table/table-cell";
-import { Table } from "../extensions/table";
-import { TableHeader } from "../extensions/table/table-header";
-import { TableRow } from "@tiptap/extension-table-row";
+import TableHeader from "../extensions/table/table-header/table-header";
+import Table from "../extensions/table/table";
+import TableCell from "../extensions/table/table-cell/table-cell";
+import TableRow from "../extensions/table/table-row/table-row";
 
 import ReadOnlyImageExtension from "../extensions/image/read-only-image";
 import { isValidHttpUrl } from "../../lib/utils";
@@ -91,7 +91,7 @@ export const CoreReadOnlyEditorExtensions = (
     }),
     Table,
     TableHeader,
-    CustomTableCell,
+    TableCell,
     TableRow,
     Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, true),
   ];

packages/editor/lite-text-editor/package.json

@@ -2,6 +2,7 @@
   "name": "@plane/lite-text-editor",
   "version": "0.0.1",
   "description": "Package that powers Plane's Comment Editor",
+  "private": true,
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -29,9 +30,6 @@
   "dependencies": {
     "@plane/editor-core": "*",
     "@tiptap/extension-list-item": "^2.1.11",
-    "@types/node": "18.15.3",
-    "@types/react": "^18.2.5",
-    "@types/react-dom": "18.0.11",
     "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "eslint": "8.36.0",
@@ -46,6 +44,9 @@
     "use-debounce": "^9.0.4"
   },
   "devDependencies": {
+    "@types/node": "18.15.3",
+    "@types/react": "^18.2.35",
+    "@types/react-dom": "^18.2.14",
     "eslint": "^7.32.0",
     "postcss": "^8.4.29",
     "tailwind-config-custom": "*",

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

@@ -1,5 +1,5 @@
 import { EnterKeyExtension } from "./enter-key-extension";
 
 export const LiteTextEditorExtensions = (onEnterKeyPress?: () => void) => [
-  EnterKeyExtension(onEnterKeyPress),
+  // EnterKeyExtension(onEnterKeyPress),
 ];

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

@@ -1,4 +1,3 @@
-"use client";
 import * as React from "react";
 import {
   EditorContainer,
@@ -18,9 +17,9 @@ export type IMentionSuggestion = {
   title: string;
   subtitle: string;
   redirect_uri: string;
-}
+};
 
-export type IMentionHighlight = string
+export type IMentionHighlight = string;
 
 interface ILiteTextEditor {
   value: string;
@@ -50,6 +49,7 @@ interface ILiteTextEditor {
   onEnterKeyPress?: (e?: any) => void;
   mentionHighlights?: string[];
   mentionSuggestions?: IMentionSuggestion[];
+  submitButton?: React.ReactNode;
 }
 
 interface LiteTextEditorProps extends ILiteTextEditor {
@@ -61,24 +61,27 @@ interface EditorHandle {
   setEditorValue: (content: string) => void;
 }
 
-const LiteTextEditor = ({
-  onChange,
-  debouncedUpdatesEnabled,
-  setIsSubmitting,
-  setShouldShowAlert,
-  editorContentCustomClassNames,
-  value,
-  uploadFile,
-  deleteFile,
-  noBorder,
-  borderOnFocus,
-  customClassName,
-  forwardedRef,
-  commentAccessSpecifier,
-  onEnterKeyPress,
-  mentionHighlights,
-  mentionSuggestions
-}: LiteTextEditorProps) => {
+const LiteTextEditor = (props: LiteTextEditorProps) => {
+  const {
+    onChange,
+    debouncedUpdatesEnabled,
+    setIsSubmitting,
+    setShouldShowAlert,
+    editorContentCustomClassNames,
+    value,
+    uploadFile,
+    deleteFile,
+    noBorder,
+    borderOnFocus,
+    customClassName,
+    forwardedRef,
+    commentAccessSpecifier,
+    onEnterKeyPress,
+    mentionHighlights,
+    mentionSuggestions,
+    submitButton,
+  } = props;
+
   const editor = useEditor({
     onChange,
     debouncedUpdatesEnabled,
@@ -90,7 +93,7 @@ const LiteTextEditor = ({
     forwardedRef,
     extensions: LiteTextEditorExtensions(onEnterKeyPress),
     mentionHighlights,
-    mentionSuggestions
+    mentionSuggestions,
   });
 
   const editorClassNames = getEditorClassNames({
@@ -114,6 +117,7 @@ const LiteTextEditor = ({
             uploadFile={uploadFile}
             setIsSubmitting={setIsSubmitting}
             commentAccessSpecifier={commentAccessSpecifier}
+            submitButton={submitButton}
           />
         </div>
       </div>

packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx

@@ -1,5 +1,5 @@
 import { Editor } from "@tiptap/react";
-import { BoldIcon, LucideIcon } from "lucide-react";
+import { BoldIcon } from "lucide-react";
 
 import {
   BoldItem,
@@ -14,7 +14,6 @@ import {
   TableItem,
   UnderLineItem,
 } from "@plane/editor-core";
-import { Icon } from "./icon";
 import { Tooltip } from "../../tooltip";
 import { UploadImage } from "../..";
 
@@ -41,8 +40,9 @@ type EditorBubbleMenuProps = {
   };
   uploadFile: UploadImage;
   setIsSubmitting?: (
-    isSubmitting: "submitting" | "submitted" | "saved"
+    isSubmitting: "submitting" | "submitted" | "saved",
   ) => void;
+  submitButton: React.ReactNode;
 };
 
 export const FixedMenu = (props: EditorBubbleMenuProps) => {
@@ -73,115 +73,145 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
   };
 
   return (
-    <div className="flex w-fit divide-x divide-custom-border-300 rounded border border-custom-border-300 bg-custom-background-100 shadow-xl">
+    <div className="flex items-stretch gap-1.5 w-full h-9 overflow-x-scroll">
       {props.commentAccessSpecifier && (
-        <div className="flex border border-custom-border-300 mt-0 divide-x divide-custom-border-300 rounded overflow-hidden">
+        <div className="flex-shrink-0 flex items-stretch gap-0.5 border-[0.5px] border-custom-border-200 rounded p-1">
           {props?.commentAccessSpecifier.commentAccess?.map((access) => (
             <Tooltip key={access.key} tooltipContent={access.label}>
               <button
                 type="button"
                 onClick={() => handleAccessChange(access.key)}
-                className={`grid place-basicMarkItems-center p-1 hover:bg-custom-background-80 ${
+                className={`aspect-square grid place-items-center p-1 rounded-sm hover:bg-custom-background-90 ${
                   props.commentAccessSpecifier?.accessValue === access.key
-                    ? "bg-custom-background-80"
+                    ? "bg-custom-background-90"
                     : ""
                 }`}
               >
                 <access.icon
-                  className={`w-4 h-4 ${
+                  className={`w-3.5 h-3.5 ${
                     props.commentAccessSpecifier?.accessValue === access.key
-                      ? "!text-custom-text-100"
-                      : "!text-custom-text-400"
+                      ? "text-custom-text-100"
+                      : "text-custom-text-400"
                   }`}
+                  strokeWidth={2}
                 />
               </button>
             </Tooltip>
           ))}
         </div>
       )}
-      <div className="flex">
-        {basicMarkItems.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            onClick={item.command}
-            className={cn(
-              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
-              {
-                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-              }
-            )}
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
-              })}
-            />
-          </button>
-        ))}
-      </div>
-      <div className="flex">
-        {listItems.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            onClick={item.command}
-            className={cn(
-              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
-              {
-                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-              }
-            )}
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
-              })}
-            />
-          </button>
-        ))}
-      </div>
-      <div className="flex">
-        {userActionItems.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            onClick={item.command}
-            className={cn(
-              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
-              {
-                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-              }
-            )}
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
-              })}
-            />
-          </button>
-        ))}
-      </div>
-      <div className="flex">
-        {complexItems.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            onClick={item.command}
-            className={cn(
-              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
-              {
-                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-              }
-            )}
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
-              })}
-            />
-          </button>
-        ))}
+      <div className="flex items-stretch justify-between gap-2 w-full border-[0.5px] border-custom-border-200 bg-custom-background-90 rounded p-1">
+        <div className="flex items-stretch">
+          <div className="flex items-stretch gap-0.5 pr-2.5 border-r border-custom-border-200">
+            {basicMarkItems.map((item, index) => (
+              <Tooltip
+                key={index}
+                tooltipContent={<span className="capitalize">{item.name}</span>}
+              >
+                <button
+                  type="button"
+                  onClick={item.command}
+                  className={cn(
+                    "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                    {
+                      "text-custom-text-100 bg-custom-background-80":
+                        item.isActive(),
+                    },
+                  )}
+                >
+                  <item.icon
+                    className={cn("h-3.5 w-3.5", {
+                      "text-custom-text-100": item.isActive(),
+                    })}
+                    strokeWidth={2.5}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+          <div className="flex items-stretch gap-0.5 px-2.5 border-r border-custom-border-200">
+            {listItems.map((item, index) => (
+              <Tooltip
+                key={index}
+                tooltipContent={<span className="capitalize">{item.name}</span>}
+              >
+                <button
+                  type="button"
+                  onClick={item.command}
+                  className={cn(
+                    "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                    {
+                      "text-custom-text-100 bg-custom-background-80":
+                        item.isActive(),
+                    },
+                  )}
+                >
+                  <item.icon
+                    className={cn("h-3.5 w-3.5", {
+                      "text-custom-text-100": item.isActive(),
+                    })}
+                    strokeWidth={2.5}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+          <div className="flex items-stretch gap-0.5 px-2.5 border-r border-custom-border-200">
+            {userActionItems.map((item, index) => (
+              <Tooltip
+                key={index}
+                tooltipContent={<span className="capitalize">{item.name}</span>}
+              >
+                <button
+                  type="button"
+                  onClick={item.command}
+                  className={cn(
+                    "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                    {
+                      "text-custom-text-100 bg-custom-background-80":
+                        item.isActive(),
+                    },
+                  )}
+                >
+                  <item.icon
+                    className={cn("h-3.5 w-3.5", {
+                      "text-custom-text-100": item.isActive(),
+                    })}
+                    strokeWidth={2.5}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+          <div className="flex items-stretch gap-0.5 pl-2.5">
+            {complexItems.map((item, index) => (
+              <Tooltip
+                key={index}
+                tooltipContent={<span className="capitalize">{item.name}</span>}
+              >
+                <button
+                  type="button"
+                  onClick={item.command}
+                  className={cn(
+                    "p-1 aspect-square text-custom-text-400 hover:bg-custom-background-80 rounded-sm grid place-items-center",
+                    {
+                      "text-custom-text-100 bg-custom-background-80":
+                        item.isActive(),
+                    },
+                  )}
+                >
+                  <item.icon
+                    className={cn("h-3.5 w-3.5", {
+                      "text-custom-text-100": item.isActive(),
+                    })}
+                    strokeWidth={2.5}
+                  />
+                </button>
+              </Tooltip>
+            ))}
+          </div>
+        </div>
+        <div className="sticky right-1">{props.submitButton}</div>
       </div>
     </div>
   );

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

@@ -1,6 +1,10 @@
-"use client"
-import { EditorContainer, EditorContentWrapper, getEditorClassNames, useReadOnlyEditor } from '@plane/editor-core';
-import * as React from 'react';
+import * as React from "react";
+import {
+  EditorContainer,
+  EditorContentWrapper,
+  getEditorClassNames,
+  useReadOnlyEditor,
+} from "@plane/editor-core";
 
 interface ICoreReadOnlyEditor {
   value: string;
@@ -8,6 +12,7 @@ interface ICoreReadOnlyEditor {
   noBorder?: boolean;
   borderOnFocus?: boolean;
   customClassName?: string;
+  mentionHighlights: string[];
 }
 
 interface EditorCoreProps extends ICoreReadOnlyEditor {
@@ -26,29 +31,39 @@ const LiteReadOnlyEditor = ({
   customClassName,
   value,
   forwardedRef,
+  mentionHighlights,
 }: EditorCoreProps) => {
   const editor = useReadOnlyEditor({
     value,
     forwardedRef,
+    mentionHighlights,
   });
 
-  const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
+  const editorClassNames = getEditorClassNames({
+    noBorder,
+    borderOnFocus,
+    customClassName,
+  });
 
   if (!editor) return null;
 
   return (
     <EditorContainer editor={editor} editorClassNames={editorClassNames}>
       <div className="flex flex-col">
-        <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+        <EditorContentWrapper
+          editor={editor}
+          editorContentCustomClassNames={editorContentCustomClassNames}
+        />
       </div>
-    </EditorContainer >
+    </EditorContainer>
   );
 };
 
-const LiteReadOnlyEditorWithRef = React.forwardRef<EditorHandle, ICoreReadOnlyEditor>((props, ref) => (
-  <LiteReadOnlyEditor {...props} forwardedRef={ref} />
-));
+const LiteReadOnlyEditorWithRef = React.forwardRef<
+  EditorHandle,
+  ICoreReadOnlyEditor
+>((props, ref) => <LiteReadOnlyEditor {...props} forwardedRef={ref} />);
 
 LiteReadOnlyEditorWithRef.displayName = "LiteReadOnlyEditorWithRef";
 
-export { LiteReadOnlyEditor , LiteReadOnlyEditorWithRef };
+export { LiteReadOnlyEditor, LiteReadOnlyEditorWithRef };

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

@@ -1,5 +1,4 @@
-import * as React from 'react';
-
+import * as React from "react";
 // next-themes
 import { useTheme } from "next-themes";
 // tooltip2
@@ -69,8 +68,16 @@ export const Tooltip: React.FC<Props> = ({
         </div>
       }
       position={position}
-      renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
-        React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
+      renderTarget={({
+        isOpen: isTooltipOpen,
+        ref: eleReference,
+        ...tooltipProps
+      }) =>
+        React.cloneElement(children, {
+          ref: eleReference,
+          ...tooltipProps,
+          ...children.props,
+        })
       }
     />
   );

packages/editor/rich-text-editor/package.json

@@ -2,6 +2,7 @@
   "name": "@plane/rich-text-editor",
   "version": "0.0.1",
   "description": "Rich Text Editor that powers Plane",
+  "private": true,
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -21,19 +22,19 @@
     "check-types": "tsc --noEmit"
   },
   "peerDependencies": {
+    "@tiptap/core": "^2.1.11",
     "next": "12.3.2",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
-    "react-dom": "18.2.0",
-    "@tiptap/core": "^2.1.11"
+    "react-dom": "18.2.0"
   },
   "dependencies": {
     "@plane/editor-core": "*",
     "@tiptap/extension-code-block-lowlight": "^2.1.11",
     "@tiptap/extension-horizontal-rule": "^2.1.11",
     "@tiptap/extension-placeholder": "^2.1.11",
-    "class-variance-authority": "^0.7.0",
     "@tiptap/suggestion": "^2.1.7",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "highlight.js": "^11.8.0",
     "lowlight": "^3.0.0",
@@ -41,8 +42,8 @@
   },
   "devDependencies": {
     "@types/node": "18.15.3",
-    "@types/react": "^18.2.5",
-    "@types/react-dom": "18.0.11",
+    "@types/react": "^18.2.35",
+    "@types/react-dom": "^18.2.14",
     "eslint": "^7.32.0",
     "postcss": "^8.4.29",
     "react": "^18.2.0",

packages/editor/rich-text-editor/src/ui/extensions/slash-command.tsx

@@ -1,4 +1,11 @@
-import { useState, useEffect, useCallback, ReactNode, useRef, useLayoutEffect } from "react";
+import {
+  useState,
+  useEffect,
+  useCallback,
+  ReactNode,
+  useRef,
+  useLayoutEffect,
+} from "react";
 import { Editor, Range, Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
@@ -18,7 +25,18 @@ import {
   Table,
 } from "lucide-react";
 import { UploadImage } from "../";
-import { cn, insertTableCommand, toggleBlockquote, toggleBulletList, toggleOrderedList, toggleTaskList, insertImageCommand, toggleHeadingOne, toggleHeadingTwo, toggleHeadingThree } from "@plane/editor-core";
+import {
+  cn,
+  insertTableCommand,
+  toggleBlockquote,
+  toggleBulletList,
+  toggleOrderedList,
+  toggleTaskList,
+  insertImageCommand,
+  toggleHeadingOne,
+  toggleHeadingTwo,
+  toggleHeadingThree,
+} from "@plane/editor-core";
 
 interface CommandItemProps {
   title: string;
@@ -37,7 +55,15 @@ const Command = Extension.create({
     return {
       suggestion: {
         char: "/",
-        command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => {
+        command: ({
+          editor,
+          range,
+          props,
+        }: {
+          editor: Editor;
+          range: Range;
+          props: any;
+        }) => {
           props.command({ editor, range });
         },
       },
@@ -59,127 +85,135 @@ const Command = Extension.create({
 const getSuggestionItems =
   (
     uploadFile: UploadImage,
-    setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+    setIsSubmitting?: (
+      isSubmitting: "submitting" | "submitted" | "saved",
+    ) => void,
   ) =>
-    ({ query }: { query: string }) =>
-      [
-        {
-          title: "Text",
-          description: "Just start typing with plain text.",
-          searchTerms: ["p", "paragraph"],
-          icon: <Text size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").run();
-          },
+  ({ query }: { query: string }) =>
+    [
+      {
+        title: "Text",
+        description: "Just start typing with plain text.",
+        searchTerms: ["p", "paragraph"],
+        icon: <Text size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          editor
+            .chain()
+            .focus()
+            .deleteRange(range)
+            .toggleNode("paragraph", "paragraph")
+            .run();
         },
-        {
-          title: "Heading 1",
-          description: "Big section heading.",
-          searchTerms: ["title", "big", "large"],
-          icon: <Heading1 size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            toggleHeadingOne(editor, range);
-          },
+      },
+      {
+        title: "Heading 1",
+        description: "Big section heading.",
+        searchTerms: ["title", "big", "large"],
+        icon: <Heading1 size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleHeadingOne(editor, range);
         },
-        {
-          title: "Heading 2",
-          description: "Medium section heading.",
-          searchTerms: ["subtitle", "medium"],
-          icon: <Heading2 size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            toggleHeadingTwo(editor, range);
-          },
+      },
+      {
+        title: "Heading 2",
+        description: "Medium section heading.",
+        searchTerms: ["subtitle", "medium"],
+        icon: <Heading2 size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleHeadingTwo(editor, range);
         },
-        {
-          title: "Heading 3",
-          description: "Small section heading.",
-          searchTerms: ["subtitle", "small"],
-          icon: <Heading3 size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            toggleHeadingThree(editor, range);
-          },
+      },
+      {
+        title: "Heading 3",
+        description: "Small section heading.",
+        searchTerms: ["subtitle", "small"],
+        icon: <Heading3 size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleHeadingThree(editor, range);
         },
-        {
-          title: "To-do List",
-          description: "Track tasks with a to-do list.",
-          searchTerms: ["todo", "task", "list", "check", "checkbox"],
-          icon: <CheckSquare size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            toggleTaskList(editor, range)
-          },
+      },
+      {
+        title: "To-do List",
+        description: "Track tasks with a to-do list.",
+        searchTerms: ["todo", "task", "list", "check", "checkbox"],
+        icon: <CheckSquare size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleTaskList(editor, range);
         },
-        {
-          title: "Bullet List",
-          description: "Create a simple bullet list.",
-          searchTerms: ["unordered", "point"],
-          icon: <List size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            toggleBulletList(editor, range);
-          },
+      },
+      {
+        title: "Bullet List",
+        description: "Create a simple bullet list.",
+        searchTerms: ["unordered", "point"],
+        icon: <List size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleBulletList(editor, range);
         },
-        {
-          title: "Divider",
-          description: "Visually divide blocks",
-          searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
-          icon: <MinusSquare size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            editor.chain().focus().deleteRange(range).setHorizontalRule().run();
-          },
+      },
+      {
+        title: "Divider",
+        description: "Visually divide blocks",
+        searchTerms: ["line", "divider", "horizontal", "rule", "separate"],
+        icon: <MinusSquare size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          editor.chain().focus().deleteRange(range).setHorizontalRule().run();
         },
-        {
-          title: "Table",
-          description: "Create a Table",
-          searchTerms: ["table", "cell", "db", "data", "tabular"],
-          icon: <Table size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            insertTableCommand(editor, range);
-          },
+      },
+      {
+        title: "Table",
+        description: "Create a Table",
+        searchTerms: ["table", "cell", "db", "data", "tabular"],
+        icon: <Table size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          insertTableCommand(editor, range);
         },
-        {
-          title: "Numbered List",
-          description: "Create a list with numbering.",
-          searchTerms: ["ordered"],
-          icon: <ListOrdered size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            toggleOrderedList(editor, range)
-          },
+      },
+      {
+        title: "Numbered List",
+        description: "Create a list with numbering.",
+        searchTerms: ["ordered"],
+        icon: <ListOrdered size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          toggleOrderedList(editor, range);
         },
-        {
-          title: "Quote",
-          description: "Capture a quote.",
-          searchTerms: ["blockquote"],
-          icon: <TextQuote size={18} />,
-          command: ({ editor, range }: CommandProps) =>
-            toggleBlockquote(editor, range)
+      },
+      {
+        title: "Quote",
+        description: "Capture a quote.",
+        searchTerms: ["blockquote"],
+        icon: <TextQuote size={18} />,
+        command: ({ editor, range }: CommandProps) =>
+          toggleBlockquote(editor, range),
+      },
+      {
+        title: "Code",
+        description: "Capture a code snippet.",
+        searchTerms: ["codeblock"],
+        icon: <Code size={18} />,
+        command: ({ editor, range }: CommandProps) =>
+          editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
+      },
+      {
+        title: "Image",
+        description: "Upload an image from your computer.",
+        searchTerms: ["photo", "picture", "media"],
+        icon: <ImageIcon size={18} />,
+        command: ({ editor, range }: CommandProps) => {
+          insertImageCommand(editor, uploadFile, setIsSubmitting, range);
         },
-        {
-          title: "Code",
-          description: "Capture a code snippet.",
-          searchTerms: ["codeblock"],
-          icon: <Code size={18} />,
-          command: ({ editor, range }: CommandProps) =>
-            editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
-        },
-        {
-          title: "Image",
-          description: "Upload an image from your computer.",
-          searchTerms: ["photo", "picture", "media"],
-          icon: <ImageIcon size={18} />,
-          command: ({ editor, range }: CommandProps) => {
-            insertImageCommand(editor, uploadFile, setIsSubmitting, range);
-          },
-        },
-      ].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;
-      });
+      },
+    ].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;
+    });
 
 export const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
   const containerHeight = container.offsetHeight;
@@ -213,7 +247,7 @@ const CommandList = ({
         command(item);
       }
     },
-    [command, items]
+    [command, items],
   );
 
   useEffect(() => {
@@ -266,11 +300,17 @@ const CommandList = ({
         <button
           className={cn(
             `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`,
-            { "bg-custom-primary-100/5  text-custom-text-100": index === selectedIndex }
+            {
+              "bg-custom-primary-100/5  text-custom-text-100":
+                index === selectedIndex,
+            },
           )}
           key={index}
           onClick={() => selectItem(index)}
         >
+          <div className="flex h-10 w-10 items-center justify-center rounded-md border border-custom-border-300 bg-custom-background-100">
+            {item.icon}
+          </div>
           <div>
             <p className="font-medium">{item.title}</p>
             <p className="text-xs text-custom-text-300">{item.description}</p>
@@ -331,7 +371,9 @@ const renderItems = () => {
 
 export const SlashCommand = (
   uploadFile: UploadImage,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
 ) =>
   Command.configure({
     suggestion: {

packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx

@@ -1,10 +1,18 @@
-import { BubbleMenu, BubbleMenuProps } from "@tiptap/react";
-import { FC, useState } from "react";
+import { BubbleMenu, BubbleMenuProps, isNodeSelection } from "@tiptap/react";
+import { FC, useEffect, useState } from "react";
 import { BoldIcon } from "lucide-react";
 
 import { NodeSelector } from "./node-selector";
 import { LinkSelector } from "./link-selector";
-import { BoldItem, cn, CodeItem, ItalicItem, StrikeThroughItem, UnderLineItem } from "@plane/editor-core";
+import {
+  BoldItem,
+  cn,
+  CodeItem,
+  isCellSelection,
+  ItalicItem,
+  StrikeThroughItem,
+  UnderLineItem,
+} from "@plane/editor-core";
 
 export interface BubbleMenuItem {
   name: string;
@@ -26,14 +34,35 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
 
   const bubbleMenuProps: EditorBubbleMenuProps = {
     ...props,
-    shouldShow: ({ editor }) => {
-      if (!editor.isEditable) {
+    shouldShow: ({ view, state, editor }) => {
+      const { selection } = state;
+
+      const { empty } = selection;
+      const hasEditorFocus = view.hasFocus();
+
+      // if (typeof window !== "undefined") {
+      //   const selection: any = window?.getSelection();
+      //   if (selection.rangeCount !== 0) {
+      //     const range = selection.getRangeAt(0);
+      //     if (findTableAncestor(range.startContainer)) {
+      //       console.log("table");
+      //       return false;
+      //     }
+      //   }
+      // }
+
+      if (
+        !hasEditorFocus ||
+        empty ||
+        !editor.isEditable ||
+        editor.isActive("image") ||
+        isNodeSelection(selection) ||
+        isCellSelection(selection) ||
+        isSelecting
+      ) {
         return false;
       }
-      if (editor.isActive("image")) {
-        return false;
-      }
-      return editor.view.state.selection.content().size > 0;
+      return true;
     },
     tippyOptions: {
       moveTransition: "transform 0.15s ease-out",
@@ -47,50 +76,83 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
   const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
   const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
 
+  const [isSelecting, setIsSelecting] = useState(false);
+  useEffect(() => {
+    function handleMouseDown() {
+      function handleMouseMove() {
+        if (!props.editor.state.selection.empty) {
+          setIsSelecting(true);
+          document.removeEventListener("mousemove", handleMouseMove);
+        }
+      }
+
+      function handleMouseUp() {
+        setIsSelecting(false);
+
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      }
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    }
+
+    document.addEventListener("mousedown", handleMouseDown);
+
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, []);
+
   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"
     >
-      {!props.editor.isActive("table") && (
-        <NodeSelector
-          editor={props.editor!}
-          isOpen={isNodeSelectorOpen}
-          setIsOpen={() => {
-            setIsNodeSelectorOpen(!isNodeSelectorOpen);
-            setIsLinkSelectorOpen(false);
-          }}
-        />
-      )}
-      <LinkSelector
-        editor={props.editor!!}
-        isOpen={isLinkSelectorOpen}
-        setIsOpen={() => {
-          setIsLinkSelectorOpen(!isLinkSelectorOpen);
-          setIsNodeSelectorOpen(false);
-        }}
-      />
-      <div className="flex">
-        {items.map((item, index) => (
-          <button
-            key={index}
-            type="button"
-            onClick={item.command}
-            className={cn(
-              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
-              {
-                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-              }
-            )}
-          >
-            <item.icon
-              className={cn("h-4 w-4", {
-                "text-custom-text-100": item.isActive(),
-              })}
+      {isSelecting ? null : (
+        <>
+          {!props.editor.isActive("table") && (
+            <NodeSelector
+              editor={props.editor!}
+              isOpen={isNodeSelectorOpen}
+              setIsOpen={() => {
+                setIsNodeSelectorOpen(!isNodeSelectorOpen);
+                setIsLinkSelectorOpen(false);
+              }}
             />
-          </button>
-        ))}
-      </div>
+          )}
+          <LinkSelector
+            editor={props.editor!!}
+            isOpen={isLinkSelectorOpen}
+            setIsOpen={() => {
+              setIsLinkSelectorOpen(!isLinkSelectorOpen);
+              setIsNodeSelectorOpen(false);
+            }}
+          />
+          <div className="flex">
+            {items.map((item, index) => (
+              <button
+                key={index}
+                type="button"
+                onClick={item.command}
+                className={cn(
+                  "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
+                  {
+                    "text-custom-text-100 bg-custom-primary-100/5":
+                      item.isActive(),
+                  },
+                )}
+              >
+                <item.icon
+                  className={cn("h-4 w-4", {
+                    "text-custom-text-100": item.isActive(),
+                  })}
+                />
+              </button>
+            ))}
+          </div>
+        </>
+      )}
     </BubbleMenu>
   );
 };

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

@@ -8,6 +8,7 @@ interface IRichTextReadOnlyEditor {
   noBorder?: boolean;
   borderOnFocus?: boolean;
   customClassName?: string;
+  mentionHighlights?: string[];
 }
 
 interface RichTextReadOnlyEditorProps extends IRichTextReadOnlyEditor {
@@ -26,10 +27,12 @@ const RichReadOnlyEditor = ({
   customClassName,
   value,
   forwardedRef,
+  mentionHighlights,
 }: RichTextReadOnlyEditorProps) => {
   const editor = useReadOnlyEditor({
     value,
     forwardedRef,
+    mentionHighlights,
   });
 
   const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });

packages/eslint-config-custom/package.json

@@ -1,5 +1,6 @@
 {
   "name": "eslint-config-custom",
+  "private": true,
   "version": "0.13.2",
   "main": "index.js",
   "license": "MIT",

packages/tailwind-config-custom/package.json

@@ -3,6 +3,7 @@
   "version": "0.13.2",
   "description": "common tailwind configuration across monorepo",
   "main": "index.js",
+  "private": true,
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
     "autoprefixer": "^10.4.14",

packages/ui/package.json

@@ -1,5 +1,7 @@
 {
   "name": "@plane/ui",
+  "description": "UI components shared across multiple apps internally",
+  "private": true,
   "version": "0.0.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

packages/ui/src/avatar/avatar-group.tsx

@@ -35,8 +35,11 @@ export const AvatarGroup: React.FC<Props> = (props) => {
   // calculate total length of avatars inside the group
   const totalAvatars = React.Children.toArray(children).length;
 
+  // if avatars are equal to max + 1, then we need to show the last avatar as well, if avatars are more than max + 1, then we need to show the count of the remaining avatars
+  const maxAvatarsToRender = totalAvatars <= max + 1 ? max + 1 : max;
+
   // slice the children to the maximum number of avatars
-  const avatars = React.Children.toArray(children).slice(0, max);
+  const avatars = React.Children.toArray(children).slice(0, maxAvatarsToRender);
 
   // assign the necessary props from the AvatarGroup component to the Avatar components
   const avatarsWithUpdatedProps = avatars.map((avatar) => {
@@ -54,11 +57,14 @@ export const AvatarGroup: React.FC<Props> = (props) => {
   return (
     <div className={`flex ${sizeInfo.spacing}`}>
       {avatarsWithUpdatedProps.map((avatar, index) => (
-        <div key={index} className="ring-1 ring-custom-border-200 rounded-full">
+        <div
+          key={index}
+          className="ring-1 ring-custom-background-100 rounded-full"
+        >
           {avatar}
         </div>
       ))}
-      {max < totalAvatars && (
+      {maxAvatarsToRender < totalAvatars && (
         <Tooltip
           tooltipContent={`${totalAvatars} total`}
           disabled={!showTooltip}
@@ -66,7 +72,7 @@ export const AvatarGroup: React.FC<Props> = (props) => {
           <div
             className={`${
               !isAValidNumber(size) ? sizeInfo.avatarSize : ""
-            } ring-1 ring-custom-border-200 bg-custom-primary-500 text-white rounded-full grid place-items-center text-[9px]`}
+            } ring-1 ring-custom-background-100 bg-custom-primary-10 text-custom-primary-100 rounded-full grid place-items-center text-[9px]`}
             style={
               isAValidNumber(size)
                 ? {

packages/ui/src/breadcrumbs/breadcrumbs.tsx

@@ -1,59 +1,81 @@
 import * as React from "react";
 
 // icons
-import { MoveLeft } from "lucide-react";
+import { ChevronRight } from "lucide-react";
+// components
+import { Tooltip } from "../tooltip";
 
 type BreadcrumbsProps = {
-  onBack: () => void;
   children: any;
 };
 
-const Breadcrumbs = ({ onBack, children }: BreadcrumbsProps) => (
-  <>
-    <div className="flex w-full flex-grow items-center overflow-hidden overflow-ellipsis whitespace-nowrap">
-      <button
-        type="button"
-        className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90"
-        onClick={onBack}
-      >
-        <MoveLeft className="h-4 w-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
-      </button>
-      {children}
-    </div>
-  </>
-);
-
-type BreadcrumbItemProps = {
-  title?: string;
-  link?: JSX.Element;
-  icon?: any;
-  unshrinkTitle?: boolean;
-};
-
-const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
-  title,
-  link,
-  icon,
-  unshrinkTitle = false,
-}) => (
-  <>
-    {link ? (
-      link
-    ) : (
-      <div
-        className={`truncate px-3 text-sm ${
-          unshrinkTitle ? "flex-shrink-0" : ""
-        }`}
-      >
-        <p className={`truncate ${icon ? "flex items-center gap-2" : ""}`}>
-          {icon}
-          <span className="break-words">{title}</span>
-        </p>
+const Breadcrumbs = ({ children }: BreadcrumbsProps) => (
+  <div className="flex items-center space-x-2">
+    {React.Children.map(children, (child, index) => (
+      <div key={index} className="flex items-center flex-wrap gap-2.5">
+        {child}
+        {index !== React.Children.count(children) - 1 && (
+          <ChevronRight
+            className="h-3.5 w-3.5 flex-shrink-0 text-custom-text-400"
+            aria-hidden="true"
+          />
+        )}
       </div>
-    )}
-  </>
+    ))}
+  </div>
 );
 
+type Props = {
+  type?: "text" | "component";
+  component?: React.ReactNode;
+  label?: string;
+  icon?: React.ReactNode;
+  link?: string;
+};
+const BreadcrumbItem: React.FC<Props> = (props) => {
+  const { type = "text", component, label, icon, link } = props;
+  return (
+    <>
+      {type != "text" ? (
+        <div className="flex items-center space-x-2">{component}</div>
+      ) : (
+        <Tooltip tooltipContent={label} position="bottom">
+          <li className="flex items-center space-x-2">
+            <div className="flex items-center flex-wrap gap-2.5">
+              {link ? (
+                <a
+                  className="flex items-center gap-1 text-sm font-medium text-custom-text-300 hover:text-custom-text-100"
+                  href={link}
+                >
+                  {icon && (
+                    <div className="overflow-hidden w-5 h-5 flex justify-center items-center !text-[1rem]">
+                      {icon}
+                    </div>
+                  )}
+                  <div className="relative block overflow-hidden truncate line-clamp-1 max-w-[150px]">
+                    {label}
+                  </div>
+                </a>
+              ) : (
+                <div className="flex items-center gap-1 text-sm font-medium text-custom-text-100 cursor-default">
+                  {icon && (
+                    <div className="overflow-hidden w-5 h-5 flex justify-center items-center">
+                      {icon}
+                    </div>
+                  )}
+                  <div className="relative block overflow-hidden truncate line-clamp-1 max-w-[150px]">
+                    {label}
+                  </div>
+                </div>
+              )}
+            </div>
+          </li>
+        </Tooltip>
+      )}
+    </>
+  );
+};
+
 Breadcrumbs.BreadcrumbItem = BreadcrumbItem;
 
 export { Breadcrumbs, BreadcrumbItem };

packages/ui/src/icons/center-panel-icon.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { ISvgIcons } from "./type";
 
-export const FullScreenPeekIcon: React.FC<ISvgIcons> = ({
+export const CenterPanelIcon: React.FC<ISvgIcons> = ({
   className = "text-current",
   ...rest
 }) => (
@@ -16,14 +16,18 @@ export const FullScreenPeekIcon: React.FC<ISvgIcons> = ({
   >
     <path
       d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
     />
     <path
-      d="M20 3H12V5V19V21H20C20.5523 21 21 20.1046 21 19V5C21 3.89543 20.5523 3 20 3Z"
+      d="M15.1111 8.00009H8.8001C8.33334 8.00007 8.00003 8.0001 8.00012 8.88897V15.1111C8.00012 16 8.00012 16 8.8001 16H15.1111C16 16 16 16 16 15.1111V8.88897C16 8.00009 16 8.00009 15.1111 8.00009H15.1111Z"
       fill="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
     />
   </svg>
 );

packages/ui/src/icons/full-screen-panel-icon.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { ISvgIcons } from "./type";
 
-export const ModalPeekIcon: React.FC<ISvgIcons> = ({
+export const FullScreenPanelIcon: React.FC<ISvgIcons> = ({
   className = "text-current",
   ...rest
 }) => (

packages/ui/src/icons/index.ts

@@ -9,9 +9,9 @@ export * from "./subscribe-icon";
 export * from "./external-link-icon";
 export * from "./copy-icon";
 export * from "./layer-stack";
-export * from "./side-peek-icon";
-export * from "./modal-peek-icon";
-export * from "./panel-center-icon";
+export * from "./side-panel-icon";
+export * from "./center-panel-icon";
+export * from "./full-screen-panel-icon";
 export * from "./priority-icon";
 export * from "./state";
 export * from "./blocked-icon";

packages/ui/src/icons/side-panel-icon.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { ISvgIcons } from "./type";
 
-export const SidePeekIcon: React.FC<ISvgIcons> = ({
+export const SidePanelIcon: React.FC<ISvgIcons> = ({
   className = "text-current",
   ...rest
 }) => (

space/components/icons/index.ts

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

space/components/icons/state-group/backlog-state-icon.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const BacklogStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["backlog"],
-}) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <circle cx="10" cy="10" r="9" stroke={color} strokeLinecap="round" strokeDasharray="4 4" />
-  </svg>
-);

space/components/icons/state-group/cancelled-state-icon.tsx

@@ -1,74 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const CancelledStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["cancelled"],
-}) => (
-  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.36 84.36">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
-        />
-        <circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
-        <path
-          className="cls-3"
-          fill="none"
-          strokeWidth={3}
-          stroke="#ffffff"
-          strokeLinecap="square"
-          strokeMiterlimit={10}
-          d="M32.64,32.44q9.54,9.75,19.09,19.48"
-        />
-        <path
-          className="cls-3"
-          fill="none"
-          strokeWidth={3}
-          stroke="#ffffff"
-          strokeLinecap="square"
-          strokeMiterlimit={10}
-          d="M32.64,51.92,51.73,32.44"
-        />
-      </g>
-    </g>
-  </svg>
-);

space/components/icons/state-group/completed-state-icon.tsx

@@ -1,65 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const CompletedStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["completed"],
-}) => (
-  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.36 84.36">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          strokeWidth={3}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
-        />
-        <circle className="cls-2" fill={color} cx="42.18" cy="42.18" r="31.04" />
-        <path
-          className="cls-3"
-          fill="none"
-          strokeWidth={3}
-          stroke="#ffffff"
-          strokeLinecap="square"
-          strokeMiterlimit={10}
-          d="M30.45,43.75l6.61,6.61L53.92,34"
-        />
-      </g>
-    </g>
-  </svg>
-);

space/components/icons/state-group/index.ts

@@ -1,6 +0,0 @@
-export * from "./backlog-state-icon";
-export * from "./cancelled-state-icon";
-export * from "./completed-state-icon";
-export * from "./started-state-icon";
-export * from "./state-group-icon";
-export * from "./unstarted-state-icon";

space/components/icons/state-group/started-state-icon.tsx

@@ -1,73 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const StartedStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["started"],
-}) => (
-  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83.36 83.36">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M20,7.19a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M76.17,20a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M63.42,76.17A39.78,39.78,0,0,1,20,75.64"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M7.19,63.42A39.75,39.75,0,0,1,7.73,20"
-        />
-        <path
-          className="cls-2"
-          fill={color}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M42.32,41.21q9.57-14.45,19.13-28.9a35.8,35.8,0,0,0-39.09,0Z"
-        />
-        <path
-          className="cls-2"
-          fill={color}
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M42.32,41.7,61.45,70.6a35.75,35.75,0,0,1-39.09,0Z"
-        />
-      </g>
-    </g>
-  </svg>
-);

space/components/icons/state-group/state-group-icon.tsx

@@ -1,29 +0,0 @@
-// icons
-import {
-  BacklogStateIcon,
-  CancelledStateIcon,
-  CompletedStateIcon,
-  StartedStateIcon,
-  UnstartedStateIcon,
-} from "components/icons";
-import { TIssueGroupKey } from "types/issue";
-
-type Props = {
-  stateGroup: TIssueGroupKey;
-  color: string;
-  className?: string;
-  height?: string;
-  width?: string;
-};
-
-export const StateGroupIcon: React.FC<Props> = ({ stateGroup, className, color, height = "12px", width = "12px" }) => {
-  if (stateGroup === "backlog")
-    return <BacklogStateIcon className={className} color={color} height={height} width={width} />;
-  else if (stateGroup === "cancelled")
-    return <CancelledStateIcon className={className} color={color} height={height} width={width} />;
-  else if (stateGroup === "completed")
-    return <CompletedStateIcon className={className} color={color} height={height} width={width} />;
-  else if (stateGroup === "started")
-    return <StartedStateIcon className={className} color={color} height={height} width={width} />;
-  else return <UnstartedStateIcon className={className} color={color} height={height} width={width} />;
-};

space/components/icons/state-group/unstarted-state-icon.tsx

@@ -1,55 +0,0 @@
-import React from "react";
-// types
-import type { Props } from "../types";
-// constants
-import { issueGroupColors } from "constants/data";
-
-export const UnstartedStateIcon: React.FC<Props> = ({
-  width = "14",
-  height = "14",
-  className,
-  color = issueGroupColors["unstarted"],
-}) => (
-  <svg width={width} height={height} className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84.36 84.36">
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M20.45,7.69a39.74,39.74,0,0,1,43.43.54"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M76.67,20.45a39.76,39.76,0,0,1-.53,43.43"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M63.92,76.67a39.78,39.78,0,0,1-43.44-.53"
-        />
-        <path
-          className="cls-1"
-          fill="none"
-          stroke={color}
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={3}
-          d="M7.69,63.92a39.75,39.75,0,0,1,.54-43.44"
-        />
-      </g>
-    </g>
-  </svg>
-);

space/components/icons/types.d.ts

@@ -1,6 +0,0 @@
-export type Props = {
-  width?: string | number;
-  height?: string | number;
-  color?: string;
-  className?: string;
-};

space/components/issues/board-views/block-state.tsx

@@ -1,3 +1,5 @@
+// ui
+import { StateGroupIcon } from "@plane/ui";
 // constants
 import { issueGroupFilter } from "constants/data";
 
@@ -8,7 +10,7 @@ export const IssueBlockState = ({ state }: any) => {
   return (
     <div className="flex items-center justify-between gap-1 w-full rounded shadow-sm border-[0.5px] border-custom-border-300 duration-300 focus:outline-none px-2.5 py-1 text-xs">
       <div className="flex items-center w-full gap-1.5 text-custom-text-200">
-        <stateGroup.icon />
+        <StateGroupIcon stateGroup={state.group} color={state.color} />
         <div className="text-xs">{state?.name}</div>
       </div>
     </div>

space/components/issues/board-views/kanban/block.tsx

@@ -7,7 +7,6 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { IssueBlockPriority } from "components/issues/board-views/block-priority";
 import { IssueBlockState } from "components/issues/board-views/block-state";
-import { IssueBlockLabels } from "components/issues/board-views/block-labels";
 import { IssueBlockDueDate } from "components/issues/board-views/block-due-date";
 // interfaces
 import { IIssue } from "types/issue";
@@ -37,7 +36,7 @@ export const IssueListBlock = observer(({ issue }: { issue: IIssue }) => {
   };
 
   return (
-    <div className="py-3 px-4 h-[118px] flex flex-col gap-1.5 bg-custom-background-100 rounded shadow-custom-shadow-sm border-[0.5px] border-custom-border-200">
+    <div className="py-2 px-3 flex flex-col gap-1.5 bg-custom-background-100 rounded shadow-custom-shadow-2xs border-[0.5px] border-custom-border-200 space-y-2 text-sm">
       {/* id */}
       <div className="text-xs text-custom-text-300 break-words">
         {projectStore?.project?.identifier}-{issue?.sequence_id}

space/components/issues/board-views/kanban/header.tsx

@@ -4,8 +4,8 @@ import { observer } from "mobx-react-lite";
 import { IIssueState } from "types/issue";
 // constants
 import { issueGroupFilter } from "constants/data";
-// icons
-import { StateGroupIcon } from "components/icons";
+// ui
+import { StateGroupIcon } from "@plane/ui";
 // mobx hook
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
@@ -18,11 +18,11 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   if (stateGroup === null) return <></>;
 
   return (
-    <div className="pb-2 px-2 flex items-center">
-      <div className="w-4 h-4 flex justify-center items-center flex-shrink-0">
-        <StateGroupIcon stateGroup={state.group} color={state.color} />
+    <div className="pb-2 px-2 flex items-center gap-2">
+      <div className="w-3.5 h-3.5 flex justify-center items-center flex-shrink-0">
+        <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
       </div>
-      <div className="font-semibold text-custom-text-200 capitalize ml-2 mr-3 truncate">{state?.name}</div>
+      <div className="font-semibold text-custom-text-200 capitalize mr-1 truncate">{state?.name}</div>
       <span className="text-custom-text-300 rounded-full flex-shrink-0">
         {store.issue.getCountOfIssuesByState(state.id)}
       </span>

space/components/issues/board-views/list/block.tsx

@@ -38,10 +38,10 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
   };
 
   return (
-    <div className="flex items-center px-6 py-3.5 relative gap-10 bg-custom-background-100">
-      <div className="relative flex items-center gap-5 w-full flex-grow overflow-hidden">
+    <div className="flex items-center p-3 relative gap-10 bg-custom-background-100">
+      <div className="relative flex items-center gap-3 w-full flex-grow overflow-hidden">
         {/* id */}
-        <div className="flex-shrink-0 text-sm text-custom-text-300">
+        <div className="flex-shrink-0 text-xs text-custom-text-300 font-medium">
           {projectStore?.project?.identifier}-{issue?.sequence_id}
         </div>
         {/* name */}

space/components/issues/board-views/list/header.tsx

@@ -2,8 +2,8 @@
 import { observer } from "mobx-react-lite";
 // interfaces
 import { IIssueState } from "types/issue";
-// icons
-import { StateGroupIcon } from "components/icons";
+// ui
+import { StateGroupIcon } from "@plane/ui";
 // constants
 import { issueGroupFilter } from "constants/data";
 // mobx hook
@@ -18,12 +18,12 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
   if (stateGroup === null) return <></>;
 
   return (
-    <div className="px-6 py-2 flex items-center">
-      <div className="w-4 h-4 flex justify-center items-center">
-        <StateGroupIcon stateGroup={state.group} color={state.color} />
+    <div className="p-3 flex items-center gap-2">
+      <div className="w-3.5 h-3.5 flex justify-center items-center">
+        <StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
       </div>
-      <div className="font-semibold capitalize ml-2 mr-3">{state?.name}</div>
-      <div className="text-custom-text-200">{store.issue.getCountOfIssuesByState(state.id)}</div>
+      <div className="font-medium capitalize mr-1">{state?.name}</div>
+      <div className="text-custom-text-200 text-sm font-medium">{store.issue.getCountOfIssuesByState(state.id)}</div>
     </div>
   );
 });

space/components/issues/board-views/list/index.tsx

@@ -27,9 +27,7 @@ export const IssueListView = observer(() => {
                 ))}
               </div>
             ) : (
-              <div className="px-6 py-3.5 text-sm text-custom-text-200 bg-custom-background-100">
-                No Issues are available.
-              </div>
+              <div className="p-3 text-sm text-custom-text-400 bg-custom-background-100">No issues.</div>
             )}
           </div>
         ))}

space/components/issues/peek-overview/comment/add-comment.tsx

@@ -7,7 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import { Comment } from "types/issue";
 // components
@@ -29,7 +29,6 @@ export const AddComment: React.FC<Props> = observer((props) => {
   const {
     handleSubmit,
     control,
-    setValue,
     watch,
     formState: { isSubmitting },
     reset,
@@ -85,27 +84,30 @@ export const AddComment: React.FC<Props> = observer((props) => {
                   ? watch("comment_html")
                   : value
               }
-              customClassName="p-3 min-h-[50px] shadow-sm"
+              customClassName="p-2"
+              editorContentCustomClassNames="min-h-[35px]"
               debouncedUpdatesEnabled={false}
               onChange={(comment_json: Object, comment_html: string) => {
                 onChange(comment_html);
               }}
+              submitButton={
+                <Button
+                  disabled={isSubmitting || disabled}
+                  variant="primary"
+                  type="submit"
+                  className="!px-2.5 !py-1.5 !text-xs"
+                  onClick={(e) => {
+                    userStore.requiredLogin(() => {
+                      handleSubmit(onSubmit)(e);
+                    });
+                  }}
+                >
+                  {isSubmitting ? "Adding..." : "Comment"}
+                </Button>
+              }
             />
           )}
         />
-
-        <SecondaryButton
-          onClick={(e) => {
-            userStore.requiredLogin(() => {
-              handleSubmit(onSubmit)(e);
-            });
-          }}
-          type="submit"
-          disabled={isSubmitting || disabled}
-          className="mt-2"
-        >
-          {isSubmitting ? "Adding..." : "Comment"}
-        </SecondaryButton>
       </div>
     </div>
   );

space/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -15,6 +15,7 @@ import { timeAgo } from "helpers/date-time.helper";
 import { Comment } from "types/issue";
 // services
 import fileService from "services/file.service";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
 
 type Props = {
   workspaceSlug: string;
@@ -28,6 +29,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
   // states
   const [isEditing, setIsEditing] = useState(false);
 
+  const mentionsConfig = useEditorSuggestions();
+
   const editorRef = React.useRef<any>(null);
 
   const showEditorRef = React.useRef<any>(null);
@@ -135,6 +138,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
               ref={showEditorRef}
               value={comment.comment_html}
               customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+              mentionHighlights={mentionsConfig.mentionHighlights}
             />
             <CommentReactions commentId={comment.id} projectId={comment.project} />
           </div>

space/components/issues/peek-overview/issue-details.tsx

@@ -2,27 +2,33 @@ import { IssueReactions } from "components/issues/peek-overview";
 import { RichReadOnlyEditor } from "@plane/rich-text-editor";
 // types
 import { IIssue } from "types/issue";
+import useEditorSuggestions from "hooks/use-editor-suggestions";
 
 type Props = {
   issueDetails: IIssue;
 };
 
-export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => (
-  <div className="space-y-2">
-    <h6 className="font-medium text-custom-text-200">
-      {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
-    </h6>
-    <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
-    {issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && (
-      <RichReadOnlyEditor
-        value={!issueDetails.description_html ||
-          issueDetails.description_html === "" ||
-          (typeof issueDetails.description_html === "object" &&
-            Object.keys(issueDetails.description_html).length === 0)
-          ? "<p></p>"
-          : issueDetails.description_html}
-        customClassName="p-3 min-h-[50px] shadow-sm" />
-    )}
-    <IssueReactions />
-  </div>
-);
+export const PeekOverviewIssueDetails: React.FC<Props> = ({ issueDetails }) => {
+
+  const mentionConfig = useEditorSuggestions();
+
+  return (
+    <div className="space-y-2">
+      <h6 className="font-medium text-custom-text-200">
+        {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
+      </h6>
+      <h4 className="break-words text-2xl font-semibold">{issueDetails.name}</h4>
+      {issueDetails.description_html !== "" && issueDetails.description_html !== "<p></p>" && (
+        <RichReadOnlyEditor
+          value={!issueDetails.description_html ||
+            issueDetails.description_html === "" ||
+            (typeof issueDetails.description_html === "object" &&
+              Object.keys(issueDetails.description_html).length === 0)
+            ? "<p></p>"
+            : issueDetails.description_html}
+          customClassName="p-3 min-h-[50px] shadow-sm" mentionHighlights={mentionConfig.mentionHighlights} />
+      )}
+      <IssueReactions />
+    </div>
+  )
+};

space/hooks/use-editor-suggestions.tsx

@@ -0,0 +1,13 @@
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+const useEditorSuggestions = () => {
+  const { mentionsStore }: RootStore = useMobxStore();
+
+  return {
+    // mentionSuggestions: mentionsStore.mentionSuggestions,
+    mentionHighlights: mentionsStore.mentionHighlights,
+  };
+};
+
+export default useEditorSuggestions;

space/pages/_app.tsx

@@ -4,6 +4,8 @@ import { ThemeProvider } from "next-themes";
 // styles
 import "styles/globals.css";
 import "styles/editor.css";
+import "styles/table.css";
+
 // contexts
 import { ToastContextProvider } from "contexts/toast.context";
 // mobx store provider

space/store/mentions.store.ts

@@ -0,0 +1,45 @@
+import { IMentionHighlight } from "@plane/lite-text-editor";
+import { RootStore } from "./root";
+import { computed, makeObservable } from "mobx";
+
+export interface IMentionsStore {
+    // mentionSuggestions: IMentionSuggestion[];
+    mentionHighlights: IMentionHighlight[];
+}
+
+export class MentionsStore implements IMentionsStore{
+
+    // root store
+    rootStore;
+
+    constructor(_rootStore: RootStore ){
+
+        // rootStore
+        this.rootStore = _rootStore;
+
+        makeObservable(this, {
+            mentionHighlights: computed,
+            // mentionSuggestions: computed
+        })
+    }
+
+    // get mentionSuggestions() {
+    //     const projectMembers = this.rootStore.project.project.
+
+    //     const suggestions = projectMembers === null ? [] : projectMembers.map((member) => ({
+    //         id: member.member.id,
+    //         type: "User",
+    //         title: member.member.display_name,
+    //         subtitle: member.member.email ?? "",
+    //         avatar: member.member.avatar,
+    //         redirect_uri: `/${member.workspace.slug}/profile/${member.member.id}`,
+    //     }))
+
+    //     return suggestions
+    // }
+
+    get mentionHighlights() {
+        const user = this.rootStore.user.currentUser;
+        return user ? [user.id] : []
+    }
+}

space/store/root.ts

@@ -5,6 +5,7 @@ import UserStore from "./user";
 import IssueStore, { IIssueStore } from "./issue";
 import ProjectStore, { IProjectStore } from "./project";
 import IssueDetailStore, { IIssueDetailStore } from "./issue_details";
+import { IMentionsStore, MentionsStore } from "./mentions.store";
 
 enableStaticRendering(typeof window === "undefined");
 
@@ -13,11 +14,13 @@ export class RootStore {
   issue: IIssueStore;
   issueDetails: IIssueDetailStore;
   project: IProjectStore;
+  mentionsStore: IMentionsStore;
 
   constructor() {
     this.user = new UserStore(this);
     this.issue = new IssueStore(this);
     this.project = new ProjectStore(this);
     this.issueDetails = new IssueDetailStore(this);
+    this.mentionsStore = new MentionsStore(this);
   }
 }

space/store/user.ts

@@ -2,7 +2,6 @@
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 // service
 import UserService from "services/user.service";
-import { ActorDetail } from "types/issue";
 // types
 import { IUser } from "types/user";
 

space/styles/globals.css

@@ -199,9 +199,9 @@
     --color-sidebar-text-400: var(--color-text-400); /* sidebar placeholder text */
 
     --color-sidebar-border-100: var(--color-border-100); /* subtle sidebar border= 1 */
-    --color-sidebar-border-200: var(--color-border-100); /* subtle sidebar border- 2 */
-    --color-sidebar-border-300: var(--color-border-100); /* strong sidebar border- 1 */
-    --color-sidebar-border-400: var(--color-border-100); /* strong sidebar border- 2 */
+    --color-sidebar-border-200: var(--color-border-200); /* subtle sidebar border- 2 */
+    --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
+    --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
   }
 }
 

space/styles/table.css

@@ -0,0 +1,194 @@
+.tableWrapper {
+  overflow-x: auto;
+  padding: 2px;
+  width: fit-content;
+  max-width: 100%;
+}
+
+.tableWrapper table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  margin: 0;
+  margin-bottom: 3rem;
+  border: 1px solid rgba(var(--color-border-200));
+  width: 100%;
+}
+
+.tableWrapper table td,
+.tableWrapper table th {
+  min-width: 1em;
+  border: 1px solid rgba(var(--color-border-200));
+  padding: 10px 15px;
+  vertical-align: top;
+  box-sizing: border-box;
+  position: relative;
+  transition: background-color 0.3s ease;
+
+  > * {
+    margin-bottom: 0;
+  }
+}
+
+.tableWrapper table td > *,
+.tableWrapper table th > * {
+  margin: 0 !important;
+  padding: 0.25rem 0 !important;
+}
+
+.tableWrapper table td.has-focus,
+.tableWrapper table th.has-focus {
+  box-shadow: rgba(var(--color-primary-300), 0.1) 0px 0px 0px 2px inset !important;
+}
+
+.tableWrapper table th {
+  font-weight: bold;
+  text-align: left;
+  background-color: rgba(var(--color-primary-100));
+}
+
+.tableWrapper table th * {
+  font-weight: 600;
+}
+
+.tableWrapper table .selectedCell:after {
+  z-index: 2;
+  position: absolute;
+  content: "";
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(var(--color-primary-300), 0.1);
+  pointer-events: none;
+}
+
+.tableWrapper table .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: -2px;
+  width: 4px;
+  z-index: 99;
+  background-color: rgba(var(--color-primary-400));
+  pointer-events: none;
+}
+
+.tableWrapper .tableControls {
+  position: absolute;
+}
+
+.tableWrapper .tableControls .columnsControl,
+.tableWrapper .tableControls .rowsControl {
+  transition: opacity ease-in 100ms;
+  position: absolute;
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tableWrapper .tableControls .columnsControl {
+  height: 20px;
+  transform: translateY(-50%);
+}
+
+.tableWrapper .tableControls .columnsControl > button {
+  color: white;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+  width: 30px;
+  height: 15px;
+}
+
+.tableWrapper .tableControls .rowsControl {
+  width: 20px;
+  transform: translateX(-50%);
+}
+
+.tableWrapper .tableControls .rowsControl > button {
+  color: white;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='%238F95B2' d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3zm0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18zm0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+  height: 30px;
+  width: 15px;
+}
+
+.tableWrapper .tableControls button {
+  background-color: rgba(var(--color-primary-100));
+  border: 1px solid rgba(var(--color-border-200));
+  border-radius: 2px;
+  background-size: 1.25rem;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: transform ease-out 100ms, background-color ease-out 100ms;
+  outline: none;
+  box-shadow: #000 0px 2px 4px;
+  cursor: pointer;
+}
+
+.tableWrapper .tableControls .tableToolbox,
+.tableWrapper .tableControls .tableColorPickerToolbox {
+  border: 1px solid rgba(var(--color-border-300));
+  background-color: rgba(var(--color-background-100));
+  padding: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  gap: 0.25rem;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem {
+  background-color: rgba(var(--color-background-100));
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: none;
+  padding: 0.1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem:hover,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover {
+  background-color: rgba(var(--color-background-100), 0.5);
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer,
+.tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer {
+  border: 1px solid rgba(var(--color-border-300));
+  border-radius: 3px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer svg,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer svg,
+.tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer svg,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.tableToolbox {
+  background-color: rgba(var(--color-background-100));
+}
+
+.tableWrapper .tableControls .tableToolbox .toolboxItem .label,
+.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .label {
+  font-size: 0.85rem;
+  color: rgba(var(--color-text-300));
+}
+
+.resize-cursor .tableWrapper .tableControls .rowsControl,
+.tableWrapper.controls--disabled .tableControls .rowsControl,
+.resize-cursor .tableWrapper .tableControls .columnsControl,
+.tableWrapper.controls--disabled .tableControls .columnsControl {
+  opacity: 0;
+  pointer-events: none;
+}

turbo.json

@@ -22,7 +22,8 @@
     "SLACK_CLIENT_SECRET",
     "JITSU_TRACKER_ACCESS_KEY",
     "JITSU_TRACKER_HOST",
-    "UNSPLASH_ACCESS_KEY"
+    "UNSPLASH_ACCESS_KEY",
+    "NEXT_PUBLIC_SLACK_CLIENT_ID"
   ],
   "pipeline": {
     "build": {