@gravity-ui/markdown-editor 15.13.3 → 15.14.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.
- package/build/cjs/bundle/MarkupEditorView.js +1 -1
- package/build/cjs/bundle/MarkupEditorView.js.map +1 -1
- package/build/cjs/bundle/WysiwygEditorView.js +1 -1
- package/build/cjs/bundle/WysiwygEditorView.js.map +1 -1
- package/build/cjs/bundle/toolbar/ToolbarButtonWithPopupMenu.js +3 -2
- package/build/cjs/bundle/toolbar/ToolbarButtonWithPopupMenu.js.map +1 -1
- package/build/cjs/bundle/toolbar/custom/ToolbarColors.js +1 -1
- package/build/cjs/bundle/toolbar/custom/ToolbarColors.js.map +1 -1
- package/build/cjs/extensions/additional/GPT/GptDialog/GptDialog.js +5 -2
- package/build/cjs/extensions/additional/GPT/GptDialog/GptDialog.js.map +1 -1
- package/build/cjs/extensions/additional/GPT/plugin.js +1 -1
- package/build/cjs/extensions/additional/GPT/plugin.js.map +1 -1
- package/build/cjs/extensions/behavior/CommandMenu/component.js +1 -1
- package/build/cjs/extensions/behavior/CommandMenu/component.js.map +1 -1
- package/build/cjs/extensions/behavior/SelectionContext/tooltip.js +1 -0
- package/build/cjs/extensions/behavior/SelectionContext/tooltip.js.map +1 -1
- package/build/cjs/toolbar/FlexToolbar.js +1 -1
- package/build/cjs/toolbar/FlexToolbar.js.map +1 -1
- package/build/cjs/toolbar/Toolbar.d.ts +1 -1
- package/build/cjs/toolbar/Toolbar.js +2 -2
- package/build/cjs/toolbar/Toolbar.js.map +1 -1
- package/build/cjs/toolbar/ToolbarButton.d.ts +1 -0
- package/build/cjs/toolbar/ToolbarButton.js +2 -2
- package/build/cjs/toolbar/ToolbarButton.js.map +1 -1
- package/build/cjs/toolbar/ToolbarListButton.d.ts +2 -1
- package/build/cjs/toolbar/ToolbarListButton.js +2 -2
- package/build/cjs/toolbar/ToolbarListButton.js.map +1 -1
- package/build/cjs/version.js +1 -1
- package/build/cjs/version.js.map +1 -1
- package/build/esm/bundle/MarkupEditorView.js +1 -1
- package/build/esm/bundle/MarkupEditorView.js.map +1 -1
- package/build/esm/bundle/WysiwygEditorView.js +1 -1
- package/build/esm/bundle/WysiwygEditorView.js.map +1 -1
- package/build/esm/bundle/toolbar/ToolbarButtonWithPopupMenu.js +3 -2
- package/build/esm/bundle/toolbar/ToolbarButtonWithPopupMenu.js.map +1 -1
- package/build/esm/bundle/toolbar/custom/ToolbarColors.js +1 -1
- package/build/esm/bundle/toolbar/custom/ToolbarColors.js.map +1 -1
- package/build/esm/extensions/additional/GPT/GptDialog/GptDialog.js +6 -3
- package/build/esm/extensions/additional/GPT/GptDialog/GptDialog.js.map +1 -1
- package/build/esm/extensions/additional/GPT/plugin.js +1 -1
- package/build/esm/extensions/additional/GPT/plugin.js.map +1 -1
- package/build/esm/extensions/behavior/CommandMenu/component.js +1 -1
- package/build/esm/extensions/behavior/CommandMenu/component.js.map +1 -1
- package/build/esm/extensions/behavior/SelectionContext/tooltip.js +1 -0
- package/build/esm/extensions/behavior/SelectionContext/tooltip.js.map +1 -1
- package/build/esm/toolbar/FlexToolbar.js +1 -1
- package/build/esm/toolbar/FlexToolbar.js.map +1 -1
- package/build/esm/toolbar/Toolbar.d.ts +1 -1
- package/build/esm/toolbar/Toolbar.js +2 -2
- package/build/esm/toolbar/Toolbar.js.map +1 -1
- package/build/esm/toolbar/ToolbarButton.d.ts +1 -0
- package/build/esm/toolbar/ToolbarButton.js +2 -2
- package/build/esm/toolbar/ToolbarButton.js.map +1 -1
- package/build/esm/toolbar/ToolbarListButton.d.ts +2 -1
- package/build/esm/toolbar/ToolbarListButton.js +2 -2
- package/build/esm/toolbar/ToolbarListButton.js.map +1 -1
- package/build/esm/version.js +1 -1
- package/build/esm/version.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"../../../../../src","sources":["extensions/behavior/SelectionContext/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {VirtualElement} from '@floating-ui/react'; // eslint-disable-line import/no-extraneous-dependencies\nimport {Popup, type PopupPlacement, type PopupProps} from '@gravity-ui/uikit';\nimport type {EditorState} from 'prosemirror-state';\nimport type {EditorView} from 'prosemirror-view';\n\nimport type {ActionStorage} from '../../../core';\nimport {isFunction} from '../../../lodash';\nimport {type Logger2, globalLogger} from '../../../logger';\nimport {ErrorLoggerBoundary} from '../../../react-utils/ErrorBoundary';\nimport {Toolbar} from '../../../toolbar';\nimport type {\n ToolbarButtonPopupData,\n ToolbarGroupItemData,\n ToolbarProps,\n ToolbarSingleItemData,\n} from '../../../toolbar';\nimport {type RendererItem, getReactRendererFromState} from '../ReactRenderer';\n\ntype SelectionTooltipBaseProps = {\n show?: boolean;\n poppupProps: PopupProps;\n};\ntype SelectionTooltipProps = SelectionTooltipBaseProps & ToolbarProps<ActionStorage>;\n\nconst SelectionTooltip: React.FC<SelectionTooltipProps> = ({\n show,\n poppupProps,\n ...toolbarProps\n}) => {\n if (!show) return null;\n return (\n <Popup open {...poppupProps} style={{padding: '4px 8px'}}>\n <Toolbar {...toolbarProps} />\n </Popup>\n );\n};\n\nexport type ContextGroupItemData =\n | (ToolbarGroupItemData<ActionStorage> & {\n condition?: (state: EditorState) => void;\n })\n | ((ToolbarSingleItemData<ActionStorage> | ToolbarButtonPopupData<ActionStorage>) & {\n condition?: 'enabled';\n });\n\nexport type ContextGroupData = ContextGroupItemData[];\nexport type ContextConfig = ContextGroupData[];\n\nexport type TooltipViewParams = {\n /** @default 'bottom' */\n placement?: 'top' | 'bottom';\n /** @default false */\n flip?: boolean;\n};\n\nexport class TooltipView {\n #isTooltipOpen = false;\n\n private readonly logger: Logger2.ILogger;\n private readonly actions: ActionStorage;\n private readonly menuConfig: ContextConfig;\n private readonly placement: PopupPlacement;\n\n private view!: EditorView;\n private baseProps: SelectionTooltipBaseProps = {show: false, poppupProps: {}};\n private _tooltipRenderItem: RendererItem | null = null;\n\n constructor(\n actions: ActionStorage,\n menuConfig: ContextConfig,\n logger: Logger2.ILogger,\n params: TooltipViewParams,\n ) {\n this.logger = logger;\n this.actions = actions;\n this.menuConfig = menuConfig;\n\n const {flip, placement = 'bottom'} = params;\n this.placement = flip ? placement : [placement];\n }\n\n get isTooltipOpen(): boolean {\n return this.#isTooltipOpen;\n }\n\n show(view: EditorView, popupProps?: PopupProps) {\n this.view = view;\n this.#isTooltipOpen = true;\n this.baseProps = {\n show: true,\n poppupProps: {\n ...popupProps,\n ...this.calcPosition(view),\n },\n };\n this.renderPopup();\n }\n\n hide(view: EditorView) {\n this.view = view;\n this.#isTooltipOpen = false;\n this.baseProps = {show: false, poppupProps: {}};\n this.renderPopup();\n }\n\n destroy() {\n this._tooltipRenderItem?.remove();\n this._tooltipRenderItem = null;\n }\n\n private getSelectionTooltipProps(): SelectionTooltipProps {\n return {\n ...this.baseProps,\n focus: () => this.view.focus(),\n data: this.getFilteredConfig(),\n editor: this.actions,\n onClick: (id) => {\n globalLogger.action({mode: 'wysiwyg', source: 'context-menu', action: id});\n this.logger.action({source: 'context-menu', action: id});\n },\n };\n }\n\n private getFilteredConfig(): ContextConfig {\n return this.baseProps.show\n ? this.menuConfig\n .map((groupData) =>\n groupData.filter((item) => {\n const {condition} = item;\n if (condition === 'enabled') {\n return item.isEnable(this.actions);\n }\n if (isFunction(condition)) {\n return condition(this.view.state);\n }\n return true;\n }),\n )\n .filter((groupData) => Boolean(groupData.length))\n : [];\n }\n\n private renderPopup() {\n this.tooltipRenderItem.rerender();\n }\n\n private get tooltipRenderItem() {\n if (!this._tooltipRenderItem) {\n const reactRenderer = getReactRendererFromState(this.view.state);\n this._tooltipRenderItem = reactRenderer.createItem('selection_context', () => (\n <ErrorLoggerBoundary>\n <SelectionTooltip {...this.getSelectionTooltipProps()} />\n </ErrorLoggerBoundary>\n ));\n }\n return this._tooltipRenderItem;\n }\n\n private calcPosition(view: EditorView): PopupProps {\n const virtualElem: VirtualElement = {\n getBoundingClientRect() {\n // These are in screen coordinates\n const start = view.coordsAtPos(view.state.selection.from);\n const end = view.coordsAtPos(view.state.selection.to);\n // Find a center-ish x position from the selection endpoints (when\n // crossing lines, end may be more to the left)\n const yCenter = Math.max((start.left + end.left) / 2, start.left + 3);\n\n const top = start.top;\n const left = yCenter - 1;\n const width = 2;\n const height = end.bottom - start.top;\n\n return {\n top,\n left,\n right: left + width,\n bottom: top + height,\n y: top,\n x: left,\n height,\n width,\n };\n },\n };\n\n return {\n placement: this.placement,\n anchorElement: virtualElem,\n };\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"../../../../../src","sources":["extensions/behavior/SelectionContext/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {VirtualElement} from '@floating-ui/react'; // eslint-disable-line import/no-extraneous-dependencies\nimport {Popup, type PopupPlacement, type PopupProps} from '@gravity-ui/uikit';\nimport type {EditorState} from 'prosemirror-state';\nimport type {EditorView} from 'prosemirror-view';\n\nimport type {ActionStorage} from '../../../core';\nimport {isFunction} from '../../../lodash';\nimport {type Logger2, globalLogger} from '../../../logger';\nimport {ErrorLoggerBoundary} from '../../../react-utils/ErrorBoundary';\nimport {Toolbar} from '../../../toolbar';\nimport type {\n ToolbarButtonPopupData,\n ToolbarGroupItemData,\n ToolbarProps,\n ToolbarSingleItemData,\n} from '../../../toolbar';\nimport {type RendererItem, getReactRendererFromState} from '../ReactRenderer';\n\ntype SelectionTooltipBaseProps = {\n show?: boolean;\n poppupProps: PopupProps;\n};\ntype SelectionTooltipProps = SelectionTooltipBaseProps & ToolbarProps<ActionStorage>;\n\nconst SelectionTooltip: React.FC<SelectionTooltipProps> = ({\n show,\n poppupProps,\n ...toolbarProps\n}) => {\n if (!show) return null;\n return (\n <Popup open {...poppupProps} style={{padding: '4px 8px'}}>\n <Toolbar {...toolbarProps} />\n </Popup>\n );\n};\n\nexport type ContextGroupItemData =\n | (ToolbarGroupItemData<ActionStorage> & {\n condition?: (state: EditorState) => void;\n })\n | ((ToolbarSingleItemData<ActionStorage> | ToolbarButtonPopupData<ActionStorage>) & {\n condition?: 'enabled';\n });\n\nexport type ContextGroupData = ContextGroupItemData[];\nexport type ContextConfig = ContextGroupData[];\n\nexport type TooltipViewParams = {\n /** @default 'bottom' */\n placement?: 'top' | 'bottom';\n /** @default false */\n flip?: boolean;\n};\n\nexport class TooltipView {\n #isTooltipOpen = false;\n\n private readonly logger: Logger2.ILogger;\n private readonly actions: ActionStorage;\n private readonly menuConfig: ContextConfig;\n private readonly placement: PopupPlacement;\n\n private view!: EditorView;\n private baseProps: SelectionTooltipBaseProps = {show: false, poppupProps: {}};\n private _tooltipRenderItem: RendererItem | null = null;\n\n constructor(\n actions: ActionStorage,\n menuConfig: ContextConfig,\n logger: Logger2.ILogger,\n params: TooltipViewParams,\n ) {\n this.logger = logger;\n this.actions = actions;\n this.menuConfig = menuConfig;\n\n const {flip, placement = 'bottom'} = params;\n this.placement = flip ? placement : [placement];\n }\n\n get isTooltipOpen(): boolean {\n return this.#isTooltipOpen;\n }\n\n show(view: EditorView, popupProps?: PopupProps) {\n this.view = view;\n this.#isTooltipOpen = true;\n this.baseProps = {\n show: true,\n poppupProps: {\n ...popupProps,\n ...this.calcPosition(view),\n },\n };\n this.renderPopup();\n }\n\n hide(view: EditorView) {\n this.view = view;\n this.#isTooltipOpen = false;\n this.baseProps = {show: false, poppupProps: {}};\n this.renderPopup();\n }\n\n destroy() {\n this._tooltipRenderItem?.remove();\n this._tooltipRenderItem = null;\n }\n\n private getSelectionTooltipProps(): SelectionTooltipProps {\n return {\n ...this.baseProps,\n qa: 'g-md-toolbar-selection',\n focus: () => this.view.focus(),\n data: this.getFilteredConfig(),\n editor: this.actions,\n onClick: (id) => {\n globalLogger.action({mode: 'wysiwyg', source: 'context-menu', action: id});\n this.logger.action({source: 'context-menu', action: id});\n },\n };\n }\n\n private getFilteredConfig(): ContextConfig {\n return this.baseProps.show\n ? this.menuConfig\n .map((groupData) =>\n groupData.filter((item) => {\n const {condition} = item;\n if (condition === 'enabled') {\n return item.isEnable(this.actions);\n }\n if (isFunction(condition)) {\n return condition(this.view.state);\n }\n return true;\n }),\n )\n .filter((groupData) => Boolean(groupData.length))\n : [];\n }\n\n private renderPopup() {\n this.tooltipRenderItem.rerender();\n }\n\n private get tooltipRenderItem() {\n if (!this._tooltipRenderItem) {\n const reactRenderer = getReactRendererFromState(this.view.state);\n this._tooltipRenderItem = reactRenderer.createItem('selection_context', () => (\n <ErrorLoggerBoundary>\n <SelectionTooltip {...this.getSelectionTooltipProps()} />\n </ErrorLoggerBoundary>\n ));\n }\n return this._tooltipRenderItem;\n }\n\n private calcPosition(view: EditorView): PopupProps {\n const virtualElem: VirtualElement = {\n getBoundingClientRect() {\n // These are in screen coordinates\n const start = view.coordsAtPos(view.state.selection.from);\n const end = view.coordsAtPos(view.state.selection.to);\n // Find a center-ish x position from the selection endpoints (when\n // crossing lines, end may be more to the left)\n const yCenter = Math.max((start.left + end.left) / 2, start.left + 3);\n\n const top = start.top;\n const left = yCenter - 1;\n const width = 2;\n const height = end.bottom - start.top;\n\n return {\n top,\n left,\n right: left + width,\n bottom: top + height,\n y: top,\n x: left,\n height,\n width,\n };\n },\n };\n\n return {\n placement: this.placement,\n anchorElement: virtualElem,\n };\n }\n}\n"]}
|
|
@@ -43,6 +43,6 @@ export function FlexToolbar(props) {
|
|
|
43
43
|
hiddenActions: filteredHiddenAction,
|
|
44
44
|
});
|
|
45
45
|
}, [data, width, hiddenActions]);
|
|
46
|
-
return (_jsx("div", { ref: ref, className: b(null, [className]), children: _jsxs("div", { className: b('container'), children: [_jsx(Toolbar, { ...props, data: items, className: b('bar') }), dots?.length && (_jsx(ToolbarListButton, { qa: "g-md-toolbar-more-action", qaMenu: "g-md-toolbar-
|
|
46
|
+
return (_jsx("div", { ref: ref, className: b(null, [className]), children: _jsxs("div", { className: b('container'), children: [_jsx(Toolbar, { ...props, data: items, className: b('bar') }), dots?.length && (_jsx(ToolbarListButton, { qa: "g-md-toolbar-more-action", qaMenu: "g-md-toolbar-additional", data: dots, icon: { data: Ellipsis }, title: props.dotsTitle, editor: props.editor, focus: props.focus, onClick: props.onClick, className: b('dots'), alwaysActive: true }))] }) }));
|
|
47
47
|
}
|
|
48
48
|
//# sourceMappingURL=FlexToolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlexToolbar.js","sourceRoot":"../../../src","sources":["toolbar/FlexToolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,UAAU,EAAC,MAAM,WAAW,CAAC;AAErC,OAAO,EAAC,EAAE,EAAC,wBAAqB;AAChC,OAAO,EAAC,MAAM,EAAC,qBAAkB;AACjC,OAAO,EAAC,aAAa,EAAC,gCAA6B;AAEnD,OAAO,EAAC,OAAO,EAAoB,qBAAkB;AACrD,OAAO,EAAC,iBAAiB,EAAC,+BAA4B;AACtD,OAAO,EAAC,iBAAiB,EAAC,sBAAmB;AAC7C,OAAO,EAAC,eAAe,EAAuB,mBAAgB;AAE9D,2BAA4B;AAE5B,MAAM,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC;AAO7B,MAAM,UAAU,WAAW,CAAI,KAA0B;IACrD,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE;QACnB,MAAM,CAAC,OAAO,CAAC;YACX,SAAS,EAAE,SAAS;YACpB,KAAK,EAAE,QAAQ;YACf,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,MAAM,EAAC,IAAI,EAAE,SAAS,EAAE,aAAa,EAAC,GAAG,KAAK,CAAC;IAE/C,MAAM,CAAC,GAAG,EAAE,EAAC,KAAK,EAAC,CAAC,GAAG,UAAU,EAAkB,CAAC;IACpD,MAAM,EAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAC,GAAG,OAAO,CAAC,GAAG,EAAE;QACrC,MAAM,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAW,EAAE,YAAY,EAAE,EAAE;YAC/D,OAAO;gBACH,GAAG,CAAC;gBACJ,GAAG,YAAY;qBACV,GAAG,CAAC,CAAC,aAAa,EAAE,EAAE;oBACnB,IAAI,aAAa,CAAC,IAAI,KAAK,eAAe,CAAC,UAAU,EAAE,CAAC;wBACpD,OAAO,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;oBAC/C,CAAC;oBACD,OAAO,aAAa,CAAC,EAAE,CAAC;gBAC5B,CAAC,CAAC;qBACD,IAAI,EAAE;aACd,CAAC;QACN,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,sEAAsE;QACtE,MAAM,oBAAoB,GAAG,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC5F,OAAO,iBAAiB,CAAC;YACrB,IAAI;YACJ,cAAc,EAAE,KAAK;YACrB,aAAa,EAAE,oBAAoB;SACtC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAEjC,OAAO,CACH,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,YAC1C,eAAK,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,aAC1B,KAAC,OAAO,OAAK,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,GAAI,EACvD,IAAI,EAAE,MAAM,IAAI,CACb,KAAC,iBAAiB,IACd,EAAE,EAAC,0BAA0B,EAC7B,MAAM,EAAC,
|
|
1
|
+
{"version":3,"file":"FlexToolbar.js","sourceRoot":"../../../src","sources":["toolbar/FlexToolbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useMemo} from 'react';\n\nimport {Ellipsis} from '@gravity-ui/icons';\nimport {useMeasure} from 'react-use';\n\nimport {cn} from '../classname';\nimport {logger} from '../logger';\nimport {useRenderTime} from '../react-utils/hooks';\n\nimport {Toolbar, type ToolbarProps} from './Toolbar';\nimport {ToolbarListButton} from './ToolbarListButton';\nimport {shrinkToolbarData} from './flexible';\nimport {ToolbarDataType, type ToolbarItemData} from './types';\n\nimport './FlexToolbar.scss';\n\nconst b = cn('flex-toolbar');\n\nexport type FlexToolbarProps<E> = ToolbarProps<E> & {\n dotsTitle: string | (() => string);\n hiddenActions?: ToolbarItemData<E>[];\n};\n\nexport function FlexToolbar<E>(props: FlexToolbarProps<E>) {\n useRenderTime((time) => {\n logger.metrics({\n component: 'toolbar',\n event: 'render',\n duration: time,\n });\n });\n\n const {data, className, hiddenActions} = props;\n\n const [ref, {width}] = useMeasure<HTMLDivElement>();\n const {data: items, dots} = useMemo(() => {\n const toolbarButtonIds = data.reduce((a: string[], toolbarGroup) => {\n return [\n ...a,\n ...toolbarGroup\n .map((toolbarButton) => {\n if (toolbarButton.type === ToolbarDataType.ListButton) {\n return toolbarButton.data.map((v) => v.id);\n }\n return toolbarButton.id;\n })\n .flat(),\n ];\n }, []);\n\n // Finding only actions tha are not present in the main toolbar config\n const filteredHiddenAction = hiddenActions?.filter((a) => !toolbarButtonIds.includes(a.id));\n return shrinkToolbarData({\n data,\n availableWidth: width,\n hiddenActions: filteredHiddenAction,\n });\n }, [data, width, hiddenActions]);\n\n return (\n <div ref={ref} className={b(null, [className])}>\n <div className={b('container')}>\n <Toolbar {...props} data={items} className={b('bar')} />\n {dots?.length && (\n <ToolbarListButton\n qa=\"g-md-toolbar-more-action\"\n qaMenu=\"g-md-toolbar-additional\"\n data={dots}\n icon={{data: Ellipsis}}\n title={props.dotsTitle}\n editor={props.editor}\n focus={props.focus}\n onClick={props.onClick}\n className={b('dots')}\n alwaysActive={true}\n />\n )}\n </div>\n </div>\n );\n}\n"]}
|
|
@@ -4,4 +4,4 @@ export type { ToolbarData };
|
|
|
4
4
|
export type ToolbarProps<E> = ToolbarBaseProps<E> & {
|
|
5
5
|
data: ToolbarData<E>;
|
|
6
6
|
};
|
|
7
|
-
export declare function Toolbar<E>({ editor, data, className, focus, onClick }: ToolbarProps<E>): JSX.Element;
|
|
7
|
+
export declare function Toolbar<E>({ editor, data, className, focus, onClick, qa }: ToolbarProps<E>): JSX.Element;
|
|
@@ -4,8 +4,8 @@ import { cn } from "../classname.js";
|
|
|
4
4
|
import { ToolbarButtonGroup } from "./ToolbarGroup.js";
|
|
5
5
|
import "./Toolbar.css";
|
|
6
6
|
const b = cn('toolbar');
|
|
7
|
-
export function Toolbar({ editor, data, className, focus, onClick }) {
|
|
8
|
-
return (_jsx("div", { className: b(null, [className]), children: data.map((group, index) => {
|
|
7
|
+
export function Toolbar({ editor, data, className, focus, onClick, qa }) {
|
|
8
|
+
return (_jsx("div", { className: b(null, [className]), "data-qa": qa, children: data.map((group, index) => {
|
|
9
9
|
const isLastGroup = index === data.length - 1;
|
|
10
10
|
return (_jsxs(Fragment, { children: [_jsx(ToolbarButtonGroup, { data: group, editor: editor, focus: focus, onClick: onClick, className: b('group') }), isLastGroup || _jsx("div", { className: b('group-separator') })] }, index));
|
|
11
11
|
}) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbar.js","sourceRoot":"../../../src","sources":["toolbar/Toolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,EAAE,EAAC,wBAAqB;AAEhC,OAAO,EAAC,kBAAkB,EAAC,0BAAuB;AAGlD,uBAAwB;AAExB,MAAM,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;AAQxB,MAAM,UAAU,OAAO,CAAI,EAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAkB;
|
|
1
|
+
{"version":3,"file":"Toolbar.js","sourceRoot":"../../../src","sources":["toolbar/Toolbar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,EAAE,EAAC,wBAAqB;AAEhC,OAAO,EAAC,kBAAkB,EAAC,0BAAuB;AAGlD,uBAAwB;AAExB,MAAM,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;AAQxB,MAAM,UAAU,OAAO,CAAI,EAAC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAkB;IACrF,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,SAAS,CAAC,CAAC,aAAW,EAAE,YAC5C,IAAI,CAAC,GAAG,CAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACxC,MAAM,WAAW,GAAG,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;YAE9C,OAAO,CACH,MAAC,QAAQ,eACL,KAAC,kBAAkB,IACf,IAAI,EAAE,KAAK,EACX,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GACvB,EACD,WAAW,IAAI,cAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,CAAC,GAAI,KAR7C,KAAK,CAST,CACd,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC","sourcesContent":["import {Fragment} from 'react';\n\nimport {cn} from '../classname';\n\nimport {ToolbarButtonGroup} from './ToolbarGroup';\nimport type {ToolbarBaseProps, ToolbarData} from './types';\n\nimport './Toolbar.scss';\n\nconst b = cn('toolbar');\n\nexport type {ToolbarData};\n\nexport type ToolbarProps<E> = ToolbarBaseProps<E> & {\n data: ToolbarData<E>;\n};\n\nexport function Toolbar<E>({editor, data, className, focus, onClick, qa}: ToolbarProps<E>) {\n return (\n <div className={b(null, [className])} data-qa={qa}>\n {data.map<React.ReactNode>((group, index) => {\n const isLastGroup = index === data.length - 1;\n\n return (\n <Fragment key={index}>\n <ToolbarButtonGroup\n data={group}\n editor={editor}\n focus={focus}\n onClick={onClick}\n className={b('group')}\n />\n {isLastGroup || <div className={b('group-separator')} />}\n </Fragment>\n );\n })}\n </div>\n );\n}\n"]}
|
|
@@ -8,7 +8,7 @@ import { ToolbarTooltipDelay } from "./const.js";
|
|
|
8
8
|
import "./ToolbarButton.css";
|
|
9
9
|
const b = cn('toolbar-button');
|
|
10
10
|
const DEFAULT_ICON_SIZE = 16;
|
|
11
|
-
export const ToolbarButtonView = forwardRef(function ToolbarButtonView({ title, hint, hotkey, hintWhenDisabled, active, enabled, onClick, className, qa, ...props }, ref) {
|
|
11
|
+
export const ToolbarButtonView = forwardRef(function ToolbarButtonView({ title, hint, hotkey, hintWhenDisabled, active, enabled, onClick, className, qa, id, ...props }, ref) {
|
|
12
12
|
const disabled = !active && !enabled;
|
|
13
13
|
const titleText = isFunction(title) ? title() : title;
|
|
14
14
|
const hintText = isFunction(hint) ? hint() : hint;
|
|
@@ -22,7 +22,7 @@ export const ToolbarButtonView = forwardRef(function ToolbarButtonView({ title,
|
|
|
22
22
|
setRef(ref, elem);
|
|
23
23
|
setRef(refForPopover, elem);
|
|
24
24
|
setRef(refForTooltip, elem);
|
|
25
|
-
}, selected: active, disabled: disabled, view: active ? 'normal' : 'flat', onClick: onClick, className: b(null, [className]), "aria-label": titleText, children: 'icon' in props ? (_jsx(Icon, { data: props.icon.data, size: props.icon.size ?? DEFAULT_ICON_SIZE })) : (props.children) })) })) }));
|
|
25
|
+
}, selected: active, disabled: disabled, view: active ? 'normal' : 'flat', onClick: onClick, className: b(null, [className]), "aria-label": titleText, "data-toolbar-item": id, children: 'icon' in props ? (_jsx(Icon, { data: props.icon.data, size: props.icon.size ?? DEFAULT_ICON_SIZE })) : (props.children) })) })) }));
|
|
26
26
|
});
|
|
27
27
|
export function ToolbarButton(props) {
|
|
28
28
|
const { id, editor, focus, isActive, isEnable, exec, onClick } = props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarButton.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,UAAU,EAAC,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,aAAa,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,MAAM,mBAAmB,CAAC;AAE/E,OAAO,EAAC,EAAE,EAAC,wBAAqB;AAChC,OAAO,EAAC,IAAI,EAAC,gCAAuB;AACpC,OAAO,EAAC,UAAU,EAAC,qBAAkB;AAErC,OAAO,EAAC,mBAAmB,EAAC,mBAAgB;AAG5C,6BAA8B;AAE9B,MAAM,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"ToolbarButton.js","sourceRoot":"../../../src","sources":["toolbar/ToolbarButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {type ReactNode, forwardRef} from 'react';\n\nimport {ActionTooltip, Button, Icon, Popover, setRef} from '@gravity-ui/uikit';\n\nimport {cn} from '../classname';\nimport {i18n} from '../i18n/common';\nimport {isFunction} from '../lodash';\n\nimport {ToolbarTooltipDelay} from './const';\nimport type {ToolbarBaseProps, ToolbarItemData} from './types';\n\nimport './ToolbarButton.scss';\n\nconst b = cn('toolbar-button');\n\nexport type ToolbarButtonProps<E> = ToolbarBaseProps<E> & ToolbarItemData<E>;\n\nexport type ToolbarButtonViewProps = Pick<\n ToolbarItemData<unknown>,\n 'title' | 'hint' | 'hotkey' | 'hintWhenDisabled' | 'qa'\n> & {\n active: boolean;\n enabled: boolean;\n onClick: () => void;\n id?: string;\n className?: string;\n} & (Pick<ToolbarItemData<unknown>, 'icon'> | {children: ReactNode});\n\nconst DEFAULT_ICON_SIZE = 16;\n\nexport const ToolbarButtonView = forwardRef<HTMLButtonElement, ToolbarButtonViewProps>(\n function ToolbarButtonView(\n {\n title,\n hint,\n hotkey,\n hintWhenDisabled,\n active,\n enabled,\n onClick,\n className,\n qa,\n id,\n ...props\n },\n ref,\n ) {\n const disabled = !active && !enabled;\n const titleText: string = isFunction(title) ? title() : title;\n const hintText: string | undefined = isFunction(hint) ? hint() : hint;\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 return (\n <Popover\n content={<div className={b('action-disabled-tooltip')}>{hintWhenDisabledText}</div>}\n disabled={hideHintWhenDisabled}\n placement={['bottom']}\n >\n {(_, refForPopover) => (\n <ActionTooltip\n openDelay={ToolbarTooltipDelay.Open}\n closeDelay={ToolbarTooltipDelay.Close}\n description={hintText}\n title={titleText}\n hotkey={hotkey}\n >\n {(__, refForTooltip) => (\n <Button\n qa={qa}\n size=\"m\"\n ref={(elem: HTMLButtonElement) => {\n setRef(ref, elem);\n setRef(refForPopover, elem);\n setRef(refForTooltip, elem);\n }}\n selected={active}\n disabled={disabled}\n view={active ? 'normal' : 'flat'}\n onClick={onClick}\n className={b(null, [className])}\n aria-label={titleText}\n data-toolbar-item={id}\n >\n {'icon' in props ? (\n <Icon\n data={props.icon.data}\n size={props.icon.size ?? DEFAULT_ICON_SIZE}\n />\n ) : (\n props.children\n )}\n </Button>\n )}\n </ActionTooltip>\n )}\n </Popover>\n );\n },\n);\n\nexport function ToolbarButton<E>(props: ToolbarButtonProps<E>) {\n const {id, editor, focus, isActive, isEnable, exec, onClick} = props;\n\n const active = isActive(editor);\n const enabled = isEnable(editor);\n\n const handleClick = () => {\n focus();\n exec(editor);\n onClick?.(id);\n };\n\n return <ToolbarButtonView {...props} active={active} enabled={enabled} onClick={handleClick} />;\n}\n"]}
|
|
@@ -3,5 +3,6 @@ import "./ToolbarListButton.css";
|
|
|
3
3
|
export type { ToolbarListButtonData };
|
|
4
4
|
export type ToolbarListButtonProps<E> = ToolbarBaseProps<E> & ToolbarListButtonData<E> & {
|
|
5
5
|
qaMenu?: string;
|
|
6
|
+
qaActionDisabledPopover?: string;
|
|
6
7
|
};
|
|
7
|
-
export declare function ToolbarListButton<E>({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, replaceActiveIcon, qa, qaMenu, }: ToolbarListButtonProps<E>): JSX.Element | null;
|
|
8
|
+
export declare function ToolbarListButton<E>({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, replaceActiveIcon, qa, qaMenu, qaActionDisabledPopover, }: ToolbarListButtonProps<E>): JSX.Element | null;
|
|
@@ -10,7 +10,7 @@ import { PreviewTooltip } from "./PreviewTooltip.js";
|
|
|
10
10
|
import { ToolbarButtonView } from "./ToolbarButton.js";
|
|
11
11
|
import "./ToolbarListButton.css";
|
|
12
12
|
const b = cn('toolbar-list-button');
|
|
13
|
-
export function ToolbarListButton({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, replaceActiveIcon, qa, qaMenu, }) {
|
|
13
|
+
export function ToolbarListButton({ className, editor, focus, onClick, icon, title, withArrow, data, alwaysActive, replaceActiveIcon, qa, qaMenu, qaActionDisabledPopover = 'g-md-toolbar-action-disabled-hint', }) {
|
|
14
14
|
const [anchorElement, setAnchorElement] = useElementState();
|
|
15
15
|
const [open, , hide, toggleOpen] = useBooleanState(false);
|
|
16
16
|
const [popupItem, setPopupItem] = useState();
|
|
@@ -63,7 +63,7 @@ export function ToolbarListButton({ className, editor, focus, onClick, icon, tit
|
|
|
63
63
|
onClick?.(id);
|
|
64
64
|
}
|
|
65
65
|
};
|
|
66
|
-
return (_jsx(Popover, { className: b('action-disabled-popover'), content: _jsx("div", { className: b('action-disabled-tooltip'), children: hintWhenDisabledText }), placement: "left", modal: false, disabled: hideHintWhenDisabled, qa:
|
|
66
|
+
return (_jsx(Popover, { className: b('action-disabled-popover'), content: _jsx("div", { className: b('action-disabled-tooltip'), children: hintWhenDisabledText }), placement: "left", modal: false, disabled: hideHintWhenDisabled, qa: qaActionDisabledPopover, children: (props, ref) => (_jsx(PreviewTooltip, { preview: preview, children: _jsx(Menu.Item, { ref: ref, active: isActive(editor), disabled: !isEnable(editor), onClick: handleClick, iconStart: _jsx(Icon, { data: icon.data, size: icon.size ?? 16 }), extraProps: {
|
|
67
67
|
...props,
|
|
68
68
|
'aria-label': titleText,
|
|
69
69
|
}, children: _jsxs("div", { className: b('item'), children: [titleText, _jsxs("div", { className: b('extra'), children: [hotkey && _jsx(Hotkey, { value: hotkey }), hintText && (_jsx(HelpMark, { className: b('hint'), popoverProps: { modal: false }, children: hintText }))] })] }) }, id) })) }, id));
|
|
@@ -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 {cn} from '../classname';\nimport {i18n} from '../i18n/common';\nimport {isFunction} from '../lodash';\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 };\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}: ToolbarListButtonProps<E>) {\n const [anchorElement, setAnchorElement] = useElementState();\n const [open, , hide, toggleOpen] = useBooleanState(false);\n const [popupItem, setPopupItem] = useState<ToolbarButtonPopupData<E>>();\n\n const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));\n const popupOpen = everyDisabled ? false : open;\n const shouldForceHide = open && !popupOpen;\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\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 >\n {buttonContent}\n </ToolbarButtonView>\n <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>\n <Menu size=\"l\" className={b('menu')} qa={qaMenu}>\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=\"g-md-toolbar-action-disabled-hint\"\n key={id}\n >\n {(props, ref) => (\n <PreviewTooltip preview={preview}>\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 <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 </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 {cn} from '../classname';\nimport {i18n} from '../i18n/common';\nimport {isFunction} from '../lodash';\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}: ToolbarListButtonProps<E>) {\n const [anchorElement, setAnchorElement] = useElementState();\n const [open, , hide, toggleOpen] = useBooleanState(false);\n const [popupItem, setPopupItem] = useState<ToolbarButtonPopupData<E>>();\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\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 >\n {buttonContent}\n </ToolbarButtonView>\n <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>\n <Menu size=\"l\" className={b('menu')} qa={qaMenu}>\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}>\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 <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 </div>\n </Menu.Item>\n </PreviewTooltip>\n )}\n </Popover>\n );\n })\n .filter(Boolean)}\n </Menu>\n </Popup>\n {popupItem\n ? popupItem.renderPopup({\n ...popupItem,\n editor,\n focus,\n onClick,\n anchorElement,\n hide: () => setPopupItem(undefined),\n })\n : null}\n </>\n );\n}\n\nfunction isPopupItem<E>(item: ToolbarItemData<E>): item is ToolbarButtonPopupData<E> {\n return Boolean((item as ToolbarButtonPopupData<E>).renderPopup);\n}\n"]}
|
package/build/esm/version.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/** During build process, the current version will be injected here */
|
|
2
|
-
export const VERSION = typeof '15.
|
|
2
|
+
export const VERSION = typeof '15.14.1' !== 'undefined' ? '15.14.1' : 'unknown';
|
|
3
3
|
//# sourceMappingURL=version.js.map
|
package/build/esm/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["/** During build process, the current version will be injected here */\nexport const VERSION = typeof '15.
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["/** During build process, the current version will be injected here */\nexport const VERSION = typeof '15.14.1' !== 'undefined' ? '15.14.1' : 'unknown';\n"]}
|