@gravity-ui/markdown-editor 14.0.3 → 14.2.1

package/build/cjs/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/cjs/bundle/Editor.js

@@ -1,5 +1,5 @@
 "use strict";
-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;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorImpl = void 0;
 const tslib_1 = require("tslib");
@@ -8,11 +8,11 @@ const prosemirror_state_1 = require("prosemirror-state");
 const core_1 = require("../core");
 const bundle_1 = require("../i18n/bundle");
 const logger_1 = require("../logger");
-const codemirror_1 = require("../markup/codemirror");
+const markup_1 = require("../markup");
 const editor_1 = require("../markup/editor");
-const event_emitter_1 = require("../utils/event-emitter");
+const utils_1 = require("../utils");
 /** @internal */
-class EditorImpl extends event_emitter_1.SafeEventEmitter {
+class EditorImpl extends utils_1.SafeEventEmitter {
     constructor(opts) {
         var _a, _b, _c, _d, _e, _f;
         super({ onError: logger_1.logger.error.bind(logger_1.logger) });
@@ -31,7 +31,9 @@ class EditorImpl extends event_emitter_1.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();
@@ -48,7 +50,9 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_markupConfig, Object.assign({}, opts.markupConfig), "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_renderStorage, opts.renderStorage, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_fileUploadHandler, handlers.uploadFile, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_parseInsertedUrlAsImage, markupConfig.parseInsertedUrlAsImage, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_needToSetDimensionsForUploadedImages, Boolean(experimental.needToSetDimensionsForUploadedImages), "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_enableNewImageSizeCalculation, Boolean(experimental.enableNewImageSizeCalculation), "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_prepareRawMarkup, experimental.prepareRawMarkup, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_escapeConfig, wysiwygConfig.escapeConfig, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_beforeEditorModeChange, experimental.beforeEditorModeChange, "f");
@@ -150,7 +154,7 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
     get markupEditor() {
         var _a;
         if (!tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f")) {
-            tslib_1.__classPrivateFieldSet(this, _EditorImpl_markupEditor, new editor_1.Editor((0, codemirror_1.createCodemirror)({
+            tslib_1.__classPrivateFieldSet(this, _EditorImpl_markupEditor, new editor_1.Editor((0, markup_1.createCodemirror)({
                 doc: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markup, "f"),
                 placeholder: (_a = tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").placeholder) !== null && _a !== void 0 ? _a : (0, bundle_1.i18n)('markup_placeholder'),
                 onCancel: () => this.emit('cancel', null),
@@ -160,7 +164,9 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
                 onScroll: (event) => this.emit('cm-scroll', { event }),
                 reactRenderer: tslib_1.__classPrivateFieldGet(this, _EditorImpl_renderStorage, "f"),
                 uploadHandler: this.fileUploadHandler,
-                needImgDimms: this.needToSetDimensionsForUploadedImages,
+                parseInsertedUrlAsImage: this.parseInsertedUrlAsImage,
+                needImageDimensions: this.needToSetDimensionsForUploadedImages,
+                enableNewImageSizeCalculation: this.enableNewImageSizeCalculation,
                 extensions: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").extensions,
                 disabledExtensions: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").disabledExtensions,
                 keymaps: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").keymaps,
@@ -177,9 +183,15 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
     get fileUploadHandler() {
         return tslib_1.__classPrivateFieldGet(this, _EditorImpl_fileUploadHandler, "f");
     }
+    get parseInsertedUrlAsImage() {
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_parseInsertedUrlAsImage, "f");
+    }
     get needToSetDimensionsForUploadedImages() {
         return tslib_1.__classPrivateFieldGet(this, _EditorImpl_needToSetDimensionsForUploadedImages, "f");
     }
+    get enableNewImageSizeCalculation() {
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_enableNewImageSizeCalculation, "f");
+    }
     // ---> implements CodeEditor
     get cm() {
         return this.markupEditor.cm;
@@ -300,7 +312,7 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
     }
 }
 exports.EditorImpl = EditorImpl;
-_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/cjs/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/cjs/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/cjs/bundle/toolbar/markup/MToolbarImagePopup.js

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const is_number_1 = tslib_1.__importDefault(require("is-number"));
 const markup_1 = require("../../../markup");
-const commands_1 = require("../../../markup/commands");
 const ToolbarImagePopup_1 = require("../custom/ToolbarImagePopup");
 const context_1 = require("./context");
 const noop = (err) => {
@@ -14,7 +13,7 @@ const noop = (err) => {
 const MToolbarImagePopup = ({ focus, onClick, hide, anchorRef, editor, className, }) => {
     const { uploadHandler, needToSetDimensionsForUploadedImages } = (0, context_1.useMarkupToolbarContext)();
     return (react_1.default.createElement(ToolbarImagePopup_1.ToolbarImagePopup, { hide: hide, anchorRef: anchorRef, focus: focus, onClick: onClick, className: className, onSubmit: ({ url, name, alt, width, height }) => {
-            (0, commands_1.insertImages)([
+            (0, markup_1.insertImages)([
                 {
                     url,
                     alt,
@@ -25,17 +24,17 @@ const MToolbarImagePopup = ({ focus, onClick, hide, anchorRef, editor, className
             ])(editor.cm);
         }, uploadImages: uploadHandler, onSuccessUpload: async (res) => {
             const images = await toImageItems(res.success, Boolean(needToSetDimensionsForUploadedImages));
-            (0, commands_1.insertImages)(images)(editor.cm);
+            (0, markup_1.insertImages)(images)(editor.cm);
         } }));
 };
 exports.MToolbarImagePopup = MToolbarImagePopup;
-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 (0, markup_1.getImageDimensions)(file).then(({ height }) => {
                 imgItem.height = String(Math.min(height, markup_1.IMG_MAX_HEIGHT));
             }, noop);

package/build/cjs/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/cjs/bundle/useMarkdownEditor.js

@@ -16,6 +16,7 @@ function useMarkdownEditor(props, deps = []) {
         const renderStorage = new extensions_1.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;
@@ -25,7 +26,8 @@ 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) {
@@ -34,7 +36,8 @@ function useMarkdownEditor(props, deps = []) {
             }
         };
         return new Editor_1.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);
     (0, react_1.useLayoutEffect)(() => {
         function onToolbarAction({ editorMode, id }) {

package/build/cjs/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/cjs/bundle/wysiwyg-preset.js

@@ -15,7 +15,7 @@ const wysiwyg_1 = require("./config/wysiwyg");
 const emoji_1 = require("./emoji");
 const DEFAULT_IGNORED_KEYS = ['Tab', 'Shift-Tab'];
 const BundlePreset = (builder, opts) => {
-    var _a, _b;
+    var _a, _b, _c;
     const dropCursor = {
         color: 'var(--g-color-line-brand)',
         width: 2,
@@ -24,9 +24,11 @@ const BundlePreset = (builder, opts) => {
                 const isDocEmpty = !node.text && (parent === null || parent === void 0 ? void 0 : parent.type.name) === specs_1.BaseNode.Doc && parent.childCount === 1;
                 return isDocEmpty ? (0, placeholder_1.i18n)('doc_empty') : null;
             } }, opts.baseSchema) });
-    const commonMarkOptions = Object.assign(Object.assign({}, zeroOptions), { selectionContext: Object.assign({ config: wysiwyg_1.wSelectionMenuConfigByPreset.commonmark }, opts.selectionContext), commandMenu: Object.assign({ actions: wysiwyg_1.wCommandMenuConfigByPreset.commonmark }, opts.commandMenu), breaks: Object.assign({ preferredBreak: (opts.mdBreaks ? 'soft' : 'hard') }, opts.breaks), bold: Object.assign({ boldKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Bold) }, opts.bold), italic: Object.assign({ italicKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Italic) }, opts.italic), code: Object.assign({ codeKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Code) }, opts.code), codeBlock: Object.assign({ codeBlockKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.CodeBlock) }, opts.codeBlock), blockquote: Object.assign({ qouteKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Quote) }, opts.blockquote), link: Object.assign({ linkKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Link) }, opts.link), lists: Object.assign({ ulKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.BulletList), olKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.OrderedList), ulInputRules: { plus: false } }, opts.lists) });
+    const commonMarkOptions = Object.assign(Object.assign({}, zeroOptions), { selectionContext: Object.assign({ config: wysiwyg_1.wSelectionMenuConfigByPreset.commonmark }, opts.selectionContext), commandMenu: Object.assign({ actions: wysiwyg_1.wCommandMenuConfigByPreset.commonmark }, opts.commandMenu), breaks: Object.assign({ preferredBreak: (opts.mdBreaks ? 'soft' : 'hard') }, opts.breaks), bold: Object.assign({ boldKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Bold) }, opts.bold), italic: Object.assign({ italicKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Italic) }, opts.italic), code: Object.assign({ codeKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Code) }, opts.code), codeBlock: Object.assign({ codeBlockKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.CodeBlock) }, opts.codeBlock), blockquote: Object.assign({ qouteKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Quote) }, opts.blockquote), link: Object.assign({ linkKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Link) }, opts.link), lists: Object.assign({ ulKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.BulletList), olKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.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: wysiwyg_1.wSelectionMenuConfigByPreset.default }, opts.selectionContext), commandMenu: Object.assign({ actions: wysiwyg_1.wCommandMenuConfigByPreset.default }, opts.commandMenu), strike: Object.assign({ strikeKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Strike) }, opts.strike) });
-    const yfmOptions = Object.assign(Object.assign({}, defaultOptions), { selectionContext: Object.assign({ config: wysiwyg_1.wSelectionMenuConfigByPreset.yfm }, opts.selectionContext), commandMenu: Object.assign({ actions: wysiwyg_1.wCommandMenuConfigByPreset.yfm }, opts.commandMenu), underline: Object.assign({ underlineKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Underline) }, opts.underline), imgSize: Object.assign({ imageUploadHandler: opts.fileUploadHandler, needToSetDimensionsForUploadedImages: opts.needToSetDimensionsForUploadedImages }, opts.imgSize), checkbox: Object.assign({ checkboxLabelPlaceholder: () => (0, placeholder_1.i18n)('checkbox') }, opts.checkbox), deflist: {
+    const yfmOptions = Object.assign(Object.assign({}, defaultOptions), { selectionContext: Object.assign({ config: wysiwyg_1.wSelectionMenuConfigByPreset.yfm }, opts.selectionContext), commandMenu: Object.assign({ actions: wysiwyg_1.wCommandMenuConfigByPreset.yfm }, opts.commandMenu), underline: Object.assign({ underlineKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Underline) }, opts.underline), imgSize: Object.assign({ imageUploadHandler: opts.fileUploadHandler, needToSetDimensionsForUploadedImages: opts.needToSetDimensionsForUploadedImages, enableNewImageSizeCalculation: opts.enableNewImageSizeCalculation }, opts.imgSize), checkbox: Object.assign({ checkboxLabelPlaceholder: () => (0, placeholder_1.i18n)('checkbox') }, opts.checkbox), deflist: {
             deflistTermPlaceholder: () => (0, placeholder_1.i18n)('deflist_term'),
             deflistDescPlaceholder: () => (0, placeholder_1.i18n)('deflist_desc'),
         }, yfmCut: Object.assign({ yfmCutKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Cut), yfmCutTitlePlaceholder: () => (0, placeholder_1.i18n)('cut_title'), yfmCutContentPlaceholder: () => (0, placeholder_1.i18n)('cut_content') }, opts.yfmCut), yfmNote: Object.assign({ yfmNoteKey: shortcuts_1.formatter.toPM(shortcuts_1.Action.Note), yfmNoteTitlePlaceholder: () => (0, placeholder_1.i18n)('note_title') }, opts.yfmNote), yfmTable: Object.assign({ yfmTableCellPlaceholder: () => (0, placeholder_1.i18n)('table_cell') }, opts.yfmTable), yfmFile: Object.assign({ fileUploadHandler: opts.fileUploadHandler, needToSetDimensionsForUploadedImages: opts.needToSetDimensionsForUploadedImages }, opts.yfmFile), yfmHeading: Object.assign({ h1Key: shortcuts_1.formatter.toPM(shortcuts_1.Action.Heading1), h2Key: shortcuts_1.formatter.toPM(shortcuts_1.Action.Heading2), h3Key: shortcuts_1.formatter.toPM(shortcuts_1.Action.Heading3), h4Key: shortcuts_1.formatter.toPM(shortcuts_1.Action.Heading4), h5Key: shortcuts_1.formatter.toPM(shortcuts_1.Action.Heading5), h6Key: shortcuts_1.formatter.toPM(shortcuts_1.Action.Heading6), headingPlaceholder: (node) => `${(0, placeholder_1.i18n)('heading')} ${node.attrs[specs_1.YfmHeadingAttr.Level]}` }, opts.yfmHeading), placeholder: {
@@ -66,7 +68,7 @@ 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 = shortcuts_1.formatter.toPM(action);

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

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

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

@@ -125,10 +125,7 @@ const CodeBlockHighlight = (builder, opts) => {
             let from = pos + 1;
             let nodes;
             const lang = node.attrs[CodeBlockSpecs_1.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/cjs/extensions/markdown/Image/ImageSpecs/index.js

@@ -55,12 +55,19 @@ 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/cjs/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/cjs/extensions/markdown/Image/imageUrlPaste/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.imageUrlPaste = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const utils_1 = require("../../../behavior/Clipboard/utils");
+const ImageSpecs_1 = require("../ImageSpecs");
+const imageUrlPaste = (builder, opts) => {
+    builder.addPlugin(() => new prosemirror_state_1.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(utils_1.DataTransferType.Text)) !== null && _a !== void 0 ? _a : '') || {};
+                    if (!imageUrl) {
+                        return false;
+                    }
+                    e.preventDefault();
+                    const imageNode = (0, ImageSpecs_1.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);
+};
+exports.imageUrlPaste = imageUrlPaste;

package/build/cjs/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/cjs/extensions/markdown/Image/index.js

@@ -1,17 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Image = exports.imgType = exports.ImageAttr = exports.imageType = exports.imageNodeName = void 0;
+const lodash_1 = require("../../../lodash");
 const ImageSpecs_1 = require("./ImageSpecs");
 const actions_1 = require("./actions");
 const const_1 = require("./const");
+const imageUrlPaste_1 = require("./imageUrlPaste");
 var ImageSpecs_2 = require("./ImageSpecs");
 Object.defineProperty(exports, "imageNodeName", { enumerable: true, get: function () { return ImageSpecs_2.imageNodeName; } });
 Object.defineProperty(exports, "imageType", { enumerable: true, get: function () { return ImageSpecs_2.imageType; } });
 Object.defineProperty(exports, "ImageAttr", { enumerable: true, get: function () { return ImageSpecs_2.ImageAttr; } });
 /** @deprecated Use `imageType` instead */
 exports.imgType = ImageSpecs_1.imageType;
-const Image = (builder) => {
+const Image = (builder, opts) => {
     builder.use(ImageSpecs_1.ImageSpecs);
     builder.addAction(const_1.addImageAction, ({ schema }) => (0, actions_1.addImage)(schema));
+    if ((0, lodash_1.isFunction)(opts === null || opts === void 0 ? void 0 : opts.parseInsertedUrlAsImage)) {
+        builder.use(imageUrlPaste_1.imageUrlPaste, {
+            parseInsertedUrlAsImage: opts.parseInsertedUrlAsImage,
+        });
+    }
 };
 exports.Image = Image;

package/build/cjs/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/cjs/extensions/markdown/Lists/inputrules.js

@@ -18,10 +18,13 @@ const ListsInputRulesExtension = (builder, options) => {
 exports.ListsInputRulesExtension = ListsInputRulesExtension;
 /**
  * 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.
  */
 function orderedListRule(nodeType) {
-    return (0, inputrules_1.wrappingInputRule)(/^(\d+)\.\s$/, nodeType, (match) => ({ [ListsSpecs_1.ListsAttr.Order]: Number(match[1]) }), (match, node) => node.childCount + node.attrs[ListsSpecs_1.ListsAttr.Order] === Number(match[1]));
+    return (0, inputrules_1.wrappingInputRule)(/^(\d+)([.)])\s$/, nodeType, (match) => ({
+        [ListsSpecs_1.ListsAttr.Order]: Number(match[1]),
+        [ListsSpecs_1.ListsAttr.Markup]: match[2],
+    }), (match, node) => node.childCount + node.attrs[ListsSpecs_1.ListsAttr.Order] === Number(match[1]));
 }
 exports.orderedListRule = orderedListRule;
 /**

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

@@ -5,7 +5,6 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const classname_1 = require("../../../../classname");
-const suggest_1 = require("../../../../i18n/suggest");
 const ErrorBoundary_1 = require("../../../../react-utils/ErrorBoundary");
 const b = (0, classname_1.cn)('emoji-suggest');
 const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
@@ -20,9 +19,9 @@ function calcListHeight(itemsCount) {
 const EmojiSuggestComponent = ({ anchor, currentIndex, items, onClick, onEnterKeyDown, onEscapeKeyDown, onOutsideClick, }) => {
     if (!anchor)
         return null;
-    return (react_1.default.createElement(uikit_1.Popup, { open: true, anchorRef: { current: anchor }, placement: placement, onEnterKeyDown: onEnterKeyDown, onEscapeKeyDown: onEscapeKeyDown, onOutsideClick: onOutsideClick },
+    return (react_1.default.createElement(uikit_1.Popup, { open: Boolean(items.length), anchorRef: { current: anchor }, placement: placement, onEnterKeyDown: onEnterKeyDown, onEscapeKeyDown: onEscapeKeyDown, onOutsideClick: onOutsideClick },
         react_1.default.createElement("div", { className: b() },
-            react_1.default.createElement(uikit_1.List, { virtualized: true, items: items, sortable: false, filterable: false, emptyPlaceholder: (0, suggest_1.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_1.default.createElement(uikit_1.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') }))));
 };
 exports.EmojiSuggestComponent = EmojiSuggestComponent;
 function renderItem({ origName, symbol, origShortcuts }) {

package/build/cjs/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/cjs/extensions/yfm/ImgSize/ImagePaste/index.js

@@ -7,27 +7,47 @@ const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_transform_1 = require("prosemirror-transform");
 const lodash_1 = require("../../../../lodash");
 const Clipboard_1 = require("../../../behavior/Clipboard");
+const utils_1 = require("../../../behavior/Clipboard/utils");
 const specs_1 = require("../../../specs");
-const utils_1 = require("../utils");
+const utils_2 = require("../utils");
 const upload_1 = require("./upload");
 const { isFilesFromHtml, isFilesOnly, isImageFile } = Clipboard_1.clipboardUtils;
 const ImagePaste = (builder, opts) => {
-    if (!opts || !(0, lodash_1.isFunction)(opts.imageUploadHandler))
-        throw new Error('ImagePaste extension: imageUploadHandler is not a function');
+    const { parseInsertedUrlAsImage, imageUploadHandler } = opts !== null && opts !== void 0 ? opts : {};
+    if (!(0, lodash_1.isFunction)(imageUploadHandler !== null && imageUploadHandler !== void 0 ? imageUploadHandler : parseInsertedUrlAsImage))
+        throw new Error(`ImagePaste extension: ${opts.imageUploadHandler ? 'imageUploadHandler' : 'parseInsertedUrlAsImage'} is not a function`);
     builder.addPlugin(() => new prosemirror_state_1.Plugin({
         props: {
             handleDOMEvents: {
                 paste(view, e) {
+                    var _a, _b;
                     const files = getPastedImages(e.clipboardData);
-                    if (files) {
+                    if (imageUploadHandler && files) {
+                        e.preventDefault();
+                        new upload_1.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(utils_1.DataTransferType.Text)) !== null && _b !== void 0 ? _b : '') || {};
+                        if (!imageUrl) {
+                            return false;
+                        }
                         e.preventDefault();
-                        new upload_1.ImagesUploadProcess(view, files, opts.imageUploadHandler, view.state.tr.selection.from, opts).run();
+                        const imageNode = (0, specs_1.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;
@@ -39,19 +59,22 @@ const ImagePaste = (builder, opts) => {
                         return false;
                     const posToInsert = (0, prosemirror_transform_1.dropPoint)(view.state.doc, dropPos, createFakeImageSlice(view.state.schema));
                     if (posToInsert !== null) {
-                        new upload_1.ImagesUploadProcess(view, files, opts.imageUploadHandler, posToInsert, opts).run();
+                        new upload_1.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 && (0, utils_1.isImageNode)(node)) {
+                if (node && (0, utils_2.isImageNode)(node)) {
                     const imgUrl = node.attrs[specs_1.ImgSizeAttr.Src];
                     const imgFile = dataUrlToFile(imgUrl, 'image');
                     if (imgFile) {
-                        new upload_1.ImagesUploadProcess(view, [imgFile], opts.imageUploadHandler, view.state.tr.selection.from, opts).run();
+                        new upload_1.ImagesUploadProcess(view, [imgFile], imageUploadHandler, view.state.tr.selection.from, opts).run();
                         return true;
                     }
                 }

package/build/cjs/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>;