feat: support image loading attribute (#165)

Author: d3m1d0v

src/extensions/markdown/Image/ImageSpecs/index.ts

@@ -8,6 +8,7 @@ export const ImageAttr = {
     Src: 'src',
     Alt: 'alt',
     Title: 'title',
+    Loading: 'loading',
 } as const;
 
 export const ImageSpecs: ExtensionAuto = (builder) => {
@@ -18,6 +19,7 @@ export const ImageSpecs: ExtensionAuto = (builder) => {
                 [ImageAttr.Src]: {},
                 [ImageAttr.Alt]: {default: null},
                 [ImageAttr.Title]: {default: null},
+                [ImageAttr.Loading]: {default: null},
             },
             group: 'inline',
             draggable: true,
@@ -29,6 +31,7 @@ export const ImageSpecs: ExtensionAuto = (builder) => {
                             [ImageAttr.Src]: (dom as Element).getAttribute(ImageAttr.Src),
                             [ImageAttr.Alt]: (dom as Element).getAttribute(ImageAttr.Alt),
                             [ImageAttr.Title]: (dom as Element).getAttribute(ImageAttr.Title),
+                            [ImageAttr.Loading]: (dom as Element).getAttribute(ImageAttr.Loading),
                         };
                     },
                 },
@@ -44,6 +47,7 @@ export const ImageSpecs: ExtensionAuto = (builder) => {
                 getAttrs: (tok) => ({
                     [ImageAttr.Src]: tok.attrGet('src'),
                     [ImageAttr.Title]: tok.attrGet('title') || null,
+                    [ImageAttr.Loading]: tok.attrGet(ImageAttr.Loading) || null,
                     [ImageAttr.Alt]: tok.children?.[0]?.content || null,
                 }),
             },

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

@@ -0,0 +1,10 @@
+import {ImsizeAttr} from '@diplodoc/transform/lib/plugins/imsize/const';
+
+export const ImgSizeAttr = {
+    Alt: ImsizeAttr.Alt,
+    Src: ImsizeAttr.Src,
+    Title: ImsizeAttr.Title,
+    Width: ImsizeAttr.Width,
+    Height: ImsizeAttr.Height,
+    Loading: 'loading',
+} as const;

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

@@ -1,18 +1,19 @@
 import isNumber from 'is-number';
 import type {NodeSpec} from 'prosemirror-model';
 import imsize from '@diplodoc/transform/lib/plugins/imsize';
-import {ImsizeAttr as ImgSizeAttr} from '@diplodoc/transform/lib/plugins/imsize/const';
 import log from '@diplodoc/transform/lib/log';
 
 import type {ExtensionAuto} from '../../../../core';
 import {imageNodeName} from '../../../markdown/Image/const';
+import {ImgSizeAttr} from './const';
 
 type ImsizeTypedAttributes = {
     [ImgSizeAttr.Src]: string;
     [ImgSizeAttr.Title]: string | null;
     [ImgSizeAttr.Alt]: string | null;
     [ImgSizeAttr.Width]: string | null;
     [ImgSizeAttr.Height]: string | null;
+    [ImgSizeAttr.Loading]: string | null;
 };
 
 export {ImgSizeAttr};
@@ -37,6 +38,7 @@ export const ImgSizeSpecs: ExtensionAuto<ImgSizeSpecsOptions> = (builder, opts)
                 [ImgSizeAttr.Title]: {default: null},
                 [ImgSizeAttr.Height]: {default: null},
                 [ImgSizeAttr.Width]: {default: null},
+                [ImgSizeAttr.Loading]: {default: null},
             },
             placeholder: placeholderContent ? {content: placeholderContent} : opts.placeholder,
             group: 'inline',
@@ -52,6 +54,9 @@ export const ImgSizeSpecs: ExtensionAuto<ImgSizeSpecsOptions> = (builder, opts)
                             [ImgSizeAttr.Src]: (dom as Element).getAttribute(ImgSizeAttr.Src),
                             [ImgSizeAttr.Alt]: (dom as Element).getAttribute(ImgSizeAttr.Alt),
                             [ImgSizeAttr.Title]: (dom as Element).getAttribute(ImgSizeAttr.Title),
+                            [ImgSizeAttr.Loading]: (dom as Element).getAttribute(
+                                ImgSizeAttr.Loading,
+                            ),
                             [ImgSizeAttr.Height]: isNumber(height) ? height : null,
                             [ImgSizeAttr.Width]: isNumber(width) ? height : null,
                         };
@@ -71,6 +76,7 @@ export const ImgSizeSpecs: ExtensionAuto<ImgSizeSpecsOptions> = (builder, opts)
                     [ImgSizeAttr.Title]: tok.attrGet(ImgSizeAttr.Title),
                     [ImgSizeAttr.Height]: tok.attrGet(ImgSizeAttr.Height),
                     [ImgSizeAttr.Width]: tok.attrGet(ImgSizeAttr.Width),
+                    [ImgSizeAttr.Loading]: tok.attrGet(ImgSizeAttr.Loading),
                     [ImgSizeAttr.Alt]: tok.children?.[0]?.content || null,
                 }),
             },