dev: update takeoff script to take custom port values

[ FEATURE ] New Issue Widget for displaying issues inside document-editor (#2920 )
* feat: added heading 3 in the editor summary markings * feat: fixed editor and summary bar sizing * feat: added `issue-embed` extension * feat: exposed issue embed extension * feat: added main embed config configuration to document editor body * feat: added peek overview and issue embed fetch function * feat: enabled slash commands to take additonal suggestions from editors * chore: replaced `IssueEmbedWidget` into widget extension * chore: removed issue embed from previous places * feat: added issue embed suggestion extension * feat: added issue embed suggestion renderer * feat: added issue embed suggestions into extensions module * feat: added issues in issueEmbedConfiguration in document editor * chore: package fixes * chore: removed log statements * feat: added title updation logic into document editor * fix: issue suggestion items, not rendering issue widget on enter * feat: added error card for issue widget * feat: improved focus logic for issue search and navigate * feat: appended transactionid for issueWidgetTransaction * chore: packages update * feat: disabled editing of title in readonly mode * feat: added issueEmbedConfig in readonly editor * fix: issue suggestions not loading after structure changed to object * feat: added toast messages for success/error messages from doc editor * fix: issue suggestions sorting issue * fix: formatting errors resolved * fix: infinite reloading of the readonly document editor * fix: css in avatar of issue widget card * feat: added show alert on pages reload * feat: added saving state for the pages editor * fix: issue with heading 3 in side bar view * style: updated issue suggestions dropdown ui * fix: Pages intiliazation and mutation with updated MobX store * fixed image uploads being cancelled on refocus due to swr * fix: issue with same description rerendering empty content fixed * fix: scroll in issue suggestion view * fix: added submission prop * fix: Updated the comment update to take issue id in inbox issues * feat:changed date representation in IssueEmbedCard * fix: page details mutation with optimistic updates using swr * fix: menu options in read only editor with auth fixed * fix: add error handling for title and page desc * fixed yarn.lock * fix: read-only editor title wrapping * fix: build error with rich text editor --------- Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com> Co-authored-by: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
2023-12-07 14:04:47 +05:30 · 2023-12-07 12:04:21 +05:30 · 2023-12-07 11:59:46 +05:30 · 2023-12-06 20:31:42 +05:30 · 2023-12-06 20:07:39 +05:30 · 2023-12-06 19:58:47 +05:30
848 changed files with 7181 additions and 6588 deletions
@@ -2,16 +2,5 @@
 *.pyc
 .env
 venv
-node_modules/
-**/node_modules/
-npm-debug.log
-.next/
-**/.next/
-.turbo/
-**/.turbo/
-build/
-**/build/
-out/
-**/out/
-dist/
-**/dist/
+node_modules
+npm-debug.log
@@ -62,14 +62,14 @@ jobs:
    runs-on: ubuntu-20.04
    needs: [branch_build_setup]
    env:
-      FRONTEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      FRONTEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-ce:${{ needs.branch_build_setup.outputs.gh_branch_name }}
    steps:
      - name: Set Frontend Docker Tag 
        run: |
          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-ce:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-ce:${{ github.event.release.tag_name }}
          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:stable
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend-ce:stable
          else
            TAG=${{ env.FRONTEND_TAG }}
          fi
@@ -104,14 +104,14 @@ jobs:
    runs-on: ubuntu-20.04
    needs: [branch_build_setup]
    env:
-      SPACE_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      SPACE_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space-ce:${{ needs.branch_build_setup.outputs.gh_branch_name }}
    steps:
      - name: Set Space Docker Tag 
        run: |
          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space-ce:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-space-ce:${{ github.event.release.tag_name }}
          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:stable
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space-ce:stable
          else
            TAG=${{ env.SPACE_TAG }}
          fi
@@ -146,14 +146,14 @@ jobs:
    runs-on: ubuntu-20.04
    needs: [branch_build_setup]
    env:
-      BACKEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      BACKEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-ce:${{ needs.branch_build_setup.outputs.gh_branch_name }}
    steps:
      - name: Set Backend Docker Tag 
        run: |
          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-ce:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-ce:${{ github.event.release.tag_name }}
          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:stable
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend-ce:stable
          else
            TAG=${{ env.BACKEND_TAG }}
          fi
@@ -188,14 +188,14 @@ jobs:
    runs-on: ubuntu-20.04
    needs: [branch_build_setup]
    env:
-      PROXY_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      PROXY_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-ce:${{ needs.branch_build_setup.outputs.gh_branch_name }}
    steps:
      - name: Set Proxy Docker Tag 
        run: |
          if [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ] && [ "${{ github.event_name }}" == "release" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ github.event.release.tag_name }}
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-ce:latest,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-ce:${{ github.event.release.tag_name }}
          elif [ "${{ needs.branch_build_setup.outputs.gh_branch_name }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:stable
+            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy-ce:stable
          else
            TAG=${{ env.PROXY_TAG }}
          fi
@@ -49,10 +49,24 @@ NGINX_PORT=80


 ```
+# Enable/Disable OAUTH - default 0 for selfhosted instance
+NEXT_PUBLIC_ENABLE_OAUTH=0
 # Public boards deploy URL
 NEXT_PUBLIC_DEPLOY_URL="http://localhost/spaces"
 ```

+
+
+## {PROJECT_FOLDER}/spaces/.env.example
+
+
+
+```
+# Flag to toggle OAuth
+NEXT_PUBLIC_ENABLE_OAUTH=0
+```
+
+

 ## {PROJECT_FOLDER}/apiserver/.env

@@ -27,8 +27,7 @@ WORKDIR /code
 COPY requirements.txt ./requirements.txt
 ADD requirements ./requirements

-# Install the local development settings
-RUN pip install -r requirements/local.txt --compile --no-cache-dir
+RUN pip install -r requirements.txt --compile --no-cache-dir

 RUN addgroup -S plane && \
    adduser -S captain -G plane
@@ -1,4 +1,4 @@
 {
-  "name": "plane-api",
-  "version": "0.14.0"
-}
+    "name": "plane-api",
+    "version": "0.13.2"
+}
@@ -95,16 +95,6 @@ class WorkSpaceMemberInviteSerializer(BaseSerializer):
    class Meta:
        model = WorkspaceMemberInvite
        fields = "__all__"
-        read_only_fields = [
-            "id",
-            "email",
-            "token",
-            "workspace",
-            "message",
-            "responded_at",
-            "created_at",
-            "updated_at",
-        ]


 class TeamSerializer(BaseSerializer):
@@ -13,7 +13,6 @@ from plane.app.views import (
    UserProjectInvitationsViewset,
    ProjectPublicCoverImagesEndpoint,
    ProjectDeployBoardViewSet,
-    UserProjectRolesEndpoint,
 )


@@ -75,11 +74,6 @@ urlpatterns = [
        ),
        name="user-project-invitations",
    ),
-    path(
-        "users/me/workspaces/<str:slug>/project-roles/",
-        UserProjectRolesEndpoint.as_view(),
-        name="user-project-roles",
-    ),
    path(
        "workspaces/<str:slug>/projects/<uuid:project_id>/join/<uuid:pk>/",
        ProjectJoinEndpoint.as_view(),
@@ -65,7 +65,6 @@ urlpatterns = [
            {
                "delete": "destroy",
                "get": "retrieve",
-                "patch": "partial_update",
            }
        ),
        name="workspace-invitations",
@@ -11,7 +11,6 @@ from .project import (
    ProjectFavoritesViewSet,
    ProjectPublicCoverImagesEndpoint,
    ProjectDeployBoardViewSet,
-    UserProjectRolesEndpoint,
 )
 from .user import (
    UserEndpoint,
@@ -34,7 +34,7 @@ from plane.app.serializers import (
 from plane.db.models import User, WorkspaceMemberInvite
 from plane.license.utils.instance_value import get_configuration_value
 from plane.bgtasks.forgot_password_task import forgot_password
-from plane.license.models import Instance
+from plane.license.models import Instance, InstanceConfiguration
 from plane.settings.redis import redis_instance
 from plane.bgtasks.magic_link_code_task import magic_link
 from plane.bgtasks.event_tracking_task import auth_events
@@ -321,19 +321,8 @@ class EmailCheckEndpoint(BaseAPIView):
                status=status.HTTP_400_BAD_REQUEST,
            )

-        # Get configuration values
-        ENABLE_SIGNUP, ENABLE_MAGIC_LINK_LOGIN = get_configuration_value(
-            [
-                {
-                    "key": "ENABLE_SIGNUP",
-                    "default": os.environ.get("ENABLE_SIGNUP"),
-                },
-                {
-                    "key": "ENABLE_MAGIC_LINK_LOGIN",
-                    "default": os.environ.get("ENABLE_MAGIC_LINK_LOGIN"),
-                },
-            ]
-        )
+        # Get the configurations
+        instance_configuration = InstanceConfiguration.objects.values("key", "value")

        email = request.data.get("email", False)

@@ -358,7 +347,12 @@ class EmailCheckEndpoint(BaseAPIView):
        if user is None:
            # Create the user
            if (
-                ENABLE_SIGNUP == "0"
+                get_configuration_value(
+                    instance_configuration,
+                    "ENABLE_SIGNUP",
+                    os.environ.get("ENABLE_SIGNUP", "0"),
+                )
+                == "0"
                and not WorkspaceMemberInvite.objects.filter(
                    email=email,
                ).exists()
@@ -378,8 +372,13 @@ class EmailCheckEndpoint(BaseAPIView):
                is_password_autoset=True,
            )

+
            if not bool(
-                ENABLE_MAGIC_LINK_LOGIN,
+                get_configuration_value(
+                    instance_configuration,
+                    "ENABLE_MAGIC_LINK_LOGIN",
+                    os.environ.get("ENABLE_MAGIC_LINK_LOGIN"),
+                ),
            ):
                return Response(
                    {"error": "Magic link sign in is disabled."},
@@ -387,15 +386,16 @@ class EmailCheckEndpoint(BaseAPIView):
                )

            # Send event
-            auth_events.delay(
-                user=user.id,
-                email=email,
-                user_agent=request.META.get("HTTP_USER_AGENT"),
-                ip=request.META.get("REMOTE_ADDR"),
-                event_name="SIGN_IN",
-                medium="MAGIC_LINK",
-                first_time=True,
-            )
+            if settings.POSTHOG_API_KEY and settings.POSTHOG_HOST:
+                auth_events.delay(
+                    user=user.id,
+                    email=email,
+                    user_agent=request.META.get("HTTP_USER_AGENT"),
+                    ip=request.META.get("REMOTE_ADDR"),
+                    event_name="SIGN_IN",
+                    medium="MAGIC_LINK",
+                    first_time=True,
+                )
            key, token, current_attempt = generate_magic_token(email=email)
            if not current_attempt:
                return Response(
@@ -413,21 +413,28 @@ class EmailCheckEndpoint(BaseAPIView):
        else:
            if user.is_password_autoset:
                ## Generate a random token
-                if not bool(ENABLE_MAGIC_LINK_LOGIN):
+                if not bool(
+                    get_configuration_value(
+                        instance_configuration,
+                        "ENABLE_MAGIC_LINK_LOGIN",
+                        os.environ.get("ENABLE_MAGIC_LINK_LOGIN"),
+                    ),
+                ):
                    return Response(
                        {"error": "Magic link sign in is disabled."},
                        status=status.HTTP_400_BAD_REQUEST,
                    )

-                auth_events.delay(
-                    user=user.id,
-                    email=email,
-                    user_agent=request.META.get("HTTP_USER_AGENT"),
-                    ip=request.META.get("REMOTE_ADDR"),
-                    event_name="SIGN_IN",
-                    medium="MAGIC_LINK",
-                    first_time=False,
-                )
+                if settings.POSTHOG_API_KEY and settings.POSTHOG_HOST:
+                    auth_events.delay(
+                        user=user.id,
+                        email=email,
+                        user_agent=request.META.get("HTTP_USER_AGENT"),
+                        ip=request.META.get("REMOTE_ADDR"),
+                        event_name="SIGN_IN",
+                        medium="MAGIC_LINK",
+                        first_time=False,
+                    )

                # Generate magic token
                key, token, current_attempt = generate_magic_token(email=email)
@@ -447,15 +454,16 @@ class EmailCheckEndpoint(BaseAPIView):
                    status=status.HTTP_200_OK,
                )
            else:
-                auth_events.delay(
-                    user=user.id,
-                    email=email,
-                    user_agent=request.META.get("HTTP_USER_AGENT"),
-                    ip=request.META.get("REMOTE_ADDR"),
-                    event_name="SIGN_IN",
-                    medium="EMAIL",
-                    first_time=False,
-                )
+                if settings.POSTHOG_API_KEY and settings.POSTHOG_HOST:
+                    auth_events.delay(
+                        user=user.id,
+                        email=email,
+                        user_agent=request.META.get("HTTP_USER_AGENT"),
+                        ip=request.META.get("REMOTE_ADDR"),
+                        event_name="SIGN_IN",
+                        medium="EMAIL",
+                        first_time=False,
+                    )

                # User should enter password to login
                return Response(
@@ -27,7 +27,7 @@ from plane.db.models import (
    ProjectMember,
 )
 from plane.settings.redis import redis_instance
-from plane.license.models import Instance
+from plane.license.models import InstanceConfiguration, Instance
 from plane.license.utils.instance_value import get_configuration_value
 from plane.bgtasks.event_tracking_task import auth_events

@@ -52,6 +52,8 @@ class SignUpEndpoint(BaseAPIView):
                status=status.HTTP_400_BAD_REQUEST,
            )

+        instance_configuration = InstanceConfiguration.objects.values("key", "value")
+
        email = request.data.get("email", False)
        password = request.data.get("password", False)
        ## Raise exception if any of the above are missing
@@ -71,20 +73,14 @@ class SignUpEndpoint(BaseAPIView):
                status=status.HTTP_400_BAD_REQUEST,
            )

-        # get configuration values
-        # Get configuration values
-        ENABLE_SIGNUP, = get_configuration_value(
-            [
-                {
-                    "key": "ENABLE_SIGNUP",
-                    "default": os.environ.get("ENABLE_SIGNUP"),
-                },
-            ]
-        )
-
        # If the sign up is not enabled and the user does not have invite disallow him from creating the account
        if (
-            ENABLE_SIGNUP == "0"
+            get_configuration_value(
+                instance_configuration,
+                "ENABLE_SIGNUP",
+                os.environ.get("ENABLE_SIGNUP", "0"),
+            )
+            == "0"
            and not WorkspaceMemberInvite.objects.filter(
                email=email,
            ).exists()
@@ -173,17 +169,16 @@ class SignInEndpoint(BaseAPIView):

        # Create the user
        else:
-            ENABLE_SIGNUP, = get_configuration_value(
-                [
-                    {
-                        "key": "ENABLE_SIGNUP",
-                        "default": os.environ.get("ENABLE_SIGNUP"),
-                    },
-                ]
-            )
+            # Get the configurations
+            instance_configuration = InstanceConfiguration.objects.values("key", "value")
            # Create the user
            if (
-                ENABLE_SIGNUP == "0"
+                get_configuration_value(
+                    instance_configuration,
+                    "ENABLE_SIGNUP",
+                    os.environ.get("ENABLE_SIGNUP", "0"),
+                )
+                == "0"
                and not WorkspaceMemberInvite.objects.filter(
                    email=email,
                ).exists()
@@ -269,15 +264,16 @@ class SignInEndpoint(BaseAPIView):
        workspace_member_invites.delete()
        project_member_invites.delete()
        # Send event
-        auth_events.delay(
-            user=user.id,
-            email=email,
-            user_agent=request.META.get("HTTP_USER_AGENT"),
-            ip=request.META.get("REMOTE_ADDR"),
-            event_name="SIGN_IN",
-            medium="EMAIL",
-            first_time=False,
-        )
+        if settings.POSTHOG_API_KEY and settings.POSTHOG_HOST:
+            auth_events.delay(
+                user=user.id,
+                email=email,
+                user_agent=request.META.get("HTTP_USER_AGENT"),
+                ip=request.META.get("REMOTE_ADDR"),
+                event_name="SIGN_IN",
+                medium="EMAIL",
+                first_time=False,
+            )

        access_token, refresh_token = get_tokens_for_user(user)
        data = {
@@ -343,16 +339,24 @@ class MagicSignInEndpoint(BaseAPIView):

            if str(token) == str(user_token):
                user = User.objects.get(email=email)
+                if not user.is_active:
+                    return Response(
+                        {
+                            "error": "Your account has been deactivated. Please contact your site administrator."
+                        },
+                        status=status.HTTP_403_FORBIDDEN,
+                    )
                # Send event
-                auth_events.delay(
-                    user=user.id,
-                    email=email,
-                    user_agent=request.META.get("HTTP_USER_AGENT"),
-                    ip=request.META.get("REMOTE_ADDR"),
-                    event_name="SIGN_IN",
-                    medium="MAGIC_LINK",
-                    first_time=False,
-                )
+                if settings.POSTHOG_API_KEY and settings.POSTHOG_HOST:
+                    auth_events.delay(
+                        user=user.id,
+                        email=email,
+                        user_agent=request.META.get("HTTP_USER_AGENT"),
+                        ip=request.META.get("REMOTE_ADDR"),
+                        event_name="SIGN_IN",
+                        medium="MAGIC_LINK",
+                        first_time=False,
+                    )

                user.is_active = True
                user.is_email_verified = True
@@ -11,6 +11,7 @@ from rest_framework.response import Response

 # Module imports
 from .base import BaseAPIView
+from plane.license.models import InstanceConfiguration
 from plane.license.utils.instance_value import get_configuration_value


@@ -20,101 +21,89 @@ class ConfigurationEndpoint(BaseAPIView):
    ]

    def get(self, request):
-
-        # Get all the configuration
-        (
-            GOOGLE_CLIENT_ID,
-            GITHUB_CLIENT_ID,
-            GITHUB_APP_NAME,
-            EMAIL_HOST_USER,
-            EMAIL_HOST_PASSWORD,
-            ENABLE_MAGIC_LINK_LOGIN,
-            ENABLE_EMAIL_PASSWORD,
-            SLACK_CLIENT_ID,
-            POSTHOG_API_KEY,
-            POSTHOG_HOST,
-            UNSPLASH_ACCESS_KEY,
-            OPENAI_API_KEY,
-        ) = get_configuration_value(
-            [
-                {
-                    "key": "GOOGLE_CLIENT_ID",
-                    "default": os.environ.get("GOOGLE_CLIENT_ID", None),
-                },
-                {
-                    "key": "GITHUB_CLIENT_ID",
-                    "default": os.environ.get("GITHUB_CLIENT_ID", None),
-                },
-                {
-                    "key": "GITHUB_APP_NAME",
-                    "default": os.environ.get("GITHUB_APP_NAME", None),
-                },
-                {
-                    "key": "EMAIL_HOST_USER",
-                    "default": os.environ.get("EMAIL_HOST_USER", None),
-                },
-                {
-                    "key": "EMAIL_HOST_PASSWORD",
-                    "default": os.environ.get("EMAIL_HOST_PASSWORD", None),
-                },
-                {
-                    "key": "ENABLE_MAGIC_LINK_LOGIN",
-                    "default": os.environ.get("ENABLE_MAGIC_LINK_LOGIN", "1"),
-                },
-                {
-                    "key": "ENABLE_EMAIL_PASSWORD",
-                    "default": os.environ.get("ENABLE_EMAIL_PASSWORD", "1"),
-                },
-                {
-                    "key": "SLACK_CLIENT_ID",
-                    "default": os.environ.get("SLACK_CLIENT_ID", "1"),
-                },
-                {
-                    "key": "POSTHOG_API_KEY",
-                    "default": os.environ.get("POSTHOG_API_KEY", "1"),
-                },
-                {
-                    "key": "POSTHOG_HOST",
-                    "default": os.environ.get("POSTHOG_HOST", "1"),
-                },
-                {
-                    "key": "UNSPLASH_ACCESS_KEY",
-                    "default": os.environ.get("UNSPLASH_ACCESS_KEY", "1"),
-                },
-                {
-                    "key": "OPENAI_API_KEY",
-                    "default": os.environ.get("OPENAI_API_KEY", "1"),
-                },
-            ]
-        )
+        instance_configuration = InstanceConfiguration.objects.values("key", "value")

        data = {}
        # Authentication
-        data["google_client_id"] = GOOGLE_CLIENT_ID if GOOGLE_CLIENT_ID and GOOGLE_CLIENT_ID != "\"\"" else None
-        data["github_client_id"] = GITHUB_CLIENT_ID if GITHUB_CLIENT_ID and GITHUB_CLIENT_ID != "\"\"" else None
-        data["github_app_name"] = GITHUB_APP_NAME
+        data["google_client_id"] = get_configuration_value(
+            instance_configuration,
+            "GOOGLE_CLIENT_ID",
+            os.environ.get("GOOGLE_CLIENT_ID", None),
+        )
+        data["github_client_id"] = get_configuration_value(
+            instance_configuration,
+            "GITHUB_CLIENT_ID",
+            os.environ.get("GITHUB_CLIENT_ID", None),
+        )
+        data["github_app_name"] = get_configuration_value(
+            instance_configuration,
+            "GITHUB_APP_NAME",
+            os.environ.get("GITHUB_APP_NAME", None),
+        )
        data["magic_login"] = (
-            bool(EMAIL_HOST_USER) and bool(EMAIL_HOST_PASSWORD)
-        ) and ENABLE_MAGIC_LINK_LOGIN == "1"
+            bool(
+                get_configuration_value(
+                    instance_configuration,
+                    "EMAIL_HOST_USER",
+                    os.environ.get("EMAIL_HOST_USER", None),
+                ),
+            )
+            and bool(
+                get_configuration_value(
+                    instance_configuration,
+                    "EMAIL_HOST_PASSWORD",
+                    os.environ.get("EMAIL_HOST_PASSWORD", None),
+                )
+            )
+        ) and get_configuration_value(
+            instance_configuration, "ENABLE_MAGIC_LINK_LOGIN", "1"
+        ) == "1"

-        data["email_password_login"] = ENABLE_EMAIL_PASSWORD == "1"
+        data["email_password_login"] = (
+            get_configuration_value(
+                instance_configuration, "ENABLE_EMAIL_PASSWORD", "1"
+            )
+            == "1"
+        )
        # Slack client
-        data["slack_client_id"] = SLACK_CLIENT_ID
+        data["slack_client_id"] = get_configuration_value(
+            instance_configuration,
+            "SLACK_CLIENT_ID",
+            os.environ.get("SLACK_CLIENT_ID", None),
+        )

        # Posthog
-        data["posthog_api_key"] = POSTHOG_API_KEY
-        data["posthog_host"] = POSTHOG_HOST
+        data["posthog_api_key"] = get_configuration_value(
+            instance_configuration,
+            "POSTHOG_API_KEY",
+            os.environ.get("POSTHOG_API_KEY", None),
+        )
+        data["posthog_host"] = get_configuration_value(
+            instance_configuration,
+            "POSTHOG_HOST",
+            os.environ.get("POSTHOG_HOST", None),
+        )

        # Unsplash
-        data["has_unsplash_configured"] = bool(UNSPLASH_ACCESS_KEY)
+        data["has_unsplash_configured"] = bool(
+            get_configuration_value(
+                instance_configuration,
+                "UNSPLASH_ACCESS_KEY",
+                os.environ.get("UNSPLASH_ACCESS_KEY", None),
+            )
+        )

        # Open AI settings
-        data["has_openai_configured"] = bool(OPENAI_API_KEY)
+        data["has_openai_configured"] = bool(
+            get_configuration_value(
+                instance_configuration,
+                "OPENAI_API_KEY",
+                os.environ.get("OPENAI_API_KEY", None),
+            )
+        )

-        # File size settings
        data["file_size_limit"] = float(os.environ.get("FILE_SIZE_LIMIT", 5242880))

-        # is self managed
        data["is_self_managed"] = bool(int(os.environ.get("IS_SELF_MANAGED", "1")))

        return Response(data, status=status.HTTP_200_OK)
@@ -1,7 +1,6 @@
 # Python imports
 import requests
 import os
-
 # Third party imports
 from openai import OpenAI
 from rest_framework.response import Response
@@ -16,31 +15,23 @@ from plane.app.permissions import ProjectEntityPermission
 from plane.db.models import Workspace, Project
 from plane.app.serializers import ProjectLiteSerializer, WorkspaceLiteSerializer
 from plane.utils.integrations.github import get_release_notes
+from plane.license.models import InstanceConfiguration
 from plane.license.utils.instance_value import get_configuration_value

-
 class GPTIntegrationEndpoint(BaseAPIView):
    permission_classes = [
        ProjectEntityPermission,
    ]

    def post(self, request, slug, project_id):
-        OPENAI_API_KEY, GPT_ENGINE = get_configuration_value(
-            [
-                {
-                    "key": "OPENAI_API_KEY",
-                    "default": os.environ.get("OPENAI_API_KEY", None),
-                },
-                {
-                    "key": "GPT_ENGINE",
-                    "default": os.environ.get("GPT_ENGINE", "gpt-3.5-turbo"),
-                },
-            ]
-        )

        # Get the configuration value
+        instance_configuration = InstanceConfiguration.objects.values("key", "value")
+        api_key = get_configuration_value(instance_configuration, "OPENAI_API_KEY", os.environ.get("OPENAI_API_KEY"))
+        gpt_engine = get_configuration_value(instance_configuration, "GPT_ENGINE", os.environ.get("GPT_ENGINE", "gpt-3.5-turbo"))
+
        # Check the keys
-        if not OPENAI_API_KEY or not GPT_ENGINE:
+        if not api_key or not gpt_engine:
            return Response(
                {"error": "OpenAI API key and engine is required"},
                status=status.HTTP_400_BAD_REQUEST,
@@ -57,11 +48,11 @@ class GPTIntegrationEndpoint(BaseAPIView):
        final_text = task + "\n" + prompt

        client = OpenAI(
-            api_key=OPENAI_API_KEY,
+            api_key=api_key,
        )

        response = client.chat.completions.create(
-            model=GPT_ENGINE,
+            model=gpt_engine,
            messages=[{"role": "user", "content": final_text}],
        )

@@ -88,17 +79,13 @@ class ReleaseNotesEndpoint(BaseAPIView):


 class UnsplashEndpoint(BaseAPIView):
+
    def get(self, request):
-        UNSPLASH_ACCESS_KEY, = get_configuration_value(
-            [
-                {
-                    "key": "UNSPLASH_ACCESS_KEY",
-                    "default": os.environ.get("UNSPLASH_ACCESS_KEY"),
-                }
-            ]
-        )
+        instance_configuration = InstanceConfiguration.objects.values("key", "value")
+        unsplash_access_key = get_configuration_value(instance_configuration, "UNSPLASH_ACCESS_KEY", os.environ.get("UNSPLASH_ACCESS_KEY"))
+
        # Check unsplash access key
-        if not UNSPLASH_ACCESS_KEY:
+        if not unsplash_access_key:
            return Response([], status=status.HTTP_200_OK)

        # Query parameters
@@ -107,9 +94,9 @@ class UnsplashEndpoint(BaseAPIView):
        per_page = request.GET.get("per_page", 20)

        url = (
-            f"https://api.unsplash.com/search/photos/?client_id={UNSPLASH_ACCESS_KEY}&query={query}&page=${page}&per_page={per_page}"
+            f"https://api.unsplash.com/search/photos/?client_id={unsplash_access_key}&query={query}&page=${page}&per_page={per_page}"
            if query
-            else f"https://api.unsplash.com/photos/?client_id={UNSPLASH_ACCESS_KEY}&page={page}&per_page={per_page}"
+            else f"https://api.unsplash.com/photos/?client_id={unsplash_access_key}&page={page}&per_page={per_page}"
        )

        headers = {
@@ -30,7 +30,7 @@ from plane.db.models import (
 )
 from plane.bgtasks.event_tracking_task import auth_events
 from .base import BaseAPIView
-from plane.license.models import Instance
+from plane.license.models import InstanceConfiguration, Instance
 from plane.license.utils.instance_value import get_configuration_value


@@ -86,14 +86,7 @@ def get_access_token(request_token: str, client_id: str) -> str:
    if not request_token:
        raise ValueError("The request token has to be supplied!")

-    (CLIENT_SECRET,) = get_configuration_value(
-        [
-            {
-                "key": "GITHUB_CLIENT_SECRET",
-                "default": os.environ.get("GITHUB_CLIENT_SECRET", None),
-            },
-        ]
-    )
+    CLIENT_SECRET = os.environ.get("GITHUB_CLIENT_SECRET")

    url = f"https://github.com/login/oauth/access_token?client_id={client_id}&client_secret={CLIENT_SECRET}&code={request_token}"
    headers = {"accept": "application/json"}
@@ -154,18 +147,22 @@ class OauthEndpoint(BaseAPIView):
            id_token = request.data.get("credential", False)
            client_id = request.data.get("clientId", False)

-            GOOGLE_CLIENT_ID, GITHUB_CLIENT_ID = get_configuration_value(
-                [
-                    {
-                        "key": "GOOGLE_CLIENT_ID",
-                        "default": os.environ.get("GOOGLE_CLIENT_ID"),
-                    },
-                    {
-                        "key": "GITHUB_CLIENT_ID",
-                        "default": os.environ.get("GITHUB_CLIENT_ID"),
-                    },
-                ]
+            instance_configuration = InstanceConfiguration.objects.values(
+                "key", "value"
            )
+            if not get_configuration_value(
+                instance_configuration,
+                "GOOGLE_CLIENT_ID",
+                os.environ.get("GOOGLE_CLIENT_ID"),
+            ) or not get_configuration_value(
+                instance_configuration,
+                "GITHUB_CLIENT_ID",
+                os.environ.get("GITHUB_CLIENT_ID"),
+            ):
+                return Response(
+                    {"error": "Github or Google login is not configured"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )

            if not medium or not id_token:
                return Response(
@@ -176,19 +173,9 @@ class OauthEndpoint(BaseAPIView):
                )

            if medium == "google":
-                if not GOOGLE_CLIENT_ID:
-                    return Response(
-                        {"error": "Google login is not configured"},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
                data = validate_google_token(id_token, client_id)

            if medium == "github":
-                if not GITHUB_CLIENT_ID:
-                    return Response(
-                        {"error": "Github login is not configured"},
-                        status=status.HTTP_400_BAD_REQUEST,
-                    )
                access_token = get_access_token(id_token, client_id)
                data = get_user_data(access_token)

@@ -291,15 +278,16 @@ class OauthEndpoint(BaseAPIView):
            )

            # Send event
-            auth_events.delay(
-                user=user.id,
-                email=email,
-                user_agent=request.META.get("HTTP_USER_AGENT"),
-                ip=request.META.get("REMOTE_ADDR"),
-                event_name="SIGN_IN",
-                medium=medium.upper(),
-                first_time=False,
-            )
+            if settings.POSTHOG_API_KEY and settings.POSTHOG_HOST:
+                auth_events.delay(
+                    user=user.id,
+                    email=email,
+                    user_agent=request.META.get("HTTP_USER_AGENT"),
+                    ip=request.META.get("REMOTE_ADDR"),
+                    event_name="SIGN_IN",
+                    medium=medium.upper(),
+                    first_time=False,
+                )

            access_token, refresh_token = get_tokens_for_user(user)

@@ -310,16 +298,17 @@ class OauthEndpoint(BaseAPIView):
            return Response(data, status=status.HTTP_200_OK)

        except User.DoesNotExist:
-            (ENABLE_SIGNUP,) = get_configuration_value(
-                [
-                    {
-                        "key": "ENABLE_SIGNUP",
-                        "default": os.environ.get("ENABLE_SIGNUP", "0"),
-                    }
-                ]
+            ## Signup Case
+            instance_configuration = InstanceConfiguration.objects.values(
+                "key", "value"
            )
            if (
-                ENABLE_SIGNUP == "0"
+                get_configuration_value(
+                    instance_configuration,
+                    "ENABLE_SIGNUP",
+                    os.environ.get("ENABLE_SIGNUP", "0"),
+                )
+                == "0"
                and not WorkspaceMemberInvite.objects.filter(
                    email=email,
                ).exists()
@@ -422,15 +411,16 @@ class OauthEndpoint(BaseAPIView):
            project_member_invites.delete()

            # Send event
-            auth_events.delay(
-                user=user.id,
-                email=email,
-                user_agent=request.META.get("HTTP_USER_AGENT"),
-                ip=request.META.get("REMOTE_ADDR"),
-                event_name="SIGN_IN",
-                medium=medium.upper(),
-                first_time=True,
-            )
+            if settings.POSTHOG_API_KEY and settings.POSTHOG_HOST:
+                auth_events.delay(
+                    user=user.id,
+                    email=email,
+                    user_agent=request.META.get("HTTP_USER_AGENT"),
+                    ip=request.META.get("REMOTE_ADDR"),
+                    event_name="SIGN_IN",
+                    medium=medium.upper(),
+                    first_time=True,
+                )

            SocialLoginConnection.objects.update_or_create(
                medium=medium,
@@ -39,7 +39,6 @@ from plane.app.serializers import (
 )

 from plane.app.permissions import (
-    WorkspaceUserPermission,
    ProjectBasePermission,
    ProjectMemberPermission,
 )
@@ -166,7 +165,7 @@ class ProjectViewSet(WebhookMixin, BaseViewSet):
                        workspace__slug=slug,
                        is_active=True,
                    ).select_related("member"),
-                    to_attr="members_list",
+                    to_attr='members_list'
                )
            )
            .order_by("sort_order", "name")
@@ -1050,20 +1049,3 @@ class ProjectDeployBoardViewSet(BaseViewSet):

        serializer = ProjectDeployBoardSerializer(project_deploy_board)
        return Response(serializer.data, status=status.HTTP_200_OK)
-
-
-class UserProjectRolesEndpoint(BaseAPIView):
-    permission_classes = [
-        WorkspaceUserPermission,
-    ]
-
-    def get(self, request, slug):
-        project_members = ProjectMember.objects.filter(
-            workspace__slug=slug,
-            member_id=request.user.id,
-        ).values("project_id", "role")
-
-        project_members = {
-            str(member["project_id"]): member["role"] for member in project_members
-        }
-        return Response(project_members, status=status.HTTP_200_OK)
@@ -49,10 +49,6 @@ class UserEndpoint(BaseViewSet):
        # Check all workspace user is active
        user = self.get_object()

-        # Instance admin check
-        if InstanceAdmin.objects.filter(user=user).exists():
-            return Response({"error": "You cannot deactivate your account since you are an instance admin"}, status=status.HTTP_400_BAD_REQUEST)
-
        projects_to_deactivate = []
        workspaces_to_deactivate = []

@@ -408,14 +408,15 @@ class WorkspaceJoinEndpoint(BaseAPIView):
                    workspace_invite.delete()
                
                # Send event
-                workspace_invite_event.delay(
-                    user=user.id if user is not None else None,
-                    email=email,
-                    user_agent=request.META.get("HTTP_USER_AGENT"),
-                    ip=request.META.get("REMOTE_ADDR"),
-                    event_name="MEMBER_ACCEPTED",
-                    accepted_from="EMAIL",
-                )
+                if settings.POSTHOG_API_KEY and settings.POSTHOG_HOST:
+                    workspace_invite_event.delay(
+                        user=user.id if user is not None else None,
+                        email=email,
+                        user_agent=request.META.get("HTTP_USER_AGENT"),
+                        ip=request.META.get("REMOTE_ADDR"),
+                        event_name="MEMBER_ACCEPTED",
+                        accepted_from="EMAIL",
+                    )

                return Response(
                    {"message": "Workspace Invitation Accepted"},
@@ -18,6 +18,7 @@ from sentry_sdk import capture_exception
 from plane.db.models import Issue
 from plane.utils.analytics_plot import build_graph_plot
 from plane.utils.issue_filters import issue_filters
+from plane.license.models import InstanceConfiguration, Instance
 from plane.license.utils.instance_value import get_email_configuration

 row_mapping = {
@@ -51,6 +52,11 @@ def send_export_email(email, slug, csv_buffer, rows):

    csv_buffer.seek(0)

+    # Configure email connection from the database
+    instance_configuration = InstanceConfiguration.objects.filter(
+        key__startswith="EMAIL_"
+    ).values("key", "value")
+
    (
        EMAIL_HOST,
        EMAIL_HOST_USER,
@@ -58,7 +64,7 @@ def send_export_email(email, slug, csv_buffer, rows):
        EMAIL_PORT,
        EMAIL_USE_TLS,
        EMAIL_FROM,
-    ) = get_email_configuration()
+    ) = get_email_configuration(instance_configuration=instance_configuration)

    connection = get_connection(
        host=EMAIL_HOST,
@@ -1,78 +1,50 @@
 import uuid
-import os

-# third party imports
+from posthog import Posthog
+from django.conf import settings
+
+#third party imports
 from celery import shared_task
 from sentry_sdk import capture_exception
-from posthog import Posthog
-
-# module imports
-from plane.license.utils.instance_value import get_configuration_value
-
-
-def posthogConfiguration():
-    POSTHOG_API_KEY, POSTHOG_HOST = get_configuration_value(
-        [
-            {
-                "key": "POSTHOG_API_KEY",
-                "default": os.environ.get("POSTHOG_API_KEY", None),
-            },
-            {
-                "key": "POSTHOG_HOST",
-                "default": os.environ.get("POSTHOG_HOST", None),
-            },
-        ]
-    )
-    if POSTHOG_API_KEY and POSTHOG_HOST:
-        return POSTHOG_API_KEY, POSTHOG_HOST
-    else:
-        return None, None


@shared_task
 def auth_events(user, email, user_agent, ip, event_name, medium, first_time):
    try:
-        POSTHOG_API_KEY, POSTHOG_HOST = posthogConfiguration()
-
-        if POSTHOG_API_KEY and POSTHOG_HOST:
-            posthog = Posthog(POSTHOG_API_KEY, host=POSTHOG_HOST)
-            posthog.capture(
-                email,
-                event=event_name,
-                properties={
-                        "event_id": uuid.uuid4().hex,
-                        "user": {"email": email, "id": str(user)},
-                        "device_ctx": {
-                            "ip": ip,
-                            "user_agent": user_agent,
-                        },
-                        "medium": medium,
-                        "first_time": first_time
-                }
-            )
+        posthog = Posthog(settings.POSTHOG_API_KEY, host=settings.POSTHOG_HOST)
+        posthog.capture(
+            email,
+            event=event_name,
+            properties={
+                    "event_id": uuid.uuid4().hex,
+                    "user": {"email": email, "id": str(user)},
+                    "device_ctx": {
+                        "ip": ip,
+                        "user_agent": user_agent,
+                    },
+                    "medium": medium,
+                    "first_time": first_time
+            }
+        )
    except Exception as e:
        capture_exception(e)
 
-
@shared_task
 def workspace_invite_event(user, email, user_agent, ip, event_name, accepted_from):
    try:
-        POSTHOG_API_KEY, POSTHOG_HOST = posthogConfiguration()
-
-        if POSTHOG_API_KEY and POSTHOG_HOST:
-            posthog = Posthog(POSTHOG_API_KEY, host=POSTHOG_HOST)
-            posthog.capture(
-                email,
-                event=event_name,
-                properties={
-                        "event_id": uuid.uuid4().hex,
-                        "user": {"email": email, "id": str(user)},
-                        "device_ctx": {
-                            "ip": ip,
-                            "user_agent": user_agent,
-                        },
-                        "accepted_from": accepted_from
-                }
-            )
+        posthog = Posthog(settings.POSTHOG_API_KEY, host=settings.POSTHOG_HOST)
+        posthog.capture(
+            email,
+            event=event_name,
+            properties={
+                    "event_id": uuid.uuid4().hex,
+                    "user": {"email": email, "id": str(user)},
+                    "device_ctx": {
+                        "ip": ip,
+                        "user_agent": user_agent,
+                    },
+                    "accepted_from": accepted_from
+            }
+        )
    except Exception as e:
        capture_exception(e)
@@ -14,6 +14,7 @@ from celery import shared_task
 from sentry_sdk import capture_exception

 # Module imports
+from plane.license.models import InstanceConfiguration, Instance
 from plane.license.utils.instance_value import get_email_configuration


@@ -25,6 +26,10 @@ def forgot_password(first_name, email, uidb64, token, current_site):
        )
        abs_url = str(current_site) + relative_link

+        instance_configuration = InstanceConfiguration.objects.filter(
+            key__startswith="EMAIL_"
+        ).values("key", "value")
+
        (
            EMAIL_HOST,
            EMAIL_HOST_USER,
@@ -32,7 +37,7 @@ def forgot_password(first_name, email, uidb64, token, current_site):
            EMAIL_PORT,
            EMAIL_USE_TLS,
            EMAIL_FROM,
-        ) = get_email_configuration()
+        ) = get_email_configuration(instance_configuration=instance_configuration)

        subject = "A new password to your Plane account has been requested"

@@ -46,6 +51,9 @@ def forgot_password(first_name, email, uidb64, token, current_site):

        text_content = strip_tags(html_content)

+        instance_configuration = InstanceConfiguration.objects.filter(
+            key__startswith="EMAIL_"
+        ).values("key", "value")
        connection = get_connection(
            host=EMAIL_HOST,
            port=int(EMAIL_PORT),
@@ -14,12 +14,17 @@ from celery import shared_task
 from sentry_sdk import capture_exception

 # Module imports
+from plane.license.models import InstanceConfiguration, Instance
 from plane.license.utils.instance_value import get_email_configuration


@shared_task
 def magic_link(email, key, token, current_site):
    try:
+        instance_configuration = InstanceConfiguration.objects.filter(
+            key__startswith="EMAIL_"
+        ).values("key", "value")
+
        (
            EMAIL_HOST,
            EMAIL_HOST_USER,
@@ -27,7 +32,7 @@ def magic_link(email, key, token, current_site):
            EMAIL_PORT,
            EMAIL_USE_TLS,
            EMAIL_FROM,
-        ) = get_email_configuration()
+        ) = get_email_configuration(instance_configuration=instance_configuration)

        # Send the mail
        subject = f"Your unique Plane login code is {token}"
@@ -13,6 +13,7 @@ from sentry_sdk import capture_exception

 # Module imports
 from plane.db.models import Project, User, ProjectMemberInvite
+from plane.license.models import InstanceConfiguration
 from plane.license.utils.instance_value import get_email_configuration

@shared_task
@@ -46,6 +47,7 @@ def project_invitation(email, project_id, token, current_site, invitor):
        project_member_invite.save()

        # Configure email connection from the database
+        instance_configuration = InstanceConfiguration.objects.filter(key__startswith='EMAIL_').values("key", "value")
        (
            EMAIL_HOST,
            EMAIL_HOST_USER,
@@ -53,7 +55,7 @@ def project_invitation(email, project_id, token, current_site, invitor):
            EMAIL_PORT,
            EMAIL_USE_TLS,
            EMAIL_FROM,
-        ) = get_email_configuration()
+        ) = get_email_configuration(instance_configuration=instance_configuration)

        connection = get_connection(
            host=EMAIL_HOST,
@@ -17,6 +17,7 @@ from slack_sdk.errors import SlackApiError

 # Module imports
 from plane.db.models import Workspace, WorkspaceMemberInvite, User
+from plane.license.models import InstanceConfiguration, Instance
 from plane.license.utils.instance_value import get_email_configuration


@@ -36,6 +37,9 @@ def workspace_invitation(email, workspace_id, token, current_site, invitor):
        # The complete url including the domain
        abs_url = str(current_site) + relative_link

+        instance_configuration = InstanceConfiguration.objects.filter(
+            key__startswith="EMAIL_"
+        ).values("key", "value")

        (
            EMAIL_HOST,
@@ -44,7 +48,7 @@ def workspace_invitation(email, workspace_id, token, current_site, invitor):
            EMAIL_PORT,
            EMAIL_USE_TLS,
            EMAIL_FROM,
-        ) = get_email_configuration()
+        ) = get_email_configuration(instance_configuration=instance_configuration)

        # Subject of the email
        subject = f"{user.first_name or user.display_name or user.email} has invited you to join them in {workspace.name} on Plane"
@@ -65,6 +69,9 @@ def workspace_invitation(email, workspace_id, token, current_site, invitor):
        workspace_member_invite.message = text_content
        workspace_member_invite.save()

+        instance_configuration = InstanceConfiguration.objects.filter(
+            key__startswith="EMAIL_"
+        ).values("key", "value")
        connection = get_connection(
            host=EMAIL_HOST,
            port=int(EMAIL_PORT),
@@ -28,6 +28,10 @@ app.conf.beat_schedule = {
        "task": "plane.bgtasks.file_asset_task.delete_file_asset",
        "schedule": crontab(hour=0, minute=0),
    },
+    "check-instance-verification": {
+        "task": "plane.license.bgtasks.instance_verification_task.instance_verification_task",
+        "schedule": crontab(minute=0, hour='*/4'),
+    },
 }

 # Load task modules from all registered Django app configs.
@@ -30,7 +30,7 @@ from plane.license.api.serializers import (
 from plane.license.api.permissions import (
    InstanceAdminPermission,
 )
-from plane.db.models import User, WorkspaceMember, ProjectMember
+from plane.db.models import User
 from plane.license.utils.encryption import encrypt_data


@@ -0,0 +1,136 @@
+# Python imports
+import os
+import json
+import requests
+
+# Django imports
+from django.conf import settings
+
+# Third party imports
+from celery import shared_task
+
+# Module imports
+from plane.db.models import User
+from plane.license.models import Instance, InstanceAdmin
+
+
+def instance_verification(instance):
+    with open("package.json", "r") as file:
+        # Load JSON content from the file
+        data = json.load(file)
+
+    headers = {"Content-Type": "application/json"}
+    payload = {
+        "instance_key": settings.INSTANCE_KEY,
+        "version": data.get("version", 0.1),
+        "machine_signature": os.environ.get("MACHINE_SIGNATURE", "machine-signature"),
+        "user_count": User.objects.filter(is_bot=False).count(),
+    }
+    # Register the instance
+    response = requests.post(
+        f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/",
+        headers=headers,
+        data=json.dumps(payload),
+        timeout=30,
+    )
+
+    # check response status
+    if response.status_code == 201:
+        data = response.json()
+        # Update instance
+        instance.instance_id = data.get("id")
+        instance.license_key = data.get("license_key")
+        instance.api_key = data.get("api_key")
+        instance.version = data.get("version")
+        instance.user_count = data.get("user_count", 0)
+        instance.is_verified = True
+        instance.save()
+    else:
+        return
+
+
+def admin_verification(instance):
+    # Save the user in control center
+    headers = {
+        "Content-Type": "application/json",
+        "x-instance-id": instance.instance_id,
+        "x-api-key": instance.api_key,
+    }
+
+    # Get all the unverified instance admins
+    instance_admins = InstanceAdmin.objects.filter(is_verified=False).select_related(
+        "user"
+    )
+    updated_instance_admin = []
+
+    # Verify the instance admin
+    for instance_admin in instance_admins:
+        instance_admin.is_verified = True
+        # Create the admin
+        response = requests.post(
+            f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/users/register/",
+            headers=headers,
+            data=json.dumps(
+                {
+                    "email": str(instance_admin.user.email),
+                    "signup_mode": "EMAIL",
+                    "is_admin": True,
+                }
+            ),
+            timeout=30,
+        )
+        updated_instance_admin.append(instance_admin)
+
+    # update all the instance admins
+    InstanceAdmin.objects.bulk_update(
+        updated_instance_admin, ["is_verified"], batch_size=10
+    )
+    return
+
+def instance_user_count(instance):
+    try:
+        instance_users = User.objects.filter(is_bot=False).count()
+
+        # Update the count in the license engine
+        payload = {
+            "user_count": instance_users,
+        }
+
+        # Save the user in control center
+        headers = {
+            "Content-Type": "application/json",
+            "x-instance-id": instance.instance_id,
+            "x-api-key": instance.api_key,
+        }
+
+        # Update the license engine
+        _ = requests.post(
+            f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/",
+            headers=headers,
+            data=json.dumps(payload),
+            timeout=30,
+        )
+        return
+    except requests.RequestException:
+        return
+
+
+@shared_task
+def instance_verification_task():
+    try:
+        # Get the first instance
+        instance = Instance.objects.first()
+
+        # Only register instance if it is not verified
+        if not instance.is_verified:
+            instance_verification(instance=instance)
+
+        # Admin verifications
+        admin_verification(instance=instance)
+
+        # Update user count
+        instance_user_count(instance=instance)
+
+        return
+    except requests.RequestException:
+        return
@@ -30,11 +30,13 @@ class Command(BaseCommand):
                # Load JSON content from the file
                data = json.load(file)

-            machine_signature = options.get("machine_signature", "machine-signature")
+            machine_signature = options.get("machine_signature", False)

            if not machine_signature:
                raise CommandError("Machine signature is required")

+            # Check if machine is online
+            headers = {"Content-Type": "application/json"}
            payload = {
                "instance_key": settings.INSTANCE_KEY,
                "version": data.get("version", 0.1),
@@ -42,21 +44,51 @@ class Command(BaseCommand):
                "user_count": User.objects.filter(is_bot=False).count(),
            }

-            instance = Instance.objects.create(
-                instance_name="Plane Free",
-                instance_id=secrets.token_hex(12),
-                license_key=None,
-                api_key=secrets.token_hex(8),
-                version=payload.get("version"),
-                last_checked_at=timezone.now(),
-                user_count=payload.get("user_count", 0),
-            )
-
-            self.stdout.write(
-                self.style.SUCCESS(
-                    f"Instance registered"
+            try:
+                response = requests.post(
+                    f"{settings.LICENSE_ENGINE_BASE_URL}/api/instances/",
+                    headers=headers,
+                    data=json.dumps(payload),
+                    timeout=30
                )
-            )        
+
+                if response.status_code == 201:
+                    data = response.json()
+                    # Create instance
+                    instance = Instance.objects.create(
+                        instance_name="Plane Free",
+                        instance_id=data.get("id"),
+                        license_key=data.get("license_key"),
+                        api_key=data.get("api_key"),
+                        version=data.get("version"),
+                        last_checked_at=timezone.now(),
+                        user_count=data.get("user_count", 0),
+                        is_verified=True,
+                    )
+
+                    self.stdout.write(
+                        self.style.SUCCESS(
+                            f"Instance successfully registered and verified"
+                        )
+                    )
+                    return
+            except requests.RequestException as _e:
+                instance = Instance.objects.create(
+                    instance_name="Plane Free",
+                    instance_id=secrets.token_hex(12),
+                    license_key=None,
+                    api_key=secrets.token_hex(8),
+                    version=payload.get("version"),
+                    last_checked_at=timezone.now(),
+                    user_count=payload.get("user_count", 0),
+                )
+                self.stdout.write(
+                    self.style.SUCCESS(
+                        f"Instance successfully registered"
+                    )
+                )
+                return
+            raise CommandError("Instance could not be registered")
        else:
            self.stdout.write(
                self.style.SUCCESS(
@@ -9,20 +9,14 @@ def derive_key(secret_key):
    dk = hashlib.pbkdf2_hmac('sha256', secret_key.encode(), b'salt', 100000)
    return base64.urlsafe_b64encode(dk)

-# Encrypt data
-def encrypt_data(data):
-    if data:
-        cipher_suite = Fernet(derive_key(settings.SECRET_KEY))
-        encrypted_data = cipher_suite.encrypt(data.encode())
-        return encrypted_data.decode()  # Convert bytes to string
-    else:
-        return ""

-# Decrypt data 
+def encrypt_data(data):
+    cipher_suite = Fernet(derive_key(settings.SECRET_KEY))
+    encrypted_data = cipher_suite.encrypt(data.encode())
+    return encrypted_data.decode()  # Convert bytes to string
+
+
 def decrypt_data(encrypted_data):
-    if encrypted_data:
-        cipher_suite = Fernet(derive_key(settings.SECRET_KEY))
-        decrypted_data = cipher_suite.decrypt(encrypted_data.encode())  # Convert string back to bytes
-        return decrypted_data.decode()
-    else:
-        return ""
+    cipher_suite = Fernet(derive_key(settings.SECRET_KEY))
+    decrypted_data = cipher_suite.decrypt(encrypted_data.encode())  # Convert string back to bytes
+    return decrypted_data.decode()
@@ -1,71 +1,63 @@
-# Python imports
 import os

-# Django imports
-from django.conf import settings
-
-# Module imports
-from plane.license.models import InstanceConfiguration
-from plane.license.utils.encryption import decrypt_data
-

 # Helper function to return value from the passed key
-def get_configuration_value(keys):
-    environment_list = []
-    if settings.SKIP_ENV_VAR:
-        # Get the configurations
-        instance_configuration = InstanceConfiguration.objects.values(
-            "key", "value", "is_encrypted"
-        )
-
-        for key in keys:
-            for item in instance_configuration:
-                if key.get("key") == item.get("key"):
-                    if item.get("is_encrypted", False):
-                        environment_list.append(decrypt_data(item.get("value")))
-                    else:
-                        environment_list.append(item.get("value"))
-
-                    break
-            else:
-                environment_list.append(key.get("default"))
-    else:
-        # Get the configuration from os
-        for key in keys:
-            environment_list.append(os.environ.get(key.get("key"), key.get("default")))
-
-    return tuple(environment_list)
+def get_configuration_value(query, key, default=None):
+    for item in query:
+        if item["key"] == key:
+            return item.get("value", default)
+    return default


-def get_email_configuration():
-    return (
-        get_configuration_value(
-            [
-                {
-                    "key": "EMAIL_HOST",
-                    "default": os.environ.get("EMAIL_HOST"),
-                },
-                {
-                    "key": "EMAIL_HOST_USER",
-                    "default": os.environ.get("EMAIL_HOST_USER"),
-                },
-                {
-                    "key": "EMAIL_HOST_PASSWORD",
-                    "default": os.environ.get("EMAIL_HOST_PASSWORD"),
-                },
-                {
-                    "key": "EMAIL_PORT",
-                    "default": os.environ.get("EMAIL_PORT", 587),
-                },
-                {
-                    "key": "EMAIL_USE_TLS",
-                    "default": os.environ.get("EMAIL_USE_TLS", "1"),
-                },
-                {
-                    "key": "EMAIL_FROM",
-                    "default": os.environ.get("EMAIL_FROM", "Team Plane <team@mailer.plane.so>"),
-                },
-            ]
-        )
+def get_email_configuration(instance_configuration):
+    # Get the configuration variables
+    EMAIL_HOST_USER = get_configuration_value(
+        instance_configuration,
+        "EMAIL_HOST_USER",
+        os.environ.get("EMAIL_HOST_USER", None),
    )

+    EMAIL_HOST_PASSWORD = get_configuration_value(
+        instance_configuration,
+        "EMAIL_HOST_PASSWORD",
+        os.environ.get("EMAIL_HOST_PASSWORD", None),
+    )
+
+    EMAIL_HOST = get_configuration_value(
+        instance_configuration,
+        "EMAIL_HOST",
+        os.environ.get("EMAIL_HOST", None),
+    )
+
+    EMAIL_FROM = get_configuration_value(
+        instance_configuration,
+        "EMAIL_FROM",
+        os.environ.get("EMAIL_FROM", None),
+    )
+
+    EMAIL_USE_TLS = get_configuration_value(
+        instance_configuration,
+        "EMAIL_USE_TLS",
+        os.environ.get("EMAIL_USE_TLS", "1"),
+    )
+
+    EMAIL_PORT = get_configuration_value(
+        instance_configuration,
+        "EMAIL_PORT",
+        587,
+    )
+
+    EMAIL_FROM = get_configuration_value(
+        instance_configuration,
+        "EMAIL_FROM",
+        os.environ.get("EMAIL_FROM", "Team Plane <team@mailer.plane.so>"),
+    )
+
+    return (
+        EMAIL_HOST,
+        EMAIL_HOST_USER,
+        EMAIL_HOST_PASSWORD,
+        EMAIL_PORT,
+        EMAIL_USE_TLS,
+        EMAIL_FROM,
+    )
@@ -287,6 +287,7 @@ CELERY_IMPORTS = (
    "plane.bgtasks.issue_automation_task",
    "plane.bgtasks.exporter_expired_task",
    "plane.bgtasks.file_asset_task",
+    "plane.license.bgtasks.instance_verification_task",
 )

 # Sentry Settings
@@ -327,10 +328,12 @@ USE_MINIO = int(os.environ.get("USE_MINIO", 0)) == 1
 POSTHOG_API_KEY = os.environ.get("POSTHOG_API_KEY", False)
 POSTHOG_HOST = os.environ.get("POSTHOG_HOST", False)

+# License engine base url
+LICENSE_ENGINE_BASE_URL = os.environ.get(
+    "LICENSE_ENGINE_BASE_URL", "https://control-center.plane.so"
+)
+
 # instance key
 INSTANCE_KEY = os.environ.get(
    "INSTANCE_KEY", "ae6517d563dfc13d8270bd45cf17b08f70b37d989128a9dab46ff687603333c3"
 )
-
-# Skip environment variable configuration
-SKIP_ENV_VAR = os.environ.get("SKIP_ENV_VAR", "1") == "1"
@@ -1,8 +1,8 @@
-## Coolify Setup
+## Coolify Setup 

 Access the `coolify-docker-compose` file [here](https://raw.githubusercontent.com/makeplane/plane/master/deploy/coolify/coolify-docker-compose.yml) or download using using below command

 ```
 curl -fsSL https://raw.githubusercontent.com/makeplane/plane/master/deploy/coolify/coolify-docker-compose.yml

-```
+```
@@ -7,6 +7,7 @@ services:
    restart: always
    command: /usr/local/bin/start.sh web/server.js web
    environment:
+      - NEXT_PUBLIC_ENABLE_OAUTH=${NEXT_PUBLIC_ENABLE_OAUTH:-0}
      - NEXT_PUBLIC_DEPLOY_URL=$SERVICE_FQDN_SPACE_8082
    depends_on:
      - api
@@ -20,6 +21,7 @@ services:
    command: /usr/local/bin/start.sh space/server.js space
    environment:
      - SERVICE_FQDN_SPACE_8082=/api
+      - NEXT_PUBLIC_ENABLE_OAUTH=${NEXT_PUBLIC_ENABLE_OAUTH:-0}
    depends_on:
      - api
      - worker
@@ -1,5 +1,8 @@
+
 # Helm Chart

-Click on the below link to access the helm chart instructions.
+Click on the below link to access the helm chart instructions. 

 [![Artifact Hub](https://img.shields.io/endpoint?url=https://artifacthub.io/badge/repository/makeplane)](https://artifacthub.io/packages/search?repo=makeplane)
+
+
@@ -1,20 +1,18 @@
-# Self Hosting
+# Self Hosting 

-In this guide, we will walk you through the process of setting up a self-hosted environment. Self-hosting allows you to have full control over your applications and data. It's a great way to ensure privacy, control, and customization.
+In this guide, we will walk you through the process of setting up a self-hosted environment. Self-hosting allows you to have full control over your applications and data. It's a great way to ensure privacy, control, and customization. 

-We will cover two main options for setting up your self-hosted environment: using a cloud server or using your desktop. For the cloud server, we will use an AWS EC2 instance. For the desktop, we will use Docker to create a local environment.
+We will cover two main options for setting up your self-hosted environment: using a cloud server or using your desktop. For the cloud server, we will use an AWS EC2 instance. For the desktop, we will use Docker to create a local environment. 

 Let's get started!

-## Setting up Docker Environment
-
+## Setting up Docker Environment 
 <details>
  <summary>Option 1 - Using Cloud Server</summary>
  <p>Best way to start is to create EC2 maching on AWS. It must of minimum t3.medium/t3a/medium</p>
  <p>Run the below command to install docker engine.</p>

-`curl -fsSL https://get.docker.com -o install-docker.sh`
-
+   ```curl -fsSL https://get.docker.com -o install-docker.sh```
 </details>

 ---
@@ -22,34 +20,30 @@ Let's get started!
 <details>
  <summary>Option 2 - Using Desktop</summary>

-#### For Mac
-
+  #### For Mac
  <ol>
    <li> Download Docker Desktop for Mac from the <a href="https://hub.docker.com/editions/community/docker-ce-desktop-mac/" target="_blank">Docker Hub</a>. </li>
    <li> Double-click the downloaded `.dmg` file and drag the Docker app icon to the Applications folder. </li>
    <li>Open Docker Desktop from the Applications folder. You might be asked to provide your system password to install additional software.</li>
  </ol>

-#### For Windows:
-
+  #### For Windows:
  <ol>
    <li>Download Docker Desktop for Windows from the <a href="https://hub.docker.com/editions/community/docker-ce-desktop-windows/" target="_blank">Docker Hub</a>.</li>
    <li>Run the installer and follow the instructions. You might be asked to enable Hyper-V and "Containers" Windows features.</li>
    <li>Open Docker Desktop. You might be asked to log out and log back in, or restart your machine, for changes to take effect.</li>
  </ol>

-After installation, you can verify the installation by opening a terminal (Command Prompt on Windows, Terminal app on Mac) and running the command `docker --version`. This should display the installed version of Docker.
-
+  After installation, you can verify the installation by opening a terminal (Command Prompt on Windows, Terminal app on Mac) and running the command `docker --version`. This should display the installed version of Docker.
 </details>

 ---

 ## Installing Plane

-Installing plane is a very easy and minimal step process.
-
-### Prerequisite
+Installing plane is a very easy and minimal step process. 

+### Prerequisite 
 - Docker installed and running
 - OS with bash scripting enabled (Ubuntu, Linux AMI, macos). Windows systems need to have [gitbash](https://git-scm.com/download/win)
 - User context used must have access to docker services. In most cases, use sudo su to switch as root user
@@ -88,11 +82,11 @@ chmod +x setup.sh

 ### Proceed with setup

-Above steps will set you ready to install and start plane services.
+Above steps will set you ready to install and start plane services. 

-Lets get started by running the `./setup.sh` command.
+Lets get started by running the `./setup.sh` command. 

-This will prompt you with the below options.
+This will prompt you with the below options. 

 ```
 Select a Action you want to perform:
@@ -106,27 +100,26 @@ Select a Action you want to perform:
 Action [2]: 1
 ```

-For the 1st time setup, type "1" as action input.
+For the 1st time setup, type "1" as action input. 

 This will create a create a folder `plane-app` or `plane-app-preview` (in case of preview deployment) and will download 2 files inside that
-
 - `docker-compose.yaml`
 - `.env`

-Again the `options [1-6]` will be popped up and this time hit `6` to exit.
+Again the `options [1-6]` will be popped up and this time hit `6` to exit. 

 ---

 ### Continue with setup - Environment Settings

-Before proceeding, we suggest used to review `.env` file and set the values.
-Below are the most import keys you must refer to. _<span style="color: #fcba03">You can use any text editor to edit this file</span>_.
+Before proceeding, we suggest used to review `.env` file and set the values. 
+Below are the most import keys you must refer to. *<span style="color: #fcba03">You can use any text editor to edit this file</span>*.

 > `NGINX_PORT` - This is default set to `80`. Make sure the port you choose to use is not preoccupied. (e.g `NGINX_PORT=8080`)

-> `WEB_URL` - This is default set to `http://localhost`. Change this to the FQDN you plan to use along with NGINX_PORT (eg. `https://plane.example.com:8080` or `http://[IP-ADDRESS]:8080`)
+> `WEB_URL` - This is default set to `http://localhost`. Change this to the FQDN you plan to use along with NGINX_PORT (eg. `https://plane.example.com:8080` or `http://[IP-ADDRESS]:8080`) 

-> `CORS_ALLOWED_ORIGINS` - This is default set to `http://localhost`. Change this to the FQDN you plan to use along with NGINX_PORT (eg. `https://plane.example.com:8080` or `http://[IP-ADDRESS]:8080`)
+> `CORS_ALLOWED_ORIGINS` - This is default set to `http://localhost`. Change this to the FQDN you plan to use along with NGINX_PORT (eg. `https://plane.example.com:8080`  or `http://[IP-ADDRESS]:8080`)

 There are many other settings you can play with, but we suggest you configure `EMAIL SETTINGS` as it will enable you to invite your teammates onto the platform.

@@ -155,15 +148,15 @@ Be patient as it might take sometime based on download speed and system configur

 ![Downloading completed](images/started.png)

-This is the confirmation that all images were downloaded and the services are up & running.
+This is the confirmation that all images were downloaded and the services are up & running. 

-You have successfully self hosted `Plane` instance. Access the application by going to IP or domain you have configured it (e.g `https://plane.example.com:8080` or `http://[IP-ADDRESS]:8080`)
+You have successfully self hosted `Plane` instance. Access the application by going to IP or domain you have configured it (e.g `https://plane.example.com:8080`  or `http://[IP-ADDRESS]:8080`)

 ---

 ### Stopping the Server

-In case you want to make changes to `.env` variables, we suggest you to stop the services before doing that.
+In case you want to make changes to `.env` variables, we suggest you to stop the services before doing that. 

 Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `3` to stop the sevices

@@ -187,7 +180,7 @@ If all goes well, you must see something like this

 ### Restarting the Server

-In case you want to make changes to `.env` variables, without stopping the server or you noticed some abnormalies in services, you can restart the services with RESTART option.
+In case you want to make changes to `.env` variables, without stopping the server or you noticed some abnormalies in services, you can restart the services with RESTART option. 

 Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `4` to restart the sevices

@@ -213,7 +206,7 @@ If all goes well, you must see something like this

 It is always advised to keep Plane up to date with the latest release.

-Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `5` to upgrade the release.
+Lets again run the `./setup.sh` command. You will again be prompted with the below options. This time select `5` to upgrade the release. 

 ```
 Select a Action you want to perform:
@@ -227,7 +220,7 @@ Select a Action you want to perform:
 Action [2]: 5
 ```

-By choosing this, it will stop the services and then will download the latest `docker-compose.yaml` and `variables-upgrade.env`. Here system will not replace `.env` with the new one.
+By choosing this, it will stop the services and then will download the latest `docker-compose.yaml` and `variables-upgrade.env`. Here system will not replace `.env` with the new one. 

 You must expect the below message

@@ -235,17 +228,18 @@ You must expect the below message

 Once done, choose `6` to exit from prompt.

-> It is very important for you to compare the 2 files `variables-upgrade.env` and `.env`. Copy the newly added variable from downloaded file to `.env` and set the expected values.
+> It is very important for you to compare the 2 files `variables-upgrade.env` and `.env`. Copy the newly added variable from downloaded file to `.env` and set the expected values.   

 Once done with making changes in `.env` file, jump on to `Start Server`

+
 ## Upgrading from v0.13.2 to v0.14.x

 This is one time activity for users who are upgrading from v0.13.2 to v0.14.0

 As there has been significant changes to Self Hosting process, this step mainly covers the data migration from current (v0.13.2) docker volumes from newly created volumes

-> Before we begin with migration, make sure your v0.14.0 was started and then stopped. This is required to know the newly created docker volume names.
+> Before we begin with migration, make sure your v0.14.0 was started and then stopped. This is required to know the newly created docker volume names. 

 Begin with downloading the migration script using below command

@@ -262,15 +256,15 @@ Now run the `./migrate.sh` command and expect the instructions as below
 ```
 ******************************************************************

-This script is solely for the migration purpose only.
+This script is solely for the migration purpose only. 
 This is a 1 time migration of volume data from v0.13.2 => v0.14.x

-Assumption:
+Assumption: 
 1. Postgres data volume name ends with _pgdata
 2. Minio data volume name ends with _uploads
 3. Redis data volume name ends with _redisdata

-Any changes to this script can break the migration.
+Any changes to this script can break the migration. 

 Before you proceed, make sure you run the below command
 to know the docker volumes
@@ -281,12 +275,12 @@ docker volume ls -q | grep -i "_redisdata"

 *******************************************************

-Given below list of REDIS volumes, identify the prefix of source and destination volumes leaving "_redisdata"
+Given below list of REDIS volumes, identify the prefix of source and destination volumes leaving "_redisdata" 
 ---------------------
 plane-app_redisdata
 v0132_redisdata

-Provide the Source Volume Prefix :
+Provide the Source Volume Prefix : 
 ```

 **Open another terminal window**, and run the mentioned 3 command. This may be different for users who have changed the volume names in their previous setup (v0.13.2)
@@ -295,9 +289,9 @@ For every command you must see 2 records something like shown in above example o

 To move forward, you would need PREFIX of old setup and new setup. As per above example, `v0132` is the prefix of v0.13.2 and `plane-app` is the prefix of v0.14.0 setup

-**Back to original terminal window**, _Provide the Source Volume Prefix_ and hit ENTER.
+**Back to original terminal window**, *Provide the Source Volume Prefix* and hit ENTER.

-Now you will be prompted to _Provide Destination Volume Prefix_. Provide the value and hit ENTER
+Now you will be prompted to *Provide Destination Volume Prefix*. Provide the value and hit ENTER

 ```
 Provide the Source Volume Prefix : v0132
@@ -308,6 +302,8 @@ In case the suffixes are wrong or the mentioned volumes are not found, you will

 ![Migrate Error](images/migrate-error.png)

-In case of successful migration, it will be a silent exit without error.
+In case of successful migration, it will be a silent exit without error. 
+
+Now its time to restart v0.14.0 setup. 
+

-Now its time to restart v0.14.0 setup.
@@ -6,6 +6,7 @@ x-app-env : &app-env
    - WEB_URL=${WEB_URL:-http://localhost}
    - DEBUG=${DEBUG:-0}
    - DJANGO_SETTINGS_MODULE=${DJANGO_SETTINGS_MODULE:-plane.settings.production} # deprecated
+    - NEXT_PUBLIC_ENABLE_OAUTH=${NEXT_PUBLIC_ENABLE_OAUTH:-0} # deprecated
    - NEXT_PUBLIC_DEPLOY_URL=${NEXT_PUBLIC_DEPLOY_URL:-http://localhost/spaces} # deprecated
    - SENTRY_DSN=${SENTRY_DSN:-""}
    - SENTRY_ENVIRONMENT=${SENTRY_ENVIRONMENT:-"production"}
@@ -40,7 +41,7 @@ x-app-env : &app-env
    - DEFAULT_PASSWORD=${DEFAULT_PASSWORD:-password123}
    # OPENAI SETTINGS - Deprecated can be configured through admin panel
    - OPENAI_API_BASE=${OPENAI_API_BASE:-https://api.openai.com/v1}
-    - OPENAI_API_KEY=${OPENAI_API_KEY:-""}
+    - OPENAI_API_KEY=${OPENAI_API_KEY:-"sk-"}
    - GPT_ENGINE=${GPT_ENGINE:-"gpt-3.5-turbo"}
    # LOGIN/SIGNUP SETTINGS - Deprecated can be configured through admin panel
    - ENABLE_SIGNUP=${ENABLE_SIGNUP:-1}
@@ -66,7 +67,7 @@ services:
  web:
    <<: *app-env
    platform: linux/amd64
-    image: makeplane/plane-frontend:${APP_RELEASE:-latest}
+    image: makeplane/plane-frontend-ce:${APP_RELEASE:-latest}
    restart: unless-stopped
    command: /usr/local/bin/start.sh web/server.js web
    deploy:
@@ -78,7 +79,7 @@ services:
  space:
    <<: *app-env
    platform: linux/amd64
-    image: makeplane/plane-space:${APP_RELEASE:-latest}
+    image: makeplane/plane-space-ce:${APP_RELEASE:-latest}
    restart: unless-stopped
    command: /usr/local/bin/start.sh space/server.js space
    deploy:
@@ -91,7 +92,7 @@ services:
  api:
    <<: *app-env
    platform: linux/amd64
-    image: makeplane/plane-backend:${APP_RELEASE:-latest}
+    image: makeplane/plane-backend-ce:${APP_RELEASE:-latest}
    restart: unless-stopped
    command: ./bin/takeoff
    deploy:
@@ -103,7 +104,7 @@ services:
  worker:
    <<: *app-env
    platform: linux/amd64
-    image: makeplane/plane-backend:${APP_RELEASE:-latest}
+    image: makeplane/plane-backend-ce:${APP_RELEASE:-latest}
    restart: unless-stopped
    command: ./bin/worker
    depends_on:
@@ -114,7 +115,7 @@ services:
  beat-worker:
    <<: *app-env
    platform: linux/amd64
-    image: makeplane/plane-backend:${APP_RELEASE:-latest}
+    image: makeplane/plane-backend-ce:${APP_RELEASE:-latest}
    restart: unless-stopped
    command: ./bin/beat
    depends_on:
@@ -149,7 +150,7 @@ services:
  proxy:
    <<: *app-env
    platform: linux/amd64
-    image: makeplane/plane-proxy:${APP_RELEASE:-latest}
+    image: makeplane/plane-proxy-ce:${APP_RELEASE:-latest}
    ports:
        - ${NGINX_PORT}:80
    depends_on:
@@ -7,6 +7,7 @@ API_REPLICAS=1
 NGINX_PORT=80
 WEB_URL=http://localhost
 DEBUG=0
+NEXT_PUBLIC_ENABLE_OAUTH=0
 NEXT_PUBLIC_DEPLOY_URL=http://localhost/spaces
 SENTRY_DSN=""
 SENTRY_ENVIRONMENT="production"
@@ -1,6 +1,6 @@
 {
  "repository": "https://github.com/makeplane/plane.git",
-  "version": "0.14.0",
+  "version": "0.13.2",
  "license": "AGPL-3.0",
  "private": true,
  "workspaces": [
@@ -27,7 +27,7 @@
    "prettier": "latest",
    "prettier-plugin-tailwindcss": "^0.5.4",
    "tailwindcss": "^3.3.3",
-    "turbo": "^1.11.1"
+    "turbo": "^1.10.16"
  },
  "resolutions": {
    "@types/react": "18.2.42"
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["custom"],
-};
@@ -1,6 +0,0 @@
-.next
-.vercel
-.tubro
-out/
-dis/
-build/
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
@@ -1,6 +1,6 @@
 {
  "name": "@plane/editor-core",
-  "version": "0.14.0",
+  "version": "0.0.1",
  "description": "Core Editor that powers Plane",
  "private": true,
  "main": "./dist/index.mjs",
@@ -17,7 +17,7 @@
    }
  },
  "scripts": {
-    "build": "tsup --minify",
+    "build": "tsup",
    "dev": "tsup --watch",
    "check-types": "tsc --noEmit",
    "format": "prettier --write \"**/*.{ts,tsx,md}\""
@@ -55,7 +55,7 @@
    "highlight.js": "^11.8.0",
    "jsx-dom-cjs": "^8.0.3",
    "lowlight": "^3.0.0",
-    "lucide-react": "^0.294.0",
+    "lucide-react": "^0.244.0",
    "react-moveable": "^0.54.2",
    "tailwind-merge": "^1.14.0",
    "tippy.js": "^6.3.7",
@@ -4,17 +4,35 @@ import { startImageUpload } from "../ui/plugins/upload-image";
 import { findTableAncestor } from "./utils";

 export const toggleHeadingOne = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .setNode("heading", { level: 1 })
+      .run();
  else editor.chain().focus().toggleHeading({ level: 1 }).run();
 };

 export const toggleHeadingTwo = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .setNode("heading", { level: 2 })
+      .run();
  else editor.chain().focus().toggleHeading({ level: 2 }).run();
 };

 export const toggleHeadingThree = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .setNode("heading", { level: 3 })
+      .run();
  else editor.chain().focus().toggleHeading({ level: 3 }).run();
 };

@@ -39,7 +57,8 @@ export const toggleCodeBlock = (editor: Editor, range?: Range) => {
 };

 export const toggleOrderedList = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+  if (range)
+    editor.chain().focus().deleteRange(range).toggleOrderedList().run();
  else editor.chain().focus().toggleOrderedList().run();
 };

@@ -59,8 +78,21 @@ export const toggleStrike = (editor: Editor, range?: Range) => {
 };

 export const toggleBlockquote = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).toggleNode("paragraph", "paragraph").toggleBlockquote().run();
-  else editor.chain().focus().toggleNode("paragraph", "paragraph").toggleBlockquote().run();
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .toggleNode("paragraph", "paragraph")
+      .toggleBlockquote()
+      .run();
+  else
+    editor
+      .chain()
+      .focus()
+      .toggleNode("paragraph", "paragraph")
+      .toggleBlockquote()
+      .run();
 };

 export const insertTableCommand = (editor: Editor, range?: Range) => {
@@ -73,8 +105,19 @@ export const insertTableCommand = (editor: Editor, range?: Range) => {
      }
    }
  }
-  if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
-  else editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+  if (range)
+    editor
+      .chain()
+      .focus()
+      .deleteRange(range)
+      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+      .run();
+  else
+    editor
+      .chain()
+      .focus()
+      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+      .run();
 };

 export const unsetLinkEditor = (editor: Editor) => {
@@ -88,8 +131,10 @@ export const setLinkEditor = (editor: Editor, url: string) => {
 export const insertImageCommand = (
  editor: Editor,
  uploadFile: UploadImage,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void,
-  range?: Range
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
+  range?: Range,
 ) => {
  if (range) editor.chain().focus().deleteRange(range).run();
  const input = document.createElement("input");
@@ -6,19 +6,25 @@ interface EditorClassNames {
  customClassName?: string;
 }

-export const getEditorClassNames = ({ noBorder, borderOnFocus, customClassName }: EditorClassNames) =>
+export const getEditorClassNames = ({
+  noBorder,
+  borderOnFocus,
+  customClassName,
+}: EditorClassNames) =>
  cn(
    "relative w-full max-w-full sm:rounded-lg mt-2 p-3 relative focus:outline-none rounded-md",
    noBorder ? "" : "border border-custom-border-200",
    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0",
-    customClassName
+    customClassName,
  );

 export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
 }

-export const findTableAncestor = (node: Node | null): HTMLTableElement | null => {
+export const findTableAncestor = (
+  node: Node | null,
+): HTMLTableElement | null => {
  while (node !== null && node.nodeName !== "TABLE") {
    node = node.parentNode;
  }
@@ -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={() => {
@@ -8,10 +8,16 @@ interface EditorContentProps {
  children?: ReactNode;
 }

-export const EditorContentWrapper = ({ editor, editorContentCustomClassNames = "", children }: EditorContentProps) => (
+export const EditorContentWrapper = ({
+  editor,
+  editorContentCustomClassNames = "",
+  children,
+}: EditorContentProps) => (
  <div className={`contentEditor ${editorContentCustomClassNames}`}>
    <EditorContent editor={editor} />
-    {editor?.isActive("image") && editor?.isEditable && <ImageResizer editor={editor} />}
+    {editor?.isActive("image") && editor?.isEditable && (
+      <ImageResizer editor={editor} />
+    )}
    {children}
  </div>
 );
@@ -2,7 +2,10 @@ import { getNodeType } from "@tiptap/core";
 import { NodeType } from "@tiptap/pm/model";
 import { EditorState } from "@tiptap/pm/state";

-export const findListItemPos = (typeOrName: string | NodeType, state: EditorState) => {
+export const findListItemPos = (
+  typeOrName: string | NodeType,
+  state: EditorState,
+) => {
  const { $from } = state.selection;
  const nodeType = getNodeType(typeOrName, state.schema);

@@ -10,7 +10,11 @@ export const getNextListDepth = (typeOrName: string, state: EditorState) => {
    return false;
  }

-  const [, depth] = getNodeAtPosition(state, typeOrName, listItemPos.$pos.pos + 4);
+  const [, depth] = getNodeAtPosition(
+    state,
+    typeOrName,
+    listItemPos.$pos.pos + 4,
+  );

  return depth;
 };
@@ -4,7 +4,11 @@ import { Node } from "@tiptap/pm/model";
 import { findListItemPos } from "./find-list-item-pos";
 import { hasListBefore } from "./has-list-before";

-export const handleBackspace = (editor: Editor, name: string, parentListTypes: string[]) => {
+export const handleBackspace = (
+  editor: Editor,
+  name: string,
+  parentListTypes: string[],
+) => {
  // this is required to still handle the undo handling
  if (editor.commands.undoInputRule()) {
    return true;
@@ -19,7 +23,10 @@ export const handleBackspace = (editor: Editor, name: string, parentListTypes: s
  // if the current item is NOT inside a list item &
  // the previous item is a list (orderedList or bulletList)
  // move the cursor into the list and delete the current item
-  if (!isNodeActive(editor.state, name) && hasListBefore(editor.state, name, parentListTypes)) {
+  if (
+    !isNodeActive(editor.state, name) &&
+    hasListBefore(editor.state, name, parentListTypes)
+  ) {
    const { $anchor } = editor.state.selection;

    const $listPos = editor.state.doc.resolve($anchor.before() - 1);
@@ -38,11 +45,16 @@ export const handleBackspace = (editor: Editor, name: string, parentListTypes: s
      return false;
    }

-    const $lastItemPos = editor.state.doc.resolve($listPos.start() + lastItem.pos + 1);
+    const $lastItemPos = editor.state.doc.resolve(
+      $listPos.start() + lastItem.pos + 1,
+    );

    return editor
      .chain()
-      .cut({ from: $anchor.start() - 1, to: $anchor.end() + 1 }, $lastItemPos.end())
+      .cut(
+        { from: $anchor.start() - 1, to: $anchor.end() + 1 },
+        $lastItemPos.end(),
+      )
      .joinForward()
      .run();
  }
@@ -1,6 +1,10 @@
 import { EditorState } from "@tiptap/pm/state";

-export const hasListBefore = (editorState: EditorState, name: string, parentListTypes: string[]) => {
+export const hasListBefore = (
+  editorState: EditorState,
+  name: string,
+  parentListTypes: string[],
+) => {
  const { $anchor } = editorState.selection;

  const previousNodePos = Math.max(0, $anchor.pos - 2);
@@ -1,6 +1,9 @@
 import { EditorState } from "@tiptap/pm/state";

-export const hasListItemAfter = (typeOrName: string, state: EditorState): boolean => {
+export const hasListItemAfter = (
+  typeOrName: string,
+  state: EditorState,
+): boolean => {
  const { $anchor } = state.selection;

  const $targetPos = state.doc.resolve($anchor.pos - $anchor.parentOffset - 2);
@@ -1,6 +1,9 @@
 import { EditorState } from "@tiptap/pm/state";

-export const hasListItemBefore = (typeOrName: string, state: EditorState): boolean => {
+export const hasListItemBefore = (
+  typeOrName: string,
+  state: EditorState,
+): boolean => {
  const { $anchor } = state.selection;

  const $targetPos = state.doc.resolve($anchor.pos - 2);
@@ -1,6 +1,12 @@
 import { TextSelection } from "prosemirror-state";

-import { InputRule, mergeAttributes, Node, nodeInputRule, wrappingInputRule } from "@tiptap/core";
+import {
+  InputRule,
+  mergeAttributes,
+  Node,
+  nodeInputRule,
+  wrappingInputRule,
+} from "@tiptap/core";

 /**
 * Extension based on:
@@ -77,7 +83,8 @@ export default Node.create<HorizontalRuleOptions>({
                    tr.setSelection(TextSelection.create(tr.doc, $to.pos));
                  } else {
                    // add node after horizontal rule if it’s the end of the document
-                    const node = $to.parent.type.contentMatch.defaultType?.create();
+                    const node =
+                      $to.parent.type.contentMatch.defaultType?.create();

                    if (node) {
                      tr.insert(posAfter, node);
@@ -4,7 +4,9 @@ import Moveable from "react-moveable";

 export const ImageResizer = ({ editor }: { editor: Editor }) => {
  const updateMediaSize = () => {
-    const imageInfo = document.querySelector(".ProseMirror-selectednode") as HTMLImageElement;
+    const imageInfo = document.querySelector(
+      ".ProseMirror-selectednode",
+    ) as HTMLImageElement;
    if (imageInfo) {
      const selection = editor.state.selection;
      editor.commands.setImage({
@@ -30,7 +32,9 @@ export const ImageResizer = ({ editor }: { editor: Editor }) => {
        resizable
        throttleResize={0}
        onResizeStart={() => {
-          const imageInfo = document.querySelector(".ProseMirror-selectednode") as HTMLImageElement;
+          const imageInfo = document.querySelector(
+            ".ProseMirror-selectednode",
+          ) as HTMLImageElement;
          if (imageInfo) {
            const originalWidth = Number(imageInfo.width);
            const originalHeight = Number(imageInfo.height);
@@ -15,14 +15,22 @@ interface ImageNode extends ProseMirrorNode {
 const deleteKey = new PluginKey("delete-image");
 const IMAGE_NODE_TYPE = "image";

-const ImageExtension = (deleteImage: DeleteImage, restoreFile: RestoreImage, cancelUploadImage?: () => any) =>
+const ImageExtension = (
+  deleteImage: DeleteImage,
+  restoreFile: RestoreImage,
+  cancelUploadImage?: () => any,
+) =>
  ImageExt.extend({
    addProseMirrorPlugins() {
      return [
        UploadImagesPlugin(cancelUploadImage),
        new Plugin({
          key: deleteKey,
-          appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
+          appendTransaction: (
+            transactions: readonly Transaction[],
+            oldState: EditorState,
+            newState: EditorState,
+          ) => {
            const newImageSources = new Set<string>();
            newState.doc.descendants((node) => {
              if (node.type.name === IMAGE_NODE_TYPE) {
@@ -59,7 +67,11 @@ const ImageExtension = (deleteImage: DeleteImage, restoreFile: RestoreImage, can
        }),
        new Plugin({
          key: new PluginKey("imageRestoration"),
-          appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
+          appendTransaction: (
+            transactions: readonly Transaction[],
+            oldState: EditorState,
+            newState: EditorState,
+          ) => {
            const oldImageSources = new Set<string>();
            oldState.doc.descendants((node) => {
              if (node.type.name === IMAGE_NODE_TYPE) {
@@ -22,7 +22,11 @@ import { CustomKeymap } from "./keymap";
 import { CustomCodeBlock } from "./code";
 import { CustomQuoteExtension } from "./quote";
 import { ListKeymap } from "./custom-list-keymap";
-import { IMentionSuggestion, DeleteImage, RestoreImage } from "@plane/editor-types";
+import {
+  IMentionSuggestion,
+  DeleteImage,
+  RestoreImage,
+} from "@plane/editor-types";

 export const CoreEditorExtensions = (
  mentionConfig: {
@@ -105,5 +109,9 @@ export const CoreEditorExtensions = (
  TableHeader,
  TableCell,
  TableRow,
-  Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, false),
+  Mentions(
+    mentionConfig.mentionSuggestions,
+    mentionConfig.mentionHighlights,
+    false
+  ),
 ];
@@ -22,6 +22,10 @@ export default Node.create<TableRowOptions>({
  },

  renderHTML({ HTMLAttributes }) {
-    return ["tr", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    return [
+      "tr",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      0,
+    ];
  },
 });
@@ -20,12 +20,15 @@ export function tableControls() {
        mousemove: (view, event) => {
          const pluginState = key.getState(view.state);

-          if (!(event.target as HTMLElement).closest(".tableWrapper") && pluginState.values.hoveredTable) {
+          if (
+            !(event.target as HTMLElement).closest(".tableWrapper") &&
+            pluginState.values.hoveredTable
+          ) {
            return view.dispatch(
              view.state.tr.setMeta(key, {
                setHoveredTable: null,
                setHoveredCell: null,
-              })
+              }),
            );
          }

@@ -37,11 +40,13 @@ export function tableControls() {
          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)
+            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;

@@ -50,7 +55,7 @@ export function tableControls() {
              view.state.tr.setMeta(key, {
                setHoveredTable: table,
                setHoveredCell: cell,
-              })
+              }),
            );
          }
        },
@@ -63,7 +68,12 @@ export function tableControls() {

        const { hoveredTable, hoveredCell } = pluginState.values;
        const docSize = state.doc.content.size;
-        if (hoveredTable && hoveredCell && hoveredTable.pos < docSize && hoveredCell.pos < docSize) {
+        if (
+          hoveredTable &&
+          hoveredCell &&
+          hoveredTable.pos < docSize &&
+          hoveredCell.pos < docSize
+        ) {
          const decorations = [
            Decoration.node(
              hoveredTable.pos,
@@ -72,7 +82,7 @@ export function tableControls() {
              {
                hoveredTable,
                hoveredCell,
-              }
+              },
            ),
          ];

@@ -4,7 +4,11 @@ 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 {
+  CellSelection,
+  TableMap,
+  updateColumnsOnResize,
+} from "@tiptap/prosemirror-tables";

 import icons from "./icons";

@@ -14,7 +18,7 @@ export function updateColumns(
  table: HTMLElement,
  cellMinWidth: number,
  overrideCol?: number,
-  overrideValue?: any
+  overrideValue?: any,
 ) {
  let totalWidth = 0;
  let fixedWidth = true;
@@ -27,7 +31,8 @@ export function updateColumns(
    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 hasWidth =
+        overrideCol === col ? overrideValue : colwidth && colwidth[j];
      const cssWidth = hasWidth ? `${hasWidth}px` : "";

      totalWidth += hasWidth || cellMinWidth;
@@ -37,7 +42,8 @@ export function updateColumns(
      }

      if (!nextDOM) {
-        colgroup.appendChild(document.createElement("col")).style.width = cssWidth;
+        colgroup.appendChild(document.createElement("col")).style.width =
+          cssWidth;
      } else {
        if (nextDOM.style.width !== cssWidth) {
          nextDOM.style.width = cssWidth;
@@ -92,12 +98,14 @@ const columnsToolboxItems = [
  {
    label: "Add Column Before",
    icon: icons.insertLeftTableIcon,
-    action: ({ editor }: { editor: Editor }) => editor.chain().focus().addColumnBefore().run(),
+    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(),
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addColumnAfter().run(),
  },
  {
    label: "Pick Column Color",
@@ -123,7 +131,8 @@ const columnsToolboxItems = [
  {
    label: "Delete Column",
    icon: icons.deleteColumn,
-    action: ({ editor }: { editor: Editor }) => editor.chain().focus().deleteColumn().run(),
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().deleteColumn().run(),
  },
 ];

@@ -131,12 +140,14 @@ const rowsToolboxItems = [
  {
    label: "Add Row Above",
    icon: icons.insertTopTableIcon,
-    action: ({ editor }: { editor: Editor }) => editor.chain().focus().addRowBefore().run(),
+    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(),
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().addRowAfter().run(),
  },
  {
    label: "Pick Row Color",
@@ -148,7 +159,11 @@ const rowsToolboxItems = [
    }: {
      editor: Editor;
      triggerButton: HTMLButtonElement;
-      controlsContainer: Element | "parent" | ((ref: Element) => Element) | undefined;
+      controlsContainer:
+        | Element
+        | "parent"
+        | ((ref: Element) => Element)
+        | undefined;
    }) => {
      createColorPickerToolbox({
        triggerButton,
@@ -162,7 +177,8 @@ const rowsToolboxItems = [
  {
    label: "Delete Row",
    icon: icons.deleteRow,
-    action: ({ editor }: { editor: Editor }) => editor.chain().focus().deleteRow().run(),
+    action: ({ editor }: { editor: Editor }) =>
+      editor.chain().focus().deleteRow().run(),
  },
 ];

@@ -197,9 +213,9 @@ function createToolbox({
              innerHTML: item.icon,
            }),
            h("div", { className: "label" }, item.label),
-          ]
-        )
-      )
+          ],
+        ),
+      ),
    ),
    ...tippyOptions,
  });
@@ -256,11 +272,11 @@ function createColorPickerToolbox({
              {
                className: "label",
              },
-              key
+              key,
            ),
-          ]
-        )
-      )
+          ],
+        ),
+      ),
    ),
    onHidden: (instance) => {
      instance.destroy();
@@ -303,7 +319,7 @@ export class TableView implements NodeView {
    cellMinWidth: number,
    decorations: Decoration[],
    editor: Editor,
-    getPos: () => number
+    getPos: () => number,
  ) {
    this.node = node;
    this.cellMinWidth = cellMinWidth;
@@ -321,7 +337,7 @@ export class TableView implements NodeView {
          itemType: "button",
          className: "rowsControlDiv",
          onClick: () => this.selectRow(),
-        })
+        }),
      );

      this.columnsControl = h(
@@ -331,14 +347,14 @@ export class TableView implements NodeView {
          itemType: "button",
          className: "columnsControlDiv",
          onClick: () => this.selectColumn(),
-        })
+        }),
      );

      this.controls = h(
        "div",
        { className: "tableControls", contentEditable: "false" },
        this.rowsControl,
-        this.columnsControl
+        this.columnsControl,
      );

      this.columnsToolbox = createToolbox({
@@ -381,7 +397,7 @@ export class TableView implements NodeView {
    this.colgroup = h(
      "colgroup",
      null,
-      Array.from({ length: this.map.width }, () => 1).map(() => h("col"))
+      Array.from({ length: this.map.width }, () => 1).map(() => h("col")),
    );
    this.tbody = h("tbody");
    this.table = h("table", null, this.colgroup, this.tbody);
@@ -392,7 +408,7 @@ export class TableView implements NodeView {
        className: "tableWrapper controls--disabled",
      },
      this.controls,
-      this.table
+      this.table,
    );

    this.render();
@@ -418,11 +434,18 @@ export class TableView implements NodeView {

  render() {
    if (this.colgroup.children.length !== this.map.width) {
-      const cols = Array.from({ length: this.map.width }, () => 1).map(() => h("col"));
+      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);
+    updateColumnsOnResize(
+      this.node,
+      this.colgroup,
+      this.table,
+      this.cellMinWidth,
+    );
  }

  ignoreMutation() {
@@ -430,7 +453,9 @@ export class TableView implements NodeView {
  }

  updateControls() {
-    const { hoveredTable: table, hoveredCell: cell } = Object.values(this.decorations).reduce(
+    const { hoveredTable: table, hoveredCell: cell } = Object.values(
+      this.decorations,
+    ).reduce(
      (acc, curr) => {
        if (curr.spec.hoveredCell !== undefined) {
          acc["hoveredCell"] = curr.spec.hoveredCell;
@@ -441,7 +466,7 @@ export class TableView implements NodeView {
        }
        return acc;
      },
-      {} as Record<string, HTMLElement>
+      {} as Record<string, HTMLElement>,
    ) as any;

    if (table === undefined || cell === undefined) {
@@ -456,7 +481,9 @@ export class TableView implements NodeView {
    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.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`;
@@ -466,14 +493,22 @@ export class TableView implements NodeView {
  selectColumn() {
    if (!this.hoveredCell) return;

-    const colIndex = this.map.colCount(this.hoveredCell.pos - (this.getPos() + 1));
+    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 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);
+    const cellSelection = CellSelection.create(
+      this.editor.view.state.doc,
+      anchorCellPos,
+      headCellPos,
+    );
    this.editor.view.dispatch(
      // @ts-ignore
-      this.editor.state.tr.setSelection(cellSelection)
+      this.editor.state.tr.setSelection(cellSelection),
    );
  }

@@ -481,13 +516,21 @@ export class TableView implements NodeView {
    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 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);
+    const cellSelection = CellSelection.create(
+      this.editor.state.doc,
+      anchorCellPos,
+      headCellPos,
+    );
    this.editor.view.dispatch(
      // @ts-ignore
-      this.editor.view.state.tr.setSelection(cellSelection)
+      this.editor.view.state.tr.setSelection(cellSelection),
    );
  }
 }
@@ -1,6 +1,12 @@
 import { TextSelection } from "@tiptap/pm/state";

-import { callOrReturn, getExtensionField, mergeAttributes, Node, ParentConfig } from "@tiptap/core";
+import {
+  callOrReturn,
+  getExtensionField,
+  mergeAttributes,
+  Node,
+  ParentConfig,
+} from "@tiptap/core";
 import {
  addColumnAfter,
  addColumnBefore,
@@ -38,7 +44,11 @@ export interface TableOptions {
 declare module "@tiptap/core" {
  interface Commands<ReturnType> {
    table: {
-      insertTable: (options?: { rows?: number; cols?: number; withHeaderRow?: boolean }) => ReturnType;
+      insertTable: (options?: {
+        rows?: number;
+        cols?: number;
+        withHeaderRow?: boolean;
+      }) => ReturnType;
      addColumnBefore: () => ReturnType;
      addColumnAfter: () => ReturnType;
      deleteColumn: () => ReturnType;
@@ -56,7 +66,10 @@ declare module "@tiptap/core" {
      goToNextCell: () => ReturnType;
      goToPreviousCell: () => ReturnType;
      fixTables: () => ReturnType;
-      setCellSelection: (position: { anchorCell: number; headCell?: number }) => ReturnType;
+      setCellSelection: (position: {
+        anchorCell: number;
+        headCell?: number;
+      }) => ReturnType;
    };
  }

@@ -101,7 +114,11 @@ export default Node.create({
  },

  renderHTML({ HTMLAttributes }) {
-    return ["table", mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), ["tbody", 0]];
+    return [
+      "table",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      ["tbody", 0],
+    ];
  },

  addCommands() {
@@ -203,7 +220,11 @@ export default Node.create({
        (position) =>
        ({ tr, dispatch }) => {
          if (dispatch) {
-            const selection = CellSelection.create(tr.doc, position.anchorCell, position.headCell);
+            const selection = CellSelection.create(
+              tr.doc,
+              position.anchorCell,
+              position.headCell,
+            );

            // @ts-ignore
            tr.setSelection(selection);
@@ -239,7 +260,13 @@ export default Node.create({
    return ({ editor, getPos, node, decorations }) => {
      const { cellMinWidth } = this.options;

-      return new TableView(node, cellMinWidth, decorations, editor, getPos as () => number);
+      return new TableView(
+        node,
+        cellMinWidth,
+        decorations,
+        editor,
+        getPos as () => number,
+      );
    };
  },

@@ -262,7 +289,7 @@ export default Node.create({

          // @ts-ignore
          lastColumnResizable: this.options.lastColumnResizable,
-        })
+        }),
      );
    }

@@ -277,7 +304,9 @@ export default Node.create({
    };

    return {
-      tableRole: callOrReturn(getExtensionField(extension, "tableRole", context)),
+      tableRole: callOrReturn(
+        getExtensionField(extension, "tableRole", context),
+      ),
    };
  },
 });
@@ -2,7 +2,7 @@ import { Fragment, Node as ProsemirrorNode, NodeType } from "prosemirror-model";

 export function createCell(
  cellType: NodeType,
-  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
 ): ProsemirrorNode | null | undefined {
  if (cellContent) {
    return cellType.createChecked(null, cellContent);
@@ -8,7 +8,7 @@ export function createTable(
  rowsCount: number,
  colsCount: number,
  withHeaderRow: boolean,
-  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
 ): ProsemirrorNode {
  const types = getTableNodeTypes(schema);
  const headerCells: ProsemirrorNode[] = [];
@@ -33,7 +33,12 @@ export function createTable(
  const rows: ProsemirrorNode[] = [];

  for (let index = 0; index < rowsCount; index += 1) {
-    rows.push(types.row.createChecked(null, withHeaderRow && index === 0 ? headerCells : cells));
+    rows.push(
+      types.row.createChecked(
+        null,
+        withHeaderRow && index === 0 ? headerCells : cells,
+      ),
+    );
  }

  return types.table.createChecked(null, rows);
@@ -1,8 +1,13 @@
-import { findParentNodeClosestToPos, KeyboardShortcutCommand } from "@tiptap/core";
+import {
+  findParentNodeClosestToPos,
+  KeyboardShortcutCommand,
+} from "@tiptap/core";

 import { isCellSelection } from "./is-cell-selection";

-export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({ editor }) => {
+export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({
+  editor,
+}) => {
  const { selection } = editor.state;

  if (!isCellSelection(selection)) {
@@ -10,7 +15,10 @@ export const deleteTableWhenAllCellsSelected: KeyboardShortcutCommand = ({ edito
  }

  let cellCount = 0;
-  const table = findParentNodeClosestToPos(selection.ranges[0].$from, (node) => node.type.name === "table");
+  const table = findParentNodeClosestToPos(
+    selection.ranges[0].$from,
+    (node) => node.type.name === "table",
+  );

  table?.node.descendants((node) => {
    if (node.type.name === "table") {
@@ -4,7 +4,12 @@ import { CoreEditorProps } from "../props";
 import { CoreEditorExtensions } from "../extensions";
 import { EditorProps } from "@tiptap/pm/view";
 import { getTrimmedHTML } from "../../lib/utils";
-import { DeleteImage, IMentionSuggestion, RestoreImage, UploadImage } from "@plane/editor-types";
+import {
+  DeleteImage,
+  IMentionSuggestion,
+  RestoreImage,
+  UploadImage,
+} from "@plane/editor-types";

 interface CustomEditorProps {
  uploadFile: UploadImage;
@@ -15,7 +20,9 @@ interface CustomEditorProps {
  };
  deleteFile: DeleteImage;
  cancelUploadImage?: () => any;
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
  setShouldShowAlert?: (showAlert: boolean) => void;
  value: string;
  debouncedUpdatesEnabled?: boolean;
@@ -59,11 +66,12 @@ export const useEditor = ({
          },
          deleteFile,
          restoreFile,
-          cancelUploadImage
+          cancelUploadImage,
        ),
        ...extensions,
      ],
-      content: typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
+      content:
+        typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
      onCreate: async ({ editor }) => {
        onStart?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
      },
@@ -74,7 +82,7 @@ export const useEditor = ({
        onChange?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()));
      },
    },
-    [rerenderOnPropsChange]
+    [rerenderOnPropsChange],
  );

  const editorRef: MutableRefObject<Editor | null> = useRef(null);
@@ -30,7 +30,8 @@ export const useReadOnlyEditor = ({
  const editor = useCustomEditor(
    {
      editable: false,
-      content: typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
+      content:
+        typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
      editorProps: {
        ...CoreReadOnlyEditorProps,
        ...editorProps,
@@ -43,7 +44,7 @@ export const useReadOnlyEditor = ({
        ...extensions,
      ],
    },
-    [rerenderOnPropsChange]
+    [rerenderOnPropsChange],
  );

  const editorRef: MutableRefObject<Editor | null> = useRef(null);
@@ -0,0 +1,105 @@
+"use client";
+import * as React from "react";
+import { Extension } from "@tiptap/react";
+import { getEditorClassNames } from "../lib/utils";
+import { EditorProps } from "@tiptap/pm/view";
+import { useEditor } from "./hooks/use-editor";
+import { EditorContainer } from "../ui/components/editor-container";
+import { EditorContentWrapper } from "../ui/components/editor-content";
+import {
+  UploadImage,
+  DeleteImage,
+  IMentionSuggestion,
+} from "@plane/editor-types";
+
+interface ICoreEditor {
+  value: string;
+  uploadFile: UploadImage;
+  deleteFile: DeleteImage;
+  noBorder?: boolean;
+  borderOnFocus?: boolean;
+  customClassName?: string;
+  editorContentCustomClassNames?: string;
+  onChange?: (json: any, html: string) => void;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
+  setShouldShowAlert?: (showAlert: boolean) => void;
+  editable?: boolean;
+  forwardedRef?: any;
+  debouncedUpdatesEnabled?: boolean;
+  accessValue: string;
+  onAccessChange: (accessKey: string) => void;
+  commentAccess: {
+    icon: string;
+    key: string;
+    label: "Private" | "Public";
+  }[];
+  mentionHighlights?: string[];
+  mentionSuggestions?: IMentionSuggestion[];
+  extensions?: Extension[];
+  editorProps?: EditorProps;
+}
+
+interface EditorCoreProps extends ICoreEditor {
+  forwardedRef?: React.Ref<EditorHandle>;
+}
+
+interface EditorHandle {
+  clearEditor: () => void;
+  setEditorValue: (content: string) => void;
+}
+
+const CoreEditor = ({
+  onChange,
+  debouncedUpdatesEnabled,
+  editable,
+  setIsSubmitting,
+  setShouldShowAlert,
+  editorContentCustomClassNames,
+  value,
+  uploadFile,
+  deleteFile,
+  noBorder,
+  borderOnFocus,
+  customClassName,
+  forwardedRef,
+}: EditorCoreProps) => {
+  const editor = useEditor({
+    onChange,
+    debouncedUpdatesEnabled,
+    setIsSubmitting,
+    setShouldShowAlert,
+    value,
+    uploadFile,
+    deleteFile,
+    forwardedRef,
+  });
+
+  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}
+        />
+      </div>
+    </EditorContainer>
+  );
+};
+
+const CoreEditorWithRef = React.forwardRef<EditorHandle, ICoreEditor>(
+  (props, ref) => <CoreEditor {...props} forwardedRef={ref} />,
+);
+
+CoreEditorWithRef.displayName = "CoreEditorWithRef";
+
+export { CoreEditor, CoreEditorWithRef };
@@ -1,10 +1,21 @@
 import { IMentionSuggestion } from "@plane/editor-types";
 import { Editor } from "@tiptap/react";
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from "react";
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from "react";

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

@@ -26,7 +37,9 @@ const MentionList = forwardRef((props: MentionListProps, ref) => {
  };

  const upHandler = () => {
-    setSelectedIndex((selectedIndex + props.items.length - 1) % props.items.length);
+    setSelectedIndex(
+      (selectedIndex + props.items.length - 1) % props.items.length,
+    );
  };

  const downHandler = () => {
@@ -63,27 +76,31 @@ const MentionList = forwardRef((props: MentionListProps, ref) => {
  }));

  return props.items && props.items.length !== 0 ? (
-    <div className="mentions absolute max-h-40 w-48 space-y-0.5 overflow-y-auto rounded-md bg-custom-background-100 p-1 text-sm text-custom-text-300 shadow-custom-shadow-sm">
+    <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 cursor-pointer items-center gap-2 rounded p-1 hover:bg-custom-background-80 ${
+            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="grid h-4 w-4 flex-shrink-0 place-items-center overflow-hidden">
+            <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 rounded-sm object-cover" alt={item.title} />
+                <img
+                  src={item.avatar}
+                  className="h-full w-full object-cover rounded-sm"
+                  alt={item.title}
+                />
              ) : (
-                <div className="grid h-full w-full place-items-center rounded-sm bg-gray-700 text-xs capitalize text-white">
+                <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="flex-grow space-y-1 truncate">
-              <p className="truncate text-sm font-medium">{item.title}</p>
+              <p className="text-sm font-medium truncate">{item.title}</p>
              {/* <p className="text-xs text-gray-400">{item.subtitle}</p> */}
            </div>
          </div>
@@ -4,7 +4,11 @@ import suggestion from "./suggestion";
 import { CustomMention } from "./custom";
 import { IMentionHighlight, IMentionSuggestion } from "@plane/editor-types";

-export const Mentions = (mentionSuggestions: IMentionSuggestion[], mentionHighlights: IMentionHighlight[], readonly) =>
+export const Mentions = (
+  mentionSuggestions: IMentionSuggestion[],
+  mentionHighlights: IMentionHighlight[],
+  readonly,
+) =>
  CustomMention.configure({
    HTMLAttributes: {
      class: "mention",
@@ -8,7 +8,8 @@ import { IMentionHighlight } from "@plane/editor-types";
 // eslint-disable-next-line import/no-anonymous-default-export
 export default (props) => {
  const router = useRouter();
-  const highlights = props.extension.options.mentionHighlights as IMentionHighlight[];
+  const highlights = props.extension.options
+    .mentionHighlights as IMentionHighlight[];

  const handleClick = () => {
    if (!props.extension.options.readonly) {
@@ -17,13 +18,18 @@ export default (props) => {
  };

  return (
-    <NodeViewWrapper className="mention-component inline w-fit">
+    <NodeViewWrapper className="w-fit inline mention-component">
      <span
-        className={cn("mention rounded bg-custom-primary-100/20 px-1 py-0.5 font-medium text-custom-primary-100", {
-          "bg-yellow-500/20 text-yellow-500": 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)
-        })}
+        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}
@@ -7,7 +7,11 @@ import { IMentionSuggestion } from "@plane/editor-types";

 const Suggestion = (suggestions: IMentionSuggestion[]) => ({
  items: ({ query }: { query: string }) =>
-    suggestions.filter((suggestion) => suggestion.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5),
+    suggestions
+      .filter((suggestion) =>
+        suggestion.title.toLowerCase().startsWith(query.toLowerCase()),
+      )
+      .slice(0, 5),
  render: () => {
    let reactRenderer: ReactRenderer | null = null;
    let popup: any | null = null;
@@ -134,7 +134,9 @@ export const TableItem = (editor: Editor): EditorMenuItem => ({
 export const ImageItem = (
  editor: Editor,
  uploadFile: UploadImage,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
 ): EditorMenuItem => ({
  name: "image",
  isActive: () => editor?.isActive("image"),
@@ -15,7 +15,11 @@ interface ImageNode extends ProseMirrorNode {
 const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>
  new Plugin({
    key: deleteKey,
-    appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
+    appendTransaction: (
+      transactions: readonly Transaction[],
+      oldState: EditorState,
+      newState: EditorState,
+    ) => {
      const newImageSources = new Set<string>();
      newState.doc.descendants((node) => {
        if (node.type.name === IMAGE_NODE_TYPE) {
@@ -55,7 +59,10 @@ const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>

 export default TrackImageDeletionPlugin;

-export async function onNodeDeleted(src: string, deleteImage: DeleteImage): Promise<void> {
+export async function onNodeDeleted(
+  src: string,
+  deleteImage: DeleteImage,
+): Promise<void> {
  try {
    const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
    const resStatus = await deleteImage(assetUrlWithWorkspaceId);
@@ -67,7 +74,10 @@ export async function onNodeDeleted(src: string, deleteImage: DeleteImage): Prom
  }
 }

-export async function onNodeRestored(src: string, restoreImage: RestoreImage): Promise<void> {
+export async function onNodeRestored(
+  src: string,
+  restoreImage: RestoreImage,
+): Promise<void> {
  try {
    const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
    const resStatus = await restoreImage(assetUrlWithWorkspaceId);
@@ -21,7 +21,10 @@ const UploadImagesPlugin = (cancelUploadImage?: () => any) =>
          const placeholder = document.createElement("div");
          placeholder.setAttribute("class", "img-placeholder");
          const image = document.createElement("img");
-          image.setAttribute("class", "opacity-10 rounded-lg border border-custom-border-300");
+          image.setAttribute(
+            "class",
+            "opacity-10 rounded-lg border border-custom-border-300",
+          );
          image.src = src;
          placeholder.appendChild(image);

@@ -39,7 +42,10 @@ const UploadImagesPlugin = (cancelUploadImage?: () => any) =>
          // Create an SVG element from the SVG string
          const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-circle"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`;
          const parser = new DOMParser();
-          const svgElement = parser.parseFromString(svgString, "image/svg+xml").documentElement;
+          const svgElement = parser.parseFromString(
+            svgString,
+            "image/svg+xml",
+          ).documentElement;

          cancelButton.appendChild(svgElement);
          placeholder.appendChild(cancelButton);
@@ -48,7 +54,13 @@ const UploadImagesPlugin = (cancelUploadImage?: () => any) =>
          });
          set = set.add(tr.doc, [deco]);
        } else if (action && action.remove) {
-          set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id));
+          set = set.remove(
+            set.find(
+              undefined,
+              undefined,
+              (spec) => spec.id == action.remove.id,
+            ),
+          );
        }
        return set;
      },
@@ -64,7 +76,11 @@ export default UploadImagesPlugin;

 function findPlaceholder(state: EditorState, id: {}) {
  const decos = uploadKey.getState(state);
-  const found = decos.find(undefined, undefined, (spec: { id: number | undefined }) => spec.id == id);
+  const found = decos.find(
+    undefined,
+    undefined,
+    (spec: { id: number | undefined }) => spec.id == id,
+  );
  return found.length ? found[0].from : null;
 }

@@ -80,7 +96,9 @@ export async function startImageUpload(
  view: EditorView,
  pos: number,
  uploadFile: UploadImage,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
 ) {
  if (!file) {
    alert("No file selected. Please select a file to upload.");
@@ -133,7 +151,9 @@ export async function startImageUpload(
    const imageSrc = typeof src === "object" ? reader.result : src;

    const node = schema.nodes.image.create({ src: imageSrc });
-    const transaction = view.state.tr.replaceWith(pos, pos, node).setMeta(uploadKey, { remove: { id } });
+    const transaction = view.state.tr
+      .replaceWith(pos, pos, node)
+      .setMeta(uploadKey, { remove: { id } });
    view.dispatch(transaction);
  } catch (error) {
    console.error("Upload error: ", error);
@@ -141,7 +161,10 @@ export async function startImageUpload(
  }
 }

-const UploadImageHandler = (file: File, uploadFile: UploadImage): Promise<string> => {
+const UploadImageHandler = (
+  file: File,
+  uploadFile: UploadImage,
+): Promise<string> => {
  try {
    return new Promise(async (resolve, reject) => {
      try {
@@ -5,7 +5,9 @@ import { startImageUpload } from "./plugins/upload-image";

 export function CoreEditorProps(
  uploadFile: UploadImage,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
 ): EditorProps {
  return {
    attributes: {
@@ -32,7 +34,11 @@ export function CoreEditorProps(
          }
        }
      }
-      if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
+      if (
+        event.clipboardData &&
+        event.clipboardData.files &&
+        event.clipboardData.files[0]
+      ) {
        event.preventDefault();
        const file = event.clipboardData.files[0];
        const pos = view.state.selection.from;
@@ -51,7 +57,12 @@ export function CoreEditorProps(
          }
        }
      }
-      if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+      if (
+        !moved &&
+        event.dataTransfer &&
+        event.dataTransfer.files &&
+        event.dataTransfer.files[0]
+      ) {
        event.preventDefault();
        const file = event.dataTransfer.files[0];
        const coordinates = view.posAtCoords({
@@ -59,7 +70,13 @@ export function CoreEditorProps(
          top: event.clientY,
        });
        if (coordinates) {
-          startImageUpload(file, view, coordinates.pos - 1, uploadFile, setIsSubmitting);
+          startImageUpload(
+            file,
+            view,
+            coordinates.pos - 1,
+            uploadFile,
+            setIsSubmitting,
+          );
        }
        return true;
      }
@@ -45,7 +45,8 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
    },
    code: {
      HTMLAttributes: {
-        class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
+        class:
+          "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
        spellcheck: "false",
      },
    },
@@ -93,5 +94,9 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
  TableHeader,
  TableCell,
  TableRow,
-  Mentions(mentionConfig.mentionSuggestions, mentionConfig.mentionHighlights, true),
+  Mentions(
+    mentionConfig.mentionSuggestions,
+    mentionConfig.mentionHighlights,
+    true,
+  ),
 ];
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["custom"],
-};
@@ -1,6 +0,0 @@
-.next
-.vercel
-.tubro
-out/
-dis/
-build/
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
@@ -1,6 +1,6 @@
 {
  "name": "@plane/document-editor",
-  "version": "0.14.0",
+  "version": "0.1.0",
  "description": "Package that powers Plane's Pages Editor",
  "main": "./dist/index.mjs",
  "module": "./dist/index.mjs",
@@ -16,7 +16,7 @@
    }
  },
  "scripts": {
-    "build": "tsup --minify",
+    "build": "tsup",
    "dev": "tsup --watch",
    "check-types": "tsc --noEmit",
    "format": "prettier --write \"**/*.{ts,tsx,md}\""
@@ -36,6 +36,9 @@
    "@tiptap/extension-placeholder": "^2.1.11",
    "@tiptap/pm": "^2.1.12",
    "@tiptap/suggestion": "^2.1.12",
+    "@types/node": "18.15.3",
+    "@types/react": "^18.2.39",
+    "@types/react-dom": "18.0.11",
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "react-popper": "^2.3.0",
@@ -1,3 +1,6 @@
 export { DocumentEditor, DocumentEditorWithRef } from "./ui";
-export { DocumentReadOnlyEditor, DocumentReadOnlyEditorWithRef } from "./ui/readonly";
+export {
+  DocumentReadOnlyEditor,
+  DocumentReadOnlyEditorWithRef,
+} from "./ui/readonly";
 export { FixedMenu } from "./ui/menu/fixed-menu";
@@ -12,7 +12,7 @@ export const AlertLabel = (props: IAlertLabelProps) => {

  return (
    <div
-      className={`flex h-7 items-center gap-2 rounded-full px-3 py-0.5 text-xs font-medium ${backgroundColor} ${textColor}`}
+      className={`h-7 flex items-center gap-2 font-medium py-0.5 px-3 rounded-full text-xs ${backgroundColor} ${textColor}`}
    >
      {Icon && <Icon className="h-3 w-3" />}
      <span>{label}</span>
@@ -1,4 +1,8 @@
-import { HeadingComp, HeadingThreeComp, SubheadingComp } from "./heading-component";
+import {
+  HeadingComp,
+  HeadingThreeComp,
+  SubheadingComp,
+} from "./heading-component";
 import { IMarking } from "..";
 import { Editor } from "@tiptap/react";
 import { scrollSummary } from "../utils/editor-summary-utils";
@@ -12,21 +16,32 @@ export const ContentBrowser = (props: ContentBrowserProps) => {
  const { editor, markings } = props;

  return (
-    <div className="flex h-full flex-col overflow-hidden">
+    <div className="flex flex-col h-full overflow-hidden">
      <h2 className="font-medium">Table of Contents</h2>
      <div className="h-full overflow-y-auto">
        {markings.length !== 0 ? (
          markings.map((marking) =>
            marking.level === 1 ? (
-              <HeadingComp onClick={() => scrollSummary(editor, marking)} heading={marking.text} />
+              <HeadingComp
+                onClick={() => scrollSummary(editor, marking)}
+                heading={marking.text}
+              />
            ) : marking.level === 2 ? (
-              <SubheadingComp onClick={() => scrollSummary(editor, marking)} subHeading={marking.text} />
+              <SubheadingComp
+                onClick={() => scrollSummary(editor, marking)}
+                subHeading={marking.text}
+              />
            ) : (
-              <HeadingThreeComp heading={marking.text} onClick={() => scrollSummary(editor, marking)} />
-            )
+              <HeadingThreeComp
+                heading={marking.text}
+                onClick={() => scrollSummary(editor, marking)}
+              />
+            ),
          )
        ) : (
-          <p className="mt-3 text-xs text-custom-text-400">Headings will be displayed here for navigation</p>
+          <p className="mt-3 text-xs text-custom-text-400">
+            Headings will be displayed here for navigation
+          </p>
        )}
      </div>
    </div>
@@ -5,7 +5,10 @@ import { FixedMenu } from "../menu";
 import { UploadImage } from "@plane/editor-types";
 import { DocumentDetails } from "../types/editor-types";
 import { AlertLabel } from "./alert-label";
-import { IVerticalDropdownItemProps, VerticalDropdownMenu } from "./vertical-dropdown-menu";
+import {
+  IVerticalDropdownItemProps,
+  VerticalDropdownMenu,
+} from "./vertical-dropdown-menu";
 import { SummaryPopover } from "./summary-popover";
 import { InfoPopover } from "./info-popover";

@@ -20,7 +23,9 @@ interface IEditorHeader {
  archivedAt?: Date;
  readonly: boolean;
  uploadFile?: UploadImage;
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
  documentDetails: DocumentDetails;
  isSubmitting?: "submitting" | "submitted" | "saved";
 }
@@ -43,8 +48,8 @@ export const EditorHeader = (props: IEditorHeader) => {
  } = props;

  return (
-    <div className="flex items-center border-b border-custom-border-200 px-5 py-2">
-      <div className="w-56 flex-shrink-0 lg:w-72">
+    <div className="flex items-center border-b border-custom-border-200 py-2 px-5">
+      <div className="flex-shrink-0 w-56 lg:w-72">
        <SummaryPopover
          editor={editor}
          markings={markings}
@@ -55,11 +60,15 @@ export const EditorHeader = (props: IEditorHeader) => {

      <div className="flex-shrink-0">
        {!readonly && uploadFile && (
-          <FixedMenu editor={editor} uploadFile={uploadFile} setIsSubmitting={setIsSubmitting} />
+          <FixedMenu
+            editor={editor}
+            uploadFile={uploadFile}
+            setIsSubmitting={setIsSubmitting}
+          />
        )}
      </div>

-      <div className="flex flex-grow items-center justify-end gap-3">
+      <div className="flex-grow flex items-center justify-end gap-3">
        {isLocked && (
          <AlertLabel
            Icon={Lock}
@@ -79,7 +88,7 @@ export const EditorHeader = (props: IEditorHeader) => {

        {!isLocked && !isArchived ? (
          <div
-            className={`absolute right-[120px] flex items-center gap-x-2 transition-all duration-300 ${
+            className={`flex absolute right-[120px] transition-all duration-300 items-center gap-x-2 ${
              isSubmitting === "saved" ? "fadeOut" : "fadeIn"
            }`}
          >
@@ -23,7 +23,7 @@ export const SubheadingComp = ({
 }) => (
  <p
    onClick={onClick}
-    className="ml-6 mt-2 cursor-pointer text-xs font-medium tracking-tight text-gray-400 hover:text-custom-primary"
+    className="ml-6 mt-2 text-xs cursor-pointer font-medium tracking-tight text-gray-400 hover:text-custom-primary"
    role="button"
  >
    {subHeading}
@@ -39,7 +39,7 @@ export const HeadingThreeComp = ({
 }) => (
  <p
    onClick={onClick}
-    className="ml-8 mt-2 cursor-pointer text-xs font-medium tracking-tight text-gray-400 hover:text-custom-primary"
+    className="ml-8 mt-2 text-xs cursor-pointer font-medium tracking-tight text-gray-400 hover:text-custom-primary"
    role="button"
  >
    {heading}
@@ -19,7 +19,10 @@ const renderDate = (date: Date): string => {
    hour12: true,
  };

-  const formattedDate: string = new Intl.DateTimeFormat("en-US", options).format(date);
+  const formattedDate: string = new Intl.DateTimeFormat(
+    "en-US",
+    options,
+  ).format(date);

  return formattedDate;
 };
@@ -29,35 +32,42 @@ export const InfoPopover: React.FC<Props> = (props) => {

  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);

-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null,
+  );

-  const { styles: infoPopoverStyles, attributes: infoPopoverAttributes } = usePopper(referenceElement, popperElement, {
-    placement: "bottom-start",
-  });
+  const { styles: infoPopoverStyles, attributes: infoPopoverAttributes } =
+    usePopper(referenceElement, popperElement, {
+      placement: "bottom-start",
+    });

  return (
-    <div onMouseEnter={() => setIsPopoverOpen(true)} onMouseLeave={() => setIsPopoverOpen(false)}>
+    <div
+      onMouseEnter={() => setIsPopoverOpen(true)}
+      onMouseLeave={() => setIsPopoverOpen(false)}
+    >
      <button type="button" ref={setReferenceElement} className="block">
        <Info className="h-3.5 w-3.5" />
      </button>
      {isPopoverOpen && (
        <div
-          className="z-10 w-64 space-y-2.5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg"
+          className="z-10 w-64 shadow-custom-shadow-rg rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 space-y-2.5"
          ref={setPopperElement}
          style={infoPopoverStyles.popper}
          {...infoPopoverAttributes.popper}
        >
          <div className="space-y-1.5">
-            <h6 className="text-xs text-custom-text-400">Last updated on</h6>
-            <h5 className="flex items-center gap-1 text-sm">
+            <h6 className="text-custom-text-400 text-xs">Last updated on</h6>
+            <h5 className="text-sm flex items-center gap-1">
              <History className="h-3 w-3" />
              {renderDate(new Date(documentDetails.last_updated_at))}
            </h5>
          </div>
          <div className="space-y-1.5">
-            <h6 className="text-xs text-custom-text-400">Created on</h6>
-            <h5 className="flex items-center gap-1 text-sm">
+            <h6 className="text-custom-text-400 text-xs">Created on</h6>
+            <h5 className="text-sm flex items-center gap-1">
              <Calendar className="h-3 w-3" />
              {renderDate(new Date(documentDetails.created_on))}
            </h5>
@@ -25,7 +25,14 @@ const debounce = (func: (...args: any[]) => void, wait: number) => {
 };

 export const PageRenderer = (props: IPageRenderer) => {
-  const { documentDetails, editor, editorClassNames, editorContentCustomClassNames, updatePageTitle, readonly } = props;
+  const {
+    documentDetails,
+    editor,
+    editorClassNames,
+    editorContentCustomClassNames,
+    updatePageTitle,
+    readonly,
+  } = props;

  const [pageTitle, setPagetitle] = useState(documentDetails.title);

@@ -37,24 +44,27 @@ export const PageRenderer = (props: IPageRenderer) => {
  };

  return (
-    <div className="w-full pb-64 pl-7 pt-5">
+    <div className="w-full pl-7 pt-5 pb-64">
      {!readonly ? (
        <input
          onChange={(e) => handlePageTitleChange(e.target.value)}
-          className="-mt-2 w-full break-words border-none bg-custom-background pr-5 text-4xl font-bold outline-none"
+          className="text-4xl bg-custom-background font-bold break-words pr-5 -mt-2 w-full border-none outline-none"
          value={pageTitle}
        />
      ) : (
        <input
          onChange={(e) => handlePageTitleChange(e.target.value)}
-          className="-mt-2 w-full overflow-x-clip break-words border-none bg-custom-background pr-5 text-4xl font-bold outline-none"
+          className="text-4xl bg-custom-background font-bold break-words pr-5 -mt-2 w-full border-none outline-none overflow-x-clip"
          value={pageTitle}
          disabled
        />
      )}
-      <div className="flex h-full w-full flex-col pr-5">
+      <div className="flex flex-col h-full w-full pr-5">
        <EditorContainer editor={editor} editorClassNames={editorClassNames}>
-          <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+          <EditorContentWrapper
+            editor={editor}
+            editorContentCustomClassNames={editorContentCustomClassNames}
+          />
        </EditorContainer>
      </div>
    </div>
@@ -17,24 +17,26 @@ type Props = {
 export const SummaryPopover: React.FC<Props> = (props) => {
  const { editor, markings, sidePeekVisible, setSidePeekVisible } = props;

-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-
-  const { styles: summaryPopoverStyles, attributes: summaryPopoverAttributes } = usePopper(
-    referenceElement,
-    popperElement,
-    {
-      placement: "bottom-start",
-    }
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null,
  );

+  const { styles: summaryPopoverStyles, attributes: summaryPopoverAttributes } =
+    usePopper(referenceElement, popperElement, {
+      placement: "bottom-start",
+    });
+
  return (
    <div className="group/summary-popover w-min whitespace-nowrap">
      <button
        type="button"
        ref={setReferenceElement}
-        className={`grid h-7 w-7 place-items-center rounded ${
-          sidePeekVisible ? "bg-custom-primary-100/20 text-custom-primary-100" : "text-custom-text-300"
+        className={`h-7 w-7 grid place-items-center rounded ${
+          sidePeekVisible
+            ? "bg-custom-primary-100/20 text-custom-primary-100"
+            : "text-custom-text-300"
        }`}
        onClick={() => setSidePeekVisible(!sidePeekVisible)}
      >
@@ -42,7 +44,7 @@ export const SummaryPopover: React.FC<Props> = (props) => {
      </button>
      {!sidePeekVisible && (
        <div
-          className="z-10 hidden max-h-80 w-64 overflow-y-auto rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 shadow-custom-shadow-rg group-hover/summary-popover:block"
+          className="hidden group-hover/summary-popover:block z-10 max-h-80 w-64 shadow-custom-shadow-rg rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-3 overflow-y-auto"
          ref={setPopperElement}
          style={summaryPopoverStyles.popper}
          {...summaryPopoverAttributes.popper}
@@ -8,10 +8,14 @@ interface ISummarySideBarProps {
  sidePeekVisible: boolean;
 }

-export const SummarySideBar = ({ editor, markings, sidePeekVisible }: ISummarySideBarProps) => {
+export const SummarySideBar = ({
+  editor,
+  markings,
+  sidePeekVisible,
+}: ISummarySideBarProps) => {
  return (
    <div
-      className={`h-full transform overflow-hidden p-5 transition-all duration-200 ${
+      className={`h-full p-5 transition-all duration-200 transform overflow-hidden ${
        sidePeekVisible ? "translate-x-0" : "-translate-x-full"
      }`}
    >
@@ -23,7 +23,11 @@ export interface IVerticalDropdownMenuProps {
  items: IVerticalDropdownItemProps[];
 }

-const VerticalDropdownItem = ({ Icon, label, action }: IVerticalDropdownItemProps) => {
+const VerticalDropdownItem = ({
+  Icon,
+  label,
+  action,
+}: IVerticalDropdownItemProps) => {
  return (
    <CustomMenu.MenuItem onClick={action} className="flex items-center gap-2">
      <Icon className="h-3 w-3" />
@@ -38,11 +42,19 @@ export const VerticalDropdownMenu = ({ items }: IVerticalDropdownMenuProps) => {
      maxHeight={"md"}
      className={"h-4.5 mt-1"}
      placement={"bottom-start"}
-      optionsClassName={"border-custom-border border-r border-solid transition-all duration-200 ease-in-out "}
+      optionsClassName={
+        "border-custom-border border-r border-solid transition-all duration-200 ease-in-out "
+      }
      customButton={<MoreVertical size={14} />}
    >
      {items.map((item, index) => (
-        <VerticalDropdownItem key={index} type={item.type} Icon={item.Icon} label={item.label} action={item.action} />
+        <VerticalDropdownItem
+          key={index}
+          type={item.type}
+          Icon={item.Icon}
+          label={item.label}
+          action={item.action}
+        />
      ))}
    </CustomMenu>
  );
@@ -11,22 +11,23 @@ import { LayersIcon } from "@plane/ui";
 export const DocumentEditorExtensions = (
  uploadFile: UploadImage,
  issueEmbedConfig?: IIssueEmbedConfig,
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void,
 ) => {
-  const additionalOptions: ISlashCommandItem[] = [
+  const additonalOptions: ISlashCommandItem[] = [
    {
-      key: "issue_embed",
-      title: "Issue embed",
-      description: "Embed an issue from the project.",
-      searchTerms: ["issue", "link", "embed"],
-      icon: <LayersIcon className="h-3.5 w-3.5" />,
+      title: "Issue Embed",
+      description: "Embed an issue from the project",
+      searchTerms: ["Issue", "Iss"],
+      icon: <LayersIcon height={"20px"} width={"20px"} />,
      command: ({ editor, range }) => {
        editor
          .chain()
          .focus()
          .insertContentAt(
            range,
-            "<p class='text-sm bg-gray-300 w-fit pl-3 pr-3 pt-1 pb-1 rounded shadow-sm'>#issue_</p>"
+            "<p class='text-sm bg-gray-300 w-fit pl-3 pr-3 pt-1 pb-1 rounded shadow-sm'>#issue_</p>",
          )
          .run();
      },
@@ -34,7 +35,7 @@ export const DocumentEditorExtensions = (
  ];

  return [
-    SlashCommand(uploadFile, setIsSubmitting, additionalOptions),
+    SlashCommand(uploadFile, setIsSubmitting, additonalOptions),
    DragAndDrop,
    Placeholder.configure({
      placeholder: ({ node }) => {
@@ -18,32 +18,34 @@ export interface IIssueListSuggestion {
 }

 export const IssueSuggestions = (suggestions: any[]) => {
-  const mappedSuggestions: IIssueListSuggestion[] = suggestions.map((suggestion): IIssueListSuggestion => {
-    let transactionId = uuidv4();
-    return {
-      title: suggestion.name,
-      priority: suggestion.priority.toString(),
-      identifier: `${suggestion.project_detail.identifier}-${suggestion.sequence_id}`,
-      state: suggestion.state_detail.name,
-      command: ({ editor, range }) => {
-        editor
-          .chain()
-          .focus()
-          .insertContentAt(range, {
-            type: "issue-embed-component",
-            attrs: {
-              entity_identifier: suggestion.id,
-              id: transactionId,
-              title: suggestion.name,
-              project_identifier: suggestion.project_detail.identifier,
-              sequence_id: suggestion.sequence_id,
-              entity_name: "issue",
-            },
-          })
-          .run();
-      },
-    };
-  });
+  const mappedSuggestions: IIssueListSuggestion[] = suggestions.map(
+    (suggestion): IIssueListSuggestion => {
+      let transactionId = uuidv4();
+      return {
+        title: suggestion.name,
+        priority: suggestion.priority.toString(),
+        identifier: `${suggestion.project_detail.identifier}-${suggestion.sequence_id}`,
+        state: suggestion.state_detail.name,
+        command: ({ editor, range }) => {
+          editor
+            .chain()
+            .focus()
+            .insertContentAt(range, {
+              type: "issue-embed-component",
+              attrs: {
+                entity_identifier: suggestion.id,
+                id: transactionId,
+                title: suggestion.name,
+                project_identifier: suggestion.project_detail.identifier,
+                sequence_id: suggestion.sequence_id,
+                entity_name: "issue",
+              },
+            })
+            .run();
+        },
+      };
+    },
+  );

  return IssueEmbedSuggestions.configure({
    suggestion: {
@@ -9,7 +9,15 @@ export const IssueEmbedSuggestions = Extension.create({
  addOptions() {
    return {
      suggestion: {
-        command: ({ editor, range, props }: { editor: Editor; range: Range; props: any }) => {
+        command: ({
+          editor,
+          range,
+          props,
+        }: {
+          editor: Editor;
+          range: Range;
+          props: any;
+        }) => {
          props.command({ editor, range });
        },
      },
@@ -1,6 +1,8 @@
 import { IIssueListSuggestion } from ".";

-export const getIssueSuggestionItems = (issueSuggestions: Array<IIssueListSuggestion>) => {
+export const getIssueSuggestionItems = (
+  issueSuggestions: Array<IIssueListSuggestion>,
+) => {
  return ({ query }: { query: string }) => {
    const search = query.toLowerCase();
    const filteredSuggestions = issueSuggestions.filter((item) => {
@@ -2,7 +2,13 @@ import { cn } from "@plane/editor-core";
 import { Editor } from "@tiptap/core";
 import tippy from "tippy.js";
 import { ReactRenderer } from "@tiptap/react";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import { PriorityIcon } from "@plane/ui";

 const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
@@ -56,7 +62,9 @@ const IssueSuggestionList = ({
    let newDisplayedItems: { [key: string]: IssueSuggestionProps[] } = {};
    let totalLength = 0;
    sections.forEach((section) => {
-      newDisplayedItems[section] = items.filter((item) => item.state === section).slice(0, 5);
+      newDisplayedItems[section] = items
+        .filter((item) => item.state === section)
+        .slice(0, 5);

      totalLength += newDisplayedItems[section].length;
    });
@@ -71,7 +79,7 @@ const IssueSuggestionList = ({
        command(item);
      }
    },
-    [command, displayedItems, currentSection]
+    [command, displayedItems, currentSection],
  );

  useEffect(() => {
@@ -85,17 +93,22 @@ const IssueSuggestionList = ({
        // }
        if (e.key === "ArrowUp") {
          setSelectedIndex(
-            (selectedIndex + displayedItems[currentSection].length - 1) % displayedItems[currentSection].length
+            (selectedIndex + displayedItems[currentSection].length - 1) %
+              displayedItems[currentSection].length,
          );
          return true;
        }
        if (e.key === "ArrowDown") {
-          const nextIndex = (selectedIndex + 1) % displayedItems[currentSection].length;
+          const nextIndex =
+            (selectedIndex + 1) % displayedItems[currentSection].length;
          setSelectedIndex(nextIndex);
          if (nextIndex === 4) {
            const nextItems = items
              .filter((item) => item.state === currentSection)
-              .slice(displayedItems[currentSection].length, displayedItems[currentSection].length + 5);
+              .slice(
+                displayedItems[currentSection].length,
+                displayedItems[currentSection].length + 5,
+              );
            setDisplayedItems((prevItems) => ({
              ...prevItems,
              [currentSection]: [...prevItems[currentSection], ...nextItems],
@@ -125,17 +138,29 @@ const IssueSuggestionList = ({
    return () => {
      document.removeEventListener("keydown", onKeyDown);
    };
-  }, [displayedItems, selectedIndex, setSelectedIndex, selectItem, currentSection]);
+  }, [
+    displayedItems,
+    selectedIndex,
+    setSelectedIndex,
+    selectItem,
+    currentSection,
+  ]);

  useLayoutEffect(() => {
    const container = commandListContainer?.current;
    if (container) {
-      const sectionContainer = container?.querySelector(`#${currentSection}-container`) as HTMLDivElement;
+      const sectionContainer = container?.querySelector(
+        `#${currentSection}-container`,
+      ) as HTMLDivElement;
      if (sectionContainer) {
        updateScrollView(container, sectionContainer);
      }
-      const sectionScrollContainer = container?.querySelector(`#${currentSection}`) as HTMLElement;
-      const item = sectionScrollContainer?.children[selectedIndex] as HTMLElement;
+      const sectionScrollContainer = container?.querySelector(
+        `#${currentSection}`,
+      ) as HTMLElement;
+      const item = sectionScrollContainer?.children[
+        selectedIndex
+      ] as HTMLElement;
      if (item && sectionScrollContainer) {
        updateScrollView(sectionScrollContainer, item);
      }
@@ -146,41 +171,56 @@ const IssueSuggestionList = ({
    <div
      id="issue-list-container"
      ref={commandListContainer}
-      className="fixed z-[10] max-h-80 w-60 overflow-y-auto overflow-x-hidden rounded-md border border-custom-border-100 bg-custom-background-100 px-1 shadow-custom-shadow-xs transition-all"
+      className="z-[10] fixed max-h-80 w-60 overflow-y-auto overflow-x-hidden rounded-md border border-custom-border-100 bg-custom-background-100 px-1 shadow-custom-shadow-xs transition-all"
    >
      {sections.map((section) => {
        const sectionItems = displayedItems[section];
        return (
          sectionItems &&
          sectionItems.length > 0 && (
-            <div className={"flex h-full w-full flex-col"} key={`${section}-container`} id={`${section}-container`}>
+            <div
+              className={"h-full w-full flex flex-col"}
+              key={`${section}-container`}
+              id={`${section}-container`}
+            >
              <h6
                className={
-                  "sticky top-0 z-[10] bg-custom-background-100 px-2 py-1 text-xs font-medium text-custom-text-400"
+                  "sticky top-0 z-[10] bg-custom-background-100 text-xs text-custom-text-400 font-medium px-2 py-1"
                }
              >
                {section}
              </h6>
-              <div key={section} id={section} className={"max-h-[140px] overflow-x-hidden overflow-y-scroll"}>
-                {sectionItems.map((item: IssueSuggestionProps, index: number) => (
-                  <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":
-                          section === currentSection && index === selectedIndex,
-                      }
-                    )}
-                    key={index}
-                    onClick={() => selectItem(index)}
-                  >
-                    <h5 className="whitespace-nowrap text-xs text-custom-text-300">{item.identifier}</h5>
-                    <PriorityIcon priority={item.priority} />
-                    <div>
-                      <p className="flex-grow truncate text-xs">{item.title}</p>
-                    </div>
-                  </button>
-                ))}
+              <div
+                key={section}
+                id={section}
+                className={"max-h-[140px] overflow-y-scroll overflow-x-hidden"}
+              >
+                {sectionItems.map(
+                  (item: IssueSuggestionProps, index: number) => (
+                    <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":
+                            section === currentSection &&
+                            index === selectedIndex,
+                        },
+                      )}
+                      key={index}
+                      onClick={() => selectItem(index)}
+                    >
+                      <h5 className="text-xs text-custom-text-300 whitespace-nowrap">
+                        {item.identifier}
+                      </h5>
+                      <PriorityIcon priority={item.priority} />
+                      <div>
+                        <p className="flex-grow text-xs truncate">
+                          {item.title}
+                        </p>
+                      </div>
+                    </button>
+                  ),
+                )}
              </div>
            </div>
          )
@@ -5,7 +5,8 @@ interface IssueWidgetExtensionProps {
  issueEmbedConfig?: IIssueEmbedConfig;
 }

-export const IssueWidgetExtension = ({ issueEmbedConfig }: IssueWidgetExtensionProps) =>
-  IssueWidget.configure({
-    issueEmbedConfig,
-  });
+export const IssueWidgetExtension = ({
+  issueEmbedConfig,
+}: IssueWidgetExtensionProps) => IssueWidget.configure({
+  issueEmbedConfig,
+});
@@ -30,13 +30,15 @@ const IssueWidgetCard = (props) => {
      {loading == 0 ? (
        <div
          onClick={completeIssueEmbedAction}
-          className="w-full cursor-pointer space-y-2 rounded-md border-[0.5px] border-custom-border-200 p-3 shadow-custom-shadow-2xs"
+          className="cursor-pointer w-full space-y-2 border-[0.5px] border-custom-border-200 rounded-md p-3 shadow-custom-shadow-2xs"
        >
          <h5 className="text-xs text-custom-text-300">
            {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}
          </h5>
-          <h4 className="break-words text-sm font-medium">{issueDetails.name}</h4>
-          <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+          <h4 className="break-words text-sm font-medium">
+            {issueDetails.name}
+          </h4>
+          <div className="flex items-center flex-wrap gap-x-3 gap-y-2">
            <div>
              <PriorityIcon priority={issueDetails.priority} />
            </div>
@@ -44,13 +46,18 @@ const IssueWidgetCard = (props) => {
              <AvatarGroup size="sm">
                {issueDetails.assignee_details.map((assignee) => {
                  return (
-                    <Avatar key={assignee.id} name={assignee.display_name} src={assignee.avatar} className={"m-0"} />
+                    <Avatar
+                      key={assignee.id}
+                      name={assignee.display_name}
+                      src={assignee.avatar}
+                      className={"m-0"}
+                    />
                  );
                })}
              </AvatarGroup>
            </div>
            {issueDetails.target_date && (
-              <div className="flex h-5 items-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs text-custom-text-100">
+              <div className="rounded flex px-2.5 py-1 items-center border-[0.5px] border-custom-border-300 gap-1 text-custom-text-100 text-xs h-5">
                <Calendar className="h-3 w-3" strokeWidth={1.5} />
                {new Date(issueDetails.target_date).toLocaleDateString()}
              </div>
@@ -58,15 +65,17 @@ const IssueWidgetCard = (props) => {
          </div>
        </div>
      ) : loading == -1 ? (
-        <div className="flex items-center gap-[8px] rounded border-2 border-[#D97706] bg-[#FFFBEB] pb-[10px] pl-[13px] pt-[10px] text-[#D97706]">
+        <div className="flex gap-[8px] items-center pb-[10px] pt-[10px] pl-[13px] rounded border-[#D97706] border-2 bg-[#FFFBEB] text-[#D97706]">
          <AlertTriangle color={"#D97706"} />
-          {"This Issue embed is not found in any project. It can no longer be updated or accessed from here."}
+          {
+            "This Issue embed is not found in any project. It can no longer be updated or accessed from here."
+          }
        </div>
      ) : (
-        <div className="w-full space-y-2 rounded-md border-[0.5px] border-custom-border-200 p-3 shadow-custom-shadow-2xs">
+        <div className="w-full space-y-2 border-[0.5px] border-custom-border-200 rounded-md p-3 shadow-custom-shadow-2xs">
          <Loader className={"px-6"}>
            <Loader.Item height={"30px"} />
-            <div className={"mt-3 space-y-2"}>
+            <div className={"space-y-2 mt-3"}>
              <Loader.Item height={"20px"} width={"70%"} />
              <Loader.Item height={"20px"} width={"60%"} />
            </div>
@@ -35,7 +35,10 @@ export const IssueWidget = Node.create({

  addNodeView() {
    return ReactNodeViewRenderer((props: Object) => (
-      <IssueWidgetCard {...props} issueEmbedConfig={this.options.issueEmbedConfig} />
+      <IssueWidgetCard
+        {...props}
+        issueEmbedConfig={this.options.issueEmbedConfig}
+      />
    ));
  },

@@ -5,5 +5,5 @@ export interface IEmbedConfig {
 export interface IIssueEmbedConfig {
  fetchIssue: (issueId: string) => Promise<any>;
  clickAction: (issueId: string, issueTitle: string) => void;
-  issues: Array<any>;
+	issues: Array<any>;
 }
@@ -15,14 +15,21 @@ export const useEditorMarkings = () => {
      nodes.forEach((node) => {
        if (
          node.type === "heading" &&
-          (node.attrs.level === 1 || node.attrs.level === 2 || node.attrs.level === 3) &&
+          (node.attrs.level === 1 ||
+            node.attrs.level === 2 ||
+            node.attrs.level === 3) &&
          node.content
        ) {
          tempMarkings.push({
            type: "heading",
            level: node.attrs.level,
            text: node.content[0].text,
-            sequence: node.attrs.level === 1 ? ++h1Sequence : node.attrs.level === 2 ? ++h2Sequence : ++h3Sequence,
+            sequence:
+              node.attrs.level === 1
+                ? ++h1Sequence
+                : node.attrs.level === 2
+                ? ++h2Sequence
+                : ++h3Sequence,
          });
        }
      });
@@ -2,7 +2,11 @@
 import React, { useState } from "react";
 import { getEditorClassNames, useEditor } from "@plane/editor-core";
 import { DocumentEditorExtensions } from "./extensions";
-import { IDuplicationConfig, IPageArchiveConfig, IPageLockConfig } from "./types/menu-actions";
+import {
+  IDuplicationConfig,
+  IPageArchiveConfig,
+  IPageLockConfig,
+} from "./types/menu-actions";
 import { EditorHeader } from "./components/editor-header";
 import { useEditorMarkings } from "./hooks/use-editor-markings";
 import { SummarySideBar } from "./components/summary-side-bar";
@@ -37,7 +41,9 @@ interface IDocumentEditor {
  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;
  forwardedRef?: any;
  updatePageTitle: (title: string) => Promise<void>;
@@ -112,7 +118,11 @@ const DocumentEditor = ({
    cancelUploadImage,
    rerenderOnPropsChange,
    forwardedRef,
-    extensions: DocumentEditorExtensions(uploadFile, embedConfig?.issueEmbedConfig, setIsSubmitting),
+    extensions: DocumentEditorExtensions(
+      uploadFile,
+      embedConfig?.issueEmbedConfig,
+      setIsSubmitting,
+    ),
  });

  if (!editor) {
@@ -137,7 +147,7 @@ const DocumentEditor = ({
  if (!editor) return null;

  return (
-    <div className="flex h-full w-full flex-col overflow-hidden">
+    <div className="h-full w-full flex flex-col overflow-hidden">
      <EditorHeader
        readonly={false}
        KanbanMenuOptions={KanbanMenuOptions}
@@ -153,9 +163,13 @@ const DocumentEditor = ({
        documentDetails={documentDetails}
        isSubmitting={isSubmitting}
      />
-      <div className="flex h-full w-full overflow-y-auto">
-        <div className="sticky top-0 h-full w-56 flex-shrink-0 lg:w-72">
-          <SummarySideBar editor={editor} markings={markings} sidePeekVisible={sidePeekVisible} />
+      <div className="h-full w-full flex overflow-y-auto">
+        <div className="flex-shrink-0 h-full w-56 lg:w-72 sticky top-0">
+          <SummarySideBar
+            editor={editor}
+            markings={markings}
+            sidePeekVisible={sidePeekVisible}
+          />
        </div>
        <div className="h-full w-[calc(100%-14rem)] lg:w-[calc(100%-18rem-18rem)]">
          <PageRenderer
@@ -167,15 +181,15 @@ const DocumentEditor = ({
            updatePageTitle={updatePageTitle}
          />
        </div>
-        <div className="hidden w-56 flex-shrink-0 lg:block lg:w-72" />
+        <div className="hidden lg:block flex-shrink-0 w-56 lg:w-72" />
      </div>
    </div>
  );
 };

-const DocumentEditorWithRef = React.forwardRef<EditorHandle, IDocumentEditor>((props, ref) => (
-  <DocumentEditor {...props} forwardedRef={ref} />
-));
+const DocumentEditorWithRef = React.forwardRef<EditorHandle, IDocumentEditor>(
+  (props, ref) => <DocumentEditor {...props} forwardedRef={ref} />,
+);

 DocumentEditorWithRef.displayName = "DocumentEditorWithRef";

@@ -1,4 +1,6 @@
 import { Editor } from "@tiptap/react";
+import { BoldIcon } from "lucide-react";
+
 import {
  BoldItem,
  BulletListItem,
@@ -16,16 +18,22 @@ import {
  HeadingTwoItem,
  HeadingThreeItem,
  findTableAncestor,
-  EditorMenuItem,
 } from "@plane/editor-core";
 import { UploadImage } from "@plane/editor-types";

-export type BubbleMenuItem = EditorMenuItem;
+export interface BubbleMenuItem {
+  name: string;
+  isActive: () => boolean;
+  command: () => void;
+  icon: typeof BoldIcon;
+}

 type EditorBubbleMenuProps = {
  editor: Editor;
  uploadFile: UploadImage;
-  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
+  setIsSubmitting?: (
+    isSubmitting: "submitting" | "submitted" | "saved",
+  ) => void;
 };

 export const FixedMenu = (props: EditorBubbleMenuProps) => {
@@ -41,9 +49,15 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
    StrikeThroughItem(editor),
  ];

-  const listItems: BubbleMenuItem[] = [BulletListItem(editor), NumberedListItem(editor)];
+  const listItems: BubbleMenuItem[] = [
+    BulletListItem(editor),
+    NumberedListItem(editor),
+  ];

-  const userActionItems: BubbleMenuItem[] = [QuoteItem(editor), CodeItem(editor)];
+  const userActionItems: BubbleMenuItem[] = [
+    QuoteItem(editor),
+    CodeItem(editor),
+  ];

  function getComplexItems(): BubbleMenuItem[] {
    const items: BubbleMenuItem[] = [TableItem(editor)];
@@ -85,10 +99,10 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
            type="button"
            onClick={item.command}
            className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80",
+              "h-7 w-7 grid place-items-center text-custom-text-300 hover:bg-custom-background-80 rounded",
              {
-                "bg-custom-background-80 text-custom-text-100": item.isActive(),
-              }
+                "text-custom-text-100 bg-custom-background-80": item.isActive(),
+              },
            )}
          >
            <item.icon className="h-4 w-4" />
@@ -102,10 +116,10 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
            type="button"
            onClick={item.command}
            className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80",
+              "h-7 w-7 grid place-items-center text-custom-text-300 hover:bg-custom-background-80 rounded",
              {
-                "bg-custom-background-80 text-custom-text-100": item.isActive(),
-              }
+                "text-custom-text-100 bg-custom-background-80": item.isActive(),
+              },
            )}
          >
            <item.icon
@@ -123,10 +137,10 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
            type="button"
            onClick={item.command}
            className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80",
+              "h-7 w-7 grid place-items-center text-custom-text-300 hover:bg-custom-background-80 rounded",
              {
-                "bg-custom-background-80 text-custom-text-100": item.isActive(),
-              }
+                "text-custom-text-100 bg-custom-background-80": item.isActive(),
+              },
            )}
          >
            <item.icon
@@ -144,10 +158,10 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
            type="button"
            onClick={item.command}
            className={cn(
-              "grid h-7 w-7 place-items-center rounded text-custom-text-300 hover:bg-custom-background-80",
+              "h-7 w-7 grid place-items-center text-custom-text-300 hover:bg-custom-background-80 rounded",
              {
-                "bg-custom-background-80 text-custom-text-100": item.isActive(),
-              }
+                "text-custom-text-100 bg-custom-background-80": item.isActive(),
+              },
            )}
          >
            <item.icon
--- a/Show More
+++ b/Show More