fix: SVGs without a natural px width are invisible (#3220)

shared/editor/nodes/Image.tsx

@@ -295,35 +295,12 @@ export default class Image extends Node {
   };
 
   component = (props: ComponentProps) => {
-    const { theme, isSelected } = props;
-    const { alt, src, layoutClass } = props.node.attrs;
-    const className = layoutClass ? `image image-${layoutClass}` : "image";
-
     return (
-      <div contentEditable={false} className={className}>
+      <ImageComponent
-        <ImageWrapper
+        {...props}
-          className={isSelected ? "ProseMirror-selectednode" : ""}
+        onClick={this.handleSelect(props)}
-          onClick={this.handleSelect(props)}
+        onDownload={this.handleDownload(props)}
-        >
+      >
-          <Button>
-            <DownloadIcon
-              color="currentColor"
-              onClick={this.handleDownload(props)}
-            />
-          </Button>
-          <ImageZoom
-            image={{
-              src,
-              alt,
-            }}
-            defaultStyles={{
-              overlay: {
-                backgroundColor: theme.background,
-              },
-            }}
-            shouldRespectMaxDimension
-          />
-        </ImageWrapper>
         <Caption
           onKeyDown={this.handleKeyDown(props)}
           onBlur={this.handleBlur(props)}
@@ -335,9 +312,9 @@ export default class Image extends Node {
           suppressContentEditableWarning
           data-caption={this.options.dictionary.imageCaptionPlaceholder}
         >
-          {alt}
+          {props.node.attrs.alt}
         </Caption>
-      </div>
+      </ImageComponent>
     );
   };
 
@@ -520,6 +497,53 @@ export default class Image extends Node {
   }
 }
 
+const ImageComponent = (
+  props: ComponentProps & {
+    onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onDownload: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    children: React.ReactNode;
+  }
+) => {
+  const { theme, isSelected, node } = props;
+  const { alt, src, layoutClass } = node.attrs;
+  const className = layoutClass ? `image image-${layoutClass}` : "image";
+  const [width, setWidth] = React.useState(0);
+
+  return (
+    <div contentEditable={false} className={className}>
+      <ImageWrapper
+        className={isSelected ? "ProseMirror-selectednode" : ""}
+        onClick={props.onClick}
+        style={{ width }}
+      >
+        <Button onClick={props.onDownload}>
+          <DownloadIcon color="currentColor" />
+        </Button>
+        <ImageZoom
+          image={{
+            src,
+            alt,
+            // @ts-expect-error type is incorrect, allows spreading all img props
+            onLoad: (ev) => {
+              // For some SVG's Firefox does not provide the naturalWidth, in this
+              // rare case we need to provide a default so that the image can be
+              // seen and is not sized to 0px
+              setWidth(ev.target.naturalWidth || "50%");
+            },
+          }}
+          defaultStyles={{
+            overlay: {
+              backgroundColor: theme.background,
+            },
+          }}
+          shouldRespectMaxDimension
+        />
+      </ImageWrapper>
+      {props.children}
+    </div>
+  );
+};
+
 const Button = styled.button`
   position: absolute;
   top: 8px;
@@ -576,10 +600,12 @@ const Caption = styled.p`
   }
 `;
 
-const ImageWrapper = styled.span`
+const ImageWrapper = styled.div`
   line-height: 0;
-  display: inline-block;
   position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
 
   &:hover {
     ${Button} {