[{"data":1,"prerenderedAt":63},["Reactive",2],{"blog-post-markdown-table-keyboard-navigation-and-shortcuts-complete-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":37,"related":38},"markdown-table-keyboard-navigation-and-shortcuts-complete-guide","Markdown Table Keyboard Navigation and Shortcuts: Complete Guide for Efficient Table Editing","Master advanced keyboard navigation and shortcuts for Markdown table editing, including platform-specific key bindings, accessibility features, and productivity techniques for fast table manipulation and content creation.","Efficient keyboard navigation transforms Markdown table editing from a tedious click-and-type process into a fluid, productive workflow that enables rapid content creation, precise cell…","2025-11-20","Tutorial","Matthew Rathbone","markdown table keyboard navigation, markdown table shortcuts, table editing keyboard, markdown accessibility, keyboard table navigation, table editing productivity, markdown editor shortcuts, table manipulation keys",29,"\u003Cp>Efficient keyboard navigation transforms Markdown table editing from a tedious click-and-type process into a fluid, productive workflow that enables rapid content creation, precise cell manipulation, and seamless data entry across different platforms and editors while maintaining accessibility standards for all users.\u003C/p>\n\u003Ch2 id=\"why-master-keyboard-navigation-for-tables\">Why Master Keyboard Navigation for Tables?\u003C/h2>\n\u003Cp>Strategic keyboard navigation provides essential benefits for professional table editing:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced Productivity\u003C/strong>: Navigate and edit tables without interrupting flow by reaching for mouse or trackpad\u003C/li>\n\u003Cli>\u003Cstrong>Precision Control\u003C/strong>: Make exact selections and movements with consistent, repeatable key combinations\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility Support\u003C/strong>: Enable efficient table editing for users with motor disabilities or visual impairments\u003C/li>\n\u003Cli>\u003Cstrong>Universal Compatibility\u003C/strong>: Work effectively across different editors, platforms, and devices using standard navigation patterns\u003C/li>\n\u003Cli>\u003Cstrong>Reduced Fatigue\u003C/strong>: Minimize repetitive strain by keeping hands positioned on keyboard during extended editing sessions\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-keyboard-navigation-principles\">Foundation Keyboard Navigation Principles\u003C/h2>\n\u003Ch3 id=\"universal-table-navigation-keys\">Universal Table Navigation Keys\u003C/h3>\n\u003Cp>Core navigation patterns work across most Markdown editors:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Basic Cell Movement\u003C/span>\nTab           → Move to next cell (right, then down)\nShift+Tab     → Move to previous cell (left, then up)\nArrow Keys    → Move between cells directionally\nEnter         → Move to cell below (or create new row)\nShift+Enter   → Move to cell above\n\n\u003Cspan class=\"hljs-section\"># Row and Column Operations\u003C/span>\nCtrl+Enter    → Insert new row below current\nCtrl+Shift+Enter → Insert new row above current\nAlt+Left/Right   → Move column left/right\nAlt+Up/Down      → Move row up/down\n\n\u003Cspan class=\"hljs-section\"># Text Selection within Cells\u003C/span>\nShift+Arrow      → Select text directionally\nCtrl+A           → Select all text in current cell\nCtrl+Shift+A     → Select entire table\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-selection-techniques\">Advanced Selection Techniques\u003C/h3>\n\u003Cp>Precise selection for efficient bulk operations:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Multi-Cell Selection Patterns\u003C/span>\nShift+Tab/Arrow → Extend selection to adjacent cells\nCtrl+Click      → Add individual cells to selection\nCtrl+Shift+Arrow → Select entire row/column\nAlt+Shift+Arrow  → Select cell range\n\n\u003Cspan class=\"hljs-section\"># Content Selection Shortcuts\u003C/span>\nDouble-Click     → Select word in cell\nTriple-Click     → Select entire cell content\nCtrl+L          → Select entire row\nCtrl+K          → Select entire column\n\n\u003Cspan class=\"hljs-section\"># Table Structure Selection\u003C/span>\nCtrl+Shift+T    → Select entire table\nCtrl+Shift+H    → Select header row\nCtrl+Shift+B    → Select table body\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-navigation-patterns\">Platform-Specific Navigation Patterns\u003C/h2>\n\u003Ch3 id=\"vs-code-with-markdown-extensions\">VS Code with Markdown Extensions\u003C/h3>\n\u003Cp>Enhanced navigation in Visual Studio Code:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-json\">\u003Cspan class=\"hljs-comment\">// settings.json - Markdown table keyboard shortcuts\u003C/span>\n\u003Cspan class=\"hljs-punctuation\">{\u003C/span>\n  \u003Cspan class=\"hljs-attr\">"keyboard"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-punctuation\">{\u003C/span>\n    \u003Cspan class=\"hljs-attr\">"markdown.table.navigation"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-punctuation\">{\u003C/span>\n      \u003Cspan class=\"hljs-attr\">"tab.nextCell"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"Tab"\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n      \u003Cspan class=\"hljs-attr\">"tab.previousCell"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"Shift+Tab"\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n      \u003Cspan class=\"hljs-attr\">"enter.newRow"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"Enter"\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n      \u003Cspan class=\"hljs-attr\">"ctrl.enter.newRowBelow"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"Ctrl+Enter"\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n      \u003Cspan class=\"hljs-attr\">"ctrl.shift.enter.newRowAbove"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"Ctrl+Shift+Enter"\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n      \u003Cspan class=\"hljs-attr\">"alt.arrow.moveColumn"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"Alt+Left/Right"\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n      \u003Cspan class=\"hljs-attr\">"alt.arrow.moveRow"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"Alt+Up/Down"\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n      \u003Cspan class=\"hljs-attr\">"ctrl.d.duplicateRow"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"Ctrl+D"\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n      \u003Cspan class=\"hljs-attr\">"ctrl.k.deleteRow"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"Ctrl+K"\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n      \u003Cspan class=\"hljs-attr\">"ctrl.shift.k.deleteColumn"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"Ctrl+Shift+K"\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n      \u003Cspan class=\"hljs-attr\">"f2.renameHeader"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"F2"\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n      \u003Cspan class=\"hljs-attr\">"ctrl.space.toggleSelection"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"Ctrl+Space"\u003C/span>\n    \u003Cspan class=\"hljs-punctuation\">}\u003C/span>\n  \u003Cspan class=\"hljs-punctuation\">}\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n  \u003Cspan class=\"hljs-attr\">"markdown.table.autoFormat"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-literal\">\u003Cspan class=\"hljs-keyword\">true\u003C/span>\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n  \u003Cspan class=\"hljs-attr\">"markdown.table.columnAlignment"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"auto"\u003C/span>\u003Cspan class=\"hljs-punctuation\">,\u003C/span>\n  \u003Cspan class=\"hljs-attr\">"markdown.table.headerSeparatorLength"\u003C/span>\u003Cspan class=\"hljs-punctuation\">:\u003C/span> \u003Cspan class=\"hljs-string\">"auto"\u003C/span>\n\u003Cspan class=\"hljs-punctuation\">}\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"github-web-editor-navigation\">GitHub Web Editor Navigation\u003C/h3>\n\u003Cp>Browser-based Markdown table editing shortcuts:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// github-table-navigation.js - Custom keyboard handlers for GitHub\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">GitHubTableNavigator\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableElement\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectionMode\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedCells\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindKeyboardEvents\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupTableDetection\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">bindKeyboardEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isInMarkdownTable\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>)) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (\u003Cspan class=\"hljs-literal\">true\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Tab'\u003C/span> && !e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToNextCell\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Tab'\u003C/span> && e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToPreviousCell\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Enter'\u003C/span> && !e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToNextRow\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Enter'\u003C/span> && e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToPreviousRow\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Enter'\u003C/span> && e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertRowBelow\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Enter'\u003C/span> && e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> && e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertRowAbove\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowLeft'\u003C/span> && e.\u003Cspan class=\"hljs-property\">altKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveColumnLeft\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowRight'\u003C/span> && e.\u003Cspan class=\"hljs-property\">altKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveColumnRight\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span> && e.\u003Cspan class=\"hljs-property\">altKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveRowUp\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span> && e.\u003Cspan class=\"hljs-property\">altKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveRowDown\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'d'\u003C/span> && e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">duplicateCurrentRow\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'k'\u003C/span> && e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> && !e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">deleteCurrentRow\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'k'\u003C/span> && e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> && e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">deleteCurrentColumn\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">' '\u003C/span> && e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleCellSelection\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'a'\u003C/span> && e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> && e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">selectEntireTable\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>:\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearSelection\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Handle arrow key navigation within table\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isInTableCell\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>)) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isAtCellBoundary = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isAtCellBoundary\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>, e.\u003Cspan class=\"hljs-property\">key\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isAtCellBoundary) {\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">navigateToAdjacentCell\u003C/span>(e.\u003Cspan class=\"hljs-property\">key\u003C/span>, e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupTableDetection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Auto-detect when user enters a markdown table\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MutationObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">mutations\u003C/span>) =>\u003C/span> {\n            mutations.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">mutation\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (mutation.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'childList'\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectNewTables\u003C/span>(mutation.\u003Cspan class=\"hljs-property\">addedNodes\u003C/span>);\n                }\n            });\n        });\n        \n        observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">childList\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">subtree\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Initial detection\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectNewTables\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'textarea, .markdown-editor'\u003C/span>));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isInMarkdownTable\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> textarea = element.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'textarea'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!textarea) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cursorPos = textarea.\u003Cspan class=\"hljs-property\">selectionStart\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, cursorPos).\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentLine = lines[lines.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>];\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(currentLine);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isInTableCell\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> element.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'table-cell'\u003C/span>) || \n               element.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-cell'\u003C/span>) !== \u003Cspan class=\"hljs-literal\">null\u003C/span> ||\n               \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isInMarkdownTable\u003C/span>(element);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isAtCellBoundary\u003C/span>(\u003Cspan class=\"hljs-params\">element, direction\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> selection = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">getSelection\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> range = selection.\u003Cspan class=\"hljs-title function_\">getRangeAt\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isCollapsed = range.\u003Cspan class=\"hljs-property\">collapsed\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isCollapsed) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> textContent = element.\u003Cspan class=\"hljs-property\">textContent\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> offset = range.\u003Cspan class=\"hljs-property\">startOffset\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (direction) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowLeft'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> offset === \u003Cspan class=\"hljs-number\">0\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowRight'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> offset >= textContent.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isAtTopOfCell\u003C/span>(element, offset);\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isAtBottomOfCell\u003C/span>(element, offset);\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isAtTopOfCell\u003C/span>(\u003Cspan class=\"hljs-params\">element, offset\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = element.\u003Cspan class=\"hljs-property\">textContent\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> beforeCursor = text.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, offset);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> !beforeCursor.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isAtBottomOfCell\u003C/span>(\u003Cspan class=\"hljs-params\">element, offset\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = element.\u003Cspan class=\"hljs-property\">textContent\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> afterCursor = text.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(offset);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> !afterCursor.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToNextCell\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { row, col, table } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextCol = col + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextRow = nextCol >= table[row].\u003Cspan class=\"hljs-property\">length\u003C/span> ? row + \u003Cspan class=\"hljs-number\">1\u003C/span> : row;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetCol = nextCol >= table[row].\u003Cspan class=\"hljs-property\">length\u003C/span> ? \u003Cspan class=\"hljs-number\">0\u003C/span> : nextCol;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nextRow >= table.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertRowBelow\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(table.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(nextRow, targetCol);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToPreviousCell\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { row, col, table } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> prevCol = col - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> prevRow = prevCol < \u003Cspan class=\"hljs-number\">0\u003C/span> ? row - \u003Cspan class=\"hljs-number\">1\u003C/span> : row;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetCol = prevCol < \u003Cspan class=\"hljs-number\">0\u003C/span> && prevRow >= \u003Cspan class=\"hljs-number\">0\u003C/span> ? \n                          table[prevRow].\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span> : prevCol;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (prevRow >= \u003Cspan class=\"hljs-number\">0\u003C/span> && targetCol >= \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(prevRow, targetCol);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToNextRow\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { row, col, table } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextRow = row + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nextRow >= table.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertRowBelow\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(nextRow < table.\u003Cspan class=\"hljs-property\">length\u003C/span> ? nextRow : table.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>, col);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToPreviousRow\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { row, col } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> prevRow = row - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (prevRow >= \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(prevRow, col);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">navigateToAdjacentCell\u003C/span>(\u003Cspan class=\"hljs-params\">direction, extend = \u003Cspan class=\"hljs-literal\">false\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { row, col } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> targetRow = row;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> targetCol = col;\n        \n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (direction) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowLeft'\u003C/span>:\n                targetCol = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, col - \u003Cspan class=\"hljs-number\">1\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowRight'\u003C/span>:\n                targetCol = col + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>:\n                targetRow = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, row - \u003Cspan class=\"hljs-number\">1\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>:\n                targetRow = row + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (extend && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectionMode\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extendSelectionToCell\u003C/span>(targetRow, targetCol);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(targetRow, targetCol);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> activeElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">activeElement\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> textarea = activeElement.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'textarea'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!textarea) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cursorPos = textarea.\u003Cspan class=\"hljs-property\">selectionStart\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentLineIndex = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> charCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < lines.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (charCount + lines[i].\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span> > cursorPos) {\n                currentLineIndex = i;\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n            charCount += lines[i].\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentLine = lines[currentLineIndex];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isTableLine = \u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(currentLine);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isTableLine) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> relativePos = cursorPos - charCount;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellStart = currentLine.\u003Cspan class=\"hljs-title function_\">lastIndexOf\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>, relativePos);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = currentLine.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() !== \u003Cspan class=\"hljs-string\">''\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> cellIndex = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> charPos = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < cells.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (charPos + cells[i].\u003Cspan class=\"hljs-property\">length\u003C/span> > relativePos) {\n                cellIndex = i;\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n            charPos += cells[i].\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Find table boundaries\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableLines = [];\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> startRow = currentLineIndex;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> endRow = currentLineIndex;\n        \n        \u003Cspan class=\"hljs-comment\">// Find table start\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> (startRow > \u003Cspan class=\"hljs-number\">0\u003C/span> && \u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(lines[startRow - \u003Cspan class=\"hljs-number\">1\u003C/span>])) {\n            startRow--;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Find table end\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> (endRow < lines.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span> && \u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(lines[endRow + \u003Cspan class=\"hljs-number\">1\u003C/span>])) {\n            endRow++;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Extract table structure\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = startRow; i <= endRow; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-regexp\">/^\\s*\\|[\\s\\-:]*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(lines[i])) { \u003Cspan class=\"hljs-comment\">// Skip separator rows\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowCells = lines[i].\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>)\n                    .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() !== \u003Cspan class=\"hljs-string\">''\u003C/span>)\n                    .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n                tableLines.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(rowCells);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">row\u003C/span>: tableLines.\u003Cspan class=\"hljs-title function_\">findIndex\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">_, idx\u003C/span>) =>\u003C/span> startRow + idx === currentLineIndex),\n            \u003Cspan class=\"hljs-attr\">col\u003C/span>: cellIndex,\n            \u003Cspan class=\"hljs-attr\">table\u003C/span>: tableLines,\n            \u003Cspan class=\"hljs-attr\">textarea\u003C/span>: textarea,\n            \u003Cspan class=\"hljs-attr\">lineIndex\u003C/span>: currentLineIndex,\n            \u003Cspan class=\"hljs-attr\">relativePos\u003C/span>: relativePos\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(\u003Cspan class=\"hljs-params\">row, col\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { textarea, table } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Find the target line\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> tableStartLine = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < lines.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(lines[i])) {\n                tableStartLine = i;\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> targetLineIndex = tableStartLine;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> tableRowCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = tableStartLine; i < lines.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(lines[i])) \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-regexp\">/^\\s*\\|[\\s\\-:]*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(lines[i])) { \u003Cspan class=\"hljs-comment\">// Skip separator rows\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableRowCount === row) {\n                    targetLineIndex = i;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                }\n                tableRowCount++;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Calculate position within target cell\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetLine = lines[targetLineIndex];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = targetLine.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> cellStartPos = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i <= col && i < cells.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (i === col) {\n                cellStartPos += \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, cells[i].\u003Cspan class=\"hljs-title function_\">search\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\S/\u003C/span>));\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n            cellStartPos += cells[i].\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Calculate absolute position\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> absolutePos = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < targetLineIndex; i++) {\n            absolutePos += lines[i].\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        }\n        absolutePos += cellStartPos;\n        \n        \u003Cspan class=\"hljs-comment\">// Set cursor position\u003C/span>\n        textarea.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        textarea.\u003Cspan class=\"hljs-title function_\">setSelectionRange\u003C/span>(absolutePos, absolutePos);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">insertRowBelow\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { table, textarea } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnCount = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(...table.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">length\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> newRow = \u003Cspan class=\"hljs-string\">'|'\u003C/span> + \u003Cspan class=\"hljs-string\">' |'\u003C/span>.\u003Cspan class=\"hljs-title function_\">repeat\u003C/span>(columnCount);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentLineIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findCurrentTableLineIndex\u003C/span>(lines);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentLineIndex !== -\u003Cspan class=\"hljs-number\">1\u003C/span>) {\n            lines.\u003Cspan class=\"hljs-title function_\">splice\u003C/span>(currentLineIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, newRow);\n            textarea.\u003Cspan class=\"hljs-property\">value\u003C/span> = lines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Trigger change event for editors that rely on it\u003C/span>\n            textarea.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Event\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, { \u003Cspan class=\"hljs-attr\">bubbles\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }));\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">insertRowAbove\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { table, textarea } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnCount = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(...table.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">length\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> newRow = \u003Cspan class=\"hljs-string\">'|'\u003C/span> + \u003Cspan class=\"hljs-string\">' |'\u003C/span>.\u003Cspan class=\"hljs-title function_\">repeat\u003C/span>(columnCount);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentLineIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findCurrentTableLineIndex\u003C/span>(lines);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentLineIndex !== -\u003Cspan class=\"hljs-number\">1\u003C/span>) {\n            lines.\u003Cspan class=\"hljs-title function_\">splice\u003C/span>(currentLineIndex, \u003Cspan class=\"hljs-number\">0\u003C/span>, newRow);\n            textarea.\u003Cspan class=\"hljs-property\">value\u003C/span> = lines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n            \n            textarea.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Event\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, { \u003Cspan class=\"hljs-attr\">bubbles\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }));\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">duplicateCurrentRow\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { textarea } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentLineIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findCurrentTableLineIndex\u003C/span>(lines);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentLineIndex !== -\u003Cspan class=\"hljs-number\">1\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentLine = lines[currentLineIndex];\n            lines.\u003Cspan class=\"hljs-title function_\">splice\u003C/span>(currentLineIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, currentLine);\n            textarea.\u003Cspan class=\"hljs-property\">value\u003C/span> = lines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n            \n            textarea.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Event\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, { \u003Cspan class=\"hljs-attr\">bubbles\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }));\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">deleteCurrentRow\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { textarea } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentLineIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findCurrentTableLineIndex\u003C/span>(lines);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentLineIndex !== -\u003Cspan class=\"hljs-number\">1\u003C/span> && lines.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n            lines.\u003Cspan class=\"hljs-title function_\">splice\u003C/span>(currentLineIndex, \u003Cspan class=\"hljs-number\">1\u003C/span>);\n            textarea.\u003Cspan class=\"hljs-property\">value\u003C/span> = lines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n            \n            textarea.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Event\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, { \u003Cspan class=\"hljs-attr\">bubbles\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }));\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">deleteCurrentColumn\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { col, textarea } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Find all table lines and remove the column\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> updatedLines = lines.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">line\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(line)) \u003Cspan class=\"hljs-keyword\">return\u003C/span> line;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = line.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cells.\u003Cspan class=\"hljs-property\">length\u003C/span> > col + \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                cells.\u003Cspan class=\"hljs-title function_\">splice\u003C/span>(col + \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>); \u003Cspan class=\"hljs-comment\">// +1 to account for empty first element\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> cells.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>);\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> line;\n        });\n        \n        textarea.\u003Cspan class=\"hljs-property\">value\u003C/span> = updatedLines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        textarea.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Event\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, { \u003Cspan class=\"hljs-attr\">bubbles\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveColumnLeft\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { col, textarea } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (col === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>; \u003Cspan class=\"hljs-comment\">// Can't move leftmost column further left\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> updatedLines = lines.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">line\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(line)) \u003Cspan class=\"hljs-keyword\">return\u003C/span> line;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = line.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cells.\u003Cspan class=\"hljs-property\">length\u003C/span> > col + \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                \u003Cspan class=\"hljs-comment\">// Swap current column with previous column\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> temp = cells[col];\n                cells[col] = cells[col + \u003Cspan class=\"hljs-number\">1\u003C/span>];\n                cells[col + \u003Cspan class=\"hljs-number\">1\u003C/span>] = temp;\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> cells.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>);\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> line;\n        });\n        \n        textarea.\u003Cspan class=\"hljs-property\">value\u003C/span> = updatedLines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        textarea.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Event\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, { \u003Cspan class=\"hljs-attr\">bubbles\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveColumnRight\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { col, textarea, table } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> maxColumns = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(...table.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">length\u003C/span>));\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (col >= maxColumns - \u003Cspan class=\"hljs-number\">1\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>; \u003Cspan class=\"hljs-comment\">// Can't move rightmost column further right\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> updatedLines = lines.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">line\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(line)) \u003Cspan class=\"hljs-keyword\">return\u003C/span> line;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = line.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cells.\u003Cspan class=\"hljs-property\">length\u003C/span> > col + \u003Cspan class=\"hljs-number\">2\u003C/span>) {\n                \u003Cspan class=\"hljs-comment\">// Swap current column with next column\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> temp = cells[col + \u003Cspan class=\"hljs-number\">1\u003C/span>];\n                cells[col + \u003Cspan class=\"hljs-number\">1\u003C/span>] = cells[col + \u003Cspan class=\"hljs-number\">2\u003C/span>];\n                cells[col + \u003Cspan class=\"hljs-number\">2\u003C/span>] = temp;\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> cells.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>);\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> line;\n        });\n        \n        textarea.\u003Cspan class=\"hljs-property\">value\u003C/span> = updatedLines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        textarea.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Event\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, { \u003Cspan class=\"hljs-attr\">bubbles\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveRowUp\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { textarea } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentLineIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findCurrentTableLineIndex\u003C/span>(lines);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentLineIndex > \u003Cspan class=\"hljs-number\">0\u003C/span> && \u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(lines[currentLineIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>])) {\n            \u003Cspan class=\"hljs-comment\">// Swap with previous line\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> temp = lines[currentLineIndex];\n            lines[currentLineIndex] = lines[currentLineIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>];\n            lines[currentLineIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>] = temp;\n            \n            textarea.\u003Cspan class=\"hljs-property\">value\u003C/span> = lines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n            textarea.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Event\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, { \u003Cspan class=\"hljs-attr\">bubbles\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }));\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveRowDown\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { textarea } = currentPos;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentLineIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findCurrentTableLineIndex\u003C/span>(lines);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentLineIndex < lines.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span> && \u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(lines[currentLineIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>])) {\n            \u003Cspan class=\"hljs-comment\">// Swap with next line\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> temp = lines[currentLineIndex];\n            lines[currentLineIndex] = lines[currentLineIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>];\n            lines[currentLineIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>] = temp;\n            \n            textarea.\u003Cspan class=\"hljs-property\">value\u003C/span> = lines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n            textarea.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Event\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, { \u003Cspan class=\"hljs-attr\">bubbles\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span> }));\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">toggleCellSelection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectionMode\u003C/span> = !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectionMode\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectionMode\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentPos) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedCells\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${currentPos.row}\u003C/span>,\u003Cspan class=\"hljs-subst\">${currentPos.col}\u003C/span>`\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightSelectedCells\u003C/span>();\n            }\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearSelection\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">extendSelectionToCell\u003C/span>(\u003Cspan class=\"hljs-params\">row, col\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedCells\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${row}\u003C/span>,\u003Cspan class=\"hljs-subst\">${col}\u003C/span>`\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightSelectedCells\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(row, col);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">selectEntireTable\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentPos = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCellPosition\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentPos) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { table } = currentPos;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedCells\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> row = \u003Cspan class=\"hljs-number\">0\u003C/span>; row < table.\u003Cspan class=\"hljs-property\">length\u003C/span>; row++) {\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> col = \u003Cspan class=\"hljs-number\">0\u003C/span>; col < table[row].\u003Cspan class=\"hljs-property\">length\u003C/span>; col++) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedCells\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${row}\u003C/span>,\u003Cspan class=\"hljs-subst\">${col}\u003C/span>`\u003C/span>);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectionMode\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightSelectedCells\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clearSelection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectionMode\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedCells\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeHighlights\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">highlightSelectedCells\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Implementation would depend on the specific editor\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// This is a placeholder for visual feedback\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Highlighted cells:'\u003C/span>, \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">selectedCells\u003C/span>));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">removeHighlights\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Remove visual selection indicators\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Cleared cell highlights'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findCurrentTableLineIndex\u003C/span>(\u003Cspan class=\"hljs-params\">lines\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> activeElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">activeElement\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> textarea = activeElement.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'textarea'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!textarea) \u003Cspan class=\"hljs-keyword\">return\u003C/span> -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cursorPos = textarea.\u003Cspan class=\"hljs-property\">selectionStart\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> charCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < lines.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (charCount + lines[i].\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span> > cursorPos) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(lines[i]) ? i : -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n            }\n            charCount += lines[i].\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectNewTables\u003C/span>(\u003Cspan class=\"hljs-params\">nodes\u003C/span>) {\n        nodes.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">node\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (node.\u003Cspan class=\"hljs-property\">nodeType\u003C/span> === \u003Cspan class=\"hljs-title class_\">Node\u003C/span>.\u003Cspan class=\"hljs-property\">ELEMENT_NODE\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> textareas = node.\u003Cspan class=\"hljs-property\">querySelectorAll\u003C/span> ? \n                    node.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'textarea'\u003C/span>) : [];\n                \n                textareas.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">textarea\u003C/span> =>\u003C/span> {\n                    textarea.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">onTextareaInput\u003C/span>(textarea);\n                    });\n                });\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">onTextareaInput\u003C/span>(\u003Cspan class=\"hljs-params\">textarea\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> hasTable = \u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/m\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(text);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (hasTable) {\n            textarea.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'has-markdown-table'\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceTableEditing\u003C/span>(textarea);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            textarea.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'has-markdown-table'\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceTableEditing\u003C/span>(\u003Cspan class=\"hljs-params\">textarea\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Add visual indicators, auto-formatting, etc.\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!textarea.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">tableEnhanced\u003C/span>) {\n            textarea.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">tableEnhanced\u003C/span> = \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Auto-format table on blur\u003C/span>\n            textarea.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'blur'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">autoFormatTable\u003C/span>(textarea);\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Show keyboard shortcut hints\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showKeyboardHints\u003C/span>(textarea);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">autoFormatTable\u003C/span>(\u003Cspan class=\"hljs-params\">textarea\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> inTable = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> tableLines = [];\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> tableStartIndex = -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formattedLines = [];\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < lines.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> line = lines[i];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isTableLine = \u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(line);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isTableLine && !inTable) {\n                inTable = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                tableStartIndex = i;\n                tableLines = [];\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (inTable && isTableLine) {\n                tableLines.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(line);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (inTable && !isTableLine) {\n                \u003Cspan class=\"hljs-comment\">// End of table - format accumulated lines\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> formatted = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">formatTableLines\u003C/span>(tableLines);\n                formattedLines.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(...formatted);\n                formattedLines.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(line);\n                inTable = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                tableLines = [];\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                formattedLines.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(line);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Handle table at end of file\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (inTable && tableLines.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> formatted = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">formatTableLines\u003C/span>(tableLines);\n            formattedLines.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(...formatted);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formattedText = formattedLines.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (formattedText !== text) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cursorPos = textarea.\u003Cspan class=\"hljs-property\">selectionStart\u003C/span>;\n            textarea.\u003Cspan class=\"hljs-property\">value\u003C/span> = formattedText;\n            textarea.\u003Cspan class=\"hljs-title function_\">setSelectionRange\u003C/span>(cursorPos, cursorPos);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatTableLines\u003C/span>(\u003Cspan class=\"hljs-params\">tableLines\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableLines.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> [];\n        \n        \u003Cspan class=\"hljs-comment\">// Parse table structure\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = [];\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> maxColumns = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        tableLines.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">line\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = line.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>)\n                .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>())\n                .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, index, array\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-comment\">// Remove empty first/last cells that come from starting/ending |\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> !(cell === \u003Cspan class=\"hljs-string\">''\u003C/span> && (index === \u003Cspan class=\"hljs-number\">0\u003C/span> || index === array.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>));\n                });\n            \n            rows.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(cells);\n            maxColumns = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(maxColumns, cells.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Normalize column count\u003C/span>\n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">while\u003C/span> (row.\u003Cspan class=\"hljs-property\">length\u003C/span> < maxColumns) {\n                row.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Calculate column widths\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnWidths = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>(maxColumns).\u003Cspan class=\"hljs-title function_\">fill\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            row.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, col\u003C/span>) =>\u003C/span> {\n                columnWidths[col] = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(columnWidths[col], cell.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n            });\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Apply minimum width\u003C/span>\n        columnWidths.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">width, index\u003C/span>) =>\u003C/span> {\n            columnWidths[index] = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(width, \u003Cspan class=\"hljs-number\">3\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Format rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> formattedRows = rows.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> paddedCells = row.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, col\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> cell.\u003Cspan class=\"hljs-title function_\">padEnd\u003C/span>(columnWidths[col]);\n            });\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'| '\u003C/span> + paddedCells.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' | '\u003C/span>) + \u003Cspan class=\"hljs-string\">' |'\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> formattedRows;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showKeyboardHints\u003C/span>(\u003Cspan class=\"hljs-params\">textarea\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create tooltip with keyboard shortcuts\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tooltip = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        tooltip.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-keyboard-hints'\u003C/span>;\n        tooltip.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <div class="keyboard-hints-content">\n                <h4>Table Keyboard Shortcuts</h4>\n                <ul>\n                    <li><kbd>Tab</kbd> - Next cell</li>\n                    <li><kbd>Shift+Tab</kbd> - Previous cell</li>\n                    <li><kbd>Enter</kbd> - Next row</li>\n                    <li><kbd>Ctrl+Enter</kbd> - Insert row below</li>\n                    <li><kbd>Alt+↑↓</kbd> - Move row</li>\n                    <li><kbd>Alt+←→</kbd> - Move column</li>\n                    <li><kbd>Ctrl+D</kbd> - Duplicate row</li>\n                    <li><kbd>Ctrl+K</kbd> - Delete row</li>\n                </ul>\n            </div>\n        `\u003C/span>;\n        \n        tooltip.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            position: absolute;\n            background: #333;\n            color: white;\n            padding: 10px;\n            border-radius: 4px;\n            font-size: 12px;\n            z-index: 1000;\n            display: none;\n            max-width: 250px;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(tooltip);\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> hintTimer;\n        \n        textarea.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'focus'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (textarea.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(\u003Cspan class=\"hljs-string\">'has-markdown-table'\u003C/span>)) {\n                hintTimer = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> rect = textarea.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n                    tooltip.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'block'\u003C/span>;\n                    tooltip.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">left\u003C/span> = rect.\u003Cspan class=\"hljs-property\">right\u003C/span> + \u003Cspan class=\"hljs-number\">10\u003C/span> + \u003Cspan class=\"hljs-string\">'px'\u003C/span>;\n                    tooltip.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">top\u003C/span> = rect.\u003Cspan class=\"hljs-property\">top\u003C/span> + \u003Cspan class=\"hljs-string\">'px'\u003C/span>;\n                }, \u003Cspan class=\"hljs-number\">1000\u003C/span>);\n            }\n        });\n        \n        textarea.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'blur'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(hintTimer);\n            tooltip.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        });\n        \n        textarea.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(hintTimer);\n            tooltip.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        });\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Auto-initialize when DOM is ready\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">GitHubTableNavigator\u003C/span>();\n});\n\u003C/code>\u003C/pre>\u003Ch3 id=\"typora-advanced-navigation\">Typora Advanced Navigation\u003C/h3>\n\u003Cp>Desktop Markdown editor with enhanced table features:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Typora Table Navigation Shortcuts\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Cell Movement\u003C/span>\nTab               → Next cell (auto-create row if needed)\nShift+Tab         → Previous cell\nCtrl+Enter        → New line within cell (multi-line content)\nEnter             → Next row (creates new row at table end)\n\n\u003Cspan class=\"hljs-section\">## Row Operations\u003C/span>\nCtrl+Shift+Enter  → Insert row above current\nAlt+Enter         → Insert row below current\nCtrl+Shift+-      → Delete current row\nCtrl+Shift+Up     → Move row up\nCtrl+Shift+Down   → Move row down\n\n\u003Cspan class=\"hljs-section\">## Column Operations\u003C/span>\nCtrl+Shift+Left   → Insert column to left\nCtrl+Shift+Right  → Insert column to right\nCtrl+Shift+\\      → Delete current column\nAlt+Left          → Move column left\nAlt+Right         → Move column right\n\n\u003Cspan class=\"hljs-section\">## Selection and Formatting\u003C/span>\nCtrl+A            → Select all in current cell (first press)\nCtrl+A            → Select entire table (second press)\nCtrl+L            → Select current row\nCtrl+Shift+L      → Select current column\nF2                → Rename column header\nCtrl+T            → Insert table at cursor\n\u003C/code>\u003C/pre>\u003Ch3 id=\"notion-style-block-navigation\">Notion-Style Block Navigation\u003C/h3>\n\u003Cp>Modern block-based Markdown editing:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// notion-table-navigation.js - Block-based table navigation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">BlockTableNavigator\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeBlock\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">blocks\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationHistory\u003C/span> = [];\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeBlockNavigation\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initializeBlockNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isInTableBlock\u003C/span>()) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (\u003Cspan class=\"hljs-literal\">true\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Tab'\u003C/span> && !e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">navigateToNextCell\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Tab'\u003C/span> && e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">navigateToPreviousCell\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Enter'\u003C/span> && e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createNewRow\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'/'\u003C/span> && e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showTableCommands\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span> && e.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>: \u003Cspan class=\"hljs-comment\">// Mac Cmd key\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span> && e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span>: \u003Cspan class=\"hljs-comment\">// Windows/Linux\u003C/span>\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToTableStart\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span> && e.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span> && e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToTableEnd\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>:\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exitTableNavigation\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupBlockDetection\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isInTableBlock\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> selection = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">getSelection\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> focusNode = selection.\u003Cspan class=\"hljs-property\">focusNode\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> focusNode && \n               focusNode.\u003Cspan class=\"hljs-property\">closest\u003C/span> && \n               focusNode.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-block, [data-block-type="table"]'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">navigateToNextCell\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentCell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCell\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentCell) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextCell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findNextCell\u003C/span>(currentCell);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nextCell) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(nextCell);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createNewRowAndFocus\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">navigateToPreviousCell\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentCell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCell\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentCell) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> previousCell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">findPreviousCell\u003C/span>(currentCell);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (previousCell) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(previousCell);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getCurrentCell\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> selection = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">getSelection\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> focusNode = selection.\u003Cspan class=\"hljs-property\">focusNode\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> focusNode ? focusNode.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-cell], .table-cell'\u003C/span>) : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findNextCell\u003C/span>(\u003Cspan class=\"hljs-params\">currentCell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allCells = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAllTableCells\u003C/span>(currentCell);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentIndex = allCells.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(currentCell);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> currentIndex >= \u003Cspan class=\"hljs-number\">0\u003C/span> && currentIndex < allCells.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span> ?\n               allCells[currentIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>] : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">findPreviousCell\u003C/span>(\u003Cspan class=\"hljs-params\">currentCell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allCells = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAllTableCells\u003C/span>(currentCell);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentIndex = allCells.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(currentCell);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> currentIndex > \u003Cspan class=\"hljs-number\">0\u003C/span> ? allCells[currentIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>] : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getAllTableCells\u003C/span>(\u003Cspan class=\"hljs-params\">referenceCell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = referenceCell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-block-type="table"], .table-block'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> table ? \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-cell], .table-cell'\u003C/span>)) : [];\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!cell) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Record navigation history\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationHistory\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">cell\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCell\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-string\">'navigate'\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Limit history size\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationHistory\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">50\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">navigationHistory\u003C/span>.\u003Cspan class=\"hljs-title function_\">shift\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Focus the cell\u003C/span>\n        cell.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Select all content in cell for easy replacement\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> range = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createRange\u003C/span>();\n        range.\u003Cspan class=\"hljs-title function_\">selectNodeContents\u003C/span>(cell);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> selection = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">getSelection\u003C/span>();\n        selection.\u003Cspan class=\"hljs-title function_\">removeAllRanges\u003C/span>();\n        selection.\u003Cspan class=\"hljs-title function_\">addRange\u003C/span>(range);\n        \n        \u003Cspan class=\"hljs-comment\">// Scroll into view if necessary\u003C/span>\n        cell.\u003Cspan class=\"hljs-title function_\">scrollIntoView\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">behavior\u003C/span>: \u003Cspan class=\"hljs-string\">'smooth'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">block\u003C/span>: \u003Cspan class=\"hljs-string\">'nearest'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">inline\u003C/span>: \u003Cspan class=\"hljs-string\">'nearest'\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Add visual feedback\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightActiveCell\u003C/span>(cell);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">highlightActiveCell\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Remove previous highlights\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.active-table-cell'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">el\u003C/span> =>\u003C/span> {\n            el.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'active-table-cell'\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Add highlight to current cell\u003C/span>\n        cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'active-table-cell'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Auto-remove after 2 seconds\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'active-table-cell'\u003C/span>);\n        }, \u003Cspan class=\"hljs-number\">2000\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createNewRow\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentCell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCell\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentCell) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = currentCell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-block-type="table"], .table-block'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!table) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-row], .table-row'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentRow = currentCell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-row], .table-row'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentRowIndex = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(rows).\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(currentRow);\n        \n        \u003Cspan class=\"hljs-comment\">// Create new row element\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> newRow = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTableRow\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Insert after current row\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentRowIndex >= \u003Cspan class=\"hljs-number\">0\u003C/span> && currentRowIndex < rows.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n            rows[currentRowIndex].\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(newRow, rows[currentRowIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>]);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            rows[currentRowIndex].\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(newRow);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Focus first cell of new row\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstCell = newRow.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-cell], .table-cell'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstCell) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(firstCell);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTableRow\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> existingRows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-row], .table-row'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnCount = existingRows.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \n            existingRows[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-cell], .table-cell'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span> : \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        row.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-row'\u003C/span>;\n        row.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-row'\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < columnCount; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            cell.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-cell'\u003C/span>;\n            cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-cell'\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>);\n            cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'contenteditable'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n            cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n            \n            row.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(cell);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> row;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createNewRowAndFocus\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createNewRow\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToTableStart\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentCell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCell\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentCell) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allCells = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAllTableCells\u003C/span>(currentCell);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (allCells.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(allCells[\u003Cspan class=\"hljs-number\">0\u003C/span>]);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToTableEnd\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentCell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCell\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentCell) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allCells = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAllTableCells\u003C/span>(currentCell);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (allCells.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusCell\u003C/span>(allCells[allCells.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>]);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showTableCommands\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentCell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCell\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentCell) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> commandPalette = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createCommandPalette\u003C/span>([\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Insert Row Above'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertRowAbove\u003C/span>() },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Insert Row Below'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertRowBelow\u003C/span>() },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Insert Column Left'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertColumnLeft\u003C/span>() },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Insert Column Right'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertColumnRight\u003C/span>() },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Delete Row'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">deleteCurrentRow\u003C/span>() },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Delete Column'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">deleteCurrentColumn\u003C/span>() },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Move Row Up'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveRowUp\u003C/span>() },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Move Row Down'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveRowDown\u003C/span>() },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Move Column Left'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveColumnLeft\u003C/span>() },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Move Column Right'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveColumnRight\u003C/span>() },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Duplicate Row'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">duplicateRow\u003C/span>() },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Clear Table Content'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearTableContent\u003C/span>() },\n            { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Export Table'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportTable\u003C/span>() }\n        ]);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showPalette\u003C/span>(commandPalette, currentCell);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createCommandPalette\u003C/span>(\u003Cspan class=\"hljs-params\">commands\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> palette = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        palette.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-command-palette'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> list = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'ul'\u003C/span>);\n        list.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'command-list'\u003C/span>;\n        \n        commands.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">command, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> item = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'li'\u003C/span>);\n            item.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'command-item'\u003C/span>;\n            item.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = command.\u003Cspan class=\"hljs-property\">label\u003C/span>;\n            item.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-index'\u003C/span>, index);\n            \n            item.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                command.\u003Cspan class=\"hljs-title function_\">action\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hidePalette\u003C/span>(palette);\n            });\n            \n            list.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(item);\n        });\n        \n        palette.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(list);\n        \n        \u003Cspan class=\"hljs-comment\">// Add keyboard navigation for palette\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> selectedIndex = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">keyHandler\u003C/span> = (\u003Cspan class=\"hljs-params\">e\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    selectedIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(selectedIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>, commands.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>);\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightPaletteItem\u003C/span>(list, selectedIndex);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    selectedIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(selectedIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightPaletteItem\u003C/span>(list, selectedIndex);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Enter'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    commands[selectedIndex].\u003Cspan class=\"hljs-title function_\">action\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hidePalette\u003C/span>(palette);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hidePalette\u003C/span>(palette);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n        };\n        \n        palette.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, keyHandler);\n        palette.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">element\u003C/span>: palette, commands, keyHandler };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showPalette\u003C/span>(\u003Cspan class=\"hljs-params\">palette, referenceElement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rect = referenceElement.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n        \n        palette.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            position: fixed;\n            left: \u003Cspan class=\"hljs-subst\">${rect.left}\u003C/span>px;\n            top: \u003Cspan class=\"hljs-subst\">${rect.bottom + \u003Cspan class=\"hljs-number\">5\u003C/span>}\u003C/span>px;\n            background: white;\n            border: 1px solid #ccc;\n            border-radius: 4px;\n            box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n            z-index: 1000;\n            min-width: 200px;\n            max-height: 300px;\n            overflow-y: auto;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(palette.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n        palette.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightPaletteItem\u003C/span>(palette.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.command-list'\u003C/span>), \u003Cspan class=\"hljs-number\">0\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">hidePalette\u003C/span>(\u003Cspan class=\"hljs-params\">palette\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (palette.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>) {\n            palette.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(palette.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Return focus to table cell\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentCell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCell\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentCell) {\n            currentCell.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">highlightPaletteItem\u003C/span>(\u003Cspan class=\"hljs-params\">list, index\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Remove previous highlights\u003C/span>\n        list.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.highlighted'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">item\u003C/span> =>\u003C/span> {\n            item.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'highlighted'\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Highlight current item\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> items = list.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.command-item'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (items[index]) {\n            items[index].\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'highlighted'\u003C/span>);\n            items[index].\u003Cspan class=\"hljs-title function_\">scrollIntoView\u003C/span>({ \u003Cspan class=\"hljs-attr\">block\u003C/span>: \u003Cspan class=\"hljs-string\">'nearest'\u003C/span> });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">exitTableNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Exit table navigation mode and return to document flow\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentCell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCurrentCell\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!currentCell) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = currentCell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-block-type="table"], .table-block'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!table) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Find next block after table\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextBlock = table.\u003Cspan class=\"hljs-property\">nextElementSibling\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nextBlock) {\n            nextBlock.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Create new paragraph block after table\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> newParagraph = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            newParagraph.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'content-block'\u003C/span>;\n            newParagraph.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-block-type'\u003C/span>, \u003Cspan class=\"hljs-string\">'paragraph'\u003C/span>);\n            newParagraph.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'contenteditable'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n            newParagraph.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n            \n            table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(newParagraph, table.\u003Cspan class=\"hljs-property\">nextSibling\u003C/span>);\n            newParagraph.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupBlockDetection\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Detect when user enters table blocks\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'focus'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-block-type="table"], .table-block'\u003C/span>)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeBlock\u003C/span> = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-block-type="table"], .table-block'\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceTableBlock\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeBlock\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceTableBlock\u003C/span>(\u003Cspan class=\"hljs-params\">tableBlock\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableBlock.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">enhanced\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        tableBlock.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">enhanced\u003C/span> = \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Add visual indicators\u003C/span>\n        tableBlock.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'keyboard-navigable'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Add resize handles\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addResizeHandles\u003C/span>(tableBlock);\n        \n        \u003Cspan class=\"hljs-comment\">// Add context menu\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addContextMenu\u003C/span>(tableBlock);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addResizeHandles\u003C/span>(\u003Cspan class=\"hljs-params\">tableBlock\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columns = tableBlock.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-cell], .table-cell'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnCount = columns.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \n            columns.\u003Cspan class=\"hljs-property\">length\u003C/span> / tableBlock.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-row], .table-row'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < columnCount - \u003Cspan class=\"hljs-number\">1\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> handle = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            handle.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'column-resize-handle'\u003C/span>;\n            handle.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                position: absolute;\n                width: 4px;\n                height: 100%;\n                background: transparent;\n                cursor: col-resize;\n                z-index: 10;\n            `\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Position handle between columns\u003C/span>\n            \u003Cspan class=\"hljs-comment\">// Implementation would depend on table layout structure\u003C/span>\n            tableBlock.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(handle);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addContextMenu\u003C/span>(\u003Cspan class=\"hljs-params\">tableBlock\u003C/span>) {\n        tableBlock.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'contextmenu'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> contextMenu = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createCommandPalette\u003C/span>([\n                { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Table Properties'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showTableProperties\u003C/span>() },\n                { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Sort Column A-Z'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sortColumn\u003C/span>(\u003Cspan class=\"hljs-string\">'asc'\u003C/span>) },\n                { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Sort Column Z-A'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sortColumn\u003C/span>(\u003Cspan class=\"hljs-string\">'desc'\u003C/span>) },\n                { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Filter Column'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">filterColumn\u003C/span>() },\n                { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Export as CSV'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportAsCSV\u003C/span>() },\n                { \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Export as JSON'\u003C/span>, \u003Cspan class=\"hljs-attr\">action\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportAsJSON\u003C/span>() }\n            ]);\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showPalette\u003C/span>(contextMenu, e.\u003Cspan class=\"hljs-property\">target\u003C/span>);\n        });\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize when DOM loads\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">BlockTableNavigator\u003C/span>();\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-first-navigation-design\">Accessibility-First Navigation Design\u003C/h2>\n\u003Ch3 id=\"screen-reader-optimization\">Screen Reader Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Accessible table navigation structure -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"accessible-table"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"table"\u003C/span> \n       \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Project data with keyboard navigation support"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">caption\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"table-caption"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>Project Status Dashboard\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">strong\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"navigation-instructions"\u003C/span>>\u003C/span>\n      Use Tab/Shift+Tab to move between cells, \n      Arrow keys for directional navigation,\n      Enter to edit cell content.\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">caption\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"table-caption nav-help"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>>\u003C/span>\n        Project Name\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"1"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-sort\u003C/span>=\u003Cspan class=\"hljs-string\">"none"\u003C/span>>\u003C/span>\n        Status\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"col"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>\n        Progress\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span> \u003Cspan class=\"hljs-attr\">data-row\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">scope\u003C/span>=\u003Cspan class=\"hljs-string\">"row"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-cell\u003C/span>=\u003Cspan class=\"hljs-string\">"0,0"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"cell-edit-help"\u003C/span>>\u003C/span>\n        E-commerce Platform\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-cell\u003C/span>=\u003Cspan class=\"hljs-string\">"0,1"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"status-help"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"status-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"img"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"In progress"\u003C/span>>\u003C/span>🔄\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        In Progress\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-cell\u003C/span>=\u003Cspan class=\"hljs-string\">"0,2"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-describedby\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-help"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-valuemin\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-valuemax\u003C/span>=\u003Cspan class=\"hljs-string\">"100"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-valuenow\u003C/span>=\u003Cspan class=\"hljs-string\">"75"\u003C/span>>\u003C/span>\n        75%\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-bar"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-fill"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"width: 75%"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"nav-help"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span>\n  Navigation: Tab moves to next cell, Shift+Tab to previous. \n  Arrow keys move directionally. Enter to edit, Escape to exit editing.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"cell-edit-help"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span>\n  Press Enter to edit this cell content.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"status-help"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span>\n  Project status indicator. Visual icon followed by text description.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"progress-help"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sr-only"\u003C/span>>\u003C/span>\n  Progress percentage with visual progress bar.\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[tabindex=\u003Cspan class=\"hljs-string\">"0"\u003C/span>]\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[tabindex=\u003Cspan class=\"hljs-string\">"0"\u003C/span>]\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span> solid \u003Cspan class=\"hljs-number\">#0066cc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: -\u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e6f3ff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.navigation-instructions\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: normal;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sr-only\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: -\u003Cspan class=\"hljs-number\">1px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">clip\u003C/span>: \u003Cspan class=\"hljs-built_in\">rect\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.progress-bar\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e0e0e0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.progress-fill\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">linear-gradient\u003C/span>(\u003Cspan class=\"hljs-number\">90deg\u003C/span>, \u003Cspan class=\"hljs-number\">#28a745\u003C/span>, \u003Cspan class=\"hljs-number\">#20c997\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: width \u003Cspan class=\"hljs-number\">0.3s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid black;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[tabindex=\u003Cspan class=\"hljs-string\">"0"\u003C/span>]\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[tabindex=\u003Cspan class=\"hljs-string\">"0"\u003C/span>]\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid black;\n        \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: yellow;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: black;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion support */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n    \u003Cspan class=\"hljs-selector-class\">.progress-fill\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[tabindex=\u003Cspan class=\"hljs-string\">"0"\u003C/span>]\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.accessible-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[tabindex=\u003Cspan class=\"hljs-string\">"0"\u003C/span>]\u003C/span> {\n        scroll-behavior: auto;\n    }\n}\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AccessibleTableNavigator\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = table;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">editMode\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalContent\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupKeyboardNavigation\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupAriaLive\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupKeyboardNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">editMode\u003C/span> && e.\u003Cspan class=\"hljs-property\">key\u003C/span> !== \u003Cspan class=\"hljs-string\">'Escape'\u003C/span> && e.\u003Cspan class=\"hljs-property\">key\u003C/span> !== \u003Cspan class=\"hljs-string\">'Enter'\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>; \u003Cspan class=\"hljs-comment\">// Allow normal text editing\u003C/span>\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!cell) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Tab'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToNextCell\u003C/span>(cell, !e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowRight'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveHorizontally\u003C/span>(cell, \u003Cspan class=\"hljs-number\">1\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowLeft'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveHorizontally\u003C/span>(cell, -\u003Cspan class=\"hljs-number\">1\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveVertically\u003C/span>(cell, \u003Cspan class=\"hljs-number\">1\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveVertically\u003C/span>(cell, -\u003Cspan class=\"hljs-number\">1\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Enter'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">editMode\u003C/span>) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exitEditMode\u003C/span>(cell);\n                    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enterEditMode\u003C/span>(cell);\n                    }\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">editMode\u003C/span>) {\n                        e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">cancelEdit\u003C/span>(cell);\n                    }\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Home'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToRowStart\u003C/span>(cell);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'End'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToRowEnd\u003C/span>(cell);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'PageUp'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToColumnStart\u003C/span>(cell);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    \n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'PageDown'\u003C/span>:\n                    e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">moveToColumnEnd\u003C/span>(cell);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Handle focus events for announcements\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'focus'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell && cell !== \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentCell\u003C/span> = cell;\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceCellPosition\u003C/span>(cell);\n            }\n        }, \u003Cspan class=\"hljs-literal\">true\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupAriaLive\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create live region for announcements\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>, \u003Cspan class=\"hljs-string\">'polite'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-atomic'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sr-only'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">'table-announcements'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToNextCell\u003C/span>(\u003Cspan class=\"hljs-params\">currentCell, forward = \u003Cspan class=\"hljs-literal\">true\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allCells = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAllNavigableCells\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentIndex = allCells.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(currentCell);\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> nextIndex;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (forward) {\n            nextIndex = (currentIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>) % allCells.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            nextIndex = currentIndex - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nextIndex < \u003Cspan class=\"hljs-number\">0\u003C/span>) nextIndex = allCells.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextCell = allCells[nextIndex];\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nextCell) {\n            nextCell.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveHorizontally\u003C/span>(\u003Cspan class=\"hljs-params\">currentCell, direction\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = currentCell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentIndex = cells.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(currentCell);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextIndex = currentIndex + direction;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nextIndex >= \u003Cspan class=\"hljs-number\">0\u003C/span> && nextIndex < cells.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n            cells[nextIndex].\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveVertically\u003C/span>(\u003Cspan class=\"hljs-params\">currentCell, direction\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allRows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentRow = currentCell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentRowIndex = allRows.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(currentRow);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentCellIndex = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(currentRow.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>)).\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(currentCell);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextRowIndex = currentRowIndex + direction;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nextRowIndex >= \u003Cspan class=\"hljs-number\">0\u003C/span> && nextRowIndex < allRows.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextRow = allRows[nextRowIndex];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(nextRow.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>));\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetCell = cells[\u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(currentCellIndex, cells.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>)];\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (targetCell) {\n                targetCell.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToRowStart\u003C/span>(\u003Cspan class=\"hljs-params\">currentCell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = currentCell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstCell = row.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (firstCell) {\n            firstCell.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToRowEnd\u003C/span>(\u003Cspan class=\"hljs-params\">currentCell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = currentCell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lastCell = cells[cells.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (lastCell) {\n            lastCell.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToColumnStart\u003C/span>(\u003Cspan class=\"hljs-params\">currentCell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCellColumnIndex\u003C/span>(currentCell);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstRow = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetCell = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(firstRow.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>))[columnIndex];\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (targetCell) {\n            targetCell.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">moveToColumnEnd\u003C/span>(\u003Cspan class=\"hljs-params\">currentCell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCellColumnIndex\u003C/span>(currentCell);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lastRow = rows[rows.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetCell = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(lastRow.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>))[columnIndex];\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (targetCell) {\n            targetCell.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enterEditMode\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell.\u003Cspan class=\"hljs-property\">tagName\u003C/span> === \u003Cspan class=\"hljs-string\">'TH'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>; \u003Cspan class=\"hljs-comment\">// Don't edit headers\u003C/span>\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">editMode\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalContent\u003C/span> = cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n        \n        cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'contenteditable'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n        cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'editing'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Select all content\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> range = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createRange\u003C/span>();\n        range.\u003Cspan class=\"hljs-title function_\">selectNodeContents\u003C/span>(cell);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> selection = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">getSelection\u003C/span>();\n        selection.\u003Cspan class=\"hljs-title function_\">removeAllRanges\u003C/span>();\n        selection.\u003Cspan class=\"hljs-title function_\">addRange\u003C/span>(range);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announce\u003C/span>(\u003Cspan class=\"hljs-string\">`Editing cell content. Press Enter to save, Escape to cancel.`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">exitEditMode\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">editMode\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \n        cell.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'contenteditable'\u003C/span>);\n        cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'editing'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> newContent = cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> changed = newContent !== \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalContent\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (changed) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announce\u003C/span>(\u003Cspan class=\"hljs-string\">`Cell content updated to: \u003Cspan class=\"hljs-subst\">${newContent}\u003C/span>`\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Trigger change event for external handlers\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> changeEvent = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'cellchange'\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">detail\u003C/span>: {\n                    \u003Cspan class=\"hljs-attr\">cell\u003C/span>: cell,\n                    \u003Cspan class=\"hljs-attr\">oldValue\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalContent\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">newValue\u003C/span>: newContent\n                }\n            });\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(changeEvent);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announce\u003C/span>(\u003Cspan class=\"hljs-string\">`Edit cancelled.`\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalContent\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">cancelEdit\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">editMode\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \n        cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalContent\u003C/span>;\n        cell.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'contenteditable'\u003C/span>);\n        cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'editing'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announce\u003C/span>(\u003Cspan class=\"hljs-string\">`Edit cancelled. Content restored.`\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalContent\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getAllNavigableCells\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th[tabindex="0"], td[tabindex="0"]'\u003C/span>));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getCellColumnIndex\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = cell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> cells.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(cell);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">announceCellPosition\u003C/span>(\u003Cspan class=\"hljs-params\">cell\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = cell.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allRows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowIndex = allRows.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(row);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getCellColumnIndex\u003C/span>(cell);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isHeader = cell.\u003Cspan class=\"hljs-property\">tagName\u003C/span> === \u003Cspan class=\"hljs-string\">'TH'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellType = isHeader ? \u003Cspan class=\"hljs-string\">'header'\u003C/span> : \u003Cspan class=\"hljs-string\">'cell'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Get column header for context\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> columnHeader = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!isHeader && rowIndex > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerRow = allRows[\u003Cspan class=\"hljs-number\">0\u003C/span>];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerCell = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(headerRow.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>))[columnIndex];\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headerCell) {\n                columnHeader = \u003Cspan class=\"hljs-string\">`, column \u003Cspan class=\"hljs-subst\">${headerCell.textContent.trim()}\u003C/span>`\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> announcement = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${cellType}\u003C/span> \u003Cspan class=\"hljs-subst\">${rowIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>, \u003Cspan class=\"hljs-subst\">${columnIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>\u003Cspan class=\"hljs-subst\">${columnHeader}\u003C/span>. Content: \u003Cspan class=\"hljs-subst\">${content}\u003C/span>`\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announce\u003C/span>(announcement);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">announce\u003C/span>(\u003Cspan class=\"hljs-params\">message\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = message;\n        \n        \u003Cspan class=\"hljs-comment\">// Clear after 3 seconds to avoid repeated announcements\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> === message) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            }\n        }, \u003Cspan class=\"hljs-number\">3000\u003C/span>);\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize accessible navigation for all tables\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> accessibleTables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.accessible-table'\u003C/span>);\n    accessibleTables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">AccessibleTableNavigator\u003C/span>(table);\n    });\n});\n\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Effective keyboard navigation enhances productivity across comprehensive documentation workflows. When combined with \u003Ca href=\"/blog/markdown-table-data-validation-quality-assurance-guide\">table data validation systems\u003C/a>, keyboard shortcuts enable rapid data entry and correction while maintaining quality standards through automated validation checks that provide immediate feedback during navigation.\u003C/p>\n\u003Cp>For advanced content management, navigation shortcuts work seamlessly with \u003Ca href=\"/blog/markdown-table-responsive-design-complete-guide\">table responsive design patterns\u003C/a> to provide consistent interaction models across different devices and screen sizes, ensuring that keyboard users maintain full functionality whether working on desktop, tablet, or mobile interfaces.\u003C/p>\n\u003Cp>When building comprehensive editing workflows, keyboard navigation complements \u003Ca href=\"/blog/markdown-table-sorting-filtering-interactive-guide\">table sorting and filtering functionality\u003C/a> by providing efficient methods to navigate through filtered results, select multiple items for bulk operations, and maintain focus context during dynamic content updates.\u003C/p>\n\u003Ch2 id=\"productivity-enhancement-techniques\">Productivity Enhancement Techniques\u003C/h2>\n\u003Ch3 id=\"macro-and-custom-shortcut-creation\">Macro and Custom Shortcut Creation\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// custom-table-macros.js - User-defined keyboard macros\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">TableMacroManager\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">macros\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">recording\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentRecording\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">macroHistory\u003C/span> = [];\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadUserMacros\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupMacroSystem\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupMacroSystem\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Macro recording toggle (Ctrl+Shift+R)\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> && e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span> && e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'R'\u003C/span>) {\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleRecording\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Macro playback (Ctrl+Shift+P)\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> && e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span> && e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'P'\u003C/span>) {\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showMacroPlaybackMenu\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Quick macro slots (Ctrl+Shift+1-9)\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> && e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span> && \u003Cspan class=\"hljs-regexp\">/^[1-9]$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(e.\u003Cspan class=\"hljs-property\">key\u003C/span>)) {\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">playMacro\u003C/span>(\u003Cspan class=\"hljs-string\">`quick-\u003Cspan class=\"hljs-subst\">${e.key}\u003C/span>`\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Record keystrokes when recording\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">recording\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isInTable\u003C/span>()) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">recordKeystroke\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">key\u003C/span>: e.\u003Cspan class=\"hljs-property\">key\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">ctrlKey\u003C/span>: e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">shiftKey\u003C/span>: e.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">altKey\u003C/span>: e.\u003Cspan class=\"hljs-property\">altKey\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>()\n                });\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Setup custom shortcuts\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupCustomShortcuts\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupCustomShortcuts\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Define common table operations with custom shortcuts\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> shortcuts = {\n            \u003Cspan class=\"hljs-string\">'ctrl+shift+i'\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertRowWithDialog\u003C/span>(),\n            \u003Cspan class=\"hljs-string\">'ctrl+shift+o'\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertColumnWithDialog\u003C/span>(),\n            \u003Cspan class=\"hljs-string\">'ctrl+shift+d'\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">duplicateSelectionWithOptions\u003C/span>(),\n            \u003Cspan class=\"hljs-string\">'ctrl+shift+f'\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">formatTableAdvanced\u003C/span>(),\n            \u003Cspan class=\"hljs-string\">'ctrl+shift+s'\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sortTableAdvanced\u003C/span>(),\n            \u003Cspan class=\"hljs-string\">'ctrl+shift+e'\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportTableWithOptions\u003C/span>(),\n            \u003Cspan class=\"hljs-string\">'ctrl+shift+v'\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">pasteSpecial\u003C/span>(),\n            \u003Cspan class=\"hljs-string\">'ctrl+shift+c'\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">copyTableStructure\u003C/span>(),\n            \u003Cspan class=\"hljs-string\">'ctrl+shift+x'\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">cutWithFormatPreservation\u003C/span>(),\n            \u003Cspan class=\"hljs-string\">'ctrl+shift+z'\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">undoTableOperation\u003C/span>(),\n            \u003Cspan class=\"hljs-string\">'ctrl+shift+y'\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">redoTableOperation\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> shortcut = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getShortcutString\u003C/span>(e);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> action = shortcuts[shortcut];\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (action && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isInTable\u003C/span>()) {\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-title function_\">action\u003C/span>();\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getShortcutString\u003C/span>(\u003Cspan class=\"hljs-params\">event\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> parts = [];\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span>) parts.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'ctrl'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>) parts.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'shift'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">altKey\u003C/span>) parts.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'alt'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (event.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>) parts.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'meta'\u003C/span>);\n        parts.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(event.\u003Cspan class=\"hljs-property\">key\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>());\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> parts.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">'+'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">toggleRecording\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">recording\u003C/span> = !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">recording\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">recording\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentRecording\u003C/span> = [];\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showRecordingIndicator\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announce\u003C/span>(\u003Cspan class=\"hljs-string\">'Macro recording started. Press Ctrl+Shift+R again to stop.'\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideRecordingIndicator\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">saveMacroDialog\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">recordKeystroke\u003C/span>(\u003Cspan class=\"hljs-params\">keystroke\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentRecording\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(keystroke);\n        \n        \u003Cspan class=\"hljs-comment\">// Limit recording length to prevent memory issues\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentRecording\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">1000\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentRecording\u003C/span>.\u003Cspan class=\"hljs-title function_\">shift\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">saveMacroDialog\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentRecording\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announce\u003C/span>(\u003Cspan class=\"hljs-string\">'No keystrokes recorded.'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> dialog = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        dialog.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'macro-save-dialog'\u003C/span>;\n        dialog.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <div class="dialog-content">\n                <h3>Save Macro</h3>\n                <p>Recorded \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.currentRecording.length}\u003C/span> keystrokes</p>\n                \n                <label>\n                    Macro Name:\n                    <input type="text" id="macro-name" placeholder="e.g., Format Financial Table">\n                </label>\n                \n                <label>\n                    Quick Access Slot:\n                    <select id="macro-slot">\n                        <option value="">None</option>\n                        \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Array\u003C/span>.\u003Cspan class=\"hljs-keyword\">from\u003C/span>({length: \u003Cspan class=\"hljs-number\">9\u003C/span>}, (_, i) => \u003Cspan class=\"hljs-string\">`\n                            <option value="quick-\u003Cspan class=\"hljs-subst\">${i+\u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>">Ctrl+Shift+\u003Cspan class=\"hljs-subst\">${i+\u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span></option>\n                        `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                    </select>\n                </label>\n                \n                <label>\n                    Description:\n                    <textarea id="macro-description" \n                              placeholder="Describe what this macro does..."></textarea>\n                </label>\n                \n                <div class="dialog-actions">\n                    <button id="save-macro">Save Macro</button>\n                    <button id="cancel-macro">Cancel</button>\n                    <button id="test-macro">Test Playback</button>\n                </div>\n            </div>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(dialog);\n        dialog.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#macro-name'\u003C/span>).\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        \n        dialog.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#save-macro'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">saveMacro\u003C/span>(dialog);\n        });\n        \n        dialog.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#cancel-macro'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(dialog);\n        });\n        \n        dialog.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#test-macro'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">testMacroPlayback\u003C/span>();\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">saveMacro\u003C/span>(\u003Cspan class=\"hljs-params\">dialog\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> name = dialog.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#macro-name'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> slot = dialog.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#macro-slot'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> description = dialog.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#macro-description'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!name) {\n            \u003Cspan class=\"hljs-title function_\">alert\u003C/span>(\u003Cspan class=\"hljs-string\">'Please enter a macro name.'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> macroData = {\n            name,\n            description,\n            \u003Cspan class=\"hljs-attr\">keystrokes\u003C/span>: [...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentRecording\u003C/span>],\n            \u003Cspan class=\"hljs-attr\">created\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>().\u003Cspan class=\"hljs-title function_\">toISOString\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">usage\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Save to main collection\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">macros\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(name, macroData);\n        \n        \u003Cspan class=\"hljs-comment\">// Save to quick slot if specified\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (slot) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">macros\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(slot, macroData);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">saveUserMacros\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(dialog);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announce\u003C/span>(\u003Cspan class=\"hljs-string\">`Macro "\u003Cspan class=\"hljs-subst\">${name}\u003C/span>" saved successfully.`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showMacroPlaybackMenu\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> macroList = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">macros\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>())\n            .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[key, _]\u003C/span>) =>\u003C/span> !key.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'quick-'\u003C/span>))\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[key, macro]\u003C/span>) =>\u003C/span> ({\n                \u003Cspan class=\"hljs-attr\">id\u003C/span>: key,\n                \u003Cspan class=\"hljs-attr\">name\u003C/span>: macro.\u003Cspan class=\"hljs-property\">name\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">description\u003C/span>: macro.\u003Cspan class=\"hljs-property\">description\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">usage\u003C/span>: macro.\u003Cspan class=\"hljs-property\">usage\u003C/span>\n            }))\n            .\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> b.\u003Cspan class=\"hljs-property\">usage\u003C/span> - a.\u003Cspan class=\"hljs-property\">usage\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> menu = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        menu.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'macro-playback-menu'\u003C/span>;\n        menu.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <div class="menu-content">\n                <h3>Select Macro to Play</h3>\n                <div class="macro-search">\n                    <input type="text" id="macro-search" placeholder="Search macros...">\n                </div>\n                <ul class="macro-list">\n                    \u003Cspan class=\"hljs-subst\">${macroList.map(macro => \u003Cspan class=\"hljs-string\">`\n                        <li class="macro-item" data-id="\u003Cspan class=\"hljs-subst\">${macro.id}\u003C/span>">\n                            <div class="macro-name">\u003Cspan class=\"hljs-subst\">${macro.name}\u003C/span></div>\n                            <div class="macro-description">\u003Cspan class=\"hljs-subst\">${macro.description}\u003C/span></div>\n                            <div class="macro-stats">Used \u003Cspan class=\"hljs-subst\">${macro.usage}\u003C/span> times</div>\n                        </li>\n                    `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                </ul>\n                <div class="menu-actions">\n                    <button id="play-selected">Play Selected</button>\n                    <button id="edit-macro">Edit Macro</button>\n                    <button id="delete-macro">Delete Macro</button>\n                    <button id="close-menu">Close</button>\n                </div>\n            </div>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(menu);\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> selectedMacro = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Handle macro selection\u003C/span>\n        menu.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.macro-item'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">item\u003C/span> =>\u003C/span> {\n            item.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                menu.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.macro-item'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">i\u003C/span> =>\u003C/span> i.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'selected'\u003C/span>));\n                item.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'selected'\u003C/span>);\n                selectedMacro = item.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n            });\n            \n            item.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'dblclick'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">playMacro\u003C/span>(item.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(menu);\n            });\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Handle search\u003C/span>\n        menu.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#macro-search'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">filterMacroList\u003C/span>(menu, e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Handle actions\u003C/span>\n        menu.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#play-selected'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (selectedMacro) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">playMacro\u003C/span>(selectedMacro);\n                \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(menu);\n            }\n        });\n        \n        menu.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#close-menu'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(menu);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">playMacro\u003C/span>(\u003Cspan class=\"hljs-params\">macroId\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> macro = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">macros\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(macroId);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!macro) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announce\u003C/span>(\u003Cspan class=\"hljs-string\">`Macro "\u003Cspan class=\"hljs-subst\">${macroId}\u003C/span>" not found.`\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announce\u003C/span>(\u003Cspan class=\"hljs-string\">`Playing macro: \u003Cspan class=\"hljs-subst\">${macro.name}\u003C/span>`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Increment usage count\u003C/span>\n        macro.\u003Cspan class=\"hljs-property\">usage\u003C/span>++;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">saveUserMacros\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Play back recorded keystrokes\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">playbackKeystrokes\u003C/span>(macro.\u003Cspan class=\"hljs-property\">keystrokes\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">playbackKeystrokes\u003C/span>(\u003Cspan class=\"hljs-params\">keystrokes\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> index = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> baseDelay = \u003Cspan class=\"hljs-number\">50\u003C/span>; \u003Cspan class=\"hljs-comment\">// Base delay between keystrokes\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">playNext\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index >= keystrokes.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announce\u003C/span>(\u003Cspan class=\"hljs-string\">'Macro playback complete.'\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> keystroke = keystrokes[index];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextKeystroke = keystrokes[index + \u003Cspan class=\"hljs-number\">1\u003C/span>];\n            \n            \u003Cspan class=\"hljs-comment\">// Calculate delay (preserve timing if reasonable)\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> delay = baseDelay;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nextKeystroke) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalDelay = nextKeystroke.\u003Cspan class=\"hljs-property\">timestamp\u003C/span> - keystroke.\u003Cspan class=\"hljs-property\">timestamp\u003C/span>;\n                delay = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(originalDelay, baseDelay), \u003Cspan class=\"hljs-number\">1000\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Simulate keystroke\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">simulateKeystroke\u003C/span>(keystroke);\n            \n            index++;\n            \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(playNext, delay);\n        };\n        \n        \u003Cspan class=\"hljs-title function_\">playNext\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">simulateKeystroke\u003C/span>(\u003Cspan class=\"hljs-params\">keystroke\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> activeElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">activeElement\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create keyboard event\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> event = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">KeyboardEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">key\u003C/span>: keystroke.\u003Cspan class=\"hljs-property\">key\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">ctrlKey\u003C/span>: keystroke.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">shiftKey\u003C/span>: keystroke.\u003Cspan class=\"hljs-property\">shiftKey\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">altKey\u003C/span>: keystroke.\u003Cspan class=\"hljs-property\">altKey\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">bubbles\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cancelable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Dispatch to active element\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (activeElement) {\n            activeElement.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(event);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">loadUserMacros\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> saved = \u003Cspan class=\"hljs-variable language_\">localStorage\u003C/span>.\u003Cspan class=\"hljs-title function_\">getItem\u003C/span>(\u003Cspan class=\"hljs-string\">'table-macros'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (saved) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> macroData = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(saved);\n                \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(macroData).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[key, value]\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">macros\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(key, value);\n                });\n            }\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to load user macros:'\u003C/span>, error);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">saveUserMacros\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> macroData = {};\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">macros\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, key\u003C/span>) =>\u003C/span> {\n                macroData[key] = value;\n            });\n            \u003Cspan class=\"hljs-variable language_\">localStorage\u003C/span>.\u003Cspan class=\"hljs-title function_\">setItem\u003C/span>(\u003Cspan class=\"hljs-string\">'table-macros'\u003C/span>, \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(macroData));\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to save user macros:'\u003C/span>, error);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isInTable\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> activeElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">activeElement\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> activeElement && \n               (activeElement.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>) || \n                activeElement.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-block-type="table"]'\u003C/span>) ||\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isInMarkdownTable\u003C/span>(activeElement));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">isInMarkdownTable\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> textarea = element.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'textarea'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!textarea) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cursorPos = textarea.\u003Cspan class=\"hljs-property\">selectionStart\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = textarea.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = text.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, cursorPos).\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentLine = lines[lines.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>];\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-regexp\">/^\\s*\\|.*\\|\\s*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(currentLine);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showRecordingIndicator\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        indicator.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">'macro-recording-indicator'\u003C/span>;\n        indicator.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'🔴 Recording Macro'\u003C/span>;\n        indicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            position: fixed;\n            top: 20px;\n            right: 20px;\n            background: #ff4444;\n            color: white;\n            padding: 10px 15px;\n            border-radius: 20px;\n            z-index: 10000;\n            font-weight: bold;\n            animation: pulse 1s infinite;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(indicator);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">hideRecordingIndicator\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'macro-recording-indicator'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (indicator) {\n            indicator.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(indicator);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">announce\u003C/span>(\u003Cspan class=\"hljs-params\">message\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create or update live region for announcements\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> liveRegion = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'macro-announcements'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!liveRegion) {\n            liveRegion = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            liveRegion.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">'macro-announcements'\u003C/span>;\n            liveRegion.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>, \u003Cspan class=\"hljs-string\">'polite'\u003C/span>);\n            liveRegion.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sr-only'\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(liveRegion);\n        }\n        \n        liveRegion.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = message;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize macro system\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">TableMacroManager\u003C/span>();\n});\n\u003C/code>\u003C/pre>\u003Ch3 id=\"workflow-optimization-patterns\">Workflow Optimization Patterns\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* Enhanced visual feedback for keyboard navigation */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@keyframes\u003C/span> pulse {\n    \u003Cspan class=\"hljs-number\">0%\u003C/span> { \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>; }\n    \u003Cspan class=\"hljs-number\">50%\u003C/span> { \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.5\u003C/span>; }\n    \u003Cspan class=\"hljs-number\">100%\u003C/span> { \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>; }\n}\n\n\u003Cspan class=\"hljs-selector-class\">.macro-recording-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: pulse \u003Cspan class=\"hljs-number\">1s\u003C/span> infinite;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-cell\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>-within {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e6f3ff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#0066cc\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">102\u003C/span>, \u003Cspan class=\"hljs-number\">204\u003C/span>, \u003Cspan class=\"hljs-number\">0.2\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.keyboard-navigable\u003C/span> \u003Cspan class=\"hljs-selector-class\">.table-cell\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.keyboard-navigable\u003C/span> \u003Cspan class=\"hljs-selector-class\">.table-cell\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid transparent;\n    \u003Cspan class=\"hljs-attribute\">pointer-events\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: border-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.keyboard-navigable\u003C/span> \u003Cspan class=\"hljs-selector-class\">.table-cell\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#0066cc\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.editing\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#fff3cd\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ffc107\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.selected-cell\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#cce5ff\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.multi-selected\u003C/span> \u003Cspan class=\"hljs-selector-class\">.table-cell\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e6f3ff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Keyboard shortcut hints */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.keyboard-hints\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.9\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">11px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">pointer-events\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.keyboard-hints\u003C/span> \u003Cspan class=\"hljs-selector-tag\">kbd\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#555\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#777\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: monospace;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive keyboard navigation aids */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.table-cell\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">scale\u003C/span>(\u003Cspan class=\"hljs-number\">1.05\u003C/span>);\n        \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.keyboard-hints\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none; \u003Cspan class=\"hljs-comment\">/* Hide on mobile */\u003C/span>\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n    \u003Cspan class=\"hljs-selector-class\">.table-cell\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.keyboard-navigable\u003C/span> \u003Cspan class=\"hljs-selector-class\">.table-cell\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.macro-recording-indicator\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n        \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: none;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Comprehensive keyboard navigation transforms Markdown table editing from a manual, mouse-dependent process into an efficient, accessible workflow that enhances productivity while maintaining inclusivity for users with diverse abilities and preferences. By implementing platform-specific navigation patterns, accessibility-first design principles, and productivity-enhancing macro systems, content creators can achieve professional-level table editing efficiency across different environments and tools.\u003C/p>\n\u003Cp>The key to successful keyboard navigation implementation lies in understanding user workflow patterns, providing consistent interaction models across different platforms, and maintaining backward compatibility with existing editor ecosystems. Whether you're working in simple text editors, advanced IDEs, or web-based Markdown platforms, the navigation techniques covered in this guide provide the foundation for building efficient, accessible table editing workflows that scale with user needs and technical requirements.\u003C/p>\n\u003Cp>Remember to test your navigation implementations across different assistive technologies, validate keyboard accessibility with screen readers and other adaptive tools, and provide clear documentation for custom shortcuts and macro systems. With careful attention to these considerations, your keyboard navigation enhancements can significantly improve both productivity and accessibility, creating inclusive editing experiences that benefit all users regardless of their interaction preferences or abilities.\u003C/p>\n",[15,19,22,25,28,31,34],{"id":16,"text":17,"level":18},"why-master-keyboard-navigation-for-tables","Why Master Keyboard Navigation for Tables?",2,{"id":20,"text":21,"level":18},"foundation-keyboard-navigation-principles","Foundation Keyboard Navigation Principles",{"id":23,"text":24,"level":18},"platform-specific-navigation-patterns","Platform-Specific Navigation Patterns",{"id":26,"text":27,"level":18},"accessibility-first-navigation-design","Accessibility-First Navigation Design",{"id":29,"text":30,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":32,"text":33,"level":18},"productivity-enhancement-techniques","Productivity Enhancement Techniques",{"id":35,"text":36,"level":18},"conclusion","Conclusion",[],[39,47,55],{"slug":40,"title":41,"description":42,"excerpt":43,"date":44,"category":9,"author":10,"keywords":45,"readingMinutes":46},"markdown-keyboard-shortcuts-productivity-complete-guide","Markdown Keyboard Shortcuts for Productivity: Complete Guide for Efficient Writing and Editing","Master essential Markdown keyboard shortcuts to boost writing productivity. Learn platform-specific shortcuts, custom key bindings, and workflow optimization techniques for faster content creation and editing.","Mastering Markdown keyboard shortcuts transforms content creation workflows from tedious manual formatting into efficient, streamlined writing experiences that maximize productivity and minimize…","2025-11-29","markdown keyboard shortcuts, markdown productivity shortcuts, markdown editor shortcuts, writing productivity markdown, markdown hotkeys, fast markdown editing, keyboard shortcuts writing",21,{"slug":48,"title":49,"description":50,"excerpt":51,"date":52,"category":9,"author":10,"keywords":53,"readingMinutes":54},"markdown-keyboard-shortcuts-complete-guide","Markdown Keyboard Shortcuts: Complete Guide for Efficient Technical Writing","Master keyboard shortcuts and efficiency techniques for writing Markdown faster. Learn editor-specific shortcuts, workflow optimizations, and productivity tips for technical documentation and content creation.","Keyboard shortcuts and efficiency techniques in Markdown writing transform slow, mouse-dependent documentation workflows into lightning-fast content creation processes that boost productivity and…","2025-09-09","markdown keyboard shortcuts, markdown efficiency tips, markdown productivity, technical writing shortcuts, markdown workflow, fast markdown writing, markdown editor shortcuts",13,{"slug":56,"title":57,"description":58,"excerpt":59,"date":60,"category":9,"author":10,"keywords":61,"readingMinutes":62},"markdown-keyboard-shortcuts-and-hotkeys-guide","Markdown Keyboard Shortcuts and Hotkeys: Complete Editor Guide","Master Markdown editing with keyboard shortcuts for popular editors including VS Code, Typora, Obsidian, and GitHub. Boost your productivity with essential hotkeys and custom shortcuts.","Keyboard shortcuts are essential for efficient Markdown editing, allowing you to format text, navigate documents, and perform common tasks without interrupting your writing flow. Different editors…","2025-08-17","markdown keyboard shortcuts, markdown hotkeys, markdown editor shortcuts, vs code markdown shortcuts, typora shortcuts, obsidian hotkeys, markdown productivity",9,1792184944911]