fix: loading of images

* fix: image resize fixed for initial render

* fix: working image resize with mousemove handler only inside the editor

* fix: unnecessary calc

* fix: setting state to true

.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

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

@@ -2,11 +2,12 @@
 
 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 {}
 

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/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

@@ -12,9 +12,10 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.19",
+    "@plane/constants": "*",
+    "@plane/helpers": "*",
     "@plane/types": "*",
     "@plane/ui": "*",
-    "@plane/constants": "*",
     "@tailwindcss/typography": "^0.5.9",
     "@types/lodash": "^4.17.0",
     "autoprefixer": "10.4.14",
@@ -45,6 +46,6 @@
     "eslint-config-custom": "*",
     "tailwind-config-custom": "*",
     "tsconfig": "*",
-    "typescript": "^5.4.2"
+    "typescript": "5.4.5"
   }
 }

apiserver/plane/api/views/inbox.py

@@ -210,7 +210,7 @@ class InboxIssueAPIEndpoint(BaseAPIView):
         )
 
         # Only project members admins and created_by users can access this endpoint
-        if project_member.role <= 10 and str(inbox_issue.created_by_id) != str(
+        if project_member.role <= 5 and str(inbox_issue.created_by_id) != str(
             request.user.id
         ):
             return Response(
@@ -244,9 +244,8 @@ class InboxIssueAPIEndpoint(BaseAPIView):
                 workspace__slug=slug,
                 project_id=project_id,
             )
-            # Only allow guests and viewers to edit name and description
-            if project_member.role <= 10:
-                # viewers and guests since only viewers and guests
+            # Only allow guests to edit name and description
+            if project_member.role <= 5:
                 issue_data = {
                     "name": issue_data.get("name", issue.name),
                     "description_html": issue_data.get(
@@ -286,7 +285,7 @@ class InboxIssueAPIEndpoint(BaseAPIView):
                 )
 
         # Only project admins and members can edit inbox issue attributes
-        if project_member.role > 10:
+        if project_member.role > 5:
             serializer = InboxIssueSerializer(
                 inbox_issue, data=request.data, partial=True
             )

apiserver/plane/api/views/member.py

@@ -133,7 +133,7 @@ class ProjectMemberAPIEndpoint(BaseAPIView):
             workspace_member = WorkspaceMember.objects.create(
                 workspace=workspace,
                 member=user,
-                role=request.data.get("role", 10),
+                role=request.data.get("role", 5),
             )
             workspace_member.save()
 
@@ -142,7 +142,7 @@ class ProjectMemberAPIEndpoint(BaseAPIView):
             project_member = ProjectMember.objects.create(
                 project=project,
                 member=user,
-                role=request.data.get("role", 10),
+                role=request.data.get("role", 5),
             )
             project_member.save()
 

apiserver/plane/app/permissions/base.py

@@ -8,7 +8,6 @@ from enum import Enum
 class ROLE(Enum):
     ADMIN = 20
     MEMBER = 15
-    VIEWER = 10
     GUEST = 5
 
 

apiserver/plane/app/permissions/project.py

@@ -7,7 +7,6 @@ from plane.db.models import ProjectMember, WorkspaceMember
 # Permission Mappings
 Admin = 20
 Member = 15
-Viewer = 10
 Guest = 5
 
 

apiserver/plane/app/permissions/workspace.py

@@ -6,9 +6,8 @@ from plane.db.models import WorkspaceMember
 
 
 # Permission Mappings
-Owner = 20
-Admin = 15
-Member = 10
+Admin = 20
+Member = 15
 Guest = 5
 
 
@@ -31,7 +30,7 @@ class WorkSpaceBasePermission(BasePermission):
             return WorkspaceMember.objects.filter(
                 member=request.user,
                 workspace__slug=view.workspace_slug,
-                role__in=[Owner, Admin],
+                role__in=[Admin, Member],
                 is_active=True,
             ).exists()
 
@@ -40,7 +39,7 @@ class WorkSpaceBasePermission(BasePermission):
             return WorkspaceMember.objects.filter(
                 member=request.user,
                 workspace__slug=view.workspace_slug,
-                role=Owner,
+                role=Admin,
                 is_active=True,
             ).exists()
 
@@ -53,7 +52,7 @@ class WorkspaceOwnerPermission(BasePermission):
         return WorkspaceMember.objects.filter(
             workspace__slug=view.workspace_slug,
             member=request.user,
-            role=Owner,
+            role=Admin,
         ).exists()
 
 
@@ -65,7 +64,7 @@ class WorkSpaceAdminPermission(BasePermission):
         return WorkspaceMember.objects.filter(
             member=request.user,
             workspace__slug=view.workspace_slug,
-            role__in=[Owner, Admin],
+            role__in=[Admin, Member],
             is_active=True,
         ).exists()
 
@@ -86,7 +85,7 @@ class WorkspaceEntityPermission(BasePermission):
         return WorkspaceMember.objects.filter(
             member=request.user,
             workspace__slug=view.workspace_slug,
-            role__in=[Owner, Admin],
+            role__in=[Admin, Member],
             is_active=True,
         ).exists()
 

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/views/analytic/base.py

@@ -21,7 +21,11 @@ from plane.app.permissions import allow_permission, ROLE
 class AnalyticsEndpoint(BaseAPIView):
 
     @allow_permission(
-        [ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER], level="WORKSPACE"
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+        ],
+        level="WORKSPACE",
     )
     def get(self, request, slug):
         x_axis = request.GET.get("x_axis", False)
@@ -203,7 +207,11 @@ class AnalyticViewViewset(BaseViewSet):
 class SavedAnalyticEndpoint(BaseAPIView):
 
     @allow_permission(
-        [ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER], level="WORKSPACE"
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+        ],
+        level="WORKSPACE",
     )
     def get(self, request, slug, analytic_id):
         analytic_view = AnalyticView.objects.get(
@@ -236,7 +244,11 @@ class SavedAnalyticEndpoint(BaseAPIView):
 class ExportAnalyticsEndpoint(BaseAPIView):
 
     @allow_permission(
-        [ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER], level="WORKSPACE"
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+        ],
+        level="WORKSPACE",
     )
     def post(self, request, slug):
         x_axis = request.data.get("x_axis", False)
@@ -302,9 +314,7 @@ class ExportAnalyticsEndpoint(BaseAPIView):
 
 class DefaultAnalyticsEndpoint(BaseAPIView):
 
-    @allow_permission(
-        [ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST], level="WORKSPACE"
-    )
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
     def get(self, request, slug):
         filters = issue_filters(request.GET, "GET")
         base_issues = Issue.issue_objects.filter(

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

@@ -288,7 +288,12 @@ class CycleArchiveUnarchiveEndpoint(BaseAPIView):
             .distinct()
         )
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER])
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+        ]
+    )
     def get(self, request, slug, project_id, pk=None):
         if pk is None:
             queryset = (

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

@@ -150,7 +150,7 @@ class CycleViewSet(BaseViewSet):
             .distinct()
         )
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def list(self, request, slug, project_id):
         queryset = self.get_queryset().filter(archived_at__isnull=True)
         cycle_view = request.GET.get("cycle_view", "all")
@@ -370,7 +370,12 @@ class CycleViewSet(BaseViewSet):
             return Response(cycle, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER])
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+        ]
+    )
     def retrieve(self, request, slug, project_id, pk):
         queryset = (
             self.get_queryset().filter(archived_at__isnull=True).filter(pk=pk)
@@ -497,7 +502,6 @@ class CycleViewSet(BaseViewSet):
 
 
 class CycleDateCheckEndpoint(BaseAPIView):
-
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
     def post(self, request, slug, project_id):
         start_date = request.data.get("start_date", False)
@@ -566,7 +570,6 @@ class CycleFavoriteViewSet(BaseViewSet):
 
 
 class TransferCycleIssueEndpoint(BaseAPIView):
-
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
     def post(self, request, slug, project_id, cycle_id):
         new_cycle_id = request.data.get("new_cycle_id", False)
@@ -977,8 +980,7 @@ class TransferCycleIssueEndpoint(BaseAPIView):
 
 
 class CycleUserPropertiesEndpoint(BaseAPIView):
-
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def patch(self, request, slug, project_id, cycle_id):
         cycle_properties = CycleUserProperties.objects.get(
             user=request.user,
@@ -1001,7 +1003,7 @@ class CycleUserPropertiesEndpoint(BaseAPIView):
         serializer = CycleUserPropertiesSerializer(cycle_properties)
         return Response(serializer.data, status=status.HTTP_201_CREATED)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def get(self, request, slug, project_id, cycle_id):
         cycle_properties, _ = CycleUserProperties.objects.get_or_create(
             user=request.user,
@@ -1014,10 +1016,8 @@ class CycleUserPropertiesEndpoint(BaseAPIView):
 
 
 class CycleProgressEndpoint(BaseAPIView):
-
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def get(self, request, slug, project_id, cycle_id):
-
         aggregate_estimates = (
             Issue.issue_objects.filter(
                 estimate_point__estimate__type="points",
@@ -1148,10 +1148,9 @@ class CycleProgressEndpoint(BaseAPIView):
             status=status.HTTP_200_OK,
         )
 
-
 class CycleAnalyticsEndpoint(BaseAPIView):
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def get(self, request, slug, project_id, cycle_id):
         analytic_type = request.GET.get("type", "issues")
         cycle = (

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

@@ -80,7 +80,12 @@ class CycleIssueViewSet(BaseViewSet):
         )
 
     @method_decorator(gzip_page)
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER])
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+        ]
+    )
     def list(self, request, slug, project_id, cycle_id):
         order_by_param = request.GET.get("order_by", "created_at")
         filters = issue_filters(request.query_params, "GET")

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

@@ -52,23 +52,28 @@ from .. import BaseAPIView
 
 
 def dashboard_overview_stats(self, request, slug):
-    extra_filters = {}
-    if WorkspaceMember.objects.filter(
-        workspace__slug=slug,
-        member=request.user,
-        role=5,
-        is_active=True,
-    ).exists():
-        extra_filters = {"created_by": request.user}
-
     assigned_issues = (
         Issue.issue_objects.filter(
             project__project_projectmember__is_active=True,
             project__project_projectmember__member=request.user,
             workspace__slug=slug,
             assignees__in=[request.user],
+        ).filter(
+            Q(
+                project__project_projectmember__role=5,
+                project__guest_view_all_features=True,
+            )
+            | Q(
+                project__project_projectmember__role=5,
+                project__guest_view_all_features=False,
+                created_by=self.request.user,
+            )
+            |
+            # For other roles (role < 5), show all issues
+            Q(project__project_projectmember__role__gt=5),
+            project__project_projectmember__member=self.request.user,
+            project__project_projectmember__is_active=True,
         )
-        .filter(**extra_filters)
         .count()
     )
 
@@ -80,8 +85,22 @@ def dashboard_overview_stats(self, request, slug):
             project__project_projectmember__member=request.user,
             workspace__slug=slug,
             assignees__in=[request.user],
+        ).filter(
+            Q(
+                project__project_projectmember__role=5,
+                project__guest_view_all_features=True,
+            )
+            | Q(
+                project__project_projectmember__role=5,
+                project__guest_view_all_features=False,
+                created_by=self.request.user,
+            )
+            |
+            # For other roles (role < 5), show all issues
+            Q(project__project_projectmember__role__gt=5),
+            project__project_projectmember__member=self.request.user,
+            project__project_projectmember__is_active=True,
         )
-        .filter(**extra_filters)
         .count()
     )
 
@@ -91,8 +110,22 @@ def dashboard_overview_stats(self, request, slug):
             project__project_projectmember__is_active=True,
             project__project_projectmember__member=request.user,
             created_by_id=request.user.id,
+        ).filter(
+            Q(
+                project__project_projectmember__role=5,
+                project__guest_view_all_features=True,
+            )
+            | Q(
+                project__project_projectmember__role=5,
+                project__guest_view_all_features=False,
+                created_by=self.request.user,
+            )
+            |
+            # For other roles (role < 5), show all issues
+            Q(project__project_projectmember__role__gt=5),
+            project__project_projectmember__member=self.request.user,
+            project__project_projectmember__is_active=True,
         )
-        .filter(**extra_filters)
         .count()
     )
 
@@ -103,8 +136,22 @@ def dashboard_overview_stats(self, request, slug):
             project__project_projectmember__member=request.user,
             assignees__in=[request.user],
             state__group="completed",
+        ).filter(
+            Q(
+                project__project_projectmember__role=5,
+                project__guest_view_all_features=True,
+            )
+            | Q(
+                project__project_projectmember__role=5,
+                project__guest_view_all_features=False,
+                created_by=self.request.user,
+            )
+            |
+            # For other roles (role < 5), show all issues
+            Q(project__project_projectmember__role__gt=5),
+            project__project_projectmember__member=self.request.user,
+            project__project_projectmember__is_active=True,
         )
-        .filter(**extra_filters)
         .count()
     )
 

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

@@ -28,7 +28,12 @@ def generate_random_name(length=10):
 
 class ProjectEstimatePointEndpoint(BaseAPIView):
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER])
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+        ]
+    )
     def get(self, request, slug, project_id):
         project = Project.objects.get(workspace__slug=slug, pk=project_id)
         if project.estimate_id is not None:

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

@@ -165,11 +165,12 @@ class InboxIssueViewSet(BaseViewSet):
             )
         ).distinct()
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def list(self, request, slug, project_id):
         inbox_id = Inbox.objects.get(
             workspace__slug=slug, project_id=project_id
         )
+        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,
@@ -338,7 +342,7 @@ class InboxIssueViewSet(BaseViewSet):
             is_active=True,
         )
         # Only project members admins and created_by users can access this endpoint
-        if project_member.role <= 10 and str(inbox_issue.created_by_id) != str(
+        if project_member.role <= 5 and str(inbox_issue.created_by_id) != str(
             request.user.id
         ):
             return Response(
@@ -371,9 +375,8 @@ class InboxIssueViewSet(BaseViewSet):
                 workspace__slug=slug,
                 project_id=project_id,
             )
-            # Only allow guests and viewers to edit name and description
-            if project_member.role <= 10:
-                # viewers and guests since only viewers and guests
+            # Only allow guests to edit name and description
+            if project_member.role <= 5:
                 issue_data = {
                     "name": issue_data.get("name", issue.name),
                     "description_html": issue_data.get(
@@ -415,7 +418,7 @@ class InboxIssueViewSet(BaseViewSet):
                 )
 
         # Only project admins and members can edit inbox issue attributes
-        if project_member.role > 10:
+        if project_member.role > 5:
             serializer = InboxIssueSerializer(
                 inbox_issue, data=request.data, partial=True
             )
@@ -515,7 +518,11 @@ class InboxIssueViewSet(BaseViewSet):
             return Response(serializer, status=status.HTTP_200_OK)
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER],
+        allowed_roles=[
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+            ROLE.GUEST,
+        ],
         creator=True,
         model=Issue,
     )
@@ -523,6 +530,7 @@ class InboxIssueViewSet(BaseViewSet):
         inbox_id = Inbox.objects.get(
             workspace__slug=slug, project_id=project_id
         )
+        project = Project.objects.get(pk=project_id)
         inbox_issue = (
             InboxIssue.objects.select_related("issue")
             .prefetch_related(
@@ -549,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/activity.py

@@ -19,7 +19,11 @@ from plane.app.serializers import (
     IssueActivitySerializer,
     IssueCommentSerializer,
 )
-from plane.app.permissions import ProjectEntityPermission, allow_permission, ROLE
+from plane.app.permissions import (
+    ProjectEntityPermission,
+    allow_permission,
+    ROLE,
+)
 from plane.db.models import (
     IssueActivity,
     IssueComment,
@@ -33,7 +37,13 @@ class IssueActivityEndpoint(BaseAPIView):
     ]
 
     @method_decorator(gzip_page)
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST, ROLE.VIEWER])
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+            ROLE.GUEST,
+        ]
+    )
     def get(self, request, slug, project_id, issue_id):
         filters = {}
         if request.GET.get("created_at__gt", None) is not None:

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

@@ -97,7 +97,12 @@ class IssueArchiveViewSet(BaseViewSet):
         )
 
     @method_decorator(gzip_page)
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER])
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+        ]
+    )
     def list(self, request, slug, project_id):
         filters = issue_filters(request.query_params, "GET")
         show_sub_issues = request.GET.get("show_sub_issues", "true")
@@ -213,7 +218,12 @@ class IssueArchiveViewSet(BaseViewSet):
                 ),
             )
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER])
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+        ]
+    )
     def retrieve(self, request, slug, project_id, pk=None):
         issue = (
             self.get_queryset()

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

@@ -64,7 +64,13 @@ class IssueAttachmentEndpoint(BaseAPIView):
 
         return Response(status=status.HTTP_204_NO_CONTENT)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST, ROLE.VIEWER])
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+            ROLE.GUEST,
+        ]
+    )
     def get(self, request, slug, project_id, issue_id):
         issue_attachments = IssueAttachment.objects.filter(
             issue_id=issue_id, workspace__slug=slug, project_id=project_id

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

@@ -62,7 +62,7 @@ from plane.bgtasks.webhook_task import model_activity
 
 
 class IssueListEndpoint(BaseAPIView):
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def get(self, request, slug, project_id):
         issue_ids = request.GET.get("issues", False)
 
@@ -232,8 +232,9 @@ class IssueViewSet(BaseViewSet):
         ).distinct()
 
     @method_decorator(gzip_page)
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def list(self, request, slug, project_id):
+        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")
 
@@ -264,13 +265,16 @@ class IssueViewSet(BaseViewSet):
             entity_identifier=project_id,
             user_id=request.user.id,
         )
-        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
+        ):
             issue_queryset = issue_queryset.filter(created_by=request.user)
 
         if group_by:
@@ -440,9 +444,17 @@ class IssueViewSet(BaseViewSet):
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     @allow_permission(
-        [ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER], creator=True, model=Issue
+        allowed_roles=[
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+            ROLE.GUEST,
+        ],
+        creator=True,
+        model=Issue,
     )
     def retrieve(self, request, slug, project_id, pk=None):
+        project = Project.objects.get(pk=project_id, workspace__slug=slug)
+
         issue = (
             self.get_queryset()
             .filter(pk=pk)
@@ -511,6 +523,27 @@ class IssueViewSet(BaseViewSet):
                 status=status.HTTP_404_NOT_FOUND,
             )
 
+        """
+        if the role is guest and guest_view_all_features is false and owned by is not 
+        the requesting user then dont show the issue
+        """
+
+        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 view this issue"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
         recent_visited_task.delay(
             slug=slug,
             entity_name="issue",
@@ -522,7 +555,9 @@ class IssueViewSet(BaseViewSet):
         serializer = IssueDetailSerializer(issue, expand=self.expand)
         return Response(serializer.data, status=status.HTTP_200_OK)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], creator=True, model=Issue
+    )
     def partial_update(self, request, slug, project_id, pk=None):
         issue = (
             self.get_queryset()
@@ -618,7 +653,7 @@ class IssueViewSet(BaseViewSet):
 
 
 class IssueUserDisplayPropertyEndpoint(BaseAPIView):
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST, ROLE.VIEWER])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def patch(self, request, slug, project_id):
         issue_property = IssueUserProperty.objects.get(
             user=request.user,
@@ -638,7 +673,13 @@ class IssueUserDisplayPropertyEndpoint(BaseAPIView):
         serializer = IssueUserPropertySerializer(issue_property)
         return Response(serializer.data, status=status.HTTP_201_CREATED)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST, ROLE.VIEWER])
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+            ROLE.GUEST,
+        ]
+    )
     def get(self, request, slug, project_id):
         issue_property, _ = IssueUserProperty.objects.get_or_create(
             user=request.user, project_id=project_id
@@ -719,7 +760,7 @@ class IssuePaginatedViewSet(BaseViewSet):
 
         return paginated_data
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def list(self, request, slug, project_id):
         cursor = request.GET.get("cursor", None)
         is_description_required = request.GET.get("description", False)

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

@@ -16,11 +16,13 @@ from plane.app.serializers import (
     IssueCommentSerializer,
     CommentReactionSerializer,
 )
-from plane.app.permissions import ProjectLitePermission, allow_permission, ROLE
+from plane.app.permissions import allow_permission, ROLE
 from plane.db.models import (
     IssueComment,
     ProjectMember,
     CommentReaction,
+    Project,
+    Issue,
 )
 from plane.bgtasks.issue_activities_task import issue_activity
 
@@ -63,8 +65,31 @@ class IssueCommentViewSet(BaseViewSet):
             .distinct()
         )
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST, ROLE.VIEWER])
+    @allow_permission(
+        [
+            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(
@@ -89,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,
     )
@@ -156,9 +181,6 @@ class IssueCommentViewSet(BaseViewSet):
 class CommentReactionViewSet(BaseViewSet):
     serializer_class = CommentReactionSerializer
     model = CommentReaction
-    permission_classes = [
-        ProjectLitePermission,
-    ]
 
     def get_queryset(self):
         return (
@@ -176,6 +198,13 @@ class CommentReactionViewSet(BaseViewSet):
             .distinct()
         )
 
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+            ROLE.GUEST,
+        ]
+    )
     def create(self, request, slug, project_id, comment_id):
         serializer = CommentReactionSerializer(data=request.data)
         if serializer.is_valid():
@@ -198,6 +227,13 @@ class CommentReactionViewSet(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, comment_id, reaction_code):
         comment_reaction = CommentReaction.objects.get(
             workspace__slug=slug,

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

@@ -43,7 +43,7 @@ class LabelViewSet(BaseViewSet):
     @invalidate_cache(
         path="/api/workspaces/:slug/labels/", url_params=True, user=False
     )
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    @allow_permission([ROLE.ADMIN])
     def create(self, request, slug, project_id):
         try:
             serializer = LabelSerializer(data=request.data)
@@ -66,14 +66,14 @@ class LabelViewSet(BaseViewSet):
     @invalidate_cache(
         path="/api/workspaces/:slug/labels/", url_params=True, user=False
     )
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    @allow_permission([ROLE.ADMIN])
     def partial_update(self, request, *args, **kwargs):
         return super().partial_update(request, *args, **kwargs)
 
     @invalidate_cache(
         path="/api/workspaces/:slug/labels/", url_params=True, user=False
     )
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    @allow_permission([ROLE.ADMIN])
     def destroy(self, request, *args, **kwargs):
         return super().destroy(request, *args, **kwargs)
 

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/module/base.py

@@ -317,7 +317,12 @@ class ModuleViewSet(BaseViewSet):
             .order_by("-is_favorite", "-created_at")
         )
 
-    allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER])
+    allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+        ]
+    )
 
     def create(self, request, slug, project_id):
         project = Project.objects.get(workspace__slug=slug, pk=project_id)
@@ -381,7 +386,7 @@ class ModuleViewSet(BaseViewSet):
             return Response(module, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-    allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
 
     def list(self, request, slug, project_id):
         queryset = self.get_queryset().filter(archived_at__isnull=True)
@@ -430,7 +435,12 @@ class ModuleViewSet(BaseViewSet):
             )
         return Response(modules, status=status.HTTP_200_OK)
 
-    allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER])
+    allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+        ]
+    )
 
     def retrieve(self, request, slug, project_id, pk):
         queryset = (
@@ -861,7 +871,7 @@ class ModuleFavoriteViewSet(BaseViewSet):
 
 class ModuleUserPropertiesEndpoint(BaseAPIView):
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def patch(self, request, slug, project_id, module_id):
         module_properties = ModuleUserProperties.objects.get(
             user=request.user,
@@ -884,7 +894,7 @@ class ModuleUserPropertiesEndpoint(BaseAPIView):
         serializer = ModuleUserPropertiesSerializer(module_properties)
         return Response(serializer.data, status=status.HTTP_201_CREATED)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def get(self, request, slug, project_id, module_id):
         module_properties, _ = ModuleUserProperties.objects.get_or_create(
             user=request.user,

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

@@ -91,7 +91,12 @@ class ModuleIssueViewSet(BaseViewSet):
         ).distinct()
 
     @method_decorator(gzip_page)
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER])
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+        ]
+    )
     def list(self, request, slug, project_id, module_id):
         filters = issue_filters(request.query_params, "GET")
         issue_queryset = self.get_queryset().filter(**filters)

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

@@ -41,7 +41,7 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
         )
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST],
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER],
         level="WORKSPACE",
     )
     def list(self, request, slug):
@@ -174,7 +174,7 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
         return Response(serializer.data, status=status.HTTP_200_OK)
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST],
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST],
         level="WORKSPACE",
     )
     def partial_update(self, request, slug, pk):
@@ -195,8 +195,7 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST],
-        level="WORKSPACE",
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
     )
     def mark_read(self, request, slug, pk):
         notification = Notification.objects.get(
@@ -246,7 +245,7 @@ class NotificationViewSet(BaseViewSet, BasePaginator):
 
 class UnreadNotificationEndpoint(BaseAPIView):
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST],
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST],
         level="WORKSPACE",
     )
     def get(self, request, slug):

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

@@ -32,8 +32,10 @@ from plane.db.models import (
     UserFavorite,
     ProjectMember,
     ProjectPage,
+    Project,
 )
 from plane.utils.error_codes import ERROR_CODES
+
 # Module imports
 from ..base import BaseAPIView, BaseViewSet
 
@@ -120,7 +122,7 @@ class PageViewSet(BaseViewSet):
             .distinct()
         )
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def create(self, request, slug, project_id):
         serializer = PageSerializer(
             data=request.data,
@@ -142,7 +144,7 @@ class PageViewSet(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])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def partial_update(self, request, slug, project_id, pk):
         try:
             page = Page.objects.get(
@@ -208,9 +210,38 @@ class PageViewSet(BaseViewSet):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER])
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+            ROLE.GUEST,
+        ]
+    )
     def retrieve(self, request, slug, project_id, pk=None):
         page = self.get_queryset().filter(pk=pk).first()
+        project = Project.objects.get(pk=project_id)
+
+        """
+        if the role is guest and guest_view_all_features is false and owned by is not 
+        the requesting user then dont show the page
+        """
+
+        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 page.owned_by == request.user
+        ):
+            return Response(
+                {"error": "You are not allowed to view this page"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
         if page is None:
             return Response(
                 {"error": "Page not found"},
@@ -234,7 +265,7 @@ class PageViewSet(BaseViewSet):
                 status=status.HTTP_200_OK,
             )
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def lock(self, request, slug, project_id, pk):
         page = Page.objects.filter(
             pk=pk, workspace__slug=slug, projects__id=project_id
@@ -244,7 +275,7 @@ class PageViewSet(BaseViewSet):
         page.save()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def unlock(self, request, slug, project_id, pk):
         page = Page.objects.filter(
             pk=pk, workspace__slug=slug, projects__id=project_id
@@ -255,7 +286,7 @@ class PageViewSet(BaseViewSet):
 
         return Response(status=status.HTTP_204_NO_CONTENT)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def access(self, request, slug, project_id, pk):
         access = request.data.get("access", 0)
         page = Page.objects.filter(
@@ -278,13 +309,31 @@ class PageViewSet(BaseViewSet):
         page.save()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER])
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+            ROLE.GUEST,
+        ]
+    )
     def list(self, request, slug, project_id):
         queryset = self.get_queryset()
+        project = Project.objects.get(pk=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
+        ):
+            queryset = queryset.filter(owned_by=request.user)
         pages = PageSerializer(queryset, many=True).data
         return Response(pages, status=status.HTTP_200_OK)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def archive(self, request, slug, project_id, pk):
         page = Page.objects.get(
             pk=pk, workspace__slug=slug, projects__id=project_id
@@ -319,7 +368,7 @@ class PageViewSet(BaseViewSet):
             status=status.HTTP_200_OK,
         )
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def unarchive(self, request, slug, project_id, pk):
         page = Page.objects.get(
             pk=pk, workspace__slug=slug, projects__id=project_id
@@ -477,7 +526,13 @@ class SubPagesEndpoint(BaseAPIView):
 
 class PagesDescriptionViewSet(BaseViewSet):
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER])
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+            ROLE.GUEST,
+        ]
+    )
     def retrieve(self, request, slug, project_id, pk):
         page = (
             Page.objects.filter(
@@ -507,7 +562,7 @@ class PagesDescriptionViewSet(BaseViewSet):
         )
         return response
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def partial_update(self, request, slug, project_id, pk):
         page = (
             Page.objects.filter(

apiserver/plane/app/views/page/version.py

@@ -15,7 +15,7 @@ from plane.app.permissions import allow_permission, ROLE
 class PageVersionEndpoint(BaseAPIView):
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST]
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST]
     )
     def get(self, request, slug, project_id, page_id, pk=None):
         # Check if pk is provided

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

@@ -71,13 +71,6 @@ class ProjectViewSet(BaseViewSet):
             super()
             .get_queryset()
             .filter(workspace__slug=self.kwargs.get("slug"))
-            .filter(
-                Q(
-                    project_projectmember__member=self.request.user,
-                    project_projectmember__is_active=True,
-                )
-                | Q(network=2)
-            )
             .select_related(
                 "workspace",
                 "workspace__owner",
@@ -155,7 +148,7 @@ class ProjectViewSet(BaseViewSet):
         )
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST],
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST],
         level="WORKSPACE",
     )
     def list(self, request, slug):
@@ -165,6 +158,31 @@ class ProjectViewSet(BaseViewSet):
             if field
         ]
         projects = self.get_queryset().order_by("sort_order", "name")
+        if WorkspaceMember.objects.filter(
+            member=request.user,
+            workspace__slug=slug,
+            is_active=True,
+            role=5,
+        ).exists():
+            projects = projects.filter(
+                project_projectmember__member=self.request.user,
+                project_projectmember__is_active=True,
+            )
+
+        if WorkspaceMember.objects.filter(
+            member=request.user,
+            workspace__slug=slug,
+            is_active=True,
+            role=10,
+        ).exists():
+            projects = projects.filter(
+                Q(
+                    project_projectmember__member=self.request.user,
+                    project_projectmember__is_active=True,
+                )
+                | Q(network=2)
+            )
+
         if request.GET.get("per_page", False) and request.GET.get(
             "cursor", False
         ):
@@ -177,24 +195,13 @@ class ProjectViewSet(BaseViewSet):
                 ).data,
             )
 
-        if WorkspaceMember.objects.filter(
-            member=request.user,
-            workspace__slug=slug,
-            is_active=True,
-            role__in=[5, 10],
-        ).exists():
-            projects = projects.filter(
-                project_projectmember__member=self.request.user,
-                project_projectmember__is_active=True,
-            )
-
         projects = ProjectListSerializer(
             projects, many=True, fields=fields if fields else None
         ).data
         return Response(projects, status=status.HTTP_200_OK)
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST],
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST],
         level="WORKSPACE",
     )
     def retrieve(self, request, slug, pk):

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", 10)) > 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)
 
@@ -97,7 +91,7 @@ class ProjectInvitationsViewset(BaseViewSet):
                             settings.SECRET_KEY,
                             algorithm="HS256",
                         ),
-                        role=email.get("role", 10),
+                        role=email.get("role", 5),
                         created_by=request.user,
                     )
                 )
@@ -170,7 +164,7 @@ class UserProjectInvitationsViewset(BaseViewSet):
                 ProjectMember(
                     project_id=project_id,
                     member=request.user,
-                    role=15 if workspace_role >= 15 else 10,
+                    role=workspace_role,
                     workspace=workspace,
                     created_by=request.user,
                 )

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

@@ -95,9 +95,21 @@ class ProjectMemberViewSet(BaseViewSet):
                 member=member,
                 is_active=True,
             ).role
-            if workspace_member_role in [5, 10] and member_roles.get(
-                member
-            ) in [15, 20]:
+            if workspace_member_role in [20] and member_roles.get(member) in [
+                5,
+                15,
+            ]:
+                return Response(
+                    {
+                        "error": "You cannot add a user with role lower than the workspace role"
+                    },
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            if workspace_member_role in [5] and member_roles.get(member) in [
+                15,
+                20,
+            ]:
                 return Response(
                     {
                         "error": "You cannot add a user with role higher than the workspace role"
@@ -143,7 +155,7 @@ class ProjectMemberViewSet(BaseViewSet):
             bulk_project_members.append(
                 ProjectMember(
                     member_id=member.get("member_id"),
-                    role=member.get("role", 10),
+                    role=member.get("role", 5),
                     project_id=project_id,
                     workspace_id=project.workspace_id,
                     sort_order=(
@@ -189,7 +201,7 @@ class ProjectMemberViewSet(BaseViewSet):
         # Return the serialized data
         return Response(serializer.data, status=status.HTTP_201_CREATED)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def list(self, request, slug, project_id):
         # Get the list of project members for the project
         project_members = ProjectMember.objects.filter(
@@ -230,7 +242,7 @@ class ProjectMemberViewSet(BaseViewSet):
             member=project_member.member,
             is_active=True,
         ).role
-        if workspace_role in [5, 10] and int(
+        if workspace_role in [5] and int(
             request.data.get("role", project_member.role)
         ) in [15, 20]:
             return Response(
@@ -261,7 +273,7 @@ class ProjectMemberViewSet(BaseViewSet):
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
+    @allow_permission([ROLE.ADMIN])
     def destroy(self, request, slug, project_id, pk):
         project_member = ProjectMember.objects.get(
             workspace__slug=slug,
@@ -298,7 +310,7 @@ class ProjectMemberViewSet(BaseViewSet):
         project_member.save()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
-    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST])
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def leave(self, request, slug, project_id):
         project_member = ProjectMember.objects.get(
             workspace__slug=slug,

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

@@ -9,7 +9,8 @@ from rest_framework import status
 from .. import BaseViewSet
 from plane.app.serializers import StateSerializer
 from plane.app.permissions import (
-    ProjectEntityPermission,
+    ROLE,
+    allow_permission
 )
 from plane.db.models import State, Issue
 from plane.utils.cache import invalidate_cache
@@ -18,9 +19,6 @@ from plane.utils.cache import invalidate_cache
 class StateViewSet(BaseViewSet):
     serializer_class = StateSerializer
     model = State
-    permission_classes = [
-        ProjectEntityPermission,
-    ]
 
     def get_queryset(self):
         return self.filter_queryset(
@@ -42,6 +40,7 @@ class StateViewSet(BaseViewSet):
     @invalidate_cache(
         path="workspaces/:slug/states/", url_params=True, user=False
     )
+    @allow_permission([ROLE.ADMIN])
     def create(self, request, slug, project_id):
         serializer = StateSerializer(data=request.data)
         if serializer.is_valid():
@@ -49,6 +48,7 @@ class StateViewSet(BaseViewSet):
             return Response(serializer.data, status=status.HTTP_200_OK)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def list(self, request, slug, project_id):
         states = StateSerializer(self.get_queryset(), many=True).data
         grouped = request.GET.get("grouped", False)
@@ -65,6 +65,7 @@ class StateViewSet(BaseViewSet):
     @invalidate_cache(
         path="workspaces/:slug/states/", url_params=True, user=False
     )
+    @allow_permission([ROLE.ADMIN])
     def mark_as_default(self, request, slug, project_id, pk):
         # Select all the states which are marked as default
         _ = State.objects.filter(
@@ -78,6 +79,7 @@ class StateViewSet(BaseViewSet):
     @invalidate_cache(
         path="workspaces/:slug/states/", url_params=True, user=False
     )
+    @allow_permission([ROLE.ADMIN])
     def destroy(self, request, slug, project_id, pk):
         state = State.objects.get(
             is_triage=False,

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

@@ -35,6 +35,7 @@ from plane.db.models import (
     Workspace,
     WorkspaceMember,
     ProjectMember,
+    Project,
 )
 from plane.utils.grouper import (
     issue_group_values,
@@ -75,7 +76,7 @@ class WorkspaceViewViewSet(BaseViewSet):
         )
 
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST],
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST],
         level="WORKSPACE",
     )
     def list(self, request, slug):
@@ -259,7 +260,7 @@ class WorkspaceViewIssuesViewSet(BaseViewSet):
 
     @method_decorator(gzip_page)
     @allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST],
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST],
         level="WORKSPACE",
     )
     def list(self, request, slug):
@@ -272,15 +273,24 @@ class WorkspaceViewIssuesViewSet(BaseViewSet):
             .annotate(cycle_id=F("issue_cycle__cycle_id"))
         )
 
-        if WorkspaceMember.objects.filter(
-            workspace__slug=slug,
-            member=request.user,
-            role=5,
-            is_active=True,
-        ).exists():
-            issue_queryset = issue_queryset.filter(
-                created_by=request.user,
+        # check for the project member role, if the role is 5 then check for the guest_view_all_features if it is true then show all the issues else show only the issues created by the user
+
+        issue_queryset = issue_queryset.filter(
+            Q(
+                project__project_projectmember__role=5,
+                project__guest_view_all_features=True,
             )
+            | Q(
+                project__project_projectmember__role=5,
+                project__guest_view_all_features=False,
+                created_by=self.request.user,
+            )
+            |
+            # For other roles (role < 5), show all issues
+            Q(project__project_projectmember__role__gt=5),
+            project__project_projectmember__member=self.request.user,
+            project__project_projectmember__is_active=True,
+        )
 
         # Issue queryset
         issue_queryset, order_by_param = order_issue_queryset(
@@ -421,19 +431,21 @@ class IssueViewViewSet(BaseViewSet):
             .distinct()
         )
 
-    allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST]
-    )
+    allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
 
     def list(self, request, slug, project_id):
         queryset = self.get_queryset()
-        if ProjectMember.objects.filter(
-            workspace__slug=slug,
-            project_id=project_id,
-            member=request.user,
-            role=5,
-            is_active=True,
-        ).exists():
+        project = Project.objects.get(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
+        ):
             queryset = queryset.filter(owned_by=request.user)
         fields = [
             field
@@ -445,14 +457,34 @@ class IssueViewViewSet(BaseViewSet):
         ).data
         return Response(views, status=status.HTTP_200_OK)
 
-    allow_permission(
-        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.VIEWER, ROLE.GUEST]
-    )
+    allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
 
     def retrieve(self, request, slug, project_id, pk):
         issue_view = (
             self.get_queryset().filter(pk=pk, project_id=project_id).first()
         )
+        project = Project.objects.get(id=project_id)
+        """
+        if the role is guest and guest_view_all_features is false and owned by is not 
+        the requesting user then dont show the view
+        """
+
+        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_view.owned_by == request.user
+        ):
+            return Response(
+                {"error": "You are not allowed to view this issue"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
         serializer = IssueViewSerializer(issue_view)
         recent_visited_task.delay(
             slug=slug,

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

@@ -43,6 +43,7 @@ from plane.db.models import (
     WorkspaceMember,
     WorkspaceTheme,
 )
+from plane.app.permissions import ROLE, allow_permission
 from plane.utils.cache import cache_response, invalidate_cache
 from django.utils.decorators import method_decorator
 from django.views.decorators.cache import cache_control
@@ -147,11 +148,25 @@ class WorkSpaceViewSet(BaseViewSet):
                 )
 
     @cache_response(60 * 60 * 2)
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+            ROLE.MEMBER,
+            ROLE.GUEST,
+        ],
+        level="WORKSPACE",
+    )
     def list(self, request, *args, **kwargs):
         return super().list(request, *args, **kwargs)
 
     @invalidate_cache(path="/api/workspaces/", user=False)
     @invalidate_cache(path="/api/users/me/workspaces/")
+    @allow_permission(
+        [
+            ROLE.ADMIN,
+        ],
+        level="WORKSPACE",
+    )
     def partial_update(self, request, *args, **kwargs):
         return super().partial_update(request, *args, **kwargs)
 
@@ -162,6 +177,7 @@ class WorkSpaceViewSet(BaseViewSet):
     @invalidate_cache(
         path="/api/users/me/settings/", multiple=True, user=False
     )
+    @allow_permission([ROLE.ADMIN], level="WORKSPACE")
     def destroy(self, request, *args, **kwargs):
         return super().destroy(request, *args, **kwargs)
 

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

@@ -74,7 +74,7 @@ class WorkspaceInvitationsViewset(BaseViewSet):
             [
                 email
                 for email in emails
-                if int(email.get("role", 10)) > requesting_user.role
+                if int(email.get("role", 5)) > requesting_user.role
             ]
         ):
             return Response(
@@ -119,7 +119,7 @@ class WorkspaceInvitationsViewset(BaseViewSet):
                             settings.SECRET_KEY,
                             algorithm="HS256",
                         ),
-                        role=email.get("role", 10),
+                        role=email.get("role", 5),
                         created_by=request.user,
                     )
                 )

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

@@ -13,7 +13,8 @@ from rest_framework.response import Response
 from plane.app.permissions import (
     WorkSpaceAdminPermission,
     WorkspaceEntityPermission,
-    WorkspaceUserPermission,
+    allow_permission,
+    ROLE,
 )
 
 # Module imports
@@ -43,22 +44,6 @@ class WorkSpaceMemberViewSet(BaseViewSet):
     serializer_class = WorkspaceMemberAdminSerializer
     model = WorkspaceMember
 
-    permission_classes = [
-        WorkspaceEntityPermission,
-    ]
-
-    def get_permissions(self):
-        if self.action == "leave":
-            self.permission_classes = [
-                WorkspaceUserPermission,
-            ]
-        else:
-            self.permission_classes = [
-                WorkspaceEntityPermission,
-            ]
-
-        return super(WorkSpaceMemberViewSet, self).get_permissions()
-
     search_fields = [
         "member__display_name",
         "member__first_name",
@@ -77,6 +62,9 @@ class WorkSpaceMemberViewSet(BaseViewSet):
         )
 
     @cache_response(60 * 60 * 2)
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
+    )
     def list(self, request, slug):
         workspace_member = WorkspaceMember.objects.get(
             member=request.user,
@@ -87,7 +75,7 @@ class WorkSpaceMemberViewSet(BaseViewSet):
         # Get all active workspace members
         workspace_members = self.get_queryset()
 
-        if workspace_member.role > 10:
+        if workspace_member.role > 5:
             serializer = WorkspaceMemberAdminSerializer(
                 workspace_members,
                 fields=("id", "member", "role"),
@@ -107,6 +95,7 @@ class WorkSpaceMemberViewSet(BaseViewSet):
         user=False,
         multiple=True,
     )
+    @allow_permission(allowed_roles=[ROLE.ADMIN], level="WORKSPACE")
     def partial_update(self, request, slug, pk):
         workspace_member = WorkspaceMember.objects.get(
             pk=pk,
@@ -120,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
@@ -159,6 +133,7 @@ class WorkSpaceMemberViewSet(BaseViewSet):
     @invalidate_cache(
         path="/api/users/me/workspaces/", user=False, multiple=True
     )
+    @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(
@@ -233,6 +208,9 @@ class WorkSpaceMemberViewSet(BaseViewSet):
     @invalidate_cache(
         path="api/users/me/workspaces/", user=False, multiple=True
     )
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
+    )
     def leave(self, request, slug):
         workspace_member = WorkspaceMember.objects.get(
             workspace__slug=slug,

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

@@ -288,7 +288,7 @@ class WorkspaceUserProfileEndpoint(BaseAPIView):
             is_active=True,
         )
         projects = []
-        if requesting_workspace_member.role >= 10:
+        if requesting_workspace_member.role >= 15:
             projects = (
                 Project.objects.filter(
                     workspace__slug=slug,

apiserver/plane/authentication/utils/workspace_project_join.py

@@ -49,7 +49,7 @@ def process_workspace_project_invitations(user):
                 workspace_id=project_member_invite.workspace_id,
                 role=(
                     project_member_invite.role
-                    if project_member_invite.role in [5, 10, 15]
+                    if project_member_invite.role in [5, 15]
                     else 15
                 ),
                 member=user,
@@ -67,7 +67,7 @@ def process_workspace_project_invitations(user):
                 workspace_id=project_member_invite.workspace_id,
                 role=(
                     project_member_invite.role
-                    if project_member_invite.role in [5, 10, 15]
+                    if project_member_invite.role in [5, 15]
                     else 15
                 ),
                 member=user,

apiserver/plane/bgtasks/export_task.py

@@ -244,9 +244,13 @@ def update_json_row(rows, row):
         )
         assignee, label = row["Assignee"], row["Labels"]
 
-        if assignee is not None and assignee not in existing_assignees:
+        if assignee is not None and (
+            existing_assignees is None or label not in existing_assignees
+        ):
             rows[matched_index]["Assignee"] += f", {assignee}"
-        if label is not None and label not in existing_labels:
+        if label is not None and (
+            existing_labels is None or label not in existing_labels
+        ):
             rows[matched_index]["Labels"] += f", {label}"
     else:
         rows.append(row)
@@ -266,9 +270,13 @@ def update_table_row(rows, row):
         existing_assignees, existing_labels = rows[matched_index][7:9]
         assignee, label = row[7:9]
 
-        if assignee is not None and assignee not in existing_assignees:
-            rows[matched_index][7] += f", {assignee}"
-        if label is not None and label not in existing_labels:
+        if assignee is not None and (
+            existing_assignees is None or label not in existing_assignees
+        ):
+            rows[matched_index][8] += f", {assignee}"
+        if label is not None and (
+            existing_labels is None or label not in existing_labels
+        ):
             rows[matched_index][8] += f", {label}"
     else:
         rows.append(row)

apiserver/plane/db/migrations/0076_alter_projectmember_role_and_more.py

@@ -0,0 +1,60 @@
+# Generated by Django 4.2.15 on 2024-08-30 07:34
+
+from django.db import migrations, models
+
+
+def update_workspace_project_member_role(apps, schema_editor):
+    WorkspaceMember = apps.get_model("db", "WorkspaceMember")
+    ProjectMember = apps.get_model("db", "ProjectMember")
+
+    # update all existing members with role 10 to role 5
+    WorkspaceMember.objects.filter(role=10).update(role=5)
+    ProjectMember.objects.filter(role=10).update(role=5)
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("db", "0075_alter_fileasset_asset"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="projectmember",
+            name="role",
+            field=models.PositiveSmallIntegerField(
+                choices=[(20, "Admin"), (15, "Member"), (5, "Guest")],
+                default=5,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="projectmemberinvite",
+            name="role",
+            field=models.PositiveSmallIntegerField(
+                choices=[(20, "Admin"), (15, "Member"), (5, "Guest")],
+                default=5,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="workspacemember",
+            name="role",
+            field=models.PositiveSmallIntegerField(
+                choices=[(20, "Admin"), (15, "Member"), (5, "Guest")],
+                default=5,
+            ),
+        ),
+        migrations.AlterField(
+            model_name="workspacememberinvite",
+            name="role",
+            field=models.PositiveSmallIntegerField(
+                choices=[(20, "Admin"), (15, "Member"), (5, "Guest")],
+                default=5,
+            ),
+        ),
+        migrations.AddField(
+            model_name="project",
+            name="guest_view_all_features",
+            field=models.BooleanField(default=False),
+        ),
+        migrations.RunPython(update_workspace_project_member_role),
+    ]

apiserver/plane/db/models/project.py

@@ -16,7 +16,6 @@ from .base import BaseModel
 ROLE_CHOICES = (
     (20, "Admin"),
     (15, "Member"),
-    (10, "Viewer"),
     (5, "Guest"),
 )
 
@@ -98,6 +97,7 @@ class Project(BaseModel):
     inbox_view = models.BooleanField(default=False)
     is_time_tracking_enabled = models.BooleanField(default=False)
     is_issue_type_enabled = models.BooleanField(default=False)
+    guest_view_all_features = models.BooleanField(default=False)
     cover_image = models.URLField(blank=True, null=True, max_length=800)
     estimate = models.ForeignKey(
         "db.Estimate",
@@ -173,7 +173,7 @@ class ProjectMemberInvite(ProjectBaseModel):
     token = models.CharField(max_length=255)
     message = models.TextField(null=True)
     responded_at = models.DateTimeField(null=True)
-    role = models.PositiveSmallIntegerField(choices=ROLE_CHOICES, default=10)
+    role = models.PositiveSmallIntegerField(choices=ROLE_CHOICES, default=5)
 
     class Meta:
         verbose_name = "Project Member Invite"
@@ -194,7 +194,7 @@ class ProjectMember(ProjectBaseModel):
         related_name="member_project",
     )
     comment = models.TextField(blank=True, null=True)
-    role = models.PositiveSmallIntegerField(choices=ROLE_CHOICES, default=10)
+    role = models.PositiveSmallIntegerField(choices=ROLE_CHOICES, default=5)
     view_props = models.JSONField(default=get_default_props)
     default_props = models.JSONField(default=get_default_props)
     preferences = models.JSONField(default=get_default_preferences)

apiserver/plane/db/models/workspace.py

@@ -8,9 +8,8 @@ from .base import BaseModel
 from plane.utils.constants import RESTRICTED_WORKSPACE_SLUGS
 
 ROLE_CHOICES = (
-    (20, "Owner"),
-    (15, "Admin"),
-    (10, "Member"),
+    (20, "Admin"),
+    (15, "Member"),
     (5, "Guest"),
 )
 
@@ -177,7 +176,7 @@ class WorkspaceMember(BaseModel):
         on_delete=models.CASCADE,
         related_name="member_workspace",
     )
-    role = models.PositiveSmallIntegerField(choices=ROLE_CHOICES, default=10)
+    role = models.PositiveSmallIntegerField(choices=ROLE_CHOICES, default=5)
     company_role = models.TextField(null=True, blank=True)
     view_props = models.JSONField(default=get_default_props)
     default_props = models.JSONField(default=get_default_props)
@@ -214,7 +213,7 @@ class WorkspaceMemberInvite(BaseModel):
     token = models.CharField(max_length=255)
     message = models.TextField(null=True)
     responded_at = models.DateTimeField(null=True)
-    role = models.PositiveSmallIntegerField(choices=ROLE_CHOICES, default=10)
+    role = models.PositiveSmallIntegerField(choices=ROLE_CHOICES, default=5)
 
     class Meta:
         unique_together = ["email", "workspace", "deleted_at"]

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/runtime.txt

@@ -1 +1 @@
-python-3.12.3
+python-3.12.6

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

@@ -54,6 +54,6 @@
     "nodemon": "^3.1.0",
     "ts-node": "^10.9.2",
     "tsup": "^7.2.0",
-    "typescript": "^5.4.5"
+    "typescript": "5.4.5"
   }
 }

package.json

@@ -14,7 +14,8 @@
     "packages/tsconfig",
     "packages/ui",
     "packages/types",
-    "packages/constants"
+    "packages/constants",
+    "packages/helpers"
   ],
   "scripts": {
     "build": "turbo run build",

packages/editor/package.json

@@ -79,7 +79,7 @@
     "tailwind-config-custom": "*",
     "tsconfig": "*",
     "tsup": "^7.2.0",
-    "typescript": "4.9.5"
+    "typescript": "5.4.5"
   },
   "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/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/block-menu.tsx

@@ -101,7 +101,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,6 @@ import {
 } from "lucide-react";
 // helpers
 import {
-  insertImageCommand,
   insertTableCommand,
   setText,
   toggleBlockquote,
@@ -43,7 +42,7 @@ import {
   toggleUnderline,
 } from "@/helpers/editor-commands";
 // types
-import { TEditorCommands, UploadImage } from "@/types";
+import { TEditorCommands } from "@/types";
 
 export interface EditorMenuItem {
   key: TEditorCommands;
@@ -189,16 +188,17 @@ 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),
+    command: (savedSelection: Selection | null) =>
+      editor?.commands.setImageUpload({ 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/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-new.tsx

@@ -0,0 +1,338 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { Editor } from "@tiptap/core";
+import { Node as ProsemirrorNode } from "@tiptap/pm/model";
+import { ImageIcon } from "lucide-react";
+// helpers
+import { cn } from "@/helpers/common";
+// Hooks
+import { useFileUpload, useDropZone } from "@/hooks/use-file-upload";
+// Plugins
+import { isFileValid } from "@/plugins/image";
+import { NodeSelection } from "@tiptap/pm/state";
+import { UploadEntity } from "../custom-image";
+
+type RefType = React.RefObject<HTMLInputElement> | ((instance: HTMLInputElement | null) => void);
+
+const assignRef = (ref: RefType, value: HTMLInputElement | null) => {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref && typeof ref === "object") {
+    (ref as React.MutableRefObject<HTMLInputElement | null>).current = value;
+  }
+};
+
+type Pixel = `${number}px`;
+
+export type ImageAttributes = {
+  src: string | null;
+  width: Pixel | "35%";
+  height: Pixel | "auto";
+  aspectRatio: number | null;
+  id: string | null;
+};
+
+export type CustomImageBlockProps = {
+  editor: Editor;
+  getPos: () => number;
+  node: ProsemirrorNode & {
+    attrs: ImageAttributes;
+  };
+  updateAttributes: (attrs: Partial<ImageAttributes>) => void;
+  selected: boolean;
+  fileInputRef: RefType;
+  droppedFileBlob?: string;
+  uploadFile: (file: File) => Promise<void>;
+  isFileUploading: boolean;
+  initialEditorContainerWidth: number;
+  uploadEntity?: UploadEntity;
+};
+
+const MIN_SIZE = 100;
+
+type Size = Omit<ImageAttributes, "src" | "id">;
+
+export const CustomImageBlockNew = (props: CustomImageBlockProps) => {
+  const {
+    editor,
+    getPos,
+    node,
+    isFileUploading,
+    selected,
+    fileInputRef,
+    droppedFileBlob,
+    uploadFile,
+    initialEditorContainerWidth,
+    updateAttributes,
+    uploadEntity,
+  } = props;
+  const { handleUploadClick, ref: internalRef } = useFileUpload();
+  const { draggedInside, onDrop, onDragEnter, onDragLeave } = useDropZone({
+    uploader: uploadFile,
+  });
+  const { width: nodeWidth, height: nodeHeight, aspectRatio: nodeAspectRatio } = node.attrs;
+  // refs
+  const imageRef = useRef<HTMLImageElement>(null);
+  const localRef = useRef<HTMLInputElement | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const containerRect = useRef<DOMRect | null>(null);
+  // states
+  const [displayedSrc, setDisplayedSrc] = useState<string | null>(null);
+  const [size, setSize] = useState<Size>({
+    width: nodeWidth || "35%",
+    height: nodeHeight || "auto",
+    aspectRatio: null,
+  });
+  const [isResizing, setIsResizing] = useState(false);
+  const [initialResizeComplete, setInitialResizeComplete] = useState(false);
+
+  // for realtime updates of the width and height and initializing size
+  useEffect(() => {
+    setSize({ width: nodeWidth, height: nodeHeight, aspectRatio: nodeAspectRatio });
+  }, [nodeWidth, nodeHeight, nodeAspectRatio]);
+
+  // for loading uploaded files via file picker
+  const onFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file && isFileValid(file)) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          setDisplayedSrc(reader.result as string);
+        };
+        reader.readAsDataURL(file);
+
+        uploadFile(file);
+      }
+    },
+    [uploadFile, editor.storage.image]
+  );
+  // for loading dropped files
+  useEffect(() => {
+    if (droppedFileBlob) {
+      setDisplayedSrc(droppedFileBlob);
+    }
+  }, [droppedFileBlob]);
+  // for loading remote images
+  useEffect(() => {
+    if (node.attrs.src) {
+      setDisplayedSrc(node.attrs.src);
+    }
+  }, [node.attrs.src]);
+
+  // on first load, set the aspect ratio and height of the image based on
+  // conditions
+  const handleImageLoad = useCallback(() => {
+    setInitialResizeComplete(false);
+    const img = imageRef.current;
+    if (!img) {
+      console.error("Image reference is undefined");
+      return;
+    }
+
+    let aspectRatio = nodeAspectRatio;
+    if (!aspectRatio) {
+      aspectRatio = img.naturalWidth / img.naturalHeight;
+    }
+
+    if (nodeWidth === "35%") {
+      // the initial width hasn't been set and has to be set to 35% of the editor container
+      const closestEditorContainer = img.closest(".editor-container");
+      let editorWidth = initialEditorContainerWidth;
+
+      if (closestEditorContainer) {
+        editorWidth = closestEditorContainer.clientWidth;
+      }
+
+      const initialWidth = Math.max(editorWidth * 0.35, MIN_SIZE);
+      const initialHeight = initialWidth / aspectRatio;
+
+      const newSize = {
+        width: `${Math.round(initialWidth)}px` satisfies Pixel,
+        height: `${Math.round(initialHeight)}px` satisfies Pixel,
+        aspectRatio: aspectRatio,
+      };
+
+      setSize(newSize);
+      updateAttributes(newSize);
+    } else {
+      // if the width has been set, we need to update the aspect ratio and height
+      const newHeight = Number(nodeWidth?.replace("px", "")) / aspectRatio;
+
+      setSize((prevSize) => ({ ...prevSize, aspectRatio, height: `${newHeight}px` }));
+
+      if (newHeight !== Number(nodeHeight?.replace("px", ""))) {
+        updateAttributes({ height: `${newHeight}px` });
+      }
+      if (nodeAspectRatio !== aspectRatio) {
+        updateAttributes({ aspectRatio });
+      }
+    }
+    setInitialResizeComplete(true);
+  }, [nodeWidth, updateAttributes, nodeAspectRatio, nodeHeight]);
+
+  // resizing lifecycle
+  const handleResizeStart = useCallback((e: React.MouseEvent | React.TouchEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsResizing(true);
+
+    if (containerRef.current) {
+      containerRect.current = containerRef.current.getBoundingClientRect();
+    }
+  }, []);
+
+  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({ width: size.width, height: size.height });
+  }, [size, updateAttributes]);
+
+  // handle resizing
+  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]
+  );
+
+  const isRemoteImageBeingUploaded = node.attrs.width === "35%" && node.attrs.height === "auto" && !node.attrs.src;
+
+  console.log(
+    "uploadEntity",
+    !displayedSrc,
+    !isRemoteImageBeingUploaded,
+    uploadEntity?.event == "insert",
+    !displayedSrc || (!isRemoteImageBeingUploaded && uploadEntity?.event === "insert")
+  );
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        className="group/image-component relative inline-block max-w-full"
+        onMouseDown={handleImageMouseDown}
+        style={{
+          width: size.width,
+          aspectRatio: size.aspectRatio ?? undefined,
+        }}
+      >
+        {/* if the image hasn't completed it's initial resize but has a src, show a loading placeholder */}
+        {!initialResizeComplete && displayedSrc && (
+          <div
+            className="animate-pulse bg-custom-background-80 rounded-md"
+            style={{
+              width: size.width === "35%" ? `${0.35 * initialEditorContainerWidth}px` : size.width,
+              height: size.height === "auto" ? "100px" : size.height,
+            }}
+          />
+        )}
+        {/* if the image has a src, load the image and hide it until the initial resize is complete (while showing the above loader) */}
+        {displayedSrc && (
+          <img
+            ref={imageRef}
+            src={displayedSrc || ""}
+            onLoad={handleImageLoad}
+            className={cn("w-full h-auto rounded-md", {
+              hidden: !initialResizeComplete,
+              "blur-sm opacity-80": isFileUploading,
+            })}
+            style={{
+              width: size.width,
+              aspectRatio: size.aspectRatio ?? undefined,
+            }}
+          />
+        )}
+        {/* resize handles to be shown only when the image is selected and is not being uploaded a file */}
+        {editor.isEditable && selected && !isFileUploading && (
+          <div className="absolute inset-0 size-full bg-custom-primary-500/30" />
+        )}
+        {editor.isEditable && !isFileUploading && (
+          <>
+            <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 group-hover/image-component:opacity-100": !isResizing,
+                }
+              )}
+              onMouseDown={handleResizeStart}
+            />
+          </>
+        )}
+      </div>
+      {/* if there is no src (remote or local), show the upload button */}
+      {(!displayedSrc || (isRemoteImageBeingUploaded && uploadEntity?.event === "insert")) && (
+        <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": selected,
+            }
+          )}
+          onDrop={onDrop}
+          onDragOver={onDragEnter}
+          onDragLeave={onDragLeave}
+          contentEditable={false}
+          onClick={handleUploadClick}
+        >
+          <ImageIcon className="size-4" />
+          <div className="text-base font-medium">{draggedInside ? "Drop image here" : "Add an image"}</div>
+          <input
+            className="size-0 overflow-hidden"
+            ref={(element) => {
+              localRef.current = element;
+              assignRef(fileInputRef, element);
+              assignRef(internalRef as RefType, element);
+            }}
+            hidden
+            type="file"
+            accept=".jpg,.jpeg,.png,.webp"
+            onChange={onFileChange}
+          />
+        </div>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,199 @@
+import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
+import { NodeSelection } from "@tiptap/pm/state";
+// extensions
+import { CustomImageNodeViewProps } from "@/extensions/custom-image";
+// helpers
+import { cn } from "@/helpers/common";
+
+const MIN_SIZE = 100;
+
+export const CustomImageBlock: React.FC<
+  CustomImageNodeViewProps & {
+    isImageLoaded: boolean;
+    displayedSrc: string | null;
+    isLoading: boolean;
+  }
+> = (props) => {
+  const { node, updateAttributes, selected, getPos, editor, displayedSrc, isImageLoaded } = props;
+  const { src, width, height } = node.attrs;
+
+  const [size, setSize] = useState<{
+    width: string;
+    height: string;
+    aspectRatio: number | null;
+  }>({
+    width: width || "35%",
+    height: height || "auto",
+    aspectRatio: null,
+  });
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [initialResizeComplete, setInitialResizeComplete] = useState(false);
+  const [editorContainer, setEditorContainer] = useState<HTMLElement | null>(null);
+  const [isResizing, setIsResizing] = useState(false);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const containerRect = useRef<DOMRect | null>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  const isShimmerVisible = isLoading || !initialResizeComplete;
+
+  const handleImageLoad = useCallback(() => {
+    const img = imageRef.current;
+
+    if (!img) {
+      console.error("Image reference is undefined");
+      return;
+    }
+
+    const closestEditorContainer = img.closest(".editor-container");
+    if (!closestEditorContainer) {
+      console.error("Editor container not found");
+      return;
+    }
+
+    setEditorContainer(closestEditorContainer as HTMLElement);
+    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 newSize = {
+        width: `${Math.round(initialWidth)}px`,
+        height: `${Math.round(initialHeight)}px`,
+        aspectRatio: aspectRatio,
+      };
+
+      setSize(newSize);
+      updateAttributes(newSize);
+    } else {
+      setSize((prevSize) => ({ ...prevSize, aspectRatio }));
+    }
+    setInitialResizeComplete(true);
+    setIsLoading(false);
+  }, [width, updateAttributes]);
+
+  useLayoutEffect(() => {
+    setSize((prevSize) => ({ ...prevSize, width, 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 && editorContainer) {
+        containerRect.current = containerRef.current.getBoundingClientRect();
+      }
+    },
+    [editorContainer]
+  );
+
+  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]
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      className="group/image-component relative inline-block max-w-full"
+      onMouseDown={handleImageMouseDown}
+      style={{
+        width: size.width,
+        aspectRatio: size.aspectRatio ?? undefined,
+      }}
+    >
+      {isShimmerVisible && (
+        <div
+          className="animate-pulse bg-custom-background-80 rounded-md"
+          style={{ width: size.width, height: size.height }}
+        />
+      )}
+      <img
+        ref={imageRef}
+        src={displayedSrc ?? src}
+        width={size.width}
+        height={size.height}
+        onLoad={handleImageLoad}
+        className={cn("block rounded-md", {
+          hidden: isShimmerVisible,
+          "read-only-image": !editor.isEditable,
+          "blur-sm opacity-80": isLoading || !isImageLoaded,
+        })}
+        style={{
+          width: size.width,
+          aspectRatio: size.aspectRatio ?? undefined,
+        }}
+      />
+      {editor.isEditable && selected && !isShimmerVisible && (
+        <div className="absolute inset-0 size-full bg-custom-primary-500/30" />
+      )}
+      {editor.isEditable && !isShimmerVisible && (
+        <>
+          <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,103 @@
+import { useCallback, useEffect, useRef, useMemo, useState } from "react";
+import { Node as ProsemirrorNode } from "@tiptap/pm/model";
+import { Editor, NodeViewWrapper } from "@tiptap/react";
+// extensions
+import { UploadImageExtensionStorage } from "@/extensions/custom-image";
+import { CustomImageBlockNew, ImageAttributes } from "./image-block-new";
+import { useUploader } from "@/hooks/use-file-upload";
+import { useEditorContainerWidth } from "@/hooks/use-editor-container";
+
+export type CustomImageNodeViewProps = {
+  editor: Editor;
+  getPos: () => number;
+  node: ProsemirrorNode & {
+    attrs: ImageAttributes;
+  };
+  updateAttributes: (attrs: Partial<ImageAttributes>) => void;
+  selected: boolean;
+};
+
+export const CustomImageNode = (props: CustomImageNodeViewProps) => {
+  const { getPos, editor, node, updateAttributes, selected } = props;
+  const { id } = node.attrs;
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const hasTriggeredFilePickerRef = useRef(false);
+
+  // if the image is dropped onto the editor, we need to store the blob
+  const [droppedFileBlob, setDroppedFileBlob] = useState<string | undefined>(undefined);
+
+  // the imageComponent's storage
+  const editorStorage = useMemo(
+    () => editor.storage.imageComponent as UploadImageExtensionStorage | undefined,
+    [editor.storage]
+  );
+
+  // the imageComponent's entity (it depicts how the image was added, either by
+  // dropping the image onto the editor or by inserting the image)
+  const uploadEntity = useMemo(() => {
+    if (id) {
+      return editorStorage?.fileMap.get(id);
+    }
+  }, [editorStorage, id]);
+
+  const onUpload = useCallback(
+    (url: string) => {
+      if (url) {
+        updateAttributes({ src: url });
+        // after uploading the image, we need to remove the entity from the storage
+        if (id) {
+          editorStorage?.fileMap.delete(id);
+        }
+      }
+    },
+    [editorStorage?.fileMap, id, updateAttributes]
+  );
+
+  const { loading: isFileUploading, uploadFile } = useUploader({ onUpload, editor });
+
+  useEffect(() => {
+    if (uploadEntity && !hasTriggeredFilePickerRef.current) {
+      if (uploadEntity.event === "drop" && "file" in uploadEntity) {
+        const file = uploadEntity.file;
+        const reader = new FileReader();
+        reader.onload = () => {
+          const result = reader.result as string;
+          setDroppedFileBlob(result);
+        };
+        reader.readAsDataURL(file);
+        uploadFile(file);
+      } else if (uploadEntity.event === "insert" && fileInputRef.current && id) {
+        const entity = editorStorage?.fileMap.get(id);
+        if (entity && entity.hasOpenedFileInputOnce) return;
+        fileInputRef.current.click();
+        hasTriggeredFilePickerRef.current = true;
+        if (!entity) return;
+        editorStorage?.fileMap.set(id, { ...entity, hasOpenedFileInputOnce: true });
+      }
+    }
+  }, [uploadEntity, uploadFile, editorStorage?.fileMap, id]);
+
+  const initialEditorContainerWidth = useEditorContainerWidth(containerRef);
+
+  return (
+    <NodeViewWrapper>
+      <div className="p-0 mx-0 my-2" data-drag-handle ref={containerRef}>
+        <CustomImageBlockNew
+          fileInputRef={fileInputRef}
+          uploadFile={uploadFile}
+          editor={editor}
+          droppedFileBlob={droppedFileBlob}
+          isFileUploading={isFileUploading}
+          initialEditorContainerWidth={initialEditorContainerWidth}
+          getPos={getPos}
+          node={node}
+          updateAttributes={updateAttributes}
+          selected={selected}
+          uploadEntity={uploadEntity}
+        />
+      </div>
+    </NodeViewWrapper>
+  );
+};

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

@@ -0,0 +1,147 @@
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from "react";
+import { Editor } from "@tiptap/core";
+import { ImageIcon } from "lucide-react";
+import { Spinner } from "@plane/ui";
+
+// helpers
+import { cn } from "@/helpers/common";
+// hooks
+import { useUploader, useFileUpload, useDropZone } from "@/hooks/use-file-upload";
+// plugins
+import { isFileValid } from "@/plugins/image";
+
+type RefType = React.RefObject<HTMLInputElement> | ((instance: HTMLInputElement | null) => void);
+
+const assignRef = (ref: RefType, value: HTMLInputElement | null) => {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref && typeof ref === "object") {
+    (ref as React.MutableRefObject<HTMLInputElement | null>).current = value;
+  }
+};
+
+export const CustomImageUploader = (props: {
+  onUpload: (url: string) => void;
+  editor: Editor;
+  fileInputRef: RefType;
+  existingFile?: File;
+  selected: boolean;
+  setIsImageLoaded: (isImageLoaded: boolean) => void;
+  setDisplayedSrc: (displayedSrc: string | null) => void;
+  setIsLoading: (isLoading: boolean) => void;
+}) => {
+  const { selected, onUpload, editor, fileInputRef, existingFile, setDisplayedSrc, setIsImageLoaded, setIsLoading } =
+    props;
+  const { loading, uploadFile } = useUploader({ onUpload, editor });
+  const { handleUploadClick, ref: internalRef } = useFileUpload();
+  const { draggedInside, onDrop, onDragEnter, onDragLeave } = useDropZone({ uploader: uploadFile });
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  const localRef = useRef<HTMLInputElement | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [width, setWidth] = useState<number | null>(null);
+
+  useEffect(() => {
+    setIsLoading(loading);
+  }, [loading]);
+
+  // state to track if the preview image is loaded
+
+  useEffect(() => {
+    if (previewUrl) {
+      const closestEditorContainer = imageRef.current?.closest(".editor-container");
+      if (closestEditorContainer) {
+        const editorWidth = closestEditorContainer?.clientWidth;
+        const initialWidth = Math.max(editorWidth * 0.35, 100);
+        setWidth(initialWidth);
+      }
+    }
+  }, [previewUrl, imageRef.current]);
+
+  // Function to preload images
+  const loadImage = useCallback((src: string) => {
+    setIsImageLoaded(false);
+    const img = new Image();
+    img.onload = () => {
+      setIsImageLoaded(true);
+      setDisplayedSrc(src);
+    };
+    img.src = src;
+  }, []);
+
+  const onFileChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) {
+        if (isFileValid(file)) {
+          const reader = new FileReader();
+          reader.onload = () => {
+            const result = reader.result as string;
+            loadImage(result);
+            setPreviewUrl(reader.result as string);
+          };
+          reader.readAsDataURL(file);
+          uploadFile(file);
+        }
+      }
+    },
+    [uploadFile, editor.storage.image, loadImage]
+  );
+
+  useEffect(() => {
+    if (existingFile) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const result = reader.result as string;
+        setPreviewUrl(result);
+        loadImage(result);
+      };
+      reader.readAsDataURL(existingFile);
+      uploadFile(existingFile);
+    }
+  }, [existingFile, uploadFile, loadImage]);
+
+  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": selected,
+          }
+        )}
+        onDrop={onDrop}
+        onDragOver={onDragEnter}
+        onDragLeave={onDragLeave}
+        contentEditable={false}
+        onClick={handleUploadClick}
+      >
+        <ImageIcon className="size-4" />
+        <div className="text-base font-medium">
+          {loading
+            ? "Uploading..."
+            : draggedInside
+              ? "Drop image here"
+              : existingFile
+                ? "Uploading..."
+                : "Add an image"}
+        </div>
+        <input
+          className="size-0 overflow-hidden"
+          ref={(element) => {
+            localRef.current = element;
+            assignRef(fileInputRef, element);
+            assignRef(internalRef as RefType, element);
+          }}
+          hidden
+          type="file"
+          accept=".jpg,.jpeg,.png,.webp"
+          onChange={onFileChange}
+        />
+      </div>
+    </>
+  );
+};

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

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

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

@@ -0,0 +1,160 @@
+import { 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";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    imageComponent: {
+      setImageUpload: ({ file, pos, event }: { file?: File; pos?: number; event: "insert" | "drop" }) => ReturnType;
+      uploadImage: (file: File) => () => Promise<string> | undefined;
+    };
+  }
+}
+
+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>(),
+      };
+    },
+
+    addCommands() {
+      return {
+        setImageUpload:
+          (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();
+            if (props?.event === "drop" && props.file) {
+              (this.editor.storage.imageComponent as UploadImageExtensionStorage).fileMap.set(fileId, {
+                file: props.file,
+                event: props.event,
+              });
+            } else if (props.event === "insert") {
+              (this.editor.storage.imageComponent as UploadImageExtensionStorage).fileMap.set(fileId, {
+                event: props.event,
+              });
+            }
+
+            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,11 +1,8 @@
 import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "prosemirror-state";
-// plugins
-import { startImageUpload } from "@/plugins/image";
-// types
-import { UploadImage } from "@/types";
+import { EditorView } from "prosemirror-view";
 
-export const DropHandlerExtension = (uploadFile: UploadImage) =>
+export const DropHandlerExtension = () =>
   Extension.create({
     name: "dropHandler",
     priority: 1000,
@@ -15,28 +12,51 @@ export const DropHandlerExtension = (uploadFile: UploadImage) =>
         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);
-                return true;
+                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;
+                  imageFiles.forEach((file, index) => {
+                    this.editor
+                      .chain()
+                      .focus()
+                      .setImageUpload({ file, pos: pos + index, event: "drop" })
+                      .run();
+                  });
+                  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) {
+                    imageFiles.forEach((file, index) => {
+                      setTimeout(() => {
+                        this.editor
+                          .chain()
+                          .focus()
+                          .setImageUpload({ file, pos: coordinates.pos + index, event: "drop" })
+                          .run();
+                      }, index * 100); // Slight delay between insertions
+                    });
+                  }
+                  return true;
                 }
-                return true;
               }
               return false;
             },

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.image.uploadInProgress) return "";
 
       const shouldHidePlaceholder =
         editor.isActive("table") || editor.isActive("codeBlock") || editor.isActive("image");

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-extension-without-props.tsx

@@ -1,4 +1,5 @@
 import ImageExt from "@tiptap/extension-image";
+// extensions
 
 export const ImageExtensionWithoutProps = () =>
   ImageExt.extend({

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

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

@@ -19,6 +19,7 @@ import {
   TableRow,
   Table,
   CustomMention,
+  CustomReadOnlyImageExtension,
 } from "@/extensions";
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
@@ -74,6 +75,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
       class: "rounded-md",
     },
   }),
+  CustomReadOnlyImageExtension(),
   TiptapUnderline,
   TextStyle,
   TaskList.configure({

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");

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

@@ -28,7 +28,6 @@ import {
   toggleBulletList,
   toggleOrderedList,
   toggleTaskList,
-  insertImageCommand,
   toggleHeadingOne,
   toggleHeadingTwo,
   toggleHeadingThree,
@@ -37,7 +36,7 @@ import {
   toggleHeadingSix,
 } from "@/helpers/editor-commands";
 // types
-import { CommandProps, ISlashCommandItem, UploadImage } from "@/types";
+import { CommandProps, ISlashCommandItem } from "@/types";
 
 interface CommandItemProps {
   key: string;
@@ -63,7 +62,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 +88,7 @@ const Command = Extension.create<SlashCommandOptions>({
 });
 
 const getSuggestionItems =
-  (uploadFile: UploadImage, additionalOptions?: Array<ISlashCommandItem>) =>
+  (additionalOptions?: Array<ISlashCommandItem>) =>
   ({ query }: { query: string }) => {
     let slashCommands: ISlashCommandItem[] = [
       {
@@ -224,11 +223,11 @@ const getSuggestionItems =
       {
         key: "image",
         title: "Image",
-        description: "Upload an image from your computer.",
-        searchTerms: ["img", "photo", "picture", "media"],
         icon: <ImageIcon className="size-3.5" />,
+        description: "Insert an image",
+        searchTerms: ["img", "photo", "picture", "media", "upload"],
         command: ({ editor, range }: CommandProps) => {
-          insertImageCommand(editor, uploadFile, null, range);
+          editor.chain().focus().deleteRange(range).setImageUpload({ event: "insert" }).run();
         },
       },
       {
@@ -415,10 +414,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/helpers/yjs.ts

@@ -1,76 +0,0 @@
-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 => {
-  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;
-};

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

@@ -83,7 +83,6 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
       ...(extensions ?? []),
       ...DocumentEditorAdditionalExtensions({
         disabledExtensions,
-        fileHandler,
         issueEmbedConfig: embedHandler?.issue,
         provider,
         userDetails: user,

packages/editor/src/core/hooks/use-editor-container.tsx

@@ -0,0 +1,37 @@
+import { useState, useEffect, RefObject } from "react";
+
+interface UseEditorContainerWidthOptions {
+  maxRetries?: number;
+  retryInterval?: number;
+}
+
+export const useEditorContainerWidth = (
+  containerRef: RefObject<HTMLElement>,
+  options: UseEditorContainerWidthOptions = {}
+): number => {
+  const { maxRetries = 5, retryInterval = 100 } = options;
+  const [width, setWidth] = useState<number>(0);
+
+  useEffect(() => {
+    let retryCount = 0;
+
+    const checkEditorContainer = (): void => {
+      if (containerRef.current) {
+        const editorContainer = containerRef.current.closest(".editor-container") as HTMLElement | null;
+        if (editorContainer) {
+          setWidth(editorContainer.clientWidth);
+          return;
+        }
+      }
+
+      if (retryCount < maxRetries) {
+        retryCount++;
+        setTimeout(checkEditorContainer, retryInterval);
+      }
+    };
+
+    checkEditorContainer();
+  }, [containerRef, maxRetries, retryInterval]);
+
+  return width;
+};

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

@@ -91,6 +91,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;
@@ -123,7 +124,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 +132,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,7 +148,7 @@ 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);
@@ -214,20 +215,25 @@ 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: () => {
@@ -238,7 +244,7 @@ export const useEditor = (props: CustomEditorProps) => {
         };
       },
     }),
-    [editorRef, savedSelection, fileHandler.upload]
+    [editorRef, savedSelection]
   );
 
   if (!editor) {

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

@@ -0,0 +1,111 @@
+import { DragEvent, useCallback, useEffect, useRef, useState } from "react";
+import { Editor } from "@tiptap/core";
+import { isFileValid } from "@/plugins/image";
+
+export const useUploader = ({ onUpload, editor }: { onUpload: (url: string) => void; editor: Editor }) => {
+  const [loading, setLoading] = useState(false);
+
+  const uploadFile = useCallback(
+    async (file: File) => {
+      setLoading(true);
+      try {
+        // @ts-expect-error - TODO: fix typings, and don't remove await from
+        // here for now
+        const url: string = await editor?.commands.uploadImage(file);
+
+        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);
+      }
+      setLoading(false);
+    },
+    [onUpload, editor]
+  );
+
+  return { loading, uploadFile };
+};
+
+export const useFileUpload = () => {
+  const fileInput = useRef<HTMLInputElement>(null);
+
+  const handleUploadClick = useCallback(() => {
+    fileInput.current?.click();
+  }, []);
+
+  return { ref: fileInput, handleUploadClick };
+};
+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) {
+        const isValid = isFileValid(file);
+        if (isValid) {
+          uploader(file);
+        }
+      }
+    },
+    [uploader]
+  );
+
+  const onDragEnter = () => {
+    setDraggedInside(true);
+  };
+
+  const onDragLeave = () => {
+    setDraggedInside(false);
+  };
+
+  return { isDragging, draggedInside, onDragEnter, onDragLeave, onDrop };
+};

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

@@ -58,7 +58,7 @@ export const useReadOnlyEditor = ({
   // for syncing swr data on tab refocus etc
   useEffect(() => {
     if (initialValue === null || initialValue === undefined) return;
-    if (editor && !editor.isDestroyed) editor?.commands.setContent(initialValue);
+    if (editor && !editor.isDestroyed) editor?.commands.setContent(initialValue, false, { preserveWhitespace: "full" });
   }, [editor, initialValue]);
 
   const editorRef: MutableRefObject<Editor | null> = useRef(null);
@@ -68,7 +68,7 @@ export const useReadOnlyEditor = ({
       editorRef.current?.commands.clearContent();
     },
     setEditorValue: (content: string) => {
-      editorRef.current?.commands.setContent(content);
+      editorRef.current?.commands.setContent(content, false, { preserveWhitespace: "full" });
     },
     getMarkDown: (): string => {
       const markdownOutput = editorRef.current?.storage.markdown.getMarkdown();

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

@@ -30,7 +30,7 @@ const createDragHandleElement = (): HTMLElement => {
   return dragHandleElement;
 };
 
-const nodeDOMAtCoords = (coords: { x: number; y: number }) => {
+export const nodeDOMAtCoords = (coords: { x: number; y: number }) => {
   const elements = document.elementsFromPoint(coords.x, coords.y);
   const generalSelectors = [
     "li",
@@ -42,13 +42,34 @@ const nodeDOMAtCoords = (coords: { x: number; y: number }) => {
     "[data-type=horizontalRule]",
     ".table-wrapper",
     ".issue-embed",
+    ".image-upload-component",
   ].join(", ");
 
+  const hasNestedImg = (el: Element): boolean => {
+    if (el.tagName.toLowerCase() === "img") return true;
+    // @ts-expect-error todo
+    for (const child of el.children) {
+      if (hasNestedImg(child)) return true;
+    }
+    return false;
+  };
+
   for (const elem of elements) {
+    const elemHasNestedImg = hasNestedImg(elem);
     if (elem.matches("p:first-child") && elem.parentElement?.matches(".ProseMirror")) {
       return elem;
     }
 
+    // if the element is a <p> tag and has a nested img i.e. the new image
+    // component
+    if (elem.matches("p") && elemHasNestedImg) {
+      return null;
+    }
+
+    if (elem.matches("div") && elemHasNestedImg) {
+      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")) &&

packages/editor/src/core/plugins/image/delete-image.ts

@@ -1,17 +1,17 @@
 import { Editor } from "@tiptap/core";
-import { EditorState, Plugin, Transaction } from "@tiptap/pm/state";
+import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
 // plugins
-import { IMAGE_NODE_TYPE, deleteKey, type ImageNode } from "@/plugins/image";
+import { type ImageNode } from "@/plugins/image";
 // types
 import { DeleteImage } from "@/types";
 
-export const TrackImageDeletionPlugin = (editor: Editor, deleteImage: DeleteImage): Plugin =>
+export const TrackImageDeletionPlugin = (editor: Editor, deleteImage: DeleteImage, nodeType: string): Plugin =>
   new Plugin({
-    key: deleteKey,
+    key: new PluginKey(`delete-${nodeType}`),
     appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
       const newImageSources = new Set<string>();
       newState.doc.descendants((node) => {
-        if (node.type.name === IMAGE_NODE_TYPE) {
+        if (node.type.name === nodeType) {
           newImageSources.add(node.attrs.src);
         }
       });
@@ -25,7 +25,7 @@ export const TrackImageDeletionPlugin = (editor: Editor, deleteImage: DeleteImag
         // iterate through all the nodes in the old state
         oldState.doc.descendants((oldNode) => {
           // if the node is not an image, then return as no point in checking
-          if (oldNode.type.name !== IMAGE_NODE_TYPE) return;
+          if (oldNode.type.name !== nodeType) return;
 
           // Check if the node has been deleted or replaced
           if (!newImageSources.has(oldNode.attrs.src)) {
@@ -35,7 +35,7 @@ export const TrackImageDeletionPlugin = (editor: Editor, deleteImage: DeleteImag
 
         removedImages.forEach(async (node) => {
           const src = node.attrs.src;
-          editor.storage.image.deletedImageSet.set(src, true);
+          editor.storage[nodeType].deletedImageSet.set(src, true);
           await onNodeDeleted(src, deleteImage);
         });
       });
@@ -46,6 +46,7 @@ export const TrackImageDeletionPlugin = (editor: Editor, deleteImage: DeleteImag
 
 async function onNodeDeleted(src: string, deleteImage: DeleteImage): Promise<void> {
   try {
+    if (!src) return;
     const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
     await deleteImage(assetUrlWithWorkspaceId);
   } catch (error) {

packages/editor/src/core/plugins/image/restore-image.ts

@@ -1,17 +1,17 @@
 import { Editor } from "@tiptap/core";
-import { EditorState, Plugin, Transaction } from "@tiptap/pm/state";
+import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
 // plugins
-import { IMAGE_NODE_TYPE, ImageNode, restoreKey } from "@/plugins/image";
+import { ImageNode } from "@/plugins/image";
 // types
 import { RestoreImage } from "@/types";
 
-export const TrackImageRestorationPlugin = (editor: Editor, restoreImage: RestoreImage): Plugin =>
+export const TrackImageRestorationPlugin = (editor: Editor, restoreImage: RestoreImage, nodeType: string): Plugin =>
   new Plugin({
-    key: restoreKey,
+    key: new PluginKey(`restore-${nodeType}`),
     appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
       const oldImageSources = new Set<string>();
       oldState.doc.descendants((node) => {
-        if (node.type.name === IMAGE_NODE_TYPE) {
+        if (node.type.name === nodeType) {
           oldImageSources.add(node.attrs.src);
         }
       });
@@ -22,20 +22,21 @@ export const TrackImageRestorationPlugin = (editor: Editor, restoreImage: Restor
         const addedImages: ImageNode[] = [];
 
         newState.doc.descendants((node, pos) => {
-          if (node.type.name !== IMAGE_NODE_TYPE) return;
+          if (node.type.name !== nodeType) return;
           if (pos < 0 || pos > newState.doc.content.size) return;
           if (oldImageSources.has(node.attrs.src)) return;
           addedImages.push(node as ImageNode);
         });
 
         addedImages.forEach(async (image) => {
-          const wasDeleted = editor.storage.image.deletedImageSet.get(image.attrs.src);
+          const src = image.attrs.src;
+          const wasDeleted = editor.storage[nodeType].deletedImageSet.get(src);
           if (wasDeleted === undefined) {
-            editor.storage.image.deletedImageSet.set(image.attrs.src, false);
+            editor.storage[nodeType].deletedImageSet.set(src, false);
           } else if (wasDeleted === true) {
             try {
-              await onNodeRestored(image.attrs.src, restoreImage);
-              editor.storage.image.deletedImageSet.set(image.attrs.src, false);
+              await onNodeRestored(src, restoreImage);
+              editor.storage[nodeType].deletedImageSet.set(src, false);
             } catch (error) {
               console.error("Error restoring image: ", error);
             }
@@ -48,6 +49,7 @@ export const TrackImageRestorationPlugin = (editor: Editor, restoreImage: Restor
 
 async function onNodeRestored(src: string, restoreImage: RestoreImage): Promise<void> {
   try {
+    if (!src) return;
     const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
     await restoreImage(assetUrlWithWorkspaceId);
   } catch (error) {

packages/editor/src/core/plugins/image/utils/validate-file.ts

@@ -1,17 +1,23 @@
-export function isFileValid(file: File): boolean {
+export function isFileValid(file: File, showAlert = true): boolean {
   if (!file) {
-    alert("No file selected. Please select a file to upload.");
+    if (showAlert) {
+      alert("No file selected. Please select a file to upload.");
+    }
     return false;
   }
 
   const allowedTypes = ["image/jpeg", "image/jpg", "image/png", "image/webp"];
   if (!allowedTypes.includes(file.type)) {
-    alert("Invalid file type. Please select a JPEG, JPG, PNG, or WEBP image file.");
+    if (showAlert) {
+      alert("Invalid file type. Please select a JPEG, JPG, PNG, or WEBP image file.");
+    }
     return false;
   }
 
   if (file.size > 5 * 1024 * 1024) {
-    alert("File size too large. Please select a file smaller than 5MB.");
+    if (showAlert) {
+      alert("File size too large. Please select a file smaller than 5MB.");
+    }
     return false;
   }
 

packages/editor/src/index.ts

@@ -21,9 +21,7 @@ export { isCellSelection } from "@/extensions/table/table/utilities/is-cell-sele
 // helpers
 export * from "@/helpers/common";
 export * from "@/helpers/editor-commands";
-export * from "@/helpers/yjs";
 export * from "@/extensions/table/table";
-export { startImageUpload } from "@/plugins/image";
 
 // components
 export * from "@/components/menus";

packages/editor/src/styles/drag-drop.css

@@ -39,7 +39,7 @@
 }
 /* end ai handle */
 
-.ProseMirror:not(.dragging) .ProseMirror-selectednode {
+.ProseMirror:not(.dragging) .ProseMirror-selectednode:not(.node-imageComponent):not(.node-image) {
   position: relative;
   cursor: grab;
   outline: none !important;
@@ -63,6 +63,15 @@
     border-radius: 4px;
     pointer-events: none;
   }
+
+  &.node-imageComponent,
+  &.node-image {
+    --horizontal-offset: 0px;
+
+    &::after {
+      background-color: rgba(var(--color-background-100), 0.2);
+    }
+  }
 }
 
 /* for targeting the task list items */
@@ -96,7 +105,8 @@ ol > li:nth-child(n + 100).ProseMirror-selectednode:not(.dragging)::after {
   margin-left: -35px;
 }
 
-.ProseMirror img {
+.ProseMirror node-image,
+.ProseMirror node-imageComponent {
   transition: filter 0.1s ease-in-out;
   cursor: pointer;
 

packages/editor/src/styles/editor.css

@@ -122,18 +122,21 @@
 
 /* Custom image styles */
 .ProseMirror img {
-  transition: filter 0.1s ease-in-out;
-  margin-top: 8px;
+  margin-top: 0 !important;
   margin-bottom: 0;
 
-  &:hover {
-    cursor: pointer;
-    filter: brightness(90%);
-  }
+  &:not(.read-only-image) {
+    transition: filter 0.1s ease-in-out;
 
-  &.ProseMirror-selectednode {
-    outline: 3px solid rgba(var(--color-primary-100));
-    filter: brightness(90%);
+    &:hover {
+      cursor: pointer;
+      filter: brightness(90%);
+    }
+
+    &.ProseMirror-selectednode {
+      outline: 3px solid rgba(var(--color-primary-100));
+      filter: brightness(90%);
+    }
   }
 }
 
@@ -261,26 +264,6 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   transition: opacity 0.2s ease-out;
 }
 
-.img-placeholder {
-  position: relative;
-  width: 35%;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-
-  &::before {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    top: 50%;
-    left: 45%;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    border: 3px solid rgba(var(--color-text-200));
-    border-top-color: rgba(var(--color-text-800));
-    animation: spinning 0.6s linear infinite;
-  }
-}
 
 @keyframes spinning {
   to {

packages/editor/tsup.config.ts

@@ -4,7 +4,7 @@ export default defineConfig((options: Options) => ({
   entry: ["src/index.ts", "src/lib.ts"],
   format: ["cjs", "esm"],
   dts: true,
-  clean: true,
+  clean: false,
   external: ["react"],
   injectStyle: true,
   ...options,

packages/eslint-config-custom/index.js

@@ -8,7 +8,7 @@ module.exports = {
   plugins: ["react", "@typescript-eslint", "import"],
   settings: {
     next: {
-      rootDir: ["web/", "space/", "admin/", "packages/*/"],
+      rootDir: ["."],
     },
   },
   globals: {

packages/eslint-config-custom/package.json

@@ -4,7 +4,6 @@
   "version": "0.22.0",
   "main": "index.js",
   "license": "MIT",
-  "devDependencies": {},
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
@@ -14,6 +13,6 @@
     "eslint-config-turbo": "^1.12.4",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.33.2",
-    "typescript": "^5.3.3"
+    "typescript": "5.4.5"
   }
 }

packages/helpers/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./use-outside-click-detector";

packages/helpers/hooks/use-outside-click-detector.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+
+export const useOutsideClickDetector = (
+  ref: React.RefObject<HTMLElement>,
+  callback: () => void,
+  useCapture = false
+) => {
+  const handleClick = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      // check for the closest element with attribute name data-prevent-outside-click
+      const preventOutsideClickElement = (
+        event.target as HTMLElement | undefined
+      )?.closest("[data-prevent-outside-click]");
+      // if the closest element with attribute name data-prevent-outside-click is found, return
+      if (preventOutsideClickElement) {
+        return;
+      }
+      // else call the callback
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClick, useCapture);
+    return () => {
+      document.removeEventListener("mousedown", handleClick, useCapture);
+    };
+  });
+};

packages/helpers/index.ts

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

packages/helpers/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@plane/helpers",
+  "version": "0.22.0",
+  "description": "Helper functions shared across multiple apps internally",
+  "private": true,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup ./index.ts --format esm,cjs --dts --external react --minify"
+  },
+  "devDependencies": {
+    "@types/node": "^22.5.4",
+    "@types/react": "^18.3.5",
+    "typescript": "^5.6.2",
+    "tsup": "^7.2.0"
+  },
+  "dependencies": {
+    "react": "^18.3.1"
+  }
+}

packages/helpers/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "tsconfig/react-library.json",
+  "compilerOptions": {
+    "jsx": "react"
+  },
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

packages/types/package.json

@@ -2,5 +2,6 @@
   "name": "@plane/types",
   "version": "0.22.0",
   "private": true,
+  "types": "./src/index.d.ts",
   "main": "./src/index.d.ts"
 }