@gravity-ui/markdown-editor 13.0.0

package/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 YANDEX LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+# @gravity-ui/markdown-editor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/markdown-editor)](https://www.npmjs.com/package/@gravity-ui/markdown-editor) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/markdown-editor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/markdown-editor/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/markdown-editor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/markdown-editor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/md-editor/)
+
+## Markdown wysiwyg and markup editor 
+
+MarkdownEditor is a powerful tool for working with Markdown, which combines WYSIWYG and Markup modes. This means that you can create and edit content in a convenient visual mode, as well as have full control over the markup.
+
+### 🔧 Main features
+
+- Support for the basic Markdown and [YFM](https://ydocs.tech) syntax.
+- Extensibility through the use of ProseMirror and CodeMirror engines.
+- The ability to work in WYSIWYG and Markup modes for maximum flexibility.
+
+## Install
+
+```shell
+npm install @gravity-ui/markdown-editor
+```
+
+### Required dependencies
+
+Please note that to start using the package, your project must also have the following installed: `@diplodoc/transform`, `react`, `react-dom`, `@gravity-ui/uikit`, `@gravity-ui/components` and some others. Check out the `peerDependencies` section of `package.json` for accurate information.
+
+## Getting started
+
+The markdown editor is supplied as a React hook to create an instance of editor and a component for rendering the view.\
+To set up styling and theme see [UIKit docs](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles).
+
+```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});
+
+  React.useEffect(() => {
+    function submitHandler() {
+      // Serialize current content to markdown markup
+      const value = editor.getValue();
+      onSubmit(value);
+    }
+
+    editor.on('submit', submitHandler);
+    return () => {
+      editor.off('submit', submitHandler);
+    };
+  }, [onSubmit]);
+
+  return <MarkdownEditorView autofocus toaster={toaster} editor={editor} />;
+}
+```
+
+### i18n
+
+To set up internationalization, you just need to use the `configure`:
+
+```typescript
+import {configure} from '@gravity-ui/markdown-editor';
+
+configure({
+  lang: 'ru',
+});
+```
+
+Don't forget to call `configure()` from [UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#i18n) and other UI libraries.
+
+## Development
+
+To start the dev storybook
+
+```shell
+npm run dev
+```

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

@@ -0,0 +1,271 @@
+"use strict";
+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;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorImpl = void 0;
+const tslib_1 = require("tslib");
+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 editor_1 = require("../markup/editor");
+const event_emitter_1 = require("../utils/event-emitter");
+/** @internal */
+class EditorImpl extends event_emitter_1.SafeEventEmitter {
+    constructor(opts) {
+        var _a, _b, _c, _d, _e;
+        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_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();
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_editorMode, (_a = opts.initialEditorMode) !== null && _a !== void 0 ? _a : 'wysiwyg', "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_toolbarVisible, Boolean(opts.initialToolbarVisible), "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_splitMode, (_b = (opts.renderPreview && opts.splitMode)) !== null && _b !== void 0 ? _b : false, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_splitModeEnabled, (_c = (tslib_1.__classPrivateFieldGet(this, _EditorImpl_splitMode, "f") && opts.initialSplitModeEnabled)) !== null && _c !== void 0 ? _c : false, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_renderPreview, opts.renderPreview, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_markup, (_d = opts.initialMarkup) !== null && _d !== void 0 ? _d : '', "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_preset, (_e = opts.preset) !== null && _e !== void 0 ? _e : 'full', "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_linkify, opts.linkify, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_linkifyTlds, opts.linkifyTlds, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_allowHTML, opts.allowHTML, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_extensions, opts.extensions, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_renderStorage, opts.renderStorage, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_fileUploadHandler, opts.fileUploadHandler, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_needToSetDimensionsForUploadedImages, Boolean(opts.needToSetDimensionsForUploadedImages), "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_prepareRawMarkup, opts.prepareRawMarkup, "f");
+    }
+    get _wysiwygView() {
+        var _a;
+        // @ts-expect-error internal typing
+        return (_a = tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f")) === null || _a === void 0 ? void 0 : _a.view;
+    }
+    get currentMode() {
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_editorMode, "f");
+    }
+    set currentMode(newMode) {
+        var _a, _b, _c;
+        switch (newMode) {
+            case 'markup': {
+                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)) {
+                        tslib_1.__classPrivateFieldSet(this, _EditorImpl_markup, wysiwygEditorValue, "f");
+                    }
+                    else {
+                        tslib_1.__classPrivateFieldSet(this, _EditorImpl_markup, markupEditorValue, "f");
+                    }
+                }
+                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': {
+                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 (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 (tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f"))
+                    tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f").replace(tslib_1.__classPrivateFieldGet(this, _EditorImpl_markup, "f"));
+                break;
+            }
+            default:
+                throw new Error('Unknown editor mode: ' + newMode);
+        }
+        setTimeout(() => {
+            this.currentEditor.focus();
+        }, 30);
+    }
+    get toolbarVisible() {
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_toolbarVisible, "f");
+    }
+    get splitModeEnabled() {
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_splitModeEnabled, "f");
+    }
+    get splitMode() {
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_splitMode, "f");
+    }
+    get preset() {
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_preset, "f");
+    }
+    get renderPreview() {
+        return tslib_1.__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 (!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: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markup, "f"),
+                extensions: tslib_1.__classPrivateFieldGet(this, _EditorImpl_extensions, "f"),
+                allowHTML: tslib_1.__classPrivateFieldGet(this, _EditorImpl_allowHTML, "f"),
+                linkify: tslib_1.__classPrivateFieldGet(this, _EditorImpl_linkify, "f"),
+                linkifyTlds: tslib_1.__classPrivateFieldGet(this, _EditorImpl_linkifyTlds, "f"),
+                onChange: () => this.emit('rerender-toolbar', null),
+                onDocChange: () => this.emit('change', null),
+            }), "f");
+        }
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_wysiwygEditor, "f");
+    }
+    get markupEditor() {
+        if (!tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f")) {
+            tslib_1.__classPrivateFieldSet(this, _EditorImpl_markupEditor, new editor_1.Editor((0, codemirror_1.createCodemirror)({
+                doc: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markup, "f"),
+                placeholderText: (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: tslib_1.__classPrivateFieldGet(this, _EditorImpl_renderStorage, "f"),
+                uploadHandler: this.fileUploadHandler,
+                needImgDimms: this.needToSetDimensionsForUploadedImages,
+            })), "f");
+        }
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupEditor, "f");
+    }
+    get renderStorage() {
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_renderStorage, "f");
+    }
+    get fileUploadHandler() {
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_fileUploadHandler, "f");
+    }
+    get needToSetDimensionsForUploadedImages() {
+        return tslib_1.__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 = 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) {
+        this.changeEditorMode({ mode, reason: 'manually' });
+    }
+    changeEditorMode(opts) {
+        if (tslib_1.__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) {
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_toolbarVisible, opts.visible, "f");
+        this.emit('rerender', null);
+        this.emit('change-toolbar-visibility', opts);
+    }
+    changeSplitModeEnabled(opts) {
+        if (tslib_1.__classPrivateFieldGet(this, _EditorImpl_splitModeEnabled, "f") === opts.splitModeEnabled)
+            return;
+        tslib_1.__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(prosemirror_state_1.TextSelection.create(tr.doc, position)).scrollIntoView());
+                }
+                break;
+            }
+            default:
+                throw new Error('Unknown editor mode: ' + mode);
+        }
+    }
+    shouldReplaceMarkupEditorValue(markupValue, wysiwygValue) {
+        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));
+        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_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/cjs/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/cjs/bundle/HorizontalDrag.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HorizontalDrag = exports.IN_RESIZE_CLASSNAME = void 0;
+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) => {
+        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 = (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 ? (_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) => {
+        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] = (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) => {
+        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) => {
+        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);
+        cm.requestMeasure();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const [leftElCurrent, rightElCurrent] = [leftElRef.current, rightElRef.current];
+        return () => {
+            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)(() => {
+        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);
+        (_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(exports.IN_RESIZE_CLASSNAME);
+        (_c = leftElRef.current) === null || _c === void 0 ? void 0 : _c.classList.remove(exports.IN_RESIZE_CLASSNAME);
+    }, [calculateWidth, cm, leftElRef, rightElRef, updateWidth, wrapperRef]);
+    const { listeners } = useColResize({ onStart, onMove, onEnd });
+    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 (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;

package/build/cjs/bundle/MarkdownEditorView.css

@@ -0,0 +1,50 @@
+.g-md-editor-component {
+  display: flex;
+  height: 100%;
+}
+.g-md-editor-component_split_vertical {
+  display: grid;
+  grid-template-rows: 1fr auto 1fr;
+  gap: 2px;
+}
+.g-md-editor-component__editor {
+  flex-grow: 1;
+  gap: 2px;
+  min-width: 0;
+}
+.g-md-editor-component__editor-wrapper {
+  display: flex;
+  width: 100%;
+}
+.g-md-editor-component__preview-wrapper {
+  overflow-y: auto;
+  width: 100%;
+}
+.g-md-editor-component__resizer {
+  margin: 0 5px;
+}
+.g-md-editor-component__resizer_horizontal {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  min-width: 8px;
+  min-height: 100%;
+  margin: 0 8px;
+  cursor: col-resize;
+  background: var(--g-color-base-generic-ultralight);
+}
+.g-md-editor-component__gutter {
+  top: 50%;
+  bottom: 50%;
+  width: 2px;
+  height: 24px;
+  background: var(--g-color-line-generic);
+}
+.g-md-editor-component .g-md-toolbar-list-button_arrow {
+  --g-button-icon-offset: 0px;
+  --g-button-padding: 2px;
+  width: 42px;
+}
+.g-md-editor-component .in-resize {
+  pointer-events: none;
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { ToasterPublicMethods } from '@gravity-ui/uikit';
+import { ClassNameProps } from '../classname';
+import type { Editor } from './Editor';
+import { MToolbarData, MToolbarItemData } from './config/markup';
+import { WToolbarData, WToolbarItemData } from './config/wysiwyg';
+export declare const cnEditorComponent: import("@bem-react/classname").ClassNameFormatter;
+export declare type MarkdownEditorViewProps = ClassNameProps & {
+    editor?: Editor;
+    autofocus?: boolean;
+    markupToolbarConfig?: MToolbarData;
+    wysiwygToolbarConfig?: WToolbarData;
+    markupHiddenActionsConfig?: MToolbarItemData[];
+    wysiwygHiddenActionsConfig?: WToolbarItemData[];
+    /** @default true */
+    settingsVisible?: boolean;
+    toaster: ToasterPublicMethods;
+    stickyToolbar: boolean;
+};
+export declare const MarkdownEditorView: React.ForwardRefExoticComponent<ClassNameProps & {
+    editor?: Editor | undefined;
+    autofocus?: boolean | undefined;
+    markupToolbarConfig?: MToolbarData | undefined;
+    wysiwygToolbarConfig?: WToolbarData | undefined;
+    markupHiddenActionsConfig?: MToolbarItemData[] | undefined;
+    wysiwygHiddenActionsConfig?: WToolbarItemData[] | undefined;
+    /** @default true */
+    settingsVisible?: boolean | undefined;
+    toaster: ToasterPublicMethods;
+    stickyToolbar: boolean;
+} & React.RefAttributes<HTMLDivElement>>;