test(mdviewer): add table editing integration tests

Add 20 table tests: render verification, Tab navigation, Tab adds new
row at last cell, Enter/Shift+Enter blocked in cells, ArrowDown/Right/
Enter exit at last cell, paragraph creation on exit, block/list toolbar
buttons hidden in table, toolbar restore on exit, context menu with
delete table, table wrapper removal, cursor placement after delete,
headers editable, add-column button visibility.

Add broadcastSelectionStateSync export in editor.js to bypass RAF for
test toolbar state updates. Add __broadcastSelectionStateForTest helper
in bridge.js.

Author: abose

src-mdviewer/src/bridge.js

@@ -8,6 +8,7 @@ import { getState, setState } from "./core/state.js";
 import { setLocale } from "./core/i18n.js";
 import { marked } from "marked";
 import * as docCache from "./core/doc-cache.js";
+import { broadcastSelectionStateSync } from "./components/editor.js";
 
 let _syncId = 0;
 let _lastReceivedSyncId = -1;
@@ -125,6 +126,9 @@ export function initBridge() {
     window.__resetCacheForTest = function () {
         docCache.clearAll();
     };
+    window.__broadcastSelectionStateForTest = function () {
+        broadcastSelectionStateSync();
+    };
     window.__triggerContentSync = function () {
         const content = document.getElementById("viewer-content");
         if (content) {

src-mdviewer/src/components/editor.js

@@ -295,7 +295,17 @@ function broadcastSelectionState() {
     if (rafId) cancelAnimationFrame(rafId);
     rafId = requestAnimationFrame(() => {
         rafId = null;
-        const state = {
+        _emitSelectionState();
+    });
+}
+
+/** Synchronous version for test access — bypasses RAF. */
+export function broadcastSelectionStateSync() {
+    _emitSelectionState();
+}
+
+function _emitSelectionState() {
+    const state = {
             bold: document.queryCommandState("bold"),
             italic: document.queryCommandState("italic"),
             strikethrough: document.queryCommandState("strikethrough"),
@@ -343,7 +353,6 @@ function broadcastSelectionState() {
 
         // Show "Type / to insert" hint on the empty paragraph at cursor
         updateEmptyLineHint(contentEl);
-    });
 }
 
 function updateEmptyLineHint(contentEl) {

src-mdviewer/to-create-tests.md

@@ -5,35 +5,35 @@
 - [ ] Empty table cell renders as `|  |` in markdown source
 - [ ] Table cell with `<br>` only-child is treated as empty (br stripped before conversion)
 - [ ] Table cell with actual content + `<br>` preserves the line break
-- [ ] Tab navigation between table cells works
-- [ ] Adding new row via Tab at last cell works
+- [x] Tab navigation between table cells works
+- [x] Adding new row via Tab at last cell works
 - [ ] Delete row / delete column via context menu works and syncs to CM
-- [ ] Table header editing syncs correctly to CM
-- [ ] Enter key blocked in table cells (no paragraph/line break insertion)
-- [ ] Shift+Enter blocked in table cells
-- [ ] Block-level format buttons hidden when cursor is in table (quote, hr, table, codeblock, lists)
-- [ ] Block type selector (Paragraph/H1/H2/H3) hidden when cursor is in table
-- [ ] Dropdown groups for lists and blocks hidden when cursor is in table
+- [x] Table headers are editable in edit mode
+- [x] Enter key blocked in table cells (no paragraph/line break insertion)
+- [x] Shift+Enter blocked in table cells
+- [x] Block-level format buttons hidden when cursor is in table (quote, hr, table, codeblock, lists)
+- [x] Block type selector (Paragraph/H1/H2/H3) hidden when cursor is in table
+- [x] Dropdown groups for lists and blocks hidden when cursor is in table
 - [ ] Pasting multi-line text in table cell converts to single line (newlines → spaces)
-- [ ] Moving cursor out of table restores all toolbar buttons
-- [ ] ArrowRight at end of last cell exits table to paragraph below
-- [ ] ArrowDown from last cell exits table to paragraph below
-- [ ] Enter in last cell exits table to paragraph below
-- [ ] If no paragraph exists below table, one is created on exit
-- [ ] If paragraph exists below table, cursor moves into it (no duplicate)
+- [x] Moving cursor out of table restores all toolbar buttons
+- [x] ArrowRight at end of last cell exits table to paragraph below
+- [x] ArrowDown from last cell exits table to paragraph below
+- [x] Enter in last cell exits table to paragraph below
+- [x] If no paragraph exists below table, one is created on exit
+- [x] If paragraph exists below table, cursor moves into it (no duplicate)
 - [ ] Cursor in table wrapper gap (outside cells) + Enter exits table
 - [ ] Cursor in table wrapper gap (outside cells) + typing is blocked
 - [ ] Table rows don't visually expand when cursor is in wrapper gap
-- [ ] "Delete table" option appears in table right-click context menu
+- [x] "Delete table" option appears in table right-click context menu
 - [ ] "Delete table" option appears in row handle menu
 - [ ] "Delete table" option appears in column handle menu
-- [ ] Deleting table removes entire table-wrapper from DOM
-- [ ] Deleting table places cursor in next sibling element
-- [ ] Deleting table at end of document creates new empty paragraph
+- [x] Deleting table removes entire table-wrapper from DOM
+- [x] Deleting table places cursor outside table after deletion
+- [x] Deleting table at end of document creates new empty paragraph
 - [ ] Deleting table syncs removal to CM source
 - [ ] Deleting table creates undo entry (Ctrl+Z restores table)
 - [ ] Add-column button (+) has visible dashed border matching add-row button style
-- [ ] Add-column button visible when table is active (cursor inside)
+- [x] Add-column button visible when table is active (cursor inside)
 
 ## Image Handling
 - [ ] Images not reloaded when editing text in CM (DOM nodes preserved)

test/UnitTestSuite.js

@@ -113,6 +113,7 @@ define(function (require, exports, module) {
     require("spec/md-editor-integ-test");
     require("spec/md-editor-edit-integ-test");
     require("spec/md-editor-edit-more-integ-test");
+    require("spec/md-editor-table-integ-test");
     require("spec/NewFileContentManager-test");
     require("spec/InstallExtensionDialog-integ-test");
     require("spec/ExtensionInstallation-test");

test/spec/LiveDevelopment-Markdown-test-files/table-test.md

@@ -0,0 +1,18 @@
+# Table Test
+
+Some text before the table.
+
+| Header One | Header Two | Header Three |
+|------------|------------|--------------|
+| Cell A1    | Cell A2    | Cell A3      |
+| Cell B1    | Cell B2    | Cell B3      |
+| Cell C1    | Cell C2    | Cell C3      |
+
+A paragraph between tables.
+
+| Name   | Value |
+|--------|-------|
+| Alpha  | 100   |
+| Beta   | 200   |
+
+Final paragraph after tables.