fix: old images not rendered as new ones

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

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

@@ -5,9 +5,11 @@ import { v4 as uuidv4 } from "uuid";
 // extensions
 import { CustomImageNode } from "@/extensions/custom-image";
 // plugins
-import { isFileValid } from "@/plugins/image";
+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> {
@@ -22,10 +24,10 @@ export interface UploadImageExtensionStorage {
   fileMap: Map<string, UploadEntity>;
 }
 
-export type UploadEntity = ({ event: "insert" } | { event: "drop"; file: File }) & { hasOpenedFileInputOnce: boolean };
+export type UploadEntity = ({ event: "insert" } | { event: "drop"; file: File }) & { hasOpenedFileInputOnce?: boolean };
 
 export const CustomImageExtension = (props: TFileHandler) => {
-  const { upload } = props;
+  const { upload, delete: deleteImage, restore: restoreImage } = props;
 
   return Image.extend<{}, UploadImageExtensionStorage>({
     name: "imageComponent",
@@ -57,19 +59,49 @@ export const CustomImageExtension = (props: TFileHandler) => {
         {
           tag: "image-component",
         },
-        {
-          tag: "img",
-        },
       ];
     },
 
     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);
+          console.log("assetUrlWithWorkspaceId restore ", this.name, assetUrlWithWorkspaceId);
+          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>(),
       };
     },
 

packages/editor/src/core/extensions/image/extension.tsx

@@ -1,43 +1,40 @@
 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);
         }
       });
       imageSources.forEach(async (src) => {
         try {
           const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
+          console.log("assetUrlWithWorkspaceId restore ", this.name, assetUrlWithWorkspaceId);
           await restoreImage(assetUrlWithWorkspaceId);
         } catch (error) {
           console.error("Error restoring image: ", error);
@@ -64,4 +61,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

@@ -1,6 +1,8 @@
 import { mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
 import { Image } from "@tiptap/extension-image";
-import { UploadImageExtensionStorage } from "@/extensions/custom-image";
+// extensions
+import { CustomImageNode, UploadImageExtensionStorage } from "@/extensions";
 
 export const CustomImageComponentWithoutProps = () =>
   Image.extend<{}, UploadImageExtensionStorage>({
@@ -33,9 +35,6 @@ export const CustomImageComponentWithoutProps = () =>
         {
           tag: "image-component",
         },
-        {
-          tag: "img",
-        },
       ];
     },
 
@@ -46,8 +45,13 @@ export const CustomImageComponentWithoutProps = () =>
     addStorage() {
       return {
         fileMap: new Map(),
+        deletedImageSet: new Map<string, boolean>(),
       };
     },
+
+    addNodeView() {
+      return ReactNodeViewRenderer(CustomImageNode);
+    },
   });
 
 export default CustomImageComponentWithoutProps;

packages/editor/src/core/extensions/image/image-extension-without-props.tsx

@@ -1,4 +1,7 @@
 import ImageExt from "@tiptap/extension-image";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+// extensions
+import { CustomImageNode } from "@/extensions";
 
 export const ImageExtensionWithoutProps = () =>
   ImageExt.extend({
@@ -13,4 +16,8 @@ export const ImageExtensionWithoutProps = () =>
         },
       };
     },
+
+    addNodeView() {
+      return ReactNodeViewRenderer(CustomImageNode);
+    },
   });

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/helpers/editor-commands.ts

@@ -156,23 +156,3 @@ export const insertImageCommand = (
   };
   input.click();
 };
-
-export const insertImageNewCommand = (editor: Editor, saveSelection?: Selection | null, range?: Range) => {
-  // if (range) editor.chain().focus().deleteRange(range).setImageUpload(saveSelection).run();
-  // const input = document.createElement("input");
-  // input.type = "file";
-  // input.accept = ".jpeg, .jpg, .png, .webp";
-  // input.onchange = async () => {
-  //   if (input.files?.length) {
-  //     const file = input.files[0];
-  //     const pos = saveSelection?.anchor ?? editor.view.state.selection.from;
-  //     const url = await (editor?.commands.uploadImage(file) as unknown as Promise<string>);
-  //     if (!url) {
-  //       throw new Error("Something went wrong while uploading the image");
-  //     }
-  //     editor.chain().setImageBlock({ src: url }).focus().run();
-  //     // startImageUpload(editor, file, editor.view, pos, uploadFile);
-  //   }
-  // };
-  // input.click();
-};

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

@@ -67,11 +67,6 @@ export const useEditor = (props: CustomEditorProps) => {
       }),
       ...editorProps,
     },
-    immediatelyRender: true,
-    shouldRerenderOnTransaction: false,
-    onContentError: (error) => {
-      console.error("Error rendering content:", error);
-    },
     extensions: [
       ...CoreEditorExtensions({
         enableHistory,