feat(YfmTable): update color picker for cell background [2]

Author: d3m1d0v

demo/src/stories/examples/yfm-table-dnd/YfmTableDnD.stories.tsx

@@ -7,6 +7,7 @@ export const Story: StoryObj<typeof component> = {
         mobile: false,
         dnd: true,
         headerRows: true,
+        cellBackground: true,
     },
 };
 Story.storyName = "YFM Table D'n'D";

demo/src/stories/examples/yfm-table-dnd/YfmTableDnD.tsx

@@ -10,12 +10,14 @@ export type YfmTableDnDDemoProps = {
     mobile: boolean;
     dnd: boolean;
     headerRows: boolean;
+    cellBackground: boolean;
 };
 
 export const YfmTableDnDDemo = memo<YfmTableDnDDemoProps>(function YfmTableDnDDemo({
     mobile,
     dnd,
     headerRows,
+    cellBackground,
 }) {
     const editor = useMarkdownEditor(
         {
@@ -32,6 +34,7 @@ export const YfmTableDnDDemo = memo<YfmTableDnDDemoProps>(function YfmTableDnDDe
                     yfmTable: {
                         dnd,
                         headerRows,
+                        cellBackground,
                     },
                 },
             },

packages/editor/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/CellBgMenuItem/CellBgMenuItem.tsx

@@ -0,0 +1,72 @@
+import {useEffect, useRef} from 'react';
+
+import {ChevronRight, BucketPaint as ColorPalette} from '@gravity-ui/icons';
+import {Icon, Menu, Popup, sp} from '@gravity-ui/uikit';
+
+import {i18n} from 'src/i18n/yfm-table';
+import {useBooleanState, useElementState} from 'src/react-utils';
+
+import {CellBgPalette} from '../CellBgPalette';
+
+const CLOSE_DELAY = 120;
+
+export type CellBgMenuItemProps = {
+    qa?: string;
+    currentCellBg?: string | null;
+    onCellBgChange: (color: string | null) => void;
+};
+
+export const CellBgMenuItem: React.FC<CellBgMenuItemProps> = function YfmTableCellBgMenuItem({
+    qa,
+    currentCellBg,
+    onCellBgChange,
+}) {
+    const [anchorElement, setAnchorElement] = useElementState<HTMLDivElement>();
+    const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const [open, openPopup, closePopup] = useBooleanState(false);
+
+    const cancelClose = () => {
+        if (closeTimer.current) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+    };
+    const scheduleClose = () => {
+        cancelClose();
+        closeTimer.current = setTimeout(closePopup, CLOSE_DELAY);
+    };
+
+    useEffect(() => () => cancelClose(), []);
+
+    return (
+        <Menu.Item
+            qa={qa}
+            ref={setAnchorElement}
+            iconStart={<Icon data={ColorPalette} />}
+            iconEnd={<Icon data={ChevronRight} />}
+            onClick={() => {
+                cancelClose();
+                openPopup();
+            }}
+            extraProps={{
+                onMouseEnter: () => {
+                    cancelClose();
+                    openPopup();
+                },
+                onMouseLeave: scheduleClose,
+            }}
+        >
+            {i18n('cells.bg')}
+            <Popup
+                open={open}
+                hasArrow={false}
+                placement="right-start"
+                anchorElement={anchorElement}
+            >
+                <div onMouseEnter={cancelClose} onMouseLeave={scheduleClose} className={sp({p: 2})}>
+                    <CellBgPalette value={currentCellBg} onSelect={onCellBgChange} />
+                </div>
+            </Popup>
+        </Menu.Item>
+    );
+};

packages/editor/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/CellBgMenuItem/index.ts

@@ -0,0 +1 @@
+export * from './CellBgMenuItem';

packages/editor/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/CellBgPalette/CellBgPalette.scss

@@ -18,13 +18,32 @@ $color-map: (
     gap: 0;
 
     &__item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        font: inherit;
         cursor: pointer;
 
+        color: inherit;
+        border: 0;
         border-radius: var(--g-border-radius-m);
+        background: transparent;
+
+        appearance: none;
 
         &:hover {
             background: var(--g-color-base-generic);
         }
+
+        &:focus {
+            outline: none;
+        }
+
+        &:focus-visible {
+            outline: 1px solid var(--g-color-line-focus);
+            outline-offset: -1px;
+        }
     }
 
     &__swatch {

packages/editor/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/CellBgPalette/CellBgPalette.tsx

@@ -1,5 +1,5 @@
 import {Check} from '@gravity-ui/icons';
-import {Box, Icon, Tooltip} from '@gravity-ui/uikit';
+import {Icon, Tooltip, spacing} from '@gravity-ui/uikit';
 
 import {cn} from 'src/classname';
 import {i18n} from 'src/i18n/yfm-table';
@@ -40,22 +40,36 @@ export const CellBgPalette: React.FC<CellBgPaletteProps> = function YfmTableCell
                         placement={isTopRow ? 'top' : 'bottom'}
                         content={i18n(swatch.i18nKey)}
                     >
-                        <Box className={b('item')} spacing={{p: 1}}>
-                            <button
-                                type="button"
+                        <button
+                            type="button"
+                            className={spacing({p: 1}, b('item'))}
+                            aria-label={i18n(swatch.i18nKey)}
+                            aria-pressed={isSelected}
+                            onClick={() => handleClick(swatch.value)}
+                            // Parent Menu.Item listens for Enter/Space and re-opens its popup,
+                            // shadowing the button's native activation. Handle the keys here
+                            // and stop propagation so the swatch is actually selected.
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    handleClick(swatch.value);
+                                }
+                            }}
+                        >
+                            <span
                                 className={b('swatch', {
                                     none: swatch.value === NO_COLOR_VALUE,
                                     color: swatch.value || undefined,
                                 })}
-                                onClick={() => handleClick(swatch.value)}
                             >
                                 {isSelected && (
                                     <span className={b('check')}>
                                         <Icon data={Check} size={16} />
                                     </span>
                                 )}
-                            </button>
-                        </Box>
+                            </span>
+                        </button>
                     </Tooltip>
                 );
             })}

packages/editor/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/CellBgPalette/index.ts

@@ -0,0 +1 @@
+export * from './CellBgPalette';

packages/editor/src/extensions/yfm/YfmTable/plugins/YfmTableControls/components/FloatingMenu/FloatingMenu.tsx

@@ -22,7 +22,8 @@ export type FloatingMenuProps = {
     dirtype: 'row' | 'column';
     canDrag: boolean;
     anchorElement: ReferenceType;
-    dropdownItems: DropdownMenuProps<unknown>['items'];
+    dropdownItems?: DropdownMenuProps<unknown>['items'];
+    children?: React.ReactNode;
     switcherMouseProps?: Pick<
         ButtonButtonProps,
         'onMouseDown' | 'onMouseMove' | 'onMouseUp' | 'onMouseLeave'
@@ -31,8 +32,15 @@ export type FloatingMenuProps = {
 };
 
 export const FloatingMenu: React.FC<FloatingMenuProps> = function YfmTableFloatingMenu(props) {
-    const {dirtype, canDrag, anchorElement, dropdownItems, switcherMouseProps, onOpenToggle} =
-        props;
+    const {
+        dirtype,
+        canDrag,
+        anchorElement,
+        dropdownItems,
+        children,
+        switcherMouseProps,
+        onOpenToggle,
+    } = props;
 
     const [isMenuOpened, setMenuOpened] = useState(false);
     const [isHovered, setHovered, unsetHovered] = useBooleanState(false);
@@ -102,7 +110,9 @@ export const FloatingMenu: React.FC<FloatingMenuProps> = function YfmTableFloati
                 }}
                 menuProps={{qa: `g-md-yfm-table-${dirtype}-menu`}}
                 items={dropdownItems}
-            />
+            >
+                {children}
+            </DropdownMenu>
         </FloatingPopup>
     );
 };