@gravity-ui/markdown-editor 14.11.2 → 14.12.1

package/build/cjs/bundle/HorizontalDrag.js

@@ -1,17 +1,16 @@
 "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");
+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");
 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;
+        const currentX = 'touches' in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
         if (currentXPosition.current === currentX) {
             return;
         }
@@ -20,17 +19,15 @@ 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 ? (_b = (_a = e.touches[0]) === null || _a === void 0 ? void 0 : _a.clientX) !== null && _b !== void 0 ? _b : 0 : e.clientX;
+        const currentX = 'touches' in e ? e.touches[0]?.clientX ?? 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;
+        const currentX = 'touches' in e ? e.touches[0]?.clientX ?? 0 : e.clientX;
         initialXPosition.current = currentX;
         currentXPosition.current = currentX;
         window.addEventListener('mouseup', handleDragEnd, { once: true });
@@ -49,22 +46,17 @@ 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)(((_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 [lCardWidth, lSetCardWidth] = (0, react_1.useState)((wrapperRef.current?.clientWidth ?? 0) / 2);
+    const [rCardWidth, rSetCardWidth] = (0, react_1.useState)((wrapperRef.current?.clientWidth ?? 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.current?.style?.setProperty('width', `${lNewWidth}px`);
+        rightElRef.current?.style?.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]);
+    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]);
     // Set initially calculated width
     (0, react_1.useEffect)(() => {
         updateWidth(lCardWidth, rCardWidth);
@@ -73,44 +65,40 @@ const HorizontalDrag = ({ leftElRef, rightElRef, wrapperRef, editor, onEndMove,
     (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');
+            leftElCurrent?.classList.remove(exports.IN_RESIZE_CLASSNAME);
+            rightElCurrent?.classList.remove(exports.IN_RESIZE_CLASSNAME);
+            leftElCurrent?.style?.removeProperty('width');
+            rightElCurrent?.style?.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);
+        wrapperRef.current?.style.setProperty('user-select', 'none');
+        leftElRef.current?.classList.add(exports.IN_RESIZE_CLASSNAME);
+        rightElRef.current?.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');
+        wrapperRef.current?.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);
-        onEndMove === null || onEndMove === void 0 ? void 0 : onEndMove(rightElRef.current, leftElRef.current);
+        rightElRef.current?.classList.remove(exports.IN_RESIZE_CLASSNAME);
+        leftElRef.current?.classList.remove(exports.IN_RESIZE_CLASSNAME);
+        onEndMove?.(rightElRef.current, leftElRef.current);
     }, [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') })));
+    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') }) }));
 };
 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));
+        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 });
 };
 exports.HorizontalDrag = HorizontalDragWrapper;
+//# sourceMappingURL=HorizontalDrag.js.map

package/build/cjs/bundle/HorizontalDrag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalDrag.js","sourceRoot":"../../../src","sources":["bundle/HorizontalDrag.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useCallback, useEffect, useRef, useState} from 'react';\n\nimport {clamp} from '../lodash';\n\nimport {EditorInt} from './Editor';\nimport {cnEditorComponent} from './MarkdownEditorView';\n\nexport const IN_RESIZE_CLASSNAME = 'in-resize';\n\ntype UseDragHandlersParams = {\n    onStart: () => void;\n    onMove: (delta: number) => void;\n    onEnd: (delta: number) => void;\n};\n\nconst useColResize = ({onStart, onMove, onEnd}: UseDragHandlersParams) => {\n    const initialXPosition = useRef(0);\n    const currentXPosition = useRef(0);\n\n    const handleMove = useCallback(\n        (e: MouseEvent | TouchEvent) => {\n            const currentX = 'touches' in e ? e.touches[0]?.clientX ?? 0 : e.clientX;\n\n            if (currentXPosition.current === currentX) {\n                return;\n            }\n\n            currentXPosition.current = currentX;\n            const delta = initialXPosition.current - currentX;\n\n            onMove(delta);\n        },\n        [onMove],\n    );\n\n    const handleDragEnd = useCallback(\n        (e: MouseEvent | TouchEvent) => {\n            window.removeEventListener('mousemove', handleMove);\n            window.removeEventListener('touchmove', handleMove);\n\n            document.body.style.removeProperty('user-select');\n\n            const currentX = 'touches' in e ? e.touches[0]?.clientX ?? 0 : e.clientX;\n            const delta = initialXPosition.current - currentX;\n\n            onEnd(delta);\n        },\n        [handleMove, onEnd],\n    );\n\n    const handleStart: React.EventHandler<React.MouseEvent | React.TouchEvent> = useCallback(\n        (e) => {\n            const currentX = 'touches' in e ? e.touches[0]?.clientX ?? 0 : e.clientX;\n            initialXPosition.current = currentX;\n            currentXPosition.current = currentX;\n\n            window.addEventListener('mouseup', handleDragEnd, {once: true});\n            window.addEventListener('touchend', handleDragEnd, {once: true});\n            window.addEventListener('touchcancel', handleDragEnd, {once: true});\n\n            window.addEventListener('mousemove', handleMove);\n            window.addEventListener('touchmove', handleMove);\n\n            document.body.style.setProperty('user-select', 'none');\n\n            onStart();\n        },\n        [handleDragEnd, handleMove, onStart],\n    );\n\n    return {\n        listeners: {\n            onMouseDown: handleStart,\n            onTouchStart: handleStart,\n        },\n    };\n};\n\nexport type HorizontalDragProps = {\n    leftElRef: React.RefObject<HTMLDivElement>;\n    rightElRef: React.RefObject<HTMLDivElement>;\n    wrapperRef: React.RefObject<HTMLDivElement>;\n    editor: EditorInt;\n    onEndMove?: (right: HTMLDivElement | null, left: HTMLDivElement | null) => any;\n};\n\nconst HorizontalDrag: React.FC<HorizontalDragProps> = ({\n    leftElRef,\n    rightElRef,\n    wrapperRef,\n    editor,\n    onEndMove,\n}) => {\n    const cm = editor.cm;\n\n    const [lCardWidth, lSetCardWidth] = useState((wrapperRef.current?.clientWidth ?? 0) / 2);\n    const [rCardWidth, rSetCardWidth] = useState((wrapperRef.current?.clientWidth ?? 0) / 2);\n\n    const updateWidth = useCallback(\n        (lNewWidth: number, rNewWidth: number) => {\n            leftElRef.current?.style?.setProperty('width', `${lNewWidth}px`);\n            rightElRef.current?.style?.setProperty('width', `${rNewWidth}px`);\n        },\n        [leftElRef, rightElRef],\n    );\n\n    const calculateWidth = useCallback(\n        (delta: number) => [\n            clamp(\n                lCardWidth - delta,\n                (wrapperRef.current?.clientWidth ?? 0) / 8,\n                ((wrapperRef.current?.clientWidth ?? 0) * 3) / 4,\n            ),\n            clamp(\n                rCardWidth + delta,\n                (wrapperRef.current?.clientWidth ?? 0) / 8,\n                ((wrapperRef.current?.clientWidth ?? 0) * 3) / 4,\n            ),\n        ],\n        [lCardWidth, rCardWidth, wrapperRef],\n    );\n\n    // Set initially calculated width\n    useEffect(() => {\n        updateWidth(lCardWidth, rCardWidth);\n        cm.requestMeasure();\n    }, []);\n\n    useEffect(() => {\n        const [leftElCurrent, rightElCurrent] = [leftElRef.current, rightElRef.current];\n\n        return () => {\n            leftElCurrent?.classList.remove(IN_RESIZE_CLASSNAME);\n            rightElCurrent?.classList.remove(IN_RESIZE_CLASSNAME);\n\n            leftElCurrent?.style?.removeProperty('width');\n            rightElCurrent?.style?.removeProperty('width');\n        };\n    }, [leftElRef, rightElRef]);\n\n    const onStart = useCallback(() => {\n        wrapperRef.current?.style.setProperty('user-select', 'none');\n\n        leftElRef.current?.classList.add(IN_RESIZE_CLASSNAME);\n        rightElRef.current?.classList.add(IN_RESIZE_CLASSNAME);\n    }, [leftElRef, rightElRef, wrapperRef]);\n\n    const onMove = useCallback(\n        (delta: number) => {\n            const [lNewWidth, rNewWidth] = calculateWidth(delta);\n            updateWidth(lNewWidth, rNewWidth);\n        },\n        [calculateWidth, lCardWidth, rCardWidth, updateWidth],\n    );\n\n    const onEnd = useCallback(\n        (delta: number) => {\n            const [lNewWidth, rNewWidth] = calculateWidth(delta);\n            lSetCardWidth(lNewWidth);\n            rSetCardWidth(rNewWidth);\n            updateWidth(lNewWidth, rNewWidth);\n\n            wrapperRef.current?.style.removeProperty('user-select');\n            cm.requestMeasure();\n\n            rightElRef.current?.classList.remove(IN_RESIZE_CLASSNAME);\n            leftElRef.current?.classList.remove(IN_RESIZE_CLASSNAME);\n\n            onEndMove?.(rightElRef.current, leftElRef.current);\n        },\n        [calculateWidth, cm, leftElRef, rightElRef, updateWidth, wrapperRef],\n    );\n\n    const {listeners} = useColResize({onStart, onMove, onEnd});\n\n    return (\n        <div className={cnEditorComponent('resizer', {horizontal: true})} {...listeners}>\n            <div className={cnEditorComponent('gutter')} />\n        </div>\n    );\n};\n\nconst HorizontalDragWrapper: React.FC<HorizontalDragProps & {isMounted: boolean}> = (props) => {\n    // If component calling HorizontalDrag is not mounted, then most likely wrapperRef will be null\n    if (!props.isMounted)\n        return (\n            <div className={cnEditorComponent('resizer', {horizontal: true})}>\n                <div className={cnEditorComponent('gutter')} />\n            </div>\n        );\n    return <HorizontalDrag {...props} />;\n};\n\nexport {HorizontalDragWrapper as HorizontalDrag};\n"]}

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

@@ -1,11 +1,11 @@
-import React from 'react';
-import type { ToasterPublicMethods } from '@gravity-ui/uikit';
-import { ClassNameProps } from '../classname';
-import type { ToolbarsPreset } from '../modules/toolbars/types';
-import type { Editor } from './Editor';
-import type { MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData } from './toolbar/types';
+import { ClassNameProps } from "../classname.js";
+import type { ToolbarsPreset } from "../modules/toolbars/types.js";
+import type { Editor } from "./Editor.js";
+import type { MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData } from "./toolbar/types.js";
+import "../styles/styles.css";
+import "./MarkdownEditorView.css";
 export declare const cnEditorComponent: import("@bem-react/classname").ClassNameFormatter;
-export declare type MarkdownEditorViewProps = ClassNameProps & {
+export type MarkdownEditorViewProps = ClassNameProps & {
     editor?: Editor;
     autofocus?: boolean;
     toolbarsPreset?: ToolbarsPreset;
@@ -27,35 +27,33 @@ export declare type MarkdownEditorViewProps = ClassNameProps & {
     wysiwygHiddenActionsConfig?: WToolbarItemData[];
     /** @default true */
     settingsVisible?: boolean;
-    toaster: ToasterPublicMethods;
     stickyToolbar: boolean;
     enableSubmitInPreview?: boolean;
     hidePreviewAfterSubmit?: boolean;
 };
-export declare const MarkdownEditorView: React.ForwardRefExoticComponent<ClassNameProps & {
-    editor?: Editor | undefined;
-    autofocus?: boolean | undefined;
-    toolbarsPreset?: ToolbarsPreset | undefined;
+export declare const MarkdownEditorView: import("react").ForwardRefExoticComponent<ClassNameProps & {
+    editor?: Editor;
+    autofocus?: boolean;
+    toolbarsPreset?: ToolbarsPreset;
     /**
      * @deprecated use `toolbarsPreset` instead
      */
-    markupToolbarConfig?: MToolbarData | undefined;
+    markupToolbarConfig?: MToolbarData;
     /**
      * @deprecated use `toolbarsPreset` instead
      */
-    wysiwygToolbarConfig?: WToolbarData | undefined;
+    wysiwygToolbarConfig?: WToolbarData;
     /**
      * @deprecated use `toolbarsPreset` instead
      */
-    markupHiddenActionsConfig?: MToolbarItemData[] | undefined;
+    markupHiddenActionsConfig?: MToolbarItemData[];
     /**
      * @deprecated use `toolbarsPreset` instead
      */
-    wysiwygHiddenActionsConfig?: WToolbarItemData[] | undefined;
+    wysiwygHiddenActionsConfig?: WToolbarItemData[];
     /** @default true */
-    settingsVisible?: boolean | undefined;
-    toaster: ToasterPublicMethods;
+    settingsVisible?: boolean;
     stickyToolbar: boolean;
-    enableSubmitInPreview?: boolean | undefined;
-    hidePreviewAfterSubmit?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+    enableSubmitInPreview?: boolean;
+    hidePreviewAfterSubmit?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/build/cjs/bundle/MarkdownEditorView.js

@@ -1,28 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownEditorView = exports.cnEditorComponent = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const uikit_1 = require("@gravity-ui/uikit");
 const react_error_boundary_1 = require("react-error-boundary");
 const react_use_1 = require("react-use");
-const classname_1 = require("../classname");
-const bundle_1 = require("../i18n/bundle");
-const logger_1 = require("../logger");
-const react_utils_1 = require("../react-utils");
-const utils_1 = require("../utils");
-const HorizontalDrag_1 = require("./HorizontalDrag");
-const MarkupEditorView_1 = require("./MarkupEditorView");
-const SplitModeView_1 = require("./SplitModeView");
-const WysiwygEditorView_1 = require("./WysiwygEditorView");
-const context_1 = require("./context");
-const settings_1 = require("./settings");
-const sticky_1 = require("./sticky");
-const toolbarsConfigs_1 = require("./toolbar/utils/toolbarsConfigs");
-// eslint-disable-line import/order
+const classname_1 = require("../classname.js");
+const bundle_1 = require("../i18n/bundle/index.js");
+const logger_1 = require("../logger.js");
+const react_utils_1 = require("../react-utils/index.js");
+const utils_1 = require("../utils/index.js");
+const HorizontalDrag_1 = require("./HorizontalDrag.js");
+const MarkupEditorView_1 = require("./MarkupEditorView.js");
+const SplitModeView_1 = require("./SplitModeView.js");
+const WysiwygEditorView_1 = require("./WysiwygEditorView.js");
+const context_1 = require("./context.js");
+const settings_1 = require("./settings/index.js");
+const sticky_1 = require("./sticky/index.js");
+const toolbarsConfigs_1 = require("./toolbar/utils/toolbarsConfigs.js");
+require("../styles/styles.css");
+require("./MarkdownEditorView.css"); // eslint-disable-line import/order
 exports.cnEditorComponent = (0, classname_1.cn)('editor-component');
 const b = exports.cnEditorComponent;
-exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
-    var _a, _b;
+exports.MarkdownEditorView = (0, react_1.forwardRef)((props, ref) => {
     const divRef = (0, react_use_1.useEnsuredForwardedRef)(ref);
     const [isMounted, setIsMounted] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -30,10 +31,10 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
     }, []);
     const [showPreview, , unsetShowPreview, toggleShowPreview] = (0, react_utils_1.useBooleanState)(false);
     const context = (0, context_1.useMarkdownEditorContext)();
-    const editor = ((_a = props.editor) !== null && _a !== void 0 ? _a : context);
+    const editor = (props.editor ?? context);
     if (!editor)
         throw new Error('[MarkdownEditorView]: an instance of the editor must be passed through the props or context');
-    const { autofocus, className, settingsVisible = true, toolbarsPreset, toaster, stickyToolbar, wysiwygToolbarConfig: initialWysiwygToolbarConfig, markupToolbarConfig: initialMarkupToolbarConfig, wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig, markupHiddenActionsConfig: initialMarkupHiddenActionsConfig, enableSubmitInPreview = true, hidePreviewAfterSubmit = false, } = props;
+    const { autofocus, className, settingsVisible = true, toolbarsPreset, stickyToolbar, wysiwygToolbarConfig: initialWysiwygToolbarConfig, markupToolbarConfig: initialMarkupToolbarConfig, wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig, markupHiddenActionsConfig: initialMarkupHiddenActionsConfig, enableSubmitInPreview = true, hidePreviewAfterSubmit = false, } = props;
     const { wysiwygToolbarConfig, markupToolbarConfig, wysiwygHiddenActionsConfig, markupHiddenActionsConfig, } = (0, react_1.useMemo)(() => (0, toolbarsConfigs_1.getToolbarsConfigs)({
         toolbarsPreset,
         props: {
@@ -52,24 +53,24 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
         editor.preset,
     ]);
     const rerender = (0, react_use_1.useUpdate)();
-    react_1.default.useLayoutEffect(() => {
+    (0, react_1.useLayoutEffect)(() => {
         editor.on('rerender', rerender);
         return () => {
             editor.off('rerender', rerender);
         };
     }, [editor, rerender]);
-    const onModeChange = react_1.default.useCallback((type) => {
+    const onModeChange = (0, react_1.useCallback)((type) => {
         editor.changeEditorMode({ mode: type, reason: 'settings' });
         unsetShowPreview();
     }, [editor, unsetShowPreview]);
-    const onToolbarVisibilityChange = react_1.default.useCallback((visible) => {
+    const onToolbarVisibilityChange = (0, react_1.useCallback)((visible) => {
         editor.changeToolbarVisibility({ visible });
     }, [editor]);
-    const onSplitModeChange = react_1.default.useCallback((splitModeEnabled) => {
+    const onSplitModeChange = (0, react_1.useCallback)((splitModeEnabled) => {
         unsetShowPreview();
         editor.changeSplitModeEnabled({ splitModeEnabled });
     }, [editor, unsetShowPreview]);
-    const onShowPreviewChange = react_1.default.useCallback((showPreviewValue) => {
+    const onShowPreviewChange = (0, react_1.useCallback)((showPreviewValue) => {
         editor.changeSplitModeEnabled({ splitModeEnabled: false });
         if (showPreviewValue !== showPreview)
             toggleShowPreview();
@@ -97,7 +98,7 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
             onShowPreviewChange(false);
         }
     }, { event: 'keydown' }, [hidePreviewAfterSubmit, enableSubmitInPreview, showPreview, showPreview]);
-    const settings = (0, react_1.useMemo)(() => (react_1.default.createElement(Settings, { mode: editorMode, settingsVisible: settingsVisible, onModeChange: onModeChange, toolbarVisibility: editor.toolbarVisible && !showPreview, onToolbarVisibilityChange: onToolbarVisibilityChange, onSplitModeChange: onSplitModeChange, splitModeEnabled: editor.splitModeEnabled, splitMode: editor.splitMode, stickyToolbar: stickyToolbar, onShowPreviewChange: onShowPreviewChange, showPreview: showPreview, renderPreviewButton: canRenderPreview })), [
+    const settings = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(Settings, { mode: editorMode, settingsVisible: settingsVisible, onModeChange: onModeChange, toolbarVisibility: editor.toolbarVisible && !showPreview, onToolbarVisibilityChange: onToolbarVisibilityChange, onSplitModeChange: onSplitModeChange, splitModeEnabled: editor.splitModeEnabled, splitMode: editor.splitMode, stickyToolbar: stickyToolbar, onShowPreviewChange: onShowPreviewChange, showPreview: showPreview, renderPreviewButton: canRenderPreview })), [
         editorMode,
         settingsVisible,
         editor.toolbarVisible,
@@ -111,7 +112,8 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
         onShowPreviewChange,
         canRenderPreview,
     ]);
-    return (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { onError: (e) => {
+    const toaster = (0, uikit_1.useToaster)();
+    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { onError: (e) => {
             logger_1.logger.error(e);
         }, fallbackRender: ({ error, resetErrorBoundary }) => {
             toaster.add({
@@ -129,39 +131,25 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
                 });
             });
             return null;
-        } },
-        react_1.default.createElement(react_utils_1.ToasterContext.Provider, { value: toaster },
-            react_1.default.createElement("div", { ref: divRef, className: b({
-                    settings: settingsVisible,
-                    split: markupSplitMode && editor.splitMode,
-                }, [className]), role: "button", tabIndex: 0 },
-                react_1.default.createElement("div", { className: b('editor-wrapper'), ref: editorWrapperRef }, showPreview ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("div", { className: b('preview-wrapper') }, (_b = editor.renderPreview) === null || _b === void 0 ? void 0 : _b.call(editor, {
-                        getValue: editor.getValue,
-                        mode: 'preview',
-                        md: editor.mdOptions,
-                        directiveSyntax: editor.directiveSyntax,
-                    })),
-                    settings)) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    editorMode === 'wysiwyg' && (react_1.default.createElement(WysiwygEditorView_1.WysiwygEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: wysiwygToolbarConfig, toolbarVisible: editor.toolbarVisible, hiddenActionsConfig: wysiwygHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar }, editor.toolbarVisible && settingsVisible && settings)),
-                    editorMode === 'markup' && (react_1.default.createElement(MarkupEditorView_1.MarkupEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: markupToolbarConfig, toolbarVisible: editor.toolbarVisible, splitMode: editor.splitMode, splitModeEnabled: editor.splitModeEnabled, hiddenActionsConfig: markupHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar }, editor.toolbarVisible && settings)),
-                    !editor.toolbarVisible && settings))),
-                markupSplitMode && (react_1.default.createElement(react_1.default.Fragment, null,
-                    editor.splitMode === 'horizontal' ? (react_1.default.createElement(HorizontalDrag_1.HorizontalDrag, { editor: editor, isMounted: isMounted, leftElRef: editorWrapperRef, rightElRef: splitModeViewWrapperRef, wrapperRef: divRef })) : (react_1.default.createElement("div", { className: b('resizer') })),
-                    react_1.default.createElement(SplitModeView_1.SplitModeView, { editor: editor, ref: splitModeViewWrapperRef })))))));
+        }, children: (0, jsx_runtime_1.jsxs)("div", { ref: divRef, className: b({
+                settings: settingsVisible,
+                split: markupSplitMode && editor.splitMode,
+            }, [className]), role: "button", tabIndex: 0, children: [(0, jsx_runtime_1.jsx)("div", { className: b('editor-wrapper'), ref: editorWrapperRef, children: showPreview ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: b('preview-wrapper'), children: editor.renderPreview?.({
+                                    getValue: editor.getValue,
+                                    mode: 'preview',
+                                    md: editor.mdOptions,
+                                    directiveSyntax: editor.directiveSyntax,
+                                }) }), settings] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [editorMode === 'wysiwyg' && ((0, jsx_runtime_1.jsx)(WysiwygEditorView_1.WysiwygEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: wysiwygToolbarConfig, toolbarVisible: editor.toolbarVisible, hiddenActionsConfig: wysiwygHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar, children: editor.toolbarVisible && settingsVisible && settings })), editorMode === 'markup' && ((0, jsx_runtime_1.jsx)(MarkupEditorView_1.MarkupEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: markupToolbarConfig, toolbarVisible: editor.toolbarVisible, splitMode: editor.splitMode, splitModeEnabled: editor.splitModeEnabled, hiddenActionsConfig: markupHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar, children: editor.toolbarVisible && settings })), !editor.toolbarVisible && settings] })) }), markupSplitMode && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [editor.splitMode === 'horizontal' ? ((0, jsx_runtime_1.jsx)(HorizontalDrag_1.HorizontalDrag, { editor: editor, isMounted: isMounted, leftElRef: editorWrapperRef, rightElRef: splitModeViewWrapperRef, wrapperRef: divRef })) : ((0, jsx_runtime_1.jsx)("div", { className: b('resizer') })), (0, jsx_runtime_1.jsx)(SplitModeView_1.SplitModeView, { editor: editor, ref: splitModeViewWrapperRef })] }))] }) }));
 });
 exports.MarkdownEditorView.displayName = 'MarkdownEditorView';
-const MarkupSearchAnchor = ({ mode }) => (react_1.default.createElement(react_1.default.Fragment, null, mode === 'markup' && react_1.default.createElement("div", { className: "g-md-search-anchor" })));
+const MarkupSearchAnchor = ({ mode }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: mode === 'markup' && (0, jsx_runtime_1.jsx)("div", { className: "g-md-search-anchor" }) }));
 function Settings(props) {
     const wrapperRef = (0, react_1.useRef)(null);
     const isSticky = (0, react_utils_1.useSticky)(wrapperRef) && props.toolbarVisibility && props.stickyToolbar;
-    return (react_1.default.createElement(react_1.default.Fragment, null, (props.renderPreviewButton || props.settingsVisible) && (react_1.default.createElement("div", { className: b('settings-wrapper') },
-        react_1.default.createElement("div", { ref: wrapperRef, className: sticky_1.stickyCn.settings({
-                withToolbar: props.toolbarVisibility,
-                stickyActive: isSticky,
-            }) },
-            react_1.default.createElement(settings_1.EditorSettings, Object.assign({}, props)),
-            react_1.default.createElement(MarkupSearchAnchor, Object.assign({}, props)))))));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props.renderPreviewButton || props.settingsVisible) && ((0, jsx_runtime_1.jsx)("div", { className: b('settings-wrapper'), children: (0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, className: sticky_1.stickyCn.settings({
+                    withToolbar: props.toolbarVisibility,
+                    stickyActive: isSticky,
+                }), children: [(0, jsx_runtime_1.jsx)(settings_1.EditorSettings, { ...props }), (0, jsx_runtime_1.jsx)(MarkupSearchAnchor, { ...props })] }) })) }));
 }
 function isPreviewKeyDown(e) {
     const modKey = (0, utils_1.isMac)() ? e.metaKey : e.ctrlKey;
@@ -174,3 +162,4 @@ function isSubmitKeyDown(e) {
     const modKey = (0, utils_1.isMac)() ? e.metaKey : e.ctrlKey;
     return modKey && e.code === 'Enter';
 }
+//# sourceMappingURL=MarkdownEditorView.js.map

package/build/cjs/bundle/MarkdownEditorView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditorView.js","sourceRoot":"../../../src","sources":["bundle/MarkdownEditorView.tsx"],"names":[],"mappings":";;;;AAAA,iCAQe;AAEf,6CAA6C;AAC7C,+DAAmD;AACnD,yCAAoE;AAEpE,+CAAgD;AAChD,oDAAoC;AACpC,yCAAiC;AAEjC,yDAA0D;AAC1D,6CAA+B;AAG/B,wDAAgD;AAChD,4DAAoD;AACpD,sDAA8C;AAC9C,8DAAsD;AACtD,0CAAmD;AACnD,kDAAoE;AACpE,8CAAkC;AAElC,wEAAmE;AAGnE,gCAA+B;AAC/B,oCAAmC,CAAC,mCAAmC;AAE1D,QAAA,iBAAiB,GAAG,IAAA,cAAE,EAAC,kBAAkB,CAAC,CAAC;AACxD,MAAM,CAAC,GAAG,yBAAiB,CAAC;AA6Bf,QAAA,kBAAkB,GAAG,IAAA,kBAAU,EACxC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACX,MAAM,MAAM,GAAG,IAAA,kCAAsB,EAAC,GAA6C,CAAC,CAAC;IAErF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,WAAW,EAAE,AAAD,EAAG,gBAAgB,EAAE,iBAAiB,CAAC,GAAG,IAAA,6BAAe,EAAC,KAAK,CAAC,CAAC;IAEpF,MAAM,OAAO,GAAG,IAAA,kCAAwB,GAAE,CAAC;IAC3C,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,CAAc,CAAC;IACtD,IAAI,CAAC,MAAM;QACP,MAAM,IAAI,KAAK,CACX,6FAA6F,CAChG,CAAC;IAEN,MAAM,EACF,SAAS,EACT,SAAS,EACT,eAAe,GAAG,IAAI,EACtB,cAAc,EACd,aAAa,EACb,oBAAoB,EAAE,2BAA2B,EACjD,mBAAmB,EAAE,0BAA0B,EAC/C,0BAA0B,EAAE,iCAAiC,EAC7D,yBAAyB,EAAE,gCAAgC,EAC3D,qBAAqB,GAAG,IAAI,EAC5B,sBAAsB,GAAG,KAAK,GACjC,GAAG,KAAK,CAAC;IAEV,MAAM,EACF,oBAAoB,EACpB,mBAAmB,EACnB,0BAA0B,EAC1B,yBAAyB,GAC5B,GAAG,IAAA,eAAO,EACP,GAAG,EAAE,CACD,IAAA,oCAAkB,EAAC;QACf,cAAc;QACd,KAAK,EAAE;YACH,oBAAoB,EAAE,2BAA2B;YACjD,mBAAmB,EAAE,0BAA0B;YAC/C,0BAA0B,EAAE,iCAAiC;YAC7D,yBAAyB,EAAE,gCAAgC;SAC9D;QACD,MAAM,EAAE,MAAM,CAAC,MAAM;KACxB,CAAC,EACN;QACI,cAAc;QACd,2BAA2B;QAC3B,0BAA0B;QAC1B,iCAAiC;QACjC,gCAAgC;QAChC,MAAM,CAAC,MAAM;KAChB,CACJ,CAAC;IAEF,MAAM,QAAQ,GAAG,IAAA,qBAAS,GAAE,CAAC;IAC7B,IAAA,uBAAe,EAAC,GAAG,EAAE;QACjB,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAChC,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC5B,CAAC,IAAwB,EAAE,EAAE;QACzB,MAAM,CAAC,gBAAgB,CAAC,EAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAC,CAAC,CAAC;QAC1D,gBAAgB,EAAE,CAAC;IACvB,CAAC,EACD,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAC7B,CAAC;IACF,MAAM,yBAAyB,GAAG,IAAA,mBAAW,EACzC,CAAC,OAAgB,EAAE,EAAE;QACjB,MAAM,CAAC,uBAAuB,CAAC,EAAC,OAAO,EAAC,CAAC,CAAC;IAC9C,CAAC,EACD,CAAC,MAAM,CAAC,CACX,CAAC;IACF,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACjC,CAAC,gBAAyB,EAAE,EAAE;QAC1B,gBAAgB,EAAE,CAAC;QACnB,MAAM,CAAC,sBAAsB,CAAC,EAAC,gBAAgB,EAAC,CAAC,CAAC;IACtD,CAAC,EACD,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAC7B,CAAC;IAEF,MAAM,mBAAmB,GAAG,IAAA,mBAAW,EACnC,CAAC,gBAAyB,EAAE,EAAE;QAC1B,MAAM,CAAC,sBAAsB,CAAC,EAAC,gBAAgB,EAAE,KAAK,EAAC,CAAC,CAAC;QACzD,IAAI,gBAAgB,KAAK,WAAW;YAAE,iBAAiB,EAAE,CAAC;IAC9D,CAAC,EACD,CAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,CAAC,CAC3C,CAAC;IAEF,MAAM,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;IACtC,MAAM,eAAe,GACjB,MAAM,CAAC,gBAAgB,IAAI,MAAM,CAAC,SAAS,IAAI,UAAU,KAAK,QAAQ,CAAC;IAC3E,MAAM,gBAAgB,GAAG,OAAO,CAC5B,MAAM,CAAC,aAAa,IAAI,UAAU,KAAK,QAAQ,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAC9E,CAAC;IAEF,IAAA,kBAAM,EACF,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,IAAI,gBAAgB,CAAC,CAAC,CAAC,EAC9C,CAAC,CAAC,EAAE,EAAE;QACF,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,mBAAmB,CAAC,CAAC,WAAW,CAAC,CAAC;IACtC,CAAC,EACD,EAAC,KAAK,EAAE,SAAS,EAAC,EAClB,CAAC,WAAW,EAAE,UAAU,EAAE,mBAAmB,EAAE,gBAAgB,CAAC,CACnE,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IACtC,MAAM,uBAAuB,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAE7C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,WAAW,EAAE,CAAC;YACd,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAC3B,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IAE1B,IAAA,kBAAM,EACF,CAAC,CAAC,EAAE,EAAE,CACF,qBAAqB;QACrB,WAAW;QACX,gBAAgB,CAAC,MAAM,CAAC;QACxB,eAAe,CAAC,CAAC,CAAC,EACtB,GAAG,EAAE;QACD,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QAE5B,IAAI,sBAAsB,EAAE,CAAC;YACzB,mBAAmB,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC;IACL,CAAC,EACD,EAAC,KAAK,EAAE,SAAS,EAAC,EAClB,CAAC,sBAAsB,EAAE,qBAAqB,EAAE,WAAW,EAAE,WAAW,CAAC,CAC5E,CAAC;IAEF,MAAM,QAAQ,GAAG,IAAA,eAAO,EACpB,GAAG,EAAE,CAAC,CACF,uBAAC,QAAQ,IACL,IAAI,EAAE,UAAU,EAChB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,iBAAiB,EAAE,MAAM,CAAC,cAAc,IAAI,CAAC,WAAW,EACxD,yBAAyB,EAAE,yBAAyB,EACpD,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,MAAM,CAAC,gBAAgB,EACzC,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,gBAAgB,GACvC,CACL,EACD;QACI,UAAU;QACV,eAAe;QACf,MAAM,CAAC,cAAc;QACrB,MAAM,CAAC,gBAAgB;QACvB,MAAM,CAAC,SAAS;QAChB,YAAY;QACZ,WAAW;QACX,yBAAyB;QACzB,iBAAiB;QACjB,aAAa;QACb,mBAAmB;QACnB,gBAAgB;KACnB,CACJ,CAAC;IAEF,MAAM,OAAO,GAAG,IAAA,kBAAU,GAAE,CAAC;IAE7B,OAAO,CACH,uBAAC,oCAAa,IACV,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACX,eAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACpB,CAAC,EACD,cAAc,EAAE,CAAC,EAAC,KAAK,EAAE,kBAAkB,EAAC,EAAE,EAAE;YAC5C,OAAO,CAAC,GAAG,CAAC;gBACR,KAAK,EAAE,QAAQ;gBACf,IAAI,EAAE,mBAAmB;gBACzB,KAAK,EAAE,IAAA,aAAI,EAAC,aAAa,CAAC;gBAC1B,OAAO,EAAE,KAAK,CAAC,OAAO;aACzB,CAAC,CAAC;YACH,UAAU,CAAC,GAAG,EAAE;gBACZ,kBAAkB,EAAE,CAAC;gBACrB,MAAM,CAAC,gBAAgB,CAAC;oBACpB,IAAI,EAAE,QAAQ;oBACd,MAAM,EAAE,gBAAgB;oBACxB,IAAI,EAAE,KAAK;iBACd,CAAC,CAAC;YACP,CAAC,CAAC,CAAC;YACH,OAAO,IAAI,CAAC;QAChB,CAAC,YAED,iCACI,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,CAAC,CACR;gBACI,QAAQ,EAAE,eAAe;gBACzB,KAAK,EAAE,eAAe,IAAI,MAAM,CAAC,SAAS;aAC7C,EACD,CAAC,SAAS,CAAC,CACd,EACD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,aAEX,gCAAK,SAAS,EAAE,CAAC,CAAC,gBAAgB,CAAC,EAAE,GAAG,EAAE,gBAAgB,YACrD,WAAW,CAAC,CAAC,CAAC,CACX,6DACI,gCAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,YAC/B,MAAM,CAAC,aAAa,EAAE,CAAC;oCACpB,QAAQ,EAAE,MAAM,CAAC,QAAQ;oCACzB,IAAI,EAAE,SAAS;oCACf,EAAE,EAAE,MAAM,CAAC,SAAS;oCACpB,eAAe,EAAE,MAAM,CAAC,eAAe;iCAC1C,CAAC,GACA,EACL,QAAQ,IACV,CACN,CAAC,CAAC,CAAC,CACA,6DACK,UAAU,KAAK,SAAS,IAAI,CACzB,uBAAC,qCAAiB,IACd,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,oBAAoB,EACnC,cAAc,EAAE,MAAM,CAAC,cAAc,EACrC,mBAAmB,EAAE,0BAA0B,EAC/C,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,IAAI,EAAE,UAAU,EAAC,CAAC,EAC1C,gBAAgB,EAAE,CAAC,CAAC,SAAS,CAAC,EAC9B,aAAa,EAAE,aAAa,YAE3B,MAAM,CAAC,cAAc,IAAI,eAAe,IAAI,QAAQ,GACrC,CACvB,EACA,UAAU,KAAK,QAAQ,IAAI,CACxB,uBAAC,mCAAgB,IACb,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,mBAAmB,EAClC,cAAc,EAAE,MAAM,CAAC,cAAc,EACrC,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,gBAAgB,EAAE,MAAM,CAAC,gBAAgB,EACzC,mBAAmB,EAAE,yBAAyB,EAC9C,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,IAAI,EAAE,UAAU,EAAC,CAAC,EAC1C,gBAAgB,EAAE,CAAC,CAAC,SAAS,CAAC,EAC9B,aAAa,EAAE,aAAa,YAE3B,MAAM,CAAC,cAAc,IAAI,QAAQ,GACnB,CACtB,EACA,CAAC,MAAM,CAAC,cAAc,IAAI,QAAQ,IACpC,CACN,GACC,EAEL,eAAe,IAAI,CAChB,6DACK,MAAM,CAAC,SAAS,KAAK,YAAY,CAAC,CAAC,CAAC,CACjC,uBAAC,+BAAc,IACX,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,gBAAgB,EAC3B,UAAU,EAAE,uBAAuB,EACnC,UAAU,EAAE,MAAM,GACpB,CACL,CAAC,CAAC,CAAC,CACA,gCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GAAI,CACnC,EACD,uBAAC,6BAAa,IAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,uBAAuB,GAAI,IAChE,CACN,IACC,GACM,CACnB,CAAC;AACN,CAAC,CACJ,CAAC;AACF,0BAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAItD,MAAM,kBAAkB,GAAsC,CAAC,EAAC,IAAI,EAAC,EAAE,EAAE,CAAC,CACtE,2DAAG,IAAI,KAAK,QAAQ,IAAI,gCAAK,SAAS,EAAC,oBAAoB,GAAO,GAAI,CACzE,CAAC;AAEF,SAAS,QAAQ,CAAC,KAAqD;IACnE,MAAM,UAAU,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,IAAA,uBAAS,EAAC,UAAU,CAAC,IAAI,KAAK,CAAC,iBAAiB,IAAI,KAAK,CAAC,aAAa,CAAC;IAEzF,OAAO,CACH,2DACK,CAAC,KAAK,CAAC,mBAAmB,IAAI,KAAK,CAAC,eAAe,CAAC,IAAI,CACrD,gCAAK,SAAS,EAAE,CAAC,CAAC,kBAAkB,CAAC,YACjC,iCACI,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,iBAAQ,CAAC,QAAQ,CAAC;oBACzB,WAAW,EAAE,KAAK,CAAC,iBAAiB;oBACpC,YAAY,EAAE,QAAQ;iBACzB,CAAC,aAEF,uBAAC,yBAAc,OAAK,KAAK,GAAI,EAC7B,uBAAC,kBAAkB,OAAK,KAAK,GAAI,IAC/B,GACJ,CACT,GACF,CACN,CAAC;AACN,CAAC;AAED,SAAS,gBAAgB,CAAC,CAAgB;IACtC,MAAM,MAAM,GAAG,IAAA,aAAK,GAAE,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAC/C,OAAO,MAAM,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC;AACrD,CAAC;AAED,SAAS,gBAAgB,CAAC,MAAuC;IAC7D,OAAO,QAAQ,CAAC,aAAa,KAAK,MAAM,CAAC,OAAO,CAAC;AACrD,CAAC;AAED,SAAS,eAAe,CAAC,CAAgB;IACrC,MAAM,MAAM,GAAG,IAAA,aAAK,GAAE,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAC/C,OAAO,MAAM,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC;AACxC,CAAC","sourcesContent":["import {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\n\nimport {useToaster} from '@gravity-ui/uikit';\nimport {ErrorBoundary} from 'react-error-boundary';\nimport {useEnsuredForwardedRef, useKey, useUpdate} from 'react-use';\n\nimport {ClassNameProps, cn} from '../classname';\nimport {i18n} from '../i18n/bundle';\nimport {logger} from '../logger';\nimport type {ToolbarsPreset} from '../modules/toolbars/types';\nimport {useBooleanState, useSticky} from '../react-utils';\nimport {isMac} from '../utils';\n\nimport type {Editor, EditorInt} from './Editor';\nimport {HorizontalDrag} from './HorizontalDrag';\nimport {MarkupEditorView} from './MarkupEditorView';\nimport {SplitModeView} from './SplitModeView';\nimport {WysiwygEditorView} from './WysiwygEditorView';\nimport {useMarkdownEditorContext} from './context';\nimport {EditorSettings, type EditorSettingsProps} from './settings';\nimport {stickyCn} from './sticky';\nimport type {MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData} from './toolbar/types';\nimport {getToolbarsConfigs} from './toolbar/utils/toolbarsConfigs';\nimport type {MarkdownEditorMode} from './types';\n\nimport '../styles/styles.scss';\nimport './MarkdownEditorView.scss'; // eslint-disable-line import/order\n\nexport const cnEditorComponent = cn('editor-component');\nconst b = cnEditorComponent;\n\nexport type MarkdownEditorViewProps = ClassNameProps & {\n    editor?: Editor;\n    autofocus?: boolean;\n    toolbarsPreset?: ToolbarsPreset;\n    /**\n     * @deprecated use `toolbarsPreset` instead\n     */\n    markupToolbarConfig?: MToolbarData;\n    /**\n     * @deprecated use `toolbarsPreset` instead\n     */\n    wysiwygToolbarConfig?: WToolbarData;\n    /**\n     * @deprecated use `toolbarsPreset` instead\n     */\n    markupHiddenActionsConfig?: MToolbarItemData[];\n    /**\n     * @deprecated use `toolbarsPreset` instead\n     */\n    wysiwygHiddenActionsConfig?: WToolbarItemData[];\n    /** @default true */\n    settingsVisible?: boolean;\n    stickyToolbar: boolean;\n    enableSubmitInPreview?: boolean;\n    hidePreviewAfterSubmit?: boolean;\n};\n\nexport const MarkdownEditorView = forwardRef<HTMLDivElement, MarkdownEditorViewProps>(\n    (props, ref) => {\n        const divRef = useEnsuredForwardedRef(ref as React.MutableRefObject<HTMLDivElement>);\n\n        const [isMounted, setIsMounted] = useState(false);\n        useEffect(() => {\n            setIsMounted(true);\n        }, []);\n\n        const [showPreview, , unsetShowPreview, toggleShowPreview] = useBooleanState(false);\n\n        const context = useMarkdownEditorContext();\n        const editor = (props.editor ?? context) as EditorInt;\n        if (!editor)\n            throw new Error(\n                '[MarkdownEditorView]: an instance of the editor must be passed through the props or context',\n            );\n\n        const {\n            autofocus,\n            className,\n            settingsVisible = true,\n            toolbarsPreset,\n            stickyToolbar,\n            wysiwygToolbarConfig: initialWysiwygToolbarConfig,\n            markupToolbarConfig: initialMarkupToolbarConfig,\n            wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig,\n            markupHiddenActionsConfig: initialMarkupHiddenActionsConfig,\n            enableSubmitInPreview = true,\n            hidePreviewAfterSubmit = false,\n        } = props;\n\n        const {\n            wysiwygToolbarConfig,\n            markupToolbarConfig,\n            wysiwygHiddenActionsConfig,\n            markupHiddenActionsConfig,\n        } = useMemo(\n            () =>\n                getToolbarsConfigs({\n                    toolbarsPreset,\n                    props: {\n                        wysiwygToolbarConfig: initialWysiwygToolbarConfig,\n                        markupToolbarConfig: initialMarkupToolbarConfig,\n                        wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig,\n                        markupHiddenActionsConfig: initialMarkupHiddenActionsConfig,\n                    },\n                    preset: editor.preset,\n                }),\n            [\n                toolbarsPreset,\n                initialWysiwygToolbarConfig,\n                initialMarkupToolbarConfig,\n                initialWysiwygHiddenActionsConfig,\n                initialMarkupHiddenActionsConfig,\n                editor.preset,\n            ],\n        );\n\n        const rerender = useUpdate();\n        useLayoutEffect(() => {\n            editor.on('rerender', rerender);\n            return () => {\n                editor.off('rerender', rerender);\n            };\n        }, [editor, rerender]);\n\n        const onModeChange = useCallback(\n            (type: MarkdownEditorMode) => {\n                editor.changeEditorMode({mode: type, reason: 'settings'});\n                unsetShowPreview();\n            },\n            [editor, unsetShowPreview],\n        );\n        const onToolbarVisibilityChange = useCallback(\n            (visible: boolean) => {\n                editor.changeToolbarVisibility({visible});\n            },\n            [editor],\n        );\n        const onSplitModeChange = useCallback(\n            (splitModeEnabled: boolean) => {\n                unsetShowPreview();\n                editor.changeSplitModeEnabled({splitModeEnabled});\n            },\n            [editor, unsetShowPreview],\n        );\n\n        const onShowPreviewChange = useCallback(\n            (showPreviewValue: boolean) => {\n                editor.changeSplitModeEnabled({splitModeEnabled: false});\n                if (showPreviewValue !== showPreview) toggleShowPreview();\n            },\n            [editor, showPreview, toggleShowPreview],\n        );\n\n        const editorMode = editor.currentMode;\n        const markupSplitMode =\n            editor.splitModeEnabled && editor.splitMode && editorMode === 'markup';\n        const canRenderPreview = Boolean(\n            editor.renderPreview && editorMode === 'markup' && !editor.splitModeEnabled,\n        );\n\n        useKey(\n            (e) => canRenderPreview && isPreviewKeyDown(e),\n            (e) => {\n                e.preventDefault();\n                onShowPreviewChange(!showPreview);\n            },\n            {event: 'keydown'},\n            [showPreview, editorMode, onShowPreviewChange, canRenderPreview],\n        );\n\n        const editorWrapperRef = useRef(null);\n        const splitModeViewWrapperRef = useRef(null);\n\n        useEffect(() => {\n            if (showPreview) {\n                divRef.current.focus();\n            }\n        }, [divRef, showPreview]);\n\n        useKey(\n            (e) =>\n                enableSubmitInPreview &&\n                showPreview &&\n                isWrapperFocused(divRef) &&\n                isSubmitKeyDown(e),\n            () => {\n                editor.emit('submit', null);\n\n                if (hidePreviewAfterSubmit) {\n                    onShowPreviewChange(false);\n                }\n            },\n            {event: 'keydown'},\n            [hidePreviewAfterSubmit, enableSubmitInPreview, showPreview, showPreview],\n        );\n\n        const settings = useMemo(\n            () => (\n                <Settings\n                    mode={editorMode}\n                    settingsVisible={settingsVisible}\n                    onModeChange={onModeChange}\n                    toolbarVisibility={editor.toolbarVisible && !showPreview}\n                    onToolbarVisibilityChange={onToolbarVisibilityChange}\n                    onSplitModeChange={onSplitModeChange}\n                    splitModeEnabled={editor.splitModeEnabled}\n                    splitMode={editor.splitMode}\n                    stickyToolbar={stickyToolbar}\n                    onShowPreviewChange={onShowPreviewChange}\n                    showPreview={showPreview}\n                    renderPreviewButton={canRenderPreview}\n                />\n            ),\n            [\n                editorMode,\n                settingsVisible,\n                editor.toolbarVisible,\n                editor.splitModeEnabled,\n                editor.splitMode,\n                onModeChange,\n                showPreview,\n                onToolbarVisibilityChange,\n                onSplitModeChange,\n                stickyToolbar,\n                onShowPreviewChange,\n                canRenderPreview,\n            ],\n        );\n\n        const toaster = useToaster();\n\n        return (\n            <ErrorBoundary\n                onError={(e) => {\n                    logger.error(e);\n                }}\n                fallbackRender={({error, resetErrorBoundary}) => {\n                    toaster.add({\n                        theme: 'danger',\n                        name: 'g-md-editor-error',\n                        title: i18n('error-title'),\n                        content: error.message,\n                    });\n                    setTimeout(() => {\n                        resetErrorBoundary();\n                        editor.changeEditorMode({\n                            mode: 'markup',\n                            reason: 'error-boundary',\n                            emit: false,\n                        });\n                    });\n                    return null;\n                }}\n            >\n                <div\n                    ref={divRef}\n                    className={b(\n                        {\n                            settings: settingsVisible,\n                            split: markupSplitMode && editor.splitMode,\n                        },\n                        [className],\n                    )}\n                    role=\"button\"\n                    tabIndex={0}\n                >\n                    <div className={b('editor-wrapper')} ref={editorWrapperRef}>\n                        {showPreview ? (\n                            <>\n                                <div className={b('preview-wrapper')}>\n                                    {editor.renderPreview?.({\n                                        getValue: editor.getValue,\n                                        mode: 'preview',\n                                        md: editor.mdOptions,\n                                        directiveSyntax: editor.directiveSyntax,\n                                    })}\n                                </div>\n                                {settings}\n                            </>\n                        ) : (\n                            <>\n                                {editorMode === 'wysiwyg' && (\n                                    <WysiwygEditorView\n                                        editor={editor}\n                                        autofocus={autofocus}\n                                        settingsVisible={settingsVisible}\n                                        toolbarConfig={wysiwygToolbarConfig}\n                                        toolbarVisible={editor.toolbarVisible}\n                                        hiddenActionsConfig={wysiwygHiddenActionsConfig}\n                                        className={b('editor', {mode: editorMode})}\n                                        toolbarClassName={b('toolbar')}\n                                        stickyToolbar={stickyToolbar}\n                                    >\n                                        {editor.toolbarVisible && settingsVisible && settings}\n                                    </WysiwygEditorView>\n                                )}\n                                {editorMode === 'markup' && (\n                                    <MarkupEditorView\n                                        editor={editor}\n                                        autofocus={autofocus}\n                                        settingsVisible={settingsVisible}\n                                        toolbarConfig={markupToolbarConfig}\n                                        toolbarVisible={editor.toolbarVisible}\n                                        splitMode={editor.splitMode}\n                                        splitModeEnabled={editor.splitModeEnabled}\n                                        hiddenActionsConfig={markupHiddenActionsConfig}\n                                        className={b('editor', {mode: editorMode})}\n                                        toolbarClassName={b('toolbar')}\n                                        stickyToolbar={stickyToolbar}\n                                    >\n                                        {editor.toolbarVisible && settings}\n                                    </MarkupEditorView>\n                                )}\n                                {!editor.toolbarVisible && settings}\n                            </>\n                        )}\n                    </div>\n\n                    {markupSplitMode && (\n                        <>\n                            {editor.splitMode === 'horizontal' ? (\n                                <HorizontalDrag\n                                    editor={editor}\n                                    isMounted={isMounted}\n                                    leftElRef={editorWrapperRef}\n                                    rightElRef={splitModeViewWrapperRef}\n                                    wrapperRef={divRef}\n                                />\n                            ) : (\n                                <div className={b('resizer')} />\n                            )}\n                            <SplitModeView editor={editor} ref={splitModeViewWrapperRef} />\n                        </>\n                    )}\n                </div>\n            </ErrorBoundary>\n        );\n    },\n);\nMarkdownEditorView.displayName = 'MarkdownEditorView';\n\ninterface MarkupSearchAnchorProps extends Pick<EditorSettingsProps, 'mode'> {}\n\nconst MarkupSearchAnchor: React.FC<MarkupSearchAnchorProps> = ({mode}) => (\n    <>{mode === 'markup' && <div className=\"g-md-search-anchor\"></div>}</>\n);\n\nfunction Settings(props: EditorSettingsProps & {stickyToolbar: boolean}) {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const isSticky = useSticky(wrapperRef) && props.toolbarVisibility && props.stickyToolbar;\n\n    return (\n        <>\n            {(props.renderPreviewButton || props.settingsVisible) && (\n                <div className={b('settings-wrapper')}>\n                    <div\n                        ref={wrapperRef}\n                        className={stickyCn.settings({\n                            withToolbar: props.toolbarVisibility,\n                            stickyActive: isSticky,\n                        })}\n                    >\n                        <EditorSettings {...props} />\n                        <MarkupSearchAnchor {...props} />\n                    </div>\n                </div>\n            )}\n        </>\n    );\n}\n\nfunction isPreviewKeyDown(e: KeyboardEvent) {\n    const modKey = isMac() ? e.metaKey : e.ctrlKey;\n    return modKey && e.shiftKey && e.code === 'KeyP';\n}\n\nfunction isWrapperFocused(divRef: React.RefObject<HTMLDivElement>) {\n    return document.activeElement === divRef.current;\n}\n\nfunction isSubmitKeyDown(e: KeyboardEvent) {\n    const modKey = isMac() ? e.metaKey : e.ctrlKey;\n    return modKey && e.code === 'Enter';\n}\n"]}

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

@@ -1,6 +1,5 @@
-import React from 'react';
-import type { EditorInt } from './Editor';
-export declare type MarkupEditorComponentProps = {
+import type { EditorInt } from "./Editor.js";
+export type MarkupEditorComponentProps = {
     editor: EditorInt;
     autofocus?: boolean;
     className?: string;

package/build/cjs/bundle/MarkupEditorComponent.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkupEditorComponent = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const MarkupEditorComponent = function MarkupEditorComponent({ editor, autofocus, className, children }) {
-    const ref = react_1.default.useRef(null);
+    const ref = (0, react_1.useRef)(null);
     // insert editor to dom
-    react_1.default.useLayoutEffect(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const domElem = editor.markupEditor.cm.dom;
         if (ref.current) {
             ref.current.appendChild(domElem);
@@ -16,7 +16,7 @@ const MarkupEditorComponent = function MarkupEditorComponent({ editor, autofocus
         };
     }, [editor.markupEditor]);
     // update editor after connecting to dom
-    react_1.default.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         editor.markupEditor.cm.requestMeasure();
         if (autofocus) {
             editor.markupEditor.focus();
@@ -24,11 +24,12 @@ const MarkupEditorComponent = function MarkupEditorComponent({ editor, autofocus
     }, [editor.markupEditor]);
     return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    react_1.default.createElement("div", { ref: ref, className: className, onClick: (event) => {
+    (0, jsx_runtime_1.jsx)("div", { ref: ref, className: className, onClick: (event) => {
             const target = event.target;
             if (target instanceof Element && target.classList.contains('cm-editor')) {
                 editor.markupEditor.focus();
             }
-        } }, children));
+        }, children: children }));
 };
 exports.MarkupEditorComponent = MarkupEditorComponent;
+//# sourceMappingURL=MarkupEditorComponent.js.map

package/build/cjs/bundle/MarkupEditorComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkupEditorComponent.js","sourceRoot":"../../../src","sources":["bundle/MarkupEditorComponent.tsx"],"names":[],"mappings":";;;;AAAA,iCAAyD;AAWlD,MAAM,qBAAqB,GAC9B,SAAS,qBAAqB,CAAC,EAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAC;IACnE,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEzC,uBAAuB;IACvB,IAAA,uBAAe,EAAC,GAAG,EAAE;QACjB,MAAM,OAAO,GAAG,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC;QAC3C,IAAI,GAAG,CAAC,OAAO,EAAE,CAAC;YACd,GAAG,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,GAAG,EAAE;YACR,OAAO,CAAC,MAAM,EAAE,CAAC;QACrB,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1B,wCAAwC;IACxC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC;QACxC,IAAI,SAAS,EAAE,CAAC;YACZ,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAChC,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAE1B,OAAO;IACH,0GAA0G;IAC1G,gCACI,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACf,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;YAE5B,IAAI,MAAM,YAAY,OAAO,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC;gBACtE,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;YAChC,CAAC;QACL,CAAC,YAEA,QAAQ,GACP,CACT,CAAC;AACN,CAAC,CAAC;AAvCO,QAAA,qBAAqB,yBAuC5B","sourcesContent":["import {useEffect, useLayoutEffect, useRef} from 'react';\n\nimport type {EditorInt} from './Editor';\n\nexport type MarkupEditorComponentProps = {\n    editor: EditorInt;\n    autofocus?: boolean;\n    className?: string;\n    children?: React.ReactNode;\n};\n\nexport const MarkupEditorComponent: React.FC<MarkupEditorComponentProps> =\n    function MarkupEditorComponent({editor, autofocus, className, children}) {\n        const ref = useRef<HTMLDivElement>(null);\n\n        // insert editor to dom\n        useLayoutEffect(() => {\n            const domElem = editor.markupEditor.cm.dom;\n            if (ref.current) {\n                ref.current.appendChild(domElem);\n            }\n            return () => {\n                domElem.remove();\n            };\n        }, [editor.markupEditor]);\n\n        // update editor after connecting to dom\n        useEffect(() => {\n            editor.markupEditor.cm.requestMeasure();\n            if (autofocus) {\n                editor.markupEditor.focus();\n            }\n        }, [editor.markupEditor]);\n\n        return (\n            // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions\n            <div\n                ref={ref}\n                className={className}\n                onClick={(event) => {\n                    const target = event.target;\n\n                    if (target instanceof Element && target.classList.contains('cm-editor')) {\n                        editor.markupEditor.focus();\n                    }\n                }}\n            >\n                {children}\n            </div>\n        );\n    };\n"]}

package/build/cjs/bundle/MarkupEditorView.css

@@ -39,17 +39,17 @@
 .g-md-markup-editor ::selection,
 .g-md-markup-preview .CodeMirror-selected,
 .g-md-markup-preview ::selection {
-  background: rgba(0, 30, 98, 0.2);
+  background: rgba(0, 29.9617834395, 98, 0.2);
 }
 .g-md-markup-editor .CodeMirror,
 .g-md-markup-preview .CodeMirror {
   height: 100%;
   min-height: 100%;
   color: var(--g-color-text-primary);
-  font-family: var(--g-font-family-monospace);
+  font-family: var(--g-text-code-font-family);
+  font-weight: var(--g-text-code-font-weight);
   font-size: var(--g-text-code-2-font-size);
   line-height: var(--g-text-code-2-line-height);
-  font-weight: var(--g-text-code-font-weight);
 }
 .g-md-markup-editor .CodeMirror .CodeMirror-cursor,
 .g-md-markup-preview .CodeMirror .CodeMirror-cursor {

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

@@ -1,9 +1,9 @@
-import React from 'react';
-import { type ClassNameProps } from '../classname';
-import type { EditorInt } from './Editor';
-import type { MToolbarData, MToolbarItemData } from './toolbar/types';
-import type { MarkdownEditorSplitMode } from './types';
-export declare type MarkupEditorViewProps = ClassNameProps & {
+import { type ClassNameProps } from "../classname.js";
+import type { EditorInt } from "./Editor.js";
+import type { MToolbarData, MToolbarItemData } from "./toolbar/types.js";
+import type { MarkdownEditorSplitMode } from "./types.js";
+import "./MarkupEditorView.css";
+export type MarkupEditorViewProps = ClassNameProps & {
     editor: EditorInt;
     autofocus?: boolean;
     toolbarConfig: MToolbarData;
@@ -16,4 +16,4 @@ export declare type MarkupEditorViewProps = ClassNameProps & {
     hiddenActionsConfig?: MToolbarItemData[];
     children?: React.ReactNode;
 };
-export declare const MarkupEditorView: React.NamedExoticComponent<MarkupEditorViewProps>;
+export declare const MarkupEditorView: import("react").NamedExoticComponent<MarkupEditorViewProps>;