@gravity-ui/markdown-editor 13.0.0

package/build/cjs/toolbar/FlexToolbar.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlexToolbar = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const react_use_1 = require("react-use");
+const classname_1 = require("../classname");
+const logger_1 = require("../logger");
+const hooks_1 = require("../react-utils/hooks");
+const Toolbar_1 = require("./Toolbar");
+const ToolbarListButton_1 = require("./ToolbarListButton");
+const flexible_1 = require("./flexible");
+const types_1 = require("./types");
+const b = (0, classname_1.cn)('flex-toolbar');
+function FlexToolbar(props) {
+    (0, hooks_1.useRenderTime)((time) => {
+        logger_1.logger.metrics({
+            component: 'toolbar',
+            event: 'render',
+            duration: time,
+        });
+    });
+    const { data, className, hiddenActions } = props;
+    const [ref, { width }] = (0, react_use_1.useMeasure)();
+    const { data: items, dots } = react_1.default.useMemo(() => {
+        const toolbarButtonIds = data.reduce((a, toolbarGroup) => {
+            return [
+                ...a,
+                ...toolbarGroup
+                    .map((toolbarButton) => {
+                    if (toolbarButton.type === types_1.ToolbarDataType.ListButton) {
+                        return toolbarButton.data.map((v) => v.id);
+                    }
+                    return toolbarButton.id;
+                })
+                    .flat(),
+            ];
+        }, []);
+        // Finding only actions tha are not present in the main toolbar config
+        const filteredHiddenAction = hiddenActions === null || hiddenActions === void 0 ? void 0 : hiddenActions.filter((a) => !toolbarButtonIds.includes(a.id));
+        return (0, flexible_1.shrinkToolbarData)({
+            data,
+            availableWidth: width,
+            hiddenActions: filteredHiddenAction,
+        });
+    }, [data, width, hiddenActions]);
+    return (react_1.default.createElement("div", { ref: ref, className: b(null, [className]) },
+        react_1.default.createElement("div", { className: b('container') },
+            react_1.default.createElement(Toolbar_1.Toolbar, Object.assign({}, props, { data: items, className: b('bar') })),
+            (dots === null || dots === void 0 ? void 0 : dots.length) && (react_1.default.createElement(ToolbarListButton_1.ToolbarListButton, { data: dots, icon: { data: icons_1.Ellipsis }, title: props.dotsTitle, editor: props.editor, focus: props.focus, onClick: props.onClick, className: b('dots'), alwaysActive: true })))));
+}
+exports.FlexToolbar = FlexToolbar;

package/build/cjs/toolbar/Toolbar.css

@@ -0,0 +1,7 @@
+.g-md-toolbar {
+  display: flex;
+}
+.g-md-toolbar__group-separator {
+  margin: 6px 8px;
+  border-left: 1px solid var(--g-color-line-generic);
+}

package/build/cjs/toolbar/Toolbar.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ToolbarGroupData } from './ToolbarGroup';
+import { ToolbarBaseProps } from './types';
+export declare type ToolbarData<E> = ToolbarGroupData<E>[];
+export declare type ToolbarProps<E> = ToolbarBaseProps<E> & {
+    data: ToolbarData<E>;
+};
+export declare function Toolbar<E>({ editor, data, className, focus, onClick }: ToolbarProps<E>): JSX.Element;

package/build/cjs/toolbar/Toolbar.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toolbar = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classname_1 = require("../classname");
+const ToolbarGroup_1 = require("./ToolbarGroup");
+const b = (0, classname_1.cn)('toolbar');
+function Toolbar({ editor, data, className, focus, onClick }) {
+    return (react_1.default.createElement("div", { className: b(null, [className]) }, data.map((group, index) => {
+        const isLastGroup = index === data.length - 1;
+        return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+            react_1.default.createElement(ToolbarGroup_1.ToolbarButtonGroup, { data: group, editor: editor, focus: focus, onClick: onClick, className: b('group') }),
+            isLastGroup || react_1.default.createElement("div", { className: b('group-separator') })));
+    })));
+}
+exports.Toolbar = Toolbar;

package/build/cjs/toolbar/ToolbarButton.css

@@ -0,0 +1,4 @@
+.g-md-toolbar-button__action-disabled-tooltip {
+  min-height: fit-content;
+  padding: 6px 12px;
+}

package/build/cjs/toolbar/ToolbarButton.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ToolbarBaseProps, ToolbarItemData } from './types';
+export declare type ToolbarButtonProps<E> = ToolbarBaseProps<E> & ToolbarItemData<E>;
+export declare type ToolbarButtonViewProps = Pick<ToolbarItemData<unknown>, 'icon' | 'title' | 'hint' | 'hotkey' | 'disabledPopoverVisible' | 'hintWhenDisabled'> & {
+    active: boolean;
+    enabled: boolean;
+    onClick: () => void;
+    className?: string;
+};
+export declare const ToolbarButtonView: React.ForwardRefExoticComponent<Pick<ToolbarItemData<unknown>, "title" | "icon" | "hint" | "hotkey" | "disabledPopoverVisible" | "hintWhenDisabled"> & {
+    active: boolean;
+    enabled: boolean;
+    onClick: () => void;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLElement>>;
+export declare function ToolbarButton<E>(props: ToolbarButtonProps<E>): JSX.Element;

package/build/cjs/toolbar/ToolbarButton.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarButton = exports.ToolbarButtonView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../classname");
+const common_1 = require("../i18n/common");
+const lodash_1 = require("../lodash");
+const const_1 = require("./const");
+const b = (0, classname_1.cn)('toolbar-button');
+exports.ToolbarButtonView = react_1.default.forwardRef(function ToolbarButtonView({ icon, title, hotkey, disabledPopoverVisible = true, hintWhenDisabled, active, enabled, onClick, className, }, ref) {
+    var _a;
+    const disabled = !active && !enabled;
+    const titleText = (0, lodash_1.isFunction)(title) ? title() : title;
+    const hideHintWhenDisabled = hintWhenDisabled === false || !disabledPopoverVisible || !disabled;
+    const hintWhenDisabledText = typeof hintWhenDisabled === 'string'
+        ? hintWhenDisabled
+        : typeof hintWhenDisabled === 'function'
+            ? hintWhenDisabled()
+            : (0, common_1.i18n)('toolbar_action_disabled');
+    return (react_1.default.createElement(uikit_1.Popover, { content: hintWhenDisabledText, disabled: hideHintWhenDisabled, tooltipContentClassName: b('action-disabled-tooltip'), placement: ['bottom'] },
+        react_1.default.createElement(uikit_1.ActionTooltip, { openDelay: const_1.ToolbarTooltipDelay.Open, closeDelay: const_1.ToolbarTooltipDelay.Close, title: titleText, hotkey: hotkey },
+            react_1.default.createElement(uikit_1.Button, { size: "m", ref: ref, selected: active, disabled: disabled, view: active ? 'normal' : 'flat', onClick: onClick, className: b(null, [className]), extraProps: { 'aria-label': titleText } },
+                react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: (_a = icon.size) !== null && _a !== void 0 ? _a : 16 })))));
+});
+function ToolbarButton(props) {
+    const { id, editor, focus, isActive, isEnable, exec, onClick } = props;
+    const active = isActive(editor);
+    const enabled = isEnable(editor);
+    return (react_1.default.createElement(exports.ToolbarButtonView, Object.assign({}, props, { active: active, enabled: enabled, onClick: () => {
+            focus();
+            exec(editor);
+            onClick === null || onClick === void 0 ? void 0 : onClick(id);
+        } })));
+}
+exports.ToolbarButton = ToolbarButton;

package/build/cjs/toolbar/ToolbarButtonPopup.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ToolbarBaseProps, ToolbarButtonPopupData } from './types';
+export declare type ToolbarButtonPopupProps<E> = ToolbarBaseProps<E> & ToolbarButtonPopupData<E>;
+export declare function ToolbarButtonPopup<E>(props: ToolbarButtonPopupProps<E>): JSX.Element;

package/build/cjs/toolbar/ToolbarButtonPopup.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarButtonPopup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_use_1 = require("react-use");
+const ToolbarButton_1 = require("./ToolbarButton");
+function ToolbarButtonPopup(props) {
+    const { className, editor, isActive, isEnable, renderPopup } = props, buttonProps = tslib_1.__rest(props, ["className", "editor", "isActive", "isEnable", "renderPopup"]);
+    const buttonRef = (0, react_1.useRef)(null);
+    const [open, setOpen] = (0, react_use_1.useBoolean)(false);
+    const active = isActive(editor);
+    const enabled = isEnable(editor);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ToolbarButton_1.ToolbarButtonView, Object.assign({}, buttonProps, { ref: buttonRef, active: active, enabled: enabled, className: className, onClick: () => setOpen() })),
+        open &&
+            renderPopup(Object.assign(Object.assign({}, props), { anchorRef: buttonRef, hide: () => setOpen(false) }))));
+}
+exports.ToolbarButtonPopup = ToolbarButtonPopup;

package/build/cjs/toolbar/ToolbarGroup.css

@@ -0,0 +1,4 @@
+.g-md-toolbar-group {
+  display: flex;
+  gap: 0 2px;
+}

package/build/cjs/toolbar/ToolbarGroup.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ToolbarBaseProps, ToolbarGroupItemData } from './types';
+export declare type ToolbarGroupData<E> = ToolbarGroupItemData<E>[];
+export declare type ToolbarGroupProps<E> = ToolbarBaseProps<E> & {
+    data: ToolbarGroupData<E>;
+};
+export declare function ToolbarButtonGroup<E>({ className, editor, data, focus, onClick, }: ToolbarGroupProps<E>): JSX.Element;

package/build/cjs/toolbar/ToolbarGroup.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarButtonGroup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classname_1 = require("../classname");
+const ToolbarButton_1 = require("./ToolbarButton");
+const ToolbarButtonPopup_1 = require("./ToolbarButtonPopup");
+const ToolbarListButton_1 = require("./ToolbarListButton");
+const types_1 = require("./types");
+const b = (0, classname_1.cn)('toolbar-group');
+function ToolbarButtonGroup({ className, editor, data, focus, onClick, }) {
+    return (react_1.default.createElement("div", { className: b(null, [className]) }, data.map((item) => {
+        if (item.type === types_1.ToolbarDataType.SingleButton) {
+            return (react_1.default.createElement(ToolbarButton_1.ToolbarButton, Object.assign({}, item, { key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) })));
+        }
+        if (item.type === types_1.ToolbarDataType.ButtonPopup) {
+            return (react_1.default.createElement(ToolbarButtonPopup_1.ToolbarButtonPopup, Object.assign({}, item, { key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, item.className) })));
+        }
+        if (item.type === types_1.ToolbarDataType.ListButton) {
+            return (react_1.default.createElement(ToolbarListButton_1.ToolbarListButton, Object.assign({}, item, { key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) })));
+        }
+        if (item.type === types_1.ToolbarDataType.ReactComponent) {
+            const Component = item.component;
+            return (react_1.default.createElement(Component, { key: item.id, editor: editor, focus: focus, onClick: onClick, className: b(item.type, { id: item.id }, [item.className]) }));
+        }
+        if (item.type === types_1.ToolbarDataType.ReactNode) {
+            return react_1.default.createElement(react_1.default.Fragment, { key: item.id }, item.content);
+        }
+        if (item.type === types_1.ToolbarDataType.ReactNodeFn) {
+            return react_1.default.createElement(react_1.default.Fragment, { key: item.id }, item.content(editor));
+        }
+        return null;
+    })));
+}
+exports.ToolbarButtonGroup = ToolbarButtonGroup;

package/build/cjs/toolbar/ToolbarListButton.css

@@ -0,0 +1,34 @@
+.g-md-toolbar-list-button_arrow {
+  --g-button-icon-offset: 0px;
+  --g-button-padding: 2px;
+  width: 42px;
+}
+.g-md-toolbar-list-button__item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  column-gap: 24px;
+}
+.g-md-toolbar-list-button__extra {
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+  line-height: normal;
+}
+.g-md-toolbar-list-button__hint {
+  display: flex;
+  align-items: center;
+}
+.g-md-toolbar-list-button__hint span {
+  display: flex;
+}
+.g-md-toolbar-list-button__action-disabled-popover {
+  display: block;
+}
+.g-md-toolbar-list-button__action-disabled-popover .g-popover__handler {
+  display: block;
+}
+.g-md-toolbar-list-button__action-disabled-tooltip {
+  min-height: fit-content;
+  padding: 6px 12px;
+}

package/build/cjs/toolbar/ToolbarListButton.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ToolbarBaseProps, ToolbarIconData, ToolbarListButtonItemData } from './types';
+export declare type ToolbarListButtonData<E> = {
+    icon: ToolbarIconData;
+    title: string | (() => string);
+    withArrow?: boolean;
+    data: ToolbarListButtonItemData<E>[];
+    alwaysActive?: boolean;
+    hideDisabled?: boolean;
+};
+export declare type ToolbarListButtonProps<E> = ToolbarBaseProps<E> & ToolbarListButtonData<E>;
+export declare function ToolbarListButton<E>({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, }: ToolbarListButtonProps<E>): JSX.Element | null;

package/build/cjs/toolbar/ToolbarListButton.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarListButton = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const components_1 = require("@gravity-ui/components");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../classname");
+const common_1 = require("../i18n/common");
+const lodash_1 = require("../lodash");
+const hooks_1 = require("../react-utils/hooks");
+const const_1 = require("./const");
+const b = (0, classname_1.cn)('toolbar-list-button');
+function ToolbarListButton({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, }) {
+    var _a;
+    const buttonRef = react_1.default.useRef(null);
+    const [open, , hide, toggleOpen] = (0, hooks_1.useBooleanState)(false);
+    const [popupItem, setPopupItem] = (0, react_1.useState)();
+    const someActive = alwaysActive
+        ? false
+        : data.some((item) => item.isActive(editor) && !item.doNotActivateList);
+    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));
+    const popupOpen = everyDisabled ? false : open;
+    const shouldForceHide = open && !popupOpen;
+    react_1.default.useEffect(() => {
+        if (shouldForceHide) {
+            hide();
+        }
+    }, [hide, shouldForceHide]);
+    if (data.length === 0)
+        return null;
+    const buttonContent = [react_1.default.createElement(uikit_1.Icon, { key: 1, data: icon.data, size: (_a = icon.size) !== null && _a !== void 0 ? _a : 16 })];
+    if (withArrow) {
+        buttonContent.push(react_1.default.createElement(react_1.default.Fragment, { key: 2 }, ''));
+        buttonContent.push(react_1.default.createElement(uikit_1.Icon, { key: 3, data: icons_1.ChevronDown, size: 16 }));
+    }
+    const titleText = (0, lodash_1.isFunction)(title) ? title() : title;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(uikit_1.Popover, { className: b('action-disabled-popover'), tooltipContentClassName: b('action-disabled-tooltip'), content: (0, common_1.i18n)('toolbar_action_disabled'), placement: 'bottom', disabled: !everyDisabled },
+            react_1.default.createElement(uikit_1.ActionTooltip, { title: titleText, disabled: Boolean(popupItem) || popupOpen, openDelay: const_1.ToolbarTooltipDelay.Open, closeDelay: const_1.ToolbarTooltipDelay.Close },
+                react_1.default.createElement(uikit_1.Button, { size: "m", ref: buttonRef, view: someActive || popupOpen ? 'normal' : 'flat', selected: someActive, disabled: everyDisabled, className: b({ arrow: withArrow }, [className]), onClick: () => {
+                        if (popupItem)
+                            setPopupItem(undefined);
+                        else
+                            toggleOpen();
+                    } }, buttonContent))),
+        react_1.default.createElement(uikit_1.Popup, { anchorRef: buttonRef, open: popupOpen, onClose: hide },
+            react_1.default.createElement(uikit_1.Menu, { size: "l", className: b('menu') }, data
+                .map((data) => {
+                var _a;
+                const { id, title, icon, hotkey, isActive, isEnable, exec, hint, hintWhenDisabled, disabledPopoverVisible = true, } = data;
+                const titleText = (0, lodash_1.isFunction)(title) ? title() : title;
+                const hintText = (0, lodash_1.isFunction)(hint) ? hint() : hint;
+                const disabled = !isEnable(editor);
+                const hideHintWhenDisabled = hintWhenDisabled === false || !disabledPopoverVisible || !disabled;
+                const hintWhenDisabledText = typeof hintWhenDisabled === 'string'
+                    ? hintWhenDisabled
+                    : typeof hintWhenDisabled === 'function'
+                        ? hintWhenDisabled()
+                        : (0, common_1.i18n)('toolbar_action_disabled');
+                return (react_1.default.createElement(uikit_1.Popover, { className: b('action-disabled-popover'), tooltipContentClassName: b('action-disabled-tooltip'), content: hintWhenDisabledText, placement: 'left', disabled: hideHintWhenDisabled, key: id },
+                    react_1.default.createElement(uikit_1.Menu.Item, { key: id, active: isActive(editor), disabled: !isEnable(editor), onClick: () => {
+                            hide();
+                            if (isPopupItem(data)) {
+                                setPopupItem(data);
+                            }
+                            else {
+                                setPopupItem(undefined);
+                                focus();
+                                exec(editor);
+                                onClick === null || onClick === void 0 ? void 0 : onClick(id);
+                            }
+                        }, icon: react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: (_a = icon.size) !== null && _a !== void 0 ? _a : 16 }), extraProps: { 'aria-label': titleText } },
+                        react_1.default.createElement("div", { className: b('item') },
+                            titleText,
+                            react_1.default.createElement("div", { className: b('extra') },
+                                hotkey && react_1.default.createElement(uikit_1.Hotkey, { value: hotkey }),
+                                hintText && (react_1.default.createElement(components_1.HelpPopover, { className: b('hint'), content: hintText })))))));
+            })
+                .filter(Boolean))),
+        popupItem
+            ? popupItem.renderPopup(Object.assign(Object.assign({}, popupItem), { editor,
+                focus,
+                onClick, anchorRef: buttonRef, hide: () => setPopupItem(undefined) }))
+            : null));
+}
+exports.ToolbarListButton = ToolbarListButton;
+function isPopupItem(item) {
+    return Boolean(item.renderPopup);
+}

package/build/cjs/toolbar/const.d.ts

@@ -0,0 +1,4 @@
+export declare enum ToolbarTooltipDelay {
+    Open = 250,
+    Close = 150
+}

package/build/cjs/toolbar/const.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarTooltipDelay = void 0;
+var ToolbarTooltipDelay;
+(function (ToolbarTooltipDelay) {
+    ToolbarTooltipDelay[ToolbarTooltipDelay["Open"] = 250] = "Open";
+    ToolbarTooltipDelay[ToolbarTooltipDelay["Close"] = 150] = "Close";
+})(ToolbarTooltipDelay = exports.ToolbarTooltipDelay || (exports.ToolbarTooltipDelay = {}));

package/build/cjs/toolbar/flexible.d.ts

@@ -0,0 +1,11 @@
+import type { ToolbarData } from './Toolbar';
+import { ToolbarItemData } from './types';
+export declare type ShrinkToolbarDataParams<E> = {
+    data: ToolbarData<E>;
+    availableWidth: number;
+    hiddenActions?: ToolbarItemData<E>[];
+};
+export declare function shrinkToolbarData<E>({ availableWidth, data, hiddenActions, }: ShrinkToolbarDataParams<E>): {
+    data: ToolbarData<E>;
+    dots?: ToolbarItemData<E>[];
+};

package/build/cjs/toolbar/flexible.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shrinkToolbarData = void 0;
+const types_1 = require("./types");
+/** horizontal gap between item groups in toolbar, px */
+const H_GAP = 17;
+/** single button width, px */
+const B_WIDTH = 28;
+/** single button width with 2 icons – item's icon and arrow icon, px */
+const B_WITH_ARROW_WIDTH = 42;
+/** horizontal gap between buttons in button group, px */
+const BG_H_GAP = 2;
+/** dots button width, px */
+const B_DOTS_WIDTH = B_WIDTH;
+/** dots button left margin, px */
+const B_DOTS_LEFT_GAP = 8;
+const dotsWidth = B_DOTS_LEFT_GAP + B_DOTS_WIDTH;
+function shrinkToolbarData({ availableWidth, data, hiddenActions = [], }) {
+    const fittingData = [];
+    const dotsData = [];
+    let currentWidth = 0;
+    const lastGroupIndex = data.length - 1;
+    const isLastElement = (i, j) => i === lastGroupIndex && j === data[lastGroupIndex].length - 1;
+    let hideAllNext = false;
+    data.forEach((group, i) => {
+        const newGroup = [];
+        group.forEach((item, j) => {
+            currentWidth += getItemWidth(item, i, j, group.length);
+            if (hideAllNext ||
+                (!hiddenActions.length && isLastElement(i, j)
+                    ? // Hide last element only if it doesn't fit
+                        currentWidth > availableWidth
+                    : // Hide other elements if they don't fit counting dots button width
+                        currentWidth + dotsWidth > availableWidth)) {
+                // We found first button that doesn't fit. It means that everything after it doesn't fit too.
+                hideAllNext = true;
+                if (item.type === types_1.ToolbarDataType.SingleButton ||
+                    item.type === types_1.ToolbarDataType.ButtonPopup) {
+                    dotsData.push(item);
+                }
+                else if (item.type === types_1.ToolbarDataType.ListButton) {
+                    dotsData.push(...item.data);
+                }
+            }
+            else {
+                newGroup.push(group[j]);
+            }
+        });
+        if (newGroup.length)
+            fittingData.push(newGroup);
+    });
+    dotsData.push(...hiddenActions);
+    return { data: fittingData, dots: dotsData.length ? dotsData : undefined };
+}
+exports.shrinkToolbarData = shrinkToolbarData;
+function getItemWidth(item, i, j, rowLength) {
+    let additionalWidth = 0;
+    // Add horizontal gap between groups to the first item of all groups except first
+    if (i > 0 && j === 0)
+        additionalWidth += H_GAP;
+    // Add horizontal gapbetween buttons to all items except first
+    if (j > 0 && j < rowLength)
+        additionalWidth += BG_H_GAP;
+    if (item.type === types_1.ToolbarDataType.SingleButton || item.type === types_1.ToolbarDataType.ButtonPopup)
+        return B_WIDTH + additionalWidth;
+    else if (item.type === types_1.ToolbarDataType.ListButton)
+        return B_WITH_ARROW_WIDTH + additionalWidth;
+    else
+        return (item.width || 0) + additionalWidth;
+}

package/build/cjs/toolbar/index.d.ts

@@ -0,0 +1,8 @@
+export * from './const';
+export * from './types';
+export * from './Toolbar';
+export * from './ToolbarButton';
+export * from './ToolbarGroup';
+export * from './ToolbarListButton';
+export * from './FlexToolbar';
+export * from '../bundle/config';

package/build/cjs/toolbar/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./const"), exports);
+tslib_1.__exportStar(require("./types"), exports);
+tslib_1.__exportStar(require("./Toolbar"), exports);
+tslib_1.__exportStar(require("./ToolbarButton"), exports);
+tslib_1.__exportStar(require("./ToolbarGroup"), exports);
+tslib_1.__exportStar(require("./ToolbarListButton"), exports);
+tslib_1.__exportStar(require("./FlexToolbar"), exports);
+tslib_1.__exportStar(require("../bundle/config"), exports);

package/build/cjs/toolbar/types.d.ts

@@ -0,0 +1,87 @@
+import type { RefObject } from 'react';
+import type { HotkeyProps, IconProps } from '@gravity-ui/uikit';
+import type { ClassNameProps } from '../classname';
+import type { ToolbarListButtonData } from './ToolbarListButton';
+export declare type ToolbarBaseProps<E> = ClassNameProps & {
+    editor: E;
+    focus(): void;
+    onClick?(id: string, attrs?: {
+        [key: string]: any;
+    }): void;
+};
+export declare type ToolbarIconData = Pick<IconProps, 'data' | 'size'>;
+export declare type ToolbarItemData<E> = {
+    id: string;
+    icon: ToolbarIconData;
+    title: string | (() => string);
+    hint?: string | (() => string);
+    hotkey?: HotkeyProps['value'];
+    /** @deprecated Use _hintWhenDisabled_ setting instead */
+    disabledPopoverVisible?: boolean;
+    /**
+     * Show hint when _isEnable()_ returns false
+     *
+     * `false` – don't show hint;
+     *
+     * `true` – show default hint;
+     *
+     * `string` or `() => string` – show hint with custom message.
+     *
+     * @default true
+     */
+    hintWhenDisabled?: boolean | string | (() => string);
+    exec(editor: E): void;
+    isActive(editor: E): boolean;
+    isEnable(editor: E): boolean;
+};
+export declare enum ToolbarDataType {
+    SingleButton = "s-button",
+    ListButton = "list-b",
+    ButtonPopup = "b-popup",
+    ReactNode = "r-node",
+    ReactNodeFn = "r-node-fn",
+    ReactComponent = "r-component"
+}
+export declare type ToolbarGroupItemData<E> = ToolbarSingleItemData<E> | ToolbarButtonPopupData<E> | ToolbarListItemData<E> | ToolbarReactNodeData | ToolbarReactNodeFnData<E> | ToolbarReactComponentData<E>;
+export declare type ToolbarSingleItemData<E> = ToolbarItemData<E> & {
+    id: string;
+    type: ToolbarDataType.SingleButton;
+    className?: string;
+};
+export declare type ToolbarListItemData<E> = ToolbarListButtonData<E> & {
+    id: string;
+    type: ToolbarDataType.ListButton;
+    className?: string;
+};
+export declare type ToolbarReactComponentData<E> = {
+    id: string;
+    type: ToolbarDataType.ReactComponent;
+    width: number;
+    className?: string;
+    component: React.ComponentType<ToolbarBaseProps<E>>;
+};
+export declare type ToolbarButtonPopupData<E> = ToolbarItemData<E> & {
+    /** not used, may be an empty function */
+    exec: ToolbarItemData<E>['exec'];
+    type: ToolbarDataType.ButtonPopup;
+    renderPopup: (props: ToolbarBaseProps<E> & {
+        hide: () => void;
+        anchorRef: RefObject<HTMLElement>;
+    }) => React.ReactNode;
+    className?: string;
+};
+export declare type ToolbarListButtonItemData<E> = ToolbarItemData<E> & {
+    doNotActivateList?: boolean;
+};
+export declare type ToolbarReactNodeData = {
+    id: string;
+    type: ToolbarDataType.ReactNode;
+    width: number;
+    content: React.ReactNode;
+};
+export declare type ToolbarReactNodeFnData<E> = {
+    id: string;
+    type: ToolbarDataType.ReactNodeFn;
+    width: number;
+    content: (e: E) => React.ReactNode;
+};

package/build/cjs/toolbar/types.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarDataType = void 0;
+var ToolbarDataType;
+(function (ToolbarDataType) {
+    ToolbarDataType["SingleButton"] = "s-button";
+    ToolbarDataType["ListButton"] = "list-b";
+    ToolbarDataType["ButtonPopup"] = "b-popup";
+    ToolbarDataType["ReactNode"] = "r-node";
+    ToolbarDataType["ReactNodeFn"] = "r-node-fn";
+    ToolbarDataType["ReactComponent"] = "r-component";
+})(ToolbarDataType = exports.ToolbarDataType || (exports.ToolbarDataType = {}));

package/build/cjs/types/spec.d.ts

@@ -0,0 +1,24 @@
+export {};
+declare module 'prosemirror-model' {
+    interface NodeSpec {
+        /**
+         * Determines whether this node is part of complex block,
+         * e.g. yfm-cut, yfm-note, tables, etc...
+         * And indicates its own role
+         */
+        complex?: 'root' | 'inner' | 'leaf';
+        escapeText?: boolean;
+        /**
+         * Set `false` to disable gapcursor selection inside this node.
+         *
+         * @default true
+         */
+        gapcursor?: boolean;
+    }
+    interface MarkSpec {
+        /**
+         * Can be used to indicate that this mark contains code.
+         */
+        code?: boolean;
+    }
+}

package/build/cjs/types/spec.js

@@ -0,0 +1,7 @@
+"use strict";
+////////////////////////////////////////////////////
+///                                              ///
+///   This is a place to extend spec types       ///
+///                                              ///
+////////////////////////////////////////////////////
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/utils/actions.d.ts

@@ -0,0 +1,4 @@
+import type { MarkType } from 'prosemirror-model';
+import type { ActionSpec } from '../core';
+export declare function defineActions<Keys extends string>(actions: Record<Keys, ActionSpec>): Record<Keys, ActionSpec>;
+export declare function createToggleMarkAction(markType: MarkType): ActionSpec;