fix: install script container availability check

* fix: community changes for cycle graphs

* fix: added dependency from root package.json

.eslintrc-staged.js

@@ -1,59 +0,0 @@
-/**
- * Adds three new lint plugins over the existing configuration:
- * This is used to lint staged files only.
- * We should remove this file once the entire codebase follows these rules.
- */
-module.exports = {
-  root: true,
-  extends: [
-    "custom",
-  ],
-  parser: "@typescript-eslint/parser",
-  settings: {
-    "import/resolver": {
-      typescript: {},
-      node: {
-        moduleDirectory: ["node_modules", "."],
-      },
-    },
-  },
-  rules: {
-    "import/order": [
-      "error",
-      {
-        groups: ["builtin", "external", "internal", "parent", "sibling"],
-        pathGroups: [
-          {
-            pattern: "react",
-            group: "external",
-            position: "before",
-          },
-          {
-            pattern: "lucide-react",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@headlessui/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@plane/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@/**",
-            group: "internal",
-          },
-        ],
-        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
-  },
-};

.eslintrc.js

@@ -1,10 +0,0 @@
-module.exports = {
-  root: true,
-  // This tells ESLint to load the config from the package `eslint-config-custom`
-  extends: ["custom"],
-  settings: {
-    next: {
-      rootDir: ["web/", "space/", "admin/"],
-    },
-  },
-};

.github/workflows/create-sync-pr.yml

@@ -8,7 +8,6 @@ on:
 
 env:
   CURRENT_BRANCH: ${{ github.ref_name }}
-  SOURCE_BRANCH: ${{ vars.SYNC_SOURCE_BRANCH_NAME }} # The sync branch such as "sync/ce"
   TARGET_BRANCH: ${{ vars.SYNC_TARGET_BRANCH_NAME }} # The target branch that you would like to merge changes like develop
   GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} # Personal access token required to modify contents and workflows
   REVIEWER: ${{ vars.SYNC_PR_REVIEWER }}
@@ -16,22 +15,7 @@ env:
   ACCOUNT_USER_EMAIL: ${{ vars.ACCOUNT_USER_EMAIL }}
 
 jobs:
-  Check_Branch:
-    runs-on: ubuntu-latest
-    outputs:
-      BRANCH_MATCH: ${{ steps.check-branch.outputs.MATCH }}
-    steps:
-      - name: Check if current branch matches the secret
-        id: check-branch
-        run: |
-          if [ "$CURRENT_BRANCH" = "$SOURCE_BRANCH" ]; then
-            echo "MATCH=true" >> $GITHUB_OUTPUT
-          else
-            echo "MATCH=false" >> $GITHUB_OUTPUT
-          fi
   Create_PR:
-    if: ${{ needs.Check_Branch.outputs.BRANCH_MATCH == 'true' }}
-    needs: [Check_Branch]
     runs-on: ubuntu-latest
     permissions:
       pull-requests: write
@@ -59,11 +43,11 @@ jobs:
       - name: Create PR to Target Branch
         run: |
           # get all pull requests and check if there is already a PR
-          PR_EXISTS=$(gh pr list --base $TARGET_BRANCH --head $SOURCE_BRANCH --state open --json number | jq '.[] | .number')
+          PR_EXISTS=$(gh pr list --base $TARGET_BRANCH --head $CURRENT_BRANCH --state open --json number | jq '.[] | .number')
           if [ -n "$PR_EXISTS" ]; then
             echo "Pull Request already exists: $PR_EXISTS"
           else
             echo "Creating new pull request"
-            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $SOURCE_BRANCH --title "sync: community changes" --body "")
+            PR_URL=$(gh pr create --base $TARGET_BRANCH --head $CURRENT_BRANCH --title "sync: community changes" --body "")
             echo "Pull Request created: $PR_URL"
           fi

.github/workflows/repo-sync.yml

@@ -35,8 +35,9 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
         run: |
+          RUN_ID="${{ github.run_id }}"
           TARGET_REPO="${{ vars.SYNC_TARGET_REPO }}"
-          TARGET_BRANCH="${{ vars.SYNC_TARGET_BRANCH_NAME }}"
+          TARGET_BRANCH="sync/${RUN_ID}"
           SOURCE_BRANCH="${{ env.SOURCE_BRANCH_NAME }}"
 
           git checkout $SOURCE_BRANCH

.lintstagedrc.json

@@ -1,3 +0,0 @@
-{
-  "*.{ts,tsx,js,jsx}": ["eslint -c ./.eslintrc-staged.js", "prettier --check"]
-}

SECURITY.md

@@ -1,44 +1,39 @@
-# Security Policy
+# Security policy
+This document outlines the security protocols and vulnerability reporting guidelines for the Plane project. Ensuring the security of our systems is a top priority, and while we work diligently to maintain robust protection, vulnerabilities may still occur. We highly value the community’s role in identifying and reporting security concerns to uphold the integrity of our systems and safeguard our users.
 
-This document outlines security procedures and vulnerabilities reporting for the Plane project.
+## Reporting a vulnerability
+If you have identified a security vulnerability, submit your findings to [security@plane.so](mailto:security@plane.so). 
+Ensure your report includes all relevant information needed for us to reproduce and assess the issue. Include the IP address or URL of the affected system.
 
-At Plane, we safeguarding the security of our systems with top priority. Despite our efforts, vulnerabilities may still exist. We greatly appreciate your assistance in identifying and reporting any such vulnerabilities to help us maintain the integrity of our systems and protect our clients.
+To ensure a responsible and effective disclosure process, please adhere to the following:
 
-To report a security vulnerability, please email us directly at security@plane.so with a detailed description of the vulnerability and steps to reproduce it. Please refrain from disclosing the vulnerability publicly until we have had an opportunity to review and address it.
+- Maintain confidentiality and refrain from publicly disclosing the vulnerability until we have had the opportunity to investigate and address the issue.
+- Refrain from running automated vulnerability scans on our infrastructure or dashboard without prior consent. Contact us to set up a sandbox environment if necessary.
+- Do not exploit any discovered vulnerabilities for malicious purposes, such as accessing or altering user data.
+- Do not engage in physical security attacks, social engineering, distributed denial of service (DDoS) attacks, spam campaigns, or attacks on third-party applications as part of your vulnerability testing.
 
-## Out of Scope Vulnerabilities
+## Out of scope
+While we appreciate all efforts to assist in improving our security, please note that the following types of vulnerabilities are considered out of scope:
 
-We appreciate your help in identifying vulnerabilities. However, please note that the following types of vulnerabilities are considered out of scope:
+- Vulnerabilities requiring man-in-the-middle (MITM) attacks or physical access to a user’s device.
+- Content spoofing or text injection issues without a clear attack vector or the ability to modify HTML/CSS.
+- Issues related to email spoofing.
+- Missing DNSSEC, CAA, or CSP headers.
+- Absence of secure or HTTP-only flags on non-sensitive cookies.
 
-- Attacks requiring MITM or physical access to a user's device.
-- Content spoofing and text injection issues without demonstrating an attack vector or ability to modify HTML/CSS.
-- Email spoofing.
-- Missing DNSSEC, CAA, CSP headers.
-- Lack of Secure or HTTP only flag on non-sensitive cookies.
+## Our commitment
 
-## Reporting Process
+At Plane, we are committed to maintaining transparent and collaborative communication throughout the vulnerability resolution process. Here's what you can expect from us:
 
-If you discover a vulnerability, please adhere to the following reporting process:
+- **Response Time** <br/>
+We will acknowledge receipt of your vulnerability report within three business days and provide an estimated timeline for resolution.
+- **Legal Protection** <br/>
+We will not initiate legal action against you for reporting vulnerabilities, provided you adhere to the reporting guidelines.
+- **Confidentiality** <br/>
+Your report will be treated with confidentiality. We will not disclose your personal information to third parties without your consent.
+- **Recognition** <br/>
+With your permission, we are happy to publicly acknowledge your contribution to improving our security once the issue is resolved.
+- **Timely Resolution** <br/>
+We are committed to working closely with you throughout the resolution process, providing timely updates as necessary. Our goal is to address all reported vulnerabilities swiftly, and we will actively engage with you to coordinate a responsible disclosure once the issue is fully resolved.
 
-1. Email your findings to security@plane.so.
-2. Refrain from running automated scanners on our infrastructure or dashboard without prior consent. Contact us to set up a sandbox environment if necessary.
-3. Do not exploit the vulnerability for malicious purposes, such as downloading excessive data or altering user data.
-4. Maintain confidentiality and refrain from disclosing the vulnerability until it has been resolved.
-5. Avoid using physical security attacks, social engineering, distributed denial of service, spam, or third-party applications.
-
-When reporting a vulnerability, please provide sufficient information to allow us to reproduce and address the issue promptly. Include the IP address or URL of the affected system, along with a detailed description of the vulnerability.
-
-## Our Commitment
-
-We are committed to promptly addressing reported vulnerabilities and maintaining open communication throughout the resolution process. Here's what you can expect from us:
-
-- **Response Time:** We will acknowledge receipt of your report within three business days and provide an expected resolution date.
-- **Legal Protection:** We will not pursue legal action against you for reporting vulnerabilities, provided you adhere to the reporting guidelines.
-- **Confidentiality:** Your report will be treated with strict confidentiality. We will not disclose your personal information to third parties without your consent.
-- **Progress Updates:** We will keep you informed of our progress in resolving the reported vulnerability.
-- **Recognition:** With your permission, we will publicly acknowledge you as the discoverer of the vulnerability.
-- **Timely Resolution:** We strive to resolve all reported vulnerabilities promptly and will actively participate in the publication process once the issue is resolved.
-
-We appreciate your cooperation in helping us maintain the security of our systems and protecting our clients. Thank you for your contributions to our security efforts.
-
-reference: https://supabase.com/.well-known/security.txt
+We appreciate your help in ensuring the security of our platform. Your contributions are crucial to protecting our users and maintaining a secure environment. Thank you for working with us to keep Plane safe.

admin/.eslintrc.js

@@ -1,52 +1,8 @@
 module.exports = {
   root: true,
-  extends: ["custom"],
+  extends: ["@plane/eslint-config/next.js"],
   parser: "@typescript-eslint/parser",
-  settings: {
-    "import/resolver": {
-      typescript: {},
-      node: {
-        moduleDirectory: ["node_modules", "."],
-      },
-    },
+  parserOptions: {
+    project: true,
   },
-  rules: {
-    "import/order": [
-      "error",
-      {
-        groups: ["builtin", "external", "internal", "parent", "sibling",],
-        pathGroups: [
-          {
-            pattern: "react",
-            group: "external",
-            position: "before",
-          },
-          {
-            pattern: "lucide-react",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@headlessui/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@plane/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@/**",
-            group: "internal",
-          }
-        ],
-        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
-  },
-}
+};

admin/core/components/admin-sidebar/root.tsx

@@ -2,15 +2,14 @@
 
 import { FC, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
-// hooks
-import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
-import { useTheme } from "@/hooks/store";
-import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
+// plane helpers
+import { useOutsideClickDetector } from "@plane/helpers";
 // components
+import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
+// hooks
+import { useTheme } from "@/hooks/store";
 
-export interface IInstanceSidebar {}
-
-export const InstanceSidebar: FC<IInstanceSidebar> = observer(() => {
+export const InstanceSidebar: FC = observer(() => {
   // store
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
 

admin/core/components/instance/instance-failure-view.tsx

@@ -7,11 +7,7 @@ import { Button } from "@plane/ui";
 import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
 import InstanceFailureImage from "@/public/instance/instance-failure.svg";
 
-type InstanceFailureViewProps = {
-  // mutate: () => void;
-};
-
-export const InstanceFailureView: FC<InstanceFailureViewProps> = () => {
+export const InstanceFailureView: FC = () => {
   const { resolvedTheme } = useTheme();
 
   const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;

admin/core/hooks/use-outside-click-detector.tsx

@@ -1,21 +0,0 @@
-"use client";
-
-import React, { useEffect } from "react";
-
-const useOutsideClickDetector = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
-  const handleClick = (event: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
-      callback();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClick);
-
-    return () => {
-      document.removeEventListener("mousedown", handleClick);
-    };
-  });
-};
-
-export default useOutsideClickDetector;

admin/core/services/auth.service.ts

@@ -1,5 +1,5 @@
 // helpers
-import { API_BASE_URL } from "helpers/common.helper";
+import { API_BASE_URL } from "@/helpers/common.helper";
 // services
 import { APIService } from "@/services/api.service";
 

admin/core/services/user.service.ts

@@ -1,7 +1,7 @@
-// helpers
-import { API_BASE_URL } from "helpers/common.helper";
 // types
 import type { IUser } from "@plane/types";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
 // services
 import { APIService } from "@/services/api.service";
 

admin/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

admin/package.json

@@ -8,13 +8,16 @@
     "build": "next build",
     "preview": "next build && next start",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:errors": "eslint . --ext .ts,.tsx --quiet"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.19",
+    "@plane/constants": "*",
+    "@plane/helpers": "*",
     "@plane/types": "*",
     "@plane/ui": "*",
-    "@plane/constants": "*",
+    "@sentry/nextjs": "^8.32.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/lodash": "^4.17.0",
     "autoprefixer": "10.4.14",
@@ -24,7 +27,7 @@
     "lucide-react": "^0.356.0",
     "mobx": "^6.12.0",
     "mobx-react": "^9.1.1",
-    "next": "^14.2.3",
+    "next": "^14.2.12",
     "next-themes": "^0.2.1",
     "postcss": "^8.4.38",
     "react": "^18.3.1",
@@ -36,15 +39,15 @@
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
+    "@plane/eslint-config": "*",
+    "@plane/typescript-config": "*",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "18.16.1",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/uuid": "^9.0.8",
     "@types/zxcvbn": "^4.4.4",
-    "eslint-config-custom": "*",
     "tailwind-config-custom": "*",
-    "tsconfig": "*",
-    "typescript": "^5.4.2"
+    "typescript": "5.3.3"
   }
 }

admin/tsconfig.json

@@ -1,21 +1,15 @@
 {
-  "extends": "tsconfig/nextjs.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "extends": "@plane/typescript-config/nextjs.json",
   "compilerOptions": {
+    "plugins": [{ "name": "next" }],
     "baseUrl": ".",
-    "jsx": "preserve",
-    "esModuleInterop": true,
     "paths": {
       "@/*": ["core/*"],
       "@/helpers/*": ["helpers/*"],
       "@/public/*": ["public/*"],
       "@/plane-admin/*": ["ce/*"]
-    },
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
-  }
+    }
+  },
+  "include": ["next-env.d.ts", "next.config.js", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

apiserver/plane/api/views/project.py

@@ -301,11 +301,16 @@ class ProjectAPIEndpoint(BaseAPIView):
             if serializer.is_valid():
                 serializer.save()
                 if serializer.data["inbox_view"]:
-                    Inbox.objects.get_or_create(
-                        name=f"{project.name} Inbox",
+                    inbox = Inbox.objects.filter(
                         project=project,
                         is_default=True,
-                    )
+                    ).first()
+                    if not inbox:
+                        Inbox.objects.create(
+                            name=f"{project.name} Inbox",
+                            project=project,
+                            is_default=True,
+                        )
 
                     # Create the triage state in Backlog group
                     State.objects.get_or_create(

apiserver/plane/app/serializers/user.py

@@ -176,6 +176,7 @@ class UserAdminLiteSerializer(BaseSerializer):
             "is_bot",
             "display_name",
             "email",
+            "last_login_medium",
         ]
         read_only_fields = [
             "id",

apiserver/plane/app/urls/issue.py

@@ -20,6 +20,7 @@ from plane.app.views import (
     IssueViewSet,
     LabelViewSet,
     BulkArchiveIssuesEndpoint,
+    DeletedIssuesListViewSet,
     IssuePaginatedViewSet,
 )
 
@@ -39,9 +40,9 @@ urlpatterns = [
         ),
         name="project-issue",
     ),
-    # updated v1 paginated issues
+    # updated v2 paginated issues
     path(
-        "workspaces/<str:slug>/projects/<uuid:project_id>/v2/issues/",
+        "workspaces/<str:slug>/v2/issues/",
         IssuePaginatedViewSet.as_view({"get": "list"}),
         name="project-issues-paginated",
     ),
@@ -311,4 +312,9 @@ urlpatterns = [
         ),
         name="project-issue-draft",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/deleted-issues/",
+        DeletedIssuesListViewSet.as_view(),
+        name="deleted-issues",
+    ),
 ]

apiserver/plane/app/views/__init__.py

@@ -114,6 +114,7 @@ from .issue.base import (
     IssueViewSet,
     IssueUserDisplayPropertyEndpoint,
     BulkDeleteIssuesEndpoint,
+    DeletedIssuesListViewSet,
     IssuePaginatedViewSet,
 )
 

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

@@ -167,9 +167,10 @@ class InboxIssueViewSet(BaseViewSet):
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def list(self, request, slug, project_id):
-        inbox_id = Inbox.objects.get(
+        inbox_id = Inbox.objects.filter(
             workspace__slug=slug, project_id=project_id
-        )
+        ).first()
+        project = Project.objects.get(pk=project_id)
         filters = issue_filters(request.GET, "GET", "issue__")
         inbox_issue = (
             InboxIssue.objects.filter(
@@ -199,13 +200,16 @@ class InboxIssueViewSet(BaseViewSet):
         if inbox_status:
             inbox_issue = inbox_issue.filter(status__in=inbox_status)
 
-        if ProjectMember.objects.filter(
-            workspace__slug=slug,
-            project_id=project_id,
-            member=request.user,
-            role=5,
-            is_active=True,
-        ).exists():
+        if (
+            ProjectMember.objects.filter(
+                workspace__slug=slug,
+                project_id=project_id,
+                member=request.user,
+                role=5,
+                is_active=True,
+            ).exists()
+            and not project.guest_view_all_features
+        ):
             inbox_issue = inbox_issue.filter(created_by=request.user)
         return self.paginate(
             request=request,
@@ -517,14 +521,16 @@ class InboxIssueViewSet(BaseViewSet):
         allowed_roles=[
             ROLE.ADMIN,
             ROLE.MEMBER,
+            ROLE.GUEST,
         ],
         creator=True,
         model=Issue,
     )
     def retrieve(self, request, slug, project_id, pk):
-        inbox_id = Inbox.objects.get(
+        inbox_id = Inbox.objects.filter(
             workspace__slug=slug, project_id=project_id
-        )
+        ).first()
+        project = Project.objects.get(pk=project_id)
         inbox_issue = (
             InboxIssue.objects.select_related("issue")
             .prefetch_related(
@@ -551,6 +557,21 @@ class InboxIssueViewSet(BaseViewSet):
             )
             .get(inbox_id=inbox_id.id, issue_id=pk, project_id=project_id)
         )
+        if (
+            ProjectMember.objects.filter(
+                workspace__slug=slug,
+                project_id=project_id,
+                member=request.user,
+                role=5,
+                is_active=True,
+            ).exists()
+            and not project.guest_view_all_features
+            and not inbox_issue.created_by == request.user
+        ):
+            return Response(
+                {"error": "You are not allowed to view this issue"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
         issue = InboxIssueDetailSerializer(inbox_issue).data
         return Response(
             issue,

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

@@ -234,11 +234,17 @@ class IssueViewSet(BaseViewSet):
     @method_decorator(gzip_page)
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def list(self, request, slug, project_id):
+        extra_filters = {}
+        if request.GET.get("updated_at__gt", None) is not None:
+            extra_filters = {
+                "updated_at__gt": request.GET.get("updated_at__gt")
+            }
+
         project = Project.objects.get(pk=project_id, workspace__slug=slug)
         filters = issue_filters(request.query_params, "GET")
         order_by_param = request.GET.get("order_by", "-created_at")
 
-        issue_queryset = self.get_queryset().filter(**filters)
+        issue_queryset = self.get_queryset().filter(**filters, **extra_filters)
         # Custom ordering for priority and state
 
         # Issue queryset
@@ -713,16 +719,43 @@ class BulkDeleteIssuesEndpoint(BaseAPIView):
         )
 
 
+class DeletedIssuesListViewSet(BaseAPIView):
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    def get(self, request, slug, project_id):
+        filters = {}
+        if request.GET.get("updated_at__gt", None) is not None:
+            filters = {"updated_at__gt": request.GET.get("updated_at__gt")}
+        deleted_issues = (
+            Issue.all_objects.filter(
+                workspace__slug=slug,
+                project_id=project_id,
+            )
+            .filter(Q(archived_at__isnull=False) | Q(deleted_at__isnull=False))
+            .filter(**filters)
+            .values_list("id", flat=True)
+        )
+
+        return Response(deleted_issues, status=status.HTTP_200_OK)
+
+
 class IssuePaginatedViewSet(BaseViewSet):
     def get_queryset(self):
         workspace_slug = self.kwargs.get("slug")
-        project_id = self.kwargs.get("project_id")
+
+        # getting the project_id from the request params
+        project_id = self.request.GET.get("project_id", None)
+
+        issue_queryset = Issue.issue_objects.filter(
+            workspace__slug=workspace_slug
+        )
+
+        if project_id:
+            issue_queryset = issue_queryset.filter(project_id=project_id)
 
         return (
-            Issue.issue_objects.filter(
-                workspace__slug=workspace_slug, project_id=project_id
+            issue_queryset.select_related(
+                "workspace", "project", "state", "parent"
             )
-            .select_related("workspace", "project", "state", "parent")
             .prefetch_related("assignees", "labels", "issue_module__module")
             .annotate(cycle_id=F("issue_cycle__cycle_id"))
             .annotate(
@@ -760,17 +793,18 @@ class IssuePaginatedViewSet(BaseViewSet):
 
         return paginated_data
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
-    def list(self, request, slug, project_id):
+    def list(self, request, slug):
+        project_id = self.request.GET.get("project_id", None)
         cursor = request.GET.get("cursor", None)
         is_description_required = request.GET.get("description", False)
-        updated_at = request.GET.get("updated_at__gte", None)
+        updated_at = request.GET.get("updated_at__gt", None)
 
         # required fields
         required_fields = [
             "id",
             "name",
             "state_id",
+            "state__group",
             "sort_order",
             "completed_at",
             "estimate_point",
@@ -787,7 +821,6 @@ class IssuePaginatedViewSet(BaseViewSet):
             "updated_by",
             "is_draft",
             "archived_at",
-            "deleted_at",
             "module_ids",
             "label_ids",
             "assignee_ids",
@@ -800,15 +833,18 @@ class IssuePaginatedViewSet(BaseViewSet):
             required_fields.append("description_html")
 
         # querying issues
-        base_queryset = Issue.issue_objects.filter(
-            workspace__slug=slug, project_id=project_id
-        ).order_by("updated_at")
+        base_queryset = Issue.issue_objects.filter(workspace__slug=slug)
+
+        if project_id:
+            base_queryset = base_queryset.filter(project_id=project_id)
+
+        base_queryset = base_queryset.order_by("updated_at")
         queryset = self.get_queryset().order_by("updated_at")
 
         # filtering issues by greater then updated_at given by the user
         if updated_at:
-            base_queryset = base_queryset.filter(updated_at__gte=updated_at)
-            queryset = queryset.filter(updated_at__gte=updated_at)
+            base_queryset = base_queryset.filter(updated_at__gt=updated_at)
+            queryset = queryset.filter(updated_at__gt=updated_at)
 
         queryset = queryset.annotate(
             label_ids=Coalesce(

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

@@ -21,6 +21,8 @@ from plane.db.models import (
     IssueComment,
     ProjectMember,
     CommentReaction,
+    Project,
+    Issue,
 )
 from plane.bgtasks.issue_activities_task import issue_activity
 
@@ -67,9 +69,27 @@ class IssueCommentViewSet(BaseViewSet):
         [
             ROLE.ADMIN,
             ROLE.MEMBER,
+            ROLE.GUEST,
         ]
     )
     def create(self, request, slug, project_id, issue_id):
+        project = Project.objects.get(pk=project_id)
+        issue = Issue.objects.get(pk=issue_id)
+        if (
+            ProjectMember.objects.filter(
+                workspace__slug=slug,
+                project_id=project_id,
+                member=request.user,
+                role=5,
+                is_active=True,
+            ).exists()
+            and not project.guest_view_all_features
+            and not issue.created_by == request.user
+        ):
+            return Response(
+                {"error": "You are not allowed to comment on the issue"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
         serializer = IssueCommentSerializer(data=request.data)
         if serializer.is_valid():
             serializer.save(
@@ -94,7 +114,7 @@ class IssueCommentViewSet(BaseViewSet):
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER],
+        allowed_roles=[ROLE.ADMIN],
         creator=True,
         model=IssueComment,
     )
@@ -182,6 +202,7 @@ class CommentReactionViewSet(BaseViewSet):
         [
             ROLE.ADMIN,
             ROLE.MEMBER,
+            ROLE.GUEST,
         ]
     )
     def create(self, request, slug, project_id, comment_id):
@@ -210,6 +231,7 @@ class CommentReactionViewSet(BaseViewSet):
         [
             ROLE.ADMIN,
             ROLE.MEMBER,
+            ROLE.GUEST,
         ]
     )
     def destroy(self, request, slug, project_id, comment_id, reaction_code):

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

@@ -12,7 +12,7 @@ from rest_framework import status
 # Module imports
 from .. import BaseViewSet
 from plane.app.serializers import IssueReactionSerializer
-from plane.app.permissions import ProjectLitePermission
+from plane.app.permissions import allow_permission, ROLE
 from plane.db.models import IssueReaction
 from plane.bgtasks.issue_activities_task import issue_activity
 
@@ -20,9 +20,6 @@ from plane.bgtasks.issue_activities_task import issue_activity
 class IssueReactionViewSet(BaseViewSet):
     serializer_class = IssueReactionSerializer
     model = IssueReaction
-    permission_classes = [
-        ProjectLitePermission,
-    ]
 
     def get_queryset(self):
         return (
@@ -40,6 +37,7 @@ class IssueReactionViewSet(BaseViewSet):
             .distinct()
         )
 
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def create(self, request, slug, project_id, issue_id):
         serializer = IssueReactionSerializer(data=request.data)
         if serializer.is_valid():
@@ -62,6 +60,7 @@ class IssueReactionViewSet(BaseViewSet):
             return Response(serializer.data, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def destroy(self, request, slug, project_id, issue_id, reaction_code):
         issue_reaction = IssueReaction.objects.get(
             workspace__slug=slug,

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

@@ -267,7 +267,7 @@ class IssueRelationViewSet(BaseViewSet):
             IssueRelationSerializer(issue_relation).data,
             cls=DjangoJSONEncoder,
         )
-        issue_relation.delete()
+        issue_relation.delete(soft=False)
         issue_activity.delay(
             type="issue_relation.activity.deleted",
             requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),

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

@@ -41,7 +41,7 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
         )
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER],
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST],
         level="WORKSPACE",
     )
     def list(self, request, slug):
@@ -207,7 +207,7 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
         return Response(serializer.data, status=status.HTTP_200_OK)
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE"
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
     )
     def mark_unread(self, request, slug, pk):
         notification = Notification.objects.get(
@@ -219,7 +219,7 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
         return Response(serializer.data, status=status.HTTP_200_OK)
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE"
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
     )
     def archive(self, request, slug, pk):
         notification = Notification.objects.get(
@@ -231,7 +231,7 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
         return Response(serializer.data, status=status.HTTP_200_OK)
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE"
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
     )
     def unarchive(self, request, slug, pk):
         notification = Notification.objects.get(
@@ -286,7 +286,7 @@ class UnreadNotificationEndpoint(BaseAPIView):
 
 class MarkAllReadNotificationViewSet(BaseViewSet):
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE"
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
     )
     def create(self, request, slug):
         snoozed = request.data.get("snoozed", False)

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

@@ -173,7 +173,7 @@ class ProjectViewSet(BaseViewSet):
             member=request.user,
             workspace__slug=slug,
             is_active=True,
-            role=10,
+            role=15,
         ).exists():
             projects = projects.filter(
                 Q(
@@ -438,11 +438,16 @@ class ProjectViewSet(BaseViewSet):
             if serializer.is_valid():
                 serializer.save()
                 if serializer.data["inbox_view"]:
-                    Inbox.objects.get_or_create(
-                        name=f"{project.name} Inbox",
+                    inbox = Inbox.objects.filter(
                         project=project,
                         is_default=True,
-                    )
+                    ).first()
+                    if not inbox:
+                        Inbox.objects.create(
+                            name=f"{project.name} Inbox",
+                            project=project,
+                            is_default=True,
+                        )
 
                     # Create the triage state in Backlog group
                     State.objects.get_or_create(

apiserver/plane/app/views/project/invite.py

@@ -17,7 +17,7 @@ from rest_framework.permissions import AllowAny
 from .base import BaseViewSet, BaseAPIView
 from plane.app.serializers import ProjectMemberInviteSerializer
 
-from plane.app.permissions import ProjectBasePermission
+from plane.app.permissions import allow_permission, ROLE
 
 from plane.db.models import (
     ProjectMember,
@@ -35,10 +35,6 @@ class ProjectInvitationsViewset(BaseViewSet):
 
     search_fields = []
 
-    permission_classes = [
-        ProjectBasePermission,
-    ]
-
     def get_queryset(self):
         return self.filter_queryset(
             super()
@@ -49,6 +45,7 @@ class ProjectInvitationsViewset(BaseViewSet):
             .select_related("workspace", "workspace__owner")
         )
 
+    @allow_permission([ROLE.ADMIN])
     def create(self, request, slug, project_id):
         emails = request.data.get("emails", [])
 
@@ -59,24 +56,21 @@ class ProjectInvitationsViewset(BaseViewSet):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        requesting_user = ProjectMember.objects.get(
-            workspace__slug=slug,
-            project_id=project_id,
-            member_id=request.user.id,
-        )
+        for email in emails:
+            workspace_role = WorkspaceMember.objects.filter(
+                workspace__slug=slug,
+                member__email=email.get("email"),
+                is_active=True,
+            ).role
 
-        # Check if any invited user has an higher role
-        if len(
-            [
-                email
-                for email in emails
-                if int(email.get("role", 5)) > requesting_user.role
-            ]
-        ):
-            return Response(
-                {"error": "You cannot invite a user with higher role"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+            if workspace_role in [5, 20] and workspace_role != email.get(
+                "role", 5
+            ):
+                return Response(
+                    {
+                        "error": "You cannot invite a user with different role than workspace role"
+                    },
+                )
 
         workspace = Workspace.objects.get(slug=slug)
 
@@ -170,7 +164,7 @@ class UserProjectInvitationsViewset(BaseViewSet):
                 ProjectMember(
                     project_id=project_id,
                     member=request.user,
-                    role=15 if workspace_role >= 15 else 5,
+                    role=workspace_role,
                     workspace=workspace,
                     created_by=request.user,
                 )

apiserver/plane/app/views/project/member.py

@@ -414,6 +414,7 @@ class UserProjectRolesEndpoint(BaseAPIView):
         project_members = ProjectMember.objects.filter(
             workspace__slug=slug,
             member_id=request.user.id,
+            is_active=True,
         ).values("project_id", "role")
 
         project_members = {

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

@@ -90,7 +90,7 @@ class GlobalSearchEndpoint(BaseAPIView):
             "project__identifier",
             "project_id",
             "workspace__slug",
-        )
+        )[:100]
 
     def filter_cycles(self, query, slug, project_id, workspace_search):
         fields = ["name"]

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

@@ -97,6 +97,6 @@ class IssueSearchEndpoint(BaseAPIView):
                 "state__name",
                 "state__group",
                 "state__color",
-            ),
+            )[:100],
             status=status.HTTP_200_OK,
         )

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

@@ -14,7 +14,7 @@ from plane.app.permissions import (
     WorkSpaceAdminPermission,
     WorkspaceEntityPermission,
     allow_permission,
-    ROLE
+    ROLE,
 )
 
 # Module imports
@@ -44,7 +44,6 @@ class WorkSpaceMemberViewSet(BaseViewSet):
     serializer_class = WorkspaceMemberAdminSerializer
     model = WorkspaceMember
 
-
     search_fields = [
         "member__display_name",
         "member__first_name",
@@ -96,9 +95,7 @@ class WorkSpaceMemberViewSet(BaseViewSet):
         user=False,
         multiple=True,
     )
-    @allow_permission(
-        allowed_roles=[ROLE.ADMIN], level="WORKSPACE"
-    )
+    @allow_permission(allowed_roles=[ROLE.ADMIN], level="WORKSPACE")
     def partial_update(self, request, slug, pk):
         workspace_member = WorkspaceMember.objects.get(
             pk=pk,
@@ -112,25 +109,10 @@ class WorkSpaceMemberViewSet(BaseViewSet):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        # Get the requested user role
-        requested_workspace_member = WorkspaceMember.objects.get(
-            workspace__slug=slug,
-            member=request.user,
-            is_active=True,
-        )
-        # Check if role is being updated
-        # One cannot update role higher than his own role
-        if (
-            "role" in request.data
-            and int(request.data.get("role", workspace_member.role))
-            > requested_workspace_member.role
-        ):
-            return Response(
-                {
-                    "error": "You cannot update a role that is higher than your own role"
-                },
-                status=status.HTTP_400_BAD_REQUEST,
-            )
+        if workspace_member.role > int(request.data.get("role")):
+            _ = ProjectMember.objects.filter(
+                workspace__slug=slug, member_id=workspace_member.member_id
+            ).update(role=int(request.data.get("role")))
 
         serializer = WorkSpaceMemberSerializer(
             workspace_member, data=request.data, partial=True
@@ -151,9 +133,7 @@ class WorkSpaceMemberViewSet(BaseViewSet):
     @invalidate_cache(
         path="/api/users/me/workspaces/", user=False, multiple=True
     )
-    @allow_permission(
-        allowed_roles=[ROLE.ADMIN], level="WORKSPACE"
-    )
+    @allow_permission(allowed_roles=[ROLE.ADMIN], level="WORKSPACE")
     def destroy(self, request, slug, pk):
         # Check the user role who is deleting the user
         workspace_member = WorkspaceMember.objects.get(

apiserver/plane/bgtasks/dummy_data_task.py

@@ -347,7 +347,7 @@ def create_issues(workspace, project, user_id, issue_count):
             )
         )
 
-        text = fake.text(max_nb_chars=60000)
+        text = fake.text(max_nb_chars=3000)
         issues.append(
             Issue(
                 state_id=states[random.randint(0, len(states) - 1)],
@@ -490,18 +490,23 @@ def create_issue_assignees(workspace, project, user_id, issue_count):
 def create_issue_labels(workspace, project, user_id, issue_count):
     # labels
     labels = Label.objects.filter(project=project).values_list("id", flat=True)
-    issues = random.sample(
-        list(
+    # issues = random.sample(
+    #     list(
+    #         Issue.objects.filter(project=project).values_list("id", flat=True)
+    #     ),
+    #     int(issue_count / 2),
+    # )
+    issues = list(
             Issue.objects.filter(project=project).values_list("id", flat=True)
-        ),
-        int(issue_count / 2),
-    )
+        ) 
+    shuffled_labels = list(labels)
 
     # Bulk issue
     bulk_issue_labels = []
     for issue in issues:
+        random.shuffle(shuffled_labels)
         for label in random.sample(
-            list(labels), random.randint(0, len(labels) - 1)
+            shuffled_labels, random.randint(0, 5)
         ):
             bulk_issue_labels.append(
                 IssueLabel(
@@ -552,25 +557,33 @@ def create_module_issues(workspace, project, user_id, issue_count):
     modules = Module.objects.filter(project=project).values_list(
         "id", flat=True
     )
-    issues = random.sample(
-        list(
+    # issues = random.sample(
+    #     list(
+    #         Issue.objects.filter(project=project).values_list("id", flat=True)
+    #     ),
+    #     int(issue_count / 2),
+    # )
+    issues = list(
             Issue.objects.filter(project=project).values_list("id", flat=True)
-        ),
-        int(issue_count / 2),
-    )
+        ) 
+
+    shuffled_modules = list(modules)
 
     # Bulk issue
     bulk_module_issues = []
     for issue in issues:
-        module = modules[random.randint(0, len(modules) - 1)]
-        bulk_module_issues.append(
-            ModuleIssue(
-                module_id=module,
-                issue_id=issue,
-                project=project,
-                workspace=workspace,
+        random.shuffle(shuffled_modules)
+        for module in random.sample(
+            shuffled_modules, random.randint(0, 5)
+        ):
+            bulk_module_issues.append(
+                ModuleIssue(
+                    module_id=module,
+                    issue_id=issue,
+                    project=project,
+                    workspace=workspace,
+                )
             )
-        )
     # Issue assignees
     ModuleIssue.objects.bulk_create(
         bulk_module_issues, batch_size=1000, ignore_conflicts=True

apiserver/plane/db/management/commands/create_dummy_data.py

@@ -73,7 +73,7 @@ class Command(BaseCommand):
 
                 from plane.bgtasks.dummy_data_task import create_dummy_data
 
-                create_dummy_data.delay(
+                create_dummy_data(
                     slug=workspace_slug,
                     email=creator,
                     members=members,

apiserver/plane/settings/common.py

@@ -265,7 +265,7 @@ if AMQP_URL:
     CELERY_BROKER_URL = AMQP_URL
 else:
     CELERY_BROKER_URL = f"amqp://{RABBITMQ_USER}:{RABBITMQ_PASSWORD}@{RABBITMQ_HOST}:{RABBITMQ_PORT}/{RABBITMQ_VHOST}"
- 
+
 CELERY_TIMEZONE = TIME_ZONE
 CELERY_TASK_SERIALIZER = "json"
 CELERY_RESULT_SERIALIZER = "json"
@@ -336,14 +336,14 @@ SESSION_COOKIE_SECURE = secure_origins
 SESSION_COOKIE_HTTPONLY = True
 SESSION_ENGINE = "plane.db.models.session"
 SESSION_COOKIE_AGE = os.environ.get("SESSION_COOKIE_AGE", 604800)
-SESSION_COOKIE_NAME = "plane-session-id"
+SESSION_COOKIE_NAME = os.environ.get("SESSION_COOKIE_NAME", "session-id")
 SESSION_COOKIE_DOMAIN = os.environ.get("COOKIE_DOMAIN", None)
 SESSION_SAVE_EVERY_REQUEST = (
     os.environ.get("SESSION_SAVE_EVERY_REQUEST", "0") == "1"
 )
 
 # Admin Cookie
-ADMIN_SESSION_COOKIE_NAME = "plane-admin-session-id"
+ADMIN_SESSION_COOKIE_NAME = "admin-session-id"
 ADMIN_SESSION_COOKIE_AGE = os.environ.get("ADMIN_SESSION_COOKIE_AGE", 3600)
 
 # CSRF cookies

apiserver/plane/utils/global_paginator.py

@@ -1,3 +1,6 @@
+# python imports
+from math import ceil
+
 # constants
 PAGINATOR_MAX_LIMIT = 1000
 
@@ -36,6 +39,9 @@ def paginate(base_queryset, queryset, cursor, on_result):
     total_results = base_queryset.count()
     page_size = min(cursor_object.current_page_size, PAGINATOR_MAX_LIMIT)
 
+    # getting the total pages available based on the page size
+    total_pages = ceil(total_results / page_size)
+
     # Calculate the start and end index for the paginated data
     start_index = 0
     if cursor_object.current_page > 0:
@@ -72,6 +78,7 @@ def paginate(base_queryset, queryset, cursor, on_result):
         "next_page_results": next_page_results,
         "page_count": len(paginated_data),
         "total_results": total_results,
+        "total_pages": total_pages,
         "results": paginated_data,
     }
 

apiserver/plane/utils/order_queryset.py

@@ -30,9 +30,9 @@ def order_issue_queryset(issue_queryset, order_by_param="-created_at"):
             )
         ).order_by("priority_order")
         order_by_param = (
-            "-priority_order"
+            "priority_order"
             if order_by_param.startswith("-")
-            else "priority_order"
+            else "-priority_order"
         )
     # State Ordering
     elif order_by_param in [

apiserver/plane/utils/paginator.py

@@ -82,7 +82,7 @@ class CursorResult(Sequence):
         return f"<{type(self).__name__}: results={len(self.results)}>"
 
 
-MAX_LIMIT = 100
+MAX_LIMIT = 1000
 
 
 class BadPaginationError(Exception):
@@ -118,7 +118,7 @@ class OffsetPaginator:
         self.max_offset = max_offset
         self.on_results = on_results
 
-    def get_result(self, limit=100, cursor=None):
+    def get_result(self, limit=1000, cursor=None):
         # offset is page #
         # value is page limit
         if cursor is None:
@@ -727,7 +727,7 @@ class BasePaginator:
     cursor_name = "cursor"
 
     # get the per page parameter from request
-    def get_per_page(self, request, default_per_page=100, max_per_page=100):
+    def get_per_page(self, request, default_per_page=1000, max_per_page=1000):
         try:
             per_page = int(request.GET.get("per_page", default_per_page))
         except ValueError:
@@ -747,8 +747,8 @@ class BasePaginator:
         on_results=None,
         paginator=None,
         paginator_cls=OffsetPaginator,
-        default_per_page=100,
-        max_per_page=100,
+        default_per_page=1000,
+        max_per_page=1000,
         cursor_cls=Cursor,
         extra_stats=None,
         controller=None,

deploy/selfhost/install.sh

@@ -280,7 +280,7 @@ function download() {
 function startServices() {
     /bin/bash -c "$COMPOSE_CMD -f $DOCKER_FILE_PATH --env-file=$DOCKER_ENV_PATH up -d --pull if_not_present --quiet-pull"
 
-    local migrator_container_id=$(docker container ls -aq -f "name=$SERVICE_FOLDER-migrator")
+    local migrator_container_id=$(docker ps --format "{{.ID}} {{.Names}}" | grep -E "${SERVICE_FOLDER}(-migrator|_migrator)" | awk '{print $1}')
     if [ -n "$migrator_container_id" ]; then
         local idx=0
         while docker inspect --format='{{.State.Status}}' $migrator_container_id | grep -q "running"; do
@@ -308,7 +308,7 @@ function startServices() {
         fi
     fi
 
-    local api_container_id=$(docker container ls -q -f "name=$SERVICE_FOLDER-api")
+    local api_container_id=$(docker ps --format "{{.ID}} {{.Names}}" | grep -E "${SERVICE_FOLDER}(-api|_api)" | awk '{print $1}')
     local idx2=0
     while ! docker logs $api_container_id 2>&1 | grep -m 1 -i "Application startup complete" | grep -q ".";
     do

live/.env.example

@@ -1,7 +1,8 @@
 API_BASE_URL="http://api:8000"
 LIVE_BASE_PATH="/live"
-REDIS_URL="redis://localhost:6379"
+
+REDIS_URL="redis://plane-redis:6379/"
 
 # If you prefer not to provide a Redis URL, you can set the REDIS_HOST and REDIS_PORT environment variables instead.
 REDIS_PORT=6379
-REDIS_HOST=localhost
+REDIS_HOST=plane-redis

live/.eslintignore

@@ -0,0 +1,4 @@
+.turbo/*
+out/*
+dist/*
+public/*

live/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "root": true,
+  "extends": ["@plane/eslint-config/server.js"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": true
+  }
+}

live/Dockerfile.dev

@@ -3,11 +3,13 @@ RUN apk add --no-cache libc6-compat
 # Set working directory
 WORKDIR /app
 
-
 COPY . .
 RUN yarn global add turbo
 RUN yarn install
 EXPOSE 3003
 
+ENV TURBO_TELEMETRY_DISABLED 1
+
 VOLUME [ "/app/node_modules", "/app/live/node_modules"]
+
 CMD ["yarn","dev", "--filter=live"]

live/Dockerfile.live

@@ -28,6 +28,8 @@ RUN yarn install
 COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json
 
+ENV TURBO_TELEMETRY_DISABLED 1
+
 RUN yarn turbo build --filter=live
 
 FROM base AS runner
@@ -36,4 +38,6 @@ WORKDIR /app
 COPY --from=installer /app .
 # COPY --from=installer /app/live/node_modules ./node_modules
 
+ENV TURBO_TELEMETRY_DISABLED 1
+
 EXPOSE 3000

live/package.json

@@ -7,7 +7,10 @@
   "type": "module",
   "scripts": {
     "build": "babel src --out-dir dist --extensions \".ts,.js\"",
-    "start": "node dist/server.js"
+    "start": "node dist/server.js",
+    "lint": "eslint . --ext .ts,.tsx",
+    "dev": "concurrently \"babel src --out-dir dist --extensions '.ts,.js' --watch\" \"nodemon dist/server.js\"",
+    "lint:errors": "eslint . --ext .ts,.tsx --quiet"
   },
   "keywords": [],
   "author": "",
@@ -35,6 +38,7 @@
     "morgan": "^1.10.0",
     "pino-http": "^10.3.0",
     "pino-pretty": "^11.2.2",
+    "uuid": "^10.0.0",
     "y-prosemirror": "^1.2.9",
     "y-protocols": "^1.0.6",
     "yjs": "^13.6.14"
@@ -51,9 +55,10 @@
     "@types/express-ws": "^3.0.4",
     "@types/node": "^20.14.9",
     "babel-plugin-module-resolver": "^5.0.2",
-    "nodemon": "^3.1.0",
+    "concurrently": "^9.0.1",
+    "nodemon": "^3.1.7",
     "ts-node": "^10.9.2",
     "tsup": "^7.2.0",
-    "typescript": "^5.4.5"
+    "typescript": "5.3.3"
   }
 }

live/src/ce/types/common.d.ts

@@ -1,2 +1 @@
-// eslint-disable-next-line @typescript-eslint/ban-types
-export type TAdditionalDocumentTypes = {}
+export type TAdditionalDocumentTypes = {};

live/src/core/extensions/index.ts

@@ -45,7 +45,8 @@ export const getExtensions: () => Promise<Extension[]> = async () => {
         const documentType = params.get("documentType")?.toString() as
           | TDocumentTypes
           | undefined;
-
+        // TODO: Fix this lint error.
+        // eslint-disable-next-line no-async-promise-executor
         return new Promise(async (resolve) => {
           try {
             let fetchedData = null;
@@ -53,7 +54,7 @@ export const getExtensions: () => Promise<Extension[]> = async () => {
               fetchedData = await fetchPageDescriptionBinary(
                 params,
                 pageId,
-                cookie,
+                cookie
               );
             } else {
               fetchedData = await fetchDocument({
@@ -83,6 +84,8 @@ export const getExtensions: () => Promise<Extension[]> = async () => {
           | TDocumentTypes
           | undefined;
 
+        // TODO: Fix this lint error.
+        // eslint-disable-next-line no-async-promise-executor
         return new Promise(async () => {
           try {
             if (documentType === "project_page") {
@@ -121,7 +124,7 @@ export const getExtensions: () => Promise<Extension[]> = async () => {
           }
           manualLogger.warn(
             `Redis Client wasn't able to connect, continuing without Redis (you won't be able to sync data between multiple plane live servers)`,
-            error,
+            error
           );
           reject(error);
         });
@@ -135,12 +138,12 @@ export const getExtensions: () => Promise<Extension[]> = async () => {
     } catch (error) {
       manualLogger.warn(
         `Redis Client wasn't able to connect, continuing without Redis (you won't be able to sync data between multiple plane live servers)`,
-        error,
+        error
       );
     }
   } else {
     manualLogger.warn(
-      "Redis URL is not set, continuing without Redis (you won't be able to sync data between multiple plane live servers)",
+      "Redis URL is not set, continuing without Redis (you won't be able to sync data between multiple plane live servers)"
     );
   }
 

live/src/core/helpers/error-handler.ts

@@ -1,7 +1,7 @@
 import { ErrorRequestHandler } from "express";
 import { manualLogger } from "@/core/helpers/logger.js";
 
-export const errorHandler: ErrorRequestHandler = (err, _req, res, _next) => {
+export const errorHandler: ErrorRequestHandler = (err, _req, res) => {
   // Log the error
   manualLogger.error(err);
 

live/src/core/hocuspocus-server.ts

@@ -1,11 +1,15 @@
 import { Server } from "@hocuspocus/server";
-
+import { v4 as uuidv4 } from "uuid";
+// lib
 import { handleAuthentication } from "@/core/lib/authentication.js";
+// extensions
 import { getExtensions } from "@/core/extensions/index.js";
 
 export const getHocusPocusServer = async () => {
   const extensions = await getExtensions();
+  const serverName = process.env.HOSTNAME || uuidv4();
   return Server.configure({
+    name: serverName,
     onAuthenticate: async ({
       requestHeaders,
       requestParameters,
@@ -34,5 +38,6 @@ export const getHocusPocusServer = async () => {
       }
     },
     extensions,
+    debounce: 10000
   });
 };

live/tsconfig.json

@@ -1,43 +1,26 @@
 {
-  "extends": "tsconfig/base.json",
+  "extends": "@plane/typescript-config/base.json",
   "compilerOptions": {
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
-
-    "lib": [
-      "ES2015"
-    ],
-
+    "lib": ["ES2015"],
     "outDir": "./dist",
-    "rootDir": "./src",
+    "rootDir": ".",
     "baseUrl": ".",
-
     "paths": {
-      "@/*": [
-        "./src/*"
-      ],
-      "@/plane-live/*": [
-        "./src/ce/*"
-      ]
+      "@/*": ["./src/*"],
+      "@/plane-live/*": ["./src/ce/*"]
     },
-
     "removeComments": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "sourceMap": true,
     "inlineSources": true,
-
     // Set `sourceRoot` to  "/" to strip the build path prefix
     // from generated source code references.
     // This improves issue grouping in Sentry.
     "sourceRoot": "/"
   },
-  "include": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "./dist",
-    "./build",
-    "./node_modules"
-  ]
+  "include": ["src/**/*.ts", "tsup.config.ts"],
+  "exclude": ["./dist", "./build", "./node_modules"]
 }

nginx/nginx.conf.template

@@ -57,7 +57,7 @@ http {
             proxy_set_header Upgrade ${dollar}http_upgrade;
             proxy_set_header Connection "upgrade";
             proxy_set_header Host ${dollar}http_host;
-            proxy_pass http://live:3000/;
+            proxy_pass http://live:3000/live/;
         }
 
         location /spaces/ {

package.json

@@ -8,33 +8,20 @@
     "space",
     "admin",
     "live",
-    "packages/editor",
-    "packages/eslint-config-custom",
-    "packages/tailwind-config-custom",
-    "packages/tsconfig",
-    "packages/ui",
-    "packages/types",
-    "packages/constants"
+    "packages/*"
   ],
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev --concurrency=13",
     "start": "turbo run start",
     "lint": "turbo run lint",
+    "lint:errors": "turbo run lint:errors",
     "clean": "turbo run clean",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
-    "prepare": "husky"
+    "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.15",
-    "eslint-config-custom": "*",
-    "eslint-plugin-prettier": "^5.1.3",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
-    "postcss": "^8.4.29",
     "prettier": "latest",
     "prettier-plugin-tailwindcss": "^0.5.4",
-    "tailwindcss": "^3.3.3",
     "turbo": "^2.1.1"
   },
   "resolutions": {

packages/constants/issue.ts

@@ -13,6 +13,19 @@ export enum EIssueGroupByToServerOptions {
   "created_by" = "created_by",
 }
 
+export enum EIssueGroupBYServerToProperty {
+  "state_id" = "state_id",
+  "priority" = "priority",
+  "labels__id" = "label_ids",
+  "state__group" = "state__group",
+  "assignees__id" = "assignee_ids",
+  "cycle_id" = "cycle_id",
+  "issue_module__module_id" = "module_ids",
+  "target_date" = "target_date",
+  "project_id" = "project_id",
+  "created_by" = "created_by",
+}
+
 export enum EServerGroupByToFilterOptions {
   "state_id" = "state",
   "priority" = "priority",

packages/editor/.eslintrc.js

@@ -1,38 +1,9 @@
 module.exports = {
   root: true,
-  extends: ["custom"],
-  rules: {
-    "import/order": [
-      "error",
-      {
-        groups: ["builtin", "external", "internal", "parent", "sibling"],
-        pathGroups: [
-          {
-            pattern: "react",
-            group: "external",
-            position: "before",
-          },
-          {
-            pattern: "lucide-react",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@plane/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@/**",
-            group: "internal",
-          },
-        ],
-        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
+  extends: ["@plane/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
   },
+  rules: {},
 };

packages/editor/package.json

@@ -26,6 +26,7 @@
     "build": "tsup --minify",
     "dev": "tsup --watch",
     "check-types": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "peerDependencies": {
@@ -65,21 +66,22 @@
     "tailwind-merge": "^1.14.0",
     "tippy.js": "^6.3.7",
     "tiptap-markdown": "^0.8.9",
+    "uuid": "^10.0.0",
     "y-indexeddb": "^9.0.12",
     "y-prosemirror": "^1.2.5",
     "y-protocols": "^1.0.6",
     "yjs": "^13.6.15"
   },
   "devDependencies": {
+    "@plane/eslint-config": "*",
+    "@plane/typescript-config": "*",
     "@types/node": "18.15.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
-    "eslint-config-custom": "*",
     "postcss": "^8.4.38",
     "tailwind-config-custom": "*",
-    "tsconfig": "*",
     "tsup": "^7.2.0",
-    "typescript": "4.9.5"
+    "typescript": "5.3.3"
   },
   "keywords": [
     "editor",

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

@@ -4,20 +4,17 @@ import { SlashCommand } from "@/extensions";
 // plane editor types
 import { TIssueEmbedConfig } from "@/plane-editor/types";
 // types
-import { TExtensions, TFileHandler, TUserDetails } from "@/types";
+import { TExtensions, TUserDetails } from "@/types";
 
 type Props = {
   disabledExtensions?: TExtensions[];
-  fileHandler: TFileHandler;
   issueEmbedConfig: TIssueEmbedConfig | undefined;
   provider: HocuspocusProvider;
   userDetails: TUserDetails;
 };
 
-export const DocumentEditorAdditionalExtensions = (props: Props) => {
-  const { fileHandler } = props;
-
-  const extensions: Extensions = [SlashCommand(fileHandler.upload)];
+export const DocumentEditorAdditionalExtensions = (_props: Props) => {
+  const extensions: Extensions = [SlashCommand()];
 
   return extensions;
 };

packages/editor/src/core/components/editors/document/collaborative-editor.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // components
-import { PageRenderer } from "@/components/editors";
+import { DocumentContentLoader, PageRenderer } from "@/components/editors";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
 // extensions
@@ -42,7 +42,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
   }
 
   // use document editor
-  const { editor } = useCollaborativeEditor({
+  const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
     disabledExtensions,
     editorClassName,
     embedHandler,
@@ -67,6 +67,8 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
 
   if (!editor) return null;
 
+  if (!hasServerSynced && !hasServerConnectionFailed) return <DocumentContentLoader />;
+
   return (
     <PageRenderer
       displayConfig={displayConfig}

packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, MutableRefObject } from "react";
 // components
-import { PageRenderer } from "@/components/editors";
+import { DocumentContentLoader, PageRenderer } from "@/components/editors";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
 // extensions
@@ -35,7 +35,7 @@ const CollaborativeDocumentReadOnlyEditor = (props: ICollaborativeDocumentReadOn
     );
   }
 
-  const { editor } = useReadOnlyCollaborativeEditor({
+  const { editor, hasServerConnectionFailed, hasServerSynced } = useReadOnlyCollaborativeEditor({
     editorClassName,
     extensions,
     forwardedRef,
@@ -52,6 +52,9 @@ const CollaborativeDocumentReadOnlyEditor = (props: ICollaborativeDocumentReadOn
   });
 
   if (!editor) return null;
+
+  if (!hasServerSynced && !hasServerConnectionFailed) return <DocumentContentLoader />;
+
   return (
     <PageRenderer
       displayConfig={displayConfig}

packages/editor/src/core/components/editors/document/index.ts

@@ -1,4 +1,5 @@
 export * from "./collaborative-editor";
 export * from "./collaborative-read-only-editor";
+export * from "./loader";
 export * from "./page-renderer";
 export * from "./read-only-editor";

packages/editor/src/core/components/editors/document/loader.tsx

@@ -0,0 +1,42 @@
+// ui
+import { Loader } from "@plane/ui";
+
+export const DocumentContentLoader = () => (
+  <div className="size-full px-5">
+    <Loader className="relative space-y-4">
+      <div className="space-y-2">
+        <div className="py-2">
+          <Loader.Item width="100%" height="36px" />
+        </div>
+        <Loader.Item width="80%" height="22px" />
+        <div className="relative flex items-center gap-2">
+          <Loader.Item width="30px" height="30px" />
+          <Loader.Item width="30%" height="22px" />
+        </div>
+        <div className="py-2">
+          <Loader.Item width="60%" height="36px" />
+        </div>
+        <Loader.Item width="70%" height="22px" />
+        <Loader.Item width="30%" height="22px" />
+        <div className="relative flex items-center gap-2">
+          <Loader.Item width="30px" height="30px" />
+          <Loader.Item width="30%" height="22px" />
+        </div>
+        <div className="py-2">
+          <Loader.Item width="50%" height="30px" />
+        </div>
+        <Loader.Item width="100%" height="22px" />
+        <div className="py-2">
+          <Loader.Item width="30%" height="30px" />
+        </div>
+        <Loader.Item width="30%" height="22px" />
+        <div className="relative flex items-center gap-2">
+          <div className="py-2">
+            <Loader.Item width="30px" height="30px" />
+          </div>
+          <Loader.Item width="30%" height="22px" />
+        </div>
+      </div>
+    </Loader>
+  </div>
+);

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

@@ -18,7 +18,8 @@ interface EditorContainerProps {
 export const EditorContainer: FC<EditorContainerProps> = (props) => {
   const { children, displayConfig, editor, editorContainerClassName, id } = props;
 
-  const handleContainerClick = () => {
+  const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (event.target !== event.currentTarget) return;
     if (!editor) return;
     if (!editor.isEditable) return;
     try {

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

@@ -1,7 +1,5 @@
 import { FC, ReactNode } from "react";
 import { Editor, EditorContent } from "@tiptap/react";
-// extensions
-import { ImageResizer } from "@/extensions/image";
 
 interface EditorContentProps {
   children?: ReactNode;
@@ -16,7 +14,6 @@ export const EditorContentWrapper: FC<EditorContentProps> = (props) => {
   return (
     <div tabIndex={tabIndex} onFocus={() => editor?.chain().focus(undefined, { scrollIntoView: false }).run()}>
       <EditorContent editor={editor} />
-      {editor?.isActive("image") && editor?.isEditable && <ImageResizer editor={editor} id={id} />}
       {children}
     </div>
   );

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

@@ -8,10 +8,10 @@ import { SideMenuExtension, SlashCommand } from "@/extensions";
 import { EditorRefApi, IRichTextEditor } from "@/types";
 
 const RichTextEditor = (props: IRichTextEditor) => {
-  const { dragDropEnabled, fileHandler } = props;
+  const { dragDropEnabled } = props;
 
   const getExtensions = useCallback(() => {
-    const extensions = [SlashCommand(fileHandler.upload)];
+    const extensions = [SlashCommand()];
 
     extensions.push(
       SideMenuExtension({
@@ -21,7 +21,7 @@ const RichTextEditor = (props: IRichTextEditor) => {
     );
 
     return extensions;
-  }, [dragDropEnabled, fileHandler.upload]);
+  }, [dragDropEnabled]);
 
   return (
     <EditorWrapper {...props} extensions={getExtensions()}>

packages/editor/src/core/components/menus/ai-menu.tsx

@@ -23,7 +23,6 @@ export const AIFeaturesMenu: React.FC<Props> = (props) => {
     menuRef.current.remove();
     menuRef.current.style.visibility = "visible";
 
-    // @ts-expect-error - tippy types are incorrect
     popup.current = tippy(document.body, {
       getReferenceClientRect: null,
       content: menuRef.current,

packages/editor/src/core/components/menus/block-menu.tsx

@@ -34,7 +34,6 @@ export const BlockMenu = (props: BlockMenuProps) => {
       menuRef.current.remove();
       menuRef.current.style.visibility = "visible";
 
-      // @ts-expect-error - tippy types are incorrect
       popup.current = tippy(document.body, {
         getReferenceClientRect: null,
         content: menuRef.current,
@@ -101,7 +100,8 @@ export const BlockMenu = (props: BlockMenuProps) => {
       icon: Copy,
       key: "duplicate",
       label: "Duplicate",
-      isDisabled: editor.state.selection.content().content.firstChild?.type.name === "image",
+      isDisabled:
+        editor.state.selection.content().content.firstChild?.type.name === "image" || editor.isActive("imageComponent"),
       onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();

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

@@ -23,7 +23,7 @@ import {
 } from "lucide-react";
 // helpers
 import {
-  insertImageCommand,
+  insertImage,
   insertTableCommand,
   setText,
   toggleBlockquote,
@@ -43,7 +43,7 @@ import {
   toggleUnderline,
 } from "@/helpers/editor-commands";
 // types
-import { TEditorCommands, UploadImage } from "@/types";
+import { TEditorCommands } from "@/types";
 
 export interface EditorMenuItem {
   key: TEditorCommands;
@@ -189,16 +189,16 @@ export const TableItem = (editor: Editor): EditorMenuItem => ({
   icon: TableIcon,
 });
 
-export const ImageItem = (editor: Editor, uploadFile: UploadImage) =>
+export const ImageItem = (editor: Editor) =>
   ({
     key: "image",
     name: "Image",
-    isActive: () => editor?.isActive("image"),
-    command: (savedSelection: Selection | null) => insertImageCommand(editor, uploadFile, savedSelection),
+    isActive: () => editor?.isActive("image") || editor?.isActive("imageComponent"),
+    command: (savedSelection: Selection | null) => insertImage({ editor, event: "insert", pos: savedSelection?.from }),
     icon: ImageIcon,
   }) as const;
 
-export function getEditorMenuItems(editor: Editor | null, uploadFile: UploadImage) {
+export function getEditorMenuItems(editor: Editor | null) {
   if (!editor) {
     return [];
   }
@@ -220,6 +220,6 @@ export function getEditorMenuItems(editor: Editor | null, uploadFile: UploadImag
     NumberedListItem(editor),
     QuoteItem(editor),
     TableItem(editor),
-    ImageItem(editor, uploadFile),
+    ImageItem(editor),
   ];
 }

packages/editor/src/core/extensions/code/lowlight-plugin.ts

@@ -117,14 +117,18 @@ export function LowlightPlugin({
             // Such transactions can happen during collab syncing via y-prosemirror, for example.
             transaction.steps.some(
               (step) =>
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 step.from !== undefined &&
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore
                 step.to !== undefined &&
                 oldNodes.some(
                   (node) =>
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-ignore
                     node.pos >= step.from &&
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-ignore
                     node.pos + node.node.nodeSize <= step.to
                 )

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

@@ -11,6 +11,7 @@ import { CustomCodeInlineExtension } from "./code-inline";
 import { CustomLinkExtension } from "./custom-link";
 import { CustomHorizontalRule } from "./horizontal-rule";
 import { ImageExtensionWithoutProps } from "./image";
+import { CustomImageComponentWithoutProps } from "./image/image-component-without-props";
 import { IssueWidgetWithoutProps } from "./issue-embed/issue-embed-without-props";
 import { CustomMentionWithoutProps } from "./mentions/mentions-without-props";
 import { CustomQuoteExtension } from "./quote";
@@ -61,6 +62,7 @@ export const CoreEditorExtensionsWithoutProps = [
       class: "rounded-md",
     },
   }),
+  CustomImageComponentWithoutProps(),
   TiptapUnderline,
   TextStyle,
   TaskList.configure({

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

@@ -0,0 +1,268 @@
+import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
+import { NodeSelection } from "@tiptap/pm/state";
+// extensions
+import { CustomImageNodeViewProps, ImageToolbarRoot } from "@/extensions/custom-image";
+// helpers
+import { cn } from "@/helpers/common";
+
+const MIN_SIZE = 100;
+
+type Pixel = `${number}px`;
+
+type PixelAttribute<TDefault> = Pixel | TDefault;
+
+export type ImageAttributes = {
+  src: string | null;
+  width: PixelAttribute<"35%" | number>;
+  height: PixelAttribute<"auto" | number>;
+  aspectRatio: number | null;
+  id: string | null;
+};
+
+type Size = {
+  width: PixelAttribute<"35%">;
+  height: PixelAttribute<"auto">;
+  aspectRatio: number | null;
+};
+
+const ensurePixelString = <TDefault,>(value: Pixel | TDefault | number | undefined | null, defaultValue?: TDefault) => {
+  if (!value || value === defaultValue) {
+    return defaultValue;
+  }
+
+  if (typeof value === "number") {
+    return `${value}px` satisfies Pixel;
+  }
+
+  return value;
+};
+
+type CustomImageBlockProps = CustomImageNodeViewProps & {
+  imageFromFileSystem: string;
+  setFailedToLoadImage: (isError: boolean) => void;
+  editorContainer: HTMLDivElement | null;
+  setEditorContainer: (editorContainer: HTMLDivElement | null) => void;
+};
+
+export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
+  // props
+  const {
+    node,
+    updateAttributes,
+    setFailedToLoadImage,
+    imageFromFileSystem,
+    selected,
+    getPos,
+    editor,
+    editorContainer,
+    setEditorContainer,
+  } = props;
+  const { src: remoteImageSrc, width, height, aspectRatio } = node.attrs;
+  // states
+  const [size, setSize] = useState<Size>({
+    width: ensurePixelString(width, "35%"),
+    height: ensurePixelString(height, "auto"),
+    aspectRatio: aspectRatio || 1,
+  });
+  const [isResizing, setIsResizing] = useState(false);
+  const [initialResizeComplete, setInitialResizeComplete] = useState(false);
+  // refs
+  const containerRef = useRef<HTMLDivElement>(null);
+  const containerRect = useRef<DOMRect | null>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  const handleImageLoad = useCallback(() => {
+    const img = imageRef.current;
+    if (!img) return;
+    let closestEditorContainer: HTMLDivElement | null = null;
+
+    if (editorContainer) {
+      closestEditorContainer = editorContainer;
+    } else {
+      closestEditorContainer = img.closest(".editor-container") as HTMLDivElement | null;
+      if (!closestEditorContainer) {
+        console.error("Editor container not found");
+        return;
+      }
+    }
+    if (!closestEditorContainer) {
+      console.error("Editor container not found");
+      return;
+    }
+
+    setEditorContainer(closestEditorContainer);
+    const aspectRatio = img.naturalWidth / img.naturalHeight;
+
+    if (width === "35%") {
+      const editorWidth = closestEditorContainer.clientWidth;
+      const initialWidth = Math.max(editorWidth * 0.35, MIN_SIZE);
+      const initialHeight = initialWidth / aspectRatio;
+
+      const initialComputedSize = {
+        width: `${Math.round(initialWidth)}px` satisfies Pixel,
+        height: `${Math.round(initialHeight)}px` satisfies Pixel,
+        aspectRatio: aspectRatio,
+      };
+
+      setSize(initialComputedSize);
+      updateAttributes(initialComputedSize);
+    } else {
+      // as the aspect ratio in not stored for old images, we need to update the attrs
+      setSize((prevSize) => {
+        const newSize = { ...prevSize, aspectRatio };
+        updateAttributes(newSize);
+        return newSize;
+      });
+    }
+    setInitialResizeComplete(true);
+  }, [width, updateAttributes, editorContainer]);
+
+  // for real time resizing
+  useLayoutEffect(() => {
+    setSize((prevSize) => ({
+      ...prevSize,
+      width: ensurePixelString(width),
+      height: ensurePixelString(height),
+    }));
+  }, [width, height]);
+
+  const handleResize = useCallback(
+    (e: MouseEvent | TouchEvent) => {
+      if (!containerRef.current || !containerRect.current || !size.aspectRatio) return;
+
+      const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+
+      const newWidth = Math.max(clientX - containerRect.current.left, MIN_SIZE);
+      const newHeight = newWidth / size.aspectRatio;
+
+      setSize((prevSize) => ({ ...prevSize, width: `${newWidth}px`, height: `${newHeight}px` }));
+    },
+    [size]
+  );
+
+  const handleResizeEnd = useCallback(() => {
+    setIsResizing(false);
+    updateAttributes(size);
+  }, [size, updateAttributes]);
+
+  const handleResizeStart = useCallback((e: React.MouseEvent | React.TouchEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+
+    if (containerRef.current) {
+      containerRect.current = containerRef.current.getBoundingClientRect();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isResizing) {
+      window.addEventListener("mousemove", handleResize);
+      window.addEventListener("mouseup", handleResizeEnd);
+      window.addEventListener("mouseleave", handleResizeEnd);
+
+      return () => {
+        window.removeEventListener("mousemove", handleResize);
+        window.removeEventListener("mouseup", handleResizeEnd);
+        window.removeEventListener("mouseleave", handleResizeEnd);
+      };
+    }
+  }, [isResizing, handleResize, handleResizeEnd]);
+
+  const handleImageMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const pos = getPos();
+      const nodeSelection = NodeSelection.create(editor.state.doc, pos);
+      editor.view.dispatch(editor.state.tr.setSelection(nodeSelection));
+    },
+    [editor, getPos]
+  );
+
+  // show the image loader if the remote image's src or preview image from filesystem is not set yet (while loading the image post upload) (or)
+  // if the initial resize (from 35% width and "auto" height attrs to the actual size in px) is not complete
+  const showImageLoader = !(remoteImageSrc || imageFromFileSystem) || !initialResizeComplete;
+  // show the image utils only if the editor is editable, the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
+  const showImageUtils = editor.isEditable && remoteImageSrc && initialResizeComplete;
+  // show the preview image from the file system if the remote image's src is not set
+  const displayedImageSrc = remoteImageSrc ?? imageFromFileSystem;
+
+  return (
+    <div
+      ref={containerRef}
+      className="group/image-component relative inline-block max-w-full"
+      onMouseDown={handleImageMouseDown}
+      style={{
+        width: size.width,
+        aspectRatio: size.aspectRatio,
+      }}
+    >
+      {showImageLoader && (
+        <div
+          className="animate-pulse bg-custom-background-80 rounded-md"
+          style={{ width: size.width, height: size.height }}
+        />
+      )}
+      <img
+        ref={imageRef}
+        src={displayedImageSrc}
+        onLoad={handleImageLoad}
+        onError={(e) => {
+          console.error("Error loading image", e);
+          setFailedToLoadImage(true);
+        }}
+        width={size.width}
+        className={cn("image-component block rounded-md", {
+          // hide the image while the background calculations of the image loader are in progress (to avoid flickering) and show the loader until then
+          hidden: showImageLoader,
+          "read-only-image": !editor.isEditable,
+          "blur-sm opacity-80 loading-image": !remoteImageSrc,
+        })}
+        style={{
+          width: size.width,
+          aspectRatio: size.aspectRatio,
+        }}
+      />
+      {showImageUtils && (
+        <ImageToolbarRoot
+          containerClassName={
+            "absolute top-1 right-1 z-20 bg-black/40 rounded opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity"
+          }
+          image={{
+            src: remoteImageSrc,
+            aspectRatio: size.aspectRatio,
+            height: size.height,
+            width: size.width,
+          }}
+        />
+      )}
+      {selected && displayedImageSrc === remoteImageSrc && (
+        <div className="absolute inset-0 size-full bg-custom-primary-500/30" />
+      )}
+      {showImageUtils && (
+        <>
+          <div
+            className={cn(
+              "absolute inset-0 border-2 border-custom-primary-100 pointer-events-none rounded-md transition-opacity duration-100 ease-in-out",
+              {
+                "opacity-100": isResizing,
+                "opacity-0 group-hover/image-component:opacity-100": !isResizing,
+              }
+            )}
+          />
+          <div
+            className={cn(
+              "absolute bottom-0 right-0 translate-y-1/2 translate-x-1/2 size-4 rounded-full bg-custom-primary-100 border-2 border-white cursor-nwse-resize transition-opacity duration-100 ease-in-out",
+              {
+                "opacity-100 pointer-events-auto": isResizing,
+                "opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto":
+                  !isResizing,
+              }
+            )}
+            onMouseDown={handleResizeStart}
+          />
+        </>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,79 @@
+import { useEffect, useRef, useState } from "react";
+import { Node as ProsemirrorNode } from "@tiptap/pm/model";
+import { Editor, NodeViewWrapper } from "@tiptap/react";
+// extensions
+import { CustomImageBlock, CustomImageUploader, ImageAttributes } from "@/extensions/custom-image";
+
+export type CustomImageNodeViewProps = {
+  getPos: () => number;
+  editor: Editor;
+  node: ProsemirrorNode & {
+    attrs: ImageAttributes;
+  };
+  updateAttributes: (attrs: Record<string, any>) => void;
+  selected: boolean;
+};
+
+export const CustomImageNode = (props: CustomImageNodeViewProps) => {
+  const { getPos, editor, node, updateAttributes, selected } = props;
+
+  const [isUploaded, setIsUploaded] = useState(false);
+  const [imageFromFileSystem, setImageFromFileSystem] = useState<string | undefined>(undefined);
+  const [failedToLoadImage, setFailedToLoadImage] = useState(false);
+
+  const [editorContainer, setEditorContainer] = useState<HTMLDivElement | null>(null);
+  const imageComponentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const closestEditorContainer = imageComponentRef.current?.closest(".editor-container");
+    if (!closestEditorContainer) {
+      console.error("Editor container not found");
+      return;
+    }
+
+    setEditorContainer(closestEditorContainer as HTMLDivElement);
+  }, []);
+
+  // the image is already uploaded if the image-component node has src attribute
+  // and we need to remove the blob from our file system
+  useEffect(() => {
+    const remoteImageSrc = node.attrs.src;
+    if (remoteImageSrc) {
+      setIsUploaded(true);
+      setImageFromFileSystem(undefined);
+    } else {
+      setIsUploaded(false);
+    }
+  }, [node.attrs.src]);
+
+  return (
+    <NodeViewWrapper>
+      <div className="p-0 mx-0 my-2" data-drag-handle ref={imageComponentRef}>
+        {(isUploaded || imageFromFileSystem) && !failedToLoadImage ? (
+          <CustomImageBlock
+            imageFromFileSystem={imageFromFileSystem}
+            editorContainer={editorContainer}
+            editor={editor}
+            getPos={getPos}
+            node={node}
+            setEditorContainer={setEditorContainer}
+            setFailedToLoadImage={setFailedToLoadImage}
+            selected={selected}
+            updateAttributes={updateAttributes}
+          />
+        ) : (
+          <CustomImageUploader
+            editor={editor}
+            failedToLoadImage={failedToLoadImage}
+            getPos={getPos}
+            loadImageFromFileSystem={setImageFromFileSystem}
+            node={node}
+            setIsUploaded={setIsUploaded}
+            selected={selected}
+            updateAttributes={updateAttributes}
+          />
+        )}
+      </div>
+    </NodeViewWrapper>
+  );
+};

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

@@ -0,0 +1,173 @@
+import { ChangeEvent, useCallback, useEffect, useMemo, useRef } from "react";
+import { Node as ProsemirrorNode } from "@tiptap/pm/model";
+import { Editor } from "@tiptap/core";
+import { ImageIcon } from "lucide-react";
+// helpers
+import { cn } from "@/helpers/common";
+// hooks
+import { useUploader, useDropZone } from "@/hooks/use-file-upload";
+// plugins
+import { isFileValid } from "@/plugins/image";
+// extensions
+import { getImageComponentImageFileMap, ImageAttributes } from "@/extensions/custom-image";
+
+export const CustomImageUploader = (props: {
+  failedToLoadImage: boolean;
+  editor: Editor;
+  selected: boolean;
+  loadImageFromFileSystem: (file: string) => void;
+  setIsUploaded: (isUploaded: boolean) => void;
+  node: ProsemirrorNode & {
+    attrs: ImageAttributes;
+  };
+  updateAttributes: (attrs: Record<string, any>) => void;
+  getPos: () => number;
+}) => {
+  const {
+    selected,
+    failedToLoadImage,
+    editor,
+    loadImageFromFileSystem,
+    node,
+    setIsUploaded,
+    updateAttributes,
+    getPos,
+  } = props;
+  // ref
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const hasTriggeredFilePickerRef = useRef(false);
+  const imageEntityId = node.attrs.id;
+
+  const imageComponentImageFileMap = useMemo(() => getImageComponentImageFileMap(editor), [editor]);
+
+  const onUpload = useCallback(
+    (url: string) => {
+      if (url) {
+        setIsUploaded(true);
+        // Update the node view's src attribute post upload
+        updateAttributes({ src: url });
+        imageComponentImageFileMap?.delete(imageEntityId);
+
+        const pos = getPos();
+        // get current node
+        const getCurrentSelection = editor.state.selection;
+        const currentNode = editor.state.doc.nodeAt(getCurrentSelection.from);
+
+        // only if the cursor is at the current image component, manipulate
+        // the cursor position
+        if (currentNode && currentNode.type.name === "imageComponent" && currentNode.attrs.src === url) {
+          // control cursor position after upload
+          const nextNode = editor.state.doc.nodeAt(pos + 1);
+
+          if (nextNode && nextNode.type.name === "paragraph") {
+            // If there is a paragraph node after the image component, move the focus to the next node
+            editor.commands.setTextSelection(pos + 1);
+          } else {
+            // create a new paragraph after the image component post upload
+            editor.commands.createParagraphNear();
+          }
+        }
+      }
+    },
+    [imageComponentImageFileMap, imageEntityId, updateAttributes, getPos]
+  );
+  // hooks
+  const { uploading: isImageBeingUploaded, uploadFile } = useUploader({ onUpload, editor, loadImageFromFileSystem });
+  const { draggedInside, onDrop, onDragEnter, onDragLeave } = useDropZone({ uploader: uploadFile });
+
+  // the meta data of the image component
+  const meta = useMemo(
+    () => imageComponentImageFileMap?.get(imageEntityId),
+    [imageComponentImageFileMap, imageEntityId]
+  );
+
+  // if the image component is dropped, we check if it has an existing file
+  const existingFile = useMemo(() => (meta && meta.event === "drop" ? meta.file : undefined), [meta]);
+
+  // after the image component is mounted we start the upload process based on
+  // it's uploaded
+  useEffect(() => {
+    if (meta) {
+      if (meta.event === "drop" && "file" in meta) {
+        uploadFile(meta.file);
+      } else if (meta.event === "insert" && fileInputRef.current && !hasTriggeredFilePickerRef.current) {
+        if (meta.hasOpenedFileInputOnce) return;
+        fileInputRef.current.click();
+        hasTriggeredFilePickerRef.current = true;
+        imageComponentImageFileMap?.set(imageEntityId, { ...meta, hasOpenedFileInputOnce: true });
+      }
+    }
+  }, [meta, uploadFile, imageComponentImageFileMap]);
+
+  // check if the image is dropped and set the local image as the existing file
+  useEffect(() => {
+    if (existingFile) {
+      uploadFile(existingFile);
+    }
+  }, [existingFile, uploadFile]);
+
+  const onFileChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) {
+        if (isFileValid(file)) {
+          uploadFile(file);
+        }
+      }
+    },
+    [uploadFile]
+  );
+
+  const getDisplayMessage = useCallback(() => {
+    const isUploading = isImageBeingUploaded || existingFile;
+    if (failedToLoadImage) {
+      return "Error loading image";
+    }
+
+    if (isUploading) {
+      return "Uploading...";
+    }
+
+    if (draggedInside) {
+      return "Drop image here";
+    }
+
+    return "Add an image";
+  }, [draggedInside, failedToLoadImage, existingFile, isImageBeingUploaded]);
+
+  return (
+    <div
+      className={cn(
+        "image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-custom-text-300 hover:text-custom-text-200 bg-custom-background-90 hover:bg-custom-background-80 border border-dashed border-custom-border-300 cursor-pointer transition-all duration-200 ease-in-out",
+        {
+          "bg-custom-background-80 text-custom-text-200": draggedInside,
+          "text-custom-primary-200 bg-custom-primary-100/10 hover:bg-custom-primary-100/10 hover:text-custom-primary-200 border-custom-primary-200/10":
+            selected,
+          "text-red-500 cursor-default hover:text-red-500": failedToLoadImage,
+          "bg-red-500/10 hover:bg-red-500/10": failedToLoadImage && selected,
+        }
+      )}
+      onDrop={onDrop}
+      onDragOver={onDragEnter}
+      onDragLeave={onDragLeave}
+      contentEditable={false}
+      onClick={() => {
+        if (!failedToLoadImage) {
+          fileInputRef.current?.click();
+        }
+      }}
+    >
+      <ImageIcon className="size-4" />
+      <div className="text-base font-medium">{getDisplayMessage()}</div>
+      <input
+        className="size-0 overflow-hidden"
+        ref={fileInputRef}
+        hidden
+        type="file"
+        accept=".jpg,.jpeg,.png,.webp"
+        onChange={onFileChange}
+      />
+    </div>
+  );
+};

packages/editor/src/core/extensions/custom-image/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./toolbar";
+export * from "./image-block";
+export * from "./image-node";
+export * from "./image-uploader";

packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx

@@ -0,0 +1,159 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ExternalLink, Maximize, Minus, Plus, X } from "lucide-react";
+// helpers
+import { cn } from "@/helpers/common";
+
+type Props = {
+  image: {
+    src: string;
+    height: string;
+    width: string;
+    aspectRatio: number;
+  };
+  isOpen: boolean;
+  toggleFullScreenMode: (val: boolean) => void;
+};
+
+const MAGNIFICATION_VALUES = [0.5, 0.75, 1, 1.5, 1.75, 2];
+
+export const ImageFullScreenAction: React.FC<Props> = (props) => {
+  const { image, isOpen: isFullScreenEnabled, toggleFullScreenMode } = props;
+  const { src, width, aspectRatio } = image;
+  // states
+  const [magnification, setMagnification] = useState(1);
+  // refs
+  const modalRef = useRef<HTMLDivElement>(null);
+  // derived values
+  const widthInNumber = useMemo(() => Number(width?.replace("px", "")), [width]);
+  // close handler
+  const handleClose = useCallback(() => {
+    toggleFullScreenMode(false);
+    setTimeout(() => {
+      setMagnification(1);
+    }, 200);
+  }, [toggleFullScreenMode]);
+  // download handler
+  const handleOpenInNewTab = () => {
+    const link = document.createElement("a");
+    link.href = src;
+    link.target = "_blank";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+  // magnification decrease handler
+  const handleDecreaseMagnification = useCallback(() => {
+    const currentIndex = MAGNIFICATION_VALUES.indexOf(magnification);
+    if (currentIndex === 0) return;
+    setMagnification(MAGNIFICATION_VALUES[currentIndex - 1]);
+  }, [magnification]);
+  // magnification increase handler
+  const handleIncreaseMagnification = useCallback(() => {
+    const currentIndex = MAGNIFICATION_VALUES.indexOf(magnification);
+    if (currentIndex === MAGNIFICATION_VALUES.length - 1) return;
+    setMagnification(MAGNIFICATION_VALUES[currentIndex + 1]);
+  }, [magnification]);
+  // keydown handler
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape" || e.key === "+" || e.key === "=" || e.key === "-") {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (e.key === "Escape") handleClose();
+        if (e.key === "+" || e.key === "=") handleIncreaseMagnification();
+        if (e.key === "-") handleDecreaseMagnification();
+      }
+    },
+    [handleClose, handleDecreaseMagnification, handleIncreaseMagnification]
+  );
+  // click outside handler
+  const handleClickOutside = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      if (modalRef.current && e.target === modalRef.current) {
+        handleClose();
+      }
+    },
+    [handleClose]
+  );
+  // register keydown listener
+  useEffect(() => {
+    if (isFullScreenEnabled) {
+      document.addEventListener("keydown", handleKeyDown);
+
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [handleKeyDown, isFullScreenEnabled]);
+
+  return (
+    <>
+      <div
+        className={cn(
+          "fixed inset-0 size-full z-20 bg-black/90 opacity-0 pointer-events-none cursor-default transition-opacity",
+          {
+            "opacity-100 pointer-events-auto": isFullScreenEnabled,
+          }
+        )}
+      >
+        <div ref={modalRef} onClick={handleClickOutside} className="relative size-full grid place-items-center">
+          <button
+            type="button"
+            onClick={handleClose}
+            className="absolute top-10 right-10 size-8 grid place-items-center"
+          >
+            <X className="size-8 text-white/60 hover:text-white transition-colors" />
+          </button>
+          <img
+            src={src}
+            className="read-only-image rounded-lg transition-all duration-200"
+            style={{
+              width: `${widthInNumber * magnification}px`,
+              aspectRatio,
+            }}
+          />
+        </div>
+        <div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-white/20 py-2 divide-x divide-white/20 bg-black">
+          <div className="flex items-center">
+            <button
+              type="button"
+              onClick={handleDecreaseMagnification}
+              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
+              disabled={magnification === MAGNIFICATION_VALUES[0]}
+            >
+              <Minus className="size-4" />
+            </button>
+            <span className="text-sm w-12 text-center text-white">{(100 * magnification).toFixed(0)}%</span>
+            <button
+              type="button"
+              onClick={handleIncreaseMagnification}
+              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
+              disabled={magnification === MAGNIFICATION_VALUES[MAGNIFICATION_VALUES.length - 1]}
+            >
+              <Plus className="size-4" />
+            </button>
+          </div>
+          <button
+            type="button"
+            onClick={handleOpenInNewTab}
+            className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
+          >
+            <ExternalLink className="size-4" />
+          </button>
+        </div>
+      </div>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          toggleFullScreenMode(true);
+        }}
+        className="size-5 grid place-items-center hover:bg-black/40 text-white rounded transition-colors"
+      >
+        <Maximize className="size-3" />
+      </button>
+    </>
+  );
+};

packages/editor/src/core/extensions/custom-image/components/toolbar/index.ts

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

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

@@ -0,0 +1,37 @@
+import { useState } from "react";
+// helpers
+import { cn } from "@/helpers/common";
+// components
+import { ImageFullScreenAction } from "./full-screen";
+
+type Props = {
+  containerClassName?: string;
+  image: {
+    src: string;
+    height: string;
+    width: string;
+    aspectRatio: number;
+  };
+};
+
+export const ImageToolbarRoot: React.FC<Props> = (props) => {
+  const { containerClassName, image } = props;
+  // state
+  const [isFullScreenEnabled, setIsFullScreenEnabled] = useState(false);
+
+  return (
+    <>
+      <div
+        className={cn(containerClassName, {
+          "opacity-100 pointer-events-auto": isFullScreenEnabled,
+        })}
+      >
+        <ImageFullScreenAction
+          image={image}
+          isOpen={isFullScreenEnabled}
+          toggleFullScreenMode={(val) => setIsFullScreenEnabled(val)}
+        />
+      </div>
+    </>
+  );
+};

packages/editor/src/core/extensions/custom-image/custom-image.ts

@@ -0,0 +1,176 @@
+import { Editor, mergeAttributes } from "@tiptap/core";
+import { Image } from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { v4 as uuidv4 } from "uuid";
+// extensions
+import { CustomImageNode } from "@/extensions/custom-image";
+// plugins
+import { TrackImageDeletionPlugin, TrackImageRestorationPlugin, isFileValid } from "@/plugins/image";
+// types
+import { TFileHandler } from "@/types";
+// helpers
+import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
+
+export type InsertImageComponentProps = {
+  file?: File;
+  pos?: number;
+  event: "insert" | "drop";
+};
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    imageComponent: {
+      insertImageComponent: ({ file, pos, event }: InsertImageComponentProps) => ReturnType;
+      uploadImage: (file: File) => () => Promise<string> | undefined;
+    };
+  }
+}
+
+export const getImageComponentImageFileMap = (editor: Editor) =>
+  (editor.storage.imageComponent as UploadImageExtensionStorage | undefined)?.fileMap;
+
+export interface UploadImageExtensionStorage {
+  fileMap: Map<string, UploadEntity>;
+}
+
+export type UploadEntity = ({ event: "insert" } | { event: "drop"; file: File }) & { hasOpenedFileInputOnce?: boolean };
+
+export const CustomImageExtension = (props: TFileHandler) => {
+  const { upload, delete: deleteImage, restore: restoreImage } = props;
+
+  return Image.extend<Record<string, unknown>, UploadImageExtensionStorage>({
+    name: "imageComponent",
+    selectable: true,
+    group: "block",
+    atom: true,
+    draggable: true,
+
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        width: {
+          default: "35%",
+        },
+        src: {
+          default: null,
+        },
+        height: {
+          default: "auto",
+        },
+        ["id"]: {
+          default: null,
+        },
+        aspectRatio: {
+          default: null,
+        },
+      };
+    },
+
+    parseHTML() {
+      return [
+        {
+          tag: "image-component",
+        },
+      ];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+      return ["image-component", mergeAttributes(HTMLAttributes)];
+    },
+
+    onCreate(this) {
+      const imageSources = new Set<string>();
+      this.editor.state.doc.descendants((node) => {
+        if (node.type.name === this.name) {
+          imageSources.add(node.attrs.src);
+        }
+      });
+      imageSources.forEach(async (src) => {
+        try {
+          const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
+          await restoreImage(assetUrlWithWorkspaceId);
+        } catch (error) {
+          console.error("Error restoring image: ", error);
+        }
+      });
+    },
+
+    addKeyboardShortcuts() {
+      return {
+        ArrowDown: insertEmptyParagraphAtNodeBoundaries("down", this.name),
+        ArrowUp: insertEmptyParagraphAtNodeBoundaries("up", this.name),
+      };
+    },
+
+    addProseMirrorPlugins() {
+      return [
+        TrackImageDeletionPlugin(this.editor, deleteImage, this.name),
+        TrackImageRestorationPlugin(this.editor, restoreImage, this.name),
+      ];
+    },
+
+    addStorage() {
+      return {
+        fileMap: new Map(),
+        deletedImageSet: new Map<string, boolean>(),
+        uploadInProgress: false,
+      };
+    },
+
+    addCommands() {
+      return {
+        insertImageComponent:
+          (props: { file?: File; pos?: number; event: "insert" | "drop" }) =>
+          ({ commands }) => {
+            // Early return if there's an invalid file being dropped
+            if (props?.file && !isFileValid(props.file)) {
+              return false;
+            }
+
+            // generate a unique id for the image to keep track of dropped
+            // files' file data
+            const fileId = uuidv4();
+
+            const imageComponentImageFileMap = getImageComponentImageFileMap(this.editor);
+
+            if (imageComponentImageFileMap) {
+              if (props?.event === "drop" && props.file) {
+                imageComponentImageFileMap.set(fileId, {
+                  file: props.file,
+                  event: props.event,
+                });
+              } else if (props.event === "insert") {
+                imageComponentImageFileMap.set(fileId, {
+                  event: props.event,
+                  hasOpenedFileInputOnce: false,
+                });
+              }
+            }
+
+            const attributes = {
+              id: fileId,
+            };
+
+            if (props.pos) {
+              return commands.insertContentAt(props.pos, {
+                type: this.name,
+                attrs: attributes,
+              });
+            }
+            return commands.insertContent({
+              type: this.name,
+              attrs: attributes,
+            });
+          },
+        uploadImage: (file: File) => async () => {
+          const fileUrl = await upload(file);
+          return fileUrl;
+        },
+      };
+    },
+
+    addNodeView() {
+      return ReactNodeViewRenderer(CustomImageNode);
+    },
+  });
+};

packages/editor/src/core/extensions/custom-image/index.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./custom-image";
+export * from "./read-only-custom-image";

packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts

@@ -0,0 +1,57 @@
+import { mergeAttributes } from "@tiptap/core";
+import { Image } from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+// components
+import { CustomImageNode, UploadImageExtensionStorage } from "@/extensions/custom-image";
+
+export const CustomReadOnlyImageExtension = () =>
+  Image.extend<Record<string, unknown>, UploadImageExtensionStorage>({
+    name: "imageComponent",
+    selectable: false,
+    group: "block",
+    atom: true,
+    draggable: false,
+
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        width: {
+          default: "35%",
+        },
+        src: {
+          default: null,
+        },
+        height: {
+          default: "auto",
+        },
+        ["id"]: {
+          default: null,
+        },
+        aspectRatio: {
+          default: null,
+        },
+      };
+    },
+
+    parseHTML() {
+      return [
+        {
+          tag: "image-component",
+        },
+      ];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+      return ["image-component", mergeAttributes(HTMLAttributes)];
+    },
+
+    addStorage() {
+      return {
+        fileMap: new Map(),
+      };
+    },
+
+    addNodeView() {
+      return ReactNodeViewRenderer(CustomImageNode);
+    },
+  });

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

@@ -1,42 +1,50 @@
-import { Extension } from "@tiptap/core";
-import { Plugin, PluginKey } from "prosemirror-state";
-// plugins
-import { startImageUpload } from "@/plugins/image";
-// types
-import { UploadImage } from "@/types";
+import { Extension, Editor } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { EditorView } from "@tiptap/pm/view";
 
-export const DropHandlerExtension = (uploadFile: UploadImage) =>
+export const DropHandlerExtension = () =>
   Extension.create({
     name: "dropHandler",
     priority: 1000,
 
     addProseMirrorPlugins() {
+      const editor = this.editor;
       return [
         new Plugin({
           key: new PluginKey("drop-handler-plugin"),
           props: {
-            handlePaste: (view, event) => {
-              if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
+            handlePaste: (view: EditorView, event: ClipboardEvent) => {
+              if (event.clipboardData && event.clipboardData.files && event.clipboardData.files.length > 0) {
                 event.preventDefault();
-                const file = event.clipboardData.files[0];
-                const pos = view.state.selection.from;
-                startImageUpload(this.editor, file, view, pos, uploadFile);
+                const files = Array.from(event.clipboardData.files);
+                const imageFiles = files.filter((file) => file.type.startsWith("image"));
+
+                if (imageFiles.length > 0) {
+                  const pos = view.state.selection.from;
+                  insertImages({ editor, files: imageFiles, initialPos: pos, event: "drop" });
+                }
                 return true;
               }
               return false;
             },
-            handleDrop: (view, event, _slice, moved) => {
-              if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+            handleDrop: (view: EditorView, event: DragEvent, _slice: any, moved: boolean) => {
+              if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length > 0) {
                 event.preventDefault();
-                const file = event.dataTransfer.files[0];
-                const coordinates = view.posAtCoords({
-                  left: event.clientX,
-                  top: event.clientY,
-                });
-                if (coordinates) {
-                  startImageUpload(this.editor, file, view, coordinates.pos - 1, uploadFile);
+                const files = Array.from(event.dataTransfer.files);
+                const imageFiles = files.filter((file) => file.type.startsWith("image"));
+
+                if (imageFiles.length > 0) {
+                  const coordinates = view.posAtCoords({
+                    left: event.clientX,
+                    top: event.clientY,
+                  });
+
+                  if (coordinates) {
+                    const pos = coordinates.pos;
+                    insertImages({ editor, files: imageFiles, initialPos: pos, event: "drop" });
+                  }
+                  return true;
                 }
-                return true;
               }
               return false;
             },
@@ -45,3 +53,40 @@ export const DropHandlerExtension = (uploadFile: UploadImage) =>
       ];
     },
   });
+
+const insertImages = async ({
+  editor,
+  files,
+  initialPos,
+  event,
+}: {
+  editor: Editor;
+  files: File[];
+  initialPos: number;
+  event: "insert" | "drop";
+}) => {
+  let pos = initialPos;
+
+  for (const file of files) {
+    // safe insertion
+    const docSize = editor.state.doc.content.size;
+    pos = Math.min(pos, docSize);
+
+    // Check if the position has a non-empty node
+    const nodeAtPos = editor.state.doc.nodeAt(pos);
+    if (nodeAtPos && nodeAtPos.content.size > 0) {
+      // Move to the end of the current node
+      pos += nodeAtPos.nodeSize;
+    }
+
+    try {
+      // Insert the image at the current position
+      editor.commands.insertImageComponent({ file, pos, event });
+    } catch (error) {
+      console.error(`Error while ${event}ing image:`, error);
+    }
+
+    // Move to the next position
+    pos += 1;
+  }
+};

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

@@ -12,6 +12,7 @@ import {
   CustomCodeInlineExtension,
   CustomCodeMarkPlugin,
   CustomHorizontalRule,
+  CustomImageExtension,
   CustomKeymap,
   CustomLinkExtension,
   CustomMention,
@@ -79,7 +80,7 @@ export const CoreEditorExtensions = ({
     ...(enableHistory ? {} : { history: false }),
   }),
   CustomQuoteExtension,
-  DropHandlerExtension(uploadFile),
+  DropHandlerExtension(),
   CustomHorizontalRule.configure({
     HTMLAttributes: {
       class: "my-4 border-custom-border-400",
@@ -104,6 +105,12 @@ export const CoreEditorExtensions = ({
       class: "rounded-md",
     },
   }),
+  CustomImageExtension({
+    delete: deleteFile,
+    restore: restoreFile,
+    upload: uploadFile,
+    cancel: cancelUploadImage ?? (() => {}),
+  }),
   TiptapUnderline,
   TextStyle,
   TaskList.configure({
@@ -142,7 +149,7 @@ export const CoreEditorExtensions = ({
     placeholder: ({ editor, node }) => {
       if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
 
-      if (editor.storage.image.uploadInProgress) return "";
+      if (editor.storage.imageComponent.uploadInProgress) return "";
 
       const shouldHidePlaceholder =
         editor.isActive("table") || editor.isActive("codeBlock") || editor.isActive("image");

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

@@ -0,0 +1,57 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+export interface IMarking {
+  type: "heading";
+  level: number;
+  text: string;
+  sequence: number;
+}
+
+export const HeadingListExtension = Extension.create({
+  name: "headingList",
+
+  addStorage() {
+    return {
+      headings: [] as IMarking[],
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const plugin = new Plugin({
+      key: new PluginKey("heading-list"),
+      appendTransaction: (_, __, newState) => {
+        const headings: IMarking[] = [];
+        let h1Sequence = 0;
+        let h2Sequence = 0;
+        let h3Sequence = 0;
+
+        newState.doc.descendants((node) => {
+          if (node.type.name === "heading") {
+            const level = node.attrs.level;
+            const text = node.textContent;
+
+            headings.push({
+              type: "heading",
+              level: level,
+              text: text,
+              sequence: level === 1 ? ++h1Sequence : level === 2 ? ++h2Sequence : ++h3Sequence,
+            });
+          }
+        });
+
+        this.storage.headings = headings;
+
+        this.editor.emit("update", { editor: this.editor, transaction: newState.tr });
+
+        return null;
+      },
+    });
+
+    return [plugin];
+  },
+
+  getHeadings() {
+    return this.storage.headings;
+  },
+});

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

@@ -1,37 +1,33 @@
 import ImageExt from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
 // helpers
 import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
 // plugins
-import {
-  IMAGE_NODE_TYPE,
-  ImageExtensionStorage,
-  TrackImageDeletionPlugin,
-  TrackImageRestorationPlugin,
-  UploadImagesPlugin,
-} from "@/plugins/image";
+import { ImageExtensionStorage, TrackImageDeletionPlugin, TrackImageRestorationPlugin } from "@/plugins/image";
 // types
 import { DeleteImage, RestoreImage } from "@/types";
+// extensions
+import { CustomImageNode } from "@/extensions";
 
 export const ImageExtension = (deleteImage: DeleteImage, restoreImage: RestoreImage, cancelUploadImage?: () => void) =>
   ImageExt.extend<any, ImageExtensionStorage>({
     addKeyboardShortcuts() {
       return {
-        ArrowDown: insertEmptyParagraphAtNodeBoundaries("down", "image"),
-        ArrowUp: insertEmptyParagraphAtNodeBoundaries("up", "image"),
+        ArrowDown: insertEmptyParagraphAtNodeBoundaries("down", this.name),
+        ArrowUp: insertEmptyParagraphAtNodeBoundaries("up", this.name),
       };
     },
     addProseMirrorPlugins() {
       return [
-        UploadImagesPlugin(this.editor, cancelUploadImage),
-        TrackImageDeletionPlugin(this.editor, deleteImage),
-        TrackImageRestorationPlugin(this.editor, restoreImage),
+        TrackImageDeletionPlugin(this.editor, deleteImage, this.name),
+        TrackImageRestorationPlugin(this.editor, restoreImage, this.name),
       ];
     },
 
     onCreate(this) {
       const imageSources = new Set<string>();
       this.editor.state.doc.descendants((node) => {
-        if (node.type.name === IMAGE_NODE_TYPE) {
+        if (node.type.name === this.name) {
           imageSources.add(node.attrs.src);
         }
       });
@@ -64,4 +60,9 @@ export const ImageExtension = (deleteImage: DeleteImage, restoreImage: RestoreIm
         },
       };
     },
+
+    // render custom image node
+    addNodeView() {
+      return ReactNodeViewRenderer(CustomImageNode);
+    },
   });

packages/editor/src/core/extensions/image/image-component-without-props.tsx

@@ -0,0 +1,55 @@
+import { mergeAttributes } from "@tiptap/core";
+import { Image } from "@tiptap/extension-image";
+// extensions
+import { UploadImageExtensionStorage } from "@/extensions";
+
+export const CustomImageComponentWithoutProps = () =>
+  Image.extend<Record<string, unknown>, UploadImageExtensionStorage>({
+    name: "imageComponent",
+    selectable: true,
+    group: "block",
+    atom: true,
+    draggable: true,
+
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        width: {
+          default: "35%",
+        },
+        src: {
+          default: null,
+        },
+        height: {
+          default: "auto",
+        },
+        ["id"]: {
+          default: null,
+        },
+        aspectRatio: {
+          default: null,
+        },
+      };
+    },
+
+    parseHTML() {
+      return [
+        {
+          tag: "image-component",
+        },
+      ];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+      return ["image-component", mergeAttributes(HTMLAttributes)];
+    },
+
+    addStorage() {
+      return {
+        fileMap: new Map(),
+        deletedImageSet: new Map<string, boolean>(),
+      };
+    },
+  });
+
+export default CustomImageComponentWithoutProps;

packages/editor/src/core/extensions/image/image-resize.tsx

@@ -1,85 +0,0 @@
-import { useState } from "react";
-import { Editor } from "@tiptap/react";
-import Moveable from "react-moveable";
-
-type Props = {
-  editor: Editor;
-  id: string;
-};
-
-const getImageElement = (editorId: string): HTMLImageElement | null =>
-  document.querySelector(`#editor-container-${editorId}.active-editor .ProseMirror-selectednode`);
-
-export const ImageResizer = (props: Props) => {
-  const { editor, id } = props;
-  // states
-  const [aspectRatio, setAspectRatio] = useState(1);
-
-  const updateMediaSize = () => {
-    const imageElement = getImageElement(id);
-
-    if (!imageElement) return;
-
-    const selection = editor.state.selection;
-
-    // Use the style width/height if available, otherwise fall back to the element's natural width/height
-    const width = imageElement.style.width
-      ? Number(imageElement.style.width.replace("px", ""))
-      : imageElement.getAttribute("width");
-    const height = imageElement.style.height
-      ? Number(imageElement.style.height.replace("px", ""))
-      : imageElement.getAttribute("height");
-
-    editor.commands.setImage({
-      src: imageElement.src,
-      width: width,
-      height: height,
-    } as any);
-    editor.commands.setNodeSelection(selection.from);
-  };
-
-  return (
-    <Moveable
-      target={getImageElement(id)}
-      container={null}
-      origin={false}
-      edge={false}
-      throttleDrag={0}
-      keepRatio
-      resizable
-      throttleResize={0}
-      onResizeStart={() => {
-        const imageElement = getImageElement(id);
-        if (imageElement) {
-          const originalWidth = Number(imageElement.width);
-          const originalHeight = Number(imageElement.height);
-          setAspectRatio(originalWidth / originalHeight);
-        }
-      }}
-      onResize={({ target, width, height, delta }) => {
-        if (delta[0] || delta[1]) {
-          let newWidth, newHeight;
-          if (delta[0]) {
-            // Width change detected
-            newWidth = Math.max(width, 100);
-            newHeight = newWidth / aspectRatio;
-          } else if (delta[1]) {
-            // Height change detected
-            newHeight = Math.max(height, 100);
-            newWidth = newHeight * aspectRatio;
-          }
-          target.style.width = `${newWidth}px`;
-          target.style.height = `${newHeight}px`;
-        }
-      }}
-      onResizeEnd={() => {
-        updateMediaSize();
-      }}
-      scalable
-      renderDirections={["se"]}
-      onScale={({ target, transform }) => {
-        target.style.transform = transform;
-      }}
-    />
-  );
-};

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

@@ -1,4 +1,3 @@
 export * from "./extension";
 export * from "./image-extension-without-props";
-export * from "./image-resize";
 export * from "./read-only-image";

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

@@ -1,4 +1,7 @@
 import Image from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+// extensions
+import { CustomImageNode } from "@/extensions";
 
 export const ReadOnlyImageExtension = Image.extend({
   addAttributes() {
@@ -12,4 +15,7 @@ export const ReadOnlyImageExtension = Image.extend({
       },
     };
   },
+  addNodeView() {
+    return ReactNodeViewRenderer(CustomImageNode);
+  },
 });

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

@@ -1,5 +1,6 @@
 export * from "./code";
 export * from "./code-inline";
+export * from "./custom-image";
 export * from "./custom-link";
 export * from "./custom-list-keymap";
 export * from "./image";
@@ -18,3 +19,4 @@ export * from "./quote";
 export * from "./read-only-extensions";
 export * from "./side-menu";
 export * from "./slash-commands";
+export * from "./headers";

packages/editor/src/core/extensions/mentions/mention-node-view.tsx

@@ -1,6 +1,7 @@
 // TODO: fix all warnings
 
 /* eslint-disable react/display-name */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import { useEffect, useState } from "react";
 import { NodeViewWrapper } from "@tiptap/react";

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

@@ -19,6 +19,8 @@ import {
   TableRow,
   Table,
   CustomMention,
+  HeadingListExtension,
+  CustomReadOnlyImageExtension,
 } from "@/extensions";
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
@@ -74,6 +76,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
       class: "rounded-md",
     },
   }),
+  CustomReadOnlyImageExtension(),
   TiptapUnderline,
   TextStyle,
   TaskList.configure({
@@ -106,4 +109,5 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
     readonly: true,
   }),
   CharacterCount,
+  HeadingListExtension,
 ];

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

@@ -3,7 +3,7 @@ import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { EditorView } from "@tiptap/pm/view";
 // plugins
 import { AIHandlePlugin } from "@/plugins/ai-handle";
-import { DragHandlePlugin } from "@/plugins/drag-handle";
+import { DragHandlePlugin, nodeDOMAtCoords } from "@/plugins/drag-handle";
 
 type Props = {
   aiEnabled: boolean;
@@ -59,41 +59,6 @@ const absoluteRect = (node: Element) => {
   };
 };
 
-const nodeDOMAtCoords = (coords: { x: number; y: number }) => {
-  const elements = document.elementsFromPoint(coords.x, coords.y);
-  const generalSelectors = [
-    "li",
-    "p:not(:first-child)",
-    ".code-block",
-    "blockquote",
-    "img",
-    "h1, h2, h3, h4, h5, h6",
-    "[data-type=horizontalRule]",
-    ".table-wrapper",
-    ".issue-embed",
-  ].join(", ");
-
-  for (const elem of elements) {
-    if (elem.matches("p:first-child") && elem.parentElement?.matches(".ProseMirror")) {
-      return elem;
-    }
-
-    // if the element is a <p> tag that is the first child of a td or th
-    if (
-      (elem.matches("td > p:first-child") || elem.matches("th > p:first-child")) &&
-      elem?.textContent?.trim() !== ""
-    ) {
-      return elem; // Return only if p tag is not empty in td or th
-    }
-
-    // apply general selector
-    if (elem.matches(generalSelectors)) {
-      return elem;
-    }
-  }
-  return null;
-};
-
 const SideMenu = (options: SideMenuPluginProps) => {
   const { handlesConfig } = options;
   const editorSideMenu: HTMLDivElement | null = document.createElement("div");
@@ -113,10 +78,11 @@ const SideMenu = (options: SideMenuPluginProps) => {
       hideSideMenu();
       view?.dom.parentElement?.appendChild(editorSideMenu);
       // side menu elements' initialization
-      if (handlesConfig.ai) {
+      if (handlesConfig.ai && !editorSideMenu.querySelector("#ai-handle")) {
         aiHandleView(view, editorSideMenu);
       }
-      if (handlesConfig.dragDrop) {
+
+      if (handlesConfig.dragDrop && !editorSideMenu.querySelector("#drag-handle")) {
         dragHandleView(view, editorSideMenu);
       }
 
@@ -148,6 +114,10 @@ const SideMenu = (options: SideMenuPluginProps) => {
           rect.top += (lineHeight - 20) / 2;
           rect.top += paddingTop;
 
+          if (handlesConfig.ai) {
+            rect.left -= 20;
+          }
+
           if (node.parentElement?.parentElement?.matches("td") || node.parentElement?.parentElement?.matches("th")) {
             if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
               rect.left -= 5;

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

@@ -28,16 +28,16 @@ import {
   toggleBulletList,
   toggleOrderedList,
   toggleTaskList,
-  insertImageCommand,
   toggleHeadingOne,
   toggleHeadingTwo,
   toggleHeadingThree,
   toggleHeadingFour,
   toggleHeadingFive,
   toggleHeadingSix,
+  insertImage,
 } from "@/helpers/editor-commands";
 // types
-import { CommandProps, ISlashCommandItem, UploadImage } from "@/types";
+import { CommandProps, ISlashCommandItem } from "@/types";
 
 interface CommandItemProps {
   key: string;
@@ -63,7 +63,7 @@ const Command = Extension.create<SlashCommandOptions>({
           const { selection } = editor.state;
 
           const parentNode = selection.$from.node(selection.$from.depth);
-          const blockType = parentNode?.type?.name;
+          const blockType = parentNode.type.name;
 
           if (blockType === "codeBlock") {
             return false;
@@ -89,7 +89,7 @@ const Command = Extension.create<SlashCommandOptions>({
 });
 
 const getSuggestionItems =
-  (uploadFile: UploadImage, additionalOptions?: Array<ISlashCommandItem>) =>
+  (additionalOptions?: Array<ISlashCommandItem>) =>
   ({ query }: { query: string }) => {
     let slashCommands: ISlashCommandItem[] = [
       {
@@ -224,12 +224,10 @@ const getSuggestionItems =
       {
         key: "image",
         title: "Image",
-        description: "Upload an image from your computer.",
-        searchTerms: ["img", "photo", "picture", "media"],
         icon: <ImageIcon className="size-3.5" />,
-        command: ({ editor, range }: CommandProps) => {
-          insertImageCommand(editor, uploadFile, null, range);
-        },
+        description: "Insert an image",
+        searchTerms: ["img", "photo", "picture", "media", "upload"],
+        command: ({ editor, range }: CommandProps) => insertImage({ editor, event: "insert", range }),
       },
       {
         key: "divider",
@@ -415,10 +413,10 @@ const renderItems = () => {
   };
 };
 
-export const SlashCommand = (uploadFile: UploadImage, additionalOptions?: Array<ISlashCommandItem>) =>
+export const SlashCommand = (additionalOptions?: Array<ISlashCommandItem>) =>
   Command.configure({
     suggestion: {
-      items: getSuggestionItems(uploadFile, additionalOptions),
+      items: getSuggestionItems(additionalOptions),
       render: renderItems,
     },
   });

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

@@ -198,6 +198,7 @@ function createToolbox({
   onSelectColor: (color: { backgroundColor: string; textColor: string }) => void;
   colors: { [key: string]: { backgroundColor: string; textColor: string; icon?: string } };
 }): Instance<Props> {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-expect-error
   const toolbox = tippy(triggerButton, {
     content: h(

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

@@ -204,11 +204,8 @@ export const Table = Node.create({
         ({ tr, dispatch }) => {
           if (dispatch) {
             const selection = CellSelection.create(tr.doc, position.anchorCell, position.headCell);
-
-            // @ts-ignore
             tr.setSelection(selection);
           }
-
           return true;
         },
     };
@@ -247,7 +244,7 @@ export const Table = 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 as any, editor, getPos as () => number);
     };
   },
 
@@ -267,8 +264,6 @@ export const Table = Node.create({
           handleWidth: this.options.handleWidth,
           cellMinWidth: this.options.cellMinWidth,
           // View: TableView,
-
-          // @ts-ignore
           lastColumnResizable: this.options.lastColumnResizable,
         })
       );

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

@@ -1,4 +1,4 @@
-import { Fragment, Node as ProsemirrorNode, NodeType } from "prosemirror-model";
+import { Fragment, Node as ProsemirrorNode, NodeType } from "@tiptap/pm/model";
 
 export function createCell(
   cellType: NodeType,

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

@@ -1,4 +1,4 @@
-import { NodeType, Schema } from "prosemirror-model";
+import { NodeType, Schema } from "@tiptap/pm/model";
 
 export function getTableNodeTypes(schema: Schema): { [key: string]: NodeType } {
   if (schema.cached.tableNodeTypes) {

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

@@ -1,13 +1,10 @@
 import { Editor, Range } from "@tiptap/core";
-import { Selection } from "@tiptap/pm/state";
 // extensions
 import { replaceCodeWithText } from "@/extensions/code/utils/replace-code-block-with-text";
 // helpers
 import { findTableAncestor } from "@/helpers/common";
-// plugins
-import { startImageUpload } from "@/plugins/image";
 // types
-import { UploadImage } from "@/types";
+import { InsertImageComponentProps } from "@/extensions";
 
 export const setText = (editor: Editor, range?: Range) => {
   if (range) editor.chain().focus().deleteRange(range).clearNodes().run();
@@ -129,6 +126,27 @@ export const insertTableCommand = (editor: Editor, range?: Range) => {
   else editor.chain().focus().clearNodes().insertTable({ rows: 3, cols: 3 }).run();
 };
 
+export const insertImage = ({
+  editor,
+  event,
+  pos,
+  file,
+  range,
+}: {
+  editor: Editor;
+  event: "insert" | "drop";
+  pos?: number | null;
+  file?: File;
+  range?: Range;
+}) => {
+  if (range) editor.chain().focus().deleteRange(range).run();
+
+  const imageOptions: InsertImageComponentProps = { event };
+  if (pos) imageOptions.pos = pos;
+  if (file) imageOptions.file = file;
+  return editor?.chain().focus().insertImageComponent(imageOptions).run();
+};
+
 export const unsetLinkEditor = (editor: Editor) => {
   editor.chain().focus().unsetLink().run();
 };
@@ -136,23 +154,3 @@ export const unsetLinkEditor = (editor: Editor) => {
 export const setLinkEditor = (editor: Editor, url: string) => {
   editor.chain().focus().setLink({ href: url }).run();
 };
-
-export const insertImageCommand = (
-  editor: Editor,
-  uploadFile: UploadImage,
-  savedSelection?: Selection | null,
-  range?: Range
-) => {
-  if (range) editor.chain().focus().deleteRange(range).run();
-  const input = document.createElement("input");
-  input.type = "file";
-  input.accept = ".jpeg, .jpg, .png, .webp";
-  input.onchange = async () => {
-    if (input.files?.length) {
-      const file = input.files[0];
-      const pos = savedSelection?.anchor ?? editor.view.state.selection.from;
-      startImageUpload(editor, file, editor.view, pos, uploadFile);
-    }
-  };
-  input.click();
-};

packages/editor/src/core/helpers/yjs.ts

@@ -1,76 +1,16 @@
-import { Schema } from "@tiptap/pm/model";
-import { prosemirrorJSONToYDoc } from "y-prosemirror";
 import * as Y from "yjs";
 
-const defaultSchema: Schema = new Schema({
-  nodes: {
-    text: {},
-    doc: { content: "text*" },
-  },
-});
-
-/**
- * @description converts ProseMirror JSON to Yjs document
- * @param document prosemirror JSON
- * @param fieldName
- * @param schema
- * @returns {Y.Doc} Yjs document
- */
-export const proseMirrorJSONToBinaryString = (
-  document: any,
-  fieldName: string | Array<string> = "default",
-  schema?: Schema
-): string => {
-  if (!document) {
-    throw new Error(
-      `You've passed an empty or invalid document to the Transformer. Make sure to pass ProseMirror-compatible JSON. Actually passed JSON: ${document}`
-    );
-  }
-
-  // allow a single field name
-  if (typeof fieldName === "string") {
-    const yDoc = prosemirrorJSONToYDoc(schema ?? defaultSchema, document, fieldName);
-    const docAsUint8Array = Y.encodeStateAsUpdate(yDoc);
-    const base64Doc = Buffer.from(docAsUint8Array).toString("base64");
-    return base64Doc;
-  }
-
-  const yDoc = new Y.Doc();
-
-  fieldName.forEach((field) => {
-    const update = Y.encodeStateAsUpdate(prosemirrorJSONToYDoc(schema ?? defaultSchema, document, field));
-
-    Y.applyUpdate(yDoc, update);
-  });
-
-  const docAsUint8Array = Y.encodeStateAsUpdate(yDoc);
-  const base64Doc = Buffer.from(docAsUint8Array).toString("base64");
-
-  return base64Doc;
-};
-
 /**
  * @description apply updates to a doc and return the updated doc in base64(binary) format
  * @param {Uint8Array} document
  * @param {Uint8Array} updates
  * @returns {string} base64(binary) form of the updated doc
  */
-export const applyUpdates = (document: Uint8Array, updates: Uint8Array): string => {
+export const applyUpdates = (document: Uint8Array, updates: Uint8Array): Uint8Array => {
   const yDoc = new Y.Doc();
   Y.applyUpdate(yDoc, document);
   Y.applyUpdate(yDoc, updates);
 
   const encodedDoc = Y.encodeStateAsUpdate(yDoc);
-  const base64Updates = Buffer.from(encodedDoc).toString("base64");
-  return base64Updates;
-};
-
-/**
- * @description merge multiple updates into one single update
- * @param {Uint8Array[]} updates
- * @returns {Uint8Array} merged updates
- */
-export const mergeUpdates = (updates: Uint8Array[]): Uint8Array => {
-  const mergedUpdates = Y.mergeUpdates(updates);
-  return mergedUpdates;
+  return encodedDoc;
 };

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

@@ -1,9 +1,9 @@
-import { useEffect, useLayoutEffect, useMemo } from "react";
+import { useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import Collaboration from "@tiptap/extension-collaboration";
 import { IndexeddbPersistence } from "y-indexeddb";
 // extensions
-import { SideMenuExtension } from "@/extensions";
+import { HeadingListExtension, SideMenuExtension } from "@/extensions";
 // hooks
 import { useEditor } from "@/hooks/use-editor";
 // plane editor extensions
@@ -29,6 +29,9 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
     tabIndex,
     user,
   } = props;
+  // states
+  const [hasServerConnectionFailed, setHasServerConnectionFailed] = useState(false);
+  const [hasServerSynced, setHasServerSynced] = useState(false);
   // initialize Hocuspocus provider
   const provider = useMemo(
     () =>
@@ -38,11 +41,18 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
         // using user id as a token to verify the user on the server
         token: user.id,
         url: realtimeConfig.url,
-        onAuthenticationFailed: () => serverHandler?.onServerError?.(),
+        onAuthenticationFailed: () => {
+          serverHandler?.onServerError?.();
+          setHasServerConnectionFailed(true);
+        },
         onConnect: () => serverHandler?.onConnect?.(),
         onClose: (data) => {
-          if (data.event.code === 1006) serverHandler?.onServerError?.();
+          if (data.event.code === 1006) {
+            serverHandler?.onServerError?.();
+            setHasServerConnectionFailed(true);
+          }
         },
+        onSynced: () => setHasServerSynced(true),
       }),
     [id, realtimeConfig, serverHandler, user.id]
   );
@@ -68,30 +78,35 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
     editorProps,
     editorClassName,
     enableHistory: false,
-    fileHandler,
-    handleEditorReady,
-    forwardedRef,
-    mentionHandler,
     extensions: [
       SideMenuExtension({
         aiEnabled: !disabledExtensions?.includes("ai"),
         dragDropEnabled: true,
       }),
+      HeadingListExtension,
       Collaboration.configure({
         document: provider.document,
       }),
       ...(extensions ?? []),
       ...DocumentEditorAdditionalExtensions({
         disabledExtensions,
-        fileHandler,
         issueEmbedConfig: embedHandler?.issue,
         provider,
         userDetails: user,
       }),
     ],
+    fileHandler,
+    handleEditorReady,
+    forwardedRef,
+    mentionHandler,
     placeholder,
+    provider,
     tabIndex,
   });
 
-  return { editor };
+  return {
+    editor,
+    hasServerConnectionFailed,
+    hasServerSynced,
+  };
 };

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

@@ -1,8 +1,10 @@
 import { useImperativeHandle, useRef, MutableRefObject, useState, useEffect } from "react";
+import { HocuspocusProvider } from "@hocuspocus/provider";
 import { DOMSerializer } from "@tiptap/pm/model";
 import { Selection } from "@tiptap/pm/state";
 import { EditorProps } from "@tiptap/pm/view";
 import { useEditor as useTiptapEditor, Editor } from "@tiptap/react";
+import * as Y from "yjs";
 // components
 import { getEditorMenuItems } from "@/components/menus";
 // extensions
@@ -32,6 +34,7 @@ export interface CustomEditorProps {
   };
   onChange?: (json: object, html: string) => void;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
+  provider?: HocuspocusProvider;
   tabIndex?: number;
   // undefined when prop is not passed, null if intentionally passed to stop
   // swr syncing
@@ -52,10 +55,12 @@ export const useEditor = (props: CustomEditorProps) => {
     mentionHandler,
     onChange,
     placeholder,
+    provider,
     tabIndex,
     value,
   } = props;
   // states
+
   const [savedSelection, setSavedSelection] = useState<Selection | null>(null);
   // refs
   const editorRef: MutableRefObject<Editor | null> = useRef(null);
@@ -78,7 +83,7 @@ export const useEditor = (props: CustomEditorProps) => {
         },
         mentionConfig: {
           mentionSuggestions: mentionHandler.suggestions ?? (() => Promise.resolve<IMentionSuggestion[]>([])),
-          mentionHighlights: mentionHandler.highlights ?? [],
+          mentionHighlights: mentionHandler.highlights,
         },
         placeholder,
         tabIndex,
@@ -91,6 +96,7 @@ export const useEditor = (props: CustomEditorProps) => {
     onUpdate: ({ editor }) => onChange?.(editor.getJSON(), editor.getHTML()),
     onDestroy: () => handleEditorReady?.(false),
   });
+
   // Update the ref whenever savedSelection changes
   useEffect(() => {
     savedSelectionRef.current = savedSelection;
@@ -101,7 +107,7 @@ export const useEditor = (props: CustomEditorProps) => {
     // value is null when intentionally passed where syncing is not yet
     // supported and value is undefined when the data from swr is not populated
     if (value === null || value === undefined) return;
-    if (editor && !editor.isDestroyed && !editor.storage.image.uploadInProgress) {
+    if (editor && !editor.isDestroyed && !editor.storage.imageComponent.uploadInProgress) {
       try {
         editor.commands.setContent(value, false, { preserveWhitespace: "full" });
         const currentSavedSelection = savedSelectionRef.current;
@@ -123,7 +129,7 @@ export const useEditor = (props: CustomEditorProps) => {
         editorRef.current?.commands.clearContent(emitUpdate);
       },
       setEditorValue: (content: string) => {
-        editorRef.current?.commands.setContent(content);
+        editorRef.current?.commands.setContent(content, false, { preserveWhitespace: "full" });
       },
       setEditorValueAtCursorPosition: (content: string) => {
         if (savedSelection) {
@@ -131,7 +137,7 @@ export const useEditor = (props: CustomEditorProps) => {
         }
       },
       executeMenuItemCommand: (itemKey: TEditorCommands) => {
-        const editorItems = getEditorMenuItems(editorRef.current, fileHandler.upload);
+        const editorItems = getEditorMenuItems(editorRef.current);
 
         const getEditorMenuItem = (itemKey: TEditorCommands) => editorItems.find((item) => item.key === itemKey);
 
@@ -147,17 +153,31 @@ export const useEditor = (props: CustomEditorProps) => {
         }
       },
       isMenuItemActive: (itemName: TEditorCommands): boolean => {
-        const editorItems = getEditorMenuItems(editorRef.current, fileHandler.upload);
+        const editorItems = getEditorMenuItems(editorRef.current);
 
         const getEditorMenuItem = (itemName: TEditorCommands) => editorItems.find((item) => item.key === itemName);
         const item = getEditorMenuItem(itemName);
         return item ? item.isActive() : false;
       },
+      onHeadingChange: (callback: (headings: IMarking[]) => void) => {
+        // Subscribe to update event emitted from headers extension
+        editorRef.current?.on("update", () => {
+          callback(editorRef.current?.storage.headingList.headings);
+        });
+        // Return a function to unsubscribe to the continuous transactions of
+        // the editor on unmounting the component that has subscribed to this
+        // method
+        return () => {
+          editorRef.current?.off("update");
+        };
+      },
+      getHeadings: () => editorRef?.current?.storage.headingList.headings,
       onStateChange: (callback: () => void) => {
         // Subscribe to editor state changes
         editorRef.current?.on("transaction", () => {
           callback();
         });
+
         // Return a function to unsubscribe to the continuous transactions of
         // the editor on unmounting the component that has subscribed to this
         // method
@@ -169,15 +189,22 @@ export const useEditor = (props: CustomEditorProps) => {
         const markdownOutput = editorRef.current?.storage.markdown.getMarkdown();
         return markdownOutput;
       },
-      getHTML: (): string => {
-        const htmlOutput = editorRef.current?.getHTML() ?? "<p></p>";
-        return htmlOutput;
+      getDocument: () => {
+        const documentBinary = provider?.document ? Y.encodeStateAsUpdate(provider?.document) : null;
+        const documentHTML = editorRef.current?.getHTML() ?? "<p></p>";
+        const documentJSON = editorRef.current?.getJSON() ?? null;
+
+        return {
+          binary: documentBinary,
+          html: documentHTML,
+          json: documentJSON,
+        };
       },
       scrollSummary: (marking: IMarking): void => {
         if (!editorRef.current) return;
         scrollSummary(editorRef.current, marking);
       },
-      isEditorReadyToDiscard: () => editorRef.current?.storage.image.uploadInProgress === false,
+      isEditorReadyToDiscard: () => editorRef.current?.storage.imageComponent.uploadInProgress === false,
       setFocusAtPosition: (position: number) => {
         if (!editorRef.current || editorRef.current.isDestroyed) {
           console.error("Editor reference is not available or has been destroyed.");
@@ -214,31 +241,39 @@ export const useEditor = (props: CustomEditorProps) => {
           }
         });
         const selection = nodesArray.join("");
-        console.log(selection);
         return selection;
       },
       insertText: (contentHTML, insertOnNextLine) => {
-        if (!editor) return;
+        if (!editorRef.current) return;
         // get selection
-        const { from, to, empty } = editor.state.selection;
+        const { from, to, empty } = editorRef.current.state.selection;
         if (empty) return;
         if (insertOnNextLine) {
           // move cursor to the end of the selection and insert a new line
-          editor.chain().focus().setTextSelection(to).insertContent("<br />").insertContent(contentHTML).run();
+          editorRef.current
+            .chain()
+            .focus()
+            .setTextSelection(to)
+            .insertContent("<br />")
+            .insertContent(contentHTML)
+            .run();
         } else {
           // replace selected text with the content provided
-          editor.chain().focus().deleteRange({ from, to }).insertContent(contentHTML).run();
+          editorRef.current.chain().focus().deleteRange({ from, to }).insertContent(contentHTML).run();
         }
       },
-      getDocumentInfo: () => {
-        return {
-          characters: editorRef?.current?.storage?.characterCount?.characters?.() ?? 0,
-          paragraphs: getParagraphCount(editorRef?.current?.state),
-          words: editorRef?.current?.storage?.characterCount?.words?.() ?? 0,
-        };
+      getDocumentInfo: () => ({
+        characters: editorRef?.current?.storage?.characterCount?.characters?.() ?? 0,
+        paragraphs: getParagraphCount(editorRef?.current?.state),
+        words: editorRef?.current?.storage?.characterCount?.words?.() ?? 0,
+      }),
+      setProviderDocument: (value) => {
+        const document = provider?.document;
+        if (!document) return;
+        Y.applyUpdate(document, value);
       },
     }),
-    [editorRef, savedSelection, fileHandler.upload]
+    [editorRef, savedSelection]
   );
 
   if (!editor) {

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

@@ -0,0 +1,145 @@
+import { DragEvent, useCallback, useEffect, useState } from "react";
+import { Editor } from "@tiptap/core";
+import { isFileValid } from "@/plugins/image";
+
+export const useUploader = ({
+  onUpload,
+  editor,
+  loadImageFromFileSystem,
+}: {
+  onUpload: (url: string) => void;
+  editor: Editor;
+  loadImageFromFileSystem: (file: string) => void;
+}) => {
+  const [uploading, setUploading] = useState(false);
+
+  const uploadFile = useCallback(
+    async (file: File) => {
+      const setImageUploadInProgress = (isUploading: boolean) => {
+        editor.storage.imageComponent.uploadInProgress = isUploading;
+      };
+      setImageUploadInProgress(true);
+      setUploading(true);
+      const fileNameTrimmed = trimFileName(file.name);
+      const fileWithTrimmedName = new File([file], fileNameTrimmed, { type: file.type });
+      const isValid = isFileValid(fileWithTrimmedName);
+      if (!isValid) {
+        setImageUploadInProgress(false);
+        return;
+      }
+      try {
+        const reader = new FileReader();
+        reader.onload = () => {
+          if (reader.result) {
+            loadImageFromFileSystem(reader.result as string);
+          } else {
+            console.error("Failed to read the file: reader.result is null");
+          }
+        };
+        reader.onerror = () => {
+          console.error("Error reading file");
+        };
+        reader.readAsDataURL(fileWithTrimmedName);
+        // @ts-expect-error - TODO: fix typings, and don't remove await from
+        // here for now
+        const url: string = await editor?.commands.uploadImage(fileWithTrimmedName);
+
+        if (!url) {
+          throw new Error("Something went wrong while uploading the image");
+        }
+        onUpload(url);
+      } catch (errPayload: any) {
+        console.log(errPayload);
+        const error = errPayload?.response?.data?.error || "Something went wrong";
+        console.error(error);
+      } finally {
+        setImageUploadInProgress(false);
+        setUploading(false);
+      }
+    },
+    [onUpload]
+  );
+
+  return { uploading, uploadFile };
+};
+
+export const useDropZone = ({ uploader }: { uploader: (file: File) => void }) => {
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [draggedInside, setDraggedInside] = useState<boolean>(false);
+
+  useEffect(() => {
+    const dragStartHandler = () => {
+      setIsDragging(true);
+    };
+
+    const dragEndHandler = () => {
+      setIsDragging(false);
+    };
+
+    document.body.addEventListener("dragstart", dragStartHandler);
+    document.body.addEventListener("dragend", dragEndHandler);
+
+    return () => {
+      document.body.removeEventListener("dragstart", dragStartHandler);
+      document.body.removeEventListener("dragend", dragEndHandler);
+    };
+  }, []);
+
+  const onDrop = useCallback(
+    (e: DragEvent<HTMLDivElement>) => {
+      setDraggedInside(false);
+      if (e.dataTransfer.files.length === 0) {
+        return;
+      }
+
+      const fileList = e.dataTransfer.files;
+
+      const files: File[] = [];
+
+      for (let i = 0; i < fileList.length; i += 1) {
+        const item = fileList.item(i);
+        if (item) {
+          files.push(item);
+        }
+      }
+
+      if (files.some((file) => file.type.indexOf("image") === -1)) {
+        return;
+      }
+
+      e.preventDefault();
+
+      const filteredFiles = files.filter((f) => f.type.indexOf("image") !== -1);
+
+      const file = filteredFiles.length > 0 ? filteredFiles[0] : undefined;
+
+      if (file) {
+        uploader(file);
+      } else {
+        console.error("No file found");
+      }
+    },
+    [uploader]
+  );
+
+  const onDragEnter = () => {
+    setDraggedInside(true);
+  };
+
+  const onDragLeave = () => {
+    setDraggedInside(false);
+  };
+
+  return { isDragging, draggedInside, onDragEnter, onDragLeave, onDrop };
+};
+
+function trimFileName(fileName: string, maxLength = 100) {
+  if (fileName.length > maxLength) {
+    const extension = fileName.split(".").pop();
+    const nameWithoutExtension = fileName.slice(0, -(extension?.length ?? 0 + 1));
+    const allowedNameLength = maxLength - (extension?.length ?? 0) - 1; // -1 for the dot
+    return `${nameWithoutExtension.slice(0, allowedNameLength)}.${extension}`;
+  }
+
+  return fileName;
+}