feat: support yfm theme colors

jest.config.js

@@ -14,7 +14,7 @@ module.exports = {
         '.+\\.(svg|png|jpg)$': 'identity-obj-proxy',
     },
     moduleFileExtensions: ['tsx', 'ts', 'js'],
-    transformIgnorePatterns: ['node_modules/(?!cheerio)'],
+    transformIgnorePatterns: ['node_modules/(?!(cheerio|@diplodoc))'],
     transform: {
         '.ts(x)?': [
             'ts-jest',

package.json

@@ -221,21 +221,22 @@
     "uuid": "11.0.5"
   },
   "devDependencies": {
-    "@diplodoc/cut-extension": "^0.6.1",
-    "@diplodoc/folding-headings-extension": "0.1.0",
-    "@diplodoc/html-extension": "2.7.1",
-    "@diplodoc/latex-extension": "1.0.3",
-    "@diplodoc/mermaid-extension": "1.2.1",
+    "@diplodoc/cut-extension": "^1.1.0",
+    "@diplodoc/folding-headings-extension": "^0.1.2",
+    "@diplodoc/html-extension": "^2.9.1",
+    "@diplodoc/latex-extension": "^1.4.1",
+    "@diplodoc/mermaid-extension": "^1.4.0",
     "@diplodoc/quote-link-extension": "0.1.3",
-    "@diplodoc/tabs-extension": "^3.5.1",
-    "@diplodoc/transform": "^4.58.0",
+    "@diplodoc/tabs-extension": "^3.7.5",
+    "@diplodoc/themes": "^1.0.0",
+    "@diplodoc/transform": "^4.65.0",
     "@gravity-ui/components": "4.10.0",
     "@gravity-ui/eslint-config": "3.3.0",
     "@gravity-ui/gulp-utils": "1.0.3",
     "@gravity-ui/prettier-config": "1.1.0",
     "@gravity-ui/stylelint-config": "4.0.1",
     "@gravity-ui/tsconfig": "1.0.0",
-    "@gravity-ui/uikit": "7.10.0",
+    "@gravity-ui/uikit": "^7.13.1",
     "@playwright/experimental-ct-react": "1.49.0",
     "@playwright/test": "1.49.0",
     "@storybook/addon-docs": "8.4.1",

src/styles/styles.scss

@@ -1,3 +1,4 @@
 @use './yc-file.scss';
 @use './yc-colors.scss';
+@use './yfm-themes.scss';
 @use './list.scss';

src/styles/yfm-themes.scss

@@ -0,0 +1,34 @@
+@use '@diplodoc/themes/lib/gravity/light.scss' as yfm-light;
+@use '@diplodoc/themes/lib/gravity/dark.scss' as yfm-dark;
+@use '@diplodoc/themes/lib/gravity/light-hc.scss' as yfm-light-hc;
+@use '@diplodoc/themes/lib/gravity/dark-hc.scss' as yfm-dark-hc;
+
+.g-root_theme_light .yfm {
+    @include yfm-light.gravity-colors-for-diplodoc-light();
+}
+
+.g-root_theme_light-hc .yfm {
+    @include yfm-light-hc.gravity-colors-for-diplodoc-light-hc();
+}
+
+.g-root_theme_dark .yfm {
+    @include yfm-dark.gravity-colors-for-diplodoc-dark();
+
+    table[sticky-header] {
+        & th::before {
+            background: var(--yfm-color-base);
+        }
+    }
+
+    .yfm-cut-title:before {
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggc3Ryb2tlPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNykiIGZpbGw9Im5vbmUiIGQ9Ik0zIDZsNSA1IDUtNSI+PC9wYXRoPjwvc3ZnPg==');
+    }
+
+    .yfm-tabs-accordion .yfm-tab:after {
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggc3Ryb2tlPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNykiIGZpbGw9Im5vbmUiIGQ9Ik0zIDZsNSA1IDUtNSI+PC9wYXRoPjwvc3ZnPg==');
+    }
+}
+
+.g-root_theme_dark-hc .yfm {
+    @include yfm-dark-hc.gravity-colors-for-diplodoc-dark-hc();
+}

tests/playwright/core/editor.ts

@@ -181,12 +181,21 @@ class YfmTable {
     }
 
     async clickPlusRow(_locator?: Locator) {
+        await this.buttonPlusRowLocator.last().waitFor({state: 'visible'});
         await this.buttonPlusRowLocator.last().click();
     }
 
     async clickPlusColumn(_locator?: Locator) {
+        await this.buttonPlusColumnLocator.last().waitFor({state: 'visible'});
         await this.buttonPlusColumnLocator.last().click();
     }
+
+    async focusFirstCell(tableLocator?: Locator) {
+        const cells = await this.getCells(tableLocator);
+        const firstCell = cells.first();
+        await firstCell.waitFor({state: 'visible'});
+        await firstCell.click();
+    }
 }
 
 class MarkdownEditorLocators {

tests/playwright/playwright.config.ts

@@ -28,6 +28,7 @@ const ctViteConfig: InlineConfig = {
         preprocessorOptions: {
             scss: {
                 api: 'modern-compiler',
+                loadPaths: [resolve(__dirname, '../../node_modules')],
             },
         },
     },
@@ -37,6 +38,9 @@ const ctViteConfig: InlineConfig = {
             '~@gravity-ui/uikit/styles/mixins': '@gravity-ui/uikit/styles/mixins',
         },
     },
+    optimizeDeps: {
+        include: ['@gravity-ui/components'],
+    },
 };
 
 /**

tests/visual-tests/playground/YfmTable.visual.test.tsx

@@ -82,6 +82,7 @@ test.describe('YfmTable', () => {
     test('should move focus to the adjacent cell @wysiwyg', async ({
         mount,
         page,
+        editor,
         browserName,
         platform,
     }) => {
@@ -96,6 +97,11 @@ test.describe('YfmTable', () => {
 
         await mount(<Playground initial={initial} />);
 
+        const tableLocator = (
+            await editor.yfmTable.getTable(editor.locators.contenteditable)
+        ).first();
+        await editor.yfmTable.focusFirstCell(tableLocator);
+
         await page.keyboard.press('Tab');
         let selText = await page.evaluate(getSelText);
         expect(selText).toBe('two');
@@ -150,7 +156,7 @@ test.describe('YfmTable', () => {
         await page.keyboard.press('ArrowDown');
 
         for (const loc of [...(await rowPlusBtn.all()), ...(await columnPlusBtn.all())]) {
-            expect(loc).toBeVisible();
+            await expect(loc).toBeVisible();
         }
     });
 
@@ -176,6 +182,8 @@ test.describe('YfmTable', () => {
         const rowsLocator = await editor.yfmTable.getRows(tableLocator);
         const cellsLocator = await editor.yfmTable.getCells(tableLocator);
 
+        await editor.yfmTable.focusFirstCell(tableLocator);
+
         await editor.yfmTable.clickPlusRow(tableLocator);
         await expect(rowsLocator).toHaveCount(3);
         await expect(cellsLocator).toHaveCount(6);
@@ -215,6 +223,8 @@ test.describe('YfmTable', () => {
         const rowsLocator = await editor.yfmTable.getRows(tableLocator);
         const cellsLocator = await editor.yfmTable.getCells(tableLocator);
 
+        await editor.yfmTable.focusFirstCell(tableLocator);
+
         await editor.yfmTable.clickPlusColumn(tableLocator);
         await expect(rowsLocator).toHaveCount(2);
         await expect(cellsLocator).toHaveCount(6);
@@ -311,11 +321,14 @@ test.describe('YfmTable', () => {
             ).first();
 
             await tableLocator.waitFor({state: 'visible'});
+            await editor.yfmTable.focusFirstCell(tableLocator);
         });
 
         test('row menu', async ({editor, expectScreenshot}) => {
             await (await editor.yfmTable.getCells()).first().hover();
-            await (await editor.yfmTable.getRowButtons()).first().click();
+            const rowButton = (await editor.yfmTable.getRowButtons()).first();
+            await rowButton.waitFor({state: 'visible'});
+            await rowButton.click();
 
             const menu = editor.yfmTable.getMenuLocator('row');
             await menu.waitFor({state: 'visible'});
@@ -325,7 +338,9 @@ test.describe('YfmTable', () => {
 
         test('column menu', async ({editor, expectScreenshot}) => {
             await (await editor.yfmTable.getCells()).first().hover();
-            await (await editor.yfmTable.getColumnButtons()).first().click();
+            const columnButton = (await editor.yfmTable.getColumnButtons()).first();
+            await columnButton.waitFor({state: 'visible'});
+            await columnButton.click();
 
             const menu = editor.yfmTable.getMenuLocator('column');
             await menu.waitFor({state: 'visible'});