npm - @gravity-ui/markdown-editor - Versions diffs - 15.21.0 → 15.22.1 - Mend

@gravity-ui/markdown-editor 15.21.0 → 15.22.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 (132) hide show

package/build/esm/bundle/settings/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["bundle/settings/index.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions /\n/ eslint-disable jsx-a11y/click-events-have-key-events */\nimport {memo, useState} from 'react';\n\nimport {Eye, Gear, LogoMarkdown} from '@gravity-ui/icons';\nimport {\n ActionTooltip,\n Button,\n Checkbox,\n HelpMark,\n Icon,\n Menu,\n Popup,\n type PopupPlacement,\n type QAProps,\n} from '@gravity-ui/uikit';\n\nimport {type ClassNameProps, cn} from '../../classname';\nimport {i18n} from '../../i18n/bundle';\nimport WysiwygModeIcon from '../../icons/WysiwygMode';\nimport {noop} from '../../lodash';\nimport {useBooleanState} from '../../react-utils/hooks';\nimport {ToolbarTooltipDelay} from '../../toolbar';\nimport {VERSION} from '../../version';\nimport type {MarkdownEditorMode, MarkdownEditorSplitMode} from '../types';\n\nimport {MarkdownHints} from './MarkdownHints';\n\nimport './index.scss';\n\nconst placement: PopupPlacement = ['bottom-end', 'top-end'];\n\nconst bSettings = cn('editor-settings');\nconst bContent = cn('settings-content');\n\nexport type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {\n renderPreviewButton?: boolean;\n settingsVisible?: boolean \| SettingItems[];\n};\n\nexport const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(props) {\n const {className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible} =\n props;\n const [chevronElement, setChevronElement] = useState<HTMLButtonElement \| null>(null);\n const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);\n\n const areSettingsVisible =\n settingsVisible === true \|\| (Array.isArray(settingsVisible) && settingsVisible.length > 0);\n\n return (\n <div className={bSettings(null, [className])}>\n {renderPreviewButton && (\n <>\n <ActionTooltip\n openDelay={ToolbarTooltipDelay.Open}\n closeDelay={ToolbarTooltipDelay.Close}\n title={i18n('preview_hint')}\n hotkey=\"mod+shift+p\"\n >\n <Button\n qa=\"g-md-markup-preview-button\"\n size=\"m\"\n view=\"flat\"\n pin=\"round-round\"\n className={bSettings('preview-button')}\n onClick={() => onShowPreviewChange?.(!showPreview)}\n selected={showPreview}\n >\n <Icon data={Eye} />\n </Button>\n </ActionTooltip>\n {settingsVisible && <div className={bSettings('separator')} />}\n </>\n )}\n {areSettingsVisible && (\n <>\n <Button\n size=\"m\"\n view=\"flat\"\n pin=\"round-round\"\n onClick={togglePopup}\n ref={setChevronElement}\n qa=\"g-md-settings-button\"\n className={bSettings('dropdown-button')}\n >\n <Icon data={Gear} />\n </Button>\n <Popup\n open={popupShown}\n anchorElement={chevronElement}\n placement={placement}\n onOpenChange={hidePopup}\n >\n <SettingsContent\n {...props}\n qa=\"g-md-settings-content\"\n onClose={hidePopup}\n className={bSettings('content')}\n />\n </Popup>\n </>\n )}\n </div>\n );\n});\n\nexport type SettingItems = 'mode' \| 'toolbar' \| 'split';\n\ntype SettingsContentProps = ClassNameProps &\n QAProps & {\n mode: MarkdownEditorMode;\n onClose: () => void;\n onModeChange: (mode: MarkdownEditorMode) => void;\n onShowPreviewChange: (showPreview: boolean) => void;\n showPreview: boolean;\n toolbarVisibility: boolean;\n settingsVisible?: SettingItems[] \| boolean;\n onToolbarVisibilityChange: (val: boolean) => void;\n splitMode?: MarkdownEditorSplitMode;\n splitModeEnabled?: boolean;\n onSplitModeChange?: (splitModeEnabled: boolean) => void;\n disableMark?: boolean;\n };\n\nconst mdHelpPlacement: PopupPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];\n\nconst SettingsContent: React.FC<SettingsContentProps> = function SettingsContent({\n mode,\n onClose,\n onModeChange,\n toolbarVisibility,\n onToolbarVisibilityChange,\n onSplitModeChange,\n splitMode = false,\n splitModeEnabled,\n className,\n showPreview,\n settingsVisible,\n qa,\n disableMark,\n}) {\n const isSettingsArray = Array.isArray(settingsVisible);\n const showModeSetting = isSettingsArray ? settingsVisible?.includes('mode') : true;\n const showToolbarSetting = isSettingsArray ? settingsVisible?.includes('toolbar') : true;\n const showSplitModeSetting = isSettingsArray ? settingsVisible?.includes('split') : true;\n\n return (\n <div className={bContent(null, [className])} data-qa={qa}>\n {showModeSetting && (\n <Menu size=\"l\" className={bContent('mode')}>\n <Menu.Item\n qa=\"g-md-settings-mode-wysiwyg\"\n active={mode === 'wysiwyg'}\n onClick={() => {\n onModeChange('wysiwyg');\n onClose();\n }}\n iconStart={<Icon data={WysiwygModeIcon} />}\n >\n {i18n('settings_wysiwyg')}\n </Menu.Item>\n <Menu.Item\n qa=\"g-md-settings-mode-markup\"\n active={mode === 'markup'}\n onClick={() => {\n onModeChange('markup');\n onClose();\n }}\n iconStart={<Icon data={LogoMarkdown} />}\n >\n {i18n('settings_markup')}\n {!disableMark && (\n <HelpMark\n popoverProps={{\n placement: mdHelpPlacement,\n modal: false,\n }}\n className={bContent('mode-help')}\n >\n <div\n onClick={(e) => {\n // stop clicks propagation\n // because otherwise click in MarkdownHints handled as click on MenuItem\n e.stopPropagation();\n }}\n >\n <MarkdownHints />\n </div>\n </HelpMark>\n )}\n </Menu.Item>\n </Menu>\n )}\n {showModeSetting && (showSplitModeSetting \|\| showToolbarSetting) && (\n <div className={bContent('separator')} />\n )}\n {showToolbarSetting && !showPreview && (\n <div className={bContent('toolbar')}>\n <Checkbox\n size=\"m\"\n checked={toolbarVisibility}\n onUpdate={onToolbarVisibilityChange}\n >\n {i18n('settings_menubar')}\n </Checkbox>\n <div className={bContent('toolbar-hint')}>{i18n('settings_hint')}</div>\n </div>\n )}\n {showSplitModeSetting && splitMode && (\n <div className={bContent('split-mode')}>\n <Checkbox\n size=\"m\"\n disabled={mode !== 'markup'}\n checked={splitModeEnabled}\n onUpdate={onSplitModeChange ?? noop}\n >\n {i18n('settings_split-mode')}\n </Checkbox>\n <div className={bContent('toolbar-hint')}>\n {i18n('settings_split-mode-hint')}\n </div>\n </div>\n )}\n <span className={bContent('version')}>{VERSION}</span>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["bundle/settings/index.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions /\n/ eslint-disable jsx-a11y/click-events-have-key-events */\nimport {memo, useState} from 'react';\n\nimport {Eye, Gear, LogoMarkdown} from '@gravity-ui/icons';\nimport {\n ActionTooltip,\n Button,\n Checkbox,\n HelpMark,\n Icon,\n Menu,\n Popup,\n type PopupPlacement,\n type QAProps,\n} from '@gravity-ui/uikit';\n\nimport {LAYOUT} from 'src/common/layout';\nimport {getTargetZIndex} from 'src/utils/get-target-z-index';\n\nimport {type ClassNameProps, cn} from '../../classname';\nimport {i18n} from '../../i18n/bundle';\nimport WysiwygModeIcon from '../../icons/WysiwygMode';\nimport {noop} from '../../lodash';\nimport {useBooleanState} from '../../react-utils/hooks';\nimport {ToolbarTooltipDelay} from '../../toolbar';\nimport {VERSION} from '../../version';\nimport type {MarkdownEditorMode, MarkdownEditorSplitMode} from '../types';\n\nimport {MarkdownHints} from './MarkdownHints';\n\nimport './index.scss';\n\nconst placement: PopupPlacement = ['bottom-end', 'top-end'];\n\nconst bSettings = cn('editor-settings');\nconst bContent = cn('settings-content');\n\nexport type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {\n renderPreviewButton?: boolean;\n settingsVisible?: boolean \| SettingItems[];\n};\n\nexport const EditorSettings = memo<EditorSettingsProps>(function EditorSettings(props) {\n const {className, onShowPreviewChange, showPreview, renderPreviewButton, settingsVisible} =\n props;\n const [chevronElement, setChevronElement] = useState<HTMLButtonElement \| null>(null);\n const [popupShown, , hidePopup, togglePopup] = useBooleanState(false);\n\n const areSettingsVisible =\n settingsVisible === true \|\| (Array.isArray(settingsVisible) && settingsVisible.length > 0);\n\n return (\n <div className={bSettings(null, [className])}>\n {renderPreviewButton && (\n <>\n <ActionTooltip\n openDelay={ToolbarTooltipDelay.Open}\n closeDelay={ToolbarTooltipDelay.Close}\n title={i18n('preview_hint')}\n hotkey=\"mod+shift+p\"\n >\n <Button\n qa=\"g-md-markup-preview-button\"\n size=\"m\"\n view=\"flat\"\n pin=\"round-round\"\n className={bSettings('preview-button')}\n onClick={() => onShowPreviewChange?.(!showPreview)}\n selected={showPreview}\n >\n <Icon data={Eye} />\n </Button>\n </ActionTooltip>\n {settingsVisible && <div className={bSettings('separator')} />}\n </>\n )}\n {areSettingsVisible && (\n <>\n <Button\n size=\"m\"\n view=\"flat\"\n pin=\"round-round\"\n onClick={togglePopup}\n ref={setChevronElement}\n qa=\"g-md-settings-button\"\n className={bSettings('dropdown-button')}\n >\n <Icon data={Gear} />\n </Button>\n <Popup\n open={popupShown}\n anchorElement={chevronElement}\n placement={placement}\n onOpenChange={hidePopup}\n zIndex={getTargetZIndex(LAYOUT.STICKY_TOOLBAR)}\n >\n <SettingsContent\n {...props}\n qa=\"g-md-settings-content\"\n onClose={hidePopup}\n className={bSettings('content')}\n />\n </Popup>\n </>\n )}\n </div>\n );\n});\n\nexport type SettingItems = 'mode' \| 'toolbar' \| 'split';\n\ntype SettingsContentProps = ClassNameProps &\n QAProps & {\n mode: MarkdownEditorMode;\n onClose: () => void;\n onModeChange: (mode: MarkdownEditorMode) => void;\n onShowPreviewChange: (showPreview: boolean) => void;\n showPreview: boolean;\n toolbarVisibility: boolean;\n settingsVisible?: SettingItems[] \| boolean;\n onToolbarVisibilityChange: (val: boolean) => void;\n splitMode?: MarkdownEditorSplitMode;\n splitModeEnabled?: boolean;\n onSplitModeChange?: (splitModeEnabled: boolean) => void;\n disableMark?: boolean;\n };\n\nconst mdHelpPlacement: PopupPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];\n\nconst SettingsContent: React.FC<SettingsContentProps> = function SettingsContent({\n mode,\n onClose,\n onModeChange,\n toolbarVisibility,\n onToolbarVisibilityChange,\n onSplitModeChange,\n splitMode = false,\n splitModeEnabled,\n className,\n showPreview,\n settingsVisible,\n qa,\n disableMark,\n}) {\n const isSettingsArray = Array.isArray(settingsVisible);\n const showModeSetting = isSettingsArray ? settingsVisible?.includes('mode') : true;\n const showToolbarSetting = isSettingsArray ? settingsVisible?.includes('toolbar') : true;\n const showSplitModeSetting = isSettingsArray ? settingsVisible?.includes('split') : true;\n\n return (\n <div className={bContent(null, [className])} data-qa={qa}>\n {showModeSetting && (\n <Menu size=\"l\" className={bContent('mode')}>\n <Menu.Item\n qa=\"g-md-settings-mode-wysiwyg\"\n active={mode === 'wysiwyg'}\n onClick={() => {\n onModeChange('wysiwyg');\n onClose();\n }}\n iconStart={<Icon data={WysiwygModeIcon} />}\n >\n {i18n('settings_wysiwyg')}\n </Menu.Item>\n <Menu.Item\n qa=\"g-md-settings-mode-markup\"\n active={mode === 'markup'}\n onClick={() => {\n onModeChange('markup');\n onClose();\n }}\n iconStart={<Icon data={LogoMarkdown} />}\n >\n {i18n('settings_markup')}\n {!disableMark && (\n <HelpMark\n popoverProps={{\n placement: mdHelpPlacement,\n modal: false,\n zIndex: getTargetZIndex(LAYOUT.STICKY_TOOLBAR),\n }}\n className={bContent('mode-help')}\n >\n <div\n onClick={(e) => {\n // stop clicks propagation\n // because otherwise click in MarkdownHints handled as click on MenuItem\n e.stopPropagation();\n }}\n >\n <MarkdownHints />\n </div>\n </HelpMark>\n )}\n </Menu.Item>\n </Menu>\n )}\n {showModeSetting && (showSplitModeSetting \|\| showToolbarSetting) && (\n <div className={bContent('separator')} />\n )}\n {showToolbarSetting && !showPreview && (\n <div className={bContent('toolbar')}>\n <Checkbox\n size=\"m\"\n checked={toolbarVisibility}\n onUpdate={onToolbarVisibilityChange}\n >\n {i18n('settings_menubar')}\n </Checkbox>\n <div className={bContent('toolbar-hint')}>{i18n('settings_hint')}</div>\n </div>\n )}\n {showSplitModeSetting && splitMode && (\n <div className={bContent('split-mode')}>\n <Checkbox\n size=\"m\"\n disabled={mode !== 'markup'}\n checked={splitModeEnabled}\n onUpdate={onSplitModeChange ?? noop}\n >\n {i18n('settings_split-mode')}\n </Checkbox>\n <div className={bContent('toolbar-hint')}>\n {i18n('settings_split-mode-hint')}\n </div>\n </div>\n )}\n <span className={bContent('version')}>{VERSION}</span>\n </div>\n );\n};\n"]}

package/build/esm/bundle/toolbar/ToolbarButtonWithPopupMenu.js CHANGED Viewed

@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo } from 'react';
 import { ChevronDown } from '@gravity-ui/icons';
 import { ActionTooltip, Button, Icon, Menu, Popup, } from '@gravity-ui/uikit';
+import { LAYOUT } from "../../common/layout.js";
+import { getTargetZIndex } from "../../utils/get-target-z-index.js";
 import { cn } from "../../classname.js";
 import { groupBy, isFunction } from "../../lodash.js";
 import { useBooleanState, useElementState } from "../../react-utils/hooks.js";
@@ -31,7 +33,7 @@ export const ToolbarButtonWithPopupMenu = ({ disablePortal, className, focus, on
     return (_jsxs(_Fragment, { children: [_jsx(ActionTooltip, { disabled: popupOpen, openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: textTitle, children: _jsxs(Button, { size: "m", ref: setAnchorElement, view: btnView, selected: btnSelected, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen, "aria-label": textTitle, qa: qa, ...props, children: [_jsx(Icon, { data: icon.data, size: icon.size, className: iconClassName }), '', _jsx(Icon, { data: ChevronDown, className: chevronIconClassName })] }) }), _jsx(Popup, { open: popupOpen, disablePortal: disablePortal, anchorElement: anchorElement, onOpenChange: (open) => {
                     if (!open)
                         hide();
-                }, children: _jsx(Menu, { size: "l", qa: qaMenu, "data-toolbar-menu-for": textTitle, children: Object.entries(groups).map(([label, items], key) => {
+                }, zIndex: getTargetZIndex(LAYOUT.STICKY_TOOLBAR), children: _jsx(Menu, { size: "l", qa: qaMenu, "data-toolbar-menu-for": textTitle, children: Object.entries(groups).map(([label, items], key) => {
                         return (_jsx(Menu.Group, { label: label, className: b('menu-group'), children: items.map(({ id, icon, iconSize = 16, action, text, iconClassname }) => (_jsx(Menu.Item, { iconStart: _jsx(Icon, { data: icon, size: iconSize, className: iconClassname }), active: action.isActive(), disabled: !action.isEnable(), onClick: () => {
                                     hide();
                                     focus();

package/build/esm/bundle/toolbar/ToolbarButtonWithPopupMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToolbarButtonWithPopupMenu.js","sourceRoot":"../../../../src","sources":["bundle/toolbar/ToolbarButtonWithPopupMenu.tsx"],"names":[],"mappings":"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~~YAED~~,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,EAAC,EAAE,EAAE,MAAM,2BAAyB,SAAS,YACtD,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,EAAE;wBAChD,OAAO,CACH,KAAC,IAAI,CAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAY,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,YACzD,KAAK,CAAC,GAAG,CACN,CAAC,EAAC,EAAE,EAAE,IAAI,EAAE,QAAQ,GAAG,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAC,EAAE,EAAE,CAAC,CACxD,KAAC,IAAI,CAAC,IAAI,IAEN,SAAS,EACL,KAAC,IAAI,IACD,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,aAAa,GAC1B,EAEN,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE,EACzB,QAAQ,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,EAC5B,OAAO,EAAE,GAAG,EAAE;oCACV,IAAI,EAAE,CAAC;oCACP,KAAK,EAAE,CAAC;oCACR,MAAM,CAAC,GAAG,EAAE,CAAC;oCACb,OAAO,EAAE,CAAC,EAAE,CAAC,CAAC;gCAClB,CAAC,EACD,UAAU,EAAE,EAAC,YAAY,EAAE,IAAI,EAAC,YAE/B,IAAI,IAlBA,EAAE,CAmBC,CACf,CACJ,IAzB0B,GAAG,CA0BrB,CAChB,CAAC;oBACN,CAAC,CAAC,GACC,GACH,IACT,CACN,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useEffect, useMemo} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {\n ActionTooltip,\n Button,\n Icon,\n type IconProps,\n Menu,\n Popup,\n type PopupProps,\n} from '@gravity-ui/uikit';\n\nimport {cn} from '../../classname';\nimport type {Action} from '../../core';\nimport {groupBy, isFunction} from '../../lodash';\nimport {useBooleanState, useElementState} from '../../react-utils/hooks';\nimport {type ToolbarBaseProps, type ToolbarIconData, ToolbarTooltipDelay} from '../../toolbar';\n\nimport './ToolbarButtonWithPopupMenu.scss';\nconst b = cn('toolbar-button-with-popup-menu');\n\nexport type MenuItem = {\n id: string;\n action: Action;\n icon: IconProps['data'];\n text: string;\n iconSize?: IconProps['size'];\n iconClassname?: string;\n group?: string;\n ignoreActive?: boolean;\n};\n\nexport type ToolbarButtonWithPopupMenuProps = Pick<\n ToolbarBaseProps<never>,\n 'className' \| 'focus' \| 'onClick' \| 'qa'\n> &\n Pick<PopupProps, 'disablePortal'> & {\n icon: ToolbarIconData;\n iconClassName?: string;\n chevronIconClassName?: string;\n title: string \| (() => string);\n menuItems: MenuItem[];\n /** @default 'classic' */\n _selectionType?: 'classic' \| 'light';\n qaMenu?: string;\n };\n\nexport const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProps> = ({\n disablePortal,\n className,\n focus,\n onClick,\n icon,\n iconClassName,\n chevronIconClassName,\n title,\n menuItems,\n _selectionType,\n qa,\n qaMenu,\n ...props\n}) => {\n const [anchorElement, setAnchorElement] = useElementState();\n const [open, , hide, toggleOpen] = useBooleanState(false);\n const groups = useMemo(\n () =>\n groupBy(\n menuItems.map((i) => ({...i, group: i.group \|\| ''})),\n 'group',\n ),\n [menuItems],\n );\n\n const someActive = menuItems.some(\n (item) => !item.ignoreActive && item.action.isActive() === true,\n );\n const everyDisabled = menuItems.every((item) => item.action.isEnable() === false);\n\n const popupOpen = everyDisabled ? false : open;\n const shouldForceHide = open && !popupOpen;\n useEffect(() => {\n if (shouldForceHide) {\n hide();\n }\n }, [hide, shouldForceHide]);\n\n const [btnView, btnSelected] =\n _selectionType === 'light'\n ? ([\n popupOpen ? 'normal' : someActive ? 'flat-action' : 'flat',\n popupOpen && someActive,\n ] as const)\n : ([someActive \|\| popupOpen ? 'normal' : 'flat', someActive] as const);\n\n const textTitle = isFunction(title) ? title() : title;\n\n return (\n <>\n <ActionTooltip\n disabled={popupOpen}\n openDelay={ToolbarTooltipDelay.Open}\n closeDelay={ToolbarTooltipDelay.Close}\n title={textTitle}\n >\n <Button\n size=\"m\"\n ref={setAnchorElement}\n view={btnView}\n selected={btnSelected}\n disabled={everyDisabled}\n className={b(null, [className])}\n onClick={toggleOpen}\n aria-label={textTitle}\n qa={qa}\n {...props}\n >\n <Icon data={icon.data} size={icon.size} className={iconClassName} />\n {''}\n <Icon data={ChevronDown} className={chevronIconClassName} />\n </Button>\n </ActionTooltip>\n <Popup\n open={popupOpen}\n disablePortal={disablePortal}\n anchorElement={anchorElement}\n onOpenChange={(open) => {\n if (!open) hide();\n }}\n >\n <Menu size=\"l\" qa={qaMenu} data-toolbar-menu-for={textTitle}>\n {Object.entries(groups).map(([label, items], key) => {\n return (\n <Menu.Group label={label} key={key} className={b('menu-group')}>\n {items.map(\n ({id, icon, iconSize = 16, action, text, iconClassname}) => (\n <Menu.Item\n key={id}\n iconStart={\n <Icon\n data={icon}\n size={iconSize}\n className={iconClassname}\n />\n }\n active={action.isActive()}\n disabled={!action.isEnable()}\n onClick={() => {\n hide();\n focus();\n action.run();\n onClick?.(id);\n }}\n extraProps={{'aria-label': text}}\n >\n {text}\n </Menu.Item>\n ),\n )}\n </Menu.Group>\n );\n })}\n </Menu>\n </Popup>\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"ToolbarButtonWithPopupMenu.js","sourceRoot":"../../../../src","sources":["bundle/toolbar/ToolbarButtonWithPopupMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useMemo} from 'react';\n\nimport {ChevronDown} from '@gravity-ui/icons';\nimport {\n ActionTooltip,\n Button,\n Icon,\n type IconProps,\n Menu,\n Popup,\n type PopupProps,\n} from '@gravity-ui/uikit';\n\nimport {LAYOUT} from 'src/common/layout';\nimport {getTargetZIndex} from 'src/utils/get-target-z-index';\n\nimport {cn} from '../../classname';\nimport type {Action} from '../../core';\nimport {groupBy, isFunction} from '../../lodash';\nimport {useBooleanState, useElementState} from '../../react-utils/hooks';\nimport {type ToolbarBaseProps, type ToolbarIconData, ToolbarTooltipDelay} from '../../toolbar';\n\nimport './ToolbarButtonWithPopupMenu.scss';\nconst b = cn('toolbar-button-with-popup-menu');\n\nexport type MenuItem = {\n id: string;\n action: Action;\n icon: IconProps['data'];\n text: string;\n iconSize?: IconProps['size'];\n iconClassname?: string;\n group?: string;\n ignoreActive?: boolean;\n};\n\nexport type ToolbarButtonWithPopupMenuProps = Pick<\n ToolbarBaseProps<never>,\n 'className' \| 'focus' \| 'onClick' \| 'qa'\n> &\n Pick<PopupProps, 'disablePortal'> & {\n icon: ToolbarIconData;\n iconClassName?: string;\n chevronIconClassName?: string;\n title: string \| (() => string);\n menuItems: MenuItem[];\n /** @default 'classic' */\n _selectionType?: 'classic' \| 'light';\n qaMenu?: string;\n };\n\nexport const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProps> = ({\n disablePortal,\n className,\n focus,\n onClick,\n icon,\n iconClassName,\n chevronIconClassName,\n title,\n menuItems,\n _selectionType,\n qa,\n qaMenu,\n ...props\n}) => {\n const [anchorElement, setAnchorElement] = useElementState();\n const [open, , hide, toggleOpen] = useBooleanState(false);\n const groups = useMemo(\n () =>\n groupBy(\n menuItems.map((i) => ({...i, group: i.group \|\| ''})),\n 'group',\n ),\n [menuItems],\n );\n\n const someActive = menuItems.some(\n (item) => !item.ignoreActive && item.action.isActive() === true,\n );\n const everyDisabled = menuItems.every((item) => item.action.isEnable() === false);\n\n const popupOpen = everyDisabled ? false : open;\n const shouldForceHide = open && !popupOpen;\n useEffect(() => {\n if (shouldForceHide) {\n hide();\n }\n }, [hide, shouldForceHide]);\n\n const [btnView, btnSelected] =\n _selectionType === 'light'\n ? ([\n popupOpen ? 'normal' : someActive ? 'flat-action' : 'flat',\n popupOpen && someActive,\n ] as const)\n : ([someActive \|\| popupOpen ? 'normal' : 'flat', someActive] as const);\n\n const textTitle = isFunction(title) ? title() : title;\n\n return (\n <>\n <ActionTooltip\n disabled={popupOpen}\n openDelay={ToolbarTooltipDelay.Open}\n closeDelay={ToolbarTooltipDelay.Close}\n title={textTitle}\n >\n <Button\n size=\"m\"\n ref={setAnchorElement}\n view={btnView}\n selected={btnSelected}\n disabled={everyDisabled}\n className={b(null, [className])}\n onClick={toggleOpen}\n aria-label={textTitle}\n qa={qa}\n {...props}\n >\n <Icon data={icon.data} size={icon.size} className={iconClassName} />\n {''}\n <Icon data={ChevronDown} className={chevronIconClassName} />\n </Button>\n </ActionTooltip>\n <Popup\n open={popupOpen}\n disablePortal={disablePortal}\n anchorElement={anchorElement}\n onOpenChange={(open) => {\n if (!open) hide();\n }}\n zIndex={getTargetZIndex(LAYOUT.STICKY_TOOLBAR)}\n >\n <Menu size=\"l\" qa={qaMenu} data-toolbar-menu-for={textTitle}>\n {Object.entries(groups).map(([label, items], key) => {\n return (\n <Menu.Group label={label} key={key} className={b('menu-group')}>\n {items.map(\n ({id, icon, iconSize = 16, action, text, iconClassname}) => (\n <Menu.Item\n key={id}\n iconStart={\n <Icon\n data={icon}\n size={iconSize}\n className={iconClassname}\n />\n }\n active={action.isActive()}\n disabled={!action.isEnable()}\n onClick={() => {\n hide();\n focus();\n action.run();\n onClick?.(id);\n }}\n extraProps={{'aria-label': text}}\n >\n {text}\n </Menu.Item>\n ),\n )}\n </Menu.Group>\n );\n })}\n </Menu>\n </Popup>\n </>\n );\n};\n"]}

package/build/esm/common/layout.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare const LAYOUT: {
+    STICKY_TOOLBAR: string;
+};

package/build/esm/common/layout.js ADDED Viewed

@@ -0,0 +1,4 @@
+export const LAYOUT = {
+    STICKY_TOOLBAR: 'sticky-toolbar',
+};
+//# sourceMappingURL=layout.js.map

package/build/esm/common/layout.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"layout.js","sourceRoot":"../../../src","sources":["common/layout.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,cAAc,EAAE,gBAAgB;CACnC,CAAC","sourcesContent":["export const LAYOUT = {\n STICKY_TOOLBAR: 'sticky-toolbar',\n};\n"]}

package/build/esm/extensions/additional/FoldingHeading/plugins/folding.css CHANGED Viewed

@@ -1,15 +1,17 @@
-.pm-h-folding-hidden {
+.ProseMirror .pm-h-folding-hidden,
+.yfm.ProseMirror .pm-h-folding-hidden {
   display: none;
 }
-.pm-h-folding-content {
+.ProseMirror .pm-h-folding-content,
+.yfm.ProseMirror .pm-h-folding-content {
   padding-left: 28px;
 }
-.pm-h-folding-separator {
+.ProseMirror .pm-h-folding-separator,
+.yfm.ProseMirror .pm-h-folding-separator {
   position: relative;
 }
-.pm-h-folding-separator::before {
+.ProseMirror .pm-h-folding-separator::before,
+.yfm.ProseMirror .pm-h-folding-separator::before {
   position: absolute;
   z-index: 1;
   bottom: -4px;
@@ -22,7 +24,8 @@
   mask-size: 12px;
   transform: translateY(80%);
 }
-.pm-h-folding-separator::after {
+.ProseMirror .pm-h-folding-separator::after,
+.yfm.ProseMirror .pm-h-folding-separator::after {
   position: absolute;
   z-index: 1;
   bottom: -8px;
@@ -32,8 +35,8 @@
   content: "";
   border-top: 1px dashed var(--g-color-line-generic);
 }
-.pm-h-folding-label::after {
+.ProseMirror .pm-h-folding-label::after,
+.yfm.ProseMirror .pm-h-folding-label::after {
   position: absolute;
   z-index: 1;
   right: 2px;

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/MermaidView.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import type { Mermaid } from 'mermaid' with { 'resolution-mode': 'import' };
 import type { Node } from 'prosemirror-model';
 import type { EditorView } from 'prosemirror-view';
 import { MermaidConsts } from "../MermaidSpecs/const.js";
+import type { MermaidOptions } from "../index.js";
 export declare const cnMermaid: import("@bem-react/classname").ClassNameFormatter;
 export declare const STOP_EVENT_CLASSNAME = "prosemirror-stop-event";
 import "./Mermaid.css";
@@ -13,4 +14,5 @@ export declare const MermaidView: React.FC<{
     getMermaidInstance: () => Mermaid;
     node: Node;
     getPos: () => number | undefined;
+    options: MermaidOptions;
 }>;

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/MermaidView.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { useSharedEditingState } from "../../../../react-utils/useSharedEditingS
 import { cn } from "../../../../classname.js";
 import { TextAreaFixed as TextArea } from "../../../../forms/TextInput.js";
 import { i18n } from "../../../../i18n/common/index.js";
-import { useBooleanState, useElementState } from "../../../../react-utils/index.js";
+import { useAutoSave, useBooleanState, useElementState } from "../../../../react-utils/index.js";
 import { removeNode } from "../../../../utils/index.js";
 import { MermaidConsts } from "../MermaidSpecs/const.js";
 export const cnMermaid = cn('Mermaid');
@@ -39,15 +39,18 @@ const MermaidPreview = ({ mermaidInstance, text = '', }) => {
     }
     return (_jsx("div", { className: b('Preview'), children: svg ? _jsx("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg } }) : _jsx(Loader, {}) }));
 };
-const DiagramEditMode = ({ initialText, onSave, onCancel, mermaidInstance }) => {
-    const [text, setText] = useState(initialText || '');
-    return (_jsxs("div", { className: b(), children: [_jsx(MermaidPreview, { mermaidInstance: mermaidInstance, text: text }), _jsxs("div", { className: b('Editor'), children: [_jsx("div", { children: _jsx(TextArea, { controlProps: {
+const DiagramEditMode = ({ initialText, onSave, onCancel, mermaidInstance, options: { autoSave } }) => {
+    const { value, handleChange, handleManualSave, isSaveDisabled, isAutoSaveEnabled } = useAutoSave({
+        initialValue: initialText || '',
+        onSave,
+        onClose: onCancel,
+        autoSave,
+    });
+    return (_jsxs("div", { className: b(), children: [_jsx(MermaidPreview, { mermaidInstance: mermaidInstance, text: value }), _jsxs("div", { className: b('Editor'), children: [_jsx("div", { children: _jsx(TextArea, { controlProps: {
                                 className: STOP_EVENT_CLASSNAME,
-                            }, value: text, onUpdate: (v) => {
-                                setText(v);
-                            }, autoFocus: true }) }), _jsx("div", { className: b('Controls'), children: _jsxs("div", { children: [_jsx(Button, { onClick: onCancel, view: 'flat', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('cancel') }) }), _jsx(Button, { onClick: () => onSave(text), view: 'action', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('save') }) })] }) })] })] }));
+                            }, value: value, onUpdate: handleChange, autoFocus: true }) }), _jsx("div", { className: b('Controls'), children: _jsxs("div", { children: [_jsx(Button, { onClick: onCancel, view: 'flat', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: isAutoSaveEnabled ? i18n('close') : i18n('cancel') }) }), !isAutoSaveEnabled && (_jsx(Button, { onClick: handleManualSave, view: 'action', disabled: isSaveDisabled, children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('save') }) }))] }) })] })] }));
 };
-export const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }) => {
+export const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance, options }) => {
     const enitityId = node.attrs[MermaidConsts.NodeAttrs.EntityId];
     const entityKey = useMemo(() => SharedStateKey.define({ name: enitityId }), [enitityId]);
     const [editing, setEditing, unsetEditing] = useSharedEditingState(view, entityKey);
@@ -68,8 +71,7 @@ export const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }
     if (editing) {
         return (_jsx(DiagramEditMode, { initialText: node.attrs[MermaidConsts.NodeAttrs.content], mermaidInstance: mermaidInstance, onCancel: unsetEditing, onSave: (v) => {
                 onChange({ [MermaidConsts.NodeAttrs.content]: v });
-                unsetEditing();
-            } }));
+            }, options: options }));
     }
     return (_jsxs("div", { className: b(), onDoubleClick: setEditing, children: [_jsx(MermaidPreview, { mermaidInstance: mermaidInstance, text: node.attrs[MermaidConsts.NodeAttrs.content] }), _jsxs("div", { children: [_jsx(Button, { onClick: toggleMenuOpen, ref: setAnchorElement, size: 's', className: STOP_EVENT_CLASSNAME, children: _jsx(Icon, { data: DotsIcon, className: STOP_EVENT_CLASSNAME }) }), _jsx(Popup, { open: menuOpen, anchorElement: anchorElement, onOpenChange: closeMenu, placement: "bottom-end", children: _jsxs(Menu, { children: [_jsx(Menu.Item, { onClick: () => {
                                         setEditing();

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/MermaidView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MermaidView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/MermaidView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useMemo, useState} from 'react';\n\nimport {Ellipsis as DotsIcon} from '@gravity-ui/icons';\nimport {Button, Icon, Loader, Menu, Popup} from '@gravity-ui/uikit';\nimport type {Mermaid} from 'mermaid' with {'resolution-mode': 'import'};\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView} from 'prosemirror-view';\n\nimport {SharedStateKey} from 'src/extensions/behavior/SharedState';\nimport {useSharedEditingState} from 'src/react-utils/useSharedEditingState';\n\nimport {cn} from '../../../../classname';\nimport {TextAreaFixed as TextArea} from '../../../../forms/TextInput';\nimport {i18n} from '../../../../i18n/common';\nimport {useBooleanState, useElementState} from '../../../../react-utils';\nimport {removeNode} from '../../../../utils';\nimport {MermaidConsts} from '../MermaidSpecs/const';\nimport type {MermaidEntitySharedState} from '../types';\n\nexport const cnMermaid = cn('Mermaid');\n\nexport const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';\n\nimport './Mermaid.scss';\n\nconst b = cnMermaid;\n\nconst MermaidPreview: React.FC<{mermaidInstance: Mermaid \| null; text: string}> = ({\n mermaidInstance,\n text = '',\n}) => {\n const [svg, setSvg] = useState<string>();\n const [error, setError] = useState<string \| null>(null);\n\n useEffect(() => {\n const p = async () => {\n if (mermaidInstance) {\n try {\n // Validates syntax and throws error if text is invalid\n await mermaidInstance.parse(text);\n\n const {svg: S} = await mermaidInstance.render(`mermaid-${Date.now()}`, text);\n\n setSvg(S);\n setError(null);\n } catch (e) {\n setError((e as Error).message);\n }\n }\n };\n\n p();\n }, [mermaidInstance, text]);\n\n if (error) {\n return <div className={b('Error')}>{error && <div>{error}</div>}</div>;\n }\n\n return (\n <div className={b('Preview')}>\n {svg ? <div className=\"mermaid\" dangerouslySetInnerHTML={{__html: svg}} /> : <Loader />}\n </div>\n );\n};\n\nconst DiagramEditMode: React.FC<{\n initialText: string;\n mermaidInstance: Mermaid \| null;\n onSave: (v: string) => void;\n onCancel: () => void;\n}> = ({initialText, onSave, onCancel, mermaidInstance}) => {\n const [text, setText] = useState(initialText \|\| '');\n\n return (\n <div className={b()}>\n <MermaidPreview mermaidInstance={mermaidInstance} text={text} />\n <div className={b('Editor')}>\n <div>\n <TextArea\n controlProps={{\n className: STOP_EVENT_CLASSNAME,\n }}\n value={text}\n onUpdate={(v) => {\n setText(v);\n }}\n autoFocus\n />\n </div>\n <div className={b('Controls')}>\n <div>\n <Button onClick={onCancel} view={'flat'}>\n <span className={STOP_EVENT_CLASSNAME}>{i18n('cancel')}</span>\n </Button>\n <Button onClick={() => onSave(text)} view={'action'}>\n <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>\n </Button>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport const MermaidView: React.FC<{\n view: EditorView;\n onChange: (attrs: {[MermaidConsts.NodeAttrs.content]: string}) => void;\n getMermaidInstance: () => Mermaid;\n node: Node;\n getPos: () => number \| undefined;\n}> = ({onChange, node, getPos, view, getMermaidInstance}) => {\n const enitityId: string = node.attrs[MermaidConsts.NodeAttrs.EntityId];\n const entityKey = useMemo(\n () => SharedStateKey.define<MermaidEntitySharedState>({name: enitityId}),\n [enitityId],\n );\n\n const [editing, setEditing, unsetEditing] = useSharedEditingState(view, entityKey);\n const [menuOpen, , closeMenu, toggleMenuOpen] = useBooleanState(false);\n const [anchorElement, setAnchorElement] = useElementState();\n\n const [mermaidInstance, setMermaidInstance] = useState<Mermaid \| null>(null);\n useEffect(() => {\n const waitForMermaid = () =>\n setTimeout(() => {\n const instance = getMermaidInstance();\n if (instance) {\n setMermaidInstance(instance);\n\n return;\n }\n\n waitForMermaid();\n }, 100);\n\n waitForMermaid();\n }, []);\n\n if (editing) {\n return (\n <DiagramEditMode\n initialText={node.attrs[MermaidConsts.NodeAttrs.content]}\n mermaidInstance={mermaidInstance}\n onCancel={unsetEditing}\n onSave={(v) => {\n onChange({[MermaidConsts.NodeAttrs.content]: v});\n unsetEditing();\n }}\n />\n );\n }\n\n return (\n <div className={b()} onDoubleClick={setEditing}>\n <MermaidPreview\n mermaidInstance={mermaidInstance}\n text={node.attrs[MermaidConsts.NodeAttrs.content]}\n />\n <div>\n <Button\n onClick={toggleMenuOpen}\n ref={setAnchorElement}\n size={'s'}\n className={STOP_EVENT_CLASSNAME}\n >\n <Icon data={DotsIcon} className={STOP_EVENT_CLASSNAME} />\n </Button>\n <Popup\n open={menuOpen}\n anchorElement={anchorElement}\n onOpenChange={closeMenu}\n placement=\"bottom-end\"\n >\n <Menu>\n <Menu.Item\n onClick={() => {\n setEditing();\n closeMenu();\n }}\n >\n {i18n('edit')}\n </Menu.Item>\n <Menu.Item\n onClick={() => {\n const pos = getPos();\n if (pos === undefined) return;\n removeNode({\n node,\n pos,\n tr: view.state.tr,\n dispatch: view.dispatch,\n });\n }}\n >\n {i18n('remove')}\n </Menu.Item>\n </Menu>\n </Popup>\n </div>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"MermaidView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/MermaidView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAC,QAAQ,IAAI,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAKpE,OAAO,EAAC,cAAc,EAAC,+CAA4C;AACnE,OAAO,EAAC,qBAAqB,EAAC,yDAA8C;AAE5E,OAAO,EAAC,EAAE,EAAC,iCAA8B;AACzC,OAAO,EAAC,aAAa,IAAI,QAAQ,EAAC,uCAAoC;AACtE,OAAO,EAAC,IAAI,EAAC,yCAAgC;AAC7C,OAAO,EAAC,WAAW,EAAE,eAAe,EAAE,eAAe,EAAC,yCAAgC;AACtF,OAAO,EAAC,UAAU,EAAC,mCAA0B;AAC7C,OAAO,EAAC,aAAa,EAAC,iCAA8B;AAIpD,MAAM,CAAC,MAAM,SAAS,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;AAEvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,wBAAwB,CAAC;AAE7D,uBAAwB;AAExB,MAAM,CAAC,GAAG,SAAS,CAAC;AAEpB,MAAM,cAAc,GAA8D,CAAC,EAC/E,eAAe,EACf,IAAI,GAAG,EAAE,GACZ,EAAE,EAAE;IACD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,EAAU,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAExD,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,CAAC,GAAG,KAAK,IAAI,EAAE;YACjB,IAAI,eAAe,EAAE,CAAC;gBAClB,IAAI,CAAC;oBACD,uDAAuD;oBACvD,MAAM,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;oBAElC,MAAM,EAAC,GAAG,EAAE,CAAC,EAAC,GAAG,MAAM,eAAe,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC;oBAE7E,MAAM,CAAC,CAAC,CAAC,CAAC;oBACV,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACnB,CAAC;gBAAC,OAAO,CAAC,EAAE,CAAC;oBACT,QAAQ,CAAE,CAAW,CAAC,OAAO,CAAC,CAAC;gBACnC,CAAC;YACL,CAAC;QACL,CAAC,CAAC;QAEF,CAAC,EAAE,CAAC;IACR,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;IAE5B,IAAI,KAAK,EAAE,CAAC;QACR,OAAO,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAAG,KAAK,IAAI,wBAAM,KAAK,GAAO,GAAO,CAAC;IAC3E,CAAC;IAED,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACvB,GAAG,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,SAAS,EAAC,uBAAuB,EAAE,EAAC,MAAM,EAAE,GAAG,EAAC,GAAI,CAAC,CAAC,CAAC,KAAC,MAAM,KAAG,GACrF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,eAAe,GAMhB,CAAC,EAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,EAAC,QAAQ,EAAC,EAAC,EAAE,EAAE;IAC3E,MAAM,EAAC,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,iBAAiB,EAAC,GAAG,WAAW,CAAC;QAC3F,YAAY,EAAE,WAAW,IAAI,EAAE;QAC/B,MAAM;QACN,OAAO,EAAE,QAAQ;QACjB,QAAQ;KACX,CAAC,CAAC;IAEH,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,EAAE,aACf,KAAC,cAAc,IAAC,eAAe,EAAE,eAAe,EAAE,IAAI,EAAE,KAAK,GAAI,EACjE,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,wBACI,KAAC,QAAQ,IACL,YAAY,EAAE;gCACV,SAAS,EAAE,oBAAoB;6BAClC,EACD,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,YAAY,EACtB,SAAS,SACX,GACA,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,YACzB,0BACI,KAAC,MAAM,IAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,YACnC,eAAM,SAAS,EAAE,oBAAoB,YAChC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,GAChD,GACF,EACR,CAAC,iBAAiB,IAAI,CACnB,KAAC,MAAM,IACH,OAAO,EAAE,gBAAgB,EACzB,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,cAAc,YAExB,eAAM,SAAS,EAAE,oBAAoB,YAAG,IAAI,CAAC,MAAM,CAAC,GAAQ,GACvD,CACZ,IACC,GACJ,IACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAOnB,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,EAAE,OAAO,EAAC,EAAE,EAAE;IACjE,MAAM,SAAS,GAAW,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACvE,MAAM,SAAS,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAA2B,EAAC,IAAI,EAAE,SAAS,EAAC,CAAC,EACxE,CAAC,SAAS,CAAC,CACd,CAAC;IAEF,MAAM,CAAC,OAAO,EAAE,UAAU,EAAE,YAAY,CAAC,GAAG,qBAAqB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACnF,MAAM,CAAC,QAAQ,EAAE,AAAD,EAAG,SAAS,EAAE,cAAc,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IACvE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,eAAe,EAAE,CAAC;IAE5D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAC7E,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,cAAc,GAAG,GAAG,EAAE,CACxB,UAAU,CAAC,GAAG,EAAE;YACZ,MAAM,QAAQ,GAAG,kBAAkB,EAAE,CAAC;YACtC,IAAI,QAAQ,EAAE,CAAC;gBACX,kBAAkB,CAAC,QAAQ,CAAC,CAAC;gBAE7B,OAAO;YACX,CAAC;YAED,cAAc,EAAE,CAAC;QACrB,CAAC,EAAE,GAAG,CAAC,CAAC;QAEZ,cAAc,EAAE,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,KAAC,eAAe,IACZ,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,EACxD,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;gBACV,QAAQ,CAAC,EAAC,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,EAAC,CAAC,CAAC;YACrD,CAAC,EACD,OAAO,EAAE,OAAO,GAClB,CACL,CAAC;IACN,CAAC;IAED,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,UAAU,aAC1C,KAAC,cAAc,IACX,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,GACnD,EACF,0BACI,KAAC,MAAM,IACH,OAAO,EAAE,cAAc,EACvB,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,GAAG,EACT,SAAS,EAAE,oBAAoB,YAE/B,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,oBAAoB,GAAI,GACpD,EACT,KAAC,KAAK,IACF,IAAI,EAAE,QAAQ,EACd,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,SAAS,EACvB,SAAS,EAAC,YAAY,YAEtB,MAAC,IAAI,eACD,KAAC,IAAI,CAAC,IAAI,IACN,OAAO,EAAE,GAAG,EAAE;wCACV,UAAU,EAAE,CAAC;wCACb,SAAS,EAAE,CAAC;oCAChB,CAAC,YAEA,IAAI,CAAC,MAAM,CAAC,GACL,EACZ,KAAC,IAAI,CAAC,IAAI,IACN,OAAO,EAAE,GAAG,EAAE;wCACV,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;wCACrB,IAAI,GAAG,KAAK,SAAS;4CAAE,OAAO;wCAC9B,UAAU,CAAC;4CACP,IAAI;4CACJ,GAAG;4CACH,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE;4CACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;yCAC1B,CAAC,CAAC;oCACP,CAAC,YAEA,IAAI,CAAC,QAAQ,CAAC,GACP,IACT,GACH,IACN,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useEffect, useMemo, useState} from 'react';\n\nimport {Ellipsis as DotsIcon} from '@gravity-ui/icons';\nimport {Button, Icon, Loader, Menu, Popup} from '@gravity-ui/uikit';\nimport type {Mermaid} from 'mermaid' with {'resolution-mode': 'import'};\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView} from 'prosemirror-view';\n\nimport {SharedStateKey} from 'src/extensions/behavior/SharedState';\nimport {useSharedEditingState} from 'src/react-utils/useSharedEditingState';\n\nimport {cn} from '../../../../classname';\nimport {TextAreaFixed as TextArea} from '../../../../forms/TextInput';\nimport {i18n} from '../../../../i18n/common';\nimport {useAutoSave, useBooleanState, useElementState} from '../../../../react-utils';\nimport {removeNode} from '../../../../utils';\nimport {MermaidConsts} from '../MermaidSpecs/const';\nimport type {MermaidOptions} from '../index';\nimport type {MermaidEntitySharedState} from '../types';\n\nexport const cnMermaid = cn('Mermaid');\n\nexport const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';\n\nimport './Mermaid.scss';\n\nconst b = cnMermaid;\n\nconst MermaidPreview: React.FC<{mermaidInstance: Mermaid \| null; text: string}> = ({\n mermaidInstance,\n text = '',\n}) => {\n const [svg, setSvg] = useState<string>();\n const [error, setError] = useState<string \| null>(null);\n\n useEffect(() => {\n const p = async () => {\n if (mermaidInstance) {\n try {\n // Validates syntax and throws error if text is invalid\n await mermaidInstance.parse(text);\n\n const {svg: S} = await mermaidInstance.render(`mermaid-${Date.now()}`, text);\n\n setSvg(S);\n setError(null);\n } catch (e) {\n setError((e as Error).message);\n }\n }\n };\n\n p();\n }, [mermaidInstance, text]);\n\n if (error) {\n return <div className={b('Error')}>{error && <div>{error}</div>}</div>;\n }\n\n return (\n <div className={b('Preview')}>\n {svg ? <div className=\"mermaid\" dangerouslySetInnerHTML={{__html: svg}} /> : <Loader />}\n </div>\n );\n};\n\nconst DiagramEditMode: React.FC<{\n initialText: string;\n mermaidInstance: Mermaid \| null;\n onSave: (v: string) => void;\n onCancel: () => void;\n options: MermaidOptions;\n}> = ({initialText, onSave, onCancel, mermaidInstance, options: {autoSave}}) => {\n const {value, handleChange, handleManualSave, isSaveDisabled, isAutoSaveEnabled} = useAutoSave({\n initialValue: initialText \|\| '',\n onSave,\n onClose: onCancel,\n autoSave,\n });\n\n return (\n <div className={b()}>\n <MermaidPreview mermaidInstance={mermaidInstance} text={value} />\n <div className={b('Editor')}>\n <div>\n <TextArea\n controlProps={{\n className: STOP_EVENT_CLASSNAME,\n }}\n value={value}\n onUpdate={handleChange}\n autoFocus\n />\n </div>\n <div className={b('Controls')}>\n <div>\n <Button onClick={onCancel} view={'flat'}>\n <span className={STOP_EVENT_CLASSNAME}>\n {isAutoSaveEnabled ? i18n('close') : i18n('cancel')}\n </span>\n </Button>\n {!isAutoSaveEnabled && (\n <Button\n onClick={handleManualSave}\n view={'action'}\n disabled={isSaveDisabled}\n >\n <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport const MermaidView: React.FC<{\n view: EditorView;\n onChange: (attrs: {[MermaidConsts.NodeAttrs.content]: string}) => void;\n getMermaidInstance: () => Mermaid;\n node: Node;\n getPos: () => number \| undefined;\n options: MermaidOptions;\n}> = ({onChange, node, getPos, view, getMermaidInstance, options}) => {\n const enitityId: string = node.attrs[MermaidConsts.NodeAttrs.EntityId];\n const entityKey = useMemo(\n () => SharedStateKey.define<MermaidEntitySharedState>({name: enitityId}),\n [enitityId],\n );\n\n const [editing, setEditing, unsetEditing] = useSharedEditingState(view, entityKey);\n const [menuOpen, , closeMenu, toggleMenuOpen] = useBooleanState(false);\n const [anchorElement, setAnchorElement] = useElementState();\n\n const [mermaidInstance, setMermaidInstance] = useState<Mermaid \| null>(null);\n useEffect(() => {\n const waitForMermaid = () =>\n setTimeout(() => {\n const instance = getMermaidInstance();\n if (instance) {\n setMermaidInstance(instance);\n\n return;\n }\n\n waitForMermaid();\n }, 100);\n\n waitForMermaid();\n }, []);\n\n if (editing) {\n return (\n <DiagramEditMode\n initialText={node.attrs[MermaidConsts.NodeAttrs.content]}\n mermaidInstance={mermaidInstance}\n onCancel={unsetEditing}\n onSave={(v) => {\n onChange({[MermaidConsts.NodeAttrs.content]: v});\n }}\n options={options}\n />\n );\n }\n\n return (\n <div className={b()} onDoubleClick={setEditing}>\n <MermaidPreview\n mermaidInstance={mermaidInstance}\n text={node.attrs[MermaidConsts.NodeAttrs.content]}\n />\n <div>\n <Button\n onClick={toggleMenuOpen}\n ref={setAnchorElement}\n size={'s'}\n className={STOP_EVENT_CLASSNAME}\n >\n <Icon data={DotsIcon} className={STOP_EVENT_CLASSNAME} />\n </Button>\n <Popup\n open={menuOpen}\n anchorElement={anchorElement}\n onOpenChange={closeMenu}\n placement=\"bottom-end\"\n >\n <Menu>\n <Menu.Item\n onClick={() => {\n setEditing();\n closeMenu();\n }}\n >\n {i18n('edit')}\n </Menu.Item>\n <Menu.Item\n onClick={() => {\n const pos = getPos();\n if (pos === undefined) return;\n removeNode({\n node,\n pos,\n tr: view.state.tr,\n dispatch: view.dispatch,\n });\n }}\n >\n {i18n('remove')}\n </Menu.Item>\n </Menu>\n </Popup>\n </div>\n </div>\n );\n};\n"]}

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/NodeView.d.ts CHANGED Viewed

@@ -8,6 +8,7 @@ export declare class WMermaidNodeView implements NodeView {
     private readonly getPos;
     private readonly renderItem;
     private readonly loadRuntimeScript;
+    private readonly options;
     constructor(node: Node, view: EditorView, getPos: () => number | undefined, opts: MermaidOptions);
     initializeMermaid(): void;
     update(node: Node): boolean;

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/NodeView.js CHANGED Viewed

@@ -12,6 +12,7 @@ export class WMermaidNodeView {
     getPos;
     renderItem;
     loadRuntimeScript;
+    options;
     constructor(node, view, getPos, opts) {
         const { loadRuntimeScript } = opts;
         this.node = node;
@@ -21,6 +22,7 @@ export class WMermaidNodeView {
         this.view = view;
         this.getPos = getPos;
         this.loadRuntimeScript = loadRuntimeScript;
+        this.options = opts;
         this.initializeMermaid();
         this.renderItem = getReactRendererFromState(view.state).createItem('mermaid-view', this.renderMermaid.bind(this));
         this.validateEntityId();
@@ -72,7 +74,7 @@ export class WMermaidNodeView {
     }
     getMermaidInstance = () => mermaidInstance;
     renderMermaid() {
-        return (_jsx(Portal, { container: this.dom, children: _jsx(MermaidView, { view: this.view, onChange: this.onChange.bind(this), node: this.node, getMermaidInstance: this.getMermaidInstance, getPos: this.getPos }) }));
+        return (_jsx(Portal, { container: this.dom, children: _jsx(MermaidView, { view: this.view, onChange: this.onChange.bind(this), node: this.node, getMermaidInstance: this.getMermaidInstance, getPos: this.getPos, options: this.options }) }));
     }
 }
 //# sourceMappingURL=NodeView.js.map

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/NodeView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NodeView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/NodeView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAC;AAKzC,OAAO,EAAC,yBAAyB,EAAC,iDAA8C;AAChF,OAAO,EAAC,gBAAgB,EAAE,iBAAiB,EAAC,uCAA4B;AAGxE,OAAO,EAAC,aAAa,EAAE,sBAAsB,EAAC,iCAA8B;AAE5E,OAAO,EAAC,WAAW,EAAE,oBAAoB,EAAC,yBAAsB;AAEhE,IAAI,eAAwB,CAAC;AAE7B,MAAM,OAAO,gBAAgB;IAChB,GAAG,CAAc;IAClB,IAAI,CAAO;IACF,IAAI,CAAC;IACL,MAAM,CAAC;IACP,UAAU,CAAC;IACX,iBAAiB,CAAa;~~IAE/C~~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~~GACrB~~,GACG,CACZ,CAAC;IACN,CAAC;CACJ","sourcesContent":["import {Portal} from '@gravity-ui/uikit';\nimport type {Mermaid} from 'mermaid' with {'resolution-mode': 'import'};\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView, NodeView} from 'prosemirror-view';\n\nimport {getReactRendererFromState} from 'src/extensions/behavior/ReactRenderer';\nimport {generateEntityId, isInvalidEntityId} from 'src/utils/entity-id';\n\nimport type {MermaidOptions} from '..';\nimport {MermaidConsts, defaultMermaidEntityId} from '../MermaidSpecs/const';\n\nimport {MermaidView, STOP_EVENT_CLASSNAME} from './MermaidView';\n\nlet mermaidInstance: Mermaid;\n\nexport class WMermaidNodeView implements NodeView {\n readonly dom: HTMLElement;\n private node: Node;\n private readonly view;\n private readonly getPos;\n private readonly renderItem;\n private readonly loadRuntimeScript: () => void;\n\n constructor(\n node: Node,\n view: EditorView,\n getPos: () => number \| undefined,\n opts: MermaidOptions,\n ) {\n const {loadRuntimeScript} = opts;\n this.node = node;\n this.dom = document.createElement('div');\n this.dom.classList.add('mermaid-container');\n this.dom.contentEditable = 'false';\n this.view = view;\n this.getPos = getPos;\n this.loadRuntimeScript = loadRuntimeScript;\n this.initializeMermaid();\n this.renderItem = getReactRendererFromState(view.state).createItem(\n 'mermaid-view',\n this.renderMermaid.bind(this),\n );\n\n this.validateEntityId();\n }\n\n initializeMermaid() {\n // https://github.com/diplodoc-platform/mermaid-extension/tree/master#prepared-mermaid-runtime\n window.mermaidJsonp = window.mermaidJsonp \|\| [];\n window.mermaidJsonp.push((mermaid: Mermaid) => {\n mermaidInstance = mermaid;\n });\n\n this.loadRuntimeScript();\n }\n\n update(node: Node) {\n if (node.type !== this.node.type) return false;\n this.node = node;\n this.renderItem.rerender();\n return true;\n }\n\n destroy() {\n this.renderItem.remove();\n }\n\n ignoreMutation() {\n return true;\n }\n\n stopEvent(e: Event) {\n const target = e.target as Element;\n return target.classList.contains(STOP_EVENT_CLASSNAME);\n }\n\n private validateEntityId() {\n if (\n isInvalidEntityId({\n node: this.node,\n doc: this.view.state.doc,\n defaultId: defaultMermaidEntityId,\n })\n ) {\n const newId = generateEntityId(MermaidConsts.NodeName);\n this.view.dispatch(\n this.view.state.tr.setNodeAttribute(\n this.getPos()!,\n MermaidConsts.NodeAttrs.EntityId,\n newId,\n ),\n );\n }\n }\n\n private onChange(attrs: {[MermaidConsts.NodeAttrs.content]: string}) {\n const pos = this.getPos();\n if (pos === undefined) return;\n\n const tr = this.view.state.tr.setNodeMarkup(\n pos,\n undefined,\n {\n ...this.node.attrs,\n ...attrs,\n },\n [],\n );\n\n this.view.dispatch(tr);\n }\n\n private getMermaidInstance = () => mermaidInstance;\n\n private renderMermaid() {\n return (\n <Portal container={this.dom}>\n <MermaidView\n view={this.view}\n onChange={this.onChange.bind(this)}\n node={this.node}\n getMermaidInstance={this.getMermaidInstance}\n getPos={this.getPos}\n />\n </Portal>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"NodeView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/NodeView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAC;AAKzC,OAAO,EAAC,yBAAyB,EAAC,iDAA8C;AAChF,OAAO,EAAC,gBAAgB,EAAE,iBAAiB,EAAC,uCAA4B;AAGxE,OAAO,EAAC,aAAa,EAAE,sBAAsB,EAAC,iCAA8B;AAE5E,OAAO,EAAC,WAAW,EAAE,oBAAoB,EAAC,yBAAsB;AAEhE,IAAI,eAAwB,CAAC;AAE7B,MAAM,OAAO,gBAAgB;IAChB,GAAG,CAAc;IAClB,IAAI,CAAO;IACF,IAAI,CAAC;IACL,MAAM,CAAC;IACP,UAAU,CAAC;IACX,iBAAiB,CAAa;IAC9B,OAAO,CAAiB;IAEzC,YACI,IAAU,EACV,IAAgB,EAChB,MAAgC,EAChC,IAAoB;QAEpB,MAAM,EAAC,iBAAiB,EAAC,GAAG,IAAI,CAAC;QACjC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAC5C,IAAI,CAAC,GAAG,CAAC,eAAe,GAAG,OAAO,CAAC;QACnC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;QAC3C,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,UAAU,CAC9D,cAAc,EACd,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAChC,CAAC;QAEF,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC5B,CAAC;IAED,iBAAiB;QACb,8FAA8F;QAC9F,MAAM,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,IAAI,EAAE,CAAC;QAChD,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,OAAgB,EAAE,EAAE;YAC1C,eAAe,GAAG,OAAO,CAAC;QAC9B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAED,MAAM,CAAC,IAAU;QACb,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QAC/C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC;QAC3B,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO;QACH,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC;IAC7B,CAAC;IAED,cAAc;QACV,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,SAAS,CAAC,CAAQ;QACd,MAAM,MAAM,GAAG,CAAC,CAAC,MAAiB,CAAC;QACnC,OAAO,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAC3D,CAAC;IAEO,gBAAgB;QACpB,IACI,iBAAiB,CAAC;YACd,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG;YACxB,SAAS,EAAE,sBAAsB;SACpC,CAAC,EACJ,CAAC;YACC,MAAM,KAAK,GAAG,gBAAgB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACvD,IAAI,CAAC,IAAI,CAAC,QAAQ,CACd,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAC/B,IAAI,CAAC,MAAM,EAAG,EACd,aAAa,CAAC,SAAS,CAAC,QAAQ,EAChC,KAAK,CACR,CACJ,CAAC;QACN,CAAC;IACL,CAAC;IAEO,QAAQ,CAAC,KAAkD;QAC/D,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC1B,IAAI,GAAG,KAAK,SAAS;YAAE,OAAO;QAE9B,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,aAAa,CACvC,GAAG,EACH,SAAS,EACT;YACI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK;YAClB,GAAG,KAAK;SACX,EACD,EAAE,CACL,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC;IAEO,kBAAkB,GAAG,GAAG,EAAE,CAAC,eAAe,CAAC;IAE3C,aAAa;QACjB,OAAO,CACH,KAAC,MAAM,IAAC,SAAS,EAAE,IAAI,CAAC,GAAG,YACvB,KAAC,WAAW,IACR,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAClC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,GACvB,GACG,CACZ,CAAC;IACN,CAAC;CACJ","sourcesContent":["import {Portal} from '@gravity-ui/uikit';\nimport type {Mermaid} from 'mermaid' with {'resolution-mode': 'import'};\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView, NodeView} from 'prosemirror-view';\n\nimport {getReactRendererFromState} from 'src/extensions/behavior/ReactRenderer';\nimport {generateEntityId, isInvalidEntityId} from 'src/utils/entity-id';\n\nimport type {MermaidOptions} from '..';\nimport {MermaidConsts, defaultMermaidEntityId} from '../MermaidSpecs/const';\n\nimport {MermaidView, STOP_EVENT_CLASSNAME} from './MermaidView';\n\nlet mermaidInstance: Mermaid;\n\nexport class WMermaidNodeView implements NodeView {\n readonly dom: HTMLElement;\n private node: Node;\n private readonly view;\n private readonly getPos;\n private readonly renderItem;\n private readonly loadRuntimeScript: () => void;\n private readonly options: MermaidOptions;\n\n constructor(\n node: Node,\n view: EditorView,\n getPos: () => number \| undefined,\n opts: MermaidOptions,\n ) {\n const {loadRuntimeScript} = opts;\n this.node = node;\n this.dom = document.createElement('div');\n this.dom.classList.add('mermaid-container');\n this.dom.contentEditable = 'false';\n this.view = view;\n this.getPos = getPos;\n this.loadRuntimeScript = loadRuntimeScript;\n this.options = opts;\n this.initializeMermaid();\n this.renderItem = getReactRendererFromState(view.state).createItem(\n 'mermaid-view',\n this.renderMermaid.bind(this),\n );\n\n this.validateEntityId();\n }\n\n initializeMermaid() {\n // https://github.com/diplodoc-platform/mermaid-extension/tree/master#prepared-mermaid-runtime\n window.mermaidJsonp = window.mermaidJsonp \|\| [];\n window.mermaidJsonp.push((mermaid: Mermaid) => {\n mermaidInstance = mermaid;\n });\n\n this.loadRuntimeScript();\n }\n\n update(node: Node) {\n if (node.type !== this.node.type) return false;\n this.node = node;\n this.renderItem.rerender();\n return true;\n }\n\n destroy() {\n this.renderItem.remove();\n }\n\n ignoreMutation() {\n return true;\n }\n\n stopEvent(e: Event) {\n const target = e.target as Element;\n return target.classList.contains(STOP_EVENT_CLASSNAME);\n }\n\n private validateEntityId() {\n if (\n isInvalidEntityId({\n node: this.node,\n doc: this.view.state.doc,\n defaultId: defaultMermaidEntityId,\n })\n ) {\n const newId = generateEntityId(MermaidConsts.NodeName);\n this.view.dispatch(\n this.view.state.tr.setNodeAttribute(\n this.getPos()!,\n MermaidConsts.NodeAttrs.EntityId,\n newId,\n ),\n );\n }\n }\n\n private onChange(attrs: {[MermaidConsts.NodeAttrs.content]: string}) {\n const pos = this.getPos();\n if (pos === undefined) return;\n\n const tr = this.view.state.tr.setNodeMarkup(\n pos,\n undefined,\n {\n ...this.node.attrs,\n ...attrs,\n },\n [],\n );\n\n this.view.dispatch(tr);\n }\n\n private getMermaidInstance = () => mermaidInstance;\n\n private renderMermaid() {\n return (\n <Portal container={this.dom}>\n <MermaidView\n view={this.view}\n onChange={this.onChange.bind(this)}\n node={this.node}\n getMermaidInstance={this.getMermaidInstance}\n getPos={this.getPos}\n options={this.options}\n />\n </Portal>\n );\n }\n}\n"]}

package/build/esm/extensions/additional/Mermaid/index.d.ts CHANGED Viewed

@@ -2,6 +2,10 @@ import type { Action, ExtensionAuto } from "../../../core/index.js";
 import { MermaidAction } from "./MermaidSpecs/const.js";
 export type MermaidOptions = {
     loadRuntimeScript: () => void;
+    autoSave?: {
+        enabled: boolean;
+        delay?: number;
+    };
 };
 export declare const Mermaid: ExtensionAuto<MermaidOptions>;
 declare global {

package/build/esm/extensions/additional/Mermaid/index.js CHANGED Viewed

@@ -2,13 +2,13 @@ import { WMermaidNodeView } from "./MermaidNodeView/index.js";
 import { MermaidSpecs } from "./MermaidSpecs/index.js";
 import { MermaidAction } from "./MermaidSpecs/const.js";
 import { addMermaid } from "./actions.js";
-export const Mermaid = (builder, { loadRuntimeScript }) => {
+export const Mermaid = (builder, options) => {
     builder.use(MermaidSpecs, {
-        nodeView: MermaidNodeViewFactory({ loadRuntimeScript }),
+        nodeView: MermaidNodeViewFactory(options),
     });
     builder.addAction(MermaidAction, () => addMermaid);
 };
-const MermaidNodeViewFactory = ({ loadRuntimeScript }) => () => (node, view, getPos) => {
-    return new WMermaidNodeView(node, view, getPos, { loadRuntimeScript });
+const MermaidNodeViewFactory = (options) => () => (node, view, getPos) => {
+    return new WMermaidNodeView(node, view, getPos, options);
 };
 //# sourceMappingURL=index.js.map

package/build/esm/extensions/additional/Mermaid/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["extensions/additional/Mermaid/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAC,mCAA0B;AACnD,OAAO,EAAC,YAAY,EAAC,gCAAuB;AAC5C,OAAO,EAAC,aAAa,EAAC,gCAA6B;AACnD,OAAO,EAAC,UAAU,EAAC,qBAAkB;~~AAIrC~~,MAAM,CAAC,MAAM,OAAO,GAAkC,CAAC,OAAO,EAAE,~~EAAC~~,~~iBAAiB,EAAC,~~EAAE,EAAE;~~IACnF~~,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE;QACtB,QAAQ,EAAE,sBAAsB,CAAC,~~EAAC~~,~~iBAAiB,EAAC,~~CAAC;~~KACxD~~,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AACvD,CAAC,CAAC;AAEF,MAAM,sBAAsB,~~GAGxB~~,CAAC,~~EAAC~~,~~iBAAiB,EAAC,~~EAAE,EAAE,~~CACxB~~,GAAG,EAAE,~~CACL~~,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;~~IACnB~~,OAAO,IAAI,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,~~EAAC~~,~~iBAAiB,EAAC,~~CAAC,CAAC;~~AACzE~~,CAAC,CAAC","sourcesContent":["import type {Action, ExtensionAuto, ExtensionDeps, NodeViewConstructor} from '../../../core';\n\nimport {WMermaidNodeView} from './MermaidNodeView';\nimport {MermaidSpecs} from './MermaidSpecs';\nimport {MermaidAction} from './MermaidSpecs/const';\nimport {addMermaid} from './actions';\n\nexport type MermaidOptions = {loadRuntimeScript: () => void};\n\nexport const Mermaid: ExtensionAuto<MermaidOptions> = (builder, ~~{loadRuntimeScript}~~) => {\n builder.use(MermaidSpecs, {\n nodeView: MermaidNodeViewFactory(~~{loadRuntimeScript}~~),\n });\n\n builder.addAction(MermaidAction, () => addMermaid);\n};\n\nconst MermaidNodeViewFactory: (\n opts: MermaidOptions,\n) => (deps: ExtensionDeps) => NodeViewConstructor ~~=\n~~ (~~{loadRuntimeScript}~~) ~~=>\n~~ () ~~=>\n~~ (node, view, getPos) => {\n return new WMermaidNodeView(node, view, getPos, ~~{loadRuntimeScript}~~);\n };\n\ndeclare global {\n namespace WysiwygEditor {\n interface Actions {\n [MermaidAction]: Action;\n }\n }\n interface Window {\n mermaidJsonp: Function[];\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["extensions/additional/Mermaid/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAC,mCAA0B;AACnD,OAAO,EAAC,YAAY,EAAC,gCAAuB;AAC5C,OAAO,EAAC,aAAa,EAAC,gCAA6B;AACnD,OAAO,EAAC,UAAU,EAAC,qBAAkB;AAUrC,MAAM,CAAC,MAAM,OAAO,GAAkC,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE;IACvE,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE;QACtB,QAAQ,EAAE,sBAAsB,CAAC,OAAO,CAAC;KAC5C,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AACvD,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAEwB,CAAC,OAAO,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1F,OAAO,IAAI,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;AAC7D,CAAC,CAAC","sourcesContent":["import type {Action, ExtensionAuto, ExtensionDeps, NodeViewConstructor} from '../../../core';\n\nimport {WMermaidNodeView} from './MermaidNodeView';\nimport {MermaidSpecs} from './MermaidSpecs';\nimport {MermaidAction} from './MermaidSpecs/const';\nimport {addMermaid} from './actions';\n\nexport type MermaidOptions = {\n loadRuntimeScript: () => void;\n autoSave?: {\n enabled: boolean;\n delay?: number;\n };\n};\n\nexport const Mermaid: ExtensionAuto<MermaidOptions> = (builder, options) => {\n builder.use(MermaidSpecs, {\n nodeView: MermaidNodeViewFactory(options),\n });\n\n builder.addAction(MermaidAction, () => addMermaid);\n};\n\nconst MermaidNodeViewFactory: (\n opts: MermaidOptions,\n) => (deps: ExtensionDeps) => NodeViewConstructor = (options) => () => (node, view, getPos) => {\n return new WMermaidNodeView(node, view, getPos, options);\n};\n\ndeclare global {\n namespace WysiwygEditor {\n interface Actions {\n [MermaidAction]: Action;\n }\n }\n interface Window {\n mermaidJsonp: Function[];\n }\n}\n"]}

package/build/esm/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { SharedStateKey } from "../../../behavior/SharedState/index.js";
 import { TextAreaFixed as TextArea } from "../../../../forms/TextInput.js";
 import { i18n } from "../../../../i18n/common/index.js";
 import { debounce } from "../../../../lodash.js";
-import { useBooleanState, useElementState } from "../../../../react-utils/hooks.js";
+import { useAutoSave, useBooleanState, useElementState } from "../../../../react-utils/hooks.js";
 import { useSharedEditingState } from "../../../../react-utils/useSharedEditingState.js";
 import { removeNode } from "../../../../utils/remove-node.js";
 import { YfmHtmlBlockConsts } from "../YfmHtmlBlockSpecs/const.js";
@@ -135,15 +135,19 @@ const YfmHtmlBlockPreview = ({ html, onClick, config }) => {
             height,
         }, ref: ref, title: generateID(), frameBorder: 0, className: b('content'), srcDoc: html }));
 };
-const CodeEditMode = ({ initialText, onSave, onCancel }) => {
-    const [text, setText] = useState(initialText || '\n');
+const CodeEditMode = ({ initialText, onSave, onCancel, options: { autoSave } }) => {
+    const { value, handleChange, handleManualSave, isSaveDisabled, isAutoSaveEnabled } = useAutoSave({
+        initialValue: initialText || '\n',
+        onSave,
+        onClose: onCancel,
+        autoSave,
+    });
     return (_jsx("div", { className: b({ editing: true }), children: _jsxs("div", { className: b('editor'), children: [_jsx(TextArea, { controlProps: {
                         className: STOP_EVENT_CLASSNAME,
-                    }, value: text, onUpdate: (v) => {
-                        setText(v);
-                    }, autoFocus: true }), _jsx("div", { className: b('controls'), children: _jsxs("div", { children: [_jsx(Button, { onClick: onCancel, view: 'flat', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('cancel') }) }), _jsx(Button, { onClick: () => onSave(text), view: 'action', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('save') }) })] }) })] }) }));
+                    }, value: value, onUpdate: handleChange, autoFocus: true }), _jsx("div", { className: b('controls'), children: _jsxs("div", { children: [_jsx(Button, { onClick: onCancel, view: 'flat', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: isAutoSaveEnabled ? i18n('close') : i18n('cancel') }) }), !isAutoSaveEnabled && (_jsx(Button, { onClick: handleManualSave, view: 'action', disabled: isSaveDisabled, children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('save') }) }))] }) })] }) }));
 };
-export const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = '' }, }) => {
+export const YfmHtmlBlockView = ({ onChange, node, getPos, view, options }) => {
+    const { useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = '' } = options;
     const entityId = node.attrs[YfmHtmlBlockConsts.NodeAttrs.EntityId];
     const entityKey = useMemo(() => SharedStateKey.define({ name: entityId }), [entityId]);
     const config = useConfig?.();
@@ -153,8 +157,7 @@ export const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useC
     if (editing) {
         return (_jsx(CodeEditMode, { initialText: node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc], onCancel: unsetEditing, onSave: (v) => {
                 onChange({ [YfmHtmlBlockConsts.NodeAttrs.srcdoc]: v });
-                unsetEditing();
-            } }));
+            }, options: options }));
     }
     let additional = baseTarget ? `<base target="${baseTarget}">` : '';
     if (styles) {