@gravity-ui/markdown-editor 13.0.0

package/build/cjs/bundle/toolbar/ToolbarSelect.css

@@ -0,0 +1,29 @@
+.g-md-toolbar-select__item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.g-md-toolbar-select__item-icon {
+  display: flex;
+  flex-shrink: 0;
+  margin-right: 6px;
+}
+.g-md-toolbar-select__item-content {
+  display: flex;
+  justify-content: space-between;
+  column-gap: 16px;
+  width: 100%;
+}
+.g-md-toolbar-select__item-extra {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+}
+.g-md-toolbar-select__item-hint {
+  display: flex;
+  align-items: center;
+}
+.g-md-toolbar-select__item-hint span {
+  display: flex;
+}

package/build/cjs/bundle/toolbar/ToolbarSelect.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ActionStorage } from '../../core';
+import { ToolbarBaseProps } from '../../toolbar';
+import type { WToolbarItemData } from '../config/wysiwyg';
+export declare type ToolbarSelectProps = ToolbarBaseProps<ActionStorage> & {
+    items: WToolbarItemData[];
+};
+export declare const ToolbarSelect: React.FC<ToolbarSelectProps>;

package/build/cjs/bundle/toolbar/ToolbarSelect.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarSelect = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("@gravity-ui/components");
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../classname");
+const lodash_1 = require("../../lodash");
+const b = (0, classname_1.cn)('toolbar-select');
+const ToolbarSelect = ({ className, editor, focus, onClick, items, }) => {
+    const activeItem = items.find((item) => item.isActive(editor));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(uikit_1.Select, { size: "m", view: "clear", className: className, onOpenChange: () => {
+                focus();
+            }, value: activeItem ? [activeItem.id] : undefined, options: items.map((item) => ({
+                data: item,
+                value: item.id,
+                text: (0, lodash_1.isFunction)(item.title) ? item.title() : item.title,
+            })), renderOption: ({ text, data }) => {
+                var _a;
+                const { icon, hotkey, hint } = data;
+                const hintText = (0, lodash_1.isFunction)(hint) ? hint() : hint;
+                return (react_1.default.createElement("div", { "aria-label": text, className: b('item') },
+                    react_1.default.createElement("div", { className: b('item-icon') },
+                        react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: Number((_a = icon.size) !== null && _a !== void 0 ? _a : 16) + 2 })),
+                    react_1.default.createElement("div", { className: b('item-content') },
+                        text,
+                        react_1.default.createElement("div", { className: b('item-extra') },
+                            hotkey && react_1.default.createElement(uikit_1.Hotkey, { value: hotkey }),
+                            hintText && (react_1.default.createElement(components_1.HelpPopover, { content: hintText, className: b('item-hint') }))))));
+            }, onUpdate: ([id]) => {
+                var _a;
+                (_a = items.find((item) => item.id === id)) === null || _a === void 0 ? void 0 : _a.exec(editor);
+                onClick === null || onClick === void 0 ? void 0 : onClick(id);
+                focus();
+            } })));
+};
+exports.ToolbarSelect = ToolbarSelect;

package/build/cjs/bundle/toolbar/custom/ToolbarColors.css

@@ -0,0 +1,24 @@
+.g-md-toolbar-colors__item-icon_color_gray {
+  color: var(--yfm-colorify-gray);
+}
+.g-md-toolbar-colors__item-icon_color_yellow {
+  color: var(--yfm-colorify-yellow);
+}
+.g-md-toolbar-colors__item-icon_color_orange {
+  color: var(--yfm-colorify-orange);
+}
+.g-md-toolbar-colors__item-icon_color_red {
+  color: var(--yfm-colorify-red);
+}
+.g-md-toolbar-colors__item-icon_color_green {
+  color: var(--yfm-colorify-green);
+}
+.g-md-toolbar-colors__item-icon_color_blue {
+  color: var(--yfm-colorify-blue);
+}
+.g-md-toolbar-colors__item-icon_color_violet {
+  color: var(--yfm-colorify-violet);
+}
+.g-md-toolbar-colors__item-icon_color_default {
+  color: var(--g-color-text-primary);
+}

package/build/cjs/bundle/toolbar/custom/ToolbarColors.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ToolbarBaseProps } from '../../../toolbar';
+export declare type ToolbarColorsProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
+    active?: boolean;
+    enable?: boolean;
+    currentColor?: string;
+    withDefault?: boolean;
+    exec(color: string): void;
+};
+export declare const ToolbarColors: React.FC<ToolbarColorsProps>;

package/build/cjs/bundle/toolbar/custom/ToolbarColors.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarColors = 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 menubar_1 = require("../../../i18n/menubar");
+const icons_1 = require("../../config/icons");
+const ToolbarButtonWithPopupMenu_1 = require("../ToolbarButtonWithPopupMenu");
+const b = (0, classname_1.cn)('toolbar-colors');
+const textColorIcon = icons_1.icons.textColor;
+const ToolbarColors = (props) => {
+    var _a;
+    const { exec, onClick, enable, currentColor, withDefault } = props;
+    const isDefault = currentColor === undefined;
+    const onItemClick = (color) => () => {
+        // do not exec when current color is default and clicked to default item
+        if (!(isDefault && color === ''))
+            exec(color);
+        onClick === null || onClick === void 0 ? void 0 : onClick('colorify', { color: color === '' ? 'default' : color });
+    };
+    const items = [
+        extensions_1.Colors.Gray,
+        extensions_1.Colors.Yellow,
+        extensions_1.Colors.Orange,
+        extensions_1.Colors.Red,
+        extensions_1.Colors.Green,
+        extensions_1.Colors.Blue,
+        extensions_1.Colors.Violet,
+    ].map((color) => {
+        var _a;
+        return ({
+            id: color,
+            icon: textColorIcon.data,
+            iconSize: (_a = textColorIcon.size) !== null && _a !== void 0 ? _a : 16,
+            text: (0, menubar_1.i18n)(`colorify__color_${color}`),
+            iconClassname: b('item-icon', { color }),
+            action: {
+                run: onItemClick(color),
+                isEnable: () => Boolean(enable),
+                isActive: () => color === currentColor,
+                meta() { },
+            },
+            group: (0, menubar_1.i18n)(`colorify__group_text`),
+        });
+    });
+    if (withDefault) {
+        items.unshift({
+            id: 'default',
+            icon: textColorIcon.data,
+            iconSize: (_a = textColorIcon.size) !== null && _a !== void 0 ? _a : 16,
+            text: (0, menubar_1.i18n)(`colorify__color_default`),
+            iconClassname: b('item-icon', { color: 'default' }),
+            group: (0, menubar_1.i18n)(`colorify__group_text`),
+            ignoreActive: true,
+            action: {
+                run: onItemClick(''),
+                isEnable: () => Boolean(enable),
+                isActive: () => isDefault,
+                meta() { },
+            },
+        });
+    }
+    return (react_1.default.createElement(ToolbarButtonWithPopupMenu_1.ToolbarButtonWithPopupMenu, Object.assign({}, props, { title: (0, menubar_1.i18n)('colorify'), menuItems: items, icon: textColorIcon })));
+};
+exports.ToolbarColors = ToolbarColors;

package/build/cjs/bundle/toolbar/custom/ToolbarFilePopup.d.ts

@@ -0,0 +1,11 @@
+import React, { RefObject } from 'react';
+import { FileFormProps } from '../../../forms/FileForm';
+import type { ToolbarBaseProps } from '../../../toolbar';
+import { BatchUploadResult, FileUploadHandler } from '../../../utils/upload';
+export declare type ToolbarFilePopupProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
+    hide: () => void;
+    anchorRef: RefObject<HTMLElement>;
+    uploadHandler?: FileUploadHandler;
+    onSuccessUpload?: (result: BatchUploadResult) => void;
+} & Pick<FileFormProps, 'onSubmit'>;
+export declare const ToolbarFilePopup: React.FC<ToolbarFilePopupProps>;

package/build/cjs/bundle/toolbar/custom/ToolbarFilePopup.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarFilePopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const FileForm_1 = require("../../../forms/FileForm");
+const forms_1 = require("../../../i18n/forms");
+const hooks_1 = require("../../../react-utils/hooks");
+const toaster_1 = require("../../../react-utils/toaster");
+const upload_1 = require("../../../utils/upload");
+const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
+const ToolbarFilePopup = ({ className, hide, anchorRef, onSubmit, focus, onClick, uploadHandler, onSuccessUpload, }) => {
+    const toaster = (0, toaster_1.useToaster)();
+    const [loading, showLoading, hideLoading] = (0, hooks_1.useBooleanState)(false);
+    const handleCancel = (0, react_1.useCallback)(() => {
+        hide();
+        focus();
+    }, [focus, hide]);
+    return (react_1.default.createElement(uikit_1.Popup, { open: true, onClose: handleCancel, anchorRef: anchorRef, placement: placement, className: className },
+        react_1.default.createElement(FileForm_1.FileForm, { autoFocus: true, onAttach: uploadHandler &&
+                ((files) => {
+                    showLoading();
+                    (0, upload_1.batchUploadFiles)(files, uploadHandler).then((res) => {
+                        hideLoading();
+                        hide();
+                        onSuccessUpload === null || onSuccessUpload === void 0 ? void 0 : onSuccessUpload(res);
+                    }, (error) => {
+                        hideLoading();
+                        toaster.add({
+                            theme: 'danger',
+                            name: 'toolbar_file_upload',
+                            title: (0, forms_1.i18n)('file_upload_failed'),
+                            content: String(error),
+                        });
+                    });
+                }), onCancel: handleCancel, onSubmit: (data) => {
+                hide();
+                focus();
+                onSubmit(data);
+                onClick === null || onClick === void 0 ? void 0 : onClick('addFile');
+            }, loading: loading })));
+};
+exports.ToolbarFilePopup = ToolbarFilePopup;

package/build/cjs/bundle/toolbar/custom/ToolbarImagePopup.d.ts

@@ -0,0 +1,11 @@
+import React, { RefObject } from 'react';
+import { ImageFormProps } from '../../../forms/ImageForm';
+import type { ToolbarBaseProps } from '../../../toolbar';
+import { BatchUploadResult, FileUploadHandler } from '../../../utils/upload';
+export declare type ToolbarImagePopuProps = Omit<ToolbarBaseProps<never>, 'editor'> & {
+    uploadImages?: FileUploadHandler;
+    onSuccessUpload?: (res: BatchUploadResult) => void;
+    hide: () => void;
+    anchorRef: RefObject<HTMLElement>;
+} & Pick<ImageFormProps, 'onSubmit'>;
+export declare const ToolbarImagePopup: React.FC<ToolbarImagePopuProps>;

package/build/cjs/bundle/toolbar/custom/ToolbarImagePopup.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarImagePopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const ImageForm_1 = require("../../../forms/ImageForm");
+const forms_1 = require("../../../i18n/forms");
+const hooks_1 = require("../../../react-utils/hooks");
+const toaster_1 = require("../../../react-utils/toaster");
+const upload_1 = require("../../../utils/upload");
+const placement = ['bottom-start', 'top-start', 'bottom-end', 'top-end'];
+const ToolbarImagePopup = ({ className, anchorRef, hide, onSubmit, focus, onClick, uploadImages, onSuccessUpload, }) => {
+    const toaster = (0, toaster_1.useToaster)();
+    const [loading, showLoading, hideLoading] = (0, hooks_1.useBooleanState)(false);
+    const handleCancel = (0, react_1.useCallback)(() => {
+        hide();
+        focus();
+    }, [focus, hide]);
+    return (react_1.default.createElement(uikit_1.Popup, { open: true, anchorRef: anchorRef, onClose: handleCancel, placement: placement, className: className },
+        react_1.default.createElement(ImageForm_1.ImageForm, { autoFocus: true, onAttach: uploadImages &&
+                ((files) => {
+                    showLoading();
+                    (0, upload_1.batchUploadFiles)(files, uploadImages).then((res) => {
+                        hideLoading();
+                        hide();
+                        onSuccessUpload === null || onSuccessUpload === void 0 ? void 0 : onSuccessUpload(res);
+                    }, (err) => {
+                        hideLoading();
+                        toaster.add({
+                            theme: 'danger',
+                            name: 'toolbar_image_upload',
+                            title: (0, forms_1.i18n)('image_upload_failed'),
+                            content: String(err),
+                        });
+                    });
+                }), onCancel: handleCancel, onSubmit: (data) => {
+                hide();
+                focus();
+                onSubmit(data);
+                onClick === null || onClick === void 0 ? void 0 : onClick('addImage');
+            }, loading: loading })));
+};
+exports.ToolbarImagePopup = ToolbarImagePopup;

package/build/cjs/bundle/toolbar/markup/MToolbarColors.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { CodeEditor } from '../../../markup';
+import { ToolbarBaseProps } from '../../../toolbar';
+export declare type MToolbarColorsProps = ToolbarBaseProps<CodeEditor>;
+export declare const MToolbarColors: React.FC<MToolbarColorsProps>;

package/build/cjs/bundle/toolbar/markup/MToolbarColors.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MToolbarColors = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const commands_1 = require("../../../markup/commands");
+const ToolbarColors_1 = require("../custom/ToolbarColors");
+const MToolbarColors = ({ className, editor, focus, onClick, }) => {
+    return (react_1.default.createElement(ToolbarColors_1.ToolbarColors, { enable: true, exec: (color) => {
+            (0, commands_1.colorify)(color)(editor.cm);
+        }, className: className, focus: focus, onClick: onClick }));
+};
+exports.MToolbarColors = MToolbarColors;

package/build/cjs/bundle/toolbar/markup/MToolbarFilePopup.d.ts

@@ -0,0 +1,8 @@
+import React, { RefObject } from 'react';
+import type { CodeEditor } from '../../../markup/editor';
+import type { ToolbarBaseProps } from '../../../toolbar';
+export declare type MToolbarFilePopupProps = ToolbarBaseProps<CodeEditor> & {
+    hide: () => void;
+    anchorRef: RefObject<HTMLElement>;
+};
+export declare const MToolbarFilePopup: React.FC<MToolbarFilePopupProps>;

package/build/cjs/bundle/toolbar/markup/MToolbarFilePopup.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MToolbarFilePopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const commands_1 = require("../../../markup/commands");
+const ToolbarFilePopup_1 = require("../custom/ToolbarFilePopup");
+const context_1 = require("./context");
+const MToolbarFilePopup = ({ focus, onClick, hide, anchorRef, editor, className, }) => {
+    const { uploadHandler } = (0, context_1.useMarkupToolbarContext)();
+    return (react_1.default.createElement(ToolbarFilePopup_1.ToolbarFilePopup, { hide: hide, focus: focus, onClick: onClick, anchorRef: anchorRef, className: className, onSubmit: (fileParams) => (0, commands_1.insertFiles)([fileParams])(editor.cm), uploadHandler: uploadHandler, onSuccessUpload: (res) => {
+            (0, commands_1.insertFiles)(res.success.map(({ result, file }) => {
+                var _a, _b;
+                return ({
+                    src: result.url,
+                    name: (_a = result.name) !== null && _a !== void 0 ? _a : file.name,
+                    type: (_b = result.type) !== null && _b !== void 0 ? _b : file.type,
+                });
+            }))(editor.cm);
+        } }));
+};
+exports.MToolbarFilePopup = MToolbarFilePopup;

package/build/cjs/bundle/toolbar/markup/MToolbarImagePopup.d.ts

@@ -0,0 +1,8 @@
+import React, { RefObject } from 'react';
+import type { CodeEditor } from '../../../markup/editor';
+import type { ToolbarBaseProps } from '../../../toolbar';
+export declare type MToolbarImagePopupProps = ToolbarBaseProps<CodeEditor> & {
+    hide: () => void;
+    anchorRef: RefObject<HTMLElement>;
+};
+export declare const MToolbarImagePopup: React.FC<MToolbarImagePopupProps>;

package/build/cjs/bundle/toolbar/markup/MToolbarImagePopup.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MToolbarImagePopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const is_number_1 = tslib_1.__importDefault(require("is-number"));
+const markup_1 = require("../../../markup");
+const commands_1 = require("../../../markup/commands");
+const ToolbarImagePopup_1 = require("../custom/ToolbarImagePopup");
+const context_1 = require("./context");
+const noop = (err) => {
+    console.error(err);
+};
+const MToolbarImagePopup = ({ focus, onClick, hide, anchorRef, editor, className, }) => {
+    const { uploadHandler, needToSetDimensionsForUploadedImages } = (0, context_1.useMarkupToolbarContext)();
+    return (react_1.default.createElement(ToolbarImagePopup_1.ToolbarImagePopup, { hide: hide, anchorRef: anchorRef, focus: focus, onClick: onClick, className: className, onSubmit: ({ url, name, alt, width, height }) => {
+            (0, commands_1.insertImages)([
+                {
+                    url,
+                    alt,
+                    title: name,
+                    width: (0, is_number_1.default)(width) ? String(width) : '',
+                    height: (0, is_number_1.default)(height) ? String(height) : '',
+                },
+            ])(editor.cm);
+        }, uploadImages: uploadHandler, onSuccessUpload: async (res) => {
+            const images = await toImageItems(res.success, Boolean(needToSetDimensionsForUploadedImages));
+            (0, commands_1.insertImages)(images)(editor.cm);
+        } }));
+};
+exports.MToolbarImagePopup = MToolbarImagePopup;
+async function toImageItems(items, withDimmensions) {
+    const imgItems = [];
+    await Promise.all(items.map(({ result, file }) => {
+        var _a;
+        const imgItem = { url: result.url, alt: (_a = result.name) !== null && _a !== void 0 ? _a : file.name };
+        imgItems.push(imgItem);
+        if (withDimmensions) {
+            return (0, markup_1.getImageDimensions)(file).then(({ height }) => {
+                imgItem.height = String(Math.min(height, markup_1.IMG_MAX_HEIGHT));
+            }, noop);
+        }
+        return Promise.resolve();
+    }));
+    return imgItems;
+}

package/build/cjs/bundle/toolbar/markup/context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { FileUploadHandler } from '../../../utils/upload';
+export declare type MarkupToolbarContextProps = {
+    uploadHandler?: FileUploadHandler;
+    needToSetDimensionsForUploadedImages?: boolean;
+};
+export declare const MarkupToolbarContextProvider: import("react").Provider<MarkupToolbarContextProps>;
+export declare function useMarkupToolbarContext(): MarkupToolbarContextProps;

package/build/cjs/bundle/toolbar/markup/context.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMarkupToolbarContext = exports.MarkupToolbarContextProvider = void 0;
+const react_1 = require("react");
+const defaultValue = {};
+const MarkupToolbarContext = (0, react_1.createContext)(defaultValue);
+exports.MarkupToolbarContextProvider = MarkupToolbarContext.Provider;
+function useMarkupToolbarContext() {
+    return (0, react_1.useContext)(MarkupToolbarContext);
+}
+exports.useMarkupToolbarContext = useMarkupToolbarContext;

package/build/cjs/bundle/toolbar/wysiwyg/WToolbarColors.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ActionStorage } from '../../../core';
+import { ToolbarBaseProps } from '../../../toolbar';
+export declare type WToolbarColorsProps = ToolbarBaseProps<ActionStorage>;
+export declare const WToolbarColors: React.FC<WToolbarColorsProps>;

package/build/cjs/bundle/toolbar/wysiwyg/WToolbarColors.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WToolbarColors = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const ToolbarColors_1 = require("../custom/ToolbarColors");
+const WToolbarColors = ({ className, editor, focus, onClick, }) => {
+    const action = editor.actions.colorify;
+    const currentColor = action.meta();
+    return (react_1.default.createElement(ToolbarColors_1.ToolbarColors, { active: action.isActive(), enable: action.isEnable(), currentColor: currentColor, exec: (color) => {
+            action.run({ color: color === currentColor ? '' : color });
+        }, className: className, focus: focus, onClick: onClick, withDefault: true }));
+};
+exports.WToolbarColors = WToolbarColors;

package/build/cjs/bundle/toolbar/wysiwyg/WToolbarTextSelect.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ActionStorage } from '../../../core';
+import { ToolbarBaseProps } from '../../../toolbar';
+export declare type WToolbarTextSelectProps = ToolbarBaseProps<ActionStorage> & {};
+export declare const WToolbarTextSelect: React.FC<WToolbarTextSelectProps>;

package/build/cjs/bundle/toolbar/wysiwyg/WToolbarTextSelect.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WToolbarTextSelect = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const wysiwyg_1 = require("../../config/wysiwyg");
+const ToolbarSelect_1 = require("../ToolbarSelect");
+const WToolbarTextSelect = ({ focus, onClick, editor, className, }) => {
+    const items = react_1.default.useMemo(() => wysiwyg_1.wHeadingListConfig.data, []);
+    return (react_1.default.createElement(ToolbarSelect_1.ToolbarSelect, { items: items, focus: focus, editor: editor, onClick: onClick, className: className }));
+};
+exports.WToolbarTextSelect = WToolbarTextSelect;

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Extension } from '../core';
+import { Editor, EditorOptions, EditorPreset } from './Editor';
+import { ExtensionsOptions } from './wysiwyg-preset';
+export declare type UseMarkdownEditorProps<T extends object = {}> = Omit<EditorOptions, 'extensions' | 'renderStorage' | 'preset'> & {
+    /**
+     * A set of plug-in extensions.
+     *
+     * @default 'full'
+     */
+    preset?: EditorPreset;
+    breaks?: boolean;
+    /** Used only first value. Сhanging the value will not lead to anything */
+    extensionOptions?: Omit<ExtensionsOptions, 'reactRenderer'> & T;
+    /** Used only first value. Сhanging the value will not lead to anything */
+    extraExtensions?: Extension;
+};
+export declare function useMarkdownEditor<T extends object = {}>(props: UseMarkdownEditorProps<T>, deps?: React.DependencyList): Editor;

package/build/cjs/bundle/useMarkdownEditor.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMarkdownEditor = void 0;
+const react_1 = require("react");
+const extensions_1 = require("../extensions");
+const logger_1 = require("../logger");
+const Editor_1 = require("./Editor");
+const wysiwyg_preset_1 = require("./wysiwyg-preset");
+function useMarkdownEditor(props, deps = []) {
+    const editor = (0, react_1.useMemo)(() => {
+        var _a;
+        const preset = (_a = props.preset) !== null && _a !== void 0 ? _a : 'full';
+        const renderStorage = new extensions_1.ReactRenderStorage();
+        const extensions = (builder) => {
+            builder.use(wysiwyg_preset_1.BundlePreset, Object.assign(Object.assign({}, props.extensionOptions), { preset, reactRenderer: renderStorage, onCancel: () => {
+                    editor.emit('cancel', null);
+                    return true;
+                }, onSubmit: () => {
+                    editor.emit('submit', null);
+                    return true;
+                }, mdBreaks: props.breaks, fileUploadHandler: props.fileUploadHandler, needToSetDimensionsForUploadedImages: props.needToSetDimensionsForUploadedImages }));
+            if (props.extraExtensions) {
+                builder.use(props.extraExtensions, props.extensionOptions);
+            }
+        };
+        return new Editor_1.EditorImpl(Object.assign(Object.assign({}, props), { extensions, renderStorage, preset }));
+    }, deps.concat(props.allowHTML, props.linkify, props.linkifyTlds, props.breaks, props.splitMode, props.needToSetDimensionsForUploadedImages));
+    (0, react_1.useLayoutEffect)(() => {
+        function onToolbarAction({ editorMode, id }) {
+            logger_1.logger.action({ mode: editorMode, source: 'toolbar', action: id });
+        }
+        editor.on('toolbar-action', onToolbarAction);
+        return () => {
+            editor.off('toolbar-action', onToolbarAction);
+            editor.destroy();
+        };
+    }, [editor]);
+    return editor;
+}
+exports.useMarkdownEditor = useMarkdownEditor;

package/build/cjs/bundle/wysiwyg-preset.d.ts

@@ -0,0 +1,19 @@
+import { ExtensionAuto } from '../core';
+import { BehaviorPresetOptions } from '../extensions/behavior';
+import { EditorModeKeymapOptions } from '../extensions/behavior/EditorModeKeymap';
+import { FullPresetOptions } from '../presets/full';
+import type { FileUploadHandler } from '../utils/upload';
+import { EditorPreset } from './Editor';
+export declare type ExtensionsOptions = BehaviorPresetOptions & FullPresetOptions;
+export declare type BundlePresetOptions = ExtensionsOptions & EditorModeKeymapOptions & {
+    preset: EditorPreset;
+    mdBreaks?: boolean;
+    fileUploadHandler?: FileUploadHandler;
+    /**
+     * If we need to set dimensions for uploaded images
+     *
+     * @default false
+     */
+    needToSetDimensionsForUploadedImages?: boolean;
+};
+export declare const BundlePreset: ExtensionAuto<BundlePresetOptions>;