@gravity-ui/markdown-editor 14.0.3 → 14.2.1

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

@@ -2,30 +2,34 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImagesUploadProcess = void 0;
 const logger_1 = require("../../../../logger");
+const utils_1 = require("../../../../utils");
 const upload_1 = require("../../../behavior/utils/upload");
 const markdown_1 = require("../../../markdown");
 const const_1 = require("../const");
-const utils_1 = require("../utils");
+const utils_2 = 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);
+        this.createImage = (0, utils_2.createImageNode)((0, markdown_1.imageType)(this.view.state.schema), opts);
+        this.enableNewImageSizeCalculation = opts.enableNewImageSizeCalculation;
     }
     async createSkeleton() {
-        return new skeleton_1.ImageSkeletonDescriptor(this.initPosition, await getSkeletonSize(this.files));
+        return new skeleton_1.ImageSkeletonDescriptor(this.initPosition, await getSkeletonSize(this.files, {
+            enableNewImageSizeCalculation: this.enableNewImageSizeCalculation,
+        }));
     }
     async createPMNode(res) {
         return this.createImage(res);
     }
 }
 exports.ImagesUploadProcess = ImagesUploadProcess;
-async function getSkeletonSize(files) {
+async function getSkeletonSize(files, opts) {
     const skeletonSize = { width: '300', height: '200' };
     if (files.length === 1) {
         try {
-            const size = await (0, utils_1.loadImage)(files[0]).then(calcSkeletonSize);
+            const size = await (0, utils_2.loadImage)(files[0]).then((opts === null || opts === void 0 ? void 0 : opts.enableNewImageSizeCalculation) ? calcSkeletonSizeNew : calcSkeletonSize);
             skeletonSize.width = String(size.width);
             skeletonSize.height = String(size.height);
         }
@@ -35,10 +39,16 @@ async function getSkeletonSize(files) {
     }
     return skeletonSize;
 }
-function calcSkeletonSize(img) {
-    const { width, height } = img;
+function calcSkeletonSize({ width, height }) {
     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 };
 }
+function calcSkeletonSizeNew({ width, height }) {
+    return (0, utils_1.getProportionalSize)({
+        width,
+        height,
+        imgMaxHeight: const_1.IMG_MAX_HEIGHT,
+    });
+}

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

@@ -78,7 +78,7 @@ class ImageWidgetHandler {
                 return;
             const { view } = this;
             new upload_1.ImagesUploadProcess(view, files, this.uploadImages, this.getPos(), {
-                needDimmensions: this.needToSetDimensionsForUploadedImages,
+                needDimensions: this.needToSetDimensionsForUploadedImages,
             }).run();
             view.dispatch((0, exports.removeWidget)(view.state.tr, this.decoId));
             view.focus();

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

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "ImgSizeAttr", { enumerable: true, get: function
 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.configureMd((md) => md.use(imsize_1.default, { log: log_1.default, enableInlineStyling: true }));
     builder.addNode(const_1.imageNodeName, () => ({
         spec: {
             inline: true,
@@ -66,13 +66,20 @@ const ImgSizeSpecs = (builder, opts) => {
         },
         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) +
-                ')');
+            let result = '![';
+            if (attrs.alt) {
+                result += state.esc(attrs.alt);
+            }
+            result += '](';
+            if (attrs.src) {
+                result += state.esc(attrs.src);
+            }
+            if (attrs.title) {
+                result += ` ${state.quote(attrs.title)}`;
+            }
+            result += getSize(attrs);
+            result += ')';
+            state.write(result);
         },
     }));
 };

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

@@ -1,17 +1,16 @@
 import type { Action, ExtensionAuto } from '../../../core';
-import type { FileUploadHandler } from '../../../utils';
+import { ImagePasteOptions } from './ImagePaste';
 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;
-};
+} & Pick<ImagePasteOptions, 'imageUploadHandler' | 'parseInsertedUrlAsImage' | 'enableNewImageSizeCalculation'>;
 export declare const ImgSize: ExtensionAuto<ImgSizeOptions>;
 declare global {
     namespace WysiwygEditor {

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

@@ -13,10 +13,12 @@ const ImgSize = (builder, opts) => {
         imageUploadHandler: opts.imageUploadHandler,
         needToSetDimensionsForUploadedImages: Boolean(opts.needToSetDimensionsForUploadedImages),
     });
-    if (opts.imageUploadHandler) {
+    if (opts.imageUploadHandler || opts.parseInsertedUrlAsImage) {
         builder.use(ImagePaste_1.ImagePaste, {
             imageUploadHandler: opts.imageUploadHandler,
-            needDimmensions: Boolean(opts.needToSetDimensionsForUploadedImages),
+            needDimensions: Boolean(opts.needToSetDimensionsForUploadedImages),
+            parseInsertedUrlAsImage: opts.parseInsertedUrlAsImage,
+            enableNewImageSizeCalculation: opts.enableNewImageSizeCalculation,
         });
     }
     builder.addAction(const_1.addImageAction, ({ schema }) => (0, actions_1.addImage)(schema));

package/build/cjs/extensions/yfm/ImgSize/plugins/ImgSizeNodeView/NodeView.js

@@ -40,10 +40,18 @@ const ImageNodeView = ({ node, view, getPos, updateAttributes, }) => {
         onResize: handleResize,
     });
     const style = {
-        width: state.width ? `${state.width}px` : '',
-        height: state.height ? `${state.height}px` : '',
         transition: 'width 0.15s ease-out, height 0.15s ease-out',
     };
+    if (state.width) {
+        style.width = `${state.width}px`;
+        if (state.height) {
+            style.aspectRatio = state.width / state.height;
+            style.height = 'auto;';
+        }
+    }
+    else if (state.height) {
+        style.height = `${state.height}px`;
+    }
     const handleDelete = (0, react_1.useCallback)(() => {
         const pos = getPos();
         if (pos === undefined)

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

@@ -1,13 +1,17 @@
 import { Node, NodeType } from 'prosemirror-model';
-import { UploadSuccessItem } from '../../../utils/upload';
+import { UploadSuccessItem } from '../../../utils';
 import { ImgSizeAttr } from '../../specs';
 export declare function isImageNode(node: Node): boolean;
 export declare type CreateImageNodeOptions = {
-    needDimmensions: boolean;
+    needDimensions: boolean;
+    enableNewImageSizeCalculation?: boolean;
 };
 export declare const createImageNode: (imgType: NodeType, opts: CreateImageNodeOptions) => ({ result, file }: UploadSuccessItem) => Promise<Node>;
 export declare function loadImage(imgFile: File): Promise<HTMLImageElement>;
 export declare function getImageSize(img: HTMLImageElement): {
+    [ImgSizeAttr.Height]?: string;
+};
+export declare function getImageSizeNew({ width, height }: HTMLImageElement): {
     [ImgSizeAttr.Width]?: string;
     [ImgSizeAttr.Height]?: string;
 };

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getImageSize = exports.loadImage = exports.createImageNode = exports.isImageNode = void 0;
+exports.getImageSizeNew = exports.getImageSize = exports.loadImage = exports.createImageNode = exports.isImageNode = void 0;
 const logger_1 = require("../../../logger");
+const utils_1 = require("../../../utils");
 const markdown_1 = require("../../markdown");
 const specs_1 = require("../../specs");
 const const_1 = require("./const");
@@ -15,9 +16,9 @@ const createImageNode = (imgType, opts) => async ({ result, file }) => {
         [specs_1.ImgSizeAttr.Src]: result.url,
         [specs_1.ImgSizeAttr.Alt]: (_a = result.name) !== null && _a !== void 0 ? _a : file.name,
     };
-    if (opts.needDimmensions) {
+    if (opts.needDimensions) {
         try {
-            const sizes = await loadImage(file).then(getImageSize);
+            const sizes = await loadImage(file).then(opts.enableNewImageSizeCalculation ? getImageSizeNew : getImageSize);
             Object.assign(attrs, sizes);
         }
         catch (err) {
@@ -43,3 +44,12 @@ function getImageSize(img) {
     return { height: String(Math.min(const_1.IMG_MAX_HEIGHT, img.height)) };
 }
 exports.getImageSize = getImageSize;
+function getImageSizeNew({ width, height }) {
+    const size = (0, utils_1.getProportionalSize)({
+        width,
+        height,
+        imgMaxHeight: const_1.IMG_MAX_HEIGHT,
+    });
+    return { width: String(size.width), height: String(size.height) };
+}
+exports.getImageSizeNew = getImageSizeNew;

package/build/cjs/extensions/yfm/Video/VideoSpecs/index.js

@@ -65,7 +65,7 @@ const VideoSpecs = (builder, opts) => {
                                 type: 'text/html',
                                 width: String(options[service].width),
                                 height: String(options[service].height),
-                                src: options.url(service, videoId, options),
+                                src: options.videoUrl(service, videoId, options),
                                 frameborder: '0',
                                 webkitallowfullscreen: '',
                                 mozallowfullscreen: '',

package/build/cjs/extensions/yfm/YfmFile/YfmFilePaste/index.d.ts

@@ -1,5 +1,5 @@
 import { ExtensionAuto } from '../../../../core';
-import { FileUploadHandler } from '../../../../utils/upload';
+import { FileUploadHandler } from '../../../../utils';
 export declare type YfmFilePasteOptions = {
     fileUploadHandler: FileUploadHandler;
     needToSetDimensionsForUploadedImages: boolean;

package/build/cjs/extensions/yfm/YfmFile/YfmFilePaste/index.js

@@ -76,7 +76,7 @@ class YfmFilesPasteUploadProcess extends upload_1.YfmFilesUploadProcessBase {
         const { schema } = this.view.state;
         if ((0, markdown_1.imageType)(schema)) {
             this.createImage = (0, utils_1.createImageNode)((0, markdown_1.imageType)(schema), {
-                needDimmensions: opts.needToSetDimensionsForUploadedImages,
+                needDimensions: opts.needToSetDimensionsForUploadedImages,
             });
         }
     }

package/build/cjs/i18n/menubar/index.d.ts

@@ -1,4 +1,4 @@
-export declare const i18n: <G extends "bold" | "code" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "colorify" | "mono" | "text" | "html" | "cut" | "table" | "image" | "code_inline" | "list" | "heading" | "note" | "file" | "codeblock" | "checkbox" | "emoji" | "tabs" | "math" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "gpt" | "undo" | "redo" | "math_inline" | "math_block" | "mermaid" | "colorify__color_blue" | "colorify__color_default" | "colorify__color_gray" | "colorify__color_green" | "colorify__color_orange" | "colorify__color_red" | "colorify__color_violet" | "colorify__color_yellow" | "colorify__group_text" | "folding-heading" | "folding-heading_hint" | "hrule" | "list__action_lift" | "list__action_sink" | "list_action_disabled" | "more_action" | "olist" | "ulist", S extends string>(key: G | (string extends S ? S : never), params?: {
+export declare const i18n: <G extends "bold" | "code" | "colorify" | "mono" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "text" | "html" | "cut" | "table" | "image" | "code_inline" | "list" | "heading" | "note" | "file" | "checkbox" | "emoji" | "undo" | "redo" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "math_inline" | "math_block" | "tabs" | "mermaid" | "gpt" | "codeblock" | "math" | "colorify__color_blue" | "colorify__color_default" | "colorify__color_gray" | "colorify__color_green" | "colorify__color_orange" | "colorify__color_red" | "colorify__color_violet" | "colorify__color_yellow" | "colorify__group_text" | "folding-heading" | "folding-heading_hint" | "hrule" | "list__action_lift" | "list__action_sink" | "list_action_disabled" | "more_action" | "olist" | "ulist", S extends string>(key: G | (string extends S ? S : never), params?: {
     [key: string]: any;
 } | undefined) => S extends G ? {
     bold: string;

package/build/cjs/i18n/placeholder/index.d.ts

@@ -1,4 +1,4 @@
-export declare const i18n: <G extends "block" | "heading" | "codeblock" | "doc_empty" | "checkbox" | "deflist_term" | "deflist_desc" | "cut_title" | "cut_content" | "note_title" | "note_content" | "layout_cell" | "table_cell" | "select_filter", S extends string>(key: G | (string extends S ? S : never), params?: {
+export declare const i18n: <G extends "block" | "heading" | "checkbox" | "doc_empty" | "codeblock" | "deflist_term" | "deflist_desc" | "cut_title" | "cut_content" | "note_title" | "note_content" | "layout_cell" | "table_cell" | "select_filter", S extends string>(key: G | (string extends S ? S : never), params?: {
     [key: string]: any;
 } | undefined) => S extends G ? {
     doc_empty: string;

package/build/cjs/i18n/yfm-note/index.d.ts

@@ -1,4 +1,4 @@
-export declare const i18n: <G extends "remove" | "info" | "alert" | "tip" | "warning", S extends string>(key: G | (string extends S ? S : never), params?: {
+export declare const i18n: <G extends "remove" | "info" | "warning" | "tip" | "alert", S extends string>(key: G | (string extends S ? S : never), params?: {
     [key: string]: any;
 } | undefined) => S extends G ? {
     info: string;

package/build/cjs/markup/codemirror/create.d.ts

@@ -1,6 +1,7 @@
 import { autocompletion } from '@codemirror/autocomplete';
 import type { Extension, StateCommand } from '@codemirror/state';
 import { EditorView, EditorViewConfig, KeyBinding, placeholder } from '@codemirror/view';
+import type { ParseInsertedUrlAsImage } from '../../bundle';
 import { EventMap } from '../../bundle/Editor';
 import { ReactRenderStorage } from '../../extensions';
 import { Receiver } from '../../utils';
@@ -18,7 +19,9 @@ export declare type CreateCodemirrorParams = {
     onScroll: (event: Event) => void;
     reactRenderer: ReactRenderStorage;
     uploadHandler?: FileUploadHandler;
-    needImgDimms?: boolean;
+    parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
+    needImageDimensions?: boolean;
+    enableNewImageSizeCalculation?: boolean;
     extensions?: Extension[];
     disabledExtensions?: {
         history?: boolean;

package/build/cjs/markup/codemirror/create.js

@@ -6,6 +6,7 @@ const commands_1 = require("@codemirror/commands");
 const language_1 = require("@codemirror/language");
 const view_1 = require("@codemirror/view");
 const action_names_1 = require("../../bundle/config/action-names");
+const utils_1 = require("../../extensions/behavior/Clipboard/utils");
 const logger_1 = require("../../logger");
 const shortcuts_1 = require("../../shortcuts");
 const commands_2 = require("../commands");
@@ -16,7 +17,7 @@ const react_facet_1 = require("./react-facet");
 const plugin_1 = require("./search-plugin/plugin");
 const yfm_1 = require("./yfm");
 function createCodemirror(params) {
-    const { doc, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, disabledExtensions = {}, keymaps = [], receiver, yfmLangOptions, extensions: extraExtensions, placeholder: placeholderContent, autocompletion: autocompletionConfig, } = params;
+    const { doc, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, disabledExtensions = {}, keymaps = [], receiver, yfmLangOptions, extensions: extraExtensions, placeholder: placeholderContent, autocompletion: autocompletionConfig, parseInsertedUrlAsImage, } = params;
     const extensions = [gravity_1.gravityTheme, (0, view_1.placeholder)(placeholderContent)];
     if (!disabledExtensions.history) {
         extensions.push((0, commands_1.history)());
@@ -66,6 +67,23 @@ function createCodemirror(params) {
         scroll(event) {
             onScroll(event);
         },
+        paste(event, editor) {
+            var _a;
+            if (event.clipboardData && parseInsertedUrlAsImage) {
+                const { imageUrl, title } = parseInsertedUrlAsImage((_a = event.clipboardData.getData(utils_1.DataTransferType.Text)) !== null && _a !== void 0 ? _a : '') || {};
+                if (!imageUrl) {
+                    return;
+                }
+                event.preventDefault();
+                (0, commands_2.insertImages)([
+                    {
+                        url: imageUrl,
+                        alt: title,
+                        title,
+                    },
+                ])(editor);
+            }
+        },
     }), (0, plugin_1.SearchPanelPlugin)({
         anchorSelector: '.g-md-search-anchor',
         receiver,
@@ -73,7 +91,8 @@ function createCodemirror(params) {
     if (params.uploadHandler) {
         extensions.push(files_upload_facet_1.FileUploadHandlerFacet.of({
             fn: params.uploadHandler,
-            imgWithDimms: params.needImgDimms,
+            imageWithDimensions: params.needImageDimensions,
+            enableNewImageSizeCalculation: params.enableNewImageSizeCalculation,
         }));
     }
     if (extraExtensions) {

package/build/cjs/markup/codemirror/files-upload-facet.d.ts

@@ -3,8 +3,10 @@ import type { FileUploadHandler } from '../../utils/upload';
 export type { FileUploadHandler };
 export declare const FileUploadHandlerFacet: Facet<{
     fn: FileUploadHandler;
-    imgWithDimms?: boolean | undefined;
+    imageWithDimensions?: boolean | undefined;
+    enableNewImageSizeCalculation?: boolean | undefined;
 }, {
     fn: FileUploadHandler;
-    imgWithDimms?: boolean | undefined;
+    imageWithDimensions?: boolean | undefined;
+    enableNewImageSizeCalculation?: boolean | undefined;
 }>;

package/build/cjs/markup/codemirror/files-upload-plugin/plugin.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilesUploadPlugin = void 0;
 const view_1 = require("@codemirror/view");
+const utils_1 = require("../../../utils");
 const files_upload_facet_1 = require("../files-upload-facet");
 const react_facet_1 = require("../react-facet");
 const const_1 = require("./const");
 const effects_1 = require("./effects");
-const utils_1 = require("./utils");
+const utils_2 = require("./utils");
 const widget_1 = require("./widget");
 class FileUploadWidget extends view_1.WidgetType {
     constructor(id) {
@@ -61,7 +62,7 @@ class FileUploadPresenter {
             this.widget.render({
                 status: 'success',
                 fileName: this.file.name,
-                fileType: (0, utils_1.isImageFile)(this.file) ? 'image' : 'file',
+                fileType: (0, utils_2.isImageFile)(this.file) ? 'image' : 'file',
             });
             setTimeout(async () => {
                 const markup = await this.formatFileMarkup(res);
@@ -82,7 +83,7 @@ class FileUploadPresenter {
             this.widget.render({
                 status: 'error',
                 fileName: this.file.name,
-                fileType: (0, utils_1.isImageFile)(this.file) ? 'image' : 'file',
+                fileType: (0, utils_2.isImageFile)(this.file) ? 'image' : 'file',
                 errorText: String(err),
                 onReUploadClick: () => {
                     if (this.state === 'error')
@@ -94,7 +95,8 @@ class FileUploadPresenter {
         this.view = params.view;
         this.widget = params.widget;
         this.uploader = params.uploader;
-        this.needDimmensionsForImages = params.needDimmensionsForImages;
+        this.needDimensionsForImages = params.needDimensionsForImages;
+        this.enableNewImageSizeCalculation = params.enableNewImageSizeCalculation;
         this.widget.setPresenter(this);
         this.run();
     }
@@ -106,28 +108,36 @@ class FileUploadPresenter {
         this.widget.render({
             status: 'uploading',
             fileName: this.file.name,
-            fileType: (0, utils_1.isImageFile)(this.file) ? 'image' : 'file',
+            fileType: (0, utils_2.isImageFile)(this.file) ? 'image' : 'file',
         });
         this.uploader(this.file).then(this.onUploadSuccess, this.onUploadError);
     }
     async formatFileMarkup(res) {
         var _a, _b;
         const fileName = (_b = (_a = res.name) !== null && _a !== void 0 ? _a : this.file.name) !== null && _b !== void 0 ? _b : '';
-        let markup;
-        if ((0, utils_1.isImageFile)(this.file)) {
-            if (this.needDimmensionsForImages) {
+        let markup = `![${fileName}](${res.url}`;
+        if ((0, utils_2.isImageFile)(this.file)) {
+            if (this.needDimensionsForImages) {
                 try {
-                    let { height } = await (0, utils_1.getImageDimensions)(this.file);
-                    height = Math.min(height, const_1.IMG_MAX_HEIGHT);
-                    markup = `![${fileName}](${res.url} =x${height})`;
+                    const fileSize = await (0, utils_2.getImageDimensions)(this.file);
+                    if (this.enableNewImageSizeCalculation) {
+                        const { width, height } = (0, utils_1.getProportionalSize)({
+                            width: fileSize.width,
+                            height: fileSize.height,
+                            imgMaxHeight: const_1.IMG_MAX_HEIGHT,
+                        });
+                        markup += ` =${width}x${height}`;
+                    }
+                    else {
+                        const height = Math.min(fileSize.height, const_1.IMG_MAX_HEIGHT);
+                        markup += ` =x${height}`;
+                    }
                 }
                 catch (err) {
-                    markup = `![${fileName}](${res.url})`;
+                    console.error(err);
                 }
             }
-            else {
-                markup = `![${fileName}](${res.url})`;
-            }
+            markup += `)`;
         }
         else {
             markup = `{% file src="${res.url}" name="${fileName.replace('"', '')}" %}`;
@@ -153,8 +163,9 @@ exports.FilesUploadPlugin = view_1.ViewPlugin.fromClass(class {
                                 file,
                                 view: this.view,
                                 uploader: uploadFacet.fn,
-                                needDimmensionsForImages: Boolean(uploadFacet.imgWithDimms),
-                                widget: new FileUploadWidget((0, utils_1.uniqueId)('__file_widget_id')),
+                                needDimensionsForImages: Boolean(uploadFacet.imageWithDimensions),
+                                enableNewImageSizeCalculation: Boolean(uploadFacet.enableNewImageSizeCalculation),
+                                widget: new FileUploadWidget((0, utils_2.uniqueId)('__file_widget_id')),
                             });
                             return view_1.Decoration.widget({
                                 widget,
@@ -190,7 +201,7 @@ exports.FilesUploadPlugin = view_1.ViewPlugin.fromClass(class {
         paste(event, view) {
             if (!event.clipboardData)
                 return false;
-            const files = (0, utils_1.getTransferFiles)(event.clipboardData);
+            const files = (0, utils_2.getTransferFiles)(event.clipboardData);
             if (!files)
                 return false;
             const { from, to } = view.state.selection.main;
@@ -205,7 +216,7 @@ exports.FilesUploadPlugin = view_1.ViewPlugin.fromClass(class {
         drop(event, view) {
             if (!event.dataTransfer)
                 return false;
-            const files = (0, utils_1.getTransferFiles)(event.dataTransfer);
+            const files = (0, utils_2.getTransferFiles)(event.dataTransfer);
             if (!files)
                 return false;
             const pos = this.view.posAtCoords(event, false);

package/build/cjs/markup/codemirror/files-upload-plugin/utils.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTransferFiles = exports.loadImage = exports.getImageDimensions = exports.isImageFile = exports.uniqueId = void 0;
-const clipboard_1 = require("../../../utils/clipboard");
+const utils_1 = require("../../../utils");
 var lodash_1 = require("../../../lodash");
 Object.defineProperty(exports, "uniqueId", { enumerable: true, get: function () { return lodash_1.uniqueId; } });
-var clipboard_2 = require("../../../utils/clipboard");
-Object.defineProperty(exports, "isImageFile", { enumerable: true, get: function () { return clipboard_2.isImageFile; } });
+var clipboard_1 = require("../../../utils/clipboard");
+Object.defineProperty(exports, "isImageFile", { enumerable: true, get: function () { return clipboard_1.isImageFile; } });
 async function getImageDimensions(imgFile) {
     const img = await loadImage(imgFile);
     return { width: img.naturalWidth, height: img.naturalHeight };
@@ -26,7 +26,7 @@ exports.loadImage = loadImage;
 function getTransferFiles(data) {
     if (!data)
         return null;
-    if (!(0, clipboard_1.isFilesOnly)(data) && !(0, clipboard_1.isFilesFromHtml)(data))
+    if (!(0, utils_1.isFilesOnly)(data) && !(0, utils_1.isFilesFromHtml)(data))
         return null;
     return Array.from(data.files);
 }

package/build/cjs/markup/codemirror/yfm.d.ts

@@ -8,7 +8,7 @@ export declare const customTags: {
 };
 export declare type YfmNoteType = 'info' | 'tip' | 'warning' | 'alert';
 export declare const yfmNoteTypes: readonly YfmNoteType[];
-export declare const yfmNoteSnippetTemplate: (type: YfmNoteType) => "{% note info %}\n\n#{}\n\n{% endnote %}\n\n" | "{% note alert %}\n\n#{}\n\n{% endnote %}\n\n" | "{% note tip %}\n\n#{}\n\n{% endnote %}\n\n" | "{% note warning %}\n\n#{}\n\n{% endnote %}\n\n";
+export declare const yfmNoteSnippetTemplate: (type: YfmNoteType) => "{% note info %}\n\n#{}\n\n{% endnote %}\n\n" | "{% note warning %}\n\n#{}\n\n{% endnote %}\n\n" | "{% note tip %}\n\n#{}\n\n{% endnote %}\n\n" | "{% note alert %}\n\n#{}\n\n{% endnote %}\n\n";
 export declare const yfmNoteSnippets: Record<YfmNoteType, ReturnType<typeof snippet>>;
 export declare const yfmCutSnippetTemplate = "{% cut \"#{title}\" %}\n\n#{}\n\n{% endcut %}\n\n";
 export declare const yfmCutSnippet: (editor: {

package/build/cjs/markup/commands/inline.js

@@ -26,9 +26,15 @@ function insertImages(images) {
     return ({ state, dispatch }) => {
         const markup = images
             .map(({ title, url, alt, width, height }) => {
-            const titleStr = title ? ` "${title}"` : '';
-            const sizeStr = (width !== null && width !== void 0 ? width : height) ? ` =${width !== null && width !== void 0 ? width : ''}x${height !== null && height !== void 0 ? height : ''}` : '';
-            return `![${alt !== null && alt !== void 0 ? alt : ''}](${url !== null && url !== void 0 ? url : ''}${titleStr}${sizeStr})`;
+            let result = `![${alt !== null && alt !== void 0 ? alt : ''}](${url !== null && url !== void 0 ? url : ''}`;
+            if (title) {
+                result += ` "${title}`;
+            }
+            if (width !== undefined || height !== undefined) {
+                result += ` =${width !== null && width !== void 0 ? width : ''}x${height !== null && height !== void 0 ? height : ''}`;
+            }
+            result += ')';
+            return result;
         })
             .join(' ');
         const tr = state.changeByRange((range) => {

package/build/cjs/presets/commonmark.d.ts

@@ -1,5 +1,5 @@
 import type { Extension, ExtensionAuto } from '../core';
-import { BlockquoteOptions, BoldOptions, BreaksOptions, CodeBlockOptions, CodeOptions, HeadingOptions, ItalicOptions, LinkOptions, ListsOptions } from '../extensions/markdown';
+import { BlockquoteOptions, BoldOptions, BreaksOptions, CodeBlockOptions, CodeOptions, HeadingOptions, ImageOptions, ItalicOptions, LinkOptions, ListsOptions } from '../extensions/markdown';
 import { ZeroPresetOptions } from './zero';
 export declare type CommonMarkPresetOptions = ZeroPresetOptions & {
     bold?: BoldOptions;
@@ -8,7 +8,7 @@ export declare type CommonMarkPresetOptions = ZeroPresetOptions & {
     lists?: ListsOptions;
     italic?: ItalicOptions;
     breaks?: BreaksOptions;
-    image?: false | Extension;
+    image?: false | Extension | ImageOptions;
     codeBlock?: CodeBlockOptions;
     blockquote?: BlockquoteOptions;
     heading?: false | Extension | HeadingOptions;

package/build/cjs/presets/commonmark.js

@@ -19,7 +19,7 @@ const CommonMarkPreset = (builder, opts) => {
         .use(markdown_1.CodeBlock, (_g = opts.codeBlock) !== null && _g !== void 0 ? _g : {})
         .use(markdown_1.Blockquote, (_h = opts.blockquote) !== null && _h !== void 0 ? _h : {});
     if (opts.image !== false) {
-        builder.use((0, lodash_1.isFunction)(opts.image) ? opts.image : markdown_1.Image);
+        builder.use((0, lodash_1.isFunction)(opts.image) ? opts.image : markdown_1.Image, (0, lodash_1.isFunction)(opts.image) ? undefined : opts.image);
     }
     if (opts.heading !== false) {
         if ((0, lodash_1.isFunction)(opts.heading))

package/build/cjs/utils/get-proportional-size.d.ts

@@ -0,0 +1,10 @@
+declare type GetProportionalSizeParams = {
+    width: number;
+    height: number;
+    imgMaxHeight: number;
+};
+export declare function getProportionalSize({ width: _width, height: _height, imgMaxHeight, }: GetProportionalSizeParams): {
+    width: number;
+    height: number;
+};
+export {};

package/build/cjs/utils/get-proportional-size.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProportionalSize = void 0;
+function getProportionalSize({ width: _width, height: _height, imgMaxHeight, }) {
+    let width = _width;
+    let height = _height;
+    const ratio = width / height;
+    if (height > imgMaxHeight) {
+        height = imgMaxHeight;
+        width = Math.round(height * ratio);
+    }
+    return { width, height };
+}
+exports.getProportionalSize = getProportionalSize;

package/build/cjs/utils/index.d.ts

@@ -5,7 +5,7 @@ export * from './clipboard';
 export * from './ecapeRegexp';
 export * from './event-emitter';
 export * from './helpers';
-export { markInputRule, nodeInputRule, inlineNodeInputRule, textblockTypeInputRule, wrappingInputRule, } from './inputrules';
+export * from './inputrules';
 export * from './keymap';
 export * from './marks';
 export * from './node-children';
@@ -18,3 +18,4 @@ export * from './selection';
 export * from './serialize-for-clipboard';
 export * from './sync-scroll';
 export * from './upload';
+export * from './get-proportional-size';

package/build/cjs/utils/index.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wrappingInputRule = exports.textblockTypeInputRule = exports.inlineNodeInputRule = exports.nodeInputRule = exports.markInputRule = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./actions"), exports);
 tslib_1.__exportStar(require("./autocomplete-popup"), exports);
@@ -9,12 +8,7 @@ tslib_1.__exportStar(require("./clipboard"), exports);
 tslib_1.__exportStar(require("./ecapeRegexp"), exports);
 tslib_1.__exportStar(require("./event-emitter"), exports);
 tslib_1.__exportStar(require("./helpers"), exports);
-var inputrules_1 = require("./inputrules");
-Object.defineProperty(exports, "markInputRule", { enumerable: true, get: function () { return inputrules_1.markInputRule; } });
-Object.defineProperty(exports, "nodeInputRule", { enumerable: true, get: function () { return inputrules_1.nodeInputRule; } });
-Object.defineProperty(exports, "inlineNodeInputRule", { enumerable: true, get: function () { return inputrules_1.inlineNodeInputRule; } });
-Object.defineProperty(exports, "textblockTypeInputRule", { enumerable: true, get: function () { return inputrules_1.textblockTypeInputRule; } });
-Object.defineProperty(exports, "wrappingInputRule", { enumerable: true, get: function () { return inputrules_1.wrappingInputRule; } });
+tslib_1.__exportStar(require("./inputrules"), exports);
 tslib_1.__exportStar(require("./keymap"), exports);
 tslib_1.__exportStar(require("./marks"), exports);
 tslib_1.__exportStar(require("./node-children"), exports);
@@ -27,3 +21,4 @@ tslib_1.__exportStar(require("./selection"), exports);
 tslib_1.__exportStar(require("./serialize-for-clipboard"), exports);
 tslib_1.__exportStar(require("./sync-scroll"), exports);
 tslib_1.__exportStar(require("./upload"), exports);
+tslib_1.__exportStar(require("./get-proportional-size"), exports);