@gravity-ui/markdown-editor 13.0.0

package/build/cjs/bundle/MarkdownEditorView.js

@@ -0,0 +1,129 @@
+"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 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 hooks_1 = require("../react-utils/hooks");
+const toaster_1 = require("../react-utils/toaster");
+const useSticky_1 = require("../react-utils/useSticky");
+const platform_1 = require("../utils/platform");
+const HorizontalDrag_1 = require("./HorizontalDrag");
+const MarkupEditorView_1 = require("./MarkupEditorView");
+const SplitModeView_1 = require("./SplitModeView");
+const WysiwygEditorView_1 = require("./WysiwygEditorView");
+const markup_1 = require("./config/markup");
+const wysiwyg_1 = require("./config/wysiwyg");
+const context_1 = require("./context");
+const settings_1 = require("./settings");
+const sticky_1 = require("./sticky");
+// 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;
+    const divRef = (0, react_use_1.useEnsuredForwardedRef)(ref);
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setIsMounted(true);
+    }, []);
+    const [showPreview, , unsetShowPreview, toggleShowPreview] = (0, hooks_1.useBooleanState)(false);
+    const context = (0, context_1.useMarkdownEditorContext)();
+    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, markupToolbarConfig = markup_1.mToolbarConfigByPreset[editor.preset], wysiwygToolbarConfig = wysiwyg_1.wToolbarConfigByPreset[editor.preset], markupHiddenActionsConfig = markup_1.mHiddenDataByPreset[editor.preset], wysiwygHiddenActionsConfig = wysiwyg_1.wHiddenDataByPreset[editor.preset], toaster, stickyToolbar, } = props;
+    const rerender = (0, react_use_1.useUpdate)();
+    react_1.default.useLayoutEffect(() => {
+        editor.on('rerender', rerender);
+        return () => {
+            editor.off('rerender', rerender);
+        };
+    }, [editor, rerender]);
+    const onModeChange = react_1.default.useCallback((type) => {
+        editor.changeEditorMode({ mode: type, reason: 'settings' });
+        unsetShowPreview();
+    }, [editor, unsetShowPreview]);
+    const onToolbarVisibilityChange = react_1.default.useCallback((visible) => {
+        editor.changeToolbarVisibility({ visible });
+    }, [editor]);
+    const onSplitModeChange = react_1.default.useCallback((splitModeEnabled) => {
+        unsetShowPreview();
+        editor.changeSplitModeEnabled({ splitModeEnabled });
+    }, [editor, unsetShowPreview]);
+    const onShowPreviewChange = react_1.default.useCallback((showPreviewValue) => {
+        editor.changeSplitModeEnabled({ splitModeEnabled: false });
+        if (showPreviewValue !== showPreview)
+            toggleShowPreview();
+    }, [editor, showPreview, toggleShowPreview]);
+    const editorMode = editor.currentMode;
+    const markupSplitMode = editor.splitModeEnabled && editor.splitMode && editorMode === 'markup';
+    const canRenderPreview = Boolean(editor.renderPreview && editorMode === 'markup' && !editor.splitModeEnabled);
+    (0, react_use_1.useKey)((e) => canRenderPreview && isPreviewKeyDown(e), () => onShowPreviewChange(!showPreview), { event: 'keydown' }, [showPreview, editorMode, onShowPreviewChange, canRenderPreview]);
+    const editorWrapperRef = (0, react_1.useRef)(null);
+    const splitModeViewWrapperRef = (0, react_1.useRef)(null);
+    const settings = (0, react_1.useMemo)(() => (react_1.default.createElement(Settings, { mode: editorMode, onModeChange: onModeChange, toolbarVisibility: editor.toolbarVisible && !showPreview, onToolbarVisibilityChange: onToolbarVisibilityChange, onSplitModeChange: onSplitModeChange, splitModeEnabled: editor.splitModeEnabled, splitMode: editor.splitMode, stickyToolbar: stickyToolbar, onShowPreviewChange: onShowPreviewChange, showPreview: showPreview, renderPreviewButton: canRenderPreview })), [
+        canRenderPreview,
+        stickyToolbar,
+        editor.splitMode,
+        editor.splitModeEnabled,
+        editor.toolbarVisible,
+        editorMode,
+        onModeChange,
+        onShowPreviewChange,
+        onSplitModeChange,
+        onToolbarVisibilityChange,
+        showPreview,
+    ]);
+    return (react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { onError: (e) => {
+            logger_1.logger.error(e);
+        }, fallbackRender: ({ error, resetErrorBoundary }) => {
+            toaster.add({
+                theme: 'danger',
+                name: 'g-md-editor-error',
+                title: (0, bundle_1.i18n)('error-title'),
+                content: error.message,
+            });
+            setTimeout(() => {
+                resetErrorBoundary();
+                editor.changeEditorMode({ mode: 'markup', reason: 'error-boundary' });
+            });
+            return null;
+        } },
+        react_1.default.createElement(toaster_1.ToasterContext.Provider, { value: toaster },
+            react_1.default.createElement("div", { ref: divRef, className: b({
+                    settings: settingsVisible,
+                    split: markupSplitMode && editor.splitMode,
+                }, [className]) },
+                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',
+                    })),
+                    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 && settingsVisible && settings)),
+                    !editor.toolbarVisible && settingsVisible && 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';
+function Settings(props) {
+    const wrapperRef = (0, react_1.useRef)(null);
+    const isSticky = (0, useSticky_1.useSticky)(wrapperRef) && props.toolbarVisibility && props.stickyToolbar;
+    return (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)))));
+}
+function isPreviewKeyDown(e) {
+    const modKey = (0, platform_1.isMac)() ? e.metaKey : e.ctrlKey;
+    return modKey && e.shiftKey && e.code === 'KeyP';
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { EditorInt } from './Editor';
+export declare type MarkupEditorComponentProps = {
+    editor: EditorInt;
+    autofocus?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+};
+export declare const MarkupEditorComponent: React.FC<MarkupEditorComponentProps>;

package/build/cjs/bundle/MarkupEditorComponent.js

@@ -0,0 +1,34 @@
+"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 MarkupEditorComponent = function MarkupEditorComponent({ editor, autofocus, className, children }) {
+    const ref = react_1.default.useRef(null);
+    // insert editor to dom
+    react_1.default.useLayoutEffect(() => {
+        const domElem = editor.markupEditor.cm.dom;
+        if (ref.current) {
+            ref.current.appendChild(domElem);
+        }
+        return () => {
+            domElem.remove();
+        };
+    }, [editor.markupEditor]);
+    // update editor after connecting to dom
+    react_1.default.useEffect(() => {
+        editor.markupEditor.cm.requestMeasure();
+        if (autofocus) {
+            editor.markupEditor.focus();
+        }
+    }, [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) => {
+            const target = event.target;
+            if (target instanceof Element && target.classList.contains('cm-editor')) {
+                editor.markupEditor.focus();
+            }
+        } }, children));
+};
+exports.MarkupEditorComponent = MarkupEditorComponent;

package/build/cjs/bundle/MarkupEditorView.css

@@ -0,0 +1,106 @@
+.g-md-markup-editor,
+.g-md-markup-preview {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+}
+.g-md-markup-editor__toolbar,
+.g-md-markup-preview__toolbar {
+  flex-shrink: 0;
+}
+.g-md-markup-editor__editor,
+.g-md-markup-preview__editor {
+  flex-basis: 100%;
+  min-height: 36px;
+  max-height: 100%;
+  cursor: text;
+}
+.g-md-markup-editor__editor_toolbar-visible,
+.g-md-markup-preview__editor_toolbar-visible {
+  max-height: calc(100% - 28px);
+}
+.g-md-markup-editor .CodeMirror-lines,
+.g-md-markup-preview .CodeMirror-lines {
+  padding: 4px 0 0;
+}
+.g-md-markup-editor_toolbar .CodeMirror-lines,
+.g-md-markup-preview_toolbar .CodeMirror-lines {
+  padding-top: 16px;
+}
+.g-md-markup-editor .CodeMirror-focused .CodeMirror-selected,
+.g-md-markup-editor .focus::selection,
+.g-md-markup-preview .CodeMirror-focused .CodeMirror-selected,
+.g-md-markup-preview .focus::selection {
+  background: rgba(98, 146, 255, 0.2);
+}
+.g-md-markup-editor .CodeMirror-selected,
+.g-md-markup-editor ::selection,
+.g-md-markup-preview .CodeMirror-selected,
+.g-md-markup-preview ::selection {
+  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-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 {
+  border-color: var(--g-color-text-primary);
+}
+.g-md-markup-editor .CodeMirror .cm-m-markdown.cm-header,
+.g-md-markup-preview .CodeMirror .cm-m-markdown.cm-header {
+  color: inherit;
+}
+.g-md-markup-editor .CodeMirror .cm-m-markdown.cm-quote,
+.g-md-markup-preview .CodeMirror .cm-m-markdown.cm-quote {
+  color: var(--g-color-text-positive);
+}
+.g-md-markup-editor .CodeMirror .cm-m-markdown.cm-link,
+.g-md-markup-preview .CodeMirror .cm-m-markdown.cm-link {
+  color: var(--g-color-text-link);
+}
+.g-md-markup-editor .CodeMirror .cm-m-markdown.cm-string,
+.g-md-markup-preview .CodeMirror .cm-m-markdown.cm-string {
+  color: var(--g-color-text-warning-heavy);
+}
+.g-md-markup-editor .CodeMirror .cm-m-markdown.cm-comment,
+.g-md-markup-preview .CodeMirror .cm-m-markdown.cm-comment {
+  color: var(--g-color-text-misc);
+}
+.g-md-markup-editor .CodeMirror .cm-m-markdown.cm-variable-2, .g-md-markup-editor .CodeMirror .cm-m-markdown.cm-variable-3, .g-md-markup-editor .CodeMirror .cm-m-markdown.cm-keyword,
+.g-md-markup-preview .CodeMirror .cm-m-markdown.cm-variable-2,
+.g-md-markup-preview .CodeMirror .cm-m-markdown.cm-variable-3,
+.g-md-markup-preview .CodeMirror .cm-m-markdown.cm-keyword {
+  color: unset;
+}
+.g-md-markup-editor .CodeMirror.cm-s-default,
+.g-md-markup-preview .CodeMirror.cm-s-default {
+  background-color: transparent;
+}
+.g-md-markup-editor .CodeMirror.cm-s-default .CodeMirror-placeholder,
+.g-md-markup-preview .CodeMirror.cm-s-default .CodeMirror-placeholder {
+  color: var(--g-color-text-secondary);
+}
+
+.g-md-markup-preview__outer {
+  overflow-y: auto;
+  flex: 1 0 0;
+}
+.g-md-markup-preview__outer_vertical {
+  box-sizing: border-box;
+  margin-top: 6px;
+  padding-top: 12px;
+  border-top: 8px solid var(--g-color-base-generic-ultralight);
+}
+.g-md-markup-preview__html {
+  position: relative;
+}
+.g-md-markup-preview__preview-sign {
+  margin-bottom: 8px;
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ClassNameProps } from '../classname';
+import type { EditorInt, SplitMode } from './Editor';
+import type { MToolbarData, MToolbarItemData } from './config/markup';
+export declare type MarkupEditorViewProps = ClassNameProps & {
+    editor: EditorInt;
+    autofocus?: boolean;
+    toolbarConfig: MToolbarData;
+    settingsVisible?: boolean;
+    toolbarVisible?: boolean;
+    stickyToolbar?: boolean;
+    toolbarClassName?: string;
+    splitMode?: SplitMode;
+    splitModeEnabled: boolean;
+    hiddenActionsConfig?: MToolbarItemData[];
+    children?: React.ReactNode;
+};
+export declare const MarkupEditorView: React.NamedExoticComponent<MarkupEditorViewProps>;

package/build/cjs/bundle/MarkupEditorView.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkupEditorView = void 0;
+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 = 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({
+            component: 'markup-editor',
+            event: 'render',
+            duration: time,
+        });
+    });
+    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';

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

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

package/build/cjs/bundle/SplitModeView.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitModeView = void 0;
+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");
+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 = 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);
+    const lineElements = (0, react_1.useRef)([]);
+    const updateLineElements = () => {
+        if (!outerRef.current)
+            return;
+        const els = Array.from(outerRef.current.querySelectorAll('.line'));
+        lineElements.current = els
+            .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')),
+        }));
+    };
+    const handleEditorScroll = (0, react_1.useMemo)(() => (0, lodash_1.throttle)(() => {
+        if (!outerRef.current)
+            return;
+        if (!cm.dom.matches(':hover'))
+            return;
+        const { range } = cm.scrollSnapshot().value;
+        const line = cm.state.doc.lineAt(range.from).number - 1;
+        updateLineElements();
+        (0, sync_scroll_1.scrollToRevealSourceLine)(line, lineElements.current, outerRef);
+    }, 30), [cm]);
+    const handlePreviewScroll = (0, react_1.useMemo)(() => (0, lodash_1.throttle)(() => {
+        if (!outerRef.current)
+            return;
+        if (!outerRef.current.matches(':hover'))
+            return;
+        updateLineElements();
+        let lineNumber = (0, sync_scroll_1.getEditorLineNumberForOffset)(outerRef.current.scrollTop, lineElements.current, outerRef);
+        if (lineNumber === null || isNaN(lineNumber))
+            return;
+        lineNumber = Math.max(Math.floor(lineNumber), 0) + 1;
+        const line = cm.state.doc.line(lineNumber);
+        const { top } = cm.lineBlockAt(line.from);
+        cm.scrollDOM.scrollTo({ top });
+    }, 30), [cm]);
+    (0, react_1.useEffect)(() => {
+        const outer = outerRef.current;
+        editor.on('change', forceUpdate);
+        editor.on('cm-scroll', handleEditorScroll);
+        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 === null || outer === void 0 ? void 0 : outer.removeEventListener('scroll', handlePreviewScroll);
+        };
+    }, [editor, handleEditorScroll, handlePreviewScroll]);
+    (0, react_1.useImperativeHandle)(ref, () => outerRef.current);
+    return (react_1.default.createElement("div", { className: b('outer', {
+            vertical: editor.splitMode === 'vertical',
+        }), 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' })));
+});
+exports.SplitModeView = SplitModeView;
+SplitModeView.displayName = 'SplitModeView';

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ClassNameProps } from '../classname';
+import { ToolbarData, ToolbarItemData } from '../toolbar';
+import type { EditorInt, EditorMode } from './Editor';
+export declare type ToolbarViewProps<T> = ClassNameProps & {
+    editor: EditorInt;
+    editorMode: EditorMode;
+    toolbarEditor: T;
+    toolbarFocus: () => void;
+    toolbarConfig: ToolbarData<T>;
+    settingsVisible?: boolean;
+    hiddenActionsConfig?: ToolbarItemData<T>[];
+    children?: React.ReactNode;
+    stickyToolbar: boolean;
+};
+export declare function ToolbarView<T>({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarConfig, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, }: ToolbarViewProps<T>): JSX.Element;

package/build/cjs/bundle/ToolbarView.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+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)(() => {
+        editor.on('rerender-toolbar', rerender);
+        return () => {
+            editor.off('rerender-toolbar', rerender);
+        };
+    }, [editor, rerender]);
+    const wrapperRef = (0, react_1.useRef)(null);
+    const isStickyActive = (0, useSticky_1.useSticky)(wrapperRef) && stickyToolbar;
+    return (react_1.default.createElement("div", { ref: wrapperRef, className: sticky_1.stickyCn.toolbar({
+            withSettings: settingsVisible,
+            stickyActive: isStickyActive,
+            isSticky: stickyToolbar,
+        }, [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));
+}
+exports.ToolbarView = ToolbarView;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { EditorInt } from './Editor';
+export declare type WysiwygEditorComponentProps = {
+    className?: string;
+    autofocus?: boolean;
+    editor: EditorInt;
+    children?: React.ReactNode;
+};
+export declare const WysiwygEditorComponent: React.FC<WysiwygEditorComponentProps>;

package/build/cjs/bundle/WysiwygEditorComponent.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WysiwygEditorComponent = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const WysiwygEditorComponent = function WysiwygEditorComponent({ className, autofocus, editor, children }) {
+    const ref = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        const { current } = ref;
+        if (current) {
+            current.appendChild(editor.wysiwygEditor.dom);
+            if (autofocus) {
+                editor.focus();
+            }
+        }
+    }, [editor]);
+    return (react_1.default.createElement("div", { ref: ref, className: className }, children));
+};
+exports.WysiwygEditorComponent = WysiwygEditorComponent;

package/build/cjs/bundle/WysiwygEditorView.css

@@ -0,0 +1,23 @@
+.g-md-wysiwyg-editor {
+  display: flex;
+  flex-direction: column;
+}
+.g-md-wysiwyg-editor__toolbar {
+  flex-shrink: 0;
+}
+.g-md-wysiwyg-editor__editor {
+  overflow-y: auto;
+  flex-grow: 1;
+}
+.g-root_theme_dark .g-md-wysiwyg-editor__editor .pm-iframe-container {
+  background-color: var(--g-color-base-light);
+}
+.g-md-wysiwyg-editor .yfm-editor {
+  height: calc(100% - 4px - 4px);
+  padding: 4px 4px 4px;
+}
+.g-md-wysiwyg-editor_toolbar .yfm-editor {
+  height: calc(100% - 16px - 16px);
+  padding-top: 16px;
+  padding-bottom: 16px;
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ClassNameProps } from '../classname';
+import type { EditorInt } from './Editor';
+import type { WToolbarData, WToolbarItemData } from './config/wysiwyg';
+export declare type WysiwygEditorViewProps = ClassNameProps & {
+    editor: EditorInt;
+    autofocus?: boolean;
+    settingsVisible?: boolean;
+    toolbarConfig: WToolbarData;
+    toolbarVisible?: boolean;
+    stickyToolbar?: boolean;
+    toolbarClassName?: string;
+    hiddenActionsConfig?: WToolbarItemData[];
+    children?: React.ReactNode;
+};
+export declare const WysiwygEditorView: React.NamedExoticComponent<WysiwygEditorViewProps>;

package/build/cjs/bundle/WysiwygEditorView.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WysiwygEditorView = void 0;
+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 ToolbarView_1 = require("./ToolbarView");
+const WysiwygEditorComponent_1 = require("./WysiwygEditorComponent");
+const b = (0, classname_1.cn)('wysiwyg-editor');
+exports.WysiwygEditorView = 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({
+            component: 'wysiwyg-editor',
+            event: 'render',
+            duration: time,
+        });
+    });
+    return (react_1.default.createElement("div", { className: b({ toolbar: toolbarVisible }, [className]) },
+        toolbarVisible ? (react_1.default.createElement(ToolbarView_1.ToolbarView, { editor: editor, editorMode: "wysiwyg", toolbarEditor: editor, stickyToolbar: stickyToolbar, toolbarConfig: toolbarConfig, toolbarFocus: () => editor.focus(), hiddenActionsConfig: hiddenActionsConfig, settingsVisible: settingsVisible, className: b('toolbar', [toolbarClassName]) }, children)) : null,
+        react_1.default.createElement(WysiwygEditorComponent_1.WysiwygEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor') },
+            react_1.default.createElement(extensions_1.ReactRendererComponent, { storage: editor.renderStorage }))));
+});
+exports.WysiwygEditorView.displayName = 'MarkdownWysiwgEditorView';

package/build/cjs/bundle/config/action-names.d.ts

@@ -0,0 +1,3 @@
+declare const namesObj: Record<"bold" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "mono" | "paragraph" | "anchor" | "table" | "image" | "code_inline" | "code_block" | "file" | "checkbox" | "bulletList" | "orderedList" | "emoji" | "tabs" | "yfm_cut" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "yfm_note" | "undo" | "redo" | "math_inline" | "math_block" | "mermaid" | "liftListItem" | "sinkListItem" | "yfm_block" | "yfm_layout" | "horizontalrule", string>;
+export declare const ActionName: Readonly<typeof namesObj>;
+export {};

package/build/cjs/bundle/config/action-names.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionName = void 0;
+const names = [
+    'undo',
+    'redo',
+    'bold',
+    'italic',
+    'underline',
+    'strike',
+    'mono',
+    'mark',
+    'paragraph',
+    'heading1',
+    'heading2',
+    'heading3',
+    'heading4',
+    'heading5',
+    'heading6',
+    'bulletList',
+    'orderedList',
+    'liftListItem',
+    'sinkListItem',
+    'checkbox',
+    'link',
+    'quote',
+    'yfm_cut',
+    'yfm_note',
+    'yfm_block',
+    'yfm_layout',
+    'table',
+    'code_inline',
+    'code_block',
+    'image',
+    'horizontalrule',
+    'emoji',
+    'file',
+    'anchor',
+    'math_inline',
+    'math_block',
+    'tabs',
+    'mermaid',
+];
+const namesObj = names.reduce((obj, val) => {
+    obj[val] = val;
+    return obj;
+}, {});
+exports.ActionName = namesObj;

package/build/cjs/bundle/config/icons.d.ts

@@ -0,0 +1,5 @@
+import { ToolbarIconData } from '../../toolbar/types';
+declare type Icon = 'undo' | 'redo' | 'bold' | 'italic' | 'underline' | 'strikethrough' | 'mono' | 'mark' | 'textColor' | 'text' | 'headline' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'bulletList' | 'orderedList' | 'sink' | 'lift' | 'cut' | 'note' | 'code' | 'codeBlock' | 'link' | 'image' | 'table' | 'quote' | 'checklist' | 'horizontalRule' | 'file' | 'functionInline' | 'functionBlock' | 'emoji' | 'tabs' | 'mermaid';
+declare type Icons = Record<Icon, ToolbarIconData>;
+export declare const icons: Icons;
+export {};