@gravity-ui/markdown-editor 14.0.2 → 14.2.0

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

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

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

@@ -7,7 +7,7 @@ export { ImgSizeAttr };
 export 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, { log }));
+    builder.configureMd((md) => md.use(imsize, { log, enableInlineStyling: true }));
     builder.addNode(imageNodeName, () => ({
         spec: {
             inline: true,
@@ -62,13 +62,20 @@ export 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/esm/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/esm/extensions/yfm/ImgSize/index.js

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

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

@@ -37,10 +37,18 @@ export 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 = useCallback(() => {
         const pos = getPos();
         if (pos === undefined)

package/build/esm/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/esm/extensions/yfm/ImgSize/utils.js

@@ -1,4 +1,5 @@
 import { logger } from '../../../logger';
+import { getProportionalSize } from '../../../utils';
 import { imageNodeName } from '../../markdown';
 import { ImgSizeAttr } from '../../specs';
 import { IMG_MAX_HEIGHT } from './const';
@@ -11,9 +12,9 @@ export const createImageNode = (imgType, opts) => async ({ result, file }) => {
         [ImgSizeAttr.Src]: result.url,
         [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) {
@@ -36,3 +37,11 @@ export async function loadImage(imgFile) {
 export function getImageSize(img) {
     return { height: String(Math.min(IMG_MAX_HEIGHT, img.height)) };
 }
+export function getImageSizeNew({ width, height }) {
+    const size = getProportionalSize({
+        width,
+        height,
+        imgMaxHeight: IMG_MAX_HEIGHT,
+    });
+    return { width: String(size.width), height: String(size.height) };
+}

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

@@ -59,7 +59,7 @@ export 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/esm/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/esm/extensions/yfm/YfmFile/YfmFilePaste/index.js

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

package/build/esm/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/esm/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/esm/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/esm/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/esm/markup/codemirror/create.js

@@ -3,9 +3,10 @@ import { defaultKeymap, history, historyKeymap, indentWithTab, insertNewlineKeep
 import { syntaxHighlighting } from '@codemirror/language';
 import { EditorView, keymap, placeholder } from '@codemirror/view';
 import { ActionName } from '../../bundle/config/action-names';
+import { DataTransferType } from '../../extensions/behavior/Clipboard/utils';
 import { logger } from '../../logger';
 import { Action as A, formatter as f } from '../../shortcuts';
-import { insertLink, toH1, toH2, toH3, toH4, toH5, toH6, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, wrapToCodeBlock, wrapToInlineCode, wrapToYfmCut, wrapToYfmNote, } from '../commands';
+import { insertImages, insertLink, toH1, toH2, toH3, toH4, toH5, toH6, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, wrapToCodeBlock, wrapToInlineCode, wrapToYfmCut, wrapToYfmNote, } from '../commands';
 import { FileUploadHandlerFacet } from './files-upload-facet';
 import { gravityHighlightStyle, gravityTheme } from './gravity';
 import { PairingCharactersExtension } from './pairing-chars';
@@ -13,7 +14,7 @@ import { ReactRendererFacet } from './react-facet';
 import { SearchPanelPlugin } from './search-plugin/plugin';
 import { yfmLang } from './yfm';
 export 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 = [gravityTheme, placeholder(placeholderContent)];
     if (!disabledExtensions.history) {
         extensions.push(history());
@@ -63,6 +64,23 @@ export function createCodemirror(params) {
         scroll(event) {
             onScroll(event);
         },
+        paste(event, editor) {
+            var _a;
+            if (event.clipboardData && parseInsertedUrlAsImage) {
+                const { imageUrl, title } = parseInsertedUrlAsImage((_a = event.clipboardData.getData(DataTransferType.Text)) !== null && _a !== void 0 ? _a : '') || {};
+                if (!imageUrl) {
+                    return;
+                }
+                event.preventDefault();
+                insertImages([
+                    {
+                        url: imageUrl,
+                        alt: title,
+                        title,
+                    },
+                ])(editor);
+            }
+        },
     }), SearchPanelPlugin({
         anchorSelector: '.g-md-search-anchor',
         receiver,
@@ -70,7 +88,8 @@ export function createCodemirror(params) {
     if (params.uploadHandler) {
         extensions.push(FileUploadHandlerFacet.of({
             fn: params.uploadHandler,
-            imgWithDimms: params.needImgDimms,
+            imageWithDimensions: params.needImageDimensions,
+            enableNewImageSizeCalculation: params.enableNewImageSizeCalculation,
         }));
     }
     if (extraExtensions) {

package/build/esm/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/esm/markup/codemirror/files-upload-plugin/plugin.js

@@ -1,4 +1,5 @@
 import { Decoration, ViewPlugin, WidgetType, } from '@codemirror/view';
+import { getProportionalSize } from '../../../utils';
 import { FileUploadHandlerFacet } from '../files-upload-facet';
 import { ReactRendererFacet } from '../react-facet';
 import { IMG_MAX_HEIGHT, SUCCESS_UPLOAD_REMOVE_TIMEOUT } from './const';
@@ -91,7 +92,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();
     }
@@ -110,21 +112,29 @@ class FileUploadPresenter {
     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;
+        let markup = `![${fileName}](${res.url}`;
         if (isImageFile(this.file)) {
-            if (this.needDimmensionsForImages) {
+            if (this.needDimensionsForImages) {
                 try {
-                    let { height } = await getImageDimensions(this.file);
-                    height = Math.min(height, IMG_MAX_HEIGHT);
-                    markup = `![${fileName}](${res.url} =x${height})`;
+                    const fileSize = await getImageDimensions(this.file);
+                    if (this.enableNewImageSizeCalculation) {
+                        const { width, height } = getProportionalSize({
+                            width: fileSize.width,
+                            height: fileSize.height,
+                            imgMaxHeight: IMG_MAX_HEIGHT,
+                        });
+                        markup += ` =${width}x${height}`;
+                    }
+                    else {
+                        const height = Math.min(fileSize.height, 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('"', '')}" %}`;
@@ -150,7 +160,8 @@ export const FilesUploadPlugin = ViewPlugin.fromClass(class {
                                 file,
                                 view: this.view,
                                 uploader: uploadFacet.fn,
-                                needDimmensionsForImages: Boolean(uploadFacet.imgWithDimms),
+                                needDimensionsForImages: Boolean(uploadFacet.imageWithDimensions),
+                                enableNewImageSizeCalculation: Boolean(uploadFacet.enableNewImageSizeCalculation),
                                 widget: new FileUploadWidget(uniqueId('__file_widget_id')),
                             });
                             return Decoration.widget({

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

@@ -1,4 +1,4 @@
-import { isFilesFromHtml, isFilesOnly } from '../../../utils/clipboard';
+import { isFilesFromHtml, isFilesOnly } from '../../../utils';
 export { uniqueId } from '../../../lodash';
 export { isImageFile } from '../../../utils/clipboard';
 export async function getImageDimensions(imgFile) {

package/build/esm/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/esm/markup/commands/inline.js

@@ -21,9 +21,15 @@ export 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/esm/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/esm/presets/commonmark.js

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

package/build/esm/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/esm/utils/get-proportional-size.js

@@ -0,0 +1,10 @@
+export 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 };
+}

package/build/esm/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/esm/utils/index.js

@@ -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/esm/version.js

@@ -1,2 +1,2 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '14.0.2' !== 'undefined' ? '14.0.2' : 'unknown';
+export const VERSION = typeof '14.2.0' !== 'undefined' ? '14.2.0' : 'unknown';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "14.0.2",
+  "version": "14.2.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -19,8 +19,8 @@
     "clean": "gulp clean",
     "build": "gulp",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "storybook:start": "TS_NODE_PROJECT=.storybook/tsconfig.json sb dev -p 8888 -c .storybook",
-    "storybook:build": "TS_NODE_PROJECT=.storybook/tsconfig.json sb build -c .storybook -o storybook-static",
+    "storybook:start": "TS_NODE_PROJECT=.storybook/tsconfig.json storybook dev -p 8888 -c .storybook",
+    "storybook:build": "TS_NODE_PROJECT=.storybook/tsconfig.json storybook build -c .storybook -o storybook-static",
     "lint": "run-p -cs lint:*",
     "lint:js": "eslint \"{src,demo}/**/*.{js,jsx,ts,tsx}\"",
     "lint:styles": "stylelint \"{src,demo}/**/*.{css,scss}\"",
@@ -170,6 +170,7 @@
     "@gravity-ui/icons": "^2.10.0",
     "@lezer/highlight": "~1.2.1",
     "@lezer/markdown": "~1.3.1",
+    "@storybook/react": "8.4.1",
     "@types/is-number": "^7.0.1",
     "@types/markdown-it": "^12.2.3",
     "base64-arraybuffer": "1.0.2",
@@ -206,17 +207,19 @@
     "@diplodoc/latex-extension": "1.0.3",
     "@diplodoc/mermaid-extension": "1.2.1",
     "@diplodoc/tabs-extension": "^3.5.1",
-    "@diplodoc/transform": "^4.33.0",
+    "@diplodoc/transform": "^4.36.0",
     "@gravity-ui/components": "3.0.0",
     "@gravity-ui/eslint-config": "3.1.1",
     "@gravity-ui/prettier-config": "1.1.0",
     "@gravity-ui/stylelint-config": "4.0.1",
     "@gravity-ui/tsconfig": "1.0.0",
     "@gravity-ui/uikit": "6.11.0",
-    "@storybook/addon-essentials": "^7.1.1",
-    "@storybook/cli": "^7.1.1",
+    "@storybook/addon-essentials": "^8.4.1",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.3",
+    "@storybook/cli": "^8.4.1",
     "@storybook/preset-scss": "1.0.3",
-    "@storybook/react-webpack5": "^7.1.1",
+    "@storybook/react-webpack5": "^8.4.1",
+    "@storybook/theming": "^8.4.1",
     "@types/gulp": "4.0.9",
     "@types/gulp-sass": "5.0.0",
     "@types/jest": "^27.0.3",