@gravity-ui/markdown-editor 14.0.2 → 14.2.0

package/build/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '14.0.2' !== 'undefined' ? '14.0.2' : 'unknown';
+exports.VERSION = typeof '14.2.0' !== 'undefined' ? '14.2.0' : 'unknown';

package/build/esm/bundle/Editor.d.ts

@@ -1,6 +1,6 @@
 import type { CommonEditor } from '../common';
 import { ReactRenderStorage } from '../extensions';
-import { type Receiver } from '../utils/event-emitter';
+import { type Receiver } from '../utils';
 import type { MarkdownEditorMode as EditorMode, MarkdownEditorPreset as EditorPreset, MarkdownEditorOptions } from './types';
 export declare type ToolbarActionData = {
     editorMode: EditorMode;

package/build/esm/bundle/Editor.js

@@ -1,13 +1,13 @@
-var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_markupConfig, _EditorImpl_escapeConfig, _EditorImpl_mdOptions, _EditorImpl_preset, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_prepareRawMarkup, _EditorImpl_beforeEditorModeChange;
+var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_markupConfig, _EditorImpl_escapeConfig, _EditorImpl_mdOptions, _EditorImpl_preset, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_parseInsertedUrlAsImage, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_enableNewImageSizeCalculation, _EditorImpl_prepareRawMarkup, _EditorImpl_beforeEditorModeChange;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __rest } from "tslib";
 import { EditorView as CMEditorView } from '@codemirror/view';
 import { TextSelection } from 'prosemirror-state';
 import { WysiwygEditor, } from '../core';
 import { i18n } from '../i18n/bundle';
 import { logger } from '../logger';
-import { createCodemirror } from '../markup/codemirror';
+import { createCodemirror } from '../markup';
 import { Editor as MarkupEditor } from '../markup/editor';
-import { SafeEventEmitter } from '../utils/event-emitter';
+import { SafeEventEmitter } from '../utils';
 /** @internal */
 export class EditorImpl extends SafeEventEmitter {
     constructor(opts) {
@@ -28,7 +28,9 @@ export class EditorImpl extends SafeEventEmitter {
         _EditorImpl_extensions.set(this, void 0);
         _EditorImpl_renderStorage.set(this, void 0);
         _EditorImpl_fileUploadHandler.set(this, void 0);
+        _EditorImpl_parseInsertedUrlAsImage.set(this, void 0);
         _EditorImpl_needToSetDimensionsForUploadedImages.set(this, void 0);
+        _EditorImpl_enableNewImageSizeCalculation.set(this, void 0);
         _EditorImpl_prepareRawMarkup.set(this, void 0);
         _EditorImpl_beforeEditorModeChange.set(this, void 0);
         this.getValue = () => this.currentEditor.getValue();
@@ -45,7 +47,9 @@ export class EditorImpl extends SafeEventEmitter {
         __classPrivateFieldSet(this, _EditorImpl_markupConfig, Object.assign({}, opts.markupConfig), "f");
         __classPrivateFieldSet(this, _EditorImpl_renderStorage, opts.renderStorage, "f");
         __classPrivateFieldSet(this, _EditorImpl_fileUploadHandler, handlers.uploadFile, "f");
+        __classPrivateFieldSet(this, _EditorImpl_parseInsertedUrlAsImage, markupConfig.parseInsertedUrlAsImage, "f");
         __classPrivateFieldSet(this, _EditorImpl_needToSetDimensionsForUploadedImages, Boolean(experimental.needToSetDimensionsForUploadedImages), "f");
+        __classPrivateFieldSet(this, _EditorImpl_enableNewImageSizeCalculation, Boolean(experimental.enableNewImageSizeCalculation), "f");
         __classPrivateFieldSet(this, _EditorImpl_prepareRawMarkup, experimental.prepareRawMarkup, "f");
         __classPrivateFieldSet(this, _EditorImpl_escapeConfig, wysiwygConfig.escapeConfig, "f");
         __classPrivateFieldSet(this, _EditorImpl_beforeEditorModeChange, experimental.beforeEditorModeChange, "f");
@@ -157,7 +161,9 @@ export class EditorImpl extends SafeEventEmitter {
                 onScroll: (event) => this.emit('cm-scroll', { event }),
                 reactRenderer: __classPrivateFieldGet(this, _EditorImpl_renderStorage, "f"),
                 uploadHandler: this.fileUploadHandler,
-                needImgDimms: this.needToSetDimensionsForUploadedImages,
+                parseInsertedUrlAsImage: this.parseInsertedUrlAsImage,
+                needImageDimensions: this.needToSetDimensionsForUploadedImages,
+                enableNewImageSizeCalculation: this.enableNewImageSizeCalculation,
                 extensions: __classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").extensions,
                 disabledExtensions: __classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").disabledExtensions,
                 keymaps: __classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").keymaps,
@@ -174,9 +180,15 @@ export class EditorImpl extends SafeEventEmitter {
     get fileUploadHandler() {
         return __classPrivateFieldGet(this, _EditorImpl_fileUploadHandler, "f");
     }
+    get parseInsertedUrlAsImage() {
+        return __classPrivateFieldGet(this, _EditorImpl_parseInsertedUrlAsImage, "f");
+    }
     get needToSetDimensionsForUploadedImages() {
         return __classPrivateFieldGet(this, _EditorImpl_needToSetDimensionsForUploadedImages, "f");
     }
+    get enableNewImageSizeCalculation() {
+        return __classPrivateFieldGet(this, _EditorImpl_enableNewImageSizeCalculation, "f");
+    }
     // ---> implements CodeEditor
     get cm() {
         return this.markupEditor.cm;
@@ -296,7 +308,7 @@ export class EditorImpl extends SafeEventEmitter {
         return (serializedEditorMarkup === null || serializedEditorMarkup === void 0 ? void 0 : serializedEditorMarkup.trim()) !== wysiwygValue.trim();
     }
 }
-_EditorImpl_markup = new WeakMap(), _EditorImpl_editorMode = new WeakMap(), _EditorImpl_toolbarVisible = new WeakMap(), _EditorImpl_splitModeEnabled = new WeakMap(), _EditorImpl_splitMode = new WeakMap(), _EditorImpl_renderPreview = new WeakMap(), _EditorImpl_wysiwygEditor = new WeakMap(), _EditorImpl_markupEditor = new WeakMap(), _EditorImpl_markupConfig = new WeakMap(), _EditorImpl_escapeConfig = new WeakMap(), _EditorImpl_mdOptions = new WeakMap(), _EditorImpl_preset = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap(), _EditorImpl_beforeEditorModeChange = new WeakMap();
+_EditorImpl_markup = new WeakMap(), _EditorImpl_editorMode = new WeakMap(), _EditorImpl_toolbarVisible = new WeakMap(), _EditorImpl_splitModeEnabled = new WeakMap(), _EditorImpl_splitMode = new WeakMap(), _EditorImpl_renderPreview = new WeakMap(), _EditorImpl_wysiwygEditor = new WeakMap(), _EditorImpl_markupEditor = new WeakMap(), _EditorImpl_markupConfig = new WeakMap(), _EditorImpl_escapeConfig = new WeakMap(), _EditorImpl_mdOptions = new WeakMap(), _EditorImpl_preset = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_parseInsertedUrlAsImage = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_enableNewImageSizeCalculation = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap(), _EditorImpl_beforeEditorModeChange = new WeakMap();
 function getTopOffset(elem) {
     const TOOLBAR_HEIGHT = 36; //px
     const TOOLBAR_BOTTOM_OFFSET = 8; // px

package/build/esm/bundle/config/action-names.d.ts

@@ -1,3 +1,3 @@
-declare const namesObj: Record<"bold" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "mono" | "paragraph" | "anchor" | "table" | "image" | "code_inline" | "code_block" | "file" | "checkbox" | "bulletList" | "orderedList" | "emoji" | "tabs" | "yfm_cut" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "yfm_note" | "gpt" | "undo" | "redo" | "liftListItem" | "sinkListItem" | "yfm_block" | "yfm_html_block" | "yfm_layout" | "horizontalrule" | "math_inline" | "math_block" | "mermaid", string>;
+declare const namesObj: Record<"bold" | "mono" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "paragraph" | "anchor" | "table" | "image" | "code_inline" | "code_block" | "file" | "checkbox" | "emoji" | "undo" | "redo" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "bulletList" | "orderedList" | "liftListItem" | "sinkListItem" | "yfm_cut" | "yfm_note" | "yfm_block" | "yfm_html_block" | "yfm_layout" | "horizontalrule" | "math_inline" | "math_block" | "tabs" | "mermaid" | "gpt", string>;
 export declare const ActionName: Readonly<typeof namesObj>;
 export {};

package/build/esm/bundle/toolbar/markup/MToolbarImagePopup.d.ts

@@ -1,5 +1,5 @@
 import React, { RefObject } from 'react';
-import type { CodeEditor } from '../../../markup/editor';
+import type { CodeEditor } from '../../../markup';
 import type { ToolbarBaseProps } from '../../../toolbar';
 export declare type MToolbarImagePopupProps = ToolbarBaseProps<CodeEditor> & {
     hide: () => void;

package/build/esm/bundle/toolbar/markup/MToolbarImagePopup.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import isNumber from 'is-number';
-import { IMG_MAX_HEIGHT, getImageDimensions } from '../../../markup';
-import { insertImages } from '../../../markup/commands';
+import { IMG_MAX_HEIGHT, getImageDimensions, insertImages } from '../../../markup';
 import { ToolbarImagePopup } from '../custom/ToolbarImagePopup';
 import { useMarkupToolbarContext } from './context';
 const noop = (err) => {
@@ -24,13 +23,13 @@ export const MToolbarImagePopup = ({ focus, onClick, hide, anchorRef, editor, cl
             insertImages(images)(editor.cm);
         } }));
 };
-async function toImageItems(items, withDimmensions) {
+async function toImageItems(items, withDimensions) {
     const imgItems = [];
     await Promise.all(items.map(({ result, file }) => {
         var _a;
         const imgItem = { url: result.url, alt: (_a = result.name) !== null && _a !== void 0 ? _a : file.name };
         imgItems.push(imgItem);
-        if (withDimmensions) {
+        if (withDimensions) {
             return getImageDimensions(file).then(({ height }) => {
                 imgItem.height = String(Math.min(height, IMG_MAX_HEIGHT));
             }, noop);

package/build/esm/bundle/types.d.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 import type { MarkupString } from '../common';
 import type { EscapeConfig, Extension } from '../core';
-import type { CreateCodemirrorParams, YfmLangOptions } from '../markup/codemirror';
-import type { FileUploadHandler } from '../utils/upload';
+import type { CreateCodemirrorParams, YfmLangOptions } from '../markup';
+import type { FileUploadHandler } from '../utils';
 import type { ChangeEditorModeOptions } from './Editor';
 import type { ExtensionsOptions as WysiwygPresetExtensionsOptions } from './wysiwyg-preset';
 export type { Editor as MarkdownEditorInstance } from './Editor';
@@ -15,6 +15,10 @@ export declare type RenderPreviewParams = {
     md: Readonly<MarkdownEditorMdOptions>;
 };
 export declare type RenderPreview = (params: RenderPreviewParams) => ReactNode;
+export declare type ParseInsertedUrlAsImage = (text: string) => {
+    imageUrl: string;
+    title?: string;
+} | null;
 export declare type MarkdownEditorMdOptions = {
     html?: boolean;
     breaks?: boolean;
@@ -45,6 +49,12 @@ export declare type MarkdownEditorExperimentalOptions = {
      * @default false
      */
     needToSetDimensionsForUploadedImages?: boolean;
+    /**
+     * If we need to enable new image size calculations
+     *
+     * @default false
+     */
+    enableNewImageSizeCalculation?: boolean;
     /**
      * Called before switching from the markup editor to the wysiwyg editor.
      * You can use it to pre-process the value from the markup editor before it gets into the wysiwyg editor.
@@ -85,6 +95,10 @@ export declare type MarkdownEditorMarkupConfig = {
     languageData?: YfmLangOptions['languageData'];
     /** Config for @codemirror/autocomplete https://codemirror.net/docs/ref/#autocomplete.autocompletion%5Econfig */
     autocompletion?: CreateCodemirrorParams['autocompletion'];
+    /**
+     * The function, used to determine if the pasted text is the image url and should be inserted as an image
+     */
+    parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
 };
 declare type ExtensionsOptions<T extends object = {}> = Omit<WysiwygPresetExtensionsOptions, 'reactRenderer'> & T;
 export declare type MarkdownEditorWysiwygConfig = {

package/build/esm/bundle/useMarkdownEditor.js

@@ -13,6 +13,7 @@ export function useMarkdownEditor(props, deps = []) {
         const renderStorage = new ReactRenderStorage();
         const uploadFile = (_c = handlers.uploadFile) !== null && _c !== void 0 ? _c : props.fileUploadHandler;
         const needToSetDimensionsForUploadedImages = (_d = experimental.needToSetDimensionsForUploadedImages) !== null && _d !== void 0 ? _d : props.needToSetDimensionsForUploadedImages;
+        const enableNewImageSizeCalculation = experimental.enableNewImageSizeCalculation;
         const extensions = (builder) => {
             var _a;
             const extensionOptions = (_a = wysiwygConfig.extensionOptions) !== null && _a !== void 0 ? _a : props.extensionOptions;
@@ -22,7 +23,8 @@ export function useMarkdownEditor(props, deps = []) {
                 }, onSubmit: () => {
                     editor.emit('submit', null);
                     return true;
-                }, mdBreaks: breaks, fileUploadHandler: uploadFile, needToSetDimensionsForUploadedImages }));
+                }, mdBreaks: breaks, fileUploadHandler: uploadFile, needToSetDimensionsForUploadedImages,
+                enableNewImageSizeCalculation }));
             {
                 const extraExtensions = wysiwygConfig.extensions || props.extraExtensions;
                 if (extraExtensions) {
@@ -31,7 +33,8 @@ export function useMarkdownEditor(props, deps = []) {
             }
         };
         return new EditorImpl(Object.assign(Object.assign({}, props), { preset,
-            renderStorage, md: Object.assign(Object.assign({}, md), { breaks, html: (_e = md.html) !== null && _e !== void 0 ? _e : props.allowHTML, linkify: (_f = md.linkify) !== null && _f !== void 0 ? _f : props.linkify, linkifyTlds: (_g = md.linkifyTlds) !== null && _g !== void 0 ? _g : props.linkifyTlds }), initial: Object.assign(Object.assign({}, initial), { markup: (_h = initial.markup) !== null && _h !== void 0 ? _h : props.initialMarkup, mode: (_j = initial.mode) !== null && _j !== void 0 ? _j : props.initialEditorMode, toolbarVisible: (_k = initial.toolbarVisible) !== null && _k !== void 0 ? _k : props.initialToolbarVisible, splitModeEnabled: (_l = initial.splitModeEnabled) !== null && _l !== void 0 ? _l : props.initialSplitModeEnabled }), handlers: Object.assign(Object.assign({}, handlers), { uploadFile }), experimental: Object.assign(Object.assign({}, experimental), { needToSetDimensionsForUploadedImages, prepareRawMarkup: (_m = experimental.prepareRawMarkup) !== null && _m !== void 0 ? _m : props.prepareRawMarkup, beforeEditorModeChange: (_o = experimental.beforeEditorModeChange) !== null && _o !== void 0 ? _o : props.experimental_beforeEditorModeChange }), markupConfig: Object.assign(Object.assign({}, markupConfig), { splitMode: (_p = markupConfig.splitMode) !== null && _p !== void 0 ? _p : props.splitMode, renderPreview: (_q = markupConfig.renderPreview) !== null && _q !== void 0 ? _q : props.renderPreview, extensions: (_r = markupConfig.extensions) !== null && _r !== void 0 ? _r : props.extraMarkupExtensions }), wysiwygConfig: Object.assign(Object.assign({}, wysiwygConfig), { extensions, escapeConfig: (_s = wysiwygConfig.escapeConfig) !== null && _s !== void 0 ? _s : props.escapeConfig }) }));
+            renderStorage, md: Object.assign(Object.assign({}, md), { breaks, html: (_e = md.html) !== null && _e !== void 0 ? _e : props.allowHTML, linkify: (_f = md.linkify) !== null && _f !== void 0 ? _f : props.linkify, linkifyTlds: (_g = md.linkifyTlds) !== null && _g !== void 0 ? _g : props.linkifyTlds }), initial: Object.assign(Object.assign({}, initial), { markup: (_h = initial.markup) !== null && _h !== void 0 ? _h : props.initialMarkup, mode: (_j = initial.mode) !== null && _j !== void 0 ? _j : props.initialEditorMode, toolbarVisible: (_k = initial.toolbarVisible) !== null && _k !== void 0 ? _k : props.initialToolbarVisible, splitModeEnabled: (_l = initial.splitModeEnabled) !== null && _l !== void 0 ? _l : props.initialSplitModeEnabled }), handlers: Object.assign(Object.assign({}, handlers), { uploadFile }), experimental: Object.assign(Object.assign({}, experimental), { needToSetDimensionsForUploadedImages,
+                enableNewImageSizeCalculation, prepareRawMarkup: (_m = experimental.prepareRawMarkup) !== null && _m !== void 0 ? _m : props.prepareRawMarkup, beforeEditorModeChange: (_o = experimental.beforeEditorModeChange) !== null && _o !== void 0 ? _o : props.experimental_beforeEditorModeChange }), markupConfig: Object.assign(Object.assign({}, markupConfig), { splitMode: (_p = markupConfig.splitMode) !== null && _p !== void 0 ? _p : props.splitMode, renderPreview: (_q = markupConfig.renderPreview) !== null && _q !== void 0 ? _q : props.renderPreview, extensions: (_r = markupConfig.extensions) !== null && _r !== void 0 ? _r : props.extraMarkupExtensions }), wysiwygConfig: Object.assign(Object.assign({}, wysiwygConfig), { extensions, escapeConfig: (_s = wysiwygConfig.escapeConfig) !== null && _s !== void 0 ? _s : props.escapeConfig }) }));
     }, deps);
     useLayoutEffect(() => {
         function onToolbarAction({ editorMode, id }) {

package/build/esm/bundle/wysiwyg-preset.d.ts

@@ -15,5 +15,6 @@ export declare type BundlePresetOptions = ExtensionsOptions & EditorModeKeymapOp
      * @default false
      */
     needToSetDimensionsForUploadedImages?: boolean;
+    enableNewImageSizeCalculation?: boolean;
 };
 export declare const BundlePreset: ExtensionAuto<BundlePresetOptions>;

package/build/esm/bundle/wysiwyg-preset.js

@@ -12,7 +12,7 @@ import { wCommandMenuConfigByPreset, wSelectionMenuConfigByPreset } from './conf
 import { emojiDefs } from './emoji';
 const DEFAULT_IGNORED_KEYS = ['Tab', 'Shift-Tab'];
 export const BundlePreset = (builder, opts) => {
-    var _a, _b;
+    var _a, _b, _c;
     const dropCursor = {
         color: 'var(--g-color-line-brand)',
         width: 2,
@@ -21,9 +21,11 @@ export const BundlePreset = (builder, opts) => {
                 const isDocEmpty = !node.text && (parent === null || parent === void 0 ? void 0 : parent.type.name) === BaseNode.Doc && parent.childCount === 1;
                 return isDocEmpty ? i18nPlaceholder('doc_empty') : null;
             } }, opts.baseSchema) });
-    const commonMarkOptions = Object.assign(Object.assign({}, zeroOptions), { selectionContext: Object.assign({ config: wSelectionMenuConfigByPreset.commonmark }, opts.selectionContext), commandMenu: Object.assign({ actions: wCommandMenuConfigByPreset.commonmark }, opts.commandMenu), breaks: Object.assign({ preferredBreak: (opts.mdBreaks ? 'soft' : 'hard') }, opts.breaks), bold: Object.assign({ boldKey: f.toPM(A.Bold) }, opts.bold), italic: Object.assign({ italicKey: f.toPM(A.Italic) }, opts.italic), code: Object.assign({ codeKey: f.toPM(A.Code) }, opts.code), codeBlock: Object.assign({ codeBlockKey: f.toPM(A.CodeBlock) }, opts.codeBlock), blockquote: Object.assign({ qouteKey: f.toPM(A.Quote) }, opts.blockquote), link: Object.assign({ linkKey: f.toPM(A.Link) }, opts.link), lists: Object.assign({ ulKey: f.toPM(A.BulletList), olKey: f.toPM(A.OrderedList), ulInputRules: { plus: false } }, opts.lists) });
+    const commonMarkOptions = Object.assign(Object.assign({}, zeroOptions), { selectionContext: Object.assign({ config: wSelectionMenuConfigByPreset.commonmark }, opts.selectionContext), commandMenu: Object.assign({ actions: wCommandMenuConfigByPreset.commonmark }, opts.commandMenu), breaks: Object.assign({ preferredBreak: (opts.mdBreaks ? 'soft' : 'hard') }, opts.breaks), bold: Object.assign({ boldKey: f.toPM(A.Bold) }, opts.bold), italic: Object.assign({ italicKey: f.toPM(A.Italic) }, opts.italic), code: Object.assign({ codeKey: f.toPM(A.Code) }, opts.code), codeBlock: Object.assign({ codeBlockKey: f.toPM(A.CodeBlock) }, opts.codeBlock), blockquote: Object.assign({ qouteKey: f.toPM(A.Quote) }, opts.blockquote), link: Object.assign({ linkKey: f.toPM(A.Link) }, opts.link), lists: Object.assign({ ulKey: f.toPM(A.BulletList), olKey: f.toPM(A.OrderedList), ulInputRules: { plus: false } }, opts.lists), image: {
+            parseInsertedUrlAsImage: (_a = opts.imgSize) === null || _a === void 0 ? void 0 : _a.parseInsertedUrlAsImage,
+        } });
     const defaultOptions = Object.assign(Object.assign({}, commonMarkOptions), { selectionContext: Object.assign({ config: wSelectionMenuConfigByPreset.default }, opts.selectionContext), commandMenu: Object.assign({ actions: wCommandMenuConfigByPreset.default }, opts.commandMenu), strike: Object.assign({ strikeKey: f.toPM(A.Strike) }, opts.strike) });
-    const yfmOptions = Object.assign(Object.assign({}, defaultOptions), { selectionContext: Object.assign({ config: wSelectionMenuConfigByPreset.yfm }, opts.selectionContext), commandMenu: Object.assign({ actions: wCommandMenuConfigByPreset.yfm }, opts.commandMenu), underline: Object.assign({ underlineKey: f.toPM(A.Underline) }, opts.underline), imgSize: Object.assign({ imageUploadHandler: opts.fileUploadHandler, needToSetDimensionsForUploadedImages: opts.needToSetDimensionsForUploadedImages }, opts.imgSize), checkbox: Object.assign({ checkboxLabelPlaceholder: () => i18nPlaceholder('checkbox') }, opts.checkbox), deflist: {
+    const yfmOptions = Object.assign(Object.assign({}, defaultOptions), { selectionContext: Object.assign({ config: wSelectionMenuConfigByPreset.yfm }, opts.selectionContext), commandMenu: Object.assign({ actions: wCommandMenuConfigByPreset.yfm }, opts.commandMenu), underline: Object.assign({ underlineKey: f.toPM(A.Underline) }, opts.underline), imgSize: Object.assign({ imageUploadHandler: opts.fileUploadHandler, needToSetDimensionsForUploadedImages: opts.needToSetDimensionsForUploadedImages, enableNewImageSizeCalculation: opts.enableNewImageSizeCalculation }, opts.imgSize), checkbox: Object.assign({ checkboxLabelPlaceholder: () => i18nPlaceholder('checkbox') }, opts.checkbox), deflist: {
             deflistTermPlaceholder: () => i18nPlaceholder('deflist_term'),
             deflistDescPlaceholder: () => i18nPlaceholder('deflist_desc'),
         }, yfmCut: Object.assign({ yfmCutKey: f.toPM(A.Cut), yfmCutTitlePlaceholder: () => i18nPlaceholder('cut_title'), yfmCutContentPlaceholder: () => i18nPlaceholder('cut_content') }, opts.yfmCut), yfmNote: Object.assign({ yfmNoteKey: f.toPM(A.Note), yfmNoteTitlePlaceholder: () => i18nPlaceholder('note_title') }, opts.yfmNote), yfmTable: Object.assign({ yfmTableCellPlaceholder: () => i18nPlaceholder('table_cell') }, opts.yfmTable), yfmFile: Object.assign({ fileUploadHandler: opts.fileUploadHandler, needToSetDimensionsForUploadedImages: opts.needToSetDimensionsForUploadedImages }, opts.yfmFile), yfmHeading: Object.assign({ h1Key: f.toPM(A.Heading1), h2Key: f.toPM(A.Heading2), h3Key: f.toPM(A.Heading3), h4Key: f.toPM(A.Heading4), h5Key: f.toPM(A.Heading5), h6Key: f.toPM(A.Heading6), headingPlaceholder: (node) => `${i18nPlaceholder('heading')} ${node.attrs[YfmHeadingAttr.Level]}` }, opts.yfmHeading), placeholder: {
@@ -63,7 +65,7 @@ export const BundlePreset = (builder, opts) => {
             break;
         }
     }
-    const ignoreKeysList = (_b = (_a = opts.ignoreKeysList) === null || _a === void 0 ? void 0 : _a.slice()) !== null && _b !== void 0 ? _b : [];
+    const ignoreKeysList = (_c = (_b = opts.ignoreKeysList) === null || _b === void 0 ? void 0 : _b.slice()) !== null && _c !== void 0 ? _c : [];
     ignoreKeysList.push(...DEFAULT_IGNORED_KEYS);
     for (const action of ignoreActions) {
         const key = f.toPM(action);

package/build/esm/core/markdown/MarkdownSerializer.js

@@ -309,7 +309,7 @@ export class MarkdownSerializerState {
     // have special meaning only at the start of the line.
     esc(str, startOfLine) {
         var _a, _b;
-        const escRegexp = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.commonEscape) || /[`\^+*\\\|~\[\]\{\}<>\$]/g;
+        const escRegexp = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.commonEscape) || /[`\^+*\\\|~\[\]\{\}<>\$_]/g;
         const startOfLineEscRegexp = ((_b = this.options) === null || _b === void 0 ? void 0 : _b.startOfLineEscape) || /^[:#\-*+>]/;
         str = str.replace(escRegexp, '\\$&');
         if (startOfLine)

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/MermaidView.js

@@ -50,9 +50,9 @@ const DiagramEditMode = ({ initialText, onSave, onCancel, mermaidInstance }) =>
             React.createElement("div", { className: b('Controls') },
                 React.createElement("div", null,
                     React.createElement(Button, { onClick: onCancel, view: 'flat' },
-                        React.createElement("span", { className: cnDiagramHelper({ 'prosemirror-stop-event': true }) }, "Cancel")),
+                        React.createElement("span", { className: cnDiagramHelper({ 'prosemirror-stop-event': true }) }, i18n('cancel'))),
                     React.createElement(Button, { onClick: () => onSave(text), view: 'action' },
-                        React.createElement("span", { className: cnDiagramHelper({ 'prosemirror-stop-event': true }) }, "Save")))))));
+                        React.createElement("span", { className: cnDiagramHelper({ 'prosemirror-stop-event': true }) }, i18n('save'))))))));
 };
 export const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }) => {
     const [mermaidInstance, setMermaidInstance] = useState(null);

package/build/esm/extensions/markdown/CodeBlock/CodeBlockHighlight/CodeBlockHighlight.js

@@ -122,10 +122,7 @@ export const CodeBlockHighlight = (builder, opts) => {
             let from = pos + 1;
             let nodes;
             const lang = node.attrs[codeBlockLangAttr];
-            if (!lang) {
-                nodes = lowlight.highlightAuto(node.textContent).children;
-            }
-            else if (lowlight.registered(lang)) {
+            if (lang && lowlight.registered(lang)) {
                 nodes = lowlight.highlight(lang, node.textContent).children;
             }
             else {

package/build/esm/extensions/markdown/Image/ImageSpecs/index.js

@@ -52,12 +52,19 @@ export const ImageSpecs = (builder) => {
             },
         },
         toMd: (state, { attrs }) => {
-            state.write('![' +
-                state.esc(attrs.alt || '') +
-                '](' +
-                state.esc(attrs.src) +
-                (attrs.title ? ' ' + state.quote(attrs.title) : '') +
-                ')');
+            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 += ')';
+            state.write(result);
         },
     }));
 };

package/build/esm/extensions/markdown/Image/imageUrlPaste/index.d.ts

@@ -0,0 +1,9 @@
+import type { ParseInsertedUrlAsImage } from '../../../../bundle';
+import { ExtensionAuto } from '../../../../core';
+export declare type ImageUrlPasteOptions = {
+    /**
+     * The function, used to determine if the pasted text is the image url and should be inserted as an image
+     */
+    parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
+};
+export declare const imageUrlPaste: ExtensionAuto<ImageUrlPasteOptions>;

package/build/esm/extensions/markdown/Image/imageUrlPaste/index.js

@@ -0,0 +1,30 @@
+import { Plugin } from 'prosemirror-state';
+import { DataTransferType } from '../../../behavior/Clipboard/utils';
+import { imageType } from '../ImageSpecs';
+export const imageUrlPaste = (builder, opts) => {
+    builder.addPlugin(() => new Plugin({
+        props: {
+            handleDOMEvents: {
+                paste(view, e) {
+                    var _a;
+                    if (!opts.parseInsertedUrlAsImage ||
+                        !e.clipboardData ||
+                        view.state.selection.$from.parent.type.spec.code)
+                        return false;
+                    const { imageUrl, title } = opts.parseInsertedUrlAsImage((_a = e.clipboardData.getData(DataTransferType.Text)) !== null && _a !== void 0 ? _a : '') || {};
+                    if (!imageUrl) {
+                        return false;
+                    }
+                    e.preventDefault();
+                    const imageNode = imageType(view.state.schema).create({
+                        src: imageUrl,
+                        alt: title,
+                    });
+                    const tr = view.state.tr.replaceSelectionWith(imageNode);
+                    view.dispatch(tr.scrollIntoView());
+                    return true;
+                },
+            },
+        },
+    }), builder.Priority.High);
+};

package/build/esm/extensions/markdown/Image/index.d.ts

@@ -1,11 +1,13 @@
 import type { Action, ExtensionAuto } from '../../../core';
 import { AddImageAttrs } from './actions';
 import { addImageAction } from './const';
+import { ImageUrlPasteOptions } from './imageUrlPaste';
 export { imageNodeName, imageType, ImageAttr } from './ImageSpecs';
 /** @deprecated Use `imageType` instead */
 export declare const imgType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
 export type { AddImageAttrs } from './actions';
-export declare const Image: ExtensionAuto;
+export declare type ImageOptions = ImageUrlPasteOptions;
+export declare const Image: ExtensionAuto<ImageOptions | undefined>;
 declare global {
     namespace WysiwygEditor {
         interface Actions {

package/build/esm/extensions/markdown/Image/index.js

@@ -1,10 +1,17 @@
+import { isFunction } from '../../../lodash';
 import { ImageSpecs, imageType } from './ImageSpecs';
 import { addImage } from './actions';
 import { addImageAction } from './const';
+import { imageUrlPaste } from './imageUrlPaste';
 export { imageNodeName, imageType, ImageAttr } from './ImageSpecs';
 /** @deprecated Use `imageType` instead */
 export const imgType = imageType;
-export const Image = (builder) => {
+export const Image = (builder, opts) => {
     builder.use(ImageSpecs);
     builder.addAction(addImageAction, ({ schema }) => addImage(schema));
+    if (isFunction(opts === null || opts === void 0 ? void 0 : opts.parseInsertedUrlAsImage)) {
+        builder.use(imageUrlPaste, {
+            parseInsertedUrlAsImage: opts.parseInsertedUrlAsImage,
+        });
+    }
 };

package/build/esm/extensions/markdown/Lists/inputrules.d.ts

@@ -6,7 +6,7 @@ export declare type ListsInputRulesOptions = {
 export declare const ListsInputRulesExtension: ExtensionWithOptions<ListsInputRulesOptions>;
 /**
  * Given a list node type, returns an input rule that turns a number
- * followed by a dot at the start of a textblock into an ordered list.
+ * followed by a dot or parenthesis at the start of a textblock into an ordered list.
  */
 export declare function orderedListRule(nodeType: NodeType): import("prosemirror-inputrules").InputRule;
 declare type BulletListInputRuleConfig = {

package/build/esm/extensions/markdown/Lists/inputrules.js

@@ -14,10 +14,13 @@ export const ListsInputRulesExtension = (builder, options) => {
 };
 /**
  * Given a list node type, returns an input rule that turns a number
- * followed by a dot at the start of a textblock into an ordered list.
+ * followed by a dot or parenthesis at the start of a textblock into an ordered list.
  */
 export function orderedListRule(nodeType) {
-    return wrappingInputRule(/^(\d+)\.\s$/, nodeType, (match) => ({ [ListsAttr.Order]: Number(match[1]) }), (match, node) => node.childCount + node.attrs[ListsAttr.Order] === Number(match[1]));
+    return wrappingInputRule(/^(\d+)([.)])\s$/, nodeType, (match) => ({
+        [ListsAttr.Order]: Number(match[1]),
+        [ListsAttr.Markup]: match[2],
+    }), (match, node) => node.childCount + node.attrs[ListsAttr.Order] === Number(match[1]));
 }
 /**
  * Given a list node type, returns an input rule that turns a bullet

package/build/esm/extensions/yfm/Emoji/EmojiSuggest/EmojiSuggestComponent.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { List, Popup } from '@gravity-ui/uikit';
 import { cn } from '../../../../classname';
-import { i18n } from '../../../../i18n/suggest';
 import { ErrorLoggerBoundary } from '../../../../react-utils/ErrorBoundary';
 import './EmojiSuggestComponent.css';
 const b = cn('emoji-suggest');
@@ -17,9 +16,9 @@ function calcListHeight(itemsCount) {
 export const EmojiSuggestComponent = ({ anchor, currentIndex, items, onClick, onEnterKeyDown, onEscapeKeyDown, onOutsideClick, }) => {
     if (!anchor)
         return null;
-    return (React.createElement(Popup, { open: true, anchorRef: { current: anchor }, placement: placement, onEnterKeyDown: onEnterKeyDown, onEscapeKeyDown: onEscapeKeyDown, onOutsideClick: onOutsideClick },
+    return (React.createElement(Popup, { open: Boolean(items.length), anchorRef: { current: anchor }, placement: placement, onEnterKeyDown: onEnterKeyDown, onEscapeKeyDown: onEscapeKeyDown, onOutsideClick: onOutsideClick },
         React.createElement("div", { className: b() },
-            React.createElement(List, { virtualized: true, items: items, sortable: false, filterable: false, emptyPlaceholder: i18n('empty-msg'), itemHeight: ITEM_HEIGHT, itemsHeight: calcListHeight(items.length), renderItem: renderItem, deactivateOnLeave: false, activeItemIndex: currentIndex, onItemClick: (_item, index) => onClick(index), className: b('list'), itemClassName: b('list-item') }))));
+            React.createElement(List, { virtualized: true, items: items, sortable: false, filterable: false, itemHeight: ITEM_HEIGHT, itemsHeight: calcListHeight(items.length), renderItem: renderItem, deactivateOnLeave: false, activeItemIndex: currentIndex, onItemClick: (_item, index) => onClick(index), className: b('list'), itemClassName: b('list-item') }))));
 };
 function renderItem({ origName, symbol, origShortcuts }) {
     return (React.createElement("div", { key: origName, className: b('item') },

package/build/esm/extensions/yfm/ImgSize/ImagePaste/index.d.ts

@@ -1,7 +1,12 @@
+import type { ParseInsertedUrlAsImage } from '../../../../bundle';
 import { ExtensionAuto } from '../../../../core';
-import { FileUploadHandler } from '../../../../utils/upload';
+import { FileUploadHandler } from '../../../../utils';
 import { CreateImageNodeOptions } from '../utils';
-export declare type ImagePasteOptions = Pick<CreateImageNodeOptions, 'needDimmensions'> & {
-    imageUploadHandler: FileUploadHandler;
+export declare type ImagePasteOptions = Pick<CreateImageNodeOptions, 'needDimensions' | 'enableNewImageSizeCalculation'> & {
+    imageUploadHandler?: FileUploadHandler;
+    /**
+     * The function, used to determine if the pasted text is the image url and should be inserted as an image
+     */
+    parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
 };
 export declare const ImagePaste: ExtensionAuto<ImagePasteOptions>;

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

@@ -4,27 +4,47 @@ import { Plugin } from 'prosemirror-state';
 import { dropPoint } from 'prosemirror-transform';
 import { isFunction } from '../../../../lodash';
 import { clipboardUtils } from '../../../behavior/Clipboard';
+import { DataTransferType } from '../../../behavior/Clipboard/utils';
 import { ImageAttr, ImgSizeAttr, imageType } from '../../../specs';
 import { isImageNode } from '../utils';
 import { ImagesUploadProcess } from './upload';
 const { isFilesFromHtml, isFilesOnly, isImageFile } = clipboardUtils;
 export const ImagePaste = (builder, opts) => {
-    if (!opts || !isFunction(opts.imageUploadHandler))
-        throw new Error('ImagePaste extension: imageUploadHandler is not a function');
+    const { parseInsertedUrlAsImage, imageUploadHandler } = opts !== null && opts !== void 0 ? opts : {};
+    if (!isFunction(imageUploadHandler !== null && imageUploadHandler !== void 0 ? imageUploadHandler : parseInsertedUrlAsImage))
+        throw new Error(`ImagePaste extension: ${opts.imageUploadHandler ? 'imageUploadHandler' : 'parseInsertedUrlAsImage'} is not a function`);
     builder.addPlugin(() => new Plugin({
         props: {
             handleDOMEvents: {
                 paste(view, e) {
+                    var _a, _b;
                     const files = getPastedImages(e.clipboardData);
-                    if (files) {
+                    if (imageUploadHandler && files) {
+                        e.preventDefault();
+                        new ImagesUploadProcess(view, files, imageUploadHandler, view.state.tr.selection.from, opts).run();
+                        return true;
+                    }
+                    else if (parseInsertedUrlAsImage) {
+                        const { imageUrl, title } = parseInsertedUrlAsImage((_b = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData(DataTransferType.Text)) !== null && _b !== void 0 ? _b : '') || {};
+                        if (!imageUrl) {
+                            return false;
+                        }
                         e.preventDefault();
-                        new ImagesUploadProcess(view, files, opts.imageUploadHandler, view.state.tr.selection.from, opts).run();
+                        const imageNode = imageType(view.state.schema).create({
+                            src: imageUrl,
+                            alt: title,
+                        });
+                        const tr = view.state.tr.replaceSelectionWith(imageNode);
+                        view.dispatch(tr.scrollIntoView());
                         return true;
                     }
                     return false;
                 },
                 drop(view, e) {
                     var _a, _b;
+                    if (!imageUploadHandler) {
+                        return false;
+                    }
                     // handle drop images from device
                     if (view.dragging)
                         return false;
@@ -36,19 +56,22 @@ export const ImagePaste = (builder, opts) => {
                         return false;
                     const posToInsert = dropPoint(view.state.doc, dropPos, createFakeImageSlice(view.state.schema));
                     if (posToInsert !== null) {
-                        new ImagesUploadProcess(view, files, opts.imageUploadHandler, posToInsert, opts).run();
+                        new ImagesUploadProcess(view, files, imageUploadHandler, posToInsert, opts).run();
                     }
                     e.preventDefault();
                     return true;
                 },
             },
             handlePaste(view, _event, slice) {
+                if (!imageUploadHandler) {
+                    return false;
+                }
                 const node = sliceSingleNode(slice);
                 if (node && isImageNode(node)) {
                     const imgUrl = node.attrs[ImgSizeAttr.Src];
                     const imgFile = dataUrlToFile(imgUrl, 'image');
                     if (imgFile) {
-                        new ImagesUploadProcess(view, [imgFile], opts.imageUploadHandler, view.state.tr.selection.from, opts).run();
+                        new ImagesUploadProcess(view, [imgFile], imageUploadHandler, view.state.tr.selection.from, opts).run();
                         return true;
                     }
                 }

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

@@ -1,12 +1,13 @@
 import { Node } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
-import { FileUploadHandler, UploadSuccessItem } from '../../../../utils/upload';
+import { FileUploadHandler, UploadSuccessItem } from '../../../../utils';
 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;
+    private readonly enableNewImageSizeCalculation?;
     constructor(view: EditorView, files: readonly File[], uploadHandler: FileUploadHandler, position: number, opts: CreateImageNodeOptions);
     protected createSkeleton(): Promise<ImageSkeletonDescriptor>;
     protected createPMNode(res: UploadSuccessItem): Promise<Node>;

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

@@ -1,4 +1,5 @@
 import { logger } from '../../../../logger';
+import { getProportionalSize } from '../../../../utils';
 import { FilesBatchUploadProcess } from '../../../behavior/utils/upload';
 import { imageType } from '../../../markdown';
 import { IMG_MAX_HEIGHT } from '../const';
@@ -9,19 +10,22 @@ export class ImagesUploadProcess extends FilesBatchUploadProcess {
         super(view, files, uploadHandler);
         this.initPosition = position;
         this.createImage = createImageNode(imageType(this.view.state.schema), opts);
+        this.enableNewImageSizeCalculation = opts.enableNewImageSizeCalculation;
     }
     async createSkeleton() {
-        return new ImageSkeletonDescriptor(this.initPosition, await getSkeletonSize(this.files));
+        return new ImageSkeletonDescriptor(this.initPosition, await getSkeletonSize(this.files, {
+            enableNewImageSizeCalculation: this.enableNewImageSizeCalculation,
+        }));
     }
     async createPMNode(res) {
         return this.createImage(res);
     }
 }
-async function getSkeletonSize(files) {
+async function getSkeletonSize(files, opts) {
     const skeletonSize = { width: '300', height: '200' };
     if (files.length === 1) {
         try {
-            const size = await loadImage(files[0]).then(calcSkeletonSize);
+            const size = await 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);
         }
@@ -31,10 +35,16 @@ async function getSkeletonSize(files) {
     }
     return skeletonSize;
 }
-function calcSkeletonSize(img) {
-    const { width, height } = img;
+function calcSkeletonSize({ width, height }) {
     if (height <= IMG_MAX_HEIGHT)
         return { width, height };
     const ratio = IMG_MAX_HEIGHT / height; // ratio<1
     return { height: IMG_MAX_HEIGHT, width: width * ratio };
 }
+function calcSkeletonSizeNew({ width, height }) {
+    return getProportionalSize({
+        width,
+        height,
+        imgMaxHeight: IMG_MAX_HEIGHT,
+    });
+}