@gravity-ui/markdown-editor 14.12.1 → 14.12.2

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

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

package/build/cjs/bundle/MarkdownEditorView.js

@@ -1,29 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownEditorView = exports.cnEditorComponent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const uikit_1 = require("@gravity-ui/uikit");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const react_error_boundary_1 = require("react-error-boundary");
 const react_use_1 = require("react-use");
-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
+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
 exports.cnEditorComponent = (0, classname_1.cn)('editor-component');
 const b = exports.cnEditorComponent;
-exports.MarkdownEditorView = (0, react_1.forwardRef)((props, ref) => {
+exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
+    var _a, _b;
     const divRef = (0, react_use_1.useEnsuredForwardedRef)(ref);
     const [isMounted, setIsMounted] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -31,10 +30,10 @@ exports.MarkdownEditorView = (0, react_1.forwardRef)((props, ref) => {
     }, []);
     const [showPreview, , unsetShowPreview, toggleShowPreview] = (0, react_utils_1.useBooleanState)(false);
     const context = (0, context_1.useMarkdownEditorContext)();
-    const editor = (props.editor ?? context);
+    const editor = ((_a = props.editor) !== null && _a !== void 0 ? _a : 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, stickyToolbar, wysiwygToolbarConfig: initialWysiwygToolbarConfig, markupToolbarConfig: initialMarkupToolbarConfig, wysiwygHiddenActionsConfig: initialWysiwygHiddenActionsConfig, markupHiddenActionsConfig: initialMarkupHiddenActionsConfig, enableSubmitInPreview = true, hidePreviewAfterSubmit = false, } = props;
+    const { autofocus, className, settingsVisible = true, toolbarsPreset, toaster, 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: {
@@ -53,24 +52,24 @@ exports.MarkdownEditorView = (0, react_1.forwardRef)((props, ref) => {
         editor.preset,
     ]);
     const rerender = (0, react_use_1.useUpdate)();
-    (0, react_1.useLayoutEffect)(() => {
+    react_1.default.useLayoutEffect(() => {
         editor.on('rerender', rerender);
         return () => {
             editor.off('rerender', rerender);
         };
     }, [editor, rerender]);
-    const onModeChange = (0, react_1.useCallback)((type) => {
+    const onModeChange = react_1.default.useCallback((type) => {
         editor.changeEditorMode({ mode: type, reason: 'settings' });
         unsetShowPreview();
     }, [editor, unsetShowPreview]);
-    const onToolbarVisibilityChange = (0, react_1.useCallback)((visible) => {
+    const onToolbarVisibilityChange = react_1.default.useCallback((visible) => {
         editor.changeToolbarVisibility({ visible });
     }, [editor]);
-    const onSplitModeChange = (0, react_1.useCallback)((splitModeEnabled) => {
+    const onSplitModeChange = react_1.default.useCallback((splitModeEnabled) => {
         unsetShowPreview();
         editor.changeSplitModeEnabled({ splitModeEnabled });
     }, [editor, unsetShowPreview]);
-    const onShowPreviewChange = (0, react_1.useCallback)((showPreviewValue) => {
+    const onShowPreviewChange = react_1.default.useCallback((showPreviewValue) => {
         editor.changeSplitModeEnabled({ splitModeEnabled: false });
         if (showPreviewValue !== showPreview)
             toggleShowPreview();
@@ -98,7 +97,7 @@ exports.MarkdownEditorView = (0, react_1.forwardRef)((props, ref) => {
             onShowPreviewChange(false);
         }
     }, { event: 'keydown' }, [hidePreviewAfterSubmit, enableSubmitInPreview, showPreview, showPreview]);
-    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 })), [
+    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 })), [
         editorMode,
         settingsVisible,
         editor.toolbarVisible,
@@ -112,8 +111,7 @@ exports.MarkdownEditorView = (0, react_1.forwardRef)((props, ref) => {
         onShowPreviewChange,
         canRenderPreview,
     ]);
-    const toaster = (0, uikit_1.useToaster)();
-    return ((0, jsx_runtime_1.jsx)(react_error_boundary_1.ErrorBoundary, { onError: (e) => {
+    return (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { onError: (e) => {
             logger_1.logger.error(e);
         }, fallbackRender: ({ error, resetErrorBoundary }) => {
             toaster.add({
@@ -131,25 +129,39 @@ exports.MarkdownEditorView = (0, react_1.forwardRef)((props, ref) => {
                 });
             });
             return null;
-        }, 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 })] }))] }) }));
+        } },
+        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 })))))));
 });
 exports.MarkdownEditorView.displayName = 'MarkdownEditorView';
-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" }) }));
+const MarkupSearchAnchor = ({ mode }) => (react_1.default.createElement(react_1.default.Fragment, null, mode === 'markup' && react_1.default.createElement("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 ((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 })] }) })) }));
+    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)))))));
 }
 function isPreviewKeyDown(e) {
     const modKey = (0, utils_1.isMac)() ? e.metaKey : e.ctrlKey;
@@ -162,4 +174,3 @@ 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/MarkupEditorComponent.d.ts

@@ -1,5 +1,6 @@
-import type { EditorInt } from "./Editor.js";
-export type MarkupEditorComponentProps = {
+import React from 'react';
+import type { EditorInt } from './Editor';
+export declare 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 jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const MarkupEditorComponent = function MarkupEditorComponent({ editor, autofocus, className, children }) {
-    const ref = (0, react_1.useRef)(null);
+    const ref = react_1.default.useRef(null);
     // insert editor to dom
-    (0, react_1.useLayoutEffect)(() => {
+    react_1.default.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
-    (0, react_1.useEffect)(() => {
+    react_1.default.useEffect(() => {
         editor.markupEditor.cm.requestMeasure();
         if (autofocus) {
             editor.markupEditor.focus();
@@ -24,12 +24,11 @@ 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
-    (0, jsx_runtime_1.jsx)("div", { ref: ref, className: className, onClick: (event) => {
+    react_1.default.createElement("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/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, 29.9617834395, 98, 0.2);
+  background: rgba(0, 30, 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-text-code-font-family);
-  font-weight: var(--g-text-code-font-weight);
+  font-family: var(--g-font-family-monospace);
   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 { 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 & {
+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 & {
     editor: EditorInt;
     autofocus?: boolean;
     toolbarConfig: MToolbarData;
@@ -16,4 +16,4 @@ export type MarkupEditorViewProps = ClassNameProps & {
     hiddenActionsConfig?: MToolbarItemData[];
     children?: React.ReactNode;
 };
-export declare const MarkupEditorView: import("react").NamedExoticComponent<MarkupEditorViewProps>;
+export declare const MarkupEditorView: React.NamedExoticComponent<MarkupEditorViewProps>;

package/build/cjs/bundle/MarkupEditorView.js

@@ -1,18 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkupEditorView = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classname_1 = require("../classname.js");
-const extensions_1 = require("../extensions/index.js");
-const logger_1 = require("../logger.js");
-const hooks_1 = require("../react-utils/hooks.js");
-const MarkupEditorComponent_1 = require("./MarkupEditorComponent.js");
-const ToolbarView_1 = require("./ToolbarView.js");
-const context_1 = require("./toolbar/markup/context.js");
-require("./MarkupEditorView.css");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classname_1 = require("../classname");
+const extensions_1 = require("../extensions");
+const logger_1 = require("../logger");
+const hooks_1 = require("../react-utils/hooks");
+const MarkupEditorComponent_1 = require("./MarkupEditorComponent");
+const ToolbarView_1 = require("./ToolbarView");
+const context_1 = require("./toolbar/markup/context");
 const b = (0, classname_1.cn)('markup-editor');
-exports.MarkupEditorView = (0, react_1.memo)((props) => {
+exports.MarkupEditorView = react_1.default.memo((props) => {
     const { editor, autofocus, settingsVisible, toolbarVisible, toolbarConfig, hiddenActionsConfig, className, toolbarClassName, children, stickyToolbar = true, } = props;
     (0, hooks_1.useRenderTime)((time) => {
         logger_1.logger.metrics({
@@ -21,10 +20,13 @@ exports.MarkupEditorView = (0, react_1.memo)((props) => {
             duration: time,
         });
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ toolbar: toolbarVisible }, [className]), children: [toolbarVisible ? ((0, jsx_runtime_1.jsx)(context_1.MarkupToolbarContextProvider, { value: {
-                    uploadHandler: editor.fileUploadHandler,
-                    needToSetDimensionsForUploadedImages: editor.needToSetDimensionsForUploadedImages,
-                }, children: (0, jsx_runtime_1.jsx)(ToolbarView_1.ToolbarView, { editor: editor, editorMode: "markup", toolbarEditor: editor, hiddenActionsConfig: hiddenActionsConfig, stickyToolbar: stickyToolbar, toolbarConfig: toolbarConfig, toolbarFocus: () => editor.focus(), settingsVisible: settingsVisible, className: b('toolbar', [toolbarClassName]), children: children }) })) : null, (0, jsx_runtime_1.jsx)(MarkupEditorComponent_1.MarkupEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor', { 'toolbar-visible': toolbarVisible }), children: (0, jsx_runtime_1.jsx)(extensions_1.ReactRendererComponent, { storage: editor.renderStorage }) })] }));
+    return (react_1.default.createElement("div", { className: b({ toolbar: toolbarVisible }, [className]) },
+        toolbarVisible ? (react_1.default.createElement(context_1.MarkupToolbarContextProvider, { value: {
+                uploadHandler: editor.fileUploadHandler,
+                needToSetDimensionsForUploadedImages: editor.needToSetDimensionsForUploadedImages,
+            } },
+            react_1.default.createElement(ToolbarView_1.ToolbarView, { editor: editor, editorMode: "markup", toolbarEditor: editor, hiddenActionsConfig: hiddenActionsConfig, stickyToolbar: stickyToolbar, toolbarConfig: toolbarConfig, toolbarFocus: () => editor.focus(), settingsVisible: settingsVisible, className: b('toolbar', [toolbarClassName]) }, children))) : null,
+        react_1.default.createElement(MarkupEditorComponent_1.MarkupEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor', { 'toolbar-visible': toolbarVisible }) },
+            react_1.default.createElement(extensions_1.ReactRendererComponent, { storage: editor.renderStorage }))));
 });
 exports.MarkupEditorView.displayName = 'MarkdownMarkupEditorView';
-//# sourceMappingURL=MarkupEditorView.js.map

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

@@ -1,5 +1,5 @@
 import { Node } from 'prosemirror-model';
-import { SafeEventEmitter } from "../utils/index.js";
+import { SafeEventEmitter } from '../utils';
 export interface IMarkupManager {
     setMarkup(id: string, rawMarkup: string): void;
     setNode(id: string, node: Node): void;

package/build/cjs/bundle/MarkupManager.js

@@ -2,14 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkupManager = void 0;
 const uuid_1 = require("uuid");
-const utils_1 = require("../utils/index.js");
+const utils_1 = require("../utils");
 class MarkupManager extends utils_1.SafeEventEmitter {
-    _markups = new Map();
-    _nodes = new Map();
-    _namespace;
-    logger;
     constructor(logger) {
         super();
+        this._markups = new Map();
+        this._nodes = new Map();
         this.logger = logger;
         this._namespace = (0, uuid_1.v4)();
     }
@@ -17,37 +15,41 @@ class MarkupManager extends utils_1.SafeEventEmitter {
      * Set raw markup for a specific id
      */
     setMarkup(id, rawMarkup) {
+        var _a, _b;
         if (typeof rawMarkup !== 'string') {
-            this.logger?.error('[MarkupManager] rawMarkup must be a string');
+            (_a = this.logger) === null || _a === void 0 ? void 0 : _a.error('[MarkupManager] rawMarkup must be a string');
             return;
         }
         this._markups.set(id, rawMarkup);
         this.emit('markupChanged', { id, rawMarkup });
-        this.logger?.log(`[MarkupManager] Raw markup for ID ${id} set successfully`);
+        (_b = this.logger) === null || _b === void 0 ? void 0 : _b.log(`[MarkupManager] Raw markup for ID ${id} set successfully`);
     }
     /**
      * Set a node for a specific id
      */
     setNode(id, node) {
+        var _a, _b;
         if (!node) {
-            this.logger?.error('[MarkupManager] Node must be a valid ProseMirror Node');
+            (_a = this.logger) === null || _a === void 0 ? void 0 : _a.error('[MarkupManager] Node must be a valid ProseMirror Node');
             return;
         }
         this._nodes.set(id, node);
         this.emit('nodeChanged', { id, node });
-        this.logger?.log(`[MarkupManager] Node for ID ${id} set successfully`);
+        (_b = this.logger) === null || _b === void 0 ? void 0 : _b.log(`[MarkupManager] Node for ID ${id} set successfully`);
     }
     /**
      * Get raw markup for a specific id
      */
     getMarkup(id) {
-        return this._markups.get(id) ?? null;
+        var _a;
+        return (_a = this._markups.get(id)) !== null && _a !== void 0 ? _a : null;
     }
     /**
      * Get a node for a specific id
      */
     getNode(id) {
-        return this._nodes.get(id) ?? null;
+        var _a;
+        return (_a = this._nodes.get(id)) !== null && _a !== void 0 ? _a : null;
     }
     getNamespace() {
         return this._namespace;
@@ -56,11 +58,11 @@ class MarkupManager extends utils_1.SafeEventEmitter {
      * Reset the stored markups and nodes
      */
     reset() {
+        var _a;
         this._markups.clear();
         this._nodes.clear();
         this.emit('reset', {});
-        this.logger?.log('[MarkupManager] MarkupManager has been reset');
+        (_a = this.logger) === null || _a === void 0 ? void 0 : _a.log('[MarkupManager] MarkupManager has been reset');
     }
 }
 exports.MarkupManager = MarkupManager;
-//# sourceMappingURL=MarkupManager.js.map

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

@@ -1,6 +1,7 @@
-import type { EditorInt } from "./Editor.js";
-export type SplitModeProps = {
+import React from 'react';
+import type { EditorInt } from './Editor';
+export declare type SplitModeProps = {
     editor: EditorInt;
 };
-declare const SplitModeView: import("react").ForwardRefExoticComponent<SplitModeProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const SplitModeView: React.ForwardRefExoticComponent<SplitModeProps & React.RefAttributes<HTMLDivElement>>;
 export { SplitModeView };

package/build/cjs/bundle/SplitModeView.js

@@ -1,16 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SplitModeView = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
-const classname_1 = require("../classname.js");
-const bundle_1 = require("../i18n/bundle/index.js");
-const lodash_1 = require("../lodash.js");
-const sync_scroll_1 = require("../utils/sync-scroll.js");
+const classname_1 = require("../classname");
+const bundle_1 = require("../i18n/bundle");
+const lodash_1 = require("../lodash");
+const sync_scroll_1 = require("../utils/sync-scroll");
 const b = (0, classname_1.cn)('markup-preview');
-const SplitModeView = (0, react_1.forwardRef)(({ editor }, ref) => {
+const SplitModeView = react_1.default.forwardRef(({ editor }, ref) => {
+    var _a;
     const cm = editor.cm;
     const [, forceUpdate] = (0, react_1.useReducer)((x) => x + 1, 0);
     const outerRef = (0, react_1.useRef)(null);
@@ -20,7 +21,7 @@ const SplitModeView = (0, react_1.forwardRef)(({ editor }, ref) => {
             return;
         const els = Array.from(outerRef.current.querySelectorAll('.line'));
         lineElements.current = els
-            .filter((el) => el instanceof HTMLElement && el.parentElement?.offsetHeight !== 0)
+            .filter((el) => { var _a; return el instanceof HTMLElement && ((_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== 0; })
             .map((el) => ({
             el: el,
             line: Number(el.getAttribute('data-line')),
@@ -54,24 +55,25 @@ const SplitModeView = (0, react_1.forwardRef)(({ editor }, ref) => {
         const outer = outerRef.current;
         editor.on('change', forceUpdate);
         editor.on('cm-scroll', handleEditorScroll);
-        outer?.addEventListener('scroll', handlePreviewScroll);
+        outer === null || outer === void 0 ? void 0 : outer.addEventListener('scroll', handlePreviewScroll);
         editor.cm.requestMeasure();
         return () => {
             editor.off('change', forceUpdate);
             editor.off('cm-scroll', handleEditorScroll);
-            outer?.removeEventListener('scroll', handlePreviewScroll);
+            outer === null || outer === void 0 ? void 0 : outer.removeEventListener('scroll', handlePreviewScroll);
         };
     }, [editor, handleEditorScroll, handlePreviewScroll]);
     (0, react_1.useImperativeHandle)(ref, () => outerRef.current);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b('outer', {
+    return (react_1.default.createElement("div", { className: b('outer', {
             vertical: editor.splitMode === 'vertical',
-        }), ref: outerRef, children: [(0, jsx_runtime_1.jsx)(uikit_1.Label, { icon: (0, jsx_runtime_1.jsx)(icons_1.Eye, {}), className: b('preview-sign'), size: 'm', children: (0, bundle_1.i18n)('split-mode-text') }), editor.renderPreview?.({
-                getValue: editor.getValue,
-                mode: 'split',
-                md: editor.mdOptions,
-                directiveSyntax: editor.directiveSyntax,
-            })] }));
+        }), ref: outerRef },
+        react_1.default.createElement(uikit_1.Label, { icon: react_1.default.createElement(icons_1.Eye, null), className: b('preview-sign'), size: 'm' }, (0, bundle_1.i18n)('split-mode-text')), (_a = editor.renderPreview) === null || _a === void 0 ? void 0 :
+        _a.call(editor, {
+            getValue: editor.getValue,
+            mode: 'split',
+            md: editor.mdOptions,
+            directiveSyntax: editor.directiveSyntax,
+        })));
 });
 exports.SplitModeView = SplitModeView;
 SplitModeView.displayName = 'SplitModeView';
-//# sourceMappingURL=SplitModeView.js.map

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

@@ -1,8 +1,9 @@
-import { ClassNameProps } from "../classname.js";
-import { ToolbarData, ToolbarItemData } from "../toolbar/index.js";
-import type { EditorInt } from "./Editor.js";
-import type { MarkdownEditorMode } from "./types.js";
-export type ToolbarViewProps<T> = ClassNameProps & {
+import React from 'react';
+import { ClassNameProps } from '../classname';
+import { ToolbarData, ToolbarItemData } from '../toolbar';
+import type { EditorInt } from './Editor';
+import type { MarkdownEditorMode } from './types';
+export declare type ToolbarViewProps<T> = ClassNameProps & {
     editor: EditorInt;
     editorMode: MarkdownEditorMode;
     toolbarEditor: T;

package/build/cjs/bundle/ToolbarView.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarView = ToolbarView;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+exports.ToolbarView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const react_use_1 = require("react-use");
-const menubar_1 = require("../i18n/menubar/index.js");
-const useSticky_1 = require("../react-utils/useSticky.js");
-const toolbar_1 = require("../toolbar/index.js");
-const sticky_1 = require("./sticky/index.js");
+const menubar_1 = require("../i18n/menubar");
+const useSticky_1 = require("../react-utils/useSticky");
+const toolbar_1 = require("../toolbar");
+const sticky_1 = require("./sticky");
 function ToolbarView({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarConfig, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, }) {
     const rerender = (0, react_use_1.useUpdate)();
     (0, react_1.useLayoutEffect)(() => {
@@ -18,10 +18,12 @@ function ToolbarView({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarC
     }, [editor, rerender]);
     const wrapperRef = (0, react_1.useRef)(null);
     const isStickyActive = (0, useSticky_1.useSticky)(wrapperRef) && stickyToolbar;
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, className: sticky_1.stickyCn.toolbar({
+    return (react_1.default.createElement("div", { ref: wrapperRef, className: sticky_1.stickyCn.toolbar({
             withSettings: settingsVisible,
             stickyActive: isStickyActive,
             isSticky: stickyToolbar,
-        }, [className]), children: [(0, jsx_runtime_1.jsx)(toolbar_1.FlexToolbar, { data: toolbarConfig, hiddenActions: hiddenActionsConfig, editor: toolbarEditor, focus: toolbarFocus, dotsTitle: (0, menubar_1.i18n)('more_action'), onClick: (id, attrs) => editor.emit('toolbar-action', { id, attrs, editorMode }) }), children] }));
+        }, [className]) },
+        react_1.default.createElement(toolbar_1.FlexToolbar, { data: toolbarConfig, hiddenActions: hiddenActionsConfig, editor: toolbarEditor, focus: toolbarFocus, dotsTitle: (0, menubar_1.i18n)('more_action'), onClick: (id, attrs) => editor.emit('toolbar-action', { id, attrs, editorMode }) }),
+        children));
 }
-//# sourceMappingURL=ToolbarView.js.map
+exports.ToolbarView = ToolbarView;

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

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