feat: ability to add hidden action to toolbar (#144)

Author: smsochneg

src/toolbar/FlexToolbar.tsx

@@ -8,13 +8,15 @@ import {ToolbarListButton} from './ToolbarListButton';
 import {shrinkToolbarData} from './flexible';
 import {logger} from '../logger';
 import {useRenderTime} from '../react-utils/hooks';
+import {ToolbarDataType, ToolbarItemData} from './types';
 
 import './FlexToolbar.scss';
 
 const b = cn('flex-toolbar');
 
 export type FlexToolbarProps<E> = ToolbarProps<E> & {
     dotsTitle: string | (() => string);
+    hiddenActions?: ToolbarItemData<E>[];
 };
 
 export function FlexToolbar<E>(props: FlexToolbarProps<E>) {
@@ -26,12 +28,32 @@ export function FlexToolbar<E>(props: FlexToolbarProps<E>) {
         });
     });
 
-    const {data, className} = props;
+    const {data, className, hiddenActions} = props;
+
     const [ref, {width}] = useMeasure<HTMLDivElement>();
-    const {data: items, dots} = React.useMemo(
-        () => shrinkToolbarData({data, availableWidth: width}),
-        [data, width],
-    );
+    const {data: items, dots} = React.useMemo(() => {
+        const toolbarButtonIds = data.reduce((a: string[], toolbarGroup) => {
+            return [
+                ...a,
+                ...toolbarGroup
+                    .map((toolbarButton) => {
+                        if (toolbarButton.type === ToolbarDataType.ListButton) {
+                            return toolbarButton.data.map((v) => v.id);
+                        }
+                        return toolbarButton.id;
+                    })
+                    .flat(),
+            ];
+        }, []);
+
+        // Finding only actions tha are not present in the main toolbar config
+        const filteredHiddenAction = hiddenActions?.filter((a) => !toolbarButtonIds.includes(a.id));
+        return shrinkToolbarData({
+            data,
+            availableWidth: width,
+            hiddenActions: filteredHiddenAction,
+        });
+    }, [data, width, hiddenActions]);
 
     return (
         <div ref={ref} className={b(null, [className])}>
@@ -46,6 +68,8 @@ export function FlexToolbar<E>(props: FlexToolbarProps<E>) {
                         focus={props.focus}
                         onClick={props.onClick}
                         className={b('dots')}
+                        alwaysActive={true}
+                        hideDisabled={true}
                     />
                 )}
             </div>

src/toolbar/ToolbarListButton.tsx

@@ -18,6 +18,8 @@ export type ToolbarListButtonData<E> = {
     title: string | (() => string);
     withArrow?: boolean;
     data: ToolbarItemData<E>[];
+    alwaysActive?: boolean;
+    hideDisabled?: boolean;
 };
 
 export type ToolbarListButtonProps<E> = ToolbarBaseProps<E> & ToolbarListButtonData<E>;
@@ -31,12 +33,14 @@ export function ToolbarListButton<E>({
     title,
     withArrow,
     data,
+    alwaysActive,
+    hideDisabled,
 }: ToolbarListButtonProps<E>) {
     const buttonRef = React.useRef<HTMLButtonElement>(null);
     const [open, , hide, toggleOpen] = useBooleanState(false);
 
-    const someActive = data.some((item) => item.isActive(editor));
-    const everyDisabled = data.every((item) => !item.isEnable(editor));
+    const someActive = alwaysActive ? false : data.some((item) => item.isActive(editor));
+    const everyDisabled = alwaysActive ? false : data.every((item) => !item.isEnable(editor));
 
     const popupOpen = everyDisabled ? false : open;
     const shouldForceHide = open && !popupOpen;
@@ -78,35 +82,41 @@ export function ToolbarListButton<E>({
             </Tooltip>
             <Popup anchorRef={buttonRef} open={popupOpen} onClose={hide}>
                 <Menu size="l" className={b('menu')}>
-                    {data.map(({id, title, icon, hotkey, isActive, isEnable, exec, hint}) => {
-                        const titleText = isFunction(title) ? title() : title;
-                        const hintText = isFunction(hint) ? hint() : hint;
-                        return (
-                            <Menu.Item
-                                key={id}
-                                active={isActive(editor)}
-                                disabled={!isEnable(editor)}
-                                onClick={() => {
-                                    hide();
-                                    focus();
-                                    exec(editor);
-                                    onClick?.(id);
-                                }}
-                                icon={<Icon data={icon.data} size={icon.size ?? 16} />}
-                                extraProps={{'aria-label': titleText}}
-                            >
-                                <div className={b('item')}>
-                                    {titleText}
-                                    <div className={b('extra')}>
-                                        {hotkey && <Hotkey value={hotkey} />}
-                                        {hintText && (
-                                            <HelpPopover className={b('hint')} content={hintText} />
-                                        )}
+                    {data
+                        .map(({id, title, icon, hotkey, isActive, isEnable, exec, hint}) => {
+                            const titleText = isFunction(title) ? title() : title;
+                            const hintText = isFunction(hint) ? hint() : hint;
+                            const disabled = !isEnable(editor);
+                            return hideDisabled && disabled ? null : (
+                                <Menu.Item
+                                    key={id}
+                                    active={isActive(editor)}
+                                    disabled={!isEnable(editor)}
+                                    onClick={() => {
+                                        hide();
+                                        focus();
+                                        exec(editor);
+                                        onClick?.(id);
+                                    }}
+                                    icon={<Icon data={icon.data} size={icon.size ?? 16} />}
+                                    extraProps={{'aria-label': titleText}}
+                                >
+                                    <div className={b('item')}>
+                                        {titleText}
+                                        <div className={b('extra')}>
+                                            {hotkey && <Hotkey value={hotkey} />}
+                                            {hintText && (
+                                                <HelpPopover
+                                                    className={b('hint')}
+                                                    content={hintText}
+                                                />
+                                            )}
+                                        </div>
                                     </div>
-                                </div>
-                            </Menu.Item>
-                        );
-                    })}
+                                </Menu.Item>
+                            );
+                        })
+                        .filter(Boolean)}
                 </Menu>
             </Popup>
         </>

src/toolbar/flexible.tsx

@@ -20,9 +20,14 @@ const dotsWidth = B_DOTS_LEFT_GAP + B_DOTS_WIDTH;
 export type ShrinkToolbarDataParams<E> = {
     data: ToolbarData<E>;
     availableWidth: number;
+    hiddenActions?: ToolbarItemData<E>[];
 };
 
-export function shrinkToolbarData<E>({availableWidth, data}: ShrinkToolbarDataParams<E>): {
+export function shrinkToolbarData<E>({
+    availableWidth,
+    data,
+    hiddenActions = [],
+}: ShrinkToolbarDataParams<E>): {
     data: ToolbarData<E>;
     dots?: ToolbarItemData<E>[];
 } {
@@ -64,6 +69,8 @@ export function shrinkToolbarData<E>({availableWidth, data}: ShrinkToolbarDataPa
         if (newGroup.length) fittingData.push(newGroup);
     });
 
+    dotsData.push(...hiddenActions);
+
     return {data: fittingData, dots: dotsData.length ? dotsData : undefined};
 }