feat(YfmTable): add background color picker to row and column controls

Author: d3m1d0v

demo/src/components/Playground.tsx

@@ -259,6 +259,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
                         table_ignoreSplittersInBlockMath: true,
                         table_ignoreSplittersInInlineCode: true,
                         table_ignoreSplittersInInlineMath: true,
+                        cellBackground: true,
                     },
                     ...wysiwygConfig?.extensionOptions,
                 },

demo/src/hocs/withLang.tsx

@@ -3,6 +3,7 @@ import {configure} from '@gravity-ui/uikit';
 import type {Decorator} from '@storybook/react';
 
 import '@gravity-ui/uikit/styles/styles.scss';
+import '@gravity-ui/markdown-editor/styles/markdown.css'; // eslint-disable-line import/order
 
 export const withLang: Decorator = (StoryItem, context) => {
     const lang = context.globals.lang;

demo/src/hocs/withThemeProvider.tsx

@@ -2,6 +2,7 @@ import {ThemeProvider} from '@gravity-ui/uikit';
 import type {Decorator} from '@storybook/react';
 
 import '@gravity-ui/uikit/styles/styles.scss';
+import '@gravity-ui/markdown-editor/styles/markdown.css'; // eslint-disable-line import/order
 
 export const withThemeProvider: Decorator = (StoryItem, context) => {
     return (

demo/src/hocs/withToaster.tsx

@@ -3,6 +3,7 @@ import {toaster} from '@gravity-ui/uikit/toaster-singleton';
 import type {Decorator} from '@storybook/react';
 
 import '@gravity-ui/uikit/styles/styles.scss';
+import '@gravity-ui/markdown-editor/styles/markdown.css'; // eslint-disable-line import/order
 
 export const withToaster: Decorator = (StoryItem, context) => {
     return (

packages/editor/src/extensions/yfm/YfmTable/YfmTable.test.ts

@@ -1,6 +1,7 @@
 import {EditorState} from 'prosemirror-state';
 import {builders} from 'prosemirror-test-builder';
 import {EditorView} from 'prosemirror-view';
+import dd from 'ts-dedent';
 
 import {dispatchPasteEvent} from '../../../../tests/dispatch-event';
 import {parseDOM} from '../../../../tests/parse-dom';
@@ -519,6 +520,87 @@ nested table
         );
     });
 
+    // TODO: enable when @diplodoc/transform >= 4.75.0 is released (parses ::{bg=...} cell attrs)
+    it.skip('should serialize cell-bg on first cell (same line as ||)', () => {
+        const markup = dd`
+            #|
+            || ::{bg="info"}
+
+            cell11
+
+            ||
+            |#
+
+            `.trimStart();
+
+        same(
+            markup,
+            doc(table(tbody(tr(td({[YfmTableAttr.CellBg]: 'info'}, p('cell11'), p('')))))),
+        );
+    });
+
+    it.skip('should serialize cell-bg on non-first cell (same line as |)', () => {
+        const markup = dd`
+            #|
+            ||
+
+            cell11
+
+            |::{bg="warning"}
+
+            cell12
+
+            ||
+            |#
+
+            `.trimStart();
+
+        same(
+            markup,
+            doc(
+                table(
+                    tbody(
+                        tr(
+                            td(p('cell11'), p('')),
+                            td({[YfmTableAttr.CellBg]: 'warning'}, p('cell12'), p('')),
+                        ),
+                    ),
+                ),
+            ),
+        );
+    });
+
+    it.skip('should serialize cell-bg on multiple cells', () => {
+        const markup = dd`
+            #|
+            || ::{bg="info"}
+
+            cell11
+
+            |::{bg="danger"}
+
+            cell12
+
+            ||
+            |#
+
+            `.trimStart();
+
+        same(
+            markup,
+            doc(
+                table(
+                    tbody(
+                        tr(
+                            td({[YfmTableAttr.CellBg]: 'info'}, p('cell11'), p('')),
+                            td({[YfmTableAttr.CellBg]: 'danger'}, p('cell12'), p('')),
+                        ),
+                    ),
+                ),
+            ),
+        );
+    });
+
     it('should preserve cell-align', () => {
         const markup = `
 #|

packages/editor/src/extensions/yfm/YfmTable/YfmTableSpecs/const.ts

@@ -9,4 +9,5 @@ export enum YfmTableAttr {
     Colspan = 'colspan',
     Rowspan = 'rowspan',
     CellAlign = 'data-cell-align',
+    CellBg = 'data-bg',
 }

packages/editor/src/extensions/yfm/YfmTable/YfmTableSpecs/schema.ts

@@ -76,6 +76,7 @@ export const getSchemaSpecs = (
             [YfmTableAttr.Colspan]: {default: null},
             [YfmTableAttr.Rowspan]: {default: null},
             [YfmTableAttr.CellAlign]: {default: null},
+            [YfmTableAttr.CellBg]: {default: null},
         },
         parseDOM: [
             {tag: 'td', priority: 200},

packages/editor/src/extensions/yfm/YfmTable/YfmTableSpecs/serializer.ts

@@ -20,7 +20,10 @@ export const serializerTokens: Record<YfmTableNode, SerializerNodeToken> = {
         const rowspanStack: Record<number, number> = {};
 
         tbody.forEach((trow) => {
-            state.write('||');
+            const firstCellBg = trow.firstChild?.attrs[YfmTableAttr.CellBg];
+            const firstCellAttrs =
+                typeof firstCellBg === 'string' ? ` ::{bg="${firstCellBg}"}` : '';
+            state.write(`||${firstCellAttrs}`);
             state.ensureNewLine();
             state.write('\n');
 
@@ -39,7 +42,9 @@ export const serializerTokens: Record<YfmTableNode, SerializerNodeToken> = {
                 }
 
                 if (colIndex > 0) {
-                    state.write('|');
+                    const cellBg = td.attrs[YfmTableAttr.CellBg];
+                    const cellAttrs = typeof cellBg === 'string' ? `::{bg="${cellBg}"}` : '';
+                    state.write(cellAttrs ? `|${cellAttrs}` : '|');
                     state.ensureNewLine();
                     state.write('\n');
                 }

packages/editor/src/extensions/yfm/YfmTable/index.ts

@@ -31,6 +31,13 @@ export type YfmTableOptions = YfmTableSpecsOptions & {
      * @default true
      */
     dnd?: boolean;
+    /**
+     * Enables cell background color picker for table cells.
+     * Available with @diplodoc/transform v4.75.0-beta0 or higher.
+     * @default false
+     */
+    // TODO [MAJOR]: enable by default and remove option
+    cellBackground?: boolean;
 };
 
 export const YfmTable: ExtensionWithOptions<YfmTableOptions> = (builder, options) => {
@@ -47,7 +54,12 @@ export const YfmTable: ExtensionWithOptions<YfmTableOptions> = (builder, options
     builder.addPlugin(yfmTableTransformPastedPlugin);
 
     if (options.controls !== false) {
-        builder.addPlugin(yfmTableControlsPlugins({dndEnabled: options.dnd !== false}));
+        builder.addPlugin(
+            yfmTableControlsPlugins({
+                dndEnabled: options.dnd !== false,
+                cellBackground: options.cellBackground === true,
+            }),
+        );
     }
 };
 

packages/editor/src/extensions/yfm/YfmTable/plugins/YfmTableControls/commands/set-cell-bg.ts

@@ -0,0 +1,49 @@
+import type {Command} from '#pm/state';
+import {TableDesc} from 'src/table-utils/table-desc';
+
+import {YfmTableAttr} from '../../../YfmTableSpecs/const';
+
+export type SetCellBgParams = {
+    tablePos: number;
+    rows?: number[];
+    cols?: number[];
+    bg: string | null;
+};
+
+export const setCellBg = (params: SetCellBgParams): Command => {
+    return (state, dispatch) => {
+        const table = state.doc.nodeAt(params.tablePos);
+        const tableDesc = table && TableDesc.create(table)?.bind(params.tablePos);
+        if (!tableDesc) return false;
+
+        if (!dispatch) return true;
+
+        const {tr} = state;
+
+        const apply = (cellPos: ReturnType<typeof tableDesc.getPosForRowCells>[number]) => {
+            if (cellPos.type !== 'real') return;
+            const node = state.doc.nodeAt(cellPos.from);
+            if (!node) return;
+            tr.setNodeAttribute(
+                tr.mapping.map(cellPos.from),
+                YfmTableAttr.CellBg,
+                params.bg || null,
+            );
+        };
+
+        if (params.rows) {
+            for (const rowIdx of params.rows) {
+                for (const pos of tableDesc.getPosForRowCells(rowIdx)) apply(pos);
+            }
+        }
+        if (params.cols) {
+            for (const colIdx of params.cols) {
+                for (const pos of tableDesc.getPosForColumn(colIdx)) apply(pos);
+            }
+        }
+
+        if (tr.docChanged) dispatch(tr);
+
+        return true;
+    };
+};