[WIKI-471] refactor: custom image extension

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

@@ -2,7 +2,7 @@
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // extensions
 import { type HeadingExtensionStorage } from "@/extensions";
-import { type CustomImageExtensionStorage } from "@/extensions/custom-image";
+import { type CustomImageExtensionStorage } from "@/extensions/custom-image/types";
 import { type CustomLinkStorage } from "@/extensions/custom-link";
 import { type ImageExtensionStorage } from "@/extensions/image";
 import { type MentionExtensionStorage } from "@/extensions/mentions";

packages/editor/src/core/extensions/core-without-props.ts

@@ -12,10 +12,10 @@ import { CustomCalloutExtensionConfig } from "./callout/extension-config";
 import { CustomCodeBlockExtensionWithoutProps } from "./code/without-props";
 import { CustomCodeInlineExtension } from "./code-inline";
 import { CustomColorExtension } from "./custom-color";
+import { CustomImageExtensionConfig } from "./custom-image/extension-config";
 import { CustomLinkExtension } from "./custom-link";
 import { CustomHorizontalRule } from "./horizontal-rule";
-import { ImageExtensionWithoutProps } from "./image";
-import { CustomImageComponentWithoutProps } from "./image/image-component-without-props";
+import { ImageExtensionConfig } from "./image";
 import { CustomMentionExtensionConfig } from "./mentions/extension-config";
 import { CustomQuoteExtension } from "./quote";
 import { TableHeader, TableCell, TableRow, Table } from "./table";
@@ -72,12 +72,8 @@ export const CoreEditorExtensionsWithoutProps = [
         "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
     },
   }),
-  ImageExtensionWithoutProps.configure({
-    HTMLAttributes: {
-      class: "rounded-md",
-    },
-  }),
-  CustomImageComponentWithoutProps,
+  ImageExtensionConfig,
+  CustomImageExtensionConfig,
   TiptapUnderline,
   TextStyle,
   TaskList.configure({

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

@@ -1,68 +1,42 @@
 import { NodeSelection } from "@tiptap/pm/state";
 import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
-// plane utils
+// plane imports
 import { cn } from "@plane/utils";
-// extensions
-import { CustomBaseImageNodeViewProps, ImageToolbarRoot } from "@/extensions/custom-image";
+// local imports
+import { Pixel, TCustomImageAttributes, TCustomImageSize } from "../types";
+import { ensurePixelString } from "../utils";
+import type { CustomImageNodeViewProps } from "./node-view";
+import { ImageToolbarRoot } from "./toolbar";
 import { ImageUploadStatus } from "./upload-status";
 
 const MIN_SIZE = 100;
 
-type Pixel = `${number}px`;
-
-type PixelAttribute<TDefault> = Pixel | TDefault;
-
-export type ImageAttributes = {
-  src: string | null;
-  width: PixelAttribute<"35%" | number>;
-  height: PixelAttribute<"auto" | number>;
-  aspectRatio: number | null;
-  id: string | null;
-};
-
-type Size = {
-  width: PixelAttribute<"35%">;
-  height: PixelAttribute<"auto">;
-  aspectRatio: number | null;
-};
-
-const ensurePixelString = <TDefault,>(value: Pixel | TDefault | number | undefined | null, defaultValue?: TDefault) => {
-  if (!value || value === defaultValue) {
-    return defaultValue;
-  }
-
-  if (typeof value === "number") {
-    return `${value}px` satisfies Pixel;
-  }
-
-  return value;
-};
-
-type CustomImageBlockProps = CustomBaseImageNodeViewProps & {
-  imageFromFileSystem: string | undefined;
-  setFailedToLoadImage: (isError: boolean) => void;
+type CustomImageBlockProps = CustomImageNodeViewProps & {
   editorContainer: HTMLDivElement | null;
+  imageFromFileSystem: string | undefined;
   setEditorContainer: (editorContainer: HTMLDivElement | null) => void;
+  setFailedToLoadImage: (isError: boolean) => void;
   src: string | undefined;
 };
 
 export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   // props
   const {
-    node,
-    updateAttributes,
-    setFailedToLoadImage,
-    imageFromFileSystem,
-    selected,
-    getPos,
     editor,
     editorContainer,
-    src: resolvedImageSrc,
+    extension,
+    getPos,
+    imageFromFileSystem,
+    node,
+    selected,
     setEditorContainer,
+    setFailedToLoadImage,
+    src: resolvedImageSrc,
+    updateAttributes,
   } = props;
   const { width: nodeWidth, height: nodeHeight, aspectRatio: nodeAspectRatio, src: imgNodeSrc } = node.attrs;
   // states
-  const [size, setSize] = useState<Size>({
+  const [size, setSize] = useState<TCustomImageSize>({
     width: ensurePixelString(nodeWidth, "35%") ?? "35%",
     height: ensurePixelString(nodeHeight, "auto") ?? "auto",
     aspectRatio: nodeAspectRatio || null,
@@ -77,7 +51,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   const [hasTriedRestoringImageOnce, setHasTriedRestoringImageOnce] = useState(false);
 
   const updateAttributesSafely = useCallback(
-    (attributes: Partial<ImageAttributes>, errorMessage: string) => {
+    (attributes: Partial<TCustomImageAttributes>, errorMessage: string) => {
       try {
         updateAttributes(attributes);
       } catch (error) {
@@ -114,7 +88,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       const initialWidth = Math.max(editorWidth * 0.35, MIN_SIZE);
       const initialHeight = initialWidth / aspectRatioCalculated;
 
-      const initialComputedSize = {
+      const initialComputedSize: TCustomImageSize = {
         width: `${Math.round(initialWidth)}px` satisfies Pixel,
         height: `${Math.round(initialHeight)}px` satisfies Pixel,
         aspectRatio: aspectRatioCalculated,
@@ -139,7 +113,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       }
     }
     setInitialResizeComplete(true);
-  }, [nodeWidth, updateAttributes, editorContainer, nodeAspectRatio]);
+  }, [nodeWidth, updateAttributesSafely, editorContainer, nodeAspectRatio, setEditorContainer]);
 
   // for real time resizing
   useLayoutEffect(() => {
@@ -168,7 +142,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   const handleResizeEnd = useCallback(() => {
     setIsResizing(false);
     updateAttributesSafely(size, "Failed to update attributes at the end of resizing:");
-  }, [size, updateAttributes]);
+  }, [size, updateAttributesSafely]);
 
   const handleResizeStart = useCallback((e: React.MouseEvent | React.TouchEvent) => {
     e.preventDefault();
@@ -242,7 +216,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
         onLoad={handleImageLoad}
         onError={async (e) => {
           // for old image extension this command doesn't exist or if the image failed to load for the first time
-          if (!editor?.commands.restoreImage || hasTriedRestoringImageOnce) {
+          if (!extension.options.restoreImage || hasTriedRestoringImageOnce) {
             setFailedToLoadImage(true);
             return;
           }
@@ -253,7 +227,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
             if (!imgNodeSrc) {
               throw new Error("No source image to restore from");
             }
-            await editor?.commands.restoreImage?.(imgNodeSrc);
+            await extension.options.restoreImage?.(imgNodeSrc);
             if (!imageRef.current) {
               throw new Error("Image reference not found");
             }
@@ -289,10 +263,10 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
             "absolute top-1 right-1 z-20 bg-black/40 rounded opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity"
           }
           image={{
-            src: resolvedImageSrc,
-            aspectRatio: size.aspectRatio === null ? 1 : size.aspectRatio,
-            height: size.height,
             width: size.width,
+            height: size.height,
+            aspectRatio: size.aspectRatio === null ? 1 : size.aspectRatio,
+            src: resolvedImageSrc,
           }}
         />
       )}

packages/editor/src/core/extensions/custom-image/components/image-node.tsx → packages/editor/src/core/extensions/custom-image/components/node-view.tsx

@@ -2,25 +2,26 @@ import { Editor, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { useEffect, useRef, useState } from "react";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
-// extensions
-import { CustomImageBlock, CustomImageUploader, ImageAttributes } from "@/extensions/custom-image";
 // helpers
 import { getExtensionStorage } from "@/helpers/get-extension-storage";
+// local imports
+import type { CustomImageExtension, TCustomImageAttributes } from "../types";
+import { CustomImageBlock } from "./block";
+import { CustomImageUploader } from "./uploader";
 
-export type CustomBaseImageNodeViewProps = {
+export type CustomImageNodeViewProps = Omit<NodeViewProps, "extension" | "updateAttributes"> & {
+  extension: CustomImageExtension;
   getPos: () => number;
   editor: Editor;
   node: NodeViewProps["node"] & {
-    attrs: ImageAttributes;
+    attrs: TCustomImageAttributes;
   };
-  updateAttributes: (attrs: Partial<ImageAttributes>) => void;
+  updateAttributes: (attrs: Partial<TCustomImageAttributes>) => void;
   selected: boolean;
 };
 
-export type CustomImageNodeProps = NodeViewProps & CustomBaseImageNodeViewProps;
-
-export const CustomImageNode = (props: CustomImageNodeProps) => {
-  const { getPos, editor, node, updateAttributes, selected } = props;
+export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) => {
+  const { editor, extension, node } = props;
   const { src: imgNodeSrc } = node.attrs;
 
   const [isUploaded, setIsUploaded] = useState(false);
@@ -50,41 +51,37 @@ export const CustomImageNode = (props: CustomImageNodeProps) => {
   }, [resolvedSrc]);
 
   useEffect(() => {
+    if (!imgNodeSrc) {
+      setResolvedSrc(undefined);
+      return;
+    }
+
     const getImageSource = async () => {
-      // @ts-expect-error function not expected here, but will still work and don't remove await
-      const url: string = await editor?.commands?.getImageSource?.(imgNodeSrc);
-      setResolvedSrc(url as string);
+      const url = await extension.options.getImageSource?.(imgNodeSrc);
+      setResolvedSrc(url);
     };
     getImageSource();
-  }, [imgNodeSrc]);
+  }, [imgNodeSrc, extension.options]);
 
   return (
     <NodeViewWrapper>
       <div className="p-0 mx-0 my-2" data-drag-handle ref={imageComponentRef}>
         {(isUploaded || imageFromFileSystem) && !failedToLoadImage ? (
           <CustomImageBlock
-            imageFromFileSystem={imageFromFileSystem}
             editorContainer={editorContainer}
-            editor={editor}
-            src={resolvedSrc}
-            getPos={getPos}
-            node={node}
+            imageFromFileSystem={imageFromFileSystem}
             setEditorContainer={setEditorContainer}
             setFailedToLoadImage={setFailedToLoadImage}
-            selected={selected}
-            updateAttributes={updateAttributes}
+            src={resolvedSrc}
+            {...props}
           />
         ) : (
           <CustomImageUploader
-            editor={editor}
             failedToLoadImage={failedToLoadImage}
-            getPos={getPos}
             loadImageFromFileSystem={setImageFromFileSystem}
             maxFileSize={getExtensionStorage(editor, CORE_EXTENSIONS.CUSTOM_IMAGE).maxFileSize}
-            node={node}
             setIsUploaded={setIsUploaded}
-            selected={selected}
-            updateAttributes={updateAttributes}
+            {...props}
           />
         )}
       </div>

packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx

@@ -1,14 +1,14 @@
 import { ExternalLink, Maximize, Minus, Plus, X } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState, useRef } from "react";
-// plane utils
+// plane imports
 import { cn } from "@plane/utils";
 
 type Props = {
   image: {
-    src: string;
-    height: string;
     width: string;
+    height: string;
     aspectRatio: number;
+    src: string;
   };
   isOpen: boolean;
   toggleFullScreenMode: (val: boolean) => void;

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

@@ -1,16 +1,16 @@
 import { useState } from "react";
-// plane utils
+// plane imports
 import { cn } from "@plane/utils";
-// components
+// local imports
 import { ImageFullScreenAction } from "./full-screen";
 
 type Props = {
   containerClassName?: string;
   image: {
-    src: string;
-    height: string;
     width: string;
+    height: string;
     aspectRatio: number;
+    src: string;
   };
 };