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

apiserver/plane/api/views/page.py

@@ -148,10 +148,12 @@ def partial_update(self, request, slug, project_id, pk):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-    def lock(self, request, slug, project_id, pk):
+
+    def lock(self, request, slug, project_id, page_id):
+
         page = Page.objects.filter(
-            pk=pk, workspace__slug=slug, project_id=project_id
-        )
+            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:
@@ -163,8 +165,12 @@ def lock(self, request, slug, project_id, pk):
         page.save()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
-    def unlock(self, request, slug, project_id, pk):
-        page = Page.objects.get(pk=pk, workspace__slug=slug, project_id=project_id)
+    def unlock(self, request, slug, project_id, page_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:
@@ -223,16 +229,14 @@ def list(self, request, slug, project_id):
                 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)
+        if page_view == "shared":
+            queryset = queryset.filter(owned_by=request.user, access=0)
             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)
+        if page_view == "private":
+            queryset = queryset.filter(owned_by=request.user, access=1)
             return Response(
                 PageSerializer(queryset, many=True).data, status=status.HTTP_200_OK
             )
@@ -417,4 +421,3 @@ def get(self, request, slug, project_id, page_id):
         return Response(
             SubPageSerializer(pages, many=True).data, status=status.HTTP_200_OK
         )
-

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

packages/editor/document-editor/src/ui/components/editor-header.tsx

@@ -0,0 +1,79 @@
+import { Editor } from "@tiptap/react"
+import { Lock, ArchiveIcon, MenuSquare } from "lucide-react"
+import { useRef, useState } from "react"
+import { usePopper } from "react-popper"
+import { IMarking, UploadImage } from ".."
+import { FixedMenu } from "../menu"
+import { DocumentDetails } from "../types/editor-types"
+import { AlertLabel } from "./alert-label"
+import { ContentBrowser } from "./content-browser"
+import { IVerticalDropdownItemProps, VerticalDropdownMenu } from "./vertical-dropdown-menu"
+
+interface IEditorHeader {
+  editor: Editor,
+  KanbanMenuOptions: IVerticalDropdownItemProps[],
+  sidePeakVisible: boolean,
+  setSidePeakVisible: (currentState: boolean) => void,
+  markings: IMarking[],
+  isLocked: boolean,
+  isArchived: boolean,
+  archivedAt?: Date,
+  readonly: boolean,
+  uploadFile?: UploadImage,
+  setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void,
+  documentDetails: DocumentDetails
+}
+
+export const EditorHeader = ({ documentDetails, archivedAt, editor, sidePeakVisible, readonly, setSidePeakVisible, markings, uploadFile, setIsSubmitting, KanbanMenuOptions, isArchived, isLocked }: IEditorHeader) => {
+
+  const summaryMenuRef = useRef(null);
+  const summaryButtonRef = useRef(null);
+  const [summaryPopoverVisible, setSummaryPopoverVisible] = useState(false);
+
+  const { styles: summaryPopoverStyles, attributes: summaryPopoverAttributes } = usePopper(summaryButtonRef.current, summaryMenuRef.current, {
+    placement: "bottom-start"
+  })
+
+  return (
+
+    <div className="border-custom-border self-stretch flex flex-col border-b border-solid max-md:max-w-full">
+      <div
+        className="self-center flex ml-0 w-full items-start justify-between gap-5 max-md:max-w-full max-md:flex-wrap max-md:justify-center">
+        <div className={"flex flex-row items-center"}>
+          <div
+            onMouseEnter={() => setSummaryPopoverVisible(true)}
+            onMouseLeave={() => setSummaryPopoverVisible(false)}
+          >
+            <button
+              ref={summaryButtonRef}
+              className={"p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors"}
+              onClick={() => {
+                setSidePeakVisible(!sidePeakVisible)
+                setSummaryPopoverVisible(false)
+              }}
+            >
+              <MenuSquare
+                size={20}
+              />
+            </button>
+            {summaryPopoverVisible &&
+              <div style={summaryPopoverStyles.popper} {...summaryPopoverAttributes.popper} className="z-10 h-[300px] w-[300px] ml-[40px] mt-[40px] shadow-xl rounded border-custom-border border-solid border-2 bg-custom-background-100 border-b pl-3 pr-3 pb-3 overflow-scroll">
+                <ContentBrowser editor={editor} markings={markings} />
+              </div>
+            }
+          </div>
+          {isLocked && <AlertLabel Icon={Lock} backgroundColor={"bg-red-200"} label={"Locked"} />}
+          {(isArchived && archivedAt) && <AlertLabel Icon={ArchiveIcon} backgroundColor={"bg-blue-200"} label={`Archived at ${new Date(archivedAt).toLocaleString()}`} />}
+        </div>
+
+        {(!readonly && uploadFile) && <FixedMenu editor={editor} uploadFile={uploadFile} setIsSubmitting={setIsSubmitting} />}
+        <div className="self-center flex items-start gap-3 my-auto max-md:justify-center"
+        >
+          {!isArchived && <p className="text-sm text-custom-text-300">{`Last updated at ${new Date(documentDetails.last_updated_at).toLocaleString()}`}</p>}
+          <VerticalDropdownMenu items={KanbanMenuOptions} />
+        </div>
+      </div>
+    </div>
+  )
+
+}

packages/editor/document-editor/src/ui/components/heading-component.tsx

@@ -0,0 +1,29 @@
+export const HeadingComp = ({
+  heading,
+  onClick,
+}: {
+  heading: string;
+  onClick: (event: React.MouseEvent<HTMLParagraphElement, MouseEvent>) => void;
+}) => (
+  <h3
+    onClick={onClick}
+    className="ml-4 mt-3 cursor-pointer text-sm font-bold font-medium leading-[125%] tracking-tight hover:text-custom-primary max-md:ml-2.5"
+  >
+    {heading}
+  </h3>
+);
+
+export const SubheadingComp = ({
+  subHeading,
+  onClick,
+}: {
+  subHeading: string;
+  onClick: (event: React.MouseEvent<HTMLParagraphElement, MouseEvent>) => void;
+}) => (
+  <p
+    onClick={onClick}
+    className="ml-6 mt-2 text-xs cursor-pointer font-medium tracking-tight text-gray-400 hover:text-custom-primary"
+  >
+    {subHeading}
+  </p>
+);

packages/editor/document-editor/src/ui/components/page-renderer.tsx

@@ -0,0 +1,33 @@
+import { EditorContainer, EditorContentWrapper } from "@plane/editor-core"
+import { Editor } from "@tiptap/react"
+import { DocumentDetails } from "../types/editor-types"
+
+interface IPageRenderer {
+  sidePeakVisible: boolean,
+  documentDetails: DocumentDetails ,
+  editor: Editor,
+  editorClassNames: string, 
+  editorContentCustomClassNames?: string 
+}
+
+export const PageRenderer = ({ sidePeakVisible, documentDetails, editor, editorClassNames, editorContentCustomClassNames }: IPageRenderer) => {
+  return (
+    <div className={`flex h-[88vh] flex-col w-full max-md:w-full max-md:ml-0  transition-all duration-200 ease-in-out ${sidePeakVisible ? 'ml-[3%] ' : 'ml-0'}`}>
+      <div className="items-start mt-4 h-full flex flex-col w-fit max-md:max-w-full overflow-auto">
+        <div className="flex flex-col py-2 max-md:max-w-full">
+          <h1
+            className="border-none outline-none bg-transparent text-4xl font-bold leading-8 tracking-tight self-center w-[700px] max-w-full"
+          >{documentDetails.title}</h1>
+        </div>
+        <div className="border-custom-border border-b border-solid self-stretch w-full h-0.5 mt-3" />
+        <div className="flex flex-col max-md:max-w-full">
+          <EditorContainer editor={editor} editorClassNames={editorClassNames}>
+            <div className="flex flex-col">
+              <EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
+            </div>
+          </EditorContainer >
+        </div>
+      </div>
+    </div>
+  )
+}