@gravity-ui/markdown-editor 14.12.1 → 14.12.2

package/README.md

@@ -30,6 +30,7 @@ To set up styling and theme see [UIKit docs](https://github.com/gravity-ui/uikit
 ```tsx
 import React from 'react';
 import {useMarkdownEditor, MarkdownEditorView} from '@gravity-ui/markdown-editor';
+import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';
 
 function Editor({onSubmit}) {
   const editor = useMarkdownEditor({allowHTML: false});
@@ -47,7 +48,7 @@ function Editor({onSubmit}) {
     };
   }, [onSubmit]);
 
-  return <MarkdownEditorView stickyToolbar autofocus editor={editor} />;
+  return <MarkdownEditorView stickyToolbar autofocus toaster={toaster} editor={editor} />;
 }
 ```
 Read more:

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

@@ -1,10 +1,10 @@
-import type { CommonEditor } from "../common/index.js";
-import type { TransformFn } from "../core/markdown/ProseMirrorTransformer/index.js";
-import { ReactRenderStorage } from "../extensions/index.js";
-import { type Receiver } from "../utils/index.js";
-import type { DirectiveSyntaxContext } from "../utils/directive.js";
-import type { MarkdownEditorMode as EditorMode, MarkdownEditorPreset as EditorPreset, MarkdownEditorOptions } from "./types.js";
-export type ToolbarActionData = {
+import type { CommonEditor } from '../common';
+import type { TransformFn } from '../core/markdown/ProseMirrorTransformer';
+import { ReactRenderStorage } from '../extensions';
+import { type Receiver } from '../utils';
+import type { DirectiveSyntaxContext } from '../utils/directive';
+import type { MarkdownEditorMode as EditorMode, MarkdownEditorPreset as EditorPreset, MarkdownEditorOptions } from './types';
+export declare type ToolbarActionData = {
     editorMode: EditorMode;
     id: string;
     attrs?: {
@@ -34,13 +34,13 @@ export interface Editor extends Receiver<EventMap>, CommonEditor {
         line: number;
     }): void;
 }
-type SetEditorModeOptions = Pick<ChangeEditorModeOptions, 'emit'>;
-export type ChangeEditorModeOptions = {
+declare type SetEditorModeOptions = Pick<ChangeEditorModeOptions, 'emit'>;
+export declare type ChangeEditorModeOptions = {
     mode: EditorMode;
     reason: 'error-boundary' | 'settings' | 'manually';
     emit?: boolean;
 };
-export type EditorOptions = Pick<MarkdownEditorOptions, 'md' | 'initial' | 'handlers' | 'experimental' | 'markupConfig' | 'wysiwygConfig'> & {
+export declare type EditorOptions = Pick<MarkdownEditorOptions, 'md' | 'initial' | 'handlers' | 'experimental' | 'markupConfig' | 'wysiwygConfig'> & {
     renderStorage: ReactRenderStorage;
     preset: EditorPreset;
     directiveSyntax: DirectiveSyntaxContext;

package/build/cjs/bundle/Editor.js

@@ -1,80 +1,114 @@
 "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_pmTransformers, _EditorImpl_preserveEmptyRows, _EditorImpl_modifiers, _EditorImpl_preset, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_parseInsertedUrlAsImage, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_enableNewImageSizeCalculation, _EditorImpl_directiveSyntax, _EditorImpl_prepareRawMarkup, _EditorImpl_beforeEditorModeChange;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorImpl = void 0;
+const tslib_1 = require("tslib");
 const view_1 = require("@codemirror/view");
 const prosemirror_state_1 = require("prosemirror-state");
-const core_1 = require("../core/index.js");
-const bundle_1 = require("../i18n/bundle/index.js");
-const logger_1 = require("../logger.js");
-const markup_1 = require("../markup/index.js");
-const autocomplete_1 = require("../markup/codemirror/autocomplete/index.js");
-const editor_1 = require("../markup/editor.js");
-const utils_1 = require("../utils/index.js");
-const MarkupManager_1 = require("./MarkupManager.js");
-const dynamicModifiers_1 = require("./config/dynamicModifiers.js");
+const core_1 = require("../core");
+const bundle_1 = require("../i18n/bundle");
+const logger_1 = require("../logger");
+const markup_1 = require("../markup");
+const autocomplete_1 = require("../markup/codemirror/autocomplete");
+const editor_1 = require("../markup/editor");
+const utils_1 = require("../utils");
+const MarkupManager_1 = require("./MarkupManager");
+const dynamicModifiers_1 = require("./config/dynamicModifiers");
 /** @internal */
 class EditorImpl extends utils_1.SafeEventEmitter {
-    #markup;
-    #editorMode;
-    #toolbarVisible;
-    #splitModeEnabled;
-    #splitMode;
-    #renderPreview;
-    #wysiwygEditor;
-    #markupEditor;
-    #markupConfig;
-    #escapeConfig;
-    #mdOptions;
-    #pmTransformers = [];
-    #preserveEmptyRows;
-    #modifiers;
-    #preset;
-    #extensions;
-    #renderStorage;
-    #fileUploadHandler;
-    #parseInsertedUrlAsImage;
-    #needToSetDimensionsForUploadedImages;
-    #enableNewImageSizeCalculation;
-    #directiveSyntax;
-    #prepareRawMarkup;
-    #beforeEditorModeChange;
+    constructor(opts) {
+        var _a, _b, _c, _d, _e, _f;
+        super({ onError: logger_1.logger.error.bind(logger_1.logger) });
+        _EditorImpl_markup.set(this, void 0);
+        _EditorImpl_editorMode.set(this, void 0);
+        _EditorImpl_toolbarVisible.set(this, void 0);
+        _EditorImpl_splitModeEnabled.set(this, void 0);
+        _EditorImpl_splitMode.set(this, void 0);
+        _EditorImpl_renderPreview.set(this, void 0);
+        _EditorImpl_wysiwygEditor.set(this, void 0);
+        _EditorImpl_markupEditor.set(this, void 0);
+        _EditorImpl_markupConfig.set(this, void 0);
+        _EditorImpl_escapeConfig.set(this, void 0);
+        _EditorImpl_mdOptions.set(this, void 0);
+        _EditorImpl_pmTransformers.set(this, []);
+        _EditorImpl_preserveEmptyRows.set(this, void 0);
+        _EditorImpl_modifiers.set(this, void 0);
+        _EditorImpl_preset.set(this, void 0);
+        _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_directiveSyntax.set(this, void 0);
+        _EditorImpl_prepareRawMarkup.set(this, void 0);
+        _EditorImpl_beforeEditorModeChange.set(this, void 0);
+        this.getValue = () => this.currentEditor.getValue();
+        const { md = {}, initial = {}, handlers = {}, experimental = {}, markupConfig = {}, wysiwygConfig = {}, } = opts;
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_modifiers, experimental.preserveMarkupFormatting
+            ? (0, dynamicModifiers_1.createDynamicModifiers)(new MarkupManager_1.MarkupManager())
+            : undefined, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_editorMode, (_a = initial.mode) !== null && _a !== void 0 ? _a : 'wysiwyg', "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_toolbarVisible, (_b = initial.toolbarVisible) !== null && _b !== void 0 ? _b : true, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_splitMode, (_c = (markupConfig.renderPreview && markupConfig.splitMode)) !== null && _c !== void 0 ? _c : false, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_splitModeEnabled, (_d = (tslib_1.__classPrivateFieldGet(this, _EditorImpl_splitMode, "f") && initial.splitModeEnabled)) !== null && _d !== void 0 ? _d : false, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_renderPreview, markupConfig.renderPreview, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_markup, (_e = initial.markup) !== null && _e !== void 0 ? _e : '', "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_preset, (_f = opts.preset) !== null && _f !== void 0 ? _f : 'full', "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_pmTransformers, opts.pmTransformers, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_mdOptions, md, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_extensions, wysiwygConfig.extensions, "f");
+        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_directiveSyntax, opts.directiveSyntax, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_enableNewImageSizeCalculation, Boolean(experimental.enableNewImageSizeCalculation), "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_preserveEmptyRows, experimental.preserveEmptyRows || false, "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");
+    }
     get _wysiwygView() {
+        var _a;
         // @ts-expect-error internal typing
-        return this.#wysiwygEditor?.view;
+        return (_a = tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) === null || _a === void 0 ? void 0 : _a.view;
     }
     get currentMode() {
-        return this.#editorMode;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_editorMode, "f");
     }
     set currentMode(newMode) {
+        var _a, _b, _c;
         switch (newMode) {
             case 'markup': {
-                this.#editorMode = newMode;
-                if (this.#wysiwygEditor) {
-                    const markupEditorValue = this.#markupEditor?.getValue();
-                    const wysiwygEditorValue = this.#wysiwygEditor.getValue();
+                tslib_1.__classPrivateFieldSet(this, _EditorImpl_editorMode, newMode, "f");
+                if (tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) {
+                    const markupEditorValue = (_a = tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f")) === null || _a === void 0 ? void 0 : _a.getValue();
+                    const wysiwygEditorValue = tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f").getValue();
                     if (!markupEditorValue ||
                         this.shouldReplaceMarkupEditorValue(markupEditorValue, wysiwygEditorValue)) {
-                        this.#markup = wysiwygEditorValue;
+                        tslib_1.__classPrivateFieldSet(this, _EditorImpl_markup, wysiwygEditorValue, "f");
                     }
                     else {
-                        this.#markup = markupEditorValue;
+                        tslib_1.__classPrivateFieldSet(this, _EditorImpl_markup, markupEditorValue, "f");
                     }
                 }
-                if (this.#markupEditor)
-                    this.#markupEditor.replace(this.#markup);
+                if (tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f"))
+                    tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f").replace(tslib_1.__classPrivateFieldGet(this, _EditorImpl_markup, "f"));
                 break;
             }
             case 'wysiwyg': {
-                this.#editorMode = newMode;
-                if (this.#markupEditor) {
-                    const value = this.#markupEditor.getValue();
-                    this.#markup = this.#prepareRawMarkup?.(value) ?? value;
+                tslib_1.__classPrivateFieldSet(this, _EditorImpl_editorMode, newMode, "f");
+                if (tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f")) {
+                    const value = tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f").getValue();
+                    tslib_1.__classPrivateFieldSet(this, _EditorImpl_markup, (_c = (_b = tslib_1.__classPrivateFieldGet(this, _EditorImpl_prepareRawMarkup, "f")) === null || _b === void 0 ? void 0 : _b.call(this, value)) !== null && _c !== void 0 ? _c : value, "f");
                 }
-                else if (this.#prepareRawMarkup) {
-                    this.#markup = this.#prepareRawMarkup(this.#markup);
+                else if (tslib_1.__classPrivateFieldGet(this, _EditorImpl_prepareRawMarkup, "f")) {
+                    tslib_1.__classPrivateFieldSet(this, _EditorImpl_markup, tslib_1.__classPrivateFieldGet(this, _EditorImpl_prepareRawMarkup, "f").call(this, tslib_1.__classPrivateFieldGet(this, _EditorImpl_markup, "f")), "f");
                 }
-                if (this.#wysiwygEditor)
-                    this.#wysiwygEditor.replace(this.#markup);
+                if (tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f"))
+                    tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f").replace(tslib_1.__classPrivateFieldGet(this, _EditorImpl_markup, "f"));
                 break;
             }
             default:
@@ -85,25 +119,25 @@ class EditorImpl extends utils_1.SafeEventEmitter {
         }, 30);
     }
     get toolbarVisible() {
-        return this.#toolbarVisible;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_toolbarVisible, "f");
     }
     get splitModeEnabled() {
-        return this.#splitModeEnabled;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_splitModeEnabled, "f");
     }
     get splitMode() {
-        return this.#splitMode;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_splitMode, "f");
     }
     get preset() {
-        return this.#preset;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_preset, "f");
     }
     get mdOptions() {
-        return this.#mdOptions;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_mdOptions, "f");
     }
     get directiveSyntax() {
-        return this.#directiveSyntax;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_directiveSyntax, "f");
     }
     get renderPreview() {
-        return this.#renderPreview;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_renderPreview, "f");
     }
     get currentEditor() {
         const mode = this.currentMode;
@@ -117,98 +151,71 @@ class EditorImpl extends utils_1.SafeEventEmitter {
         }
     }
     get wysiwygEditor() {
-        if (!this.#wysiwygEditor) {
-            const mdPreset = this.#preset === 'zero' || this.#preset === 'commonmark' ? this.#preset : 'default';
-            this.#wysiwygEditor = new core_1.WysiwygEditor({
+        if (!tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) {
+            const mdPreset = tslib_1.__classPrivateFieldGet(this, _EditorImpl_preset, "f") === 'zero' || tslib_1.__classPrivateFieldGet(this, _EditorImpl_preset, "f") === 'commonmark' ? tslib_1.__classPrivateFieldGet(this, _EditorImpl_preset, "f") : 'default';
+            tslib_1.__classPrivateFieldSet(this, _EditorImpl_wysiwygEditor, new core_1.WysiwygEditor({
                 mdPreset,
-                initialContent: this.#markup,
-                extensions: this.#extensions,
-                pmTransformers: this.#pmTransformers,
-                modifiers: this.#modifiers,
-                allowHTML: this.#mdOptions.html,
-                linkify: this.#mdOptions.linkify,
-                linkifyTlds: this.#mdOptions.linkifyTlds,
-                escapeConfig: this.#escapeConfig,
+                initialContent: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markup, "f"),
+                extensions: tslib_1.__classPrivateFieldGet(this, _EditorImpl_extensions, "f"),
+                pmTransformers: tslib_1.__classPrivateFieldGet(this, _EditorImpl_pmTransformers, "f"),
+                modifiers: tslib_1.__classPrivateFieldGet(this, _EditorImpl_modifiers, "f"),
+                allowHTML: tslib_1.__classPrivateFieldGet(this, _EditorImpl_mdOptions, "f").html,
+                linkify: tslib_1.__classPrivateFieldGet(this, _EditorImpl_mdOptions, "f").linkify,
+                linkifyTlds: tslib_1.__classPrivateFieldGet(this, _EditorImpl_mdOptions, "f").linkifyTlds,
+                escapeConfig: tslib_1.__classPrivateFieldGet(this, _EditorImpl_escapeConfig, "f"),
                 onChange: () => this.emit('rerender-toolbar', null),
                 onDocChange: () => this.emit('change', null),
-            });
+            }), "f");
         }
-        return this.#wysiwygEditor;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f");
     }
     get markupEditor() {
-        if (!this.#markupEditor) {
-            this.#markupEditor = new editor_1.Editor((0, markup_1.createCodemirror)({
-                doc: this.#markup,
-                placeholder: this.#markupConfig.placeholder ?? (0, bundle_1.i18n)('markup_placeholder'),
+        var _a, _b;
+        if (!tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f")) {
+            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),
                 onSubmit: () => this.emit('submit', null),
                 onChange: () => this.emit('rerender-toolbar', null),
                 onDocChange: () => this.emit('change', null),
                 onScroll: (event) => this.emit('cm-scroll', { event }),
-                reactRenderer: this.#renderStorage,
+                reactRenderer: tslib_1.__classPrivateFieldGet(this, _EditorImpl_renderStorage, "f"),
                 uploadHandler: this.fileUploadHandler,
                 parseInsertedUrlAsImage: this.parseInsertedUrlAsImage,
                 needImageDimensions: this.needToSetDimensionsForUploadedImages,
-                parseHtmlOnPaste: this.#markupConfig.parseHtmlOnPaste,
+                parseHtmlOnPaste: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").parseHtmlOnPaste,
                 enableNewImageSizeCalculation: this.enableNewImageSizeCalculation,
-                extensions: this.#markupConfig.extensions,
-                disabledExtensions: this.#markupConfig.disabledExtensions,
-                keymaps: this.#markupConfig.keymaps,
-                preserveEmptyRows: this.#preserveEmptyRows,
+                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,
+                preserveEmptyRows: tslib_1.__classPrivateFieldGet(this, _EditorImpl_preserveEmptyRows, "f"),
                 yfmLangOptions: {
                     languageData: (0, autocomplete_1.getAutocompleteConfig)({
-                        preserveEmptyRows: this.#preserveEmptyRows,
-                    }).concat(this.#markupConfig?.languageData || []),
+                        preserveEmptyRows: tslib_1.__classPrivateFieldGet(this, _EditorImpl_preserveEmptyRows, "f"),
+                    }).concat(((_b = tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f")) === null || _b === void 0 ? void 0 : _b.languageData) || []),
                 },
-                autocompletion: this.#markupConfig.autocompletion,
+                autocompletion: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").autocompletion,
                 directiveSyntax: this.directiveSyntax,
                 receiver: this,
-            }));
+            })), "f");
         }
-        return this.#markupEditor;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f");
     }
     get renderStorage() {
-        return this.#renderStorage;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_renderStorage, "f");
     }
     get fileUploadHandler() {
-        return this.#fileUploadHandler;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_fileUploadHandler, "f");
     }
     get parseInsertedUrlAsImage() {
-        return this.#parseInsertedUrlAsImage;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_parseInsertedUrlAsImage, "f");
     }
     get needToSetDimensionsForUploadedImages() {
-        return this.#needToSetDimensionsForUploadedImages;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_needToSetDimensionsForUploadedImages, "f");
     }
     get enableNewImageSizeCalculation() {
-        return this.#enableNewImageSizeCalculation;
-    }
-    constructor(opts) {
-        super({ onError: logger_1.logger.error.bind(logger_1.logger) });
-        const { md = {}, initial = {}, handlers = {}, experimental = {}, markupConfig = {}, wysiwygConfig = {}, } = opts;
-        this.#modifiers = experimental.preserveMarkupFormatting
-            ? (0, dynamicModifiers_1.createDynamicModifiers)(new MarkupManager_1.MarkupManager())
-            : undefined;
-        this.#editorMode = initial.mode ?? 'wysiwyg';
-        this.#toolbarVisible = initial.toolbarVisible ?? true;
-        this.#splitMode = (markupConfig.renderPreview && markupConfig.splitMode) ?? false;
-        this.#splitModeEnabled = (this.#splitMode && initial.splitModeEnabled) ?? false;
-        this.#renderPreview = markupConfig.renderPreview;
-        this.#markup = initial.markup ?? '';
-        this.#preset = opts.preset ?? 'full';
-        this.#pmTransformers = opts.pmTransformers;
-        this.#mdOptions = md;
-        this.#extensions = wysiwygConfig.extensions;
-        this.#markupConfig = { ...opts.markupConfig };
-        this.#renderStorage = opts.renderStorage;
-        this.#fileUploadHandler = handlers.uploadFile;
-        this.#parseInsertedUrlAsImage = markupConfig.parseInsertedUrlAsImage;
-        this.#needToSetDimensionsForUploadedImages = Boolean(experimental.needToSetDimensionsForUploadedImages);
-        this.#directiveSyntax = opts.directiveSyntax;
-        this.#enableNewImageSizeCalculation = Boolean(experimental.enableNewImageSizeCalculation);
-        this.#preserveEmptyRows = experimental.preserveEmptyRows || false;
-        this.#prepareRawMarkup = experimental.prepareRawMarkup;
-        this.#escapeConfig = wysiwygConfig.escapeConfig;
-        this.#beforeEditorModeChange = experimental.beforeEditorModeChange;
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_enableNewImageSizeCalculation, "f");
     }
     // ---> implements CodeEditor
     get cm() {
@@ -224,19 +231,22 @@ class EditorImpl extends utils_1.SafeEventEmitter {
     }
     // <--- implements ActionStorage
     destroy() {
-        this.#wysiwygEditor?.destroy();
-        this.#markupEditor?.codemirror.destroy();
-        this.#markupEditor = undefined;
-        this.#markupEditor = undefined;
-        this.#wysiwygEditor = undefined;
+        var _a, _b;
+        (_a = tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f")) === null || _b === void 0 ? void 0 : _b.codemirror.destroy();
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_markupEditor, undefined, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_markupEditor, undefined, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_wysiwygEditor, undefined, "f");
     }
     setEditorMode(mode, opts) {
-        this.changeEditorMode({ mode, reason: 'manually', emit: opts?.emit });
+        this.changeEditorMode({ mode, reason: 'manually', emit: opts === null || opts === void 0 ? void 0 : opts.emit });
     }
-    changeEditorMode({ emit = true, ...opts }) {
-        if (this.#editorMode === opts.mode)
+    changeEditorMode(_a) {
+        var _b;
+        var { emit = true } = _a, opts = tslib_1.__rest(_a, ["emit"]);
+        if (tslib_1.__classPrivateFieldGet(this, _EditorImpl_editorMode, "f") === opts.mode)
             return;
-        if (this.#beforeEditorModeChange?.({ mode: opts.mode, reason: opts.reason }) === false) {
+        if (((_b = tslib_1.__classPrivateFieldGet(this, _EditorImpl_beforeEditorModeChange, "f")) === null || _b === void 0 ? void 0 : _b.call(this, { mode: opts.mode, reason: opts.reason })) === false) {
             return;
         }
         this.currentMode = opts.mode;
@@ -246,14 +256,14 @@ class EditorImpl extends utils_1.SafeEventEmitter {
         }
     }
     changeToolbarVisibility(opts) {
-        this.#toolbarVisible = opts.visible;
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_toolbarVisible, opts.visible, "f");
         this.emit('rerender', null);
         this.emit('change-toolbar-visibility', opts);
     }
     changeSplitModeEnabled(opts) {
-        if (this.#splitModeEnabled === opts.splitModeEnabled)
+        if (tslib_1.__classPrivateFieldGet(this, _EditorImpl_splitModeEnabled, "f") === opts.splitModeEnabled)
             return;
-        this.#splitModeEnabled = opts.splitModeEnabled;
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_splitModeEnabled, opts.splitModeEnabled, "f");
         this.emit('rerender', null);
         this.emit('change-split-mode-enabled', opts);
     }
@@ -263,7 +273,6 @@ class EditorImpl extends utils_1.SafeEventEmitter {
     hasFocus() {
         return this.currentEditor.hasFocus();
     }
-    getValue = () => this.currentEditor.getValue();
     isEmpty() {
         return this.currentEditor.isEmpty();
     }
@@ -322,11 +331,13 @@ class EditorImpl extends utils_1.SafeEventEmitter {
         }
     }
     shouldReplaceMarkupEditorValue(markupValue, wysiwygValue) {
-        const serializedEditorMarkup = this.#wysiwygEditor?.serializer.serialize(this.#wysiwygEditor.parser.parse(markupValue), this.#escapeConfig);
-        return serializedEditorMarkup?.trim() !== wysiwygValue.trim();
+        var _a;
+        const serializedEditorMarkup = (_a = tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) === null || _a === void 0 ? void 0 : _a.serializer.serialize(tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f").parser.parse(markupValue), tslib_1.__classPrivateFieldGet(this, _EditorImpl_escapeConfig, "f"));
+        return (serializedEditorMarkup === null || serializedEditorMarkup === void 0 ? void 0 : serializedEditorMarkup.trim()) !== wysiwygValue.trim();
     }
 }
 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_pmTransformers = new WeakMap(), _EditorImpl_preserveEmptyRows = new WeakMap(), _EditorImpl_modifiers = 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_directiveSyntax = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap(), _EditorImpl_beforeEditorModeChange = new WeakMap();
 function getTopOffset(elem) {
     const TOOLBAR_HEIGHT = 36; //px
     const TOOLBAR_BOTTOM_OFFSET = 8; // px
@@ -347,4 +358,3 @@ function calculateCSSNumberValue(cssValue) {
     tmp.remove();
     return value;
 }
-//# sourceMappingURL=Editor.js.map

package/build/cjs/bundle/HorizontalDrag.d.ts

@@ -1,6 +1,7 @@
-import { EditorInt } from "./Editor.js";
+import React from 'react';
+import { EditorInt } from './Editor';
 export declare const IN_RESIZE_CLASSNAME = "in-resize";
-export type HorizontalDragProps = {
+export declare type HorizontalDragProps = {
     leftElRef: React.RefObject<HTMLDivElement>;
     rightElRef: React.RefObject<HTMLDivElement>;
     wrapperRef: React.RefObject<HTMLDivElement>;

package/build/cjs/bundle/HorizontalDrag.js

@@ -1,16 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HorizontalDrag = exports.IN_RESIZE_CLASSNAME = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const lodash_1 = require("../lodash.js");
-const MarkdownEditorView_1 = require("./MarkdownEditorView.js");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const lodash_1 = require("../lodash");
+const MarkdownEditorView_1 = require("./MarkdownEditorView");
 exports.IN_RESIZE_CLASSNAME = 'in-resize';
 const useColResize = ({ onStart, onMove, onEnd }) => {
     const initialXPosition = (0, react_1.useRef)(0);
     const currentXPosition = (0, react_1.useRef)(0);
     const handleMove = (0, react_1.useCallback)((e) => {
-        const currentX = 'touches' in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
+        var _a, _b;
+        const currentX = 'touches' in e ? (_b = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.clientX) !== null && _b !== void 0 ? _b : 0 : e.clientX;
         if (currentXPosition.current === currentX) {
             return;
         }
@@ -19,15 +20,17 @@ const useColResize = ({ onStart, onMove, onEnd }) => {
         onMove(delta);
     }, [onMove]);
     const handleDragEnd = (0, react_1.useCallback)((e) => {
+        var _a, _b;
         window.removeEventListener('mousemove', handleMove);
         window.removeEventListener('touchmove', handleMove);
         document.body.style.removeProperty('user-select');
-        const currentX = 'touches' in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
+        const currentX = 'touches' in e ? (_b = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.clientX) !== null && _b !== void 0 ? _b : 0 : e.clientX;
         const delta = initialXPosition.current - currentX;
         onEnd(delta);
     }, [handleMove, onEnd]);
     const handleStart = (0, react_1.useCallback)((e) => {
-        const currentX = 'touches' in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
+        var _a, _b;
+        const currentX = 'touches' in e ? (_b = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.clientX) !== null && _b !== void 0 ? _b : 0 : e.clientX;
         initialXPosition.current = currentX;
         currentXPosition.current = currentX;
         window.addEventListener('mouseup', handleDragEnd, { once: true });
@@ -46,17 +49,22 @@ const useColResize = ({ onStart, onMove, onEnd }) => {
     };
 };
 const HorizontalDrag = ({ leftElRef, rightElRef, wrapperRef, editor, onEndMove, }) => {
+    var _a, _b, _c, _d;
     const cm = editor.cm;
-    const [lCardWidth, lSetCardWidth] = (0, react_1.useState)((wrapperRef.current?.clientWidth ?? 0) / 2);
-    const [rCardWidth, rSetCardWidth] = (0, react_1.useState)((wrapperRef.current?.clientWidth ?? 0) / 2);
+    const [lCardWidth, lSetCardWidth] = (0, react_1.useState)(((_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0) / 2);
+    const [rCardWidth, rSetCardWidth] = (0, react_1.useState)(((_d = (_c = wrapperRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0) / 2);
     const updateWidth = (0, react_1.useCallback)((lNewWidth, rNewWidth) => {
-        leftElRef.current?.style?.setProperty('width', `${lNewWidth}px`);
-        rightElRef.current?.style?.setProperty('width', `${rNewWidth}px`);
+        var _a, _b, _c, _d;
+        (_b = (_a = leftElRef.current) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.setProperty('width', `${lNewWidth}px`);
+        (_d = (_c = rightElRef.current) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.setProperty('width', `${rNewWidth}px`);
     }, [leftElRef, rightElRef]);
-    const calculateWidth = (0, react_1.useCallback)((delta) => [
-        (0, lodash_1.clamp)(lCardWidth - delta, (wrapperRef.current?.clientWidth ?? 0) / 8, ((wrapperRef.current?.clientWidth ?? 0) * 3) / 4),
-        (0, lodash_1.clamp)(rCardWidth + delta, (wrapperRef.current?.clientWidth ?? 0) / 8, ((wrapperRef.current?.clientWidth ?? 0) * 3) / 4),
-    ], [lCardWidth, rCardWidth, wrapperRef]);
+    const calculateWidth = (0, react_1.useCallback)((delta) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return [
+            (0, lodash_1.clamp)(lCardWidth - delta, ((_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0) / 8, (((_d = (_c = wrapperRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0) * 3) / 4),
+            (0, lodash_1.clamp)(rCardWidth + delta, ((_f = (_e = wrapperRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 0) / 8, (((_h = (_g = wrapperRef.current) === null || _g === void 0 ? void 0 : _g.clientWidth) !== null && _h !== void 0 ? _h : 0) * 3) / 4),
+        ];
+    }, [lCardWidth, rCardWidth, wrapperRef]);
     // Set initially calculated width
     (0, react_1.useEffect)(() => {
         updateWidth(lCardWidth, rCardWidth);
@@ -65,40 +73,44 @@ const HorizontalDrag = ({ leftElRef, rightElRef, wrapperRef, editor, onEndMove,
     (0, react_1.useEffect)(() => {
         const [leftElCurrent, rightElCurrent] = [leftElRef.current, rightElRef.current];
         return () => {
-            leftElCurrent?.classList.remove(exports.IN_RESIZE_CLASSNAME);
-            rightElCurrent?.classList.remove(exports.IN_RESIZE_CLASSNAME);
-            leftElCurrent?.style?.removeProperty('width');
-            rightElCurrent?.style?.removeProperty('width');
+            var _a, _b;
+            leftElCurrent === null || leftElCurrent === void 0 ? void 0 : leftElCurrent.classList.remove(exports.IN_RESIZE_CLASSNAME);
+            rightElCurrent === null || rightElCurrent === void 0 ? void 0 : rightElCurrent.classList.remove(exports.IN_RESIZE_CLASSNAME);
+            (_a = leftElCurrent === null || leftElCurrent === void 0 ? void 0 : leftElCurrent.style) === null || _a === void 0 ? void 0 : _a.removeProperty('width');
+            (_b = rightElCurrent === null || rightElCurrent === void 0 ? void 0 : rightElCurrent.style) === null || _b === void 0 ? void 0 : _b.removeProperty('width');
         };
     }, [leftElRef, rightElRef]);
     const onStart = (0, react_1.useCallback)(() => {
-        wrapperRef.current?.style.setProperty('user-select', 'none');
-        leftElRef.current?.classList.add(exports.IN_RESIZE_CLASSNAME);
-        rightElRef.current?.classList.add(exports.IN_RESIZE_CLASSNAME);
+        var _a, _b, _c;
+        (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('user-select', 'none');
+        (_b = leftElRef.current) === null || _b === void 0 ? void 0 : _b.classList.add(exports.IN_RESIZE_CLASSNAME);
+        (_c = rightElRef.current) === null || _c === void 0 ? void 0 : _c.classList.add(exports.IN_RESIZE_CLASSNAME);
     }, [leftElRef, rightElRef, wrapperRef]);
     const onMove = (0, react_1.useCallback)((delta) => {
         const [lNewWidth, rNewWidth] = calculateWidth(delta);
         updateWidth(lNewWidth, rNewWidth);
     }, [calculateWidth, lCardWidth, rCardWidth, updateWidth]);
     const onEnd = (0, react_1.useCallback)((delta) => {
+        var _a, _b, _c;
         const [lNewWidth, rNewWidth] = calculateWidth(delta);
         lSetCardWidth(lNewWidth);
         rSetCardWidth(rNewWidth);
         updateWidth(lNewWidth, rNewWidth);
-        wrapperRef.current?.style.removeProperty('user-select');
+        (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.style.removeProperty('user-select');
         cm.requestMeasure();
-        rightElRef.current?.classList.remove(exports.IN_RESIZE_CLASSNAME);
-        leftElRef.current?.classList.remove(exports.IN_RESIZE_CLASSNAME);
-        onEndMove?.(rightElRef.current, leftElRef.current);
+        (_b = rightElRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove(exports.IN_RESIZE_CLASSNAME);
+        (_c = leftElRef.current) === null || _c === void 0 ? void 0 : _c.classList.remove(exports.IN_RESIZE_CLASSNAME);
+        onEndMove === null || onEndMove === void 0 ? void 0 : onEndMove(rightElRef.current, leftElRef.current);
     }, [calculateWidth, cm, leftElRef, rightElRef, updateWidth, wrapperRef]);
     const { listeners } = useColResize({ onStart, onMove, onEnd });
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, MarkdownEditorView_1.cnEditorComponent)('resizer', { horizontal: true }), ...listeners, children: (0, jsx_runtime_1.jsx)("div", { className: (0, MarkdownEditorView_1.cnEditorComponent)('gutter') }) }));
+    return (react_1.default.createElement("div", Object.assign({ className: (0, MarkdownEditorView_1.cnEditorComponent)('resizer', { horizontal: true }) }, listeners),
+        react_1.default.createElement("div", { className: (0, MarkdownEditorView_1.cnEditorComponent)('gutter') })));
 };
 const HorizontalDragWrapper = (props) => {
     // If component calling HorizontalDrag is not mounted, then most likely wrapperRef will be null
     if (!props.isMounted)
-        return ((0, jsx_runtime_1.jsx)("div", { className: (0, MarkdownEditorView_1.cnEditorComponent)('resizer', { horizontal: true }), children: (0, jsx_runtime_1.jsx)("div", { className: (0, MarkdownEditorView_1.cnEditorComponent)('gutter') }) }));
-    return (0, jsx_runtime_1.jsx)(HorizontalDrag, { ...props });
+        return (react_1.default.createElement("div", { className: (0, MarkdownEditorView_1.cnEditorComponent)('resizer', { horizontal: true }) },
+            react_1.default.createElement("div", { className: (0, MarkdownEditorView_1.cnEditorComponent)('gutter') })));
+    return react_1.default.createElement(HorizontalDrag, Object.assign({}, props));
 };
 exports.HorizontalDrag = HorizontalDragWrapper;
-//# sourceMappingURL=HorizontalDrag.js.map