@gravity-ui/markdown-editor 13.0.0

package/build/cjs/extensions/yfm/ImgSize/ImagePaste/index.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagePaste = void 0;
+const base64_arraybuffer_1 = require("base64-arraybuffer");
+const prosemirror_model_1 = require("prosemirror-model");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_transform_1 = require("prosemirror-transform");
+const lodash_1 = require("../../../../lodash");
+const Clipboard_1 = require("../../../behavior/Clipboard");
+const specs_1 = require("../../../specs");
+const utils_1 = require("../utils");
+const upload_1 = require("./upload");
+const { isFilesFromHtml, isFilesOnly, isImageFile } = Clipboard_1.clipboardUtils;
+const ImagePaste = (builder, opts) => {
+    if (!opts || !(0, lodash_1.isFunction)(opts.imageUploadHandler))
+        throw new Error('ImagePaste extension: imageUploadHandler is not a function');
+    builder.addPlugin(() => new prosemirror_state_1.Plugin({
+        props: {
+            handleDOMEvents: {
+                paste(view, e) {
+                    const files = getPastedImages(e.clipboardData);
+                    if (files) {
+                        e.preventDefault();
+                        new upload_1.ImagesUploadProcess(view, files, opts.imageUploadHandler, view.state.tr.selection.from, opts).run();
+                        return true;
+                    }
+                    return false;
+                },
+                drop(view, e) {
+                    var _a, _b;
+                    // handle drop images from device
+                    if (view.dragging)
+                        return false;
+                    const files = getPastedImages(e.dataTransfer);
+                    if (!files)
+                        return false;
+                    const dropPos = (_b = (_a = view.posAtCoords({ left: e.clientX, top: e.clientY })) === null || _a === void 0 ? void 0 : _a.pos) !== null && _b !== void 0 ? _b : -1;
+                    if (dropPos === -1)
+                        return false;
+                    const posToInsert = (0, prosemirror_transform_1.dropPoint)(view.state.doc, dropPos, createFakeImageSlice(view.state.schema));
+                    if (posToInsert !== null) {
+                        new upload_1.ImagesUploadProcess(view, files, opts.imageUploadHandler, posToInsert, opts).run();
+                    }
+                    e.preventDefault();
+                    return true;
+                },
+            },
+            handlePaste(view, _event, slice) {
+                const node = sliceSingleNode(slice);
+                if (node && (0, utils_1.isImageNode)(node)) {
+                    const imgUrl = node.attrs[specs_1.ImgSizeAttr.Src];
+                    const imgFile = dataUrlToFile(imgUrl, 'image');
+                    if (imgFile) {
+                        new upload_1.ImagesUploadProcess(view, [imgFile], opts.imageUploadHandler, view.state.tr.selection.from, opts).run();
+                        return true;
+                    }
+                }
+                return false;
+            },
+        },
+    }), builder.Priority.High);
+};
+exports.ImagePaste = ImagePaste;
+function getPastedImages(data) {
+    if (!data || data.files.length === 0)
+        return null;
+    if (!isFilesOnly(data) && !isFilesFromHtml(data))
+        return null;
+    const files = Array.from(data.files);
+    return files.every(isImageFile) ? files : null;
+}
+function createFakeImageSlice(schema) {
+    return new prosemirror_model_1.Slice(prosemirror_model_1.Fragment.from((0, specs_1.imageType)(schema).create({
+        [specs_1.ImageAttr.Src]: 'fake',
+        [specs_1.ImageAttr.Title]: 'image',
+    })), 0, 0);
+}
+// copied from prosemirror-view input.ts
+function sliceSingleNode(slice) {
+    return slice.openStart === 0 && slice.openEnd === 0 && slice.content.childCount === 1
+        ? slice.content.firstChild
+        : null;
+}
+function dataUrlToFile(dataUrl, filename) {
+    var _a;
+    const [data, base64String] = dataUrl.split(',');
+    if (!data || !base64String)
+        return null;
+    const mime = (_a = data.match(/^data:(.+);base64/)) === null || _a === void 0 ? void 0 : _a[1];
+    if (!mime)
+        return null;
+    return new File([(0, base64_arraybuffer_1.decode)(base64String)], filename, { type: mime });
+}

package/build/cjs/extensions/yfm/ImgSize/ImagePaste/skeleton.css

@@ -0,0 +1,8 @@
+.g-md-image-skeleton {
+  vertical-align: middle;
+}
+.g-md-image-skeleton__skeleton {
+  width: min(var(--img-skeleton-width) * 1px, 100%);
+  height: min(var(--img-skeleton-height) * 1px, 700px);
+  margin-bottom: -5px;
+}

package/build/cjs/extensions/yfm/ImgSize/ImagePaste/skeleton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ReactWidgetDescriptor } from '../../../behavior/WidgetDecoration';
+export declare class ImageSkeletonDescriptor extends ReactWidgetDescriptor {
+    #private;
+    get pos(): number;
+    constructor(initPos: number, size?: {
+        width: string;
+        height: string;
+    });
+    getDomElem(): HTMLElement;
+    renderReactElement(): React.ReactElement;
+}

package/build/cjs/extensions/yfm/ImgSize/ImagePaste/skeleton.js

@@ -0,0 +1,34 @@
+"use strict";
+var _ImageSkeletonDescriptor_domElem;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageSkeletonDescriptor = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../../../classname");
+const WidgetDecoration_1 = require("../../../behavior/WidgetDecoration");
+const b = (0, classname_1.cn)('image-skeleton');
+class ImageSkeletonDescriptor extends WidgetDecoration_1.ReactWidgetDescriptor {
+    constructor(initPos, size) {
+        super(initPos, 'image_skeleton');
+        _ImageSkeletonDescriptor_domElem.set(this, void 0);
+        tslib_1.__classPrivateFieldSet(this, _ImageSkeletonDescriptor_domElem, document.createElement('span'), "f");
+        tslib_1.__classPrivateFieldGet(this, _ImageSkeletonDescriptor_domElem, "f").classList.add(b());
+        if (size) {
+            tslib_1.__classPrivateFieldGet(this, _ImageSkeletonDescriptor_domElem, "f").style.setProperty('--img-skeleton-width', size.width);
+            tslib_1.__classPrivateFieldGet(this, _ImageSkeletonDescriptor_domElem, "f").style.setProperty('--img-skeleton-height', size.height);
+        }
+    }
+    get pos() {
+        var _a, _b;
+        return (_b = (_a = this.getPos) === null || _a === void 0 ? void 0 : _a.call(this)) !== null && _b !== void 0 ? _b : this.initPos;
+    }
+    getDomElem() {
+        return tslib_1.__classPrivateFieldGet(this, _ImageSkeletonDescriptor_domElem, "f");
+    }
+    renderReactElement() {
+        return react_1.default.createElement(uikit_1.Skeleton, { className: b('skeleton') });
+    }
+}
+exports.ImageSkeletonDescriptor = ImageSkeletonDescriptor;
+_ImageSkeletonDescriptor_domElem = new WeakMap();

package/build/cjs/extensions/yfm/ImgSize/ImagePaste/upload.d.ts

@@ -0,0 +1,13 @@
+import { Node } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { FileUploadHandler, UploadSuccessItem } from '../../../../utils/upload';
+import { FilesBatchUploadProcess } from '../../../behavior/utils/upload';
+import { CreateImageNodeOptions } from '../utils';
+import { ImageSkeletonDescriptor } from './skeleton';
+export declare class ImagesUploadProcess extends FilesBatchUploadProcess {
+    protected readonly createImage: ({ result, file }: UploadSuccessItem) => Promise<Node>;
+    protected readonly initPosition: number;
+    constructor(view: EditorView, files: readonly File[], uploadHandler: FileUploadHandler, position: number, opts: CreateImageNodeOptions);
+    protected createSkeleton(): Promise<ImageSkeletonDescriptor>;
+    protected createPMNode(res: UploadSuccessItem): Promise<Node>;
+}

package/build/cjs/extensions/yfm/ImgSize/ImagePaste/upload.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImagesUploadProcess = void 0;
+const logger_1 = require("../../../../logger");
+const upload_1 = require("../../../behavior/utils/upload");
+const markdown_1 = require("../../../markdown");
+const const_1 = require("../const");
+const utils_1 = require("../utils");
+const skeleton_1 = require("./skeleton");
+class ImagesUploadProcess extends upload_1.FilesBatchUploadProcess {
+    constructor(view, files, uploadHandler, position, opts) {
+        super(view, files, uploadHandler);
+        this.initPosition = position;
+        this.createImage = (0, utils_1.createImageNode)((0, markdown_1.imageType)(this.view.state.schema), opts);
+    }
+    async createSkeleton() {
+        return new skeleton_1.ImageSkeletonDescriptor(this.initPosition, await getSkeletonSize(this.files));
+    }
+    async createPMNode(res) {
+        return this.createImage(res);
+    }
+}
+exports.ImagesUploadProcess = ImagesUploadProcess;
+async function getSkeletonSize(files) {
+    const skeletonSize = { width: '300', height: '200' };
+    if (files.length === 1) {
+        try {
+            const size = await (0, utils_1.loadImage)(files[0]).then(calcSkeletonSize);
+            skeletonSize.width = String(size.width);
+            skeletonSize.height = String(size.height);
+        }
+        catch (err) {
+            logger_1.logger.error(err);
+        }
+    }
+    return skeletonSize;
+}
+function calcSkeletonSize(img) {
+    const { width, height } = img;
+    if (height <= const_1.IMG_MAX_HEIGHT)
+        return { width, height };
+    const ratio = const_1.IMG_MAX_HEIGHT / height; // ratio<1
+    return { height: const_1.IMG_MAX_HEIGHT, width: width * ratio };
+}

package/build/cjs/extensions/yfm/ImgSize/ImageWidget/actions.d.ts

@@ -0,0 +1,3 @@
+import type { ActionSpec, ExtensionDeps } from '../../../../core';
+import { ImageWidgetDescriptorOpts } from './widget';
+export declare const addImageWidget: (deps: ExtensionDeps, opts: ImageWidgetDescriptorOpts) => ActionSpec;

package/build/cjs/extensions/yfm/ImgSize/ImageWidget/actions.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addImageWidget = void 0;
+const widget_1 = require("./widget");
+const addImageWidget = (deps, opts) => ({
+    isEnable: (state) => state.selection.empty,
+    run(state, dispatch) {
+        dispatch((0, widget_1.addWidget)(state.tr, deps, opts));
+    },
+});
+exports.addImageWidget = addImageWidget;

package/build/cjs/extensions/yfm/ImgSize/ImageWidget/index.d.ts

@@ -0,0 +1,16 @@
+import type { Action, ExtensionAuto } from '../../../../core';
+import { FileUploadHandler } from '../../../../utils/upload';
+import type { ImageWidgetDescriptorOpts } from './widget';
+declare const addImageWidgetAction = "addImageWidget";
+export declare type ImageWidgetOptions = Pick<ImageWidgetDescriptorOpts, 'needToSetDimensionsForUploadedImages'> & {
+    imageUploadHandler?: FileUploadHandler;
+};
+export declare const ImageWidget: ExtensionAuto<ImageWidgetOptions>;
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [addImageWidgetAction]: Action;
+        }
+    }
+}
+export {};

package/build/cjs/extensions/yfm/ImgSize/ImageWidget/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageWidget = void 0;
+const actions_1 = require("./actions");
+const addImageWidgetAction = 'addImageWidget';
+const ImageWidget = (builder, opts) => {
+    builder.addAction(addImageWidgetAction, (deps) => (0, actions_1.addImageWidget)(deps, {
+        uploadImages: opts.imageUploadHandler,
+        needToSetDimensionsForUploadedImages: opts.needToSetDimensionsForUploadedImages,
+    }));
+};
+exports.ImageWidget = ImageWidget;

package/build/cjs/extensions/yfm/ImgSize/ImageWidget/view.css

@@ -0,0 +1,12 @@
+.g-md-image-placeholder {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 8px;
+  min-width: 300px;
+  padding: 12px 20px;
+  border-radius: 4px;
+  background-color: var(--g-color-base-simple-hover-solid);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}

package/build/cjs/extensions/yfm/ImgSize/ImageWidget/view.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ImageFormProps } from '../../../../forms/ImageForm';
+export declare type FilePlaceholderProps = {
+    onCancel: () => void;
+    onSubmit: ImageFormProps['onSubmit'];
+    onAttach?: (files: File[]) => Promise<void>;
+};
+export declare const FilePlaceholder: React.FC<FilePlaceholderProps>;

package/build/cjs/extensions/yfm/ImgSize/ImageWidget/view.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilePlaceholder = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const react_use_1 = require("react-use");
+const classname_1 = require("../../../../classname");
+const ImageForm_1 = require("../../../../forms/ImageForm");
+const widgets_1 = require("../../../../i18n/widgets");
+const hooks_1 = require("../../../../react-utils/hooks");
+const b = (0, classname_1.cn)('image-placeholder');
+const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
+const FilePlaceholder = ({ onCancel, onSubmit, onAttach }) => {
+    const isMounted = (0, react_use_1.useMountedState)();
+    const [loading, showLoading, hideLoading] = (0, hooks_1.useBooleanState)(false);
+    const divRef = react_1.default.useRef(null);
+    const attachHandler = react_1.default.useCallback((files) => {
+        if (!onAttach)
+            return;
+        if (isMounted()) {
+            showLoading();
+            onAttach(files).finally(() => {
+                if (isMounted()) {
+                    hideLoading();
+                }
+            });
+        }
+    }, [isMounted, onAttach, showLoading, hideLoading]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { ref: divRef, className: b() },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Picture, size: 24 }),
+            (0, widgets_1.i18n)('image')),
+        react_1.default.createElement(uikit_1.Popup, { open: true, onClose: onCancel, anchorRef: divRef, placement: placement },
+            react_1.default.createElement(ImageForm_1.ImageForm, { autoFocus: true, loading: loading, onCancel: onCancel, onSubmit: onSubmit, onAttach: onAttach && attachHandler }))));
+};
+exports.FilePlaceholder = FilePlaceholder;

package/build/cjs/extensions/yfm/ImgSize/ImageWidget/widget.d.ts

@@ -0,0 +1,9 @@
+import { Transaction } from 'prosemirror-state';
+import { ExtensionDeps } from '../../../../core';
+import { FileUploadHandler } from '../../../../utils/upload';
+export declare const addWidget: (tr: Transaction, deps: ExtensionDeps, opts: ImageWidgetDescriptorOpts) => Transaction;
+export declare const removeWidget: (tr: Transaction, id: string) => Transaction;
+export declare type ImageWidgetDescriptorOpts = {
+    needToSetDimensionsForUploadedImages: boolean;
+    uploadImages?: FileUploadHandler;
+};

package/build/cjs/extensions/yfm/ImgSize/ImageWidget/widget.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeWidget = exports.addWidget = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const is_number_1 = tslib_1.__importDefault(require("is-number"));
+const WidgetDecoration_1 = require("../../../behavior/WidgetDecoration");
+const markdown_1 = require("../../../markdown");
+const specs_1 = require("../../../specs");
+const upload_1 = require("../ImagePaste/upload");
+const view_1 = require("./view");
+const addWidget = (tr, deps, opts) => {
+    return new ImageWidgetDescriptor(tr.selection.from, deps, opts).applyTo(tr);
+};
+exports.addWidget = addWidget;
+exports.removeWidget = WidgetDecoration_1.removeDecoration;
+class ImageWidgetDescriptor extends WidgetDecoration_1.ReactWidgetDescriptor {
+    constructor(initPos, deps, opts) {
+        super(initPos, 'image_placeholder');
+        this.widgetHandler = null;
+        this.domElem = document.createElement('span');
+        this.deps = deps;
+        this.uploadImages = opts.uploadImages;
+        this.needToSetDimensionsForUploadedImages = opts.needToSetDimensionsForUploadedImages;
+    }
+    getWidgetHandler(view, getPos) {
+        if (!this.widgetHandler) {
+            this.widgetHandler = new ImageWidgetHandler({
+                view,
+                getPos,
+                decoId: this.id,
+                uploadImages: this.uploadImages,
+                needToSetDimensionsForUploadedImages: this.needToSetDimensionsForUploadedImages,
+            }, this.deps);
+        }
+        return this.widgetHandler;
+    }
+    getDomElem() {
+        return this.domElem;
+    }
+    renderReactElement(view, getPos) {
+        return this.getWidgetHandler(view, getPos).renderWidgetView(view, getPos);
+    }
+    remove() {
+        var _a;
+        super.remove();
+        (_a = this.widgetHandler) === null || _a === void 0 ? void 0 : _a.destruct();
+        this.widgetHandler = null;
+    }
+}
+class ImageWidgetHandler {
+    constructor({ decoId, view, getPos, uploadImages, needToSetDimensionsForUploadedImages, }, deps) {
+        this.cancelled = false;
+        this.onCancel = () => {
+            this.cancelled = true;
+            this.view.dispatch((0, WidgetDecoration_1.removeDecoration)(this.view.state.tr, this.decoId));
+            this.view.focus();
+        };
+        this.onSubmit = (params) => {
+            var _a;
+            if (this.cancelled)
+                return;
+            const url = (_a = this.normalizeUrl(params.url)) === null || _a === void 0 ? void 0 : _a.url;
+            if (!url)
+                return;
+            const attrs = {
+                [specs_1.ImgSizeAttr.Src]: url,
+                [specs_1.ImgSizeAttr.Title]: params.name,
+                [specs_1.ImgSizeAttr.Alt]: params.alt,
+                [specs_1.ImgSizeAttr.Width]: (0, is_number_1.default)(params.width) ? String(params.width) : null,
+                [specs_1.ImgSizeAttr.Height]: (0, is_number_1.default)(params.height) ? String(params.height) : null,
+            };
+            const node = (0, markdown_1.imageType)(this.view.state.schema).create(attrs);
+            this.insertNodes([node]);
+        };
+        this.onAttach = async (files) => {
+            if (this.cancelled || !this.uploadImages)
+                return;
+            const { view } = this;
+            new upload_1.ImagesUploadProcess(view, files, this.uploadImages, this.getPos(), {
+                needDimmensions: this.needToSetDimensionsForUploadedImages,
+            }).run();
+            view.dispatch((0, exports.removeWidget)(view.state.tr, this.decoId));
+            view.focus();
+        };
+        this.decoId = decoId;
+        this.view = view;
+        this.getPos = getPos;
+        this.uploadImages = uploadImages;
+        this.normalizeUrl = (0, markdown_1.normalizeUrlFactory)(deps);
+        this.needToSetDimensionsForUploadedImages = needToSetDimensionsForUploadedImages;
+    }
+    destruct() {
+        this.cancelled = true;
+    }
+    renderWidgetView(view, getPos) {
+        this.view = view;
+        this.getPos = getPos;
+        return (react_1.default.createElement(view_1.FilePlaceholder, { onCancel: this.onCancel, onSubmit: this.onSubmit, onAttach: this.uploadImages && this.onAttach }));
+    }
+    insertNodes(fileNodes) {
+        if (this.cancelled)
+            return;
+        let tr = this.view.state.tr;
+        tr = tr.insert(tr.mapping.map(this.getPos()), fileNodes);
+        tr = (0, exports.removeWidget)(tr, this.decoId);
+        this.view.dispatch(tr);
+        this.view.focus();
+    }
+}

package/build/cjs/extensions/yfm/ImgSize/ImgSizeSpecs/const.d.ts

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

package/build/cjs/extensions/yfm/ImgSize/ImgSizeSpecs/const.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImgSizeAttr = void 0;
+const const_1 = require("@diplodoc/transform/lib/plugins/imsize/const");
+exports.ImgSizeAttr = {
+    Alt: const_1.ImsizeAttr.Alt,
+    Src: const_1.ImsizeAttr.Src,
+    Title: const_1.ImsizeAttr.Title,
+    Width: const_1.ImsizeAttr.Width,
+    Height: const_1.ImsizeAttr.Height,
+    Loading: 'loading',
+};

package/build/cjs/extensions/yfm/ImgSize/ImgSizeSpecs/index.d.ts

@@ -0,0 +1,11 @@
+import type { NodeSpec } from 'prosemirror-model';
+import type { ExtensionAuto } from '../../../../core';
+import { ImgSizeAttr } from './const';
+export { ImgSizeAttr };
+export declare type ImgSizeSpecsOptions = {
+    /**
+     * @deprecated: use placeholder option in BehaviorPreset instead.
+     */
+    placeholder?: NodeSpec['placeholder'];
+};
+export declare const ImgSizeSpecs: ExtensionAuto<ImgSizeSpecsOptions>;

package/build/cjs/extensions/yfm/ImgSize/ImgSizeSpecs/index.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImgSizeSpecs = exports.ImgSizeAttr = void 0;
+const tslib_1 = require("tslib");
+const log_1 = tslib_1.__importDefault(require("@diplodoc/transform/lib/log"));
+const imsize_1 = tslib_1.__importDefault(require("@diplodoc/transform/lib/plugins/imsize"));
+const is_number_1 = tslib_1.__importDefault(require("is-number"));
+const const_1 = require("../../../markdown/Image/const");
+const const_2 = require("./const");
+Object.defineProperty(exports, "ImgSizeAttr", { enumerable: true, get: function () { return const_2.ImgSizeAttr; } });
+const ImgSizeSpecs = (builder, opts) => {
+    var _a;
+    const placeholderContent = (_a = builder.context.get('placeholder')) === null || _a === void 0 ? void 0 : _a.imgSize;
+    builder.configureMd((md) => md.use(imsize_1.default, { log: log_1.default }));
+    builder.addNode(const_1.imageNodeName, () => ({
+        spec: {
+            inline: true,
+            attrs: {
+                [const_2.ImgSizeAttr.Src]: {},
+                [const_2.ImgSizeAttr.Alt]: { default: null },
+                [const_2.ImgSizeAttr.Title]: { default: null },
+                [const_2.ImgSizeAttr.Height]: { default: null },
+                [const_2.ImgSizeAttr.Width]: { default: null },
+                [const_2.ImgSizeAttr.Loading]: { default: null },
+            },
+            placeholder: placeholderContent ? { content: placeholderContent } : opts.placeholder,
+            group: 'inline',
+            draggable: true,
+            parseDOM: [
+                {
+                    tag: 'img[src]',
+                    getAttrs(dom) {
+                        const height = dom.getAttribute(const_2.ImgSizeAttr.Height);
+                        const width = dom.getAttribute(const_2.ImgSizeAttr.Width);
+                        return {
+                            [const_2.ImgSizeAttr.Src]: dom.getAttribute(const_2.ImgSizeAttr.Src),
+                            [const_2.ImgSizeAttr.Alt]: dom.getAttribute(const_2.ImgSizeAttr.Alt),
+                            [const_2.ImgSizeAttr.Title]: dom.getAttribute(const_2.ImgSizeAttr.Title),
+                            [const_2.ImgSizeAttr.Loading]: dom.getAttribute(const_2.ImgSizeAttr.Loading),
+                            [const_2.ImgSizeAttr.Height]: (0, is_number_1.default)(height) ? height : null,
+                            [const_2.ImgSizeAttr.Width]: (0, is_number_1.default)(width) ? height : null,
+                        };
+                    },
+                },
+            ],
+            toDOM(node) {
+                return ['img', node.attrs];
+            },
+        },
+        fromMd: {
+            tokenSpec: {
+                name: const_1.imageNodeName,
+                type: 'node',
+                getAttrs: (tok) => {
+                    var _a, _b;
+                    return ({
+                        [const_2.ImgSizeAttr.Src]: tok.attrGet(const_2.ImgSizeAttr.Src),
+                        [const_2.ImgSizeAttr.Title]: tok.attrGet(const_2.ImgSizeAttr.Title),
+                        [const_2.ImgSizeAttr.Height]: tok.attrGet(const_2.ImgSizeAttr.Height),
+                        [const_2.ImgSizeAttr.Width]: tok.attrGet(const_2.ImgSizeAttr.Width),
+                        [const_2.ImgSizeAttr.Loading]: tok.attrGet(const_2.ImgSizeAttr.Loading),
+                        [const_2.ImgSizeAttr.Alt]: ((_b = (_a = tok.children) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.content) || null,
+                    });
+                },
+            },
+        },
+        toMd: (state, node) => {
+            const attrs = node.attrs;
+            state.write('![' +
+                state.esc(attrs.alt || '') +
+                '](' +
+                state.esc(attrs.src) +
+                (attrs.title ? ' ' + state.quote(attrs.title) : '') +
+                getSize(attrs) +
+                ')');
+        },
+    }));
+};
+exports.ImgSizeSpecs = ImgSizeSpecs;
+function getSize({ width, height }) {
+    if (width || height) {
+        return ` =${width || ''}x${height || ''}`;
+    }
+    return '';
+}

package/build/cjs/extensions/yfm/ImgSize/actions.d.ts

@@ -0,0 +1,8 @@
+import type { Schema } from 'prosemirror-model';
+import type { ActionSpec } from '../../../core';
+import { AddImageAttrs as AddImageAttrsBase } from '../../markdown/Image';
+export declare type AddImageAttrs = AddImageAttrsBase & {
+    width?: string | number;
+    height?: string | number;
+};
+export declare const addImage: (schema: Schema) => ActionSpec;

package/build/cjs/extensions/yfm/ImgSize/actions.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addImage = void 0;
+const tslib_1 = require("tslib");
+const is_number_1 = tslib_1.__importDefault(require("is-number"));
+const Image_1 = require("../../markdown/Image");
+const const_1 = require("./const");
+const addImage = (schema) => {
+    return {
+        isEnable: (state) => state.selection.empty,
+        run(state, dispatch, _view, attrs) {
+            const params = attrs;
+            if (params === null || params === void 0 ? void 0 : params.src) {
+                const { src, title, alt, width, height } = params;
+                const imgAttrs = {
+                    [const_1.ImgSizeAttr.Src]: src,
+                    [const_1.ImgSizeAttr.Title]: title !== null && title !== void 0 ? title : '',
+                    [const_1.ImgSizeAttr.Alt]: alt !== null && alt !== void 0 ? alt : '',
+                };
+                if ((0, is_number_1.default)(width)) {
+                    imgAttrs[const_1.ImgSizeAttr.Width] = String(width);
+                }
+                if ((0, is_number_1.default)(height)) {
+                    imgAttrs[const_1.ImgSizeAttr.Height] = String(height);
+                }
+                dispatch(state.tr.insert(state.selection.from, (0, Image_1.imgType)(schema).create(imgAttrs)));
+            }
+        },
+    };
+};
+exports.addImage = addImage;

package/build/cjs/extensions/yfm/ImgSize/const.d.ts

@@ -0,0 +1,8 @@
+import { PluginKey } from 'prosemirror-state';
+export { ImgSizeAttr } from './ImgSizeSpecs';
+export { imageNodeName, addImageAction } from '../../markdown/Image/const';
+export declare const IMG_MAX_HEIGHT = 600;
+export declare type ImageRendererState = {
+    linkAdded: boolean;
+};
+export declare const imageRendererKey: PluginKey<ImageRendererState>;

package/build/cjs/extensions/yfm/ImgSize/const.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.imageRendererKey = exports.IMG_MAX_HEIGHT = exports.addImageAction = exports.imageNodeName = exports.ImgSizeAttr = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+var ImgSizeSpecs_1 = require("./ImgSizeSpecs");
+Object.defineProperty(exports, "ImgSizeAttr", { enumerable: true, get: function () { return ImgSizeSpecs_1.ImgSizeAttr; } });
+var const_1 = require("../../markdown/Image/const");
+Object.defineProperty(exports, "imageNodeName", { enumerable: true, get: function () { return const_1.imageNodeName; } });
+Object.defineProperty(exports, "addImageAction", { enumerable: true, get: function () { return const_1.addImageAction; } });
+exports.IMG_MAX_HEIGHT = 600; //px
+exports.imageRendererKey = new prosemirror_state_1.PluginKey('imageRenderer');

package/build/cjs/extensions/yfm/ImgSize/index.d.ts

@@ -0,0 +1,22 @@
+import type { Action, ExtensionAuto } from '../../../core';
+import type { FileUploadHandler } from '../../../utils';
+import { ImgSizeSpecsOptions } from './ImgSizeSpecs';
+import { AddImageAttrs } from './actions';
+import { addImageAction } from './const';
+export declare type ImgSizeOptions = ImgSizeSpecsOptions & {
+    imageUploadHandler?: FileUploadHandler;
+    /**
+     * If we need to set dimensions for uploaded images
+     *
+     * @default false
+     */
+    needToSetDimensionsForUploadedImages?: boolean;
+};
+export declare const ImgSize: ExtensionAuto<ImgSizeOptions>;
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [addImageAction]: Action<AddImageAttrs>;
+        }
+    }
+}