[WIKI-400] feat: page navigation pane

admin/styles/globals.css

@@ -332,6 +332,7 @@
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
+  scroll-behavior: smooth;
 }
 
 body {

packages/editor/src/ce/constants/assets.ts

@@ -0,0 +1,6 @@
+// helpers
+import { TAssetMetaDataRecord } from "@/helpers/assets";
+// local imports
+import { ADDITIONAL_EXTENSIONS } from "./extensions";
+
+export const ADDITIONAL_ASSETS_META_DATA_RECORD: Partial<Record<ADDITIONAL_EXTENSIONS, TAssetMetaDataRecord>> = {};

packages/editor/src/ce/constants/extensions.ts

@@ -0,0 +1 @@
+export enum ADDITIONAL_EXTENSIONS {}

packages/editor/src/ce/types/asset.ts

@@ -0,0 +1 @@
+export type TAdditionalEditorAsset = never;

packages/editor/src/ce/types/storage.ts

@@ -1,3 +1,4 @@
+import { CharacterCountStorage } from "@tiptap/extension-character-count";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // extensions
@@ -15,6 +16,7 @@ export type ExtensionStorageMap = {
   [CORE_EXTENSIONS.HEADINGS_LIST]: HeadingExtensionStorage;
   [CORE_EXTENSIONS.MENTION]: MentionExtensionStorage;
   [CORE_EXTENSIONS.UTILITY]: UtilityExtensionStorage;
+  [CORE_EXTENSIONS.CHARACTER_COUNT]: CharacterCountStorage;
 };
 
 export type ExtensionFileSetStorageKey = Extract<keyof ImageExtensionStorage, "deletedImageSet">;

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

@@ -17,7 +17,6 @@ import { EditorRefApi, ICollaborativeDocumentEditor } from "@/types";
 
 const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
   const {
-    onTransaction,
     aiHandler,
     bubbleMenuEnabled = true,
     containerClassName,
@@ -31,6 +30,8 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
     handleEditorReady,
     id,
     mentionHandler,
+    onAssetChange,
+    onTransaction,
     placeholder,
     realtimeConfig,
     serverHandler,
@@ -60,6 +61,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
     handleEditorReady,
     id,
     mentionHandler,
+    onAssetChange,
     onTransaction,
     placeholder,
     realtimeConfig,

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

@@ -38,6 +38,8 @@ const ensurePixelString = <TDefault,>(value: Pixel | TDefault | number | undefin
   return value;
 };
 
+export const getImageBlockId = (id: string) => `editor-image-block-${id}`;
+
 type CustomImageBlockProps = CustomBaseImageNodeViewProps & {
   imageFromFileSystem: string | undefined;
   setFailedToLoadImage: (isError: boolean) => void;
@@ -222,6 +224,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
 
   return (
     <div
+      id={getImageBlockId(node.attrs.id ?? "")}
       ref={containerRef}
       className="group/image-component relative inline-block max-w-full"
       onMouseDown={handleImageMouseDown}

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

@@ -8,6 +8,7 @@ import { CORE_EXTENSIONS } from "@/constants/extension";
 // extensions
 import { CustomBaseImageNodeViewProps, getImageComponentImageFileMap } from "@/extensions/custom-image";
 // helpers
+import { CORE_ASSETS_META_DATA_RECORD } from "@/helpers/assets";
 import { EFileError } from "@/helpers/file";
 import { getExtensionStorage } from "@/helpers/get-extension-storage";
 // hooks
@@ -49,6 +50,16 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
           src: url,
         });
         imageComponentImageFileMap?.delete(imageEntityId);
+        const updatedAttrs: CustomImageUploaderProps["node"]["attrs"] = {
+          ...node.attrs,
+          src: url,
+        };
+        const assetMetaData = CORE_ASSETS_META_DATA_RECORD[CORE_EXTENSIONS.CUSTOM_IMAGE]?.(updatedAttrs);
+        if (assetMetaData) {
+          editor.commands.updateAssetsList?.({
+            asset: assetMetaData,
+          });
+        }
 
         const pos = getPos();
         // get current node
@@ -163,7 +174,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
     }
 
     return "Add an image";
-  }, [draggedInside, failedToLoadImage, isImageBeingUploaded]);
+  }, [draggedInside, editor.isEditable, failedToLoadImage, isImageBeingUploaded]);
 
   return (
     <div

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

@@ -1,5 +1,4 @@
 import { Extension } from "@tiptap/core";
-// prosemirror plugins
 import codemark from "prosemirror-codemark";
 // helpers
 import { restorePublicImages } from "@/helpers/image-helpers";
@@ -8,17 +7,27 @@ import { DropHandlerPlugin } from "@/plugins/drop";
 import { FilePlugins } from "@/plugins/file/root";
 import { MarkdownClipboardPlugin } from "@/plugins/markdown-clipboard";
 // types
-import { TExtensions, TFileHandler, TReadOnlyFileHandler } from "@/types";
+import { TEditorAsset, TExtensions, TFileHandler, TReadOnlyFileHandler } from "@/types";
 
 declare module "@tiptap/core" {
   interface Commands {
     utility: {
       updateAssetsUploadStatus: (updatedStatus: TFileHandler["assetsUploadStatus"]) => () => void;
+      updateAssetsList: (
+        args:
+          | {
+              asset: TEditorAsset;
+            }
+          | {
+              idToRemove: string;
+            }
+      ) => () => void;
     };
   }
 }
 
 export interface UtilityExtensionStorage {
+  assetsList: TEditorAsset[];
   assetsUploadStatus: TFileHandler["assetsUploadStatus"];
   uploadInProgress: boolean;
 }
@@ -59,6 +68,7 @@ export const UtilityExtension = (props: Props) => {
 
     addStorage() {
       return {
+        assetsList: [],
         assetsUploadStatus: isEditable && "assetsUploadStatus" in fileHandler ? fileHandler.assetsUploadStatus : {},
         uploadInProgress: false,
       };
@@ -69,6 +79,21 @@ export const UtilityExtension = (props: Props) => {
         updateAssetsUploadStatus: (updatedStatus) => () => {
           this.storage.assetsUploadStatus = updatedStatus;
         },
+        updateAssetsList: (args) => () => {
+          const uniqueAssets = new Set(this.storage.assetsList);
+          if ("asset" in args) {
+            const alreadyExists = this.storage.assetsList.find((asset) => asset.id === args.asset.id);
+            if (!alreadyExists) {
+              uniqueAssets.add(args.asset);
+            }
+          } else if ("idToRemove" in args) {
+            const asset = this.storage.assetsList.find((asset) => asset.id === args.idToRemove);
+            if (asset) {
+              uniqueAssets.delete(asset);
+            }
+          }
+          this.storage.assetsList = Array.from(uniqueAssets);
+        },
       };
     },
   });

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

@@ -0,0 +1,37 @@
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// extensions
+import { getImageBlockId } from "@/extensions/custom-image/components/image-block";
+// plane editor imports
+import { ADDITIONAL_ASSETS_META_DATA_RECORD } from "@/plane-editor/constants/assets";
+// types
+import { TEditorAsset } from "@/types";
+
+export type TAssetMetaDataRecord = (attrs: ProseMirrorNode["attrs"]) => TEditorAsset | undefined;
+
+export const CORE_ASSETS_META_DATA_RECORD: Partial<Record<CORE_EXTENSIONS, TAssetMetaDataRecord>> = {
+  [CORE_EXTENSIONS.IMAGE]: (attrs) => {
+    if (!attrs?.src) return;
+    return {
+      href: `#${getImageBlockId(attrs?.id ?? "")}`,
+      id: attrs?.id,
+      name: `image-${attrs?.id}`,
+      size: 0,
+      src: attrs?.src,
+      type: CORE_EXTENSIONS.IMAGE,
+    };
+  },
+  [CORE_EXTENSIONS.CUSTOM_IMAGE]: (attrs) => {
+    if (!attrs?.src) return;
+    return {
+      href: `#${getImageBlockId(attrs?.id ?? "")}`,
+      id: attrs?.id,
+      name: `image-${attrs?.id}`,
+      size: 0,
+      src: attrs?.src,
+      type: CORE_EXTENSIONS.CUSTOM_IMAGE,
+    };
+  },
+  ...ADDITIONAL_ASSETS_META_DATA_RECORD,
+};

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

@@ -0,0 +1,55 @@
+import { HocuspocusProvider } from "@hocuspocus/provider";
+import { Editor } from "@tiptap/core";
+import * as Y from "yjs";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+import { CORE_EDITOR_META } from "@/constants/meta";
+// types
+import { EditorReadOnlyRefApi } from "@/types";
+// local imports
+import { getParagraphCount } from "./common";
+import { getExtensionStorage } from "./get-extension-storage";
+import { scrollSummary } from "./scroll-to-node";
+
+type TArgs = {
+  editor: Editor | null;
+  provider: HocuspocusProvider | undefined;
+};
+
+export const getEditorRefHelpers = (args: TArgs): EditorReadOnlyRefApi => {
+  const { editor, provider } = args;
+
+  return {
+    clearEditor: (emitUpdate = false) => {
+      editor?.chain().setMeta(CORE_EDITOR_META.SKIP_FILE_DELETION, true).clearContent(emitUpdate).run();
+    },
+    getDocument: () => {
+      const documentBinary = provider?.document ? Y.encodeStateAsUpdate(provider?.document) : null;
+      const documentHTML = editor?.getHTML() ?? "<p></p>";
+      const documentJSON = editor?.getJSON() ?? null;
+
+      return {
+        binary: documentBinary,
+        html: documentHTML,
+        json: documentJSON,
+      };
+    },
+    getDocumentInfo: () => ({
+      characters: editor ? getExtensionStorage(editor, CORE_EXTENSIONS.CHARACTER_COUNT)?.characters?.() : 0,
+      paragraphs: getParagraphCount(editor?.state),
+      words: editor ? getExtensionStorage(editor, CORE_EXTENSIONS.CHARACTER_COUNT)?.words?.() : 0,
+    }),
+    getHeadings: () => (editor ? getExtensionStorage(editor, CORE_EXTENSIONS.HEADINGS_LIST)?.headings : []),
+    getMarkDown: () => {
+      const markdownOutput = editor?.storage.markdown.getMarkdown();
+      return markdownOutput;
+    },
+    scrollSummary: (marking) => {
+      if (!editor) return;
+      scrollSummary(editor, marking);
+    },
+    setEditorValue: (content, emitUpdate = false) => {
+      editor?.commands.setContent(content, emitUpdate, { preserveWhitespace: true });
+    },
+  };
+};

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

@@ -13,6 +13,7 @@ import { TCollaborativeEditorProps } from "@/types";
 
 export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
   const {
+    onAssetChange,
     onTransaction,
     disabledExtensions,
     editable,
@@ -102,6 +103,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
     forwardedRef,
     handleEditorReady,
     mentionHandler,
+    onAssetChange,
     onTransaction,
     placeholder,
     provider,