Add image resizing to history stack (allow undo)

Remove placeholder SVG when main image is loaded

shared/editor/commands/insertFiles.ts

@@ -13,12 +13,16 @@ export type Options = {
   isAttachment?: boolean;
   /** Set to true to replace any existing image at the users selection */
   replaceExisting?: boolean;
-  /** Width to use when inserting image */
-  width?: number;
   uploadFile?: (file: File) => Promise<string>;
   onFileUploadStart?: () => void;
   onFileUploadStop?: () => void;
   onShowToast: (message: string) => void;
+  attrs?: {
+    /** Width to use when inserting image */
+    width?: number;
+    /** Height to use when inserting image */
+    height?: number;
+  };
 };
 
 const insertFiles = function (
@@ -124,7 +128,7 @@ const insertFiles = function (
                 .replaceWith(
                   from,
                   to || from,
-                  schema.nodes.image.create({ src, width: options.width })
+                  schema.nodes.image.create({ src, ...options.attrs })
                 )
                 .setMeta(uploadPlaceholderPlugin, { remove: { id: upload.id } })
             );

shared/editor/components/Image.tsx

@@ -199,15 +199,17 @@ const Image = (
               }
             }}
           />
-          <img
+          {!loaded && (
-            style={{
+            <img
-              ...widthStyle,
+              style={{
-              display: loaded ? "none" : "block",
+                ...widthStyle,
-            }}
+                display: "block",
-            src={`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(
+              }}
-              getPlaceholder(size.width, size.height)
+              src={`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(
-            )}`}
+                getPlaceholder(size.width, size.height)
-          />
+              )}`}
+            />
+          )}
         </ImageZoom>
         {isEditable && !isFullWidth && isResizable && (
           <>

shared/editor/nodes/Image.tsx

@@ -200,11 +200,13 @@ export default class Image extends SimpleImage {
     const { tr } = view.state;
 
     const pos = getPos();
-    const transaction = tr.setNodeMarkup(pos, undefined, {
+    const transaction = tr
-      ...node.attrs,
+      .setNodeMarkup(pos, undefined, {
-      width,
+        ...node.attrs,
-      height,
+        width,
-    });
+        height,
+      })
+      .setMeta("addToHistory", true);
     const $pos = transaction.doc.resolve(getPos());
     view.dispatch(transaction.setSelection(new NodeSelection($pos)));
   };

shared/editor/nodes/SimpleImage.tsx

@@ -225,7 +225,9 @@ export default class SimpleImage extends Node {
             onShowToast,
             dictionary: this.options.dictionary,
             replaceExisting: true,
-            width: node.attrs.width,
+            attrs: {
+              width: node.attrs.width,
+            },
           });
         };
         inputElement.click();