@gravity-ui/markdown-editor 15.34.5 → 15.35.0

package/build/esm/toolbar/ToolbarListButton.js

@@ -10,6 +10,7 @@ import { useTargetZIndex } from "../react-utils/index.js";
 import { useBooleanState, useElementState } from "../react-utils/hooks.js";
 import { PreviewTooltip } from "./PreviewTooltip.js";
 import { ToolbarButtonView } from "./ToolbarButton.js";
+import { useActionsState } from "./hooks.js";
 import "./ToolbarListButton.css";
 const b = cn('toolbar-list-button');
 export function ToolbarListButton({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, replaceActiveIcon, qa, qaMenu, qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint', disableHotkey, disablePreview, disableTooltip, }) {
@@ -17,7 +18,8 @@ export function ToolbarListButton({ className, editor, focus, onClick, icon, tit
     const [open, , hide, toggleOpen] = useBooleanState(false);
     const [popupItem, setPopupItem] = useState();
     const zIndex = useTargetZIndex(LAYOUT.STICKY_TOOLBAR);
-    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));
+    const actionsState = useActionsState(editor, data);
+    const everyDisabled = alwaysActive ? false : actionsState.every((item) => !item.enabled);
     const popupOpen = everyDisabled ? false : open;
     const shouldForceHide = open && !popupOpen;
     useEffect(() => {
@@ -27,7 +29,7 @@ export function ToolbarListButton({ className, editor, focus, onClick, icon, tit
     }, [hide, shouldForceHide]);
     if (data.length === 0)
         return null;
-    const activeItem = data.find((item) => item.isActive(editor) && !item.doNotActivateList);
+    const activeItem = data.find((item, idx) => actionsState[idx].active && !item.doNotActivateList);
     const someActive = alwaysActive ? false : Boolean(activeItem);
     if (replaceActiveIcon && someActive && activeItem) {
         icon = activeItem.icon;
@@ -44,11 +46,12 @@ export function ToolbarListButton({ className, editor, focus, onClick, icon, tit
                     else
                         toggleOpen();
                 }, disableTooltip: disableTooltip || popupOpen, children: buttonContent }), _jsx(Popup, { anchorElement: anchorElement, open: popupOpen, onOpenChange: hide, zIndex: typeof zIndex === 'number' ? zIndex : undefined, children: _jsx(Menu, { size: "l", className: b('menu'), qa: qaMenu, "data-toolbar-menu-for": titleText, children: data
-                        .map((data) => {
-                        const { id, title, icon, hotkey, isActive, isEnable, exec, hint, hintWhenDisabled, preview, } = data;
+                        .map((data, idx) => {
+                        const { id, title, icon, hotkey, exec, hint, hintWhenDisabled, preview } = data;
                         const titleText = isFunction(title) ? title() : title;
                         const hintText = isFunction(hint) ? hint() : hint;
-                        const disabled = !isEnable(editor);
+                        const actionState = actionsState[idx];
+                        const disabled = !actionState.enabled;
                         const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;
                         const hintWhenDisabledText = typeof hintWhenDisabled === 'string'
                             ? hintWhenDisabled
@@ -67,7 +70,7 @@ export function ToolbarListButton({ className, editor, focus, onClick, icon, tit
                                 onClick?.(id);
                             }
                         };
-                        return (_jsx(Popover, { className: b('action-disabled-popover'), content: _jsx("div", { className: b('action-disabled-tooltip'), children: hintWhenDisabledText }), placement: "left", modal: false, disabled: hideHintWhenDisabled, qa: qaActionDisabledPopover, children: (props, ref) => (_jsx(PreviewTooltip, { preview: preview, disabled: disablePreview, children: _jsx(Menu.Item, { ref: ref, active: isActive(editor), disabled: !isEnable(editor), onClick: handleClick, iconStart: _jsx(Icon, { data: icon.data, size: icon.size ?? 16 }), extraProps: {
+                        return (_jsx(Popover, { className: b('action-disabled-popover'), content: _jsx("div", { className: b('action-disabled-tooltip'), children: hintWhenDisabledText }), placement: "left", modal: false, disabled: hideHintWhenDisabled, qa: qaActionDisabledPopover, children: (props, ref) => (_jsx(PreviewTooltip, { preview: preview, disabled: disablePreview, children: _jsx(Menu.Item, { ref: ref, active: actionState.active, disabled: disabled, onClick: handleClick, iconStart: _jsx(Icon, { data: icon.data, size: icon.size ?? 16 }), extraProps: {
                                         ...props,
                                         'aria-label': titleText,
                                     }, children: _jsxs("div", { className: b('item'), children: [titleText, !disableHotkey && (_jsxs("div", { className: b('extra'), children: [hotkey && _jsx(Hotkey, { value: hotkey }), hintText && (_jsx(HelpMark, { className: b('hint'), popoverProps: { modal: false }, children: hintText }))] }))] }) }, id) })) }, id));

package/build/esm/toolbar/ToolbarListButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarListButton.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarListButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Fragment, useEffect, useState} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {HelpMark, Hotkey, Icon, Menu, Popover, Popup} from '@gravity-ui/uikit';\n\nimport {LAYOUT} from 'src/common/layout';\n\nimport {cn} from '../classname';\nimport {i18n} from '../i18n/common';\nimport {isFunction} from '../lodash';\nimport {useTargetZIndex} from '../react-utils';\nimport {useBooleanState, useElementState} from '../react-utils/hooks';\n\nimport {PreviewTooltip} from './PreviewTooltip';\nimport {ToolbarButtonView} from './ToolbarButton';\nimport type {\n    ToolbarBaseProps,\n    ToolbarButtonPopupData,\n    ToolbarItemData,\n    ToolbarListButtonData,\n} from './types';\n\nimport './ToolbarListButton.scss';\n\nconst b = cn('toolbar-list-button');\n\nexport type {ToolbarListButtonData};\n\nexport type ToolbarListButtonProps<E> = ToolbarBaseProps<E> &\n    ToolbarListButtonData<E> & {\n        qaMenu?: string;\n        qaActionDisabledPopover?: string;\n    };\n\nexport function ToolbarListButton<E>({\n    className,\n    editor,\n    focus,\n    onClick,\n    icon,\n    title,\n    withArrow,\n    data,\n    alwaysActive,\n    replaceActiveIcon,\n    qa,\n    qaMenu,\n    qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint',\n    disableHotkey,\n    disablePreview,\n    disableTooltip,\n}: ToolbarListButtonProps<E>) {\n    const [anchorElement, setAnchorElement] = useElementState();\n    const [open, , hide, toggleOpen] = useBooleanState(false);\n    const [popupItem, setPopupItem] = useState<ToolbarButtonPopupData<E>>();\n    const zIndex = useTargetZIndex(LAYOUT.STICKY_TOOLBAR);\n\n    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));\n    const popupOpen = everyDisabled ? false : open;\n    const shouldForceHide = open && !popupOpen;\n\n    useEffect(() => {\n        if (shouldForceHide) {\n            hide();\n        }\n    }, [hide, shouldForceHide]);\n\n    if (data.length === 0) return null;\n\n    const activeItem = data.find((item) => item.isActive(editor) && !item.doNotActivateList);\n    const someActive = alwaysActive ? false : Boolean(activeItem);\n\n    if (replaceActiveIcon && someActive && activeItem) {\n        icon = activeItem.icon;\n    }\n\n    const buttonContent = [<Icon key={1} data={icon.data} size={icon.size ?? 16} />];\n    if (withArrow) {\n        buttonContent.push(<Fragment key={2}>{''}</Fragment>);\n        buttonContent.push(<Icon key={3} data={ChevronDown} size={16} />);\n    }\n    const titleText: string = isFunction(title) ? title() : title;\n\n    return (\n        <>\n            <ToolbarButtonView\n                qa={qa}\n                ref={setAnchorElement}\n                active={someActive}\n                enabled={!everyDisabled}\n                title={title}\n                className={b({arrow: withArrow}, [className])}\n                onClick={() => {\n                    if (popupItem) setPopupItem(undefined);\n                    else toggleOpen();\n                }}\n                disableTooltip={disableTooltip || popupOpen}\n            >\n                {buttonContent}\n            </ToolbarButtonView>\n            <Popup\n                anchorElement={anchorElement}\n                open={popupOpen}\n                onOpenChange={hide}\n                zIndex={typeof zIndex === 'number' ? zIndex : undefined}\n            >\n                <Menu size=\"l\" className={b('menu')} qa={qaMenu} data-toolbar-menu-for={titleText}>\n                    {data\n                        .map((data) => {\n                            const {\n                                id,\n                                title,\n                                icon,\n                                hotkey,\n                                isActive,\n                                isEnable,\n                                exec,\n                                hint,\n                                hintWhenDisabled,\n                                preview,\n                            } = data;\n\n                            const titleText = isFunction(title) ? title() : title;\n                            const hintText = isFunction(hint) ? hint() : hint;\n\n                            const disabled = !isEnable(editor);\n\n                            const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;\n                            const hintWhenDisabledText =\n                                typeof hintWhenDisabled === 'string'\n                                    ? hintWhenDisabled\n                                    : typeof hintWhenDisabled === 'function'\n                                      ? hintWhenDisabled()\n                                      : i18n('toolbar_action_disabled');\n\n                            const handleClick = () => {\n                                hide();\n\n                                if (isPopupItem(data)) {\n                                    setPopupItem(data);\n                                } else {\n                                    setPopupItem(undefined);\n                                    focus();\n                                    exec(editor);\n                                    onClick?.(id);\n                                }\n                            };\n\n                            return (\n                                <Popover\n                                    className={b('action-disabled-popover')}\n                                    content={\n                                        <div className={b('action-disabled-tooltip')}>\n                                            {hintWhenDisabledText}\n                                        </div>\n                                    }\n                                    placement=\"left\"\n                                    modal={false}\n                                    disabled={hideHintWhenDisabled}\n                                    qa={qaActionDisabledPopover}\n                                    key={id}\n                                >\n                                    {(props, ref) => (\n                                        <PreviewTooltip preview={preview} disabled={disablePreview}>\n                                            <Menu.Item\n                                                key={id}\n                                                ref={ref}\n                                                active={isActive(editor)}\n                                                disabled={!isEnable(editor)}\n                                                onClick={handleClick}\n                                                iconStart={\n                                                    <Icon data={icon.data} size={icon.size ?? 16} />\n                                                }\n                                                extraProps={{\n                                                    ...props,\n                                                    'aria-label': titleText,\n                                                }}\n                                            >\n                                                <div className={b('item')}>\n                                                    {titleText}\n                                                    {!disableHotkey && (\n                                                        <div className={b('extra')}>\n                                                            {hotkey && <Hotkey value={hotkey} />}\n                                                            {hintText && (\n                                                                <HelpMark\n                                                                    className={b('hint')}\n                                                                    popoverProps={{modal: false}}\n                                                                >\n                                                                    {hintText}\n                                                                </HelpMark>\n                                                            )}\n                                                        </div>\n                                                    )}\n                                                </div>\n                                            </Menu.Item>\n                                        </PreviewTooltip>\n                                    )}\n                                </Popover>\n                            );\n                        })\n                        .filter(Boolean)}\n                </Menu>\n            </Popup>\n            {popupItem\n                ? popupItem.renderPopup({\n                      ...popupItem,\n                      editor,\n                      focus,\n                      onClick,\n                      anchorElement,\n                      hide: () => setPopupItem(undefined),\n                  })\n                : null}\n        </>\n    );\n}\n\nfunction isPopupItem<E>(item: ToolbarItemData<E>): item is ToolbarButtonPopupData<E> {\n    return Boolean((item as ToolbarButtonPopupData<E>).renderPopup);\n}\n"]}
+{"version":3,"file":"ToolbarListButton.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarListButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Fragment, useEffect, useState} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {HelpMark, Hotkey, Icon, Menu, Popover, Popup} from '@gravity-ui/uikit';\n\nimport {LAYOUT} from 'src/common/layout';\n\nimport {cn} from '../classname';\nimport {i18n} from '../i18n/common';\nimport {isFunction} from '../lodash';\nimport {useTargetZIndex} from '../react-utils';\nimport {useBooleanState, useElementState} from '../react-utils/hooks';\n\nimport {PreviewTooltip} from './PreviewTooltip';\nimport {ToolbarButtonView} from './ToolbarButton';\nimport {useActionsState} from './hooks';\nimport type {\n    ToolbarBaseProps,\n    ToolbarButtonPopupData,\n    ToolbarItemData,\n    ToolbarListButtonData,\n} from './types';\n\nimport './ToolbarListButton.scss';\n\nconst b = cn('toolbar-list-button');\n\nexport type {ToolbarListButtonData};\n\nexport type ToolbarListButtonProps<E> = ToolbarBaseProps<E> &\n    ToolbarListButtonData<E> & {\n        qaMenu?: string;\n        qaActionDisabledPopover?: string;\n    };\n\nexport function ToolbarListButton<E>({\n    className,\n    editor,\n    focus,\n    onClick,\n    icon,\n    title,\n    withArrow,\n    data,\n    alwaysActive,\n    replaceActiveIcon,\n    qa,\n    qaMenu,\n    qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint',\n    disableHotkey,\n    disablePreview,\n    disableTooltip,\n}: ToolbarListButtonProps<E>) {\n    const [anchorElement, setAnchorElement] = useElementState();\n    const [open, , hide, toggleOpen] = useBooleanState(false);\n    const [popupItem, setPopupItem] = useState<ToolbarButtonPopupData<E>>();\n    const zIndex = useTargetZIndex(LAYOUT.STICKY_TOOLBAR);\n\n    const actionsState = useActionsState(editor, data);\n\n    const everyDisabled = alwaysActive ? false : actionsState.every((item) => !item.enabled);\n    const popupOpen = everyDisabled ? false : open;\n    const shouldForceHide = open && !popupOpen;\n\n    useEffect(() => {\n        if (shouldForceHide) {\n            hide();\n        }\n    }, [hide, shouldForceHide]);\n\n    if (data.length === 0) return null;\n\n    const activeItem = data.find(\n        (item, idx) => actionsState[idx].active && !item.doNotActivateList,\n    );\n    const someActive = alwaysActive ? false : Boolean(activeItem);\n\n    if (replaceActiveIcon && someActive && activeItem) {\n        icon = activeItem.icon;\n    }\n\n    const buttonContent = [<Icon key={1} data={icon.data} size={icon.size ?? 16} />];\n    if (withArrow) {\n        buttonContent.push(<Fragment key={2}>{''}</Fragment>);\n        buttonContent.push(<Icon key={3} data={ChevronDown} size={16} />);\n    }\n    const titleText: string = isFunction(title) ? title() : title;\n\n    return (\n        <>\n            <ToolbarButtonView\n                qa={qa}\n                ref={setAnchorElement}\n                active={someActive}\n                enabled={!everyDisabled}\n                title={title}\n                className={b({arrow: withArrow}, [className])}\n                onClick={() => {\n                    if (popupItem) setPopupItem(undefined);\n                    else toggleOpen();\n                }}\n                disableTooltip={disableTooltip || popupOpen}\n            >\n                {buttonContent}\n            </ToolbarButtonView>\n            <Popup\n                anchorElement={anchorElement}\n                open={popupOpen}\n                onOpenChange={hide}\n                zIndex={typeof zIndex === 'number' ? zIndex : undefined}\n            >\n                <Menu size=\"l\" className={b('menu')} qa={qaMenu} data-toolbar-menu-for={titleText}>\n                    {data\n                        .map((data, idx) => {\n                            const {id, title, icon, hotkey, exec, hint, hintWhenDisabled, preview} =\n                                data;\n\n                            const titleText = isFunction(title) ? title() : title;\n                            const hintText = isFunction(hint) ? hint() : hint;\n\n                            const actionState = actionsState[idx];\n                            const disabled = !actionState.enabled;\n\n                            const hideHintWhenDisabled = hintWhenDisabled === false || !disabled;\n                            const hintWhenDisabledText =\n                                typeof hintWhenDisabled === 'string'\n                                    ? hintWhenDisabled\n                                    : typeof hintWhenDisabled === 'function'\n                                      ? hintWhenDisabled()\n                                      : i18n('toolbar_action_disabled');\n\n                            const handleClick = () => {\n                                hide();\n\n                                if (isPopupItem(data)) {\n                                    setPopupItem(data);\n                                } else {\n                                    setPopupItem(undefined);\n                                    focus();\n                                    exec(editor);\n                                    onClick?.(id);\n                                }\n                            };\n\n                            return (\n                                <Popover\n                                    className={b('action-disabled-popover')}\n                                    content={\n                                        <div className={b('action-disabled-tooltip')}>\n                                            {hintWhenDisabledText}\n                                        </div>\n                                    }\n                                    placement=\"left\"\n                                    modal={false}\n                                    disabled={hideHintWhenDisabled}\n                                    qa={qaActionDisabledPopover}\n                                    key={id}\n                                >\n                                    {(props, ref) => (\n                                        <PreviewTooltip preview={preview} disabled={disablePreview}>\n                                            <Menu.Item\n                                                key={id}\n                                                ref={ref}\n                                                active={actionState.active}\n                                                disabled={disabled}\n                                                onClick={handleClick}\n                                                iconStart={\n                                                    <Icon data={icon.data} size={icon.size ?? 16} />\n                                                }\n                                                extraProps={{\n                                                    ...props,\n                                                    'aria-label': titleText,\n                                                }}\n                                            >\n                                                <div className={b('item')}>\n                                                    {titleText}\n                                                    {!disableHotkey && (\n                                                        <div className={b('extra')}>\n                                                            {hotkey && <Hotkey value={hotkey} />}\n                                                            {hintText && (\n                                                                <HelpMark\n                                                                    className={b('hint')}\n                                                                    popoverProps={{modal: false}}\n                                                                >\n                                                                    {hintText}\n                                                                </HelpMark>\n                                                            )}\n                                                        </div>\n                                                    )}\n                                                </div>\n                                            </Menu.Item>\n                                        </PreviewTooltip>\n                                    )}\n                                </Popover>\n                            );\n                        })\n                        .filter(Boolean)}\n                </Menu>\n            </Popup>\n            {popupItem\n                ? popupItem.renderPopup({\n                      ...popupItem,\n                      editor,\n                      focus,\n                      onClick,\n                      anchorElement,\n                      hide: () => setPopupItem(undefined),\n                  })\n                : null}\n        </>\n    );\n}\n\nfunction isPopupItem<E>(item: ToolbarItemData<E>): item is ToolbarButtonPopupData<E> {\n    return Boolean((item as ToolbarButtonPopupData<E>).renderPopup);\n}\n"]}

package/build/esm/toolbar/ToolbarRerender.d.ts

@@ -0,0 +1,3 @@
+export type ToolbarRerenderWrapperProps = {
+    content: () => React.ReactNode;
+};

package/build/esm/toolbar/ToolbarRerender.js

@@ -0,0 +1,44 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { useUpdate } from 'react-use';
+import { EventEmitter } from "../utils/index.js";
+import { ToolbarProvider, useToolbarContext, } from "./context.js";
+/**
+ Rerender the content when an update event is received in the event bus from the context.
+ @internal
+ */
+// TODO [major]: Always expect the toolbar to be wrapped in context; remove this component as unnecessary.
+export function ToolbarUpdateOnRerender({ content }) {
+    const rerender = useUpdate();
+    const context = useToolbarContext();
+    useEffect(() => {
+        if (!context)
+            return undefined;
+        context.eventBus.on('update', rerender);
+        return () => {
+            context.eventBus.off('update', rerender);
+        };
+    }, [context, rerender]);
+    return _jsx(_Fragment, { children: content() });
+}
+/**
+ If there is no external context, wraps the content in the toolbar context
+ and emits an update event on each component re-render.
+ @internal
+ */
+// TODO [major]: Always expect the toolbar to be wrapped in context; remove this component as unnecessary.
+export function ToolbarWrapToContext({ editor, children }) {
+    const outerContext = useToolbarContext();
+    const innerContext = useMemo(() => {
+        if (outerContext)
+            return undefined;
+        const eventBus = new EventEmitter();
+        return { editor, eventBus };
+    }, [editor, outerContext]);
+    useEffect(() => {
+        innerContext?.eventBus.emit('update', null);
+    });
+    // wrapping in inner context only if there is no outer context
+    return innerContext ? (_jsx(ToolbarProvider, { value: innerContext, children: children })) : (_jsx(_Fragment, { children: children }));
+}
+//# sourceMappingURL=ToolbarRerender.js.map

package/build/esm/toolbar/ToolbarRerender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarRerender.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarRerender.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAyB,SAAS,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAC,0BAAkB;AAEvC,OAAO,EAGH,eAAe,EACf,iBAAiB,GACpB,qBAAkB;AAMnB;;;GAGG;AACH,0GAA0G;AAC1G,MAAM,UAAU,uBAAuB,CAAC,EAAC,OAAO,EAA8B;IAC1E,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,OAAO;YAAE,OAAO,SAAS,CAAC;QAC/B,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACR,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC7C,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExB,OAAO,4BAAG,OAAO,EAAE,GAAI,CAAC;AAC5B,CAAC;AAMD;;;;GAIG;AACH,0GAA0G;AAC1G,MAAM,UAAU,oBAAoB,CAAI,EAAC,MAAM,EAAE,QAAQ,EAA+B;IACpF,MAAM,YAAY,GAAG,iBAAiB,EAAE,CAAC;IACzC,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,YAAY;YAAE,OAAO,SAAS,CAAC;QACnC,MAAM,QAAQ,GAAG,IAAI,YAAY,EAAiB,CAAC;QACnD,OAAO,EAAC,MAAM,EAAE,QAAQ,EAAkC,CAAC;IAC/D,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACX,YAAY,EAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,8DAA8D;IAC9D,OAAO,YAAY,CAAC,CAAC,CAAC,CAClB,KAAC,eAAe,IAAC,KAAK,EAAE,YAAY,YAAG,QAAQ,GAAmB,CACrE,CAAC,CAAC,CAAC,CACA,4BAAG,QAAQ,GAAI,CAClB,CAAC;AACN,CAAC","sourcesContent":["import {type PropsWithChildren, useEffect, useMemo} from 'react';\n\nimport {useUpdate} from 'react-use';\n\nimport {EventEmitter} from 'src/utils';\n\nimport {\n    type ToolbarContextValue,\n    type ToolbarEvents,\n    ToolbarProvider,\n    useToolbarContext,\n} from './context';\n\nexport type ToolbarRerenderWrapperProps = {\n    content: () => React.ReactNode;\n};\n\n/**\n Rerender the content when an update event is received in the event bus from the context.\n @internal\n */\n// TODO [major]: Always expect the toolbar to be wrapped in context; remove this component as unnecessary.\nexport function ToolbarUpdateOnRerender({content}: ToolbarRerenderWrapperProps) {\n    const rerender = useUpdate();\n    const context = useToolbarContext();\n\n    useEffect(() => {\n        if (!context) return undefined;\n        context.eventBus.on('update', rerender);\n        return () => {\n            context.eventBus.off('update', rerender);\n        };\n    }, [context, rerender]);\n\n    return <>{content()}</>;\n}\n\ntype ToolbarWrapToContextProps<E> = PropsWithChildren<{\n    editor: E;\n}>;\n\n/**\n If there is no external context, wraps the content in the toolbar context\n and emits an update event on each component re-render.\n @internal\n */\n// TODO [major]: Always expect the toolbar to be wrapped in context; remove this component as unnecessary.\nexport function ToolbarWrapToContext<E>({editor, children}: ToolbarWrapToContextProps<E>) {\n    const outerContext = useToolbarContext();\n    const innerContext = useMemo(() => {\n        if (outerContext) return undefined;\n        const eventBus = new EventEmitter<ToolbarEvents>();\n        return {editor, eventBus} satisfies ToolbarContextValue<E>;\n    }, [editor, outerContext]);\n\n    useEffect(() => {\n        innerContext?.eventBus.emit('update', null);\n    });\n\n    // wrapping in inner context only if there is no outer context\n    return innerContext ? (\n        <ToolbarProvider value={innerContext}>{children}</ToolbarProvider>\n    ) : (\n        <>{children}</>\n    );\n}\n"]}

package/build/esm/toolbar/context.d.ts

@@ -0,0 +1,10 @@
+import type { Receiver } from "../utils/event-emitter.js";
+export type ToolbarEvents = {
+    update: null;
+};
+export type ToolbarContextValue<E> = {
+    editor: E;
+    eventBus: Receiver<ToolbarEvents>;
+};
+export declare const ToolbarProvider: import("react").Provider<ToolbarContextValue<unknown> | undefined>;
+export declare function useToolbarContext<E>(): ToolbarContextValue<E>;

package/build/esm/toolbar/context.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+// TODO: specify generic editor type
+const ToolbarContext = createContext(undefined);
+export const ToolbarProvider = ToolbarContext.Provider;
+export function useToolbarContext() {
+    return useContext(ToolbarContext);
+}
+//# sourceMappingURL=context.js.map

package/build/esm/toolbar/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"../../../src","sources":["toolbar/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,UAAU,EAAC,MAAM,OAAO,CAAC;AAchD,oCAAoC;AACpC,MAAM,cAAc,GAAG,aAAa,CAA2C,SAAS,CAAC,CAAC;AAE1F,MAAM,CAAC,MAAM,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC;AAEvD,MAAM,UAAU,iBAAiB;IAC7B,OAAO,UAAU,CAAC,cAAc,CAA2B,CAAC;AAChE,CAAC","sourcesContent":["import {createContext, useContext} from 'react';\n\nimport type {Receiver} from 'src/utils/event-emitter';\n\nexport type ToolbarEvents = {\n    update: null;\n};\n\n// TODO: [major] pass to context all other methods (focus, onClick, etc.)\nexport type ToolbarContextValue<E> = {\n    editor: E;\n    eventBus: Receiver<ToolbarEvents>;\n};\n\n// TODO: specify generic editor type\nconst ToolbarContext = createContext<ToolbarContextValue<unknown> | undefined>(undefined);\n\nexport const ToolbarProvider = ToolbarContext.Provider;\n\nexport function useToolbarContext<E>(): ToolbarContextValue<E> {\n    return useContext(ToolbarContext) as ToolbarContextValue<E>;\n}\n"]}

package/build/esm/toolbar/hooks.d.ts

@@ -0,0 +1,8 @@
+import type { ToolbarItemData } from "./types.js";
+export type UseActionStateReturn = {
+    active: boolean;
+    enabled: boolean;
+};
+export type ToolbarAction<E> = Pick<ToolbarItemData<E>, 'isActive' | 'isEnable'>;
+export declare function useActionState<E>(editor: E, { isActive, isEnable }: ToolbarAction<E>): UseActionStateReturn;
+export declare function useActionsState<E>(editor: E, actions: ToolbarAction<E>[]): UseActionStateReturn[];

package/build/esm/toolbar/hooks.js

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import { useLatest } from 'react-use';
+import { isEqual } from "../lodash.js";
+import { useToolbarContext } from "./context.js";
+export function useActionState(editor, { isActive, isEnable }) {
+    const context = useToolbarContext();
+    const eventBus = context?.eventBus;
+    const [state, setState] = useState({
+        active: false,
+        enabled: true,
+    });
+    const stateRef = useLatest(state);
+    useEffect(() => {
+        const onUpdate = () => {
+            const newActive = isActive(editor);
+            const newEnabled = isEnable(editor);
+            const { active, enabled } = stateRef.current;
+            if (active !== newActive || enabled !== newEnabled) {
+                setState({
+                    active: newActive,
+                    enabled: newEnabled,
+                });
+            }
+        };
+        onUpdate();
+        if (eventBus) {
+            eventBus.on('update', onUpdate);
+            return () => eventBus.off('update', onUpdate);
+        }
+        return undefined;
+    }, [editor, isActive, isEnable, eventBus, stateRef]);
+    return state;
+}
+export function useActionsState(editor, actions) {
+    const context = useToolbarContext();
+    const eventBus = context?.eventBus;
+    const [state, setState] = useState(() => actions.map(() => ({
+        active: false,
+        enabled: true,
+    })));
+    const stateRef = useLatest(state);
+    useEffect(() => {
+        const onUpdate = () => {
+            const currentState = stateRef.current;
+            const newState = actions.map(({ isActive, isEnable }) => ({
+                active: isActive(editor),
+                enabled: isEnable(editor),
+            }));
+            if (!isEqual(currentState, newState)) {
+                setState(newState);
+            }
+        };
+        onUpdate();
+        if (eventBus) {
+            eventBus.on('update', onUpdate);
+            return () => eventBus.off('update', onUpdate);
+        }
+        return undefined;
+    }, [actions, editor, eventBus, stateRef]);
+    return state.length === actions.length
+        ? state
+        : actions.map(() => ({ active: false, enabled: true }));
+}
+//# sourceMappingURL=hooks.js.map

package/build/esm/toolbar/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"../../../src","sources":["toolbar/hooks.ts"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useState} from 'react';\n\nimport {useLatest} from 'react-use';\n\nimport {isEqual} from 'src/lodash';\n\nimport {useToolbarContext} from './context';\nimport type {ToolbarItemData} from './types';\n\nexport type UseActionStateReturn = {\n    active: boolean;\n    enabled: boolean;\n};\n\nexport type ToolbarAction<E> = Pick<ToolbarItemData<E>, 'isActive' | 'isEnable'>;\n\nexport function useActionState<E>(\n    editor: E,\n    {isActive, isEnable}: ToolbarAction<E>,\n): UseActionStateReturn {\n    const context = useToolbarContext();\n    const eventBus = context?.eventBus;\n\n    const [state, setState] = useState<UseActionStateReturn>({\n        active: false,\n        enabled: true,\n    });\n    const stateRef = useLatest(state);\n\n    useEffect(() => {\n        const onUpdate = () => {\n            const newActive = isActive(editor);\n            const newEnabled = isEnable(editor);\n\n            const {active, enabled} = stateRef.current;\n            if (active !== newActive || enabled !== newEnabled) {\n                setState({\n                    active: newActive,\n                    enabled: newEnabled,\n                });\n            }\n        };\n\n        onUpdate();\n\n        if (eventBus) {\n            eventBus.on('update', onUpdate);\n            return () => eventBus.off('update', onUpdate);\n        }\n\n        return undefined;\n    }, [editor, isActive, isEnable, eventBus, stateRef]);\n\n    return state;\n}\n\nexport function useActionsState<E>(editor: E, actions: ToolbarAction<E>[]): UseActionStateReturn[] {\n    const context = useToolbarContext();\n    const eventBus = context?.eventBus;\n\n    const [state, setState] = useState<UseActionStateReturn[]>(() =>\n        actions.map(() => ({\n            active: false,\n            enabled: true,\n        })),\n    );\n    const stateRef = useLatest(state);\n\n    useEffect(() => {\n        const onUpdate = () => {\n            const currentState = stateRef.current;\n            const newState = actions.map(({isActive, isEnable}) => ({\n                active: isActive(editor),\n                enabled: isEnable(editor),\n            }));\n            if (!isEqual(currentState, newState)) {\n                setState(newState);\n            }\n        };\n\n        onUpdate();\n\n        if (eventBus) {\n            eventBus.on('update', onUpdate);\n            return () => eventBus.off('update', onUpdate);\n        }\n\n        return undefined;\n    }, [actions, editor, eventBus, stateRef]);\n\n    return state.length === actions.length\n        ? state\n        : actions.map(() => ({active: false, enabled: true}));\n}\n"]}

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

@@ -5,3 +5,4 @@ export * from "./ToolbarButton.js";
 export * from "./ToolbarGroup.js";
 export * from "./ToolbarListButton.js";
 export * from "./FlexToolbar.js";
+export { ToolbarProvider, useToolbarContext, type ToolbarContextValue } from "./context.js";

package/build/esm/toolbar/index.js

@@ -5,4 +5,5 @@ export * from "./ToolbarButton.js";
 export * from "./ToolbarGroup.js";
 export * from "./ToolbarListButton.js";
 export * from "./FlexToolbar.js";
+export { ToolbarProvider, useToolbarContext } from "./context.js";
 //# sourceMappingURL=index.js.map

package/build/esm/toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../../../src","sources":["toolbar/index.ts"],"names":[],"mappings":"AAAA,2BAAwB;AACxB,2BAAwB;AACxB,6BAA0B;AAC1B,mCAAgC;AAChC,kCAA+B;AAC/B,uCAAoC;AACpC,iCAA8B","sourcesContent":["export * from './const';\nexport * from './types';\nexport * from './Toolbar';\nexport * from './ToolbarButton';\nexport * from './ToolbarGroup';\nexport * from './ToolbarListButton';\nexport * from './FlexToolbar';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../../../src","sources":["toolbar/index.ts"],"names":[],"mappings":"AAAA,2BAAwB;AACxB,2BAAwB;AACxB,6BAA0B;AAC1B,mCAAgC;AAChC,kCAA+B;AAC/B,uCAAoC;AACpC,iCAA8B;AAE9B,OAAO,EAAC,eAAe,EAAE,iBAAiB,EAA2B,qBAAkB","sourcesContent":["export * from './const';\nexport * from './types';\nexport * from './Toolbar';\nexport * from './ToolbarButton';\nexport * from './ToolbarGroup';\nexport * from './ToolbarListButton';\nexport * from './FlexToolbar';\n\nexport {ToolbarProvider, useToolbarContext, type ToolbarContextValue} from './context';\n"]}

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

@@ -69,6 +69,7 @@ export type ToolbarReactComponentData<E> = {
     width: number;
     className?: string;
     component: React.ComponentType<ToolbarBaseProps<E>>;
+    noRerenderOnUpdate?: boolean;
     props?: object;
 };
 export type ToolbarButtonPopupData<E> = ToolbarItemData<E> & {

package/build/esm/toolbar/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../../../src","sources":["toolbar/types.ts"],"names":[],"mappings":"AAgDA,MAAM,CAAN,IAAY,eASX;AATD,WAAY,eAAe;IACvB,4CAAyB,CAAA;IACzB,wCAAqB,CAAA;IACrB,0CAAuB,CAAA;IACvB,kDAAkD;IAClD,uCAAoB,CAAA;IACpB,kDAAkD;IAClD,4CAAyB,CAAA;IACzB,iDAA8B,CAAA;AAClC,CAAC,EATW,eAAe,KAAf,eAAe,QAS1B","sourcesContent":["import type {HotkeyProps, IconProps, QAProps} from '@gravity-ui/uikit';\n\nimport type {ClassNameProps} from '../classname';\n\nexport type ToolbarBaseProps<E> = ClassNameProps &\n    QAProps & {\n        editor: E;\n        focus(): void;\n        onClick?(id: string, attrs?: {[key: string]: any}): void;\n        display?: ToolbarDisplay;\n        disableTooltip?: boolean;\n        disablePreview?: boolean;\n        disableHotkey?: boolean;\n    };\n\nexport type ToolbarIconData = Pick<IconProps, 'data' | 'size'>;\nexport type ToolbarGroupData<E> = Array<ToolbarGroupItemData<E>>;\nexport type ToolbarData<E> = ToolbarGroupData<E>[];\nexport type ToolbarDisplay = 'shrink' | 'scroll';\n\nexport type ToolbarItemData<E> = QAProps & {\n    id: string;\n    icon: ToolbarIconData;\n    title: string | (() => string);\n    hint?: string | (() => string);\n    hotkey?: HotkeyProps['value'];\n    preview?: React.ReactNode;\n    theme?: 'normal' | 'danger';\n    /**\n     * Alternative IDs that can be used to find this command\n     */\n    aliases?: string[];\n    /**\n     * Show hint when _isEnable()_ returns false\n     *\n     * `false` – don't show hint;\n     *\n     * `true` – show default hint;\n     *\n     * `string` or `() => string` – show hint with custom message.\n     * @default true\n     */\n    hintWhenDisabled?: boolean | string | (() => string);\n    exec(editor: E): void;\n    isActive(editor: E): boolean;\n    isEnable(editor: E): boolean;\n};\n\nexport enum ToolbarDataType {\n    SingleButton = 's-button',\n    ListButton = 'list-b',\n    ButtonPopup = 'b-popup',\n    /** @deprecated Use ReactComponent type instead */\n    ReactNode = 'r-node',\n    /** @deprecated Use ReactComponent type instead */\n    ReactNodeFn = 'r-node-fn',\n    ReactComponent = 'r-component',\n}\n\nexport type ToolbarGroupItemData<E> =\n    | ToolbarSingleItemData<E>\n    | ToolbarButtonPopupData<E>\n    | ToolbarListItemData<E>\n    | ToolbarReactNodeData\n    | ToolbarReactNodeFnData<E>\n    | ToolbarReactComponentData<E>;\n\nexport type ToolbarSingleItemData<E> = ToolbarItemData<E> & {\n    id: string;\n    type: ToolbarDataType.SingleButton;\n    className?: string;\n};\n\nexport type ToolbarListItemData<E> = ToolbarListButtonData<E> & {\n    id: string;\n    type: ToolbarDataType.ListButton;\n    className?: string;\n};\n\nexport type ToolbarReactComponentData<E> = {\n    id: string;\n    type: ToolbarDataType.ReactComponent;\n    width: number;\n    className?: string;\n    component: React.ComponentType<ToolbarBaseProps<E>>;\n    props?: object;\n};\n\nexport type ToolbarButtonPopupData<E> = ToolbarItemData<E> & {\n    /** not used, may be an empty function */\n    exec: ToolbarItemData<E>['exec'];\n    type: ToolbarDataType.ButtonPopup;\n    renderPopup: (\n        props: ToolbarBaseProps<E> & {hide: () => void; anchorElement: HTMLElement | null},\n    ) => React.ReactNode;\n    className?: string;\n};\n\nexport type ToolbarListButtonItemData<E> = ToolbarItemData<E> & {\n    doNotActivateList?: boolean;\n};\n\nexport type ToolbarListButtonData<E> = {\n    icon: ToolbarIconData;\n    title: string | (() => string);\n    withArrow?: boolean;\n    data: ToolbarListButtonItemData<E>[];\n    alwaysActive?: boolean;\n    hideDisabled?: boolean;\n    /** When state changes to active, replace default icon with icon of first active item */\n    replaceActiveIcon?: boolean;\n};\n\n/**\n * @deprecated Use ReactComponent type instead\n */\nexport type ToolbarReactNodeData = {\n    id: string;\n    type: ToolbarDataType.ReactNode;\n    width: number;\n    content: React.ReactNode;\n};\n\n/**\n * @deprecated Use ReactComponent type instead\n */\nexport type ToolbarReactNodeFnData<E> = {\n    id: string;\n    type: ToolbarDataType.ReactNodeFn;\n    width: number;\n    content: (e: E) => React.ReactNode;\n};\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../../../src","sources":["toolbar/types.ts"],"names":[],"mappings":"AAgDA,MAAM,CAAN,IAAY,eASX;AATD,WAAY,eAAe;IACvB,4CAAyB,CAAA;IACzB,wCAAqB,CAAA;IACrB,0CAAuB,CAAA;IACvB,kDAAkD;IAClD,uCAAoB,CAAA;IACpB,kDAAkD;IAClD,4CAAyB,CAAA;IACzB,iDAA8B,CAAA;AAClC,CAAC,EATW,eAAe,KAAf,eAAe,QAS1B","sourcesContent":["import type {HotkeyProps, IconProps, QAProps} from '@gravity-ui/uikit';\n\nimport type {ClassNameProps} from '../classname';\n\nexport type ToolbarBaseProps<E> = ClassNameProps &\n    QAProps & {\n        editor: E;\n        focus(): void;\n        onClick?(id: string, attrs?: {[key: string]: any}): void;\n        display?: ToolbarDisplay;\n        disableTooltip?: boolean;\n        disablePreview?: boolean;\n        disableHotkey?: boolean;\n    };\n\nexport type ToolbarIconData = Pick<IconProps, 'data' | 'size'>;\nexport type ToolbarGroupData<E> = Array<ToolbarGroupItemData<E>>;\nexport type ToolbarData<E> = ToolbarGroupData<E>[];\nexport type ToolbarDisplay = 'shrink' | 'scroll';\n\nexport type ToolbarItemData<E> = QAProps & {\n    id: string;\n    icon: ToolbarIconData;\n    title: string | (() => string);\n    hint?: string | (() => string);\n    hotkey?: HotkeyProps['value'];\n    preview?: React.ReactNode;\n    theme?: 'normal' | 'danger';\n    /**\n     * Alternative IDs that can be used to find this command\n     */\n    aliases?: string[];\n    /**\n     * Show hint when _isEnable()_ returns false\n     *\n     * `false` – don't show hint;\n     *\n     * `true` – show default hint;\n     *\n     * `string` or `() => string` – show hint with custom message.\n     * @default true\n     */\n    hintWhenDisabled?: boolean | string | (() => string);\n    exec(editor: E): void;\n    isActive(editor: E): boolean;\n    isEnable(editor: E): boolean;\n};\n\nexport enum ToolbarDataType {\n    SingleButton = 's-button',\n    ListButton = 'list-b',\n    ButtonPopup = 'b-popup',\n    /** @deprecated Use ReactComponent type instead */\n    ReactNode = 'r-node',\n    /** @deprecated Use ReactComponent type instead */\n    ReactNodeFn = 'r-node-fn',\n    ReactComponent = 'r-component',\n}\n\nexport type ToolbarGroupItemData<E> =\n    | ToolbarSingleItemData<E>\n    | ToolbarButtonPopupData<E>\n    | ToolbarListItemData<E>\n    | ToolbarReactNodeData\n    | ToolbarReactNodeFnData<E>\n    | ToolbarReactComponentData<E>;\n\nexport type ToolbarSingleItemData<E> = ToolbarItemData<E> & {\n    id: string;\n    type: ToolbarDataType.SingleButton;\n    className?: string;\n};\n\nexport type ToolbarListItemData<E> = ToolbarListButtonData<E> & {\n    id: string;\n    type: ToolbarDataType.ListButton;\n    className?: string;\n};\n\nexport type ToolbarReactComponentData<E> = {\n    id: string;\n    type: ToolbarDataType.ReactComponent;\n    width: number;\n    className?: string;\n    component: React.ComponentType<ToolbarBaseProps<E>>;\n    noRerenderOnUpdate?: boolean;\n    props?: object;\n};\n\nexport type ToolbarButtonPopupData<E> = ToolbarItemData<E> & {\n    /** not used, may be an empty function */\n    exec: ToolbarItemData<E>['exec'];\n    type: ToolbarDataType.ButtonPopup;\n    renderPopup: (\n        props: ToolbarBaseProps<E> & {hide: () => void; anchorElement: HTMLElement | null},\n    ) => React.ReactNode;\n    className?: string;\n};\n\nexport type ToolbarListButtonItemData<E> = ToolbarItemData<E> & {\n    doNotActivateList?: boolean;\n};\n\nexport type ToolbarListButtonData<E> = {\n    icon: ToolbarIconData;\n    title: string | (() => string);\n    withArrow?: boolean;\n    data: ToolbarListButtonItemData<E>[];\n    alwaysActive?: boolean;\n    hideDisabled?: boolean;\n    /** When state changes to active, replace default icon with icon of first active item */\n    replaceActiveIcon?: boolean;\n};\n\n/**\n * @deprecated Use ReactComponent type instead\n */\nexport type ToolbarReactNodeData = {\n    id: string;\n    type: ToolbarDataType.ReactNode;\n    width: number;\n    content: React.ReactNode;\n};\n\n/**\n * @deprecated Use ReactComponent type instead\n */\nexport type ToolbarReactNodeFnData<E> = {\n    id: string;\n    type: ToolbarDataType.ReactNodeFn;\n    width: number;\n    content: (e: E) => React.ReactNode;\n};\n"]}

package/build/esm/version.js

@@ -1,3 +1,3 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '15.34.5' !== 'undefined' ? '15.34.5' : 'unknown';
+export const VERSION = typeof '15.35.0' !== 'undefined' ? '15.35.0' : 'unknown';
 //# sourceMappingURL=version.js.map

package/build/esm/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["/** During build process, the current version will be injected here */\nexport const VERSION = typeof '15.34.5' !== 'undefined' ? '15.34.5' : 'unknown';\n"]}
+{"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["/** During build process, the current version will be injected here */\nexport const VERSION = typeof '15.35.0' !== 'undefined' ? '15.35.0' : 'unknown';\n"]}

package/build/esm/view/hocs/withMermaid/index.js

@@ -8,7 +8,12 @@ export function withMermaid(opts) {
         const renderMermaid = useMermaid();
         useMermaidRuntime(meta, opts.runtime);
         useEffect(() => {
-            renderMermaid(mermaidConfig);
+            // do not render mermaid diagrams inside the editor component
+            // because they are handled differently (no data-content attribute)
+            // and the editor is managing their render itself
+            renderMermaid(mermaidConfig, {
+                querySelector: '.mermaid:not(.g-md-wysiwyg-editor .mermaid)',
+            });
         }, [html, mermaidConfig, renderMermaid]);
         return _jsx(Component, { ...props, ref: ref });
     });

package/build/esm/view/hocs/withMermaid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["view/hocs/withMermaid/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAyC,UAAU,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAC,UAAU,EAAC,MAAM,mCAAmC,CAAC;AAG7D,OAAO,EAAC,iBAAiB,EAAC,+BAA4B;AAatD,MAAM,UAAU,WAAW,CAAC,IAAwB;IAChD,OAAO,CACH,SAA2D,EAC7D,EAAE,CACA,UAAU,CAAuC,SAAS,SAAS,CAAC,KAAK,EAAE,GAAG;QAC1E,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAC,GAAG,KAAK,CAAC;QAE1C,MAAM,aAAa,GAAG,UAAU,EAAE,CAAC;QAEnC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,SAAS,CAAC,GAAG,EAAE;YACX,aAAa,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;QAEzC,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;IAC9C,CAAC,CAAC,CAAC;AACX,CAAC","sourcesContent":["import {type ComponentType, type RefAttributes, forwardRef, useEffect} from 'react';\n\nimport {useMermaid} from '@diplodoc/mermaid-extension/react';\n\nimport type {PluginRuntime, TransformMeta} from './types';\nimport {useMermaidRuntime} from './useMermaidRuntime';\n\nexport type MermaidConfig = Parameters<ReturnType<typeof useMermaid>>[0];\n\nexport type WithMermaidOptions = {\n    runtime: PluginRuntime;\n};\n\nexport type WithMermaidProps = {\n    meta: TransformMeta;\n    mermaidConfig: MermaidConfig;\n};\n\nexport function withMermaid(opts: WithMermaidOptions) {\n    return <T extends {html: string}>(\n        Component: ComponentType<T & RefAttributes<HTMLDivElement>>,\n    ) =>\n        forwardRef<HTMLDivElement, T & WithMermaidProps>(function WithLatex(props, ref) {\n            const {meta, html, mermaidConfig} = props;\n\n            const renderMermaid = useMermaid();\n\n            useMermaidRuntime(meta, opts.runtime);\n\n            useEffect(() => {\n                renderMermaid(mermaidConfig);\n            }, [html, mermaidConfig, renderMermaid]);\n\n            return <Component {...props} ref={ref} />;\n        });\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["view/hocs/withMermaid/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAyC,UAAU,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAC,UAAU,EAAC,MAAM,mCAAmC,CAAC;AAG7D,OAAO,EAAC,iBAAiB,EAAC,+BAA4B;AAatD,MAAM,UAAU,WAAW,CAAC,IAAwB;IAChD,OAAO,CACH,SAA2D,EAC7D,EAAE,CACA,UAAU,CAAuC,SAAS,SAAS,CAAC,KAAK,EAAE,GAAG;QAC1E,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAC,GAAG,KAAK,CAAC;QAE1C,MAAM,aAAa,GAAG,UAAU,EAAE,CAAC;QAEnC,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,SAAS,CAAC,GAAG,EAAE;YACX,6DAA6D;YAC7D,mEAAmE;YACnE,iDAAiD;YACjD,aAAa,CAAC,aAAa,EAAE;gBACzB,aAAa,EAAE,6CAA6C;aAC/D,CAAC,CAAC;QACP,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;QAEzC,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;IAC9C,CAAC,CAAC,CAAC;AACX,CAAC","sourcesContent":["import {type ComponentType, type RefAttributes, forwardRef, useEffect} from 'react';\n\nimport {useMermaid} from '@diplodoc/mermaid-extension/react';\n\nimport type {PluginRuntime, TransformMeta} from './types';\nimport {useMermaidRuntime} from './useMermaidRuntime';\n\nexport type MermaidConfig = Parameters<ReturnType<typeof useMermaid>>[0];\n\nexport type WithMermaidOptions = {\n    runtime: PluginRuntime;\n};\n\nexport type WithMermaidProps = {\n    meta: TransformMeta;\n    mermaidConfig: MermaidConfig;\n};\n\nexport function withMermaid(opts: WithMermaidOptions) {\n    return <T extends {html: string}>(\n        Component: ComponentType<T & RefAttributes<HTMLDivElement>>,\n    ) =>\n        forwardRef<HTMLDivElement, T & WithMermaidProps>(function WithLatex(props, ref) {\n            const {meta, html, mermaidConfig} = props;\n\n            const renderMermaid = useMermaid();\n\n            useMermaidRuntime(meta, opts.runtime);\n\n            useEffect(() => {\n                // do not render mermaid diagrams inside the editor component\n                // because they are handled differently (no data-content attribute)\n                // and the editor is managing their render itself\n                renderMermaid(mermaidConfig, {\n                    querySelector: '.mermaid:not(.g-md-wysiwyg-editor .mermaid)',\n                });\n            }, [html, mermaidConfig, renderMermaid]);\n\n            return <Component {...props} ref={ref} />;\n        });\n}\n"]}

package/build/styles.css

@@ -279,7 +279,7 @@
 
 .yfm {
   --yfm-hr-height: 4px;
-  --yfm-hr-margin: 24px;
+  --yfm-hr-margin: 24px 0;
 }
 
 .g-root .yfm:not(.yfm_only-light) {
@@ -609,6 +609,11 @@
 .yfm li > p:last-child {
   margin-block: var(--yfm-list-text-only-margin-block, 0);
 }
+
+.yfm {
+  --yfm-hr-height: 4px;
+  --yfm-hr-margin: 24px 0;
+}
 .g-root {
   --yfm-color-text-gray: var(--g-color-text-secondary);
   --yfm-color-text-yellow: var(--g-color-private-yellow-600-solid);
@@ -634,7 +639,7 @@
 }
 .yfm {
   --yfm-hr-height: 4px;
-  --yfm-hr-margin: 24px;
+  --yfm-hr-margin: 24px 0;
 }
 .yfm {
   --yfm-color-base: var(--g-color-base-background);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "15.34.5",
+  "version": "15.35.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -14,18 +14,6 @@
     "codemirror",
     "prosemirror"
   ],
-  "devEngines": {
-    "runtime": {
-      "name": "node",
-      "version": "24",
-      "onFail": "warn"
-    },
-    "packageManager": {
-      "name": "pnpm",
-      "version": "10.17.1",
-      "onFail": "warn"
-    }
-  },
   "exports": {
     ".": {
       "import": {
@@ -173,7 +161,7 @@
     "@lezer/highlight": "^1.2.1",
     "@lezer/markdown": "^1.4.0",
     "@types/is-number": "^7.0.1",
-    "@types/markdown-it": "^12.2.3",
+    "@types/markdown-it": "^13.0.0",
     "base64-arraybuffer": "1.0.2",
     "is-number": "^7.0.0",
     "lodash": "^4.17.21",
@@ -206,35 +194,19 @@
     "uuid": "11.0.5"
   },
   "devDependencies": {
-    "@babel/preset-env": "7.28.5",
-    "@babel/preset-react": "7.28.5",
-    "@babel/preset-typescript": "7.28.5",
-    "@commitlint/cli": "20.2.0",
-    "@commitlint/config-conventional": "20.2.0",
     "@diplodoc/cut-extension": "^1.1.0",
+    "@diplodoc/file-extension": "^0.2.1",
     "@diplodoc/folding-headings-extension": "^0.1.2",
     "@diplodoc/html-extension": "^2.9.1",
     "@diplodoc/latex-extension": "^1.4.1",
-    "@diplodoc/mermaid-extension": "^1.4.0",
+    "@diplodoc/mermaid-extension": "^2.0.0",
     "@diplodoc/quote-link-extension": "0.1.3",
     "@diplodoc/tabs-extension": "^3.7.5",
     "@diplodoc/themes": "^1.0.0",
-    "@diplodoc/transform": "4.66.0",
+    "@diplodoc/transform": "4.69.0",
     "@gravity-ui/components": "4.10.0",
-    "@gravity-ui/eslint-config": "4.2.0",
     "@gravity-ui/gulp-utils": "1.0.3",
-    "@gravity-ui/prettier-config": "1.1.0",
-    "@gravity-ui/stylelint-config": "5.0.0",
-    "@gravity-ui/tsconfig": "1.0.0",
     "@gravity-ui/uikit": "^7.13.1",
-    "@playwright/experimental-ct-react": "1.49.0",
-    "@playwright/test": "1.49.0",
-    "@storybook/addon-docs": "10.1.10",
-    "@storybook/addon-webpack5-compiler-babel": "4.0.0",
-    "@storybook/cli": "10.1.10",
-    "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "10.1.10",
-    "@storybook/react-webpack5": "10.1.10",
     "@types/gulp": "4.0.9",
     "@types/gulp-sass": "5.0.0",
     "@types/jest": "^29.5.14",
@@ -248,43 +220,37 @@
     "@types/sanitize-html": "2.11.0",
     "bem-cn-lite": "4.1.0",
     "dpdm": "3.14.0",
-    "esbuild": "0.25.0",
+    "esbuild": "0.21.5",
     "esbuild-sass-plugin": "2.15.0",
-    "eslint": "9.39.2",
-    "eslint-plugin-lodash": "8.0.0",
-    "eslint-plugin-react": "7.37.5",
     "gulp": "5.0.0",
     "gulp-cli": "3.0.0",
     "gulp-concat": "2.6.1",
     "gulp-replace": "1.1.3",
     "gulp-sass": "6.0.0",
     "gulp-sourcemaps": "3.0.0",
+    "highlight.js": "^11.8.0",
     "identity-obj-proxy": "^3.0.0",
     "ist": "1.1.7",
     "jest": "^29.7.0",
     "jest-css-modules": "^2.1.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "25.0.1",
+    "katex": "^0.16.9",
     "lowlight": "3.0.0",
+    "markdown-it": "^13.0.0",
     "markdown-it-testgen": "^0.1.6",
-    "mermaid": "11.10.0",
+    "mermaid": "11.13.0",
     "npm-run-all": "^4.1.5",
-    "path-browserify": "1.0.1",
     "postcss": "8.5.6",
     "prettier": "3.7.4",
-    "process": "0.11.10",
-    "prosemirror-dev-toolkit": "1.1.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "3.0.2",
     "sass": "^1.84.0",
     "sass-loader": "^13.3.2",
-    "storybook": "10.1.10",
-    "stylelint": "16.26.1",
     "ts-jest": "^29.2.5",
     "typescript": "^5.9.3",
-    "url": "0.11.4",
-    "webpack": "^5.97.1"
+    "@markdown-editor/tsconfig": "0.0.0"
   },
   "peerDependenciesMeta": {
     "@diplodoc/folding-headings-extension": {
@@ -315,7 +281,7 @@
     "@diplodoc/folding-headings-extension": "^0.1.0",
     "@diplodoc/html-extension": "^2.3.2",
     "@diplodoc/latex-extension": "^1.0.3",
-    "@diplodoc/mermaid-extension": "^1.0.0",
+    "@diplodoc/mermaid-extension": "^1.0.0 || ^2.0.0",
     "@diplodoc/quote-link-extension": "^0.1.3",
     "@diplodoc/tabs-extension": "^3.5.1",
     "@diplodoc/transform": "^4.43.0",
@@ -328,17 +294,6 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
-  "lint-staged": {
-    "*.{css,scss}": [
-      "stylelint --fix",
-      "prettier --write"
-    ],
-    "*.{js,jsx,ts,tsx}": [
-      "eslint --cache --fix --quiet",
-      "prettier --write"
-    ],
-    "*.{md,json,yaml,yml}": "prettier --write"
-  },
   "sideEffects": [
     "*.css",
     "*.scss",
@@ -348,34 +303,17 @@
     "build/**/shortcuts/default.js"
   ],
   "scripts": {
-    "deps:global": "npm install -g pnpm@10.17.1",
-    "deps:ci": "pnpm i --frozen-lockfile",
-    "start": "pnpm run sb:start",
     "clean": "gulp clean",
-    "build": "gulp",
+    "build": "gulp build",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "sb:start": "storybook dev -p 8888 -c .storybook",
-    "sb:build": "storybook build -c .storybook -o storybook-static",
     "lint": "run-p -cs lint:*",
-    "lint:js": "eslint \"{src,demo}/**/*.{js,jsx,ts,tsx}\"",
-    "lint:styles": "stylelint \"{src,demo}/**/*.{css,scss}\"",
-    "lint:prettier": "prettier --check \"{src,demo}/**/*.{js,jsx,ts,tsx,css,scss}\"",
-    "check-circular-deps": "node scripts/check-circular-deps.js 49",
+    "lint:js": "eslint './**/*.{js,jsx,mjs,ts,tsx}'",
+    "lint:styles": "stylelint './**/*.{css,scss}'",
+    "lint:prettier": "prettier --check './**/*.{js,jsx,mjs,ts,tsx,css,scss}'",
     "test": "jest",
     "test:cov": "jest --coverage",
     "test:watch": "jest --watchAll",
     "test:esbuild": "node tests/esbuild-test/esbuild-tester.js",
-    "playwright:install": "playwright install chromium webkit --with-deps",
-    "playwright": "playwright test --config=tests/playwright/playwright.config.ts",
-    "playwright:generate": "node scripts/generate-playwright-test.js",
-    "playwright:watch": "pnpm run playwright --ui",
-    "playwright:headed": "playwright test --config=tests/playwright/playwright.config.ts --headed",
-    "playwright:update": "pnpm run playwright -u",
-    "playwright:clear": "rm -rf ./tests/playwright/.cache",
-    "playwright:report": "playwright show-report playwright-report",
-    "playwright:docker": "./scripts/playwright-docker.sh test",
-    "playwright:docker:update": "./scripts/playwright-docker.sh update",
-    "playwright:docker:clear": "./scripts/playwright-docker.sh clear",
-    "playwright:docker:report": "playwright show-report playwright-report-docker"
+    "test:circular-deps": "node scripts/check-circular-deps.js 48"
   }
 }