fix(imageSize): fixed the insertion of the svg image (#857)

Co-authored-by: Sergey Makhnatkin <[email protected]>

Author: ReFFaT

src/extensions/yfm/ImgSize/ImagePaste/index.ts

@@ -12,7 +12,15 @@ import type {FileUploadHandler} from '../../../../utils';
 import {clipboardUtils} from '../../../behavior/Clipboard';
 import {DataTransferType} from '../../../behavior/Clipboard/utils';
 import {ImageAttr, ImgSizeAttr, imageType} from '../../../specs';
-import {type CreateImageNodeOptions, isImageNode} from '../utils';
+import {
+    type CreateImageNodeOptions,
+    checkSvg,
+    findImageNode,
+    getImageSize,
+    getImageSizeNew,
+    isImageNode,
+    loadImageFromUrl,
+} from '../utils';
 
 import {ImagesUploadProcess} from './upload';
 
@@ -82,15 +90,77 @@ export const ImagePaste: ExtensionAuto<ImagePasteOptions> = (builder, opts) => {
 
                                 e.preventDefault();
 
+                                const isSvg = checkSvg(imageUrl);
+
+                                const trackingId = `img-${Math.random().toString(36).slice(2)}`;
+
                                 const imageNode = imageType(view.state.schema).create({
                                     src: imageUrl,
                                     alt: title,
+                                    id: trackingId,
                                 });
 
                                 const tr = view.state.tr.replaceSelectionWith(imageNode);
                                 view.dispatch(tr.scrollIntoView());
                                 logger.event({event: 'paste-url-as-image'});
 
+                                loadImageFromUrl(imageUrl)
+                                    .then((img) =>
+                                        opts?.enableNewImageSizeCalculation || isSvg
+                                            ? getImageSizeNew(img)
+                                            : getImageSize(img),
+                                    )
+                                    .then(
+                                        (sizes: {
+                                            [ImgSizeAttr.Height]?: string;
+                                            [ImgSizeAttr.Width]?: string;
+                                        }) => {
+                                            const currentState = view.state;
+
+                                            const imageResult = findImageNode(
+                                                currentState.doc,
+                                                trackingId,
+                                            );
+
+                                            if (imageResult === null) {
+                                                logger.error({
+                                                    event: 'img-node-not-found',
+                                                    trackingId,
+                                                });
+                                                return;
+                                            }
+
+                                            const {pos: targetPos} = imageResult;
+
+                                            const updateTr = currentState.tr
+                                                .setNodeAttribute(
+                                                    targetPos,
+                                                    ImgSizeAttr.Height,
+                                                    sizes.height,
+                                                )
+                                                .setNodeAttribute(
+                                                    targetPos,
+                                                    ImgSizeAttr.Width,
+                                                    sizes.width,
+                                                )
+                                                .setNodeAttribute(targetPos, 'id', null);
+
+                                            view.dispatch(updateTr);
+
+                                            logger.event({
+                                                event: 'img-dimensions-updated',
+                                                position: targetPos,
+                                                sizes,
+                                            });
+                                        },
+                                    )
+                                    .catch((error) => {
+                                        logger.error({
+                                            event: 'img-dimensions-load-failed',
+                                            error: error.message,
+                                        });
+                                    });
+
                                 return true;
                             }
 

src/extensions/yfm/ImgSize/ImgSizeSpecs/const.ts

@@ -7,4 +7,5 @@ export const ImgSizeAttr = {
     Width: ImsizeAttr.Width,
     Height: ImsizeAttr.Height,
     Loading: 'loading',
+    Id: 'id',
 } as const;

src/extensions/yfm/ImgSize/ImgSizeSpecs/index.ts

@@ -15,6 +15,7 @@ type ImsizeTypedAttributes = {
     [ImgSizeAttr.Width]: string | null;
     [ImgSizeAttr.Height]: string | null;
     [ImgSizeAttr.Loading]: string | null;
+    [ImgSizeAttr.Id]: string | null;
 };
 
 export {ImgSizeAttr};
@@ -40,6 +41,7 @@ export const ImgSizeSpecs: ExtensionAuto<ImgSizeSpecsOptions> = (builder, opts)
                 [ImgSizeAttr.Height]: {default: null},
                 [ImgSizeAttr.Width]: {default: null},
                 [ImgSizeAttr.Loading]: {default: null},
+                [ImgSizeAttr.Id]: {default: null},
             },
             placeholder: placeholderContent ? {content: placeholderContent} : opts.placeholder,
             group: 'inline',
@@ -60,6 +62,7 @@ export const ImgSizeSpecs: ExtensionAuto<ImgSizeSpecsOptions> = (builder, opts)
                             ),
                             [ImgSizeAttr.Height]: isNumber(height) ? height : null,
                             [ImgSizeAttr.Width]: isNumber(width) ? height : null,
+                            [ImgSizeAttr.Id]: (dom as Element).getAttribute(ImgSizeAttr.Id),
                         };
                     },
                 },
@@ -79,6 +82,7 @@ export const ImgSizeSpecs: ExtensionAuto<ImgSizeSpecsOptions> = (builder, opts)
                     [ImgSizeAttr.Width]: tok.attrGet(ImgSizeAttr.Width),
                     [ImgSizeAttr.Loading]: tok.attrGet(ImgSizeAttr.Loading),
                     [ImgSizeAttr.Alt]: tok.children?.[0]?.content || null,
+                    [ImgSizeAttr.Id]: tok.attrGet(ImgSizeAttr.Id),
                 }),
             },
         },

src/extensions/yfm/ImgSize/utils.ts

@@ -23,6 +23,7 @@ export const createImageNode =
             [ImgSizeAttr.Src]: result.url,
             [ImgSizeAttr.Alt]: result.name ?? file.name,
         };
+
         if (opts.needDimensions) {
             try {
                 const sizes = await loadImage(file).then(
@@ -49,6 +50,15 @@ export async function loadImage(imgFile: File) {
     });
 }
 
+export async function loadImageFromUrl(url: string): Promise<HTMLImageElement> {
+    return new Promise<HTMLImageElement>((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = (_e, _s, _l, _c, error) => reject(error);
+        img.src = url;
+    });
+}
+
 export function getImageSize(img: HTMLImageElement): {[ImgSizeAttr.Height]?: string} {
     return {height: String(Math.min(IMG_MAX_HEIGHT, img.height))};
 }
@@ -64,3 +74,21 @@ export function getImageSizeNew({width, height}: HTMLImageElement): {
     });
     return {width: String(size.width), height: String(size.height)};
 }
+
+export function checkSvg(imageUrl?: string) {
+    return imageUrl && (/\.svg($|\?|#)/i.test(imageUrl) || imageUrl.startsWith('data:image/svg'));
+}
+
+export function findImageNode(doc: Node, id: string): {node: Node; pos: number} | null {
+    let result: {node: Node; pos: number} | null = null;
+
+    doc.descendants((node, pos) => {
+        if (isImageNode(node) && node.attrs.id === id) {
+            result = {node, pos};
+            return false;
+        }
+        return true;
+    });
+
+    return result;
+}