[WIKI-181] refactor: file plugins and types

live/package.json

@@ -57,7 +57,7 @@
     "concurrently": "^9.0.1",
     "nodemon": "^3.1.7",
     "ts-node": "^10.9.2",
-    "tsup": "^8.4.0",
+    "tsup": "8.3.0",
     "typescript": "5.3.3"
   }
 }

packages/decorators/package.json

@@ -27,7 +27,7 @@
     "@types/node": "^20.14.9",
     "@types/reflect-metadata": "^0.1.0",
     "@types/ws": "^8.5.10",
-    "tsup": "8.4.0",
+    "tsup": "8.3.0",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {

packages/editor/package.json

@@ -81,7 +81,7 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.2.18",
     "postcss": "^8.4.38",
-    "tsup": "^8.4.0",
+    "tsup": "8.3.0",
     "typescript": "5.3.3"
   },
   "keywords": [

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

@@ -0,0 +1,14 @@
+import { ExtensionFileSetStorageKey } from "@/plane-editor/types/storage";
+
+export const NODE_FILE_MAP: {
+  [key: string]: {
+    fileSetName: ExtensionFileSetStorageKey;
+  };
+} = {
+  image: {
+    fileSetName: "deletedImageSet",
+  },
+  imageComponent: {
+    fileSetName: "deletedImageSet",
+  },
+};

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

@@ -1,5 +1,4 @@
 import { HocuspocusProvider } from "@hocuspocus/provider";
-import { Extensions } from "@tiptap/core";
 import { AnyExtension } from "@tiptap/core";
 import { SlashCommands } from "@/extensions";
 // plane editor types

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

@@ -1,13 +1,20 @@
-import { HeadingExtensionStorage } from "@/extensions";
-import { CustomImageExtensionStorage } from "@/extensions/custom-image";
-import { CustomLinkStorage } from "@/extensions/custom-link";
-import { MentionExtensionStorage } from "@/extensions/mentions";
-import { ImageExtensionStorage } from "@/plugins/image";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// extensions
+import { type HeadingExtensionStorage } from "@/extensions";
+import { type CustomImageExtensionStorage } from "@/extensions/custom-image";
+import { type CustomLinkStorage } from "@/extensions/custom-link";
+import { type ImageExtensionStorage } from "@/extensions/image";
+import { type MentionExtensionStorage } from "@/extensions/mentions";
+import { type UtilityExtensionStorage } from "@/extensions/utility";
 
 export type ExtensionStorageMap = {
-  imageComponent: CustomImageExtensionStorage;
-  image: ImageExtensionStorage;
-  link: CustomLinkStorage;
-  headingList: HeadingExtensionStorage;
-  mention: MentionExtensionStorage;
+  [CORE_EXTENSIONS.CUSTOM_IMAGE]: CustomImageExtensionStorage;
+  [CORE_EXTENSIONS.IMAGE]: ImageExtensionStorage;
+  [CORE_EXTENSIONS.CUSTOM_LINK]: CustomLinkStorage;
+  [CORE_EXTENSIONS.HEADINGS_LIST]: HeadingExtensionStorage;
+  [CORE_EXTENSIONS.MENTION]: MentionExtensionStorage;
+  [CORE_EXTENSIONS.UTILITY]: UtilityExtensionStorage;
 };
+
+export type ExtensionFileSetStorageKey = Extract<keyof ImageExtensionStorage, "deletedImageSet">;

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

@@ -7,7 +7,7 @@ import { DocumentContentLoader, PageRenderer } from "@/components/editors";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
 // extensions
-import { IssueWidget } from "@/extensions";
+import { WorkItemEmbedExtension } from "@/extensions";
 // helpers
 import { getEditorClassNames } from "@/helpers/common";
 // hooks
@@ -39,9 +39,10 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
   } = props;
 
   const extensions: Extensions = [];
+
   if (embedHandler?.issue) {
     extensions.push(
-      IssueWidget({
+      WorkItemEmbedExtension({
         widgetCallback: embedHandler.issue.widgetCallback,
       })
     );

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

@@ -7,7 +7,7 @@ import { PageRenderer } from "@/components/editors";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
 // extensions
-import { IssueWidget } from "@/extensions";
+import { WorkItemEmbedExtension } from "@/extensions";
 // helpers
 import { getEditorClassNames } from "@/helpers/common";
 // hooks
@@ -53,7 +53,7 @@ const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
   const extensions: Extensions = [];
   if (embedHandler?.issue) {
     extensions.push(
-      IssueWidget({
+      WorkItemEmbedExtension({
         widgetCallback: embedHandler.issue.widgetCallback,
       })
     );

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

@@ -4,6 +4,7 @@ import { FC, ReactNode, useRef } from "react";
 import { cn } from "@plane/utils";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
+import { CORE_EXTENSIONS } from "@/constants/extension";
 // types
 import { TDisplayConfig } from "@/types";
 // components
@@ -36,12 +37,12 @@ export const EditorContainer: FC<EditorContainerProps> = (props) => {
       if (
         currentNode.content.size === 0 && // Check if the current node is empty
         !(
-          editor.isActive("orderedList") ||
-          editor.isActive("bulletList") ||
-          editor.isActive("taskItem") ||
-          editor.isActive("table") ||
-          editor.isActive("blockquote") ||
-          editor.isActive("codeBlock")
+          editor.isActive(CORE_EXTENSIONS.ORDERED_LIST) ||
+          editor.isActive(CORE_EXTENSIONS.BULLET_LIST) ||
+          editor.isActive(CORE_EXTENSIONS.TASK_ITEM) ||
+          editor.isActive(CORE_EXTENSIONS.TABLE) ||
+          editor.isActive(CORE_EXTENSIONS.BLOCKQUOTE) ||
+          editor.isActive(CORE_EXTENSIONS.CODE_BLOCK)
         ) // Check if it's an empty node within an orderedList, bulletList, taskItem, table, quote or code block
       ) {
         return;
@@ -53,10 +54,10 @@ export const EditorContainer: FC<EditorContainerProps> = (props) => {
       const lastNode = lastNodePos.node();
 
       // Check if the last node is a  not paragraph
-      if (lastNode && lastNode.type.name !== "paragraph") {
+      if (lastNode && lastNode.type.name !== CORE_EXTENSIONS.PARAGRAPH) {
         // If last node is not a paragraph, insert a new paragraph at the end
         const endPosition = editor?.state.doc.content.size;
-        editor?.chain().insertContentAt(endPosition, { type: "paragraph" }).run();
+        editor?.chain().insertContentAt(endPosition, { type: CORE_EXTENSIONS.PARAGRAPH }).run();
 
         // Focus the newly added paragraph for immediate editing
         editor

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

@@ -12,7 +12,7 @@ interface LinkViewContainerProps {
 export const LinkViewContainer: FC<LinkViewContainerProps> = ({ editor, containerRef }) => {
   const [linkViewProps, setLinkViewProps] = useState<LinkViewProps>();
   const [isOpen, setIsOpen] = useState(false);
-  const [virtualElement, setVirtualElement] = useState<any>(null);
+  const [virtualElement, setVirtualElement] = useState<Element | null>(null);
 
   const editorState = useEditorState({
     editor,

packages/editor/src/core/components/links/link-edit-view.tsx

@@ -51,7 +51,9 @@ export const LinkEditView = ({ viewProps }: LinkEditViewProps) => {
         if (!hasSubmitted.current && !linkRemoved && initialUrl === "") {
           try {
             removeLink();
-          } catch (e) {}
+          } catch (e) {
+            console.error("Error removing link", e);
+          }
         }
       },
     [linkRemoved, initialUrl]

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

@@ -1,7 +1,9 @@
-import { useCallback, useEffect, useRef } from "react";
 import { Editor } from "@tiptap/react";
-import tippy, { Instance } from "tippy.js";
 import { Copy, LucideIcon, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useRef } from "react";
+import tippy, { Instance } from "tippy.js";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
 
 interface BlockMenuProps {
   editor: Editor;
@@ -102,7 +104,8 @@ export const BlockMenu = (props: BlockMenuProps) => {
       key: "duplicate",
       label: "Duplicate",
       isDisabled:
-        editor.state.selection.content().content.firstChild?.type.name === "image" || editor.isActive("imageComponent"),
+        editor.state.selection.content().content.firstChild?.type.name === CORE_EXTENSIONS.IMAGE ||
+        editor.isActive(CORE_EXTENSIONS.CUSTOM_IMAGE),
       onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();

packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx

@@ -1,8 +1,10 @@
 import { Editor } from "@tiptap/core";
 import { Check, Link, Trash2 } from "lucide-react";
 import { Dispatch, FC, SetStateAction, useCallback, useRef, useState } from "react";
-// plane utils
+// plane imports
 import { cn } from "@plane/utils";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
 import { setLinkEditor, unsetLinkEditor } from "@/helpers/editor-commands";
@@ -43,7 +45,7 @@ export const BubbleMenuLinkSelector: FC<Props> = (props) => {
           "h-full flex items-center gap-1 px-3 text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 rounded transition-colors",
           {
             "bg-custom-background-80": isOpen,
-            "text-custom-text-100": editor.isActive("link"),
+            "text-custom-text-100": editor.isActive(CORE_EXTENSIONS.CUSTOM_LINK),
           }
         )}
         onClick={(e) => {

packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx

@@ -1,6 +1,6 @@
-import { Dispatch, FC, SetStateAction } from "react";
 import { Editor } from "@tiptap/react";
 import { Check, ChevronDown } from "lucide-react";
+import { Dispatch, FC, SetStateAction } from "react";
 // plane utils
 import { cn } from "@plane/utils";
 // components

packages/editor/src/core/components/menus/bubble-menu/root.tsx

@@ -18,6 +18,7 @@ import {
 } from "@/components/menus";
 // constants
 import { COLORS_LIST } from "@/constants/common";
+import { CORE_EXTENSIONS } from "@/constants/extension";
 // extensions
 import { isCellSelection } from "@/extensions/table/table/utilities/is-cell-selection";
 // local components
@@ -90,8 +91,8 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: { editor: Edi
       if (
         empty ||
         !editor.isEditable ||
-        editor.isActive("image") ||
-        editor.isActive("imageComponent") ||
+        editor.isActive(CORE_EXTENSIONS.IMAGE) ||
+        editor.isActive(CORE_EXTENSIONS.CUSTOM_IMAGE) ||
         isNodeSelection(selection) ||
         isCellSelection(selection) ||
         isSelecting