Add some handy markdown editor features (#32400)

There were some missing features from EasyMDE:

1. H1 - H3 style
2. Auto add task list
3. Insert a table

And added some tests

web_src/js/features/comp/ComboMarkdownEditor.ts

@@ -15,8 +15,14 @@ import {easyMDEToolbarActions} from './EasyMDEToolbarActions.ts';
 import {initTextExpander} from './TextExpander.ts';
 import {showErrorToast} from '../../modules/toast.ts';
 import {POST} from '../../modules/fetch.ts';
-import {EventEditorContentChanged, initTextareaMarkdown, triggerEditorContentChanged} from './EditorMarkdown.ts';
+import {
+  EventEditorContentChanged,
+  initTextareaMarkdown,
+  textareaInsertText,
+  triggerEditorContentChanged,
+} from './EditorMarkdown.ts';
 import {DropzoneCustomEventReloadFiles, initDropzone} from '../dropzone.ts';
+import {createTippy} from '../../modules/tippy.ts';
 
 let elementIdCounter = 0;
 
@@ -122,8 +128,7 @@ export class ComboMarkdownEditor {
     const monospaceText = monospaceButton.getAttribute(monospaceEnabled ? 'data-disable-text' : 'data-enable-text');
     monospaceButton.setAttribute('data-tooltip-content', monospaceText);
     monospaceButton.setAttribute('aria-checked', String(monospaceEnabled));
-
-    monospaceButton?.addEventListener('click', (e) => {
+    monospaceButton.addEventListener('click', (e) => {
       e.preventDefault();
       const enabled = localStorage?.getItem('markdown-editor-monospace') !== 'true';
       localStorage.setItem('markdown-editor-monospace', String(enabled));
@@ -134,12 +139,14 @@ export class ComboMarkdownEditor {
     });
 
     const easymdeButton = this.container.querySelector('.markdown-switch-easymde');
-    easymdeButton?.addEventListener('click', async (e) => {
+    easymdeButton.addEventListener('click', async (e) => {
       e.preventDefault();
       this.userPreferredEditor = 'easymde';
       await this.switchToEasyMDE();
     });
 
+    this.initMarkdownButtonTableAdd();
+
     initTextareaMarkdown(this.textarea);
     initTextareaEvents(this.textarea, this.dropzone);
   }
@@ -219,6 +226,42 @@ export class ComboMarkdownEditor {
     });
   }
 
+  generateMarkdownTable(rows: number, cols: number): string {
+    const tableLines = [];
+    tableLines.push(
+      `| ${'Header '.repeat(cols).trim().split(' ').join(' | ')} |`,
+      `| ${'--- '.repeat(cols).trim().split(' ').join(' | ')} |`,
+    );
+    for (let i = 0; i < rows; i++) {
+      tableLines.push(`| ${'Cell '.repeat(cols).trim().split(' ').join(' | ')} |`);
+    }
+    return tableLines.join('\n');
+  }
+
+  initMarkdownButtonTableAdd() {
+    const addTableButton = this.container.querySelector('.markdown-button-table-add');
+    const addTablePanel = this.container.querySelector('.markdown-add-table-panel');
+    // here the tippy can't attach to the button because the button already owns a tippy for tooltip
+    const addTablePanelTippy = createTippy(addTablePanel, {
+      content: addTablePanel,
+      trigger: 'manual',
+      placement: 'bottom',
+      hideOnClick: true,
+      interactive: true,
+      getReferenceClientRect: () => addTableButton.getBoundingClientRect(),
+    });
+    addTableButton.addEventListener('click', () => addTablePanelTippy.show());
+
+    addTablePanel.querySelector('.ui.button.primary').addEventListener('click', () => {
+      let rows = parseInt(addTablePanel.querySelector<HTMLInputElement>('[name=rows]').value);
+      let cols = parseInt(addTablePanel.querySelector<HTMLInputElement>('[name=cols]').value);
+      rows = Math.max(1, Math.min(100, rows));
+      cols = Math.max(1, Math.min(100, cols));
+      textareaInsertText(this.textarea, `\n${this.generateMarkdownTable(rows, cols)}\n\n`);
+      addTablePanelTippy.hide();
+    });
+  }
+
   switchTabToEditor() {
     this.tabEditor.click();
   }