Merge branch 'main' into feat/yfm-html-block-templates-and-preview

Author: makhnatkin

.release-please/manifest.json

@@ -1,5 +1,5 @@
 {
-  "packages/editor": "15.40.0",
+  "packages/editor": "15.41.0",
   "packages/latex-extension": "0.1.0",
   "packages/page-constructor-extension": "0.1.0"
 }

demo/src/components/Playground.tsx

@@ -269,6 +269,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
                     },
                     yfmTable: {
                         headerRows: true,
+                        cellBackground: true,
                         table_ignoreSplittersInBlockCode: true,
                         table_ignoreSplittersInBlockMath: true,
                         table_ignoreSplittersInInlineCode: true,
@@ -437,6 +438,20 @@ export const Playground = memo<PlaygroundProps>((props) => {
                                 mdEditor.focus();
                             }}
                         />
+                        <DropdownMenu.Item
+                            text="Insert"
+                            action={() => {
+                                mdEditor.insert('> insert');
+                                mdEditor.focus();
+                            }}
+                        />
+                        <DropdownMenu.Item
+                            text="Insert(inline)"
+                            action={() => {
+                                mdEditor.insert('insert(inline)');
+                                mdEditor.focus();
+                            }}
+                        />
                         <DropdownMenu.Item
                             text="Move cursor to start"
                             action={() => {

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 (

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,11 +34,12 @@ export const YfmTableDnDDemo = memo<YfmTableDnDDemoProps>(function YfmTableDnDDe
                     yfmTable: {
                         dnd,
                         headerRows,
+                        cellBackground,
                     },
                 },
             },
         },
-        [mobile, dnd, headerRows],
+        [mobile, dnd, headerRows, cellBackground],
     );
 
     return (

demo/tests/playwright/core/editor.ts

@@ -11,7 +11,9 @@ type YfmTableActionKind =
     | 'add-column-after'
     | 'add-row-before'
     | 'add-row-after'
-    | 'header-toggle';
+    | 'header-toggle'
+    | 'row-cell-bg-open'
+    | 'column-cell-bg-open';
 
 type MarkdownEditorToolbarsLocators = Record<
     'main' | 'additional' | 'selection' | 'commandMenu',
@@ -142,6 +144,7 @@ class YfmNote {
 class YfmTable {
     readonly buttonPlusRowLocator;
     readonly buttonPlusColumnLocator;
+    readonly cellBgPaletteLocator: Locator;
     private readonly tableLocator;
 
     private readonly rowButtonLocator;
@@ -169,7 +172,10 @@ class YfmTable {
             'remove-row': page.getByTestId('g-md-yfm-table-action-remove-row'),
             'remove-table': page.getByTestId('g-md-yfm-table-action-remove-table'),
             'header-toggle': page.getByTestId('g-md-yfm-table-row-header-toggle'),
+            'row-cell-bg-open': page.getByTestId('g-md-yfm-table-row-cell-bg'),
+            'column-cell-bg-open': page.getByTestId('g-md-yfm-table-column-cell-bg'),
         };
+        this.cellBgPaletteLocator = page.locator('.g-md-yfm-table-cell-bg-palette');
     }
 
     getMenuLocator(type: YfmTableCellMenuType) {
@@ -225,6 +231,31 @@ class YfmTable {
         await firstCell.waitFor({state: 'visible'});
         await firstCell.click();
     }
+
+    getCellBgSwatchLocator(label: string) {
+        return this.cellBgPaletteLocator.getByLabel(label, {exact: true});
+    }
+
+    async openCellBgPalette(menuType: YfmTableCellMenuType) {
+        const menu = this.cellMenus[menuType];
+        await menu.waitFor({state: 'visible'});
+        const actionKey: YfmTableActionKind =
+            menuType === 'row' ? 'row-cell-bg-open' : 'column-cell-bg-open';
+        await menu.locator(this.cellMenuActions[actionKey]).hover();
+        await this.cellBgPaletteLocator.waitFor({state: 'visible'});
+    }
+
+    async selectCellBg(menuType: YfmTableCellMenuType, swatchLabel: string) {
+        await this.openCellBgPalette(menuType);
+        await this.getCellBgSwatchLocator(swatchLabel).click();
+    }
+
+    async closeMenu(menuType: YfmTableCellMenuType) {
+        const button =
+            menuType === 'row' ? this.rowButtonLocator.first() : this.columnButtonLocator.first();
+        await button.click();
+        await this.cellMenus[menuType].waitFor({state: 'hidden'});
+    }
 }
 
 class SearchPanel {

demo/tests/playwright/playwright/index.tsx

@@ -8,6 +8,7 @@ import {
 import {beforeMount} from '@playwright/experimental-ct-react/hooks';
 
 import '@gravity-ui/uikit/styles/styles.scss';
+import '@gravity-ui/markdown-editor/styles/markdown.css'; // eslint-disable-line import/order
 
 const toaster = new Toaster();