feat: New Pages with Enhanced Document Editor Packages made over Editor Core 📝

apiserver/plane/app/views/page.py

@@ -136,7 +136,9 @@ def partial_update(self, request, slug, project_id, pk):
             )
 
     def lock(self, request, slug, project_id, page_id):
-        page = Page.objects.get(pk=page_id, workspace__slug=slug, project_id=project_id)
+        page = Page.objects.filter(
+            pk=page_id, workspace__slug=slug, project_id=project_id
+        ).first()
 
         # only the owner can lock the page
         if request.user.id != page.owned_by_id:
@@ -149,7 +151,9 @@ def lock(self, request, slug, project_id, page_id):
         return Response(status=status.HTTP_204_NO_CONTENT)
 
     def unlock(self, request, slug, project_id, page_id):
-        page = Page.objects.get(pk=page_id, workspace__slug=slug, project_id=project_id)
+        page = Page.objects.filter(
+            pk=page_id, workspace__slug=slug, project_id=project_id
+        ).first()
 
         # only the owner can unlock the page
         if request.user.id != page.owned_by_id:
@@ -164,66 +168,8 @@ def unlock(self, request, slug, project_id, page_id):
 
     def list(self, request, slug, project_id):
         queryset = self.get_queryset().filter(archived_at__isnull=True)
-        page_view = request.GET.get("page_view", False)
-
-        if not page_view:
-            return Response(
-                {"error": "Page View parameter is required"},
-                status=status.HTTP_400_BAD_REQUEST,
-            )
-
-        # All Pages
-        if page_view == "all":
-            return Response(
-                PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK
-            )
-
-        # Recent pages
-        if page_view == "recent":
-            current_time = date.today()
-            day_before = current_time - timedelta(days=1)
-            todays_pages = queryset.filter(updated_at__date=date.today())
-            yesterdays_pages = queryset.filter(updated_at__date=day_before)
-            earlier_this_week = queryset.filter(
-                updated_at__date__range=(
-                    (timezone.now() - timedelta(days=7)),
-                    (timezone.now() - timedelta(days=2)),
-                )
-            )
-            return Response(
-                {
-                    "today": PageSerializer(todays_pages, many=True).data,
-                    "yesterday": PageSerializer(yesterdays_pages, many=True).data,
-                    "earlier_this_week": PageSerializer(
-                        earlier_this_week, many=True
-                    ).data,
-                },
-                status=status.HTTP_200_OK,
-            )
-
-        # Favorite Pages
-        if page_view == "favorite":
-            queryset = queryset.filter(is_favorite=True)
-            return Response(
-                PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK
-            )
-
-        # My pages
-        if page_view == "created_by_me":
-            queryset = queryset.filter(owned_by=request.user)
-            return Response(
-                PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK
-            )
-
-        # Created by other Pages
-        if page_view == "created_by_other":
-            queryset = queryset.filter(~Q(owned_by=request.user), access=0)
-            return Response(
-                PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK
-            )
-
         return Response(
-            {"error": "No matching view found"}, status=status.HTTP_400_BAD_REQUEST
+            PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK
         )
 
     def archive(self, request, slug, project_id, page_id):
@@ -247,29 +193,44 @@ def unarchive(self, request, slug, project_id, page_id):
                 {"error": "Only the owner of the page can unarchive a page"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        
+
         # if parent page is archived then the page will be un archived breaking the hierarchy
         if page.parent_id and page.parent.archived_at:
             page.parent = None
-            page.save(update_fields=['parent'])
+            page.save(update_fields=["parent"])
 
         unarchive_archive_page_and_descendants(page_id, None)
 
         return Response(status=status.HTTP_204_NO_CONTENT)
 
     def archive_list(self, request, slug, project_id):
-        pages = (
-            Page.objects.filter(
-                project_id=project_id,
-                workspace__slug=slug,
-            )
-            .filter(archived_at__isnull=False)
-        )
+        pages = Page.objects.filter(
+            project_id=project_id,
+            workspace__slug=slug,
+        ).filter(archived_at__isnull=False)
 
         return Response(
             PageSerializer(pages, many=True).data, status=status.HTTP_200_OK
         )
 
+    def destroy(self, request, slug, project_id, pk):
+        page = Page.objects.get(pk=pk, workspace__slug=slug, project_id=project_id)
+
+        if page.archived_at is None:
+            return Response(
+                {"error": "The page should be archived before deleting"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # remove parent from all the children
+        _ = Page.objects.filter(
+            parent_id=pk, project_id=project_id, workspace__slug=slug
+        ).update(parent=None)
+
+
+        page.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
 
 class PageFavoriteViewSet(BaseViewSet):
     permission_classes = [
@@ -306,6 +267,7 @@ def destroy(self, request, slug, project_id, page_id):
         page_favorite.delete()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
+
 class PageLogEndpoint(BaseAPIView):
     permission_classes = [
         ProjectEntityPermission,
@@ -397,4 +359,4 @@ def get(self, request, slug, project_id, page_id):
         )
         return Response(
             SubPageSerializer(pages, many=True).data, status=status.HTTP_200_OK
-        )
+        )

apiserver/plane/bgtasks/issue_automation_task.py

@@ -12,15 +12,14 @@
 from sentry_sdk import capture_exception
 
 # Module imports
-from plane.db.models import Issue, Project, State, Page
+from plane.db.models import Issue, Project, State
 from plane.bgtasks.issue_activites_task import issue_activity
 
 
 @shared_task
 def archive_and_close_old_issues():
     archive_old_issues()
     close_old_issues()
-    delete_archived_pages()
 
 
 def archive_old_issues():
@@ -166,21 +165,4 @@ def close_old_issues():
         if settings.DEBUG:
             print(e)
         capture_exception(e)
-        return
-
-
-def delete_archived_pages():
-    try:
-        pages_to_delete = Page.objects.filter(
-            archived_at__isnull=False,
-            archived_at__lte=(timezone.now() - timedelta(days=30)),
-        )
-
-        pages_to_delete._raw_delete(pages_to_delete.db)
-        return 
-    except Exception as e:
-        if settings.DEBUG:
-            print(e)
-        capture_exception(e)
-        return
-
+        return

apiserver/plane/db/models/issue.py

@@ -133,6 +133,7 @@ def save(self, *args, **kwargs):
             except ImportError:
                 pass
 
+
         if self._state.adding:
             # Get the maximum display_id value from the database
             last_id = IssueSequence.objects.filter(project=self.project).aggregate(

packages/editor/core/src/ui/hooks/useEditor.tsx

@@ -18,6 +18,7 @@ interface CustomEditorProps {
   value: string;
   deleteFile: DeleteImage;
   debouncedUpdatesEnabled?: boolean;
+  onStart?: (json: any, html: string) => void;
   onChange?: (json: any, html: string) => void;
   extensions?: any;
   editorProps?: EditorProps;
@@ -34,6 +35,7 @@ export const useEditor = ({
   editorProps = {},
   value,
   extensions = [],
+  onStart,
   onChange,
   setIsSubmitting,
   forwardedRef,
@@ -60,6 +62,9 @@ export const useEditor = ({
       ],
       content:
         typeof value === "string" && value.trim() !== "" ? value : "<p></p>",
+      onCreate: async ({ editor }) => {
+        onStart?.(editor.getJSON(), getTrimmedHTML(editor.getHTML()))
+      },
       onUpdate: async ({ editor }) => {
         // for instant feedback loop
         setIsSubmitting?.("submitting");

packages/editor/document-editor/Readme.md

@@ -0,0 +1 @@
+# Document Editor

packages/editor/document-editor/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@plane/document-editor",
+  "version": "0.0.1",
+  "description": "Package that powers Plane's Pages Editor",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist/**/*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "next": "12.3.2",
+    "next-themes": "^0.2.1",
+    "react": "^18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "dependencies": {
+    "@headlessui/react": "^1.7.17",
+    "@plane/ui": "*",
+    "@plane/editor-core": "*",
+    "@popperjs/core": "^2.11.8",
+    "@tiptap/core": "^2.1.7",
+    "@tiptap/extension-code-block-lowlight": "^2.1.11",
+    "@tiptap/extension-horizontal-rule": "^2.1.11",
+    "@tiptap/extension-list-item": "^2.1.11",
+    "@tiptap/extension-placeholder": "^2.1.11",
+    "@tiptap/suggestion": "^2.1.7",
+    "@types/node": "18.15.3",
+    "@types/react": "^18.2.5",
+    "@types/react-dom": "18.0.11",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^1.2.1",
+    "eslint": "8.36.0",
+    "eslint-config-next": "13.2.4",
+    "eventsource-parser": "^0.1.0",
+    "highlight.js": "^11.8.0",
+    "lowlight": "^3.0.0",
+    "lucide-react": "^0.244.0",
+    "react-markdown": "^8.0.7",
+    "react-popper": "^2.3.0",
+    "tailwind-merge": "^1.14.0",
+    "tippy.js": "^6.3.7",
+    "tiptap-markdown": "^0.8.2",
+    "use-debounce": "^9.0.4"
+  },
+  "devDependencies": {
+    "eslint": "^7.32.0",
+    "postcss": "^8.4.29",
+    "tailwind-config-custom": "*",
+    "tsconfig": "*",
+    "tsup": "^7.2.0",
+    "typescript": "4.9.5"
+  },
+  "keywords": [
+    "editor",
+    "rich-text",
+    "markdown",
+    "nextjs",
+    "react"
+  ]
+}

packages/editor/document-editor/postcss.config.js

@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  };

packages/editor/document-editor/src/index.ts

@@ -0,0 +1,3 @@
+export { DocumentEditor, DocumentEditorWithRef } from "./ui"
+export { DocumentReadOnlyEditor, DocumentReadOnlyEditorWithRef } from "./ui/readonly"
+export { FixedMenu } from "./ui/menu/fixed-menu"

packages/editor/document-editor/src/ui/components/alert-label.tsx

@@ -0,0 +1,19 @@
+import { Icon } from "lucide-react"
+
+interface IAlertLabelProps {
+	Icon: Icon,
+	backgroundColor: string,
+	textColor?: string,
+	label: string,
+}
+
+export const AlertLabel = ({ Icon, backgroundColor,textColor, label }: IAlertLabelProps) => {
+
+  return (
+    <div className={`text-xs flex items-center gap-1 ${backgroundColor} p-0.5 pl-3 pr-3 mr-1 rounded`}>
+      <Icon size={12} />
+      <span className={`normal-case ${textColor}`}>{label}</span>
+    </div>
+  )
+
+}

packages/editor/document-editor/src/ui/components/content-browser.tsx

@@ -0,0 +1,40 @@
+import { HeadingComp, SubheadingComp } from "./heading-component";
+import { IMarking } from "..";
+import { Editor } from "@tiptap/react";
+import { scrollSummary } from "../utils/editor-summary-utils";
+
+interface ContentBrowserProps {
+  editor: Editor;
+  markings: IMarking[];
+}
+
+export const ContentBrowser = ({
+  editor,
+  markings,
+}: ContentBrowserProps) => (
+  <div className="mt-4 flex w-[250px] flex-col h-full">
+    <h2 className="ml-4 border-b border-solid border-custom-border py-5 font-medium leading-[85.714%] tracking-tight max-md:ml-2.5">
+      Table of Contents
+    </h2>
+    <div className="mt-3 h-0.5 w-full self-stretch border-custom-border" />
+    {markings.length !== 0 ? (
+      markings.map((marking) =>
+        marking.level === 1 ? (
+          <HeadingComp
+            onClick={() => scrollSummary(editor, marking)}
+            heading={marking.text}
+          />
+        ) : (
+          <SubheadingComp
+            onClick={() => scrollSummary(editor, marking)}
+            subHeading={marking.text}
+          />
+        )
+      )
+    ) : (
+      <p className="ml-3 mr-3 flex h-full items-center px-5 text-center text-xs text-gray-500">
+        {"Headings will be displayed here for Navigation"}
+      </p>
+    )}
+  </div>
+);