feat(YfmTable): support header rows in yfm-table

demo/package.json

@@ -15,6 +15,7 @@
     "playwright:clear": "rm -rf ./tests/playwright/.cache",
     "playwright:report": "playwright show-report playwright-report",
     "playwright:docker": "./scripts/playwright-docker.sh test",
+    "playwright:docker:ui": "./scripts/playwright-docker.sh test --ui-port 8082 --ui-host 0.0.0.0",
     "playwright:docker:update": "./scripts/playwright-docker.sh update",
     "playwright:docker:clear": "./scripts/playwright-docker.sh clear",
     "playwright:docker:report": "playwright show-report playwright-report-docker"

demo/scripts/playwright-docker.sh

@@ -20,14 +20,15 @@ command_exists() {
 }
 
 run_command() {
-  $CONTAINER_TOOL run --rm --network host -it -w /work \
+  $CONTAINER_TOOL run --rm -it -w /work \
     --platform linux/arm64 \
     --ipc=host \
     -v $(pwd):/work \
     -v "$NODE_MODULES_CACHE_DIR:/work/node_modules" \
     -v "$PNPM_STORE_CACHE_DIR:/root/.local/share/pnpm/store" \
     -e IS_DOCKER=1 \
     -e NODE_OPTIONS="--max-old-space-size=8192" \
+    -p 8082:8082 \
     "$IMAGE_NAME:$IMAGE_TAG" \
     /bin/bash -c "$*"
 }

demo/src/components/Playground.tsx

@@ -16,6 +16,7 @@ import {
     type ToolbarsPreset,
     type UseMarkdownEditorProps,
     type WysiwygPlaceholderOptions,
+    type YfmMods,
     logger,
     useMarkdownEditor,
     wysiwygToolbarConfigs,
@@ -92,6 +93,7 @@ export type PlaygroundProps = {
     markupParseHtmlOnPaste?: boolean;
     style?: React.CSSProperties;
     storyAdditionalControls?: Record<string, any>;
+    yfmMods?: YfmMods;
 } & Pick<UseMarkdownEditorProps, 'experimental' | 'wysiwygConfig'> &
     Pick<
         MarkdownEditorViewProps,
@@ -149,6 +151,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
         markupParseHtmlOnPaste,
         style,
         storyAdditionalControls,
+        yfmMods,
     } = props;
     const [editorMode, setEditorMode] = useState<MarkdownEditorMode>(initialEditor ?? 'wysiwyg');
     const [mdRaw, setMdRaw] = useState<MarkupString>(initial || '');
@@ -246,6 +249,9 @@ export const Playground = memo<PlaygroundProps>((props) => {
                     if (wysiwygConfig?.extensions) builder.use(wysiwygConfig.extensions);
                 },
                 extensionOptions: {
+                    yfmConfigs: {
+                        mods: yfmMods,
+                    },
                     checkbox: {multiline: true},
                     commandMenu: {actions: wysiwygCommandMenuConfig ?? wCommandMenuConfig},
                     imgSize: {
@@ -255,6 +261,7 @@ export const Playground = memo<PlaygroundProps>((props) => {
                         lineWrapping: {enabled: true},
                     },
                     yfmTable: {
+                        headerRows: true,
                         table_ignoreSplittersInBlockCode: true,
                         table_ignoreSplittersInBlockMath: true,
                         table_ignoreSplittersInInlineCode: true,

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

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

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

@@ -9,9 +9,14 @@ import {markup} from './markup';
 export type YfmTableDnDDemoProps = {
     mobile: boolean;
     dnd: boolean;
+    headerRows: boolean;
 };
 
-export const YfmTableDnDDemo = memo<YfmTableDnDDemoProps>(function YfmTableDnDDemo({mobile, dnd}) {
+export const YfmTableDnDDemo = memo<YfmTableDnDDemoProps>(function YfmTableDnDDemo({
+    mobile,
+    dnd,
+    headerRows,
+}) {
     const editor = useMarkdownEditor(
         {
             mobile,
@@ -21,8 +26,12 @@ export const YfmTableDnDDemo = memo<YfmTableDnDDemoProps>(function YfmTableDnDDe
             },
             wysiwygConfig: {
                 extensionOptions: {
+                    yfmConfigs: {
+                        mods: {'no-stripe-table': true},
+                    },
                     yfmTable: {
                         dnd,
+                        headerRows,
                     },
                 },
             },

demo/tests/playwright/core/editor.ts

@@ -10,7 +10,8 @@ type YfmTableActionKind =
     | 'add-column-before'
     | 'add-column-after'
     | 'add-row-before'
-    | 'add-row-after';
+    | 'add-row-after'
+    | 'header-toggle';
 
 type MarkdownEditorToolbarsLocators = Record<
     'main' | 'additional' | 'selection' | 'commandMenu',
@@ -167,13 +168,18 @@ class YfmTable {
             'remove-column': page.getByTestId('g-md-yfm-table-action-remove-column'),
             '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'),
         };
     }
 
     getMenuLocator(type: YfmTableCellMenuType) {
         return this.cellMenus[type];
     }
 
+    getCellActionLocator(menuType: YfmTableCellMenuType, kind: YfmTableActionKind) {
+        return this.cellMenus[menuType].locator(this.cellMenuActions[kind]);
+    }
+
     async getTable(locator?: Locator) {
         return locator?.locator(this.tableLocator) ?? this.tableLocator;
     }
@@ -183,7 +189,9 @@ class YfmTable {
     }
 
     async getCells(table?: Locator) {
-        return (table || (await this.getTable())).first().locator('> tbody > tr > td');
+        return (table || (await this.getTable()))
+            .first()
+            .locator('> tbody > tr > th, > tbody > tr > td');
     }
 
     async getRowButtons(_table?: Locator) {