npm - @gravity-ui/markdown-editor - Versions diffs - 15.34.5 → 15.35.1 - Mend

@gravity-ui/markdown-editor 15.34.5 → 15.35.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (141) hide show

package/build/cjs/toolbar/ToolbarListButton.js CHANGED Viewed

@@ -13,6 +13,7 @@ const react_utils_1 = require("../react-utils/index.js");
 const hooks_1 = require("../react-utils/hooks.js");
 const PreviewTooltip_1 = require("./PreviewTooltip.js");
 const ToolbarButton_1 = require("./ToolbarButton.js");
+const hooks_2 = require("./hooks.js");
 require("./ToolbarListButton.css");
 const b = (0, classname_1.cn)('toolbar-list-button');
 function ToolbarListButton({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, replaceActiveIcon, qa, qaMenu, qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint', disableHotkey, disablePreview, disableTooltip, }) {
@@ -20,7 +21,8 @@ function ToolbarListButton({ className, editor, focus, onClick, icon, title, wit
     const [open, , hide, toggleOpen] = (0, hooks_1.useBooleanState)(false);
     const [popupItem, setPopupItem] = (0, react_1.useState)();
     const zIndex = (0, react_utils_1.useTargetZIndex)(layout_1.LAYOUT.STICKY_TOOLBAR);
-    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));
+    const actionsState = (0, hooks_2.useActionsState)(editor, data);
+    const everyDisabled = alwaysActive ? false : actionsState.every((item) => !item.enabled);
     const popupOpen = everyDisabled ? false : open;
     const shouldForceHide = open && !popupOpen;
     (0, react_1.useEffect)(() => {
@@ -30,7 +32,7 @@ function ToolbarListButton({ className, editor, focus, onClick, icon, title, wit
     }, [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;
@@ -47,11 +49,12 @@ function ToolbarListButton({ className, editor, focus, onClick, icon, title, wit
                     else
                         toggleOpen();
                 }, disableTooltip: disableTooltip || popupOpen, children: buttonContent }), (0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorElement: anchorElement, open: popupOpen, onOpenChange: hide, zIndex: typeof zIndex === 'number' ? zIndex : undefined, children: (0, jsx_runtime_1.jsx)(uikit_1.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 = (0, lodash_1.isFunction)(title) ? title() : title;
                         const hintText = (0, lodash_1.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
@@ -70,7 +73,7 @@ function ToolbarListButton({ className, editor, focus, onClick, icon, title, wit
                                 onClick?.(id);
                             }
                         };
-                        return ((0, jsx_runtime_1.jsx)(uikit_1.Popover, { className: b('action-disabled-popover'), content: (0, jsx_runtime_1.jsx)("div", { className: b('action-disabled-tooltip'), children: hintWhenDisabledText }), placement: "left", modal: false, disabled: hideHintWhenDisabled, qa: qaActionDisabledPopover, children: (props, ref) => ((0, jsx_runtime_1.jsx)(PreviewTooltip_1.PreviewTooltip, { preview: preview, disabled: disablePreview, children: (0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { ref: ref, active: isActive(editor), disabled: !isEnable(editor), onClick: handleClick, iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon.data, size: icon.size ?? 16 }), extraProps: {
+                        return ((0, jsx_runtime_1.jsx)(uikit_1.Popover, { className: b('action-disabled-popover'), content: (0, jsx_runtime_1.jsx)("div", { className: b('action-disabled-tooltip'), children: hintWhenDisabledText }), placement: "left", modal: false, disabled: hideHintWhenDisabled, qa: qaActionDisabledPopover, children: (props, ref) => ((0, jsx_runtime_1.jsx)(PreviewTooltip_1.PreviewTooltip, { preview: preview, disabled: disablePreview, children: (0, jsx_runtime_1.jsx)(uikit_1.Menu.Item, { ref: ref, active: actionState.active, disabled: disabled, onClick: handleClick, iconStart: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icon.data, size: icon.size ?? 16 }), extraProps: {
                                         ...props,
                                         'aria-label': titleText,
                                     }, children: (0, jsx_runtime_1.jsxs)("div", { className: b('item'), children: [titleText, !disableHotkey && ((0, jsx_runtime_1.jsxs)("div", { className: b('extra'), children: [hotkey && (0, jsx_runtime_1.jsx)(uikit_1.Hotkey, { value: hotkey }), hintText && ((0, jsx_runtime_1.jsx)(uikit_1.HelpMark, { className: b('hint'), popoverProps: { modal: false }, children: hintText }))] }))] }) }, id) })) }, id));

package/build/cjs/toolbar/ToolbarListButton.js.map CHANGED Viewed

	@@ -1 +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"]}
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 {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/cjs/toolbar/ToolbarRerender.d.ts ADDED Viewed

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

package/build/cjs/toolbar/ToolbarRerender.js ADDED Viewed

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarUpdateOnRerender = ToolbarUpdateOnRerender;
+exports.ToolbarWrapToContext = ToolbarWrapToContext;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_use_1 = require("react-use");
+const utils_1 = require("../utils/index.js");
+const context_1 = require("./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.
+function ToolbarUpdateOnRerender({ content }) {
+    const rerender = (0, react_use_1.useUpdate)();
+    const context = (0, context_1.useToolbarContext)();
+    (0, react_1.useEffect)(() => {
+        if (!context)
+            return undefined;
+        context.eventBus.on('update', rerender);
+        return () => {
+            context.eventBus.off('update', rerender);
+        };
+    }, [context, rerender]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.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.
+function ToolbarWrapToContext({ editor, children }) {
+    const outerContext = (0, context_1.useToolbarContext)();
+    const innerContext = (0, react_1.useMemo)(() => {
+        if (outerContext)
+            return undefined;
+        const eventBus = new utils_1.EventEmitter();
+        return { editor, eventBus };
+    }, [editor, outerContext]);
+    (0, react_1.useEffect)(() => {
+        innerContext?.eventBus.emit('update', null);
+    });
+    // wrapping in inner context only if there is no outer context
+    return innerContext ? ((0, jsx_runtime_1.jsx)(context_1.ToolbarProvider, { value: innerContext, children: children })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+}
+//# sourceMappingURL=ToolbarRerender.js.map

package/build/cjs/toolbar/ToolbarRerender.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ToolbarRerender.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarRerender.tsx"],"names":[],"mappings":";;AAsBA,0DAaC;AAYD,oDAkBC;;AAjED,iCAAiE;AAEjE,yCAAoC;AAEpC,6CAAuC;AAEvC,0CAKmB;AAMnB;;;GAGG;AACH,0GAA0G;AAC1G,SAAgB,uBAAuB,CAAC,EAAC,OAAO,EAA8B;IAC1E,MAAM,QAAQ,GAAG,IAAA,qBAAS,GAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,IAAA,2BAAiB,GAAE,CAAC;IAEpC,IAAA,iBAAS,EAAC,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,2DAAG,OAAO,EAAE,GAAI,CAAC;AAC5B,CAAC;AAMD;;;;GAIG;AACH,0GAA0G;AAC1G,SAAgB,oBAAoB,CAAI,EAAC,MAAM,EAAE,QAAQ,EAA+B;IACpF,MAAM,YAAY,GAAG,IAAA,2BAAiB,GAAE,CAAC;IACzC,MAAM,YAAY,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC9B,IAAI,YAAY;YAAE,OAAO,SAAS,CAAC;QACnC,MAAM,QAAQ,GAAG,IAAI,oBAAY,EAAiB,CAAC;QACnD,OAAO,EAAC,MAAM,EAAE,QAAQ,EAAkC,CAAC;IAC/D,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3B,IAAA,iBAAS,EAAC,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,uBAAC,yBAAe,IAAC,KAAK,EAAE,YAAY,YAAG,QAAQ,GAAmB,CACrE,CAAC,CAAC,CAAC,CACA,2DAAG,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/cjs/toolbar/context.d.ts ADDED Viewed

@@ -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/cjs/toolbar/context.js ADDED Viewed

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarProvider = void 0;
+exports.useToolbarContext = useToolbarContext;
+const react_1 = require("react");
+// TODO: specify generic editor type
+const ToolbarContext = (0, react_1.createContext)(undefined);
+exports.ToolbarProvider = ToolbarContext.Provider;
+function useToolbarContext() {
+    return (0, react_1.useContext)(ToolbarContext);
+}
+//# sourceMappingURL=context.js.map

package/build/cjs/toolbar/context.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"context.js","sourceRoot":"../../../src","sources":["toolbar/context.ts"],"names":[],"mappings":";;;AAmBA,8CAEC;AArBD,iCAAgD;AAchD,oCAAoC;AACpC,MAAM,cAAc,GAAG,IAAA,qBAAa,EAA2C,SAAS,CAAC,CAAC;AAE7E,QAAA,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC;AAEvD,SAAgB,iBAAiB;IAC7B,OAAO,IAAA,kBAAU,EAAC,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/cjs/toolbar/hooks.d.ts ADDED Viewed

@@ -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/cjs/toolbar/hooks.js ADDED Viewed

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useActionState = useActionState;
+exports.useActionsState = useActionsState;
+const react_1 = require("react");
+const react_use_1 = require("react-use");
+const lodash_1 = require("../lodash.js");
+const context_1 = require("./context.js");
+function useActionState(editor, { isActive, isEnable }) {
+    const context = (0, context_1.useToolbarContext)();
+    const eventBus = context?.eventBus;
+    const [state, setState] = (0, react_1.useState)({
+        active: false,
+        enabled: true,
+    });
+    const stateRef = (0, react_use_1.useLatest)(state);
+    (0, react_1.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;
+}
+function useActionsState(editor, actions) {
+    const context = (0, context_1.useToolbarContext)();
+    const eventBus = context?.eventBus;
+    const [state, setState] = (0, react_1.useState)(() => actions.map(() => ({
+        active: false,
+        enabled: true,
+    })));
+    const stateRef = (0, react_use_1.useLatest)(state);
+    (0, react_1.useEffect)(() => {
+        const onUpdate = () => {
+            const currentState = stateRef.current;
+            const newState = actions.map(({ isActive, isEnable }) => ({
+                active: isActive(editor),
+                enabled: isEnable(editor),
+            }));
+            if (!(0, lodash_1.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/cjs/toolbar/hooks.js.map ADDED Viewed

@@ -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/cjs/toolbar/index.d.ts CHANGED Viewed

@@ -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/cjs/toolbar/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToolbarContext = exports.ToolbarProvider = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./const.js"), exports);
 tslib_1.__exportStar(require("./types.js"), exports);
@@ -8,4 +9,7 @@ tslib_1.__exportStar(require("./ToolbarButton.js"), exports);
 tslib_1.__exportStar(require("./ToolbarGroup.js"), exports);
 tslib_1.__exportStar(require("./ToolbarListButton.js"), exports);
 tslib_1.__exportStar(require("./FlexToolbar.js"), exports);
+var context_1 = require("./context.js");
+Object.defineProperty(exports, "ToolbarProvider", { enumerable: true, get: function () { return context_1.ToolbarProvider; } });
+Object.defineProperty(exports, "useToolbarContext", { enumerable: true, get: function () { return context_1.useToolbarContext; } });
 //# sourceMappingURL=index.js.map

package/build/cjs/toolbar/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../src","sources":["toolbar/index.ts"],"names":[],"mappings":"~~;;;~~AAAA,qDAAwB;AACxB,qDAAwB;AACxB,uDAA0B;AAC1B,6DAAgC;AAChC,4DAA+B;AAC/B,iEAAoC;AACpC,2DAA8B","sourcesContent":["export * from './const';\nexport * from './types';\nexport * from './Toolbar';\nexport * from './ToolbarButton';\nexport * from './ToolbarGroup';\nexport * from './ToolbarListButton';\nexport * from './FlexToolbar';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../src","sources":["toolbar/index.ts"],"names":[],"mappings":";;;;AAAA,qDAAwB;AACxB,qDAAwB;AACxB,uDAA0B;AAC1B,6DAAgC;AAChC,4DAA+B;AAC/B,iEAAoC;AACpC,2DAA8B;AAE9B,wCAAuF;AAA/E,0GAAA,eAAe,OAAA;AAAE,4GAAA,iBAAiB,OAAA","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/cjs/toolbar/types.d.ts CHANGED Viewed

@@ -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/cjs/toolbar/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"../../../src","sources":["toolbar/types.ts"],"names":[],"mappings":";;;AAgDA,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,+BAAf,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"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"../../../src","sources":["toolbar/types.ts"],"names":[],"mappings":";;;AAgDA,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,+BAAf,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/cjs/version.js CHANGED Viewed

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '15.34.5' !== 'undefined' ? '15.34.5' : 'unknown';
+exports.VERSION = typeof '15.35.1' !== 'undefined' ? '15.35.1' : 'unknown';
 //# sourceMappingURL=version.js.map

package/build/cjs/version.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":";;;AAAA,sEAAsE;AACzD,QAAA,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"]}
1	+ {"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":";;;AAAA,sEAAsE;AACzD,QAAA,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.1' !== 'undefined' ? '15.35.1' : 'unknown';\n"]}

package/build/cjs/view/hocs/withMermaid/index.js CHANGED Viewed

@@ -11,7 +11,12 @@ function withMermaid(opts) {
         const renderMermaid = (0, react_2.useMermaid)();
         (0, useMermaidRuntime_1.useMermaidRuntime)(meta, opts.runtime);
         (0, react_1.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 (0, jsx_runtime_1.jsx)(Component, { ...props, ref: ref });
     });

package/build/cjs/view/hocs/withMermaid/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["view/hocs/withMermaid/index.tsx"],"names":[],"mappings":";;AAkBA,~~kCAiBC~~;;~~AAnCD~~,iCAAoF;AAEpF,6DAA6D;AAG7D,8DAAsD;AAatD,SAAgB,WAAW,CAAC,IAAwB;IAChD,OAAO,CACH,SAA2D,EAC7D,EAAE,CACA,IAAA,kBAAU,EAAuC,SAAS,SAAS,CAAC,KAAK,EAAE,GAAG;QAC1E,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAC,GAAG,KAAK,CAAC;QAE1C,MAAM,aAAa,GAAG,IAAA,kBAAU,GAAE,CAAC;QAEnC,IAAA,qCAAiB,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,IAAA,iBAAS,EAAC,GAAG,EAAE;YACX,aAAa,CAAC,aAAa,CAAC,CAAC;~~QACjC~~,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;QAEzC,OAAO,uBAAC,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"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["view/hocs/withMermaid/index.tsx"],"names":[],"mappings":";;AAkBA,kCAsBC;;AAxCD,iCAAoF;AAEpF,6DAA6D;AAG7D,8DAAsD;AAatD,SAAgB,WAAW,CAAC,IAAwB;IAChD,OAAO,CACH,SAA2D,EAC7D,EAAE,CACA,IAAA,kBAAU,EAAuC,SAAS,SAAS,CAAC,KAAK,EAAE,GAAG;QAC1E,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAC,GAAG,KAAK,CAAC;QAE1C,MAAM,aAAa,GAAG,IAAA,kBAAU,GAAE,CAAC;QAEnC,IAAA,qCAAiB,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAEtC,IAAA,iBAAS,EAAC,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,uBAAC,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/esm/bundle/MarkupEditorView.js CHANGED Viewed

@@ -26,7 +26,7 @@ export const MarkupEditorView = memo((props) => {
     return (_jsxs("div", { className: b({ toolbar: toolbarVisible }, [className]), "data-qa": qa, children: [toolbarVisible ? (_jsx(MarkupToolbarContextProvider, { value: {
                     uploadHandler: editor.fileUploadHandler,
                     needToSetDimensionsForUploadedImages: editor.needToSetDimensionsForUploadedImages,
-                }, children: _jsx(ToolbarView, { qa: "g-md-toolbar-main", editor: editor, editorMode: "markup", toolbarEditor: editor, hiddenActionsConfig: hiddenActionsConfig, stickyToolbar: stickyToolbar, toolbarConfig: toolbarConfig, toolbarFocus: () => editor.focus(), settingsVisible: settingsVisible, className: b('toolbar', [toolbarClassName]), toolbarDisplay: toolbarDisplay, children: children }) })) : null, _jsx(MarkupEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor', { 'toolbar-visible': toolbarVisible }), children: _jsx(ReactRendererComponent, { storage: editor.renderStorage }) })] }));
+                }, children: _jsx(ToolbarView, { qa: "g-md-toolbar-main", editor: editor, editorMode: "markup", toolbarEditor: editor, hiddenActionsConfig: hiddenActionsConfig, stickyToolbar: stickyToolbar, toolbarConfig: toolbarConfig, settingsVisible: settingsVisible, className: b('toolbar', [toolbarClassName]), toolbarDisplay: toolbarDisplay, children: children }) })) : null, _jsx(MarkupEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor', { 'toolbar-visible': toolbarVisible }), children: _jsx(ReactRendererComponent, { storage: editor.renderStorage }) })] }));
 });
 MarkupEditorView.displayName = 'MarkdownMarkupEditorView';
 //# sourceMappingURL=MarkupEditorView.js.map

package/build/esm/bundle/MarkupEditorView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkupEditorView.js","sourceRoot":"../../../src","sources":["bundle/MarkupEditorView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAsB,EAAE,EAAC,wBAAqB;AACrD,OAAO,EAAC,sBAAsB,EAAC,+BAAsB;AACrD,OAAO,EAAC,YAAY,EAAC,qBAAkB;AACvC,OAAO,EAAC,aAAa,EAAC,gCAA6B;AAGnD,OAAO,EAAC,qBAAqB,EAAC,mCAAgC;AAC9D,OAAO,EAAC,WAAW,EAAC,yBAAsB;AAC1C,OAAO,EAAC,4BAA4B,EAAC,oCAAiC;AAItE,gCAAiC;AAEjC,MAAM,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC;AAkB9B,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAwB,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,EACF,MAAM,EACN,SAAS,EACT,eAAe,EACf,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,EAAE,EACF,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,aAAa,GAAG,IAAI,EACpB,cAAc,GACjB,GAAG,KAAK,CAAC;IACV,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE;QACnB,YAAY,CAAC,OAAO,CAAC;YACjB,SAAS,EAAE,eAAe;YAC1B,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;YAClB,SAAS,EAAE,eAAe;YAC1B,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,cAAc,EAAC,EAAE,CAAC,SAAS,CAAC,CAAC,aAAW,EAAE,aACjE,cAAc,CAAC,CAAC,CAAC,CACd,KAAC,4BAA4B,IACzB,KAAK,EAAE;oBACH,aAAa,EAAE,MAAM,CAAC,iBAAiB;oBACvC,oCAAoC,EAChC,MAAM,CAAC,oCAAoC;iBAClD,YAED,KAAC,WAAW,IACR,EAAE,EAAC,mBAAmB,EACtB,MAAM,EAAE,MAAM,EACd,UAAU,EAAC,QAAQ,EACnB,aAAa,EAAE,MAAM,EACrB,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,~~YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAClC,~~eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,gBAAgB,CAAC,CAAC,EAC3C,cAAc,EAAE,cAAc,YAE7B,QAAQ,GACC,GACa,CAClC,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,qBAAqB,IAClB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,cAAc,EAAC,CAAC,YAE3D,KAAC,sBAAsB,IAAC,OAAO,EAAE,MAAM,CAAC,aAAa,GAAI,GACrC,IACtB,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,0BAA0B,CAAC","sourcesContent":["import {memo} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\n\nimport {type ClassNameProps, cn} from '../classname';\nimport {ReactRendererComponent} from '../extensions';\nimport {globalLogger} from '../logger';\nimport {useRenderTime} from '../react-utils/hooks';\n\nimport type {EditorInt} from './Editor';\nimport {MarkupEditorComponent} from './MarkupEditorComponent';\nimport {ToolbarView} from './ToolbarView';\nimport {MarkupToolbarContextProvider} from './toolbar/markup/context';\nimport type {MToolbarData, MToolbarItemData, ToolbarDisplay} from './toolbar/types';\nimport type {MarkdownEditorSplitMode} from './types';\n\nimport './MarkupEditorView.scss';\n\nconst b = cn('markup-editor');\n\nexport type MarkupEditorViewProps = ClassNameProps &\n QAProps & {\n editor: EditorInt;\n autofocus?: boolean;\n toolbarConfig: MToolbarData;\n settingsVisible?: boolean;\n toolbarVisible?: boolean;\n stickyToolbar?: boolean;\n toolbarClassName?: string;\n splitMode?: MarkdownEditorSplitMode;\n splitModeEnabled: boolean;\n hiddenActionsConfig?: MToolbarItemData[];\n children?: React.ReactNode;\n toolbarDisplay?: ToolbarDisplay;\n };\n\nexport const MarkupEditorView = memo<MarkupEditorViewProps>((props) => {\n const {\n editor,\n autofocus,\n settingsVisible,\n toolbarVisible,\n toolbarConfig,\n hiddenActionsConfig,\n qa,\n className,\n toolbarClassName,\n children,\n stickyToolbar = true,\n toolbarDisplay,\n } = props;\n useRenderTime((time) => {\n globalLogger.metrics({\n component: 'markup-editor',\n event: 'render',\n duration: time,\n });\n editor.logger.metrics({\n component: 'markup-editor',\n event: 'render',\n duration: time,\n });\n });\n\n return (\n <div className={b({toolbar: toolbarVisible}, [className])} data-qa={qa}>\n {toolbarVisible ? (\n <MarkupToolbarContextProvider\n value={{\n uploadHandler: editor.fileUploadHandler,\n needToSetDimensionsForUploadedImages:\n editor.needToSetDimensionsForUploadedImages,\n }}\n >\n <ToolbarView\n qa=\"g-md-toolbar-main\"\n editor={editor}\n editorMode=\"markup\"\n toolbarEditor={editor}\n hiddenActionsConfig={hiddenActionsConfig}\n stickyToolbar={stickyToolbar}\n toolbarConfig={toolbarConfig}\n ~~toolbarFocus={() => editor.focus()}\n~~ settingsVisible={settingsVisible}\n className={b('toolbar', [toolbarClassName])}\n toolbarDisplay={toolbarDisplay}\n >\n {children}\n </ToolbarView>\n </MarkupToolbarContextProvider>\n ) : null}\n <MarkupEditorComponent\n autofocus={autofocus}\n editor={editor}\n className={b('editor', {'toolbar-visible': toolbarVisible})}\n >\n <ReactRendererComponent storage={editor.renderStorage} />\n </MarkupEditorComponent>\n </div>\n );\n});\nMarkupEditorView.displayName = 'MarkdownMarkupEditorView';\n"]}
1	+ {"version":3,"file":"MarkupEditorView.js","sourceRoot":"../../../src","sources":["bundle/MarkupEditorView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,OAAO,CAAC;AAI3B,OAAO,EAAsB,EAAE,EAAC,wBAAqB;AACrD,OAAO,EAAC,sBAAsB,EAAC,+BAAsB;AACrD,OAAO,EAAC,YAAY,EAAC,qBAAkB;AACvC,OAAO,EAAC,aAAa,EAAC,gCAA6B;AAGnD,OAAO,EAAC,qBAAqB,EAAC,mCAAgC;AAC9D,OAAO,EAAC,WAAW,EAAC,yBAAsB;AAC1C,OAAO,EAAC,4BAA4B,EAAC,oCAAiC;AAItE,gCAAiC;AAEjC,MAAM,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC;AAkB9B,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAwB,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,EACF,MAAM,EACN,SAAS,EACT,eAAe,EACf,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,EAAE,EACF,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,aAAa,GAAG,IAAI,EACpB,cAAc,GACjB,GAAG,KAAK,CAAC;IACV,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE;QACnB,YAAY,CAAC,OAAO,CAAC;YACjB,SAAS,EAAE,eAAe;YAC1B,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;YAClB,SAAS,EAAE,eAAe;YAC1B,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,cAAc,EAAC,EAAE,CAAC,SAAS,CAAC,CAAC,aAAW,EAAE,aACjE,cAAc,CAAC,CAAC,CAAC,CACd,KAAC,4BAA4B,IACzB,KAAK,EAAE;oBACH,aAAa,EAAE,MAAM,CAAC,iBAAiB;oBACvC,oCAAoC,EAChC,MAAM,CAAC,oCAAoC;iBAClD,YAED,KAAC,WAAW,IACR,EAAE,EAAC,mBAAmB,EACtB,MAAM,EAAE,MAAM,EACd,UAAU,EAAC,QAAQ,EACnB,aAAa,EAAE,MAAM,EACrB,mBAAmB,EAAE,mBAAmB,EACxC,aAAa,EAAE,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,gBAAgB,CAAC,CAAC,EAC3C,cAAc,EAAE,cAAc,YAE7B,QAAQ,GACC,GACa,CAClC,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,qBAAqB,IAClB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAC,iBAAiB,EAAE,cAAc,EAAC,CAAC,YAE3D,KAAC,sBAAsB,IAAC,OAAO,EAAE,MAAM,CAAC,aAAa,GAAI,GACrC,IACtB,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,0BAA0B,CAAC","sourcesContent":["import {memo} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\n\nimport {type ClassNameProps, cn} from '../classname';\nimport {ReactRendererComponent} from '../extensions';\nimport {globalLogger} from '../logger';\nimport {useRenderTime} from '../react-utils/hooks';\n\nimport type {EditorInt} from './Editor';\nimport {MarkupEditorComponent} from './MarkupEditorComponent';\nimport {ToolbarView} from './ToolbarView';\nimport {MarkupToolbarContextProvider} from './toolbar/markup/context';\nimport type {MToolbarData, MToolbarItemData, ToolbarDisplay} from './toolbar/types';\nimport type {MarkdownEditorSplitMode} from './types';\n\nimport './MarkupEditorView.scss';\n\nconst b = cn('markup-editor');\n\nexport type MarkupEditorViewProps = ClassNameProps &\n QAProps & {\n editor: EditorInt;\n autofocus?: boolean;\n toolbarConfig: MToolbarData;\n settingsVisible?: boolean;\n toolbarVisible?: boolean;\n stickyToolbar?: boolean;\n toolbarClassName?: string;\n splitMode?: MarkdownEditorSplitMode;\n splitModeEnabled: boolean;\n hiddenActionsConfig?: MToolbarItemData[];\n children?: React.ReactNode;\n toolbarDisplay?: ToolbarDisplay;\n };\n\nexport const MarkupEditorView = memo<MarkupEditorViewProps>((props) => {\n const {\n editor,\n autofocus,\n settingsVisible,\n toolbarVisible,\n toolbarConfig,\n hiddenActionsConfig,\n qa,\n className,\n toolbarClassName,\n children,\n stickyToolbar = true,\n toolbarDisplay,\n } = props;\n useRenderTime((time) => {\n globalLogger.metrics({\n component: 'markup-editor',\n event: 'render',\n duration: time,\n });\n editor.logger.metrics({\n component: 'markup-editor',\n event: 'render',\n duration: time,\n });\n });\n\n return (\n <div className={b({toolbar: toolbarVisible}, [className])} data-qa={qa}>\n {toolbarVisible ? (\n <MarkupToolbarContextProvider\n value={{\n uploadHandler: editor.fileUploadHandler,\n needToSetDimensionsForUploadedImages:\n editor.needToSetDimensionsForUploadedImages,\n }}\n >\n <ToolbarView\n qa=\"g-md-toolbar-main\"\n editor={editor}\n editorMode=\"markup\"\n toolbarEditor={editor}\n hiddenActionsConfig={hiddenActionsConfig}\n stickyToolbar={stickyToolbar}\n toolbarConfig={toolbarConfig}\n settingsVisible={settingsVisible}\n className={b('toolbar', [toolbarClassName])}\n toolbarDisplay={toolbarDisplay}\n >\n {children}\n </ToolbarView>\n </MarkupToolbarContextProvider>\n ) : null}\n <MarkupEditorComponent\n autofocus={autofocus}\n editor={editor}\n className={b('editor', {'toolbar-visible': toolbarVisible})}\n >\n <ReactRendererComponent storage={editor.renderStorage} />\n </MarkupEditorComponent>\n </div>\n );\n});\nMarkupEditorView.displayName = 'MarkdownMarkupEditorView';\n"]}

package/build/esm/bundle/ToolbarView.d.ts CHANGED Viewed

@@ -7,7 +7,6 @@ export type ToolbarViewProps<T> = ClassNameProps & QAProps & {
     editor: EditorInt;
     editorMode: MarkdownEditorMode;
     toolbarEditor: T;
-    toolbarFocus: () => void;
     toolbarConfig: ToolbarData<T>;
     settingsVisible?: boolean;
     hiddenActionsConfig?: ToolbarItemData<T>[];
@@ -15,4 +14,4 @@ export type ToolbarViewProps<T> = ClassNameProps & QAProps & {
     stickyToolbar: boolean;
     toolbarDisplay?: ToolbarDisplay;
 };
-export declare function ToolbarView<T>({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarConfig, toolbarDisplay, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, qa, }: ToolbarViewProps<T>): JSX.Element;
+export declare function ToolbarView<T>({ editor, editorMode, toolbarEditor, toolbarConfig, toolbarDisplay, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, qa, }: ToolbarViewProps<T>): JSX.Element;

package/build/esm/bundle/ToolbarView.js CHANGED Viewed

@@ -1,26 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef } from 'react';
-import { useUpdate } from 'react-use';
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import { LAYOUT } from "../common/layout.js";
+import { typedMemo } from "../react-utils/memo.js";
+import { EventEmitter } from "../utils/index.js";
 import { i18n } from "../i18n/menubar/index.js";
 import { useSticky } from "../react-utils/useSticky.js";
-import { FlexToolbar } from "../toolbar/index.js";
+import { FlexToolbar, ToolbarProvider, } from "../toolbar/index.js";
 import { stickyCn } from "./sticky/index.js";
-export function ToolbarView({ editor, editorMode, toolbarEditor, toolbarFocus, toolbarConfig, toolbarDisplay, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, qa, }) {
-    const rerender = useUpdate();
-    useLayoutEffect(() => {
-        editor.on('rerender-toolbar', rerender);
-        return () => {
-            editor.off('rerender-toolbar', rerender);
-        };
-    }, [editor, rerender]);
+const MemoizedFlexibleToolbar = typedMemo(FlexToolbar);
+export function ToolbarView({ editor, editorMode, toolbarEditor, toolbarConfig, toolbarDisplay, hiddenActionsConfig, settingsVisible, className, children, stickyToolbar, qa, }) {
     const wrapperRef = useRef(null);
     const isStickyActive = useSticky(wrapperRef) && stickyToolbar;
     const mobile = editor.mobile;
+    const clickHandle = useCallback((id, attrs) => editor.emit('toolbar-action', { id, attrs, editorMode }), [editor, editorMode]);
+    const toolbarProviderValue = useMemo(() => ({
+        editor: toolbarEditor,
+        eventBus: new EventEmitter(),
+    }), [toolbarEditor]);
+    const handleFocus = useCallback(() => {
+        editor.focus();
+    }, [editor]);
+    useLayoutEffect(() => {
+        const onRerender = () => {
+            toolbarProviderValue.eventBus.emit('update', null);
+        };
+        editor.on('rerender-toolbar', onRerender);
+        return () => {
+            editor.off('rerender-toolbar', onRerender);
+        };
+    }, [editor, toolbarProviderValue]);
     return (_jsxs("div", { "data-qa": qa, ref: wrapperRef, className: stickyCn.toolbar({
             withSettings: settingsVisible,
             stickyActive: isStickyActive,
             isSticky: stickyToolbar,
-        }, [className]), "data-layout": LAYOUT.STICKY_TOOLBAR, children: [_jsx(FlexToolbar, { data: toolbarConfig, hiddenActions: hiddenActionsConfig, editor: toolbarEditor, focus: toolbarFocus, dotsTitle: i18n('more_action'), onClick: (id, attrs) => editor.emit('toolbar-action', { id, attrs, editorMode }), display: toolbarDisplay, disableTooltip: mobile, disableHotkey: mobile, disablePreview: mobile }), children] }));
+        }, [className]), "data-layout": LAYOUT.STICKY_TOOLBAR, children: [_jsx(ToolbarProvider, { value: toolbarProviderValue, children: _jsx(MemoizedFlexibleToolbar, { data: toolbarConfig, hiddenActions: hiddenActionsConfig, editor: toolbarEditor, focus: handleFocus, dotsTitle: i18n('more_action'), onClick: clickHandle, display: toolbarDisplay, disableTooltip: mobile, disableHotkey: mobile, disablePreview: mobile }) }), children] }));
 }
 //# sourceMappingURL=ToolbarView.js.map

package/build/esm/bundle/ToolbarView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolbarView.js","sourceRoot":"../../../src","sources":["bundle/ToolbarView.tsx"],"names":[],"mappings":";AAAA,OAAO,~~EAAC~~,eAAe,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;~~AAG9C~~,OAAO,EAAC,~~SAAS~~,EAAC,~~MAAM~~,~~WAAW~~,~~CAAC~~;~~AAEpC~~,OAAO,EAAC,~~MAAM~~,EAAC,~~4BAA0B~~;~~AAGzC~~,OAAO,EAAC,IAAI,EAAC,iCAAwB;AACrC,OAAO,EAAC,SAAS,EAAC,oCAAiC;AACnD,OAAO,~~EAAC~~,WAAW,~~EAA8D~~,4BAAmB;~~AAGpG~~,OAAO,EAAC,QAAQ,EAAC,0BAAiB;~~AAiBlC~~,MAAM,UAAU,WAAW,CAAI,EAC3B,MAAM,EACN,UAAU,EACV,aAAa,EACb,~~YAAY,EACZ,~~aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,EAAE,GACgB;IAClB,MAAM,~~QAAQ~~,GAAG,SAAS,~~EAAE~~,CAAC;~~IAC7B~~,~~eAAe~~,CAAC,GAAG,EAAE~~;QACjB~~,MAAM,CAAC,EAAE,CAAC,~~kBAAkB~~,EAAE,~~QAAQ~~,CAAC,CAAC;~~QACxC~~,OAAO,GAAG,EAAE;~~YACR~~,MAAM,CAAC,~~GAAG~~,CAAC,~~kBAAkB~~,~~EAAE~~,~~QAAQ~~,CAAC,~~CAAC~~;~~QAC7C~~,CAAC,CAAC;~~IACN~~,CAAC,EAAE,CAAC,MAAM,~~EAAE~~,~~QAAQ~~,CAAC,CAAC,~~CAAC~~;~~IAEvB~~,MAAM,UAAU,GAAG,~~MAAM~~,~~CAAiB~~,IAAI,CAAC,CAAC;~~IAChD~~,MAAM,~~cAAc~~,GAAG,~~SAAS~~,CAAC,UAAU,CAAC,~~IAAI~~,~~aAAa~~,CAAC;~~IAE9D~~,~~MAAM~~,~~MAAM~~,~~GAAG~~,MAAM,CAAC,~~MAAM~~,CAAC;~~IAE7B~~,OAAO,CACH,0BACa,EAAE,EACX,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,QAAQ,CAAC,OAAO,CACvB;YACI,YAAY,EAAE,eAAe;YAC7B,YAAY,EAAE,cAAc;YAC5B,QAAQ,EAAE,aAAa;SAC1B,EACD,CAAC,SAAS,CAAC,CACd,iBACY,MAAM,CAAC,cAAc,aAElC,KAAC,~~WAAW~~,~~IACR~~,IAAI,EAAE,aAAa,EACnB,aAAa,EAAE,mBAAmB,EAClC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,~~YAAY~~,~~EACnB~~,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,EAC9B,OAAO,EAAE,~~CAAC~~,~~EAAE~~,~~EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAC,CAAC,EAC9E,~~OAAO,EAAE,cAAc,EACvB,cAAc,EAAE,MAAM,EACtB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACxB,~~EACD~~,QAAQ,IACP,CACT,CAAC;AACN,CAAC","sourcesContent":["import {useLayoutEffect, useRef} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\nimport {~~useUpdate~~} from 'react-~~use~~';\n\nimport {~~LAYOUT~~} from 'src/~~common/layout~~';\n\nimport type {ClassNameProps} from '../classname';\nimport {i18n} from '../i18n/menubar';\nimport {useSticky} from '../react-utils/useSticky';\nimport {FlexToolbar, type ToolbarData, type ToolbarDisplay, type ToolbarItemData} from '../toolbar';\n\nimport type {EditorInt} from './Editor';\nimport {stickyCn} from './sticky';\nimport type {MarkdownEditorMode} from './types';\n\nexport type ToolbarViewProps<T> = ClassNameProps &\n QAProps & {\n editor: EditorInt;\n editorMode: MarkdownEditorMode;\n toolbarEditor: T;\n ~~toolbarFocus: () => void;\n~~ toolbarConfig: ToolbarData<T>;\n settingsVisible?: boolean;\n hiddenActionsConfig?: ToolbarItemData<T>[];\n children?: React.ReactNode;\n stickyToolbar: boolean;\n toolbarDisplay?: ToolbarDisplay;\n };\n\nexport function ToolbarView<T>({\n editor,\n editorMode,\n toolbarEditor,\n ~~toolbarFocus,\n~~ toolbarConfig,\n toolbarDisplay,\n hiddenActionsConfig,\n settingsVisible,\n className,\n children,\n stickyToolbar,\n qa,\n}: ToolbarViewProps<T>) {\n const ~~rerender~~ = ~~useUpdate~~();\n ~~useLayoutEffect~~(() => {\n editor.~~on(~~'~~rerender-toolbar~~'~~, rerender);\~~n ~~return~~ () => ~~{\n~~ editor.~~off~~('~~rerender~~-~~toolbar~~', ~~rerender~~);\n ~~};\n },~~ [editor, ~~rerender~~]);\n\n const ~~wrapperRef~~ = ~~useRef~~<~~HTMLDivElement~~>(~~null~~);\n const ~~isStickyActive~~ = ~~useSticky~~(~~wrapperRef~~) && ~~stickyToolbar~~;\n\n const ~~mobile~~ = editor.~~mobile~~;\n\n return (\n <div\n data-qa={qa}\n ref={wrapperRef}\n className={stickyCn.toolbar(\n {\n withSettings: settingsVisible,\n stickyActive: isStickyActive,\n isSticky: stickyToolbar,\n },\n [className],\n )}\n data-layout={LAYOUT.STICKY_TOOLBAR}\n >\n <~~FlexToolbar~~\n data={toolbarConfig}\n hiddenActions={hiddenActionsConfig}\n editor={toolbarEditor}\n focus={~~toolbarFocus~~}\n dotsTitle={i18n('more_action')}\n onClick={~~(id, attrs) => editor.emit('toolbar-action', {id, attrs, editorMode~~})}\n display={toolbarDisplay}\n disableTooltip={mobile}\n disableHotkey={mobile}\n disablePreview={mobile}\n />\n {children}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"ToolbarView.js","sourceRoot":"../../../src","sources":["bundle/ToolbarView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsB,WAAW,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,EAAC,MAAM,OAAO,CAAC;AAIzF,OAAO,EAAC,MAAM,EAAC,4BAA0B;AACzC,OAAO,EAAC,SAAS,EAAC,+BAA6B;AAC/C,OAAO,EAAC,YAAY,EAAC,0BAAkB;AAGvC,OAAO,EAAC,IAAI,EAAC,iCAAwB;AACrC,OAAO,EAAC,SAAS,EAAC,oCAAiC;AACnD,OAAO,EACH,WAAW,EAKX,eAAe,GAClB,4BAAmB;AAGpB,OAAO,EAAC,QAAQ,EAAC,0BAAiB;AAGlC,MAAM,uBAAuB,GAAG,SAAS,CAAC,WAAW,CAAC,CAAC;AAiBvD,MAAM,UAAU,WAAW,CAAI,EAC3B,MAAM,EACN,UAAU,EACV,aAAa,EACb,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,EAAE,GACgB;IAClB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,cAAc,GAAG,SAAS,CAAC,UAAU,CAAC,IAAI,aAAa,CAAC;IAE9D,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;IAE7B,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAC,EAAE,EAAE,KAAK,EAAE,UAAU,EAAC,CAAC,EACrE,CAAC,MAAM,EAAE,UAAU,CAAC,CACvB,CAAC;IAEF,MAAM,oBAAoB,GAAG,OAAO,CAChC,GAAG,EAAE,CACD,CAAC;QACG,MAAM,EAAE,aAAa;QACrB,QAAQ,EAAE,IAAI,YAAY,EAAkB;KAC/C,CAAgC,EACrC,CAAC,aAAa,CAAC,CAClB,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,MAAM,CAAC,KAAK,EAAE,CAAC;IACnB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,eAAe,CAAC,GAAG,EAAE;QACjB,MAAM,UAAU,GAAG,GAAG,EAAE;YACpB,oBAAoB,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QACvD,CAAC,CAAC;QAEF,MAAM,CAAC,EAAE,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;QAC1C,OAAO,GAAG,EAAE;YACR,MAAM,CAAC,GAAG,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;QAC/C,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEnC,OAAO,CACH,0BACa,EAAE,EACX,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,QAAQ,CAAC,OAAO,CACvB;YACI,YAAY,EAAE,eAAe;YAC7B,YAAY,EAAE,cAAc;YAC5B,QAAQ,EAAE,aAAa;SAC1B,EACD,CAAC,SAAS,CAAC,CACd,iBACY,MAAM,CAAC,cAAc,aAElC,KAAC,eAAe,IAAC,KAAK,EAAE,oBAAoB,YACxC,KAAC,uBAAuB,IACpB,IAAI,EAAE,aAAa,EACnB,aAAa,EAAE,mBAAmB,EAClC,MAAM,EAAE,aAAa,EACrB,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,EAC9B,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,cAAc,EACvB,cAAc,EAAE,MAAM,EACtB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACxB,GACY,EACjB,QAAQ,IACP,CACT,CAAC;AACN,CAAC","sourcesContent":["import {type ComponentProps, useCallback, useLayoutEffect, useMemo, useRef} from 'react';\n\nimport type {QAProps} from '@gravity-ui/uikit';\n\nimport {LAYOUT} from 'src/common/layout';\nimport {typedMemo} from 'src/react-utils/memo';\nimport {EventEmitter} from 'src/utils';\n\nimport type {ClassNameProps} from '../classname';\nimport {i18n} from '../i18n/menubar';\nimport {useSticky} from '../react-utils/useSticky';\nimport {\n FlexToolbar,\n type FlexToolbarProps,\n type ToolbarData,\n type ToolbarDisplay,\n type ToolbarItemData,\n ToolbarProvider,\n} from '../toolbar';\n\nimport type {EditorInt} from './Editor';\nimport {stickyCn} from './sticky';\nimport type {MarkdownEditorMode} from './types';\n\nconst MemoizedFlexibleToolbar = typedMemo(FlexToolbar);\n\ntype ToolbarProviderValue = NonNullable<ComponentProps<typeof ToolbarProvider>['value']>;\n\nexport type ToolbarViewProps<T> = ClassNameProps &\n QAProps & {\n editor: EditorInt;\n editorMode: MarkdownEditorMode;\n toolbarEditor: T;\n toolbarConfig: ToolbarData<T>;\n settingsVisible?: boolean;\n hiddenActionsConfig?: ToolbarItemData<T>[];\n children?: React.ReactNode;\n stickyToolbar: boolean;\n toolbarDisplay?: ToolbarDisplay;\n };\n\nexport function ToolbarView<T>({\n editor,\n editorMode,\n toolbarEditor,\n toolbarConfig,\n toolbarDisplay,\n hiddenActionsConfig,\n settingsVisible,\n className,\n children,\n stickyToolbar,\n qa,\n}: ToolbarViewProps<T>) {\n const wrapperRef = useRef<HTMLDivElement>(null);\n const isStickyActive = useSticky(wrapperRef) && stickyToolbar;\n\n const mobile = editor.mobile;\n\n const clickHandle = useCallback<NonNullable<FlexToolbarProps<T>['onClick']>>(\n (id, attrs) => editor.emit('toolbar-action', {id, attrs, editorMode}),\n [editor, editorMode],\n );\n\n const toolbarProviderValue = useMemo(\n () =>\n ({\n editor: toolbarEditor,\n eventBus: new EventEmitter<{update: null}>(),\n }) satisfies ToolbarProviderValue,\n [toolbarEditor],\n );\n\n const handleFocus = useCallback(() => {\n editor.focus();\n }, [editor]);\n\n useLayoutEffect(() => {\n const onRerender = () => {\n toolbarProviderValue.eventBus.emit('update', null);\n };\n\n editor.on('rerender-toolbar', onRerender);\n return () => {\n editor.off('rerender-toolbar', onRerender);\n };\n }, [editor, toolbarProviderValue]);\n\n return (\n <div\n data-qa={qa}\n ref={wrapperRef}\n className={stickyCn.toolbar(\n {\n withSettings: settingsVisible,\n stickyActive: isStickyActive,\n isSticky: stickyToolbar,\n },\n [className],\n )}\n data-layout={LAYOUT.STICKY_TOOLBAR}\n >\n <ToolbarProvider value={toolbarProviderValue}>\n <MemoizedFlexibleToolbar\n data={toolbarConfig}\n hiddenActions={hiddenActionsConfig}\n editor={toolbarEditor}\n focus={handleFocus}\n dotsTitle={i18n('more_action')}\n onClick={clickHandle}\n display={toolbarDisplay}\n disableTooltip={mobile}\n disableHotkey={mobile}\n disablePreview={mobile}\n />\n </ToolbarProvider>\n {children}\n </div>\n );\n}\n"]}

package/build/esm/bundle/WysiwygEditorView.d.ts CHANGED Viewed

@@ -15,4 +15,4 @@ export type WysiwygEditorViewProps = ClassNameProps & QAProps & {
     children?: React.ReactNode;
     toolbarDisplay?: ToolbarDisplay;
 };
-export declare const WysiwygEditorView: import("react").NamedExoticComponent<WysiwygEditorViewProps>;
+export declare const WysiwygEditorView: React.FC<WysiwygEditorViewProps>;

package/build/esm/bundle/WysiwygEditorView.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
 import { cn } from "../classname.js";
 import { ReactRendererComponent } from "../extensions/index.js";
 import { globalLogger } from "../logger.js";
@@ -8,7 +7,7 @@ import { ToolbarView } from "./ToolbarView.js";
 import { WysiwygEditorComponent } from "./WysiwygEditorComponent.js";
 import "./WysiwygEditorView.css";
 const b = cn('wysiwyg-editor');
-export const WysiwygEditorView = memo((props) => {
+export const WysiwygEditorView = (props) => {
     const { editor, autofocus, settingsVisible, toolbarVisible, toolbarConfig, hiddenActionsConfig, qa, className, toolbarClassName, children, stickyToolbar = true, toolbarDisplay, } = props;
     useRenderTime((time) => {
         globalLogger.metrics({
@@ -22,7 +21,7 @@ export const WysiwygEditorView = memo((props) => {
             duration: time,
         });
     });
-    return (_jsxs("div", { className: b({ toolbar: toolbarVisible }, [className]), "data-qa": qa, children: [toolbarVisible ? (_jsx(ToolbarView, { qa: "g-md-toolbar-main", editor: editor, editorMode: "wysiwyg", toolbarEditor: editor, stickyToolbar: stickyToolbar, toolbarConfig: toolbarConfig, toolbarFocus: () => editor.focus(), hiddenActionsConfig: hiddenActionsConfig, settingsVisible: settingsVisible, className: b('toolbar', [toolbarClassName]), toolbarDisplay: toolbarDisplay, children: children })) : null, _jsx(WysiwygEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor'), children: _jsx(ReactRendererComponent, { storage: editor.renderStorage }) })] }));
-});
+    return (_jsxs("div", { className: b({ toolbar: toolbarVisible }, [className]), "data-qa": qa, children: [toolbarVisible ? (_jsx(ToolbarView, { qa: "g-md-toolbar-main", editor: editor, editorMode: "wysiwyg", toolbarEditor: editor, stickyToolbar: stickyToolbar, toolbarConfig: toolbarConfig, hiddenActionsConfig: hiddenActionsConfig, settingsVisible: settingsVisible, className: b('toolbar', [toolbarClassName]), toolbarDisplay: toolbarDisplay, children: children })) : null, _jsx(WysiwygEditorComponent, { autofocus: autofocus, editor: editor, className: b('editor'), children: _jsx(ReactRendererComponent, { storage: editor.renderStorage }) })] }));
+};
 WysiwygEditorView.displayName = 'MarkdownWysiwgEditorView';
 //# sourceMappingURL=WysiwygEditorView.js.map