@gravity-ui/markdown-editor 13.0.0

package/build/cjs/view/hocs/withMermaid/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withMermaid = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_2 = require("@diplodoc/mermaid-extension/react");
+const useMermaidRuntime_1 = require("./useMermaidRuntime");
+function withMermaid(opts) {
+    return (Component) => (0, react_1.forwardRef)(function WithLatex(props, ref) {
+        const { meta, html, mermaidConfig } = props;
+        const renderMermaid = (0, react_2.useMermaid)();
+        (0, useMermaidRuntime_1.useMermaidRuntime)(meta, opts.runtime);
+        (0, react_1.useEffect)(() => {
+            renderMermaid(mermaidConfig);
+        }, [html, mermaidConfig, renderMermaid]);
+        return react_1.default.createElement(Component, Object.assign({}, props, { ref: ref }));
+    });
+}
+exports.withMermaid = withMermaid;

package/build/cjs/view/hocs/withMermaid/types.d.ts

@@ -0,0 +1,3 @@
+import type { PluginOptions } from '@diplodoc/mermaid-extension/plugin/transform';
+export type { TransformMeta } from '../../types';
+export declare type PluginRuntime = PluginOptions['runtime'];

package/build/cjs/view/hocs/withMermaid/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/view/hocs/withMermaid/useMermaidRuntime.d.ts

@@ -0,0 +1 @@
+export {};

package/build/cjs/view/hocs/withMermaid/useMermaidRuntime.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMermaidRuntime = void 0;
+/** @internal */
+function useMermaidRuntime(meta, runtime) {
+    var _a;
+    const script = runtime;
+    if ((_a = meta === null || meta === void 0 ? void 0 : meta.script) === null || _a === void 0 ? void 0 : _a.includes(script)) {
+        Promise.resolve().then(() => __importStar(require(/* webpackChunkName: "mermaid-runtime" */ '@diplodoc/mermaid-extension/runtime')));
+    }
+}
+exports.useMermaidRuntime = useMermaidRuntime;

package/build/cjs/view/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useYfmShowElemWithId';

package/build/cjs/view/hooks/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useYfmShowElemWithId"), exports);

package/build/cjs/view/hooks/useYfmShowElemWithId/index.d.ts

@@ -0,0 +1 @@
+export * from './useYfmShowElemWithId';

package/build/cjs/view/hooks/useYfmShowElemWithId/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useYfmShowElemWithId"), exports);

package/build/cjs/view/hooks/useYfmShowElemWithId/useYfmShowElemWithId.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare function useYfmShowElemWithId(ref: RefObject<HTMLElement>, id: string): void;

package/build/cjs/view/hooks/useYfmShowElemWithId/useYfmShowElemWithId.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useYfmShowElemWithId = void 0;
+const react_1 = require("react");
+const YfmCutCN = {
+    Open: 'open',
+    Cut: 'yfm-cut',
+};
+const YfmTabsCN = {
+    Active: 'active',
+    Tabs: 'yfm-tabs',
+    TabList: 'yfm-tab-list',
+    Tab: 'yfm-tab',
+    TabPanel: 'yfm-tab-panel',
+};
+function useYfmShowElemWithId(ref, id) {
+    (0, react_1.useEffect)(() => {
+        const { current: containerDom } = ref;
+        if (!id || !containerDom)
+            return;
+        let elem = document.getElementById(id);
+        if (!elem || !containerDom.contains(elem))
+            return;
+        while (elem && elem !== containerDom) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            openYfmCut(elem) || switchYfmTabs(elem);
+            elem = elem.parentElement;
+        }
+    }, [id]);
+}
+exports.useYfmShowElemWithId = useYfmShowElemWithId;
+function openYfmCut({ classList }) {
+    if (classList.contains(YfmCutCN.Cut) && !classList.contains(YfmCutCN.Open)) {
+        classList.add(YfmCutCN.Open);
+        return true;
+    }
+    return false;
+}
+function switchYfmTabs(tabPanelElem) {
+    if (!tabPanelElem.id ||
+        !tabPanelElem.classList.contains(YfmTabsCN.TabPanel) ||
+        tabPanelElem.classList.contains(YfmTabsCN.Active))
+        return false;
+    const tabsElem = tabPanelElem.parentElement;
+    if (!(tabsElem === null || tabsElem === void 0 ? void 0 : tabsElem.classList.contains(YfmTabsCN.Tabs)))
+        return false;
+    const yfmTabList = tabsElem.firstElementChild;
+    if (!(yfmTabList === null || yfmTabList === void 0 ? void 0 : yfmTabList.classList.contains(YfmTabsCN.TabList)))
+        return false;
+    const tabPanelId = tabPanelElem.id;
+    for (const tabElem of Array.from(yfmTabList.children)) {
+        if (!tabElem.classList.contains(YfmTabsCN.Tab))
+            continue;
+        const isDesiredElem = tabElem.hasAttribute('aria-controls')
+            ? tabElem.getAttribute('aria-controls') === tabPanelId
+            : tabElem.textContent === tabPanelElem.getAttribute('data-title');
+        tabElem.setAttribute('data-diplodoc-is-active', String(isDesiredElem));
+        tabElem.setAttribute('aria-selected', String(isDesiredElem));
+        tabElem.classList.toggle(YfmTabsCN.Active, isDesiredElem);
+    }
+    for (const panelElem of Array.from(tabsElem.children)) {
+        if (!panelElem.classList.contains(YfmTabsCN.TabPanel))
+            continue;
+        const isDesiredElem = panelElem.id === tabPanelId;
+        panelElem.classList.toggle(YfmTabsCN.Active, isDesiredElem);
+    }
+    return true;
+}

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

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './hooks';
+export * from './types';

package/build/cjs/view/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./components"), exports);
+tslib_1.__exportStar(require("./hooks"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/build/cjs/view/types/index.d.ts

@@ -0,0 +1,4 @@
+export declare type TransformMeta = {
+    script?: string[];
+    style?: string[];
+} | undefined;

package/build/cjs/view/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react';
+import { CommonEditor, MarkupString } from '../common';
+import { WysiwygEditorOptions } from '../core';
+import { ReactRenderStorage } from '../extensions';
+import { Receiver } from '../utils/event-emitter';
+import type { FileUploadHandler } from '../utils/upload';
+export declare type EditorMode = 'wysiwyg' | 'markup';
+export declare type SplitMode = false | 'horizontal' | 'vertical';
+export declare type EditorPreset = 'zero' | 'commonmark' | 'default' | 'yfm' | 'full';
+export declare type RenderPreview = ({ getValue, mode, }: {
+    getValue: () => MarkupString;
+    mode: 'preview' | 'split';
+}) => ReactNode;
+export declare type ToolbarActionData = {
+    editorMode: EditorMode;
+    id: string;
+    attrs?: {
+        [key: string]: any;
+    };
+};
+interface EventMap {
+    change: null;
+    cancel: null;
+    submit: null;
+    'toolbar-action': ToolbarActionData;
+    'change-editor-mode': {
+        mode: EditorMode;
+    };
+    'change-toolbar-visibility': {
+        visible: boolean;
+    };
+    'change-split-mode-enabled': {
+        splitModeEnabled: boolean;
+    };
+}
+export interface Editor extends Receiver<EventMap>, CommonEditor {
+    readonly currentMode: EditorMode;
+    readonly toolbarVisible: boolean;
+    setEditorMode(mode: EditorMode): void;
+    moveCursor(position: 'start' | 'end' | {
+        line: number;
+    }): void;
+}
+export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'linkify' | 'linkifyTlds' | 'extensions'> & {
+    initialMarkup?: MarkupString;
+    /** @default 'wysiwyg' */
+    initialEditorMode?: EditorMode;
+    /** @default true */
+    initialToolbarVisible?: boolean;
+    /** @default false
+     * Has no effect if splitMode is false or undefined
+     */
+    initialSplitModeEnabled?: boolean;
+    renderStorage: ReactRenderStorage;
+    fileUploadHandler?: FileUploadHandler;
+    /**
+     * If we need to set dimensions for uploaded images
+     *
+     * @default false
+     */
+    needToSetDimensionsForUploadedImages?: 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.
+     */
+    prepareRawMarkup?: (value: MarkupString) => MarkupString;
+    splitMode?: SplitMode;
+    renderPreview?: RenderPreview;
+    preset: EditorPreset;
+};
+export {};

package/build/esm/bundle/Editor.js

@@ -0,0 +1,267 @@
+var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_preset, _EditorImpl_allowHTML, _EditorImpl_linkify, _EditorImpl_linkifyTlds, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_prepareRawMarkup;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
+import { TextSelection } from 'prosemirror-state';
+import { WysiwygEditor } from '../core';
+import { i18n } from '../i18n/bundle';
+import { logger } from '../logger';
+import { createCodemirror } from '../markup/codemirror';
+import { Editor as MarkupEditor } from '../markup/editor';
+import { SafeEventEmitter } from '../utils/event-emitter';
+/** @internal */
+export class EditorImpl extends SafeEventEmitter {
+    constructor(opts) {
+        var _a, _b, _c, _d, _e;
+        super({ onError: logger.error.bind(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_preset.set(this, void 0);
+        _EditorImpl_allowHTML.set(this, void 0);
+        _EditorImpl_linkify.set(this, void 0);
+        _EditorImpl_linkifyTlds.set(this, void 0);
+        _EditorImpl_extensions.set(this, void 0);
+        _EditorImpl_renderStorage.set(this, void 0);
+        _EditorImpl_fileUploadHandler.set(this, void 0);
+        _EditorImpl_needToSetDimensionsForUploadedImages.set(this, void 0);
+        _EditorImpl_prepareRawMarkup.set(this, void 0);
+        this.getValue = () => this.currentEditor.getValue();
+        __classPrivateFieldSet(this, _EditorImpl_editorMode, (_a = opts.initialEditorMode) !== null && _a !== void 0 ? _a : 'wysiwyg', "f");
+        __classPrivateFieldSet(this, _EditorImpl_toolbarVisible, Boolean(opts.initialToolbarVisible), "f");
+        __classPrivateFieldSet(this, _EditorImpl_splitMode, (_b = (opts.renderPreview && opts.splitMode)) !== null && _b !== void 0 ? _b : false, "f");
+        __classPrivateFieldSet(this, _EditorImpl_splitModeEnabled, (_c = (__classPrivateFieldGet(this, _EditorImpl_splitMode, "f") && opts.initialSplitModeEnabled)) !== null && _c !== void 0 ? _c : false, "f");
+        __classPrivateFieldSet(this, _EditorImpl_renderPreview, opts.renderPreview, "f");
+        __classPrivateFieldSet(this, _EditorImpl_markup, (_d = opts.initialMarkup) !== null && _d !== void 0 ? _d : '', "f");
+        __classPrivateFieldSet(this, _EditorImpl_preset, (_e = opts.preset) !== null && _e !== void 0 ? _e : 'full', "f");
+        __classPrivateFieldSet(this, _EditorImpl_linkify, opts.linkify, "f");
+        __classPrivateFieldSet(this, _EditorImpl_linkifyTlds, opts.linkifyTlds, "f");
+        __classPrivateFieldSet(this, _EditorImpl_allowHTML, opts.allowHTML, "f");
+        __classPrivateFieldSet(this, _EditorImpl_extensions, opts.extensions, "f");
+        __classPrivateFieldSet(this, _EditorImpl_renderStorage, opts.renderStorage, "f");
+        __classPrivateFieldSet(this, _EditorImpl_fileUploadHandler, opts.fileUploadHandler, "f");
+        __classPrivateFieldSet(this, _EditorImpl_needToSetDimensionsForUploadedImages, Boolean(opts.needToSetDimensionsForUploadedImages), "f");
+        __classPrivateFieldSet(this, _EditorImpl_prepareRawMarkup, opts.prepareRawMarkup, "f");
+    }
+    get _wysiwygView() {
+        var _a;
+        // @ts-expect-error internal typing
+        return (_a = __classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) === null || _a === void 0 ? void 0 : _a.view;
+    }
+    get currentMode() {
+        return __classPrivateFieldGet(this, _EditorImpl_editorMode, "f");
+    }
+    set currentMode(newMode) {
+        var _a, _b, _c;
+        switch (newMode) {
+            case 'markup': {
+                __classPrivateFieldSet(this, _EditorImpl_editorMode, newMode, "f");
+                if (__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) {
+                    const markupEditorValue = (_a = __classPrivateFieldGet(this, _EditorImpl_markupEditor, "f")) === null || _a === void 0 ? void 0 : _a.getValue();
+                    const wysiwygEditorValue = __classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f").getValue();
+                    if (!markupEditorValue ||
+                        this.shouldReplaceMarkupEditorValue(markupEditorValue, wysiwygEditorValue)) {
+                        __classPrivateFieldSet(this, _EditorImpl_markup, wysiwygEditorValue, "f");
+                    }
+                    else {
+                        __classPrivateFieldSet(this, _EditorImpl_markup, markupEditorValue, "f");
+                    }
+                }
+                if (__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f"))
+                    __classPrivateFieldGet(this, _EditorImpl_markupEditor, "f").replace(__classPrivateFieldGet(this, _EditorImpl_markup, "f"));
+                break;
+            }
+            case 'wysiwyg': {
+                __classPrivateFieldSet(this, _EditorImpl_editorMode, newMode, "f");
+                if (__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f")) {
+                    const value = __classPrivateFieldGet(this, _EditorImpl_markupEditor, "f").getValue();
+                    __classPrivateFieldSet(this, _EditorImpl_markup, (_c = (_b = __classPrivateFieldGet(this, _EditorImpl_prepareRawMarkup, "f")) === null || _b === void 0 ? void 0 : _b.call(this, value)) !== null && _c !== void 0 ? _c : value, "f");
+                }
+                else if (__classPrivateFieldGet(this, _EditorImpl_prepareRawMarkup, "f")) {
+                    __classPrivateFieldSet(this, _EditorImpl_markup, __classPrivateFieldGet(this, _EditorImpl_prepareRawMarkup, "f").call(this, __classPrivateFieldGet(this, _EditorImpl_markup, "f")), "f");
+                }
+                if (__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f"))
+                    __classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f").replace(__classPrivateFieldGet(this, _EditorImpl_markup, "f"));
+                break;
+            }
+            default:
+                throw new Error('Unknown editor mode: ' + newMode);
+        }
+        setTimeout(() => {
+            this.currentEditor.focus();
+        }, 30);
+    }
+    get toolbarVisible() {
+        return __classPrivateFieldGet(this, _EditorImpl_toolbarVisible, "f");
+    }
+    get splitModeEnabled() {
+        return __classPrivateFieldGet(this, _EditorImpl_splitModeEnabled, "f");
+    }
+    get splitMode() {
+        return __classPrivateFieldGet(this, _EditorImpl_splitMode, "f");
+    }
+    get preset() {
+        return __classPrivateFieldGet(this, _EditorImpl_preset, "f");
+    }
+    get renderPreview() {
+        return __classPrivateFieldGet(this, _EditorImpl_renderPreview, "f");
+    }
+    get currentEditor() {
+        const mode = this.currentMode;
+        switch (mode) {
+            case 'markup':
+                return this.markupEditor;
+            case 'wysiwyg':
+                return this.wysiwygEditor;
+            default:
+                throw new Error('Unknown editor mode: ' + mode);
+        }
+    }
+    get wysiwygEditor() {
+        if (!__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) {
+            const mdPreset = __classPrivateFieldGet(this, _EditorImpl_preset, "f") === 'zero' || __classPrivateFieldGet(this, _EditorImpl_preset, "f") === 'commonmark' ? __classPrivateFieldGet(this, _EditorImpl_preset, "f") : 'default';
+            __classPrivateFieldSet(this, _EditorImpl_wysiwygEditor, new WysiwygEditor({
+                mdPreset,
+                initialContent: __classPrivateFieldGet(this, _EditorImpl_markup, "f"),
+                extensions: __classPrivateFieldGet(this, _EditorImpl_extensions, "f"),
+                allowHTML: __classPrivateFieldGet(this, _EditorImpl_allowHTML, "f"),
+                linkify: __classPrivateFieldGet(this, _EditorImpl_linkify, "f"),
+                linkifyTlds: __classPrivateFieldGet(this, _EditorImpl_linkifyTlds, "f"),
+                onChange: () => this.emit('rerender-toolbar', null),
+                onDocChange: () => this.emit('change', null),
+            }), "f");
+        }
+        return __classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f");
+    }
+    get markupEditor() {
+        if (!__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f")) {
+            __classPrivateFieldSet(this, _EditorImpl_markupEditor, new MarkupEditor(createCodemirror({
+                doc: __classPrivateFieldGet(this, _EditorImpl_markup, "f"),
+                placeholderText: 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: __classPrivateFieldGet(this, _EditorImpl_renderStorage, "f"),
+                uploadHandler: this.fileUploadHandler,
+                needImgDimms: this.needToSetDimensionsForUploadedImages,
+            })), "f");
+        }
+        return __classPrivateFieldGet(this, _EditorImpl_markupEditor, "f");
+    }
+    get renderStorage() {
+        return __classPrivateFieldGet(this, _EditorImpl_renderStorage, "f");
+    }
+    get fileUploadHandler() {
+        return __classPrivateFieldGet(this, _EditorImpl_fileUploadHandler, "f");
+    }
+    get needToSetDimensionsForUploadedImages() {
+        return __classPrivateFieldGet(this, _EditorImpl_needToSetDimensionsForUploadedImages, "f");
+    }
+    // ---> implements CodeEditor
+    get cm() {
+        return this.markupEditor.cm;
+    }
+    // <--- implements CodeEditor
+    // ---> implements ActionStorage
+    get actions() {
+        return this.wysiwygEditor.actions;
+    }
+    action(actionName) {
+        return this.wysiwygEditor.action(actionName);
+    }
+    // <--- implements ActionStorage
+    destroy() {
+        var _a, _b;
+        (_a = __classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = __classPrivateFieldGet(this, _EditorImpl_markupEditor, "f")) === null || _b === void 0 ? void 0 : _b.codemirror.destroy();
+        __classPrivateFieldSet(this, _EditorImpl_markupEditor, undefined, "f");
+        __classPrivateFieldSet(this, _EditorImpl_markupEditor, undefined, "f");
+        __classPrivateFieldSet(this, _EditorImpl_wysiwygEditor, undefined, "f");
+    }
+    setEditorMode(mode) {
+        this.changeEditorMode({ mode, reason: 'manually' });
+    }
+    changeEditorMode(opts) {
+        if (__classPrivateFieldGet(this, _EditorImpl_editorMode, "f") === opts.mode)
+            return;
+        this.currentMode = opts.mode;
+        this.emit('rerender', null);
+        if (opts.reason !== 'error-boundary') {
+            this.emit('change-editor-mode', opts);
+        }
+    }
+    changeToolbarVisibility(opts) {
+        __classPrivateFieldSet(this, _EditorImpl_toolbarVisible, opts.visible, "f");
+        this.emit('rerender', null);
+        this.emit('change-toolbar-visibility', opts);
+    }
+    changeSplitModeEnabled(opts) {
+        if (__classPrivateFieldGet(this, _EditorImpl_splitModeEnabled, "f") === opts.splitModeEnabled)
+            return;
+        __classPrivateFieldSet(this, _EditorImpl_splitModeEnabled, opts.splitModeEnabled, "f");
+        this.emit('rerender', null);
+        this.emit('change-split-mode-enabled', opts);
+    }
+    focus() {
+        return this.currentEditor.focus();
+    }
+    hasFocus() {
+        return this.currentEditor.hasFocus();
+    }
+    isEmpty() {
+        return this.currentEditor.isEmpty();
+    }
+    clear() {
+        return this.currentEditor.clear();
+    }
+    replace(newMarkup) {
+        return this.currentEditor.replace(newMarkup);
+    }
+    prepend(markup) {
+        return this.currentEditor.prepend(markup);
+    }
+    append(markup) {
+        return this.currentEditor.append(markup);
+    }
+    moveCursor(position) {
+        if (typeof position === 'object') {
+            return this.moveCursorToLine(position.line);
+        }
+        return this.currentEditor.moveCursor(position);
+    }
+    moveCursorToLine(line) {
+        const mode = this.currentMode;
+        switch (mode) {
+            case 'markup': {
+                const lineNumber = line + 1;
+                const view = this.markupEditor.cm;
+                if (lineNumber > 0 && lineNumber <= view.state.doc.lines) {
+                    view.dispatch({ selection: { anchor: view.state.doc.line(lineNumber).from } });
+                }
+                break;
+            }
+            case 'wysiwyg': {
+                const node = this.wysiwygEditor.dom.querySelector(`[data-line="${line}"]`);
+                if (node) {
+                    const position = this._wysiwygView.posAtDOM(node, 0);
+                    const { tr } = this._wysiwygView.state;
+                    this._wysiwygView.dispatch(tr.setSelection(TextSelection.create(tr.doc, position)).scrollIntoView());
+                }
+                break;
+            }
+            default:
+                throw new Error('Unknown editor mode: ' + mode);
+        }
+    }
+    shouldReplaceMarkupEditorValue(markupValue, wysiwygValue) {
+        var _a;
+        const serializedEditorMarkup = (_a = __classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) === null || _a === void 0 ? void 0 : _a.serializer.serialize(__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f").parser.parse(markupValue));
+        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_preset = new WeakMap(), _EditorImpl_allowHTML = new WeakMap(), _EditorImpl_linkify = new WeakMap(), _EditorImpl_linkifyTlds = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap();

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { EditorInt } from './Editor';
+export declare const IN_RESIZE_CLASSNAME = "in-resize";
+export declare type HorizontalDragProps = {
+    leftElRef: React.RefObject<HTMLDivElement>;
+    rightElRef: React.RefObject<HTMLDivElement>;
+    wrapperRef: React.RefObject<HTMLDivElement>;
+    editor: EditorInt;
+};
+declare const HorizontalDragWrapper: React.FC<HorizontalDragProps & {
+    isMounted: boolean;
+}>;
+export { HorizontalDragWrapper as HorizontalDrag };

package/build/esm/bundle/HorizontalDrag.js

@@ -0,0 +1,111 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { clamp } from '../lodash';
+import { cnEditorComponent } from './MarkdownEditorView';
+export const IN_RESIZE_CLASSNAME = 'in-resize';
+const useColResize = ({ onStart, onMove, onEnd }) => {
+    const initialXPosition = useRef(0);
+    const currentXPosition = useRef(0);
+    const handleMove = useCallback((e) => {
+        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;
+        }
+        currentXPosition.current = currentX;
+        const delta = initialXPosition.current - currentX;
+        onMove(delta);
+    }, [onMove]);
+    const handleDragEnd = useCallback((e) => {
+        var _a, _b;
+        window.removeEventListener('mousemove', handleMove);
+        window.removeEventListener('touchmove', handleMove);
+        document.body.style.removeProperty('user-select');
+        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 = useCallback((e) => {
+        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 });
+        window.addEventListener('touchend', handleDragEnd, { once: true });
+        window.addEventListener('touchcancel', handleDragEnd, { once: true });
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('touchmove', handleMove);
+        document.body.style.setProperty('user-select', 'none');
+        onStart();
+    }, [handleDragEnd, handleMove, onStart]);
+    return {
+        listeners: {
+            onMouseDown: handleStart,
+            onTouchStart: handleStart,
+        },
+    };
+};
+const HorizontalDrag = ({ leftElRef, rightElRef, wrapperRef, editor, }) => {
+    var _a, _b, _c, _d;
+    const cm = editor.cm;
+    const [lCardWidth, lSetCardWidth] = useState(((_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0) / 2);
+    const [rCardWidth, rSetCardWidth] = useState(((_d = (_c = wrapperRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0) / 2);
+    const updateWidth = useCallback((lNewWidth, rNewWidth) => {
+        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 = useCallback((delta) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return [
+            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),
+            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
+    useEffect(() => {
+        updateWidth(lCardWidth, rCardWidth);
+        cm.requestMeasure();
+    }, []);
+    useEffect(() => {
+        const [leftElCurrent, rightElCurrent] = [leftElRef.current, rightElRef.current];
+        return () => {
+            var _a, _b;
+            leftElCurrent === null || leftElCurrent === void 0 ? void 0 : leftElCurrent.classList.remove(IN_RESIZE_CLASSNAME);
+            rightElCurrent === null || rightElCurrent === void 0 ? void 0 : rightElCurrent.classList.remove(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 = useCallback(() => {
+        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(IN_RESIZE_CLASSNAME);
+        (_c = rightElRef.current) === null || _c === void 0 ? void 0 : _c.classList.add(IN_RESIZE_CLASSNAME);
+    }, [leftElRef, rightElRef, wrapperRef]);
+    const onMove = useCallback((delta) => {
+        const [lNewWidth, rNewWidth] = calculateWidth(delta);
+        updateWidth(lNewWidth, rNewWidth);
+    }, [calculateWidth, lCardWidth, rCardWidth, updateWidth]);
+    const onEnd = useCallback((delta) => {
+        var _a, _b, _c;
+        const [lNewWidth, rNewWidth] = calculateWidth(delta);
+        lSetCardWidth(lNewWidth);
+        rSetCardWidth(rNewWidth);
+        updateWidth(lNewWidth, rNewWidth);
+        (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.style.removeProperty('user-select');
+        cm.requestMeasure();
+        (_b = rightElRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove(IN_RESIZE_CLASSNAME);
+        (_c = leftElRef.current) === null || _c === void 0 ? void 0 : _c.classList.remove(IN_RESIZE_CLASSNAME);
+    }, [calculateWidth, cm, leftElRef, rightElRef, updateWidth, wrapperRef]);
+    const { listeners } = useColResize({ onStart, onMove, onEnd });
+    return (React.createElement("div", Object.assign({ className: cnEditorComponent('resizer', { horizontal: true }) }, listeners),
+        React.createElement("div", { className: cnEditorComponent('gutter') })));
+};
+const HorizontalDragWrapper = (props) => {
+    // If component calling HorizontalDrag is not mounted, then most likely wrapperRef will be null
+    if (!props.isMounted)
+        return (React.createElement("div", { className: cnEditorComponent('resizer', { horizontal: true }) },
+            React.createElement("div", { className: cnEditorComponent('gutter') })));
+    return React.createElement(HorizontalDrag, Object.assign({}, props));
+};
+export { HorizontalDragWrapper as HorizontalDrag };