contentScript.js

(function () {
  const DEFAULTS = {
    convertOnPaste: false,
    autoFormat: true,
    gfm: true,
    theme: 'default',
    shortcut: 'Ctrl+Shift+M',
    codeShortcut: 'Ctrl+E',
    disableDefault: false
  };

  const SELECTOR = 'div[aria-label="Message Body"][contenteditable="true"]';

  const BLOCKQUOTE_INLINE_STYLE = 'border-left:4px solid #ccc;padding-left:24px !important;color:#555;margin:0.5em 0;background:none;';
  const PRE_WRAPPER_STYLE = 'background-color:#f7f6f3;border-radius:3px;padding:12px 16px;margin:1em 0;overflow-x:auto;max-width:100%;';
  const PRE_CODE_STYLE = 'font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:0.85em;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;color:#333;margin:0;padding:0;display:block;';
  const INLINE_CODE_STYLE = 'background-color:#f2f2f2;color:#d73a49;padding:2px 4px;border-radius:3px;font-family:monospace;';
  const CALLOUT_INLINE_STYLE = 'display:inline-block;max-width:100%;box-sizing:border-box;background-color:#f2f2f2;padding:10px 14px;border-radius:4px;margin:8px 0;overflow-wrap:anywhere;word-break:break-word;';
  const TABLE_INLINE_STYLE = 'border-collapse:collapse;border-spacing:0;margin:0.5em 0;max-width:100%;';
  const TABLE_CELL_INLINE_STYLE = 'border:1px solid #ccc;padding:6px 10px;text-align:left;min-width:80px;overflow-wrap:anywhere;word-break:break-word;';
  const TABLE_HEADER_INLINE_STYLE = `${TABLE_CELL_INLINE_STYLE}background-color:#f8f9fa;font-weight:bold;`;

  const SLASH_COMMANDS = [
    { id: 'quote', label: 'Quote', description: 'Insert a quoted block', aliases: ['blockquote'] },
    { id: 'note', label: 'Note', description: 'Insert a gray callout for important information', aliases: ['callout'] },
    { id: 'h1', label: 'H1', description: 'Insert a large heading', aliases: ['title', 'heading1'] },
    { id: 'h2', label: 'H2', description: 'Insert a section heading', aliases: ['heading', 'heading2'] },
    { id: 'h3', label: 'H3', description: 'Insert a smaller heading', aliases: ['subheading', 'heading3'] },
    { id: 'bullets', label: 'Bulleted list', description: 'Insert a bullet list', aliases: ['bullet', 'unordered', 'ul'] },
    { id: 'numbered', label: 'Numbered list', description: 'Insert a numbered list', aliases: ['number', 'ordered', 'ol'] },
    { id: 'code', label: 'Code block', description: 'Insert a multiline code block', aliases: ['codeblock', 'pre'] },
    { id: 'table', label: 'Table', description: 'Insert an editable 2-column table', aliases: ['grid'] },
    { id: 'divider', label: 'Divider', description: 'Insert a horizontal rule', aliases: ['horizontal', 'rule', 'hr'] }
  ];

  let slashMenuState = null;
  let tableToolbarState = null;

  const AUTO_FORMATS = [
    { reg: /(\*\*|__)(.+?)\1$/, cmd: 'bold' },
    { reg: /(\*|_)(.+?)\1$/, cmd: 'italic' },
    { reg: /~~(.+?)~~$/, cmd: 'strikeThrough' },
    { reg: /`(.+?)`$/, cmd: 'code' },
    { reg: /:([a-zA-Z0-9_\+\-]+):$/, cmd: 'emoji' }
  ];

  function getActiveEditable() {
    const active = document.activeElement;
    if (active && active.matches && active.matches(SELECTOR)) return active;

    // Fallback based on text selection
    const sel = window.getSelection();
    if (sel && sel.rangeCount) {
      let node = sel.getRangeAt(0).commonAncestorContainer;
      while (node && node !== document.body) {
        if (node.nodeType === Node.ELEMENT_NODE && node.matches(SELECTOR)) return node;
        node = node.parentNode;
      }
    }

    // Absolute fallback: first editor on page
    return document.querySelector(SELECTOR);
  }

  function convertLinksToReadable(text) {
    return text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '$1 ($2)');
  }

  function escapeHtml(text) {
    return text
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  function isSafeLinkUrl(url) {
    const normalized = String(url || '').trim().replace(/[\u0000-\u0020\u007F]+/g, '');
    const scheme = normalized.match(/^([a-z][a-z0-9+.-]*):/i);
    return !scheme || ['http', 'https', 'mailto'].includes(scheme[1].toLowerCase());
  }

  function createMarkedOptions(markedLib, gfm) {
    const options = { gfm };
    if (!markedLib || typeof markedLib.Renderer !== 'function') return options;

    const renderer = new markedLib.Renderer();
    renderer.html = (html) => {
      const raw = typeof html === 'string' ? html : (html && html.text) || '';
      return escapeHtml(raw);
    };
    renderer.link = function (linkOrHref, title, text) {
      const isToken = linkOrHref && typeof linkOrHref === 'object';
      const href = isToken ? linkOrHref.href : linkOrHref;
      const linkTitle = isToken ? linkOrHref.title : title;
      const label = isToken
        ? (linkOrHref.tokens && this.parser
          ? this.parser.parseInline(linkOrHref.tokens)
          : escapeHtml(linkOrHref.text || href || ''))
        : (text || escapeHtml(href || ''));

      if (!isSafeLinkUrl(href)) return label;

      const titleAttribute = linkTitle ? ` title="${escapeHtml(linkTitle)}"` : '';
      return `<a href="${escapeHtml(href)}"${titleAttribute}>${label}</a>`;
    };
    options.renderer = renderer;
    return options;
  }

  function applyTheme(theme) {
    const id = 'md-theme-style';
    let style = document.getElementById(id);
    if (!style) {
      style = document.createElement('style');
      style.id = id;
      document.documentElement.appendChild(style);
    }
    const sel = 'div[aria-label="Message Body"][contenteditable="true"]';
    const base = `
        ${sel} > div:not([style]), ${sel} > p:not([style]) { margin: 0 !important; padding: 0 !important; }
    `;
    const themes = {
      default: `
        ${sel} h1 { font-size: 1.4em !important; font-weight: bold !important; margin: 0.6em 0 !important; }
        ${sel} h2 { font-size: 1.2em !important; font-weight: bold !important; margin: 0.5em 0 !important; }
        ${sel} h3 { font-size: 1.1em !important; font-weight: bold !important; margin: 0.4em 0 !important; }
        ${sel} table[data-md-table="1"] { border-collapse: collapse !important; border-spacing: 0 !important; margin: 0.5em 0 !important; }
        ${sel} table[data-md-table="1"] th, ${sel} table[data-md-table="1"] td { border: 1px solid #ccc !important; padding: 6px 10px !important; text-align: left !important; }
        ${sel} table[data-md-table="1"] th { background-color: #f8f9fa !important; font-weight: bold !important; }
      `,
      bold: `
        ${sel} h1 { font-size: 1.4em !important; font-weight: bold !important; text-transform: uppercase !important; margin: 0.6em 0 !important; }
        ${sel} h2 { font-size: 1.2em !important; font-weight: bold !important; text-transform: uppercase !important; margin: 0.5em 0 !important; }
        ${sel} h3 { font-size: 1.1em !important; font-weight: bold !important; text-transform: uppercase !important; margin: 0.4em 0 !important; }
        ${sel} table[data-md-table="1"] { border-collapse: collapse !important; border-spacing: 0 !important; margin: 0.5em 0 !important; }
        ${sel} table[data-md-table="1"] th, ${sel} table[data-md-table="1"] td { border: 1px solid #ccc !important; padding: 6px 10px !important; text-align: left !important; }
        ${sel} table[data-md-table="1"] th { background-color: #f8f9fa !important; font-weight: bold !important; text-transform: uppercase !important; }
      `
    };
    // Map 'strong' to 'bold' if user had it saved previously
    let activeTheme = theme === 'strong' ? 'bold' : theme;
    style.textContent = base + (themes[activeTheme] || themes.default);
  }

  function ensureSlashMenuStyles() {
    if (document.getElementById('md-slash-menu-style')) return;

    const style = document.createElement('style');
    style.id = 'md-slash-menu-style';
    style.textContent = `
      [data-md-slash-menu="1"] {
        position: fixed;
        z-index: 2147483647;
        width: 260px;
        max-height: 240px;
        overflow-y: auto;
        padding: 4px;
        background: #fff;
        border: 1px solid #dadce0;
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(60, 64, 67, 0.24);
        box-sizing: border-box;
        font-family: Arial, sans-serif;
      }
      [data-md-slash-command] {
        display: block;
        width: 100%;
        padding: 8px 10px;
        color: #202124;
        background: transparent;
        border: 0;
        border-radius: 5px;
        box-sizing: border-box;
        cursor: pointer;
        text-align: left;
      }
      [data-md-slash-command][aria-selected="true"],
      [data-md-slash-command]:hover {
        background: #e8f0fe;
      }
      [data-md-slash-command][aria-selected="true"] {
        color: #174ea6;
        box-shadow: inset 3px 0 #1a73e8;
      }
      [data-md-slash-command] strong {
        display: block;
        font-size: 14px;
        line-height: 20px;
      }
      [data-md-slash-command] span {
        display: block;
        color: #5f6368;
        font-size: 12px;
        line-height: 18px;
      }
    `;
    document.documentElement.appendChild(style);
  }

  function closeSlashCommandMenu(body) {
    if (!slashMenuState || (body && slashMenuState.body !== body)) return;
    if (slashMenuState.menu.parentNode) {
      slashMenuState.menu.parentNode.removeChild(slashMenuState.menu);
    }
    slashMenuState = null;
  }

  function ensureTableToolbarStyles() {
    if (document.getElementById('md-table-toolbar-style')) return;

    const style = document.createElement('style');
    style.id = 'md-table-toolbar-style';
    style.textContent = `
      [data-md-table-toolbar="1"] {
        position: fixed;
        z-index: 2147483647;
        display: flex;
        gap: 4px;
        padding: 4px;
        background: #fff;
        border: 1px solid #dadce0;
        border-radius: 7px;
        box-shadow: 0 4px 12px rgba(60, 64, 67, 0.24);
        box-sizing: border-box;
        font-family: Arial, sans-serif;
      }
      [data-md-table-action] {
        padding: 5px 8px;
        color: #3c4043;
        background: transparent;
        border: 0;
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        line-height: 18px;
        white-space: nowrap;
      }
      [data-md-table-action]:hover,
      [data-md-table-action]:focus {
        color: #174ea6;
        background: #e8f0fe;
        outline: none;
      }
    `;
    document.documentElement.appendChild(style);
  }

  function closeTableToolbar() {
    if (!tableToolbarState) return;
    if (tableToolbarState.toolbar.parentNode) tableToolbarState.toolbar.remove();
    tableToolbarState = null;
  }

  function positionTableToolbar(state) {
    const tableRect = state.table.getBoundingClientRect();
    const toolbarRect = state.toolbar.getBoundingClientRect();
    const maxLeft = Math.max(8, window.innerWidth - toolbarRect.width - 8);
    const maxTop = Math.max(8, window.innerHeight - toolbarRect.height - 8);
    const above = tableRect.top - toolbarRect.height - 6;
    let left = Math.max(8, Math.min(tableRect.right - toolbarRect.width, maxLeft));
    let top;

    if (above >= 8) {
      top = above;
    } else if (tableRect.right + toolbarRect.width + 6 <= window.innerWidth - 8) {
      left = tableRect.right + 6;
      top = tableRect.top;
    } else if (tableRect.left - toolbarRect.width - 6 >= 8) {
      left = tableRect.left - toolbarRect.width - 6;
      top = tableRect.top;
    } else {
      top = tableRect.bottom + 6;
    }

    state.toolbar.style.left = `${left}px`;
    state.toolbar.style.top = `${Math.max(8, Math.min(top, maxTop))}px`;
  }

  function placeCaretAfterTable(table, editor) {
    let trailingLine = table.nextElementSibling;
    if (!trailingLine || trailingLine.tagName !== 'DIV') {
      trailingLine = document.createElement('div');
      trailingLine.innerHTML = '<br>';
      table.parentNode.insertBefore(trailingLine, table.nextSibling);
    }

    table.remove();
    editor.focus();
    const selection = window.getSelection();
    const range = document.createRange();
    range.setStart(trailingLine, 0);
    range.collapse(true);
    selection.removeAllRanges();
    selection.addRange(range);
  }

  function applySelectedTableAction(action) {
    if (!tableToolbarState) return;

    const { cell, table, editor } = tableToolbarState;
    if (!cell.isConnected || !table.isConnected || !editor.isConnected) {
      closeTableToolbar();
      return;
    }

    const row = cell.parentElement;
    const rowIndex = Array.from(table.rows).indexOf(row);
    const columnIndex = Array.from(row.cells).indexOf(cell);

    if (action === 'add-row') {
      const newRow = document.createElement('tr');
      const columnCount = table.rows[0] ? table.rows[0].cells.length : row.cells.length;
      for (let currentColumnIndex = 0; currentColumnIndex < columnCount; currentColumnIndex += 1) {
        const newCell = document.createElement('td');
        newCell.setAttribute('style', TABLE_CELL_INLINE_STYLE);
        newCell.appendChild(document.createElement('br'));
        newRow.appendChild(newCell);
      }
      row.parentNode.insertBefore(newRow, row.nextSibling);
      placeCaretInTableCell(newRow.cells[Math.min(columnIndex, newRow.cells.length - 1)]);
      updateTableToolbar();
    } else if (action === 'add-column') {
      let targetCell = null;
      Array.from(table.rows).forEach((tableRow, currentRowIndex) => {
        const isHeaderRow = tableRow.cells[0] && tableRow.cells[0].tagName === 'TH';
        const newCell = document.createElement(isHeaderRow ? 'th' : 'td');
        newCell.setAttribute(
          'style',
          isHeaderRow ? TABLE_HEADER_INLINE_STYLE : TABLE_CELL_INLINE_STYLE
        );
        newCell.appendChild(document.createElement('br'));
        const nextCell = tableRow.cells[columnIndex + 1];
        tableRow.insertBefore(newCell, nextCell || null);
        if (currentRowIndex === rowIndex) targetCell = newCell;
      });
      placeCaretInTableCell(targetCell);
      updateTableToolbar();
    } else if (action === 'row') {
      if (table.rows.length <= 1) {
        closeTableToolbar();
        placeCaretAfterTable(table, editor);
      } else {
        row.remove();
        const targetRow = table.rows[Math.min(rowIndex, table.rows.length - 1)];
        placeCaretInTableCell(targetRow.cells[Math.min(columnIndex, targetRow.cells.length - 1)]);
        updateTableToolbar();
      }
    } else if (action === 'column') {
      const columnCount = table.rows[0] ? table.rows[0].cells.length : 0;
      if (columnCount <= 1) {
        closeTableToolbar();
        placeCaretAfterTable(table, editor);
      } else {
        Array.from(table.rows).forEach(tableRow => {
          if (tableRow.cells[columnIndex]) tableRow.deleteCell(columnIndex);
        });
        const targetRow = table.rows[Math.min(rowIndex, table.rows.length - 1)];
        placeCaretInTableCell(targetRow.cells[Math.min(columnIndex, targetRow.cells.length - 1)]);
        updateTableToolbar();
      }
    }

    editor.dispatchEvent(new window.Event('input', { bubbles: true }));
  }

  function updateTableToolbar() {
    const cell = getSelectedTableCell();
    const table = cell && cell.closest('table[data-md-table="1"]');
    const editor = table && table.closest(SELECTOR);
    if (!cell || !table || !editor) {
      closeTableToolbar();
      return;
    }

    ensureTableToolbarStyles();
    let toolbar = tableToolbarState && tableToolbarState.toolbar;
    if (!toolbar) {
      toolbar = document.createElement('div');
      toolbar.setAttribute('data-md-table-toolbar', '1');
      toolbar.setAttribute('role', 'toolbar');
      toolbar.setAttribute('aria-label', 'Table actions');
      toolbar.innerHTML = [
        '<button type="button" data-md-table-action="add-row">Add row</button>',
        '<button type="button" data-md-table-action="add-column">Add column</button>',
        '<button type="button" data-md-table-action="row">Delete row</button>',
        '<button type="button" data-md-table-action="column">Delete column</button>'
      ].join('');
      toolbar.addEventListener('mousedown', event => event.preventDefault());
      toolbar.addEventListener('click', event => {
        const button = event.target.closest('[data-md-table-action]');
        if (button) applySelectedTableAction(button.getAttribute('data-md-table-action'));
      });
      document.body.appendChild(toolbar);
    }

    tableToolbarState = { toolbar, cell, table, editor };
    positionTableToolbar(tableToolbarState);
  }

  function getSlashCommandContext(body) {
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0 || !selection.isCollapsed) return null;

    const caretRange = selection.getRangeAt(0);
    if (!body.contains(caretRange.startContainer)) return null;

    let block = caretRange.startContainer;
    if (block.nodeType === Node.TEXT_NODE) block = block.parentNode;
    while (block && block !== body && block.parentNode !== body) {
      block = block.parentNode;
    }
    if (!block) return null;

    const commandRange = document.createRange();
    if (block === body && caretRange.startContainer.nodeType === Node.TEXT_NODE) {
      commandRange.setStart(caretRange.startContainer, 0);
    } else {
      commandRange.setStart(block, 0);
    }
    commandRange.setEnd(caretRange.startContainer, caretRange.startOffset);

    const prefix = commandRange.toString().replace(/[\u200B\u200C\u200D\uFEFF]/g, '');
    const match = prefix.match(/^\/([a-z0-9-]*)$/i);
    if (!match) return null;

    return {
      body,
      block,
      commandRange: commandRange.cloneRange(),
      caretRange: caretRange.cloneRange(),
      query: match[1].toLowerCase()
    };
  }

  function positionSlashCommandMenu(state) {
    const caretRect = state.context.caretRange.getBoundingClientRect();
    const editorRect = state.body.getBoundingClientRect();
    const left = caretRect.left || editorRect.left || 8;
    const anchorTop = caretRect.top || editorRect.top || 8;
    const anchorBottom = caretRect.bottom || editorRect.top + 24 || 24;
    const maxLeft = Math.max(8, window.innerWidth - state.menu.offsetWidth - 8);
    const below = anchorBottom + 6;
    const above = Math.max(8, anchorTop - state.menu.offsetHeight - 6);
    const top = below + state.menu.offsetHeight <= window.innerHeight - 8 ? below : above;

    state.menu.style.left = `${Math.max(8, Math.min(left, maxLeft))}px`;
    state.menu.style.top = `${Math.max(8, top)}px`;
  }

  function setSlashMenuSelection(index) {
    if (!slashMenuState || slashMenuState.commands.length === 0) return;
    const count = slashMenuState.commands.length;
    slashMenuState.selectedIndex = (index + count) % count;
    const items = slashMenuState.menu.querySelectorAll('[data-md-slash-command]');
    let selectedItem = null;
    items.forEach((item, itemIndex) => {
      const isSelected = itemIndex === slashMenuState.selectedIndex;
      item.setAttribute('aria-selected', itemIndex === slashMenuState.selectedIndex ? 'true' : 'false');
      if (isSelected) selectedItem = item;
    });

    if (!selectedItem) return;
    slashMenuState.menu.setAttribute('aria-activedescendant', selectedItem.id);

    const visibleTop = slashMenuState.menu.scrollTop;
    const visibleBottom = visibleTop + slashMenuState.menu.clientHeight;
    const itemTop = selectedItem.offsetTop;
    const itemBottom = itemTop + selectedItem.offsetHeight;

    if (itemTop < visibleTop) {
      slashMenuState.menu.scrollTop = itemTop;
    } else if (itemBottom > visibleBottom) {
      slashMenuState.menu.scrollTop = itemBottom - slashMenuState.menu.clientHeight;
    }
  }

  function renderSlashCommandMenu(state) {
    state.menu.replaceChildren();

    state.commands.forEach((command, index) => {
      const item = document.createElement('button');
      item.type = 'button';
      item.id = `md-slash-option-${command.id}`;
      item.setAttribute('role', 'option');
      item.setAttribute('data-md-slash-command', command.id);
      item.setAttribute('aria-selected', index === state.selectedIndex ? 'true' : 'false');

      const label = document.createElement('strong');
      label.textContent = command.label;
      const description = document.createElement('span');
      description.textContent = command.description;
      item.append(label, description);
      state.menu.appendChild(item);
    });

    const selectedItem = state.menu.querySelector('[aria-selected="true"]');
    if (selectedItem) {
      state.menu.setAttribute('aria-activedescendant', selectedItem.id);
    }
  }

  function createEmptySlashBlock(tagName) {
    const node = document.createElement(tagName);
    node.appendChild(document.createElement('br'));
    return { node, caretTarget: node, caretOffset: 0 };
  }

  function createSlashCommandBlock(commandId) {
    if (commandId === 'quote') {
      const quote = document.createElement('div');
      quote.setAttribute('style', BLOCKQUOTE_INLINE_STYLE);
      quote.setAttribute('data-md-quote', '1');
      const space = document.createTextNode('\u00A0');
      quote.appendChild(space);
      return { node: quote, caretTarget: space, caretOffset: 1 };
    }

    if (commandId === 'note') {
      const callout = document.createElement('div');
      callout.className = 'md-callout';
      callout.setAttribute('style', CALLOUT_INLINE_STYLE);
      callout.textContent = 'Important info';
      return {
        node: callout,
        caretTarget: callout.firstChild,
        caretOffset: callout.textContent.length
      };
    }

    if (commandId === 'bullets' || commandId === 'numbered') {
      const list = document.createElement(commandId === 'bullets' ? 'ul' : 'ol');
      const item = document.createElement('li');
      item.appendChild(document.createElement('br'));
      list.appendChild(item);
      return { node: list, caretTarget: item, caretOffset: 0 };
    }

    if (commandId === 'code') {
      const wrapper = document.createElement('div');
      wrapper.setAttribute('data-md-code', '1');
      wrapper.setAttribute('style', PRE_WRAPPER_STYLE);
      const pre = document.createElement('pre');
      pre.setAttribute('style', PRE_CODE_STYLE);
      pre.appendChild(document.createElement('br'));
      wrapper.appendChild(pre);
      return { node: wrapper, caretTarget: pre, caretOffset: 0 };
    }

    if (commandId === 'table') {
      const table = document.createElement('table');
      table.setAttribute('data-md-table', '1');
      table.setAttribute('style', TABLE_INLINE_STYLE);
      const body = document.createElement('tbody');
      table.appendChild(body);

      let firstHeader = null;
      for (let rowIndex = 0; rowIndex < 3; rowIndex += 1) {
        const row = document.createElement('tr');
        for (let columnIndex = 0; columnIndex < 2; columnIndex += 1) {
          const cell = document.createElement(rowIndex === 0 ? 'th' : 'td');
          cell.setAttribute(
            'style',
            rowIndex === 0 ? TABLE_HEADER_INLINE_STYLE : TABLE_CELL_INLINE_STYLE
          );
          cell.appendChild(document.createElement('br'));
          if (!firstHeader) firstHeader = cell;
          row.appendChild(cell);
        }
        body.appendChild(row);
      }

      return { node: table, caretTarget: firstHeader, caretOffset: 0 };
    }

    if (commandId === 'divider') {
      return { node: document.createElement('hr'), focusTrailingLine: true };
    }

    return null;
  }

  function applySlashHeadingCommand(commandId, context) {
    closeSlashCommandMenu();

    const range = context.commandRange.cloneRange();
    range.deleteContents();
    range.collapse(true);

    const selection = window.getSelection();
    context.body.focus();
    const marker = document.createElement('span');
    marker.setAttribute('data-md-empty-anchor', '1');
    marker.textContent = '\u200B';
    range.insertNode(marker);

    const markerRange = document.createRange();
    markerRange.setStart(marker.firstChild, marker.textContent.length);
    markerRange.collapse(true);
    selection.removeAllRanges();
    selection.addRange(markerRange);

    document.execCommand('formatBlock', false, commandId.toUpperCase());

    let heading = marker.closest(commandId);
    marker.remove();
    if (heading && !heading.hasChildNodes()) heading.appendChild(document.createElement('br'));

    if (heading && heading !== context.body) {
      const trailingLine = document.createElement('div');
      trailingLine.innerHTML = '<br>';
      heading.parentNode.insertBefore(trailingLine, heading.nextSibling);

      const headingRange = document.createRange();
      headingRange.setStart(heading, 0);
      headingRange.collapse(true);
      selection.removeAllRanges();
      selection.addRange(headingRange);
    }

    context.body.dispatchEvent(new Event('input', { bubbles: true }));
  }

  function applySlashCommand(commandId) {
    if (!slashMenuState) return;

    const state = slashMenuState;
    const context = state.context;
    if (/^h[1-3]$/.test(commandId)) {
      applySlashHeadingCommand(commandId, context);
      return;
    }

    const commandBlock = createSlashCommandBlock(commandId);
    if (!commandBlock || !context.body.contains(context.commandRange.commonAncestorContainer)) {
      closeSlashCommandMenu();
      return;
    }
    const commandNode = commandBlock.node;

    closeSlashCommandMenu();

    const range = context.commandRange.cloneRange();
    range.deleteContents();

    const reusableBlock = context.block !== context.body &&
      context.block.parentNode &&
      context.body.contains(context.block) &&
      context.block.textContent.replace(/[\u200B\u200C\u200D\uFEFF]/g, '').trim() === '';

    if (reusableBlock) {
      context.block.parentNode.replaceChild(commandNode, context.block);
    } else {
      range.insertNode(commandNode);
    }

    const trailingLine = document.createElement('div');
    trailingLine.innerHTML = '<br>';
    commandNode.parentNode.insertBefore(trailingLine, commandNode.nextSibling);

    const selection = window.getSelection();
    const nextRange = document.createRange();
    if (commandBlock.focusTrailingLine) {
      nextRange.setStart(trailingLine, 0);
    } else if (commandBlock.caretTarget) {
      nextRange.setStart(commandBlock.caretTarget, commandBlock.caretOffset || 0);
    } else {
      nextRange.selectNodeContents(commandNode);
      nextRange.collapse(false);
    }
    nextRange.collapse(true);
    context.body.focus();
    selection.removeAllRanges();
    selection.addRange(nextRange);
    context.body.dispatchEvent(new Event('input', { bubbles: true }));
  }

  function updateSlashCommandMenu(body) {
    const context = getSlashCommandContext(body);
    if (!context) {
      closeSlashCommandMenu(body);
      return;
    }

    const commands = SLASH_COMMANDS
      .map((command, originalIndex) => {
        const label = command.label.toLowerCase();
        const aliases = command.aliases || [];
        let score = -1;

        if (context.query === '') score = originalIndex;
        else if (command.id === context.query) score = 0;
        else if (label === context.query) score = 1;
        else if (aliases.includes(context.query)) score = 2;
        else if (command.id.startsWith(context.query)) score = 3;
        else if (label.startsWith(context.query)) score = 4;
        else if (aliases.some(alias => alias.startsWith(context.query))) score = 5;

        return { command, originalIndex, score };
      })
      .filter(result => result.score >= 0)
      .sort((a, b) => a.score - b.score || a.originalIndex - b.originalIndex)
      .map(result => result.command);
    if (commands.length === 0) {
      closeSlashCommandMenu(body);
      return;
    }

    ensureSlashMenuStyles();
    let menu = slashMenuState && slashMenuState.body === body
      ? slashMenuState.menu
      : null;
    if (!menu) {
      closeSlashCommandMenu();
      menu = document.createElement('div');
      menu.setAttribute('data-md-slash-menu', '1');
      menu.setAttribute('role', 'listbox');
      menu.setAttribute('aria-label', 'Markdown commands');
      menu.addEventListener('mousedown', (event) => event.preventDefault());
      menu.addEventListener('click', (event) => {
        const item = event.target.closest('[data-md-slash-command]');
        if (item) applySlashCommand(item.getAttribute('data-md-slash-command'));
      });
      document.body.appendChild(menu);
    }

    slashMenuState = {
      body,
      menu,
      context,
      commands,
      selectedIndex: 0
    };
    renderSlashCommandMenu(slashMenuState);
    positionSlashCommandMenu(slashMenuState);
  }

  function handleSlashCommandKeydown(event, body) {
    if (!slashMenuState || slashMenuState.body !== body) return false;

    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
      event.preventDefault();
      event.stopPropagation();
      const direction = event.key === 'ArrowDown' ? 1 : -1;
      setSlashMenuSelection(slashMenuState.selectedIndex + direction);
      return true;
    }

    if (event.key === 'Enter' || event.key === 'Tab') {
      event.preventDefault();
      event.stopPropagation();
      const selected = slashMenuState.commands[slashMenuState.selectedIndex];
      if (selected) applySlashCommand(selected.id);
      return true;
    }

    if (event.key === 'Escape') {
      event.preventDefault();
      event.stopPropagation();
      closeSlashCommandMenu(body);
      return true;
    }

    return false;
  }

  function deletePrecise(container, offset, count) {
    const sel = window.getSelection();
    if (!sel) return;
    const r = document.createRange();
    const startOffset = Math.max(0, offset - count);
    r.setStart(container, startOffset);
    r.setEnd(container, offset);
    r.deleteContents();

    // Ensure cursor is collapsed at the point of deletion
    r.collapse(true);
    sel.removeAllRanges();
    sel.addRange(r);
  }

  function isCursorAtBlockStart(range, block) {
    try {
      const testRange = document.createRange();
      testRange.setStart(block, 0);
      testRange.setEnd(range.startContainer, range.startOffset);
      return testRange.toString().length === 0;
    } catch (e) {
      return false;
    }
  }

  function hasTextAfterCursorInBlock(range, body) {
    let block = range.startContainer;
    if (block.nodeType === Node.TEXT_NODE) block = block.parentNode;
    while (block && block !== body && !block.matches('div, p, h1, h2, h3, h4, h5, h6, li, blockquote, pre, [data-md-code]')) {
      block = block.parentNode;
    }

    if (!block || block === body) {
      return range.startContainer.nodeType === Node.TEXT_NODE &&
        range.startOffset < range.startContainer.textContent.length;
    }

    try {
      const afterRange = document.createRange();
      afterRange.setStart(range.startContainer, range.startOffset);
      afterRange.setEnd(block, block.childNodes.length);
      return afterRange.toString().length > 0;
    } catch (e) {
      return false;
    }
  }

  function replaceBlockWithDiv(block) {
    const isPreBlock = block.tagName === 'PRE';
    const isCodeWrapper = !!(block.getAttribute && block.getAttribute('data-md-code'));
    const div = document.createElement('div');
    if (isPreBlock || isCodeWrapper) {
      // For code wrappers, unwrap the inner <pre> content
      const source = isCodeWrapper ? (block.querySelector('pre') || block) : block;
      source.querySelectorAll('[style]').forEach(el => el.removeAttribute('style'));
      while (source.firstChild) div.appendChild(source.firstChild);
    } else {
      while (block.firstChild) div.appendChild(block.firstChild);
    }
    if (!div.hasChildNodes()) div.innerHTML = '<br>';
    block.parentNode.replaceChild(div, block);
    const s = window.getSelection();
    if (isPreBlock || isCodeWrapper) {
      const contentRange = document.createRange();
      contentRange.selectNodeContents(div);
      s.removeAllRanges();
      s.addRange(contentRange);
      document.execCommand('removeFormat');
    }
    const newRange = document.createRange();
    newRange.setStart(div, 0);
    newRange.collapse(true);
    s.removeAllRanges();
    s.addRange(newRange);
    div.dispatchEvent(new InputEvent('input', { bubbles: true, cancelable: false }));
  }

  function insertCodeBlock(body) {
    // Outer <div> provides background-color (Gmail strips background-color from <pre>).
    // Inner <pre> handles whitespace preservation and native Enter behaviour.
    const wrapperStyle = PRE_WRAPPER_STYLE;
    const preStyle = PRE_CODE_STYLE;
    const html = `<div data-md-code="1" style="${wrapperStyle}"><pre style="${preStyle}"><br></pre></div><div>\u200B<br></div>`;
    document.execCommand('insertHTML', false, html);

    // Place cursor inside the <pre> block
    const sel = window.getSelection();
    const wrappers = body.querySelectorAll('[data-md-code] pre');
    if (wrappers.length) {
      const pre = wrappers[wrappers.length - 1];
      const newRange = document.createRange();
      newRange.setStart(pre, 0);
      newRange.collapse(true);
      sel.removeAllRanges();
      sel.addRange(newRange);
    }
  }

  function handleCodeBlockMacro(e, container, offset, textBefore, body) {
    e.preventDefault();
    setTimeout(() => {
      const s = window.getSelection();
      if (!s || !s.rangeCount) return;
      const r = s.getRangeAt(0);
      let curCont = r.startContainer;
      let curOff = r.startOffset;

      if (curCont.nodeType !== Node.TEXT_NODE) {
        if (curOff > 0 && curCont.childNodes[curOff - 1] && curCont.childNodes[curOff - 1].nodeType === Node.TEXT_NODE) {
          curCont = curCont.childNodes[curOff - 1];
          curOff = curCont.textContent.length;
        }
      }

      if (curCont.nodeType === Node.TEXT_NODE) {
        const curText = curCont.textContent.slice(0, curOff);
        // Clean out any pending OS/IME string of backticks (like OSX smart composition)
        if (/^[\s\u200B\u200C\u200D\uFEFF]*`+$/.test(curText)) {
          deletePrecise(curCont, curOff, curText.length);
        } else {
          try { deletePrecise(container, offset, textBefore.length); } catch (err) { }
        }
      } else {
        try { deletePrecise(container, offset, textBefore.length); } catch (err) { }
      }
      insertCodeBlock(body);
    }, 10);
  }

  function insertLineAfterHR(body) {
    const hrs = body.querySelectorAll('hr');
    if (!hrs.length) return;
    const hr = hrs[hrs.length - 1];
    const emptyDiv = document.createElement('div');
    emptyDiv.innerHTML = '<br>';
    hr.parentNode.insertBefore(emptyDiv, hr.nextSibling);
    const newRange = document.createRange();
    newRange.setStart(emptyDiv, 0);
    newRange.collapse(true);
    const sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(newRange);
  }

  function splitBlockAtCursor(body) {
    const sel = window.getSelection();
    if (!sel || sel.rangeCount === 0) return;
    const range = sel.getRangeAt(0);
    let block = range.startContainer;
    if (block.nodeType === Node.TEXT_NODE) block = block.parentNode;
    while (block && block !== body && !block.matches('div, p, h1, h2, h3, h4, h5, h6, li, blockquote, pre, [data-md-code]')) {
      block = block.parentNode;
    }
    if (block && block !== body) {
      const testRange = document.createRange();
      testRange.setStart(block, 0);
      testRange.setEnd(range.startContainer, range.startOffset);
      const beforeFragment = testRange.cloneContents();

      if (beforeFragment.querySelector('br') || beforeFragment.textContent.trim().length > 0) {
        const afterRange = document.createRange();
        afterRange.setStart(range.startContainer, range.startOffset);
        afterRange.setEnd(block, block.childNodes.length);
        const afterContent = afterRange.extractContents();

        let lastNode = block.lastChild;
        while (lastNode && lastNode.nodeType === Node.TEXT_NODE && lastNode.textContent === '') {
          const prev = lastNode.previousSibling;
          block.removeChild(lastNode);
          lastNode = prev;
        }
        if (lastNode && lastNode.nodeName === 'BR') {
          block.removeChild(lastNode);
        }

        const newBlock = document.createElement('div');
        newBlock.appendChild(afterContent);
        if (!newBlock.hasChildNodes()) newBlock.innerHTML = '<br>';

        block.parentNode.insertBefore(newBlock, block.nextSibling);

        const newSelRange = document.createRange();
        newSelRange.setStart(newBlock, 0);
        newSelRange.collapse(true);
        sel.removeAllRanges();
        sel.addRange(newSelRange);
      }
    }
  }

  function convertCurrentBlockToList(body, ordered) {
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) return false;

    const range = selection.getRangeAt(0);
    let block = range.startContainer;
    if (block.nodeType === Node.TEXT_NODE) block = block.parentNode;
    while (block && block !== body && !block.matches('div, p')) {
      block = block.parentNode;
    }

    const list = document.createElement(ordered ? 'ol' : 'ul');
    const item = document.createElement('li');
    list.appendChild(item);

    if (block && block !== body) {
      while (block.firstChild) item.appendChild(block.firstChild);
      block.parentNode.replaceChild(list, block);
    } else if (range.startContainer.nodeType === Node.TEXT_NODE &&
      range.startContainer.parentNode === body) {
      const textNode = range.startContainer;
      item.appendChild(textNode.cloneNode(true));
      body.replaceChild(list, textNode);
    } else {
      const referenceNode = body.childNodes[range.startOffset] || null;
      body.insertBefore(list, referenceNode);
    }

    if (!item.hasChildNodes() ||
      (item.childNodes.length === 1 && item.firstChild.nodeType === Node.TEXT_NODE && item.textContent === '')) {
      item.replaceChildren(document.createElement('br'));
    }

    const itemRange = document.createRange();
    if (item.firstChild && item.firstChild.nodeType === Node.TEXT_NODE) {
      itemRange.setStart(item.firstChild, 0);
    } else {
      itemRange.setStart(item, 0);
    }
    itemRange.collapse(true);
    selection.removeAllRanges();
    selection.addRange(itemRange);
    body.dispatchEvent(new window.Event('input', { bubbles: true }));
    return true;
  }

  function anchorEmptyBlockForCommand(body) {
    const sel = window.getSelection();
    if (!sel || sel.rangeCount === 0) return null;

    const range = sel.getRangeAt(0);
    let block = range.startContainer;
    if (block.nodeType === Node.TEXT_NODE) block = block.parentNode;
    while (block && block !== body && !block.matches('div, p, h1, h2, h3, h4, h5, h6, li, blockquote')) {
      block = block.parentNode;
    }
    if (!block || block === body || block.textContent.replace(/\u200B/g, '').length > 0) return null;

    const marker = document.createElement('span');
    marker.setAttribute('data-md-empty-anchor', '1');
    marker.textContent = '\u200B';
    block.replaceChildren(marker);
    const markerRange = document.createRange();
    markerRange.setStart(marker.firstChild, marker.textContent.length);
    markerRange.collapse(true);
    sel.removeAllRanges();
    sel.addRange(markerRange);
    return marker;
  }

  function removeEmptyBlockAnchor(marker, body) {
    const activeMarker = marker && marker.isConnected
      ? marker
      : body.querySelector('[data-md-empty-anchor="1"]');
    if (!activeMarker) return;

    const block = activeMarker.parentNode;
    activeMarker.remove();
    if (!block.hasChildNodes()) block.appendChild(document.createElement('br'));

    const sel = window.getSelection();
    const range = document.createRange();
    range.setStart(block, 0);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  }

  function getEditingBlock(range, body) {
    let block = range.startContainer;
    if (block.nodeType === Node.TEXT_NODE) block = block.parentNode;
    while (block && block !== body && !block.matches('div, p')) block = block.parentNode;
    return block && block !== body ? block : body;
  }

  function getTextBeforeCaret(range, block) {
    try {
      const prefixRange = document.createRange();
      prefixRange.setStart(block, 0);
      prefixRange.setEnd(range.startContainer, range.startOffset);
      return prefixRange.toString().replace(/[\u200B\u200C\u200D\uFEFF]/g, '');
    } catch (error) {
      return '';
    }
  }

  function trackTypedBlockPrefix(event, body) {
    if (event.key === ' ') return;
    if (event.ctrlKey || event.metaKey || event.altKey || event.key.length !== 1) {
      body._mdTypedBlockPrefix = null;
      return;
    }

    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0 || !selection.isCollapsed) {
      body._mdTypedBlockPrefix = null;
      return;
    }

    const range = selection.getRangeAt(0);
    if (!body.contains(range.startContainer)) {
      body._mdTypedBlockPrefix = null;
      return;
    }

    const block = getEditingBlock(range, body);
    const prospectivePrefix = getTextBeforeCaret(range, block) + event.key;
    if (/^(?:#{1,3}|\*|-|>|\d+\.?)$/.test(prospectivePrefix)) {
      body._mdTypedBlockPrefix = { block, prefix: prospectivePrefix };
    } else {
      body._mdTypedBlockPrefix = null;
    }
  }

  function wasBlockPrefixTyped(body, range, prefix) {
    const tracked = body._mdTypedBlockPrefix;
    return !!tracked && tracked.block === getEditingBlock(range, body) && tracked.prefix === prefix;
  }

  function applyAutoFormat(e, body) {
    if (e.key !== ' ' && e.key !== 'Enter' && e.key !== 'Backspace') return;

    // Handle Backspace: remove block formatting when at the start of a formatted block
    if (e.key === 'Backspace') {
      const sel = window.getSelection();
      if (!sel.rangeCount) return;
      const range = sel.getRangeAt(0);
      if (!body.contains(range.startContainer)) return;

      let node = range.startContainer;

      // Find the closest block element first
      let block = node.nodeType === Node.TEXT_NODE ? node.parentNode : node;
      while (block && block !== body && !block.matches('h1, h2, h3, h4, h5, h6, blockquote, li, pre, [data-md-quote], [data-md-code]')) {
        block = block.parentNode;
      }

      if (!block || block === body) {
        // Chrome sometimes reports cursor at body[0] instead of inside the first child
        if (node === body && range.startOffset === 0) {
          const firstChild = body.childNodes[0];
          if (firstChild && firstChild.nodeType === Node.ELEMENT_NODE &&
            firstChild.matches('h1, h2, h3, h4, h5, h6, blockquote, pre, [data-md-quote], [data-md-code]')) {
            e.preventDefault();
            replaceBlockWithDiv(firstChild);
          }
        }
        return;
      }

      if (!isCursorAtBlockStart(range, block)) return;

      const tag = block.tagName;

      if (/^H[1-6]$/.test(tag)) {
        e.preventDefault();
        replaceBlockWithDiv(block);
      } else if (tag === 'BLOCKQUOTE' || block.getAttribute('data-md-quote')) {
        e.preventDefault();
        replaceBlockWithDiv(block);
      } else if (tag === 'PRE' || block.getAttribute('data-md-code')) {
        e.preventDefault();
        replaceBlockWithDiv(block);
      } else if (tag === 'LI') {
        const list = block.closest('ul, ol');
        if (list) {
          e.preventDefault();
          if (list.tagName === 'UL') {
            document.execCommand('insertUnorderedList', false, null);
          } else {
            document.execCommand('insertOrderedList', false, null);
          }
        }
      }
      return;
    }

    const sel = window.getSelection();
    if (!sel.rangeCount) return;
    const range = sel.getRangeAt(0);
    if (!body.contains(range.startContainer)) return;

    let container = range.startContainer;
    let offset = range.startOffset;

    if (container.nodeType !== Node.TEXT_NODE) {
      if (container.childNodes[offset - 1] && container.childNodes[offset - 1].nodeType === Node.TEXT_NODE) {
        container = container.childNodes[offset - 1];
        offset = container.textContent.length;
      } else {
        return;
      }
    }

    const text = container.textContent;
    const textBefore = text.slice(0, offset);

    if (e.key === ' ') {
      const trimmedPrefix = textBefore.trim();
      const isStartOfLine = (textBefore.trimStart() === textBefore);
      const hasTextAfterCursor = hasTextAfterCursorInBlock(range, body);
      const isUnorderedListPrefix = trimmedPrefix === '*' || trimmedPrefix === '-';
      const isTypedBlockPrefix = wasBlockPrefixTyped(body, range, trimmedPrefix);

      // Handle --- + space as horizontal rule
      if (!hasTextAfterCursor && trimmedPrefix === '---') {
        e.preventDefault();
        deletePrecise(container, offset, textBefore.length);
        document.execCommand('insertHorizontalRule');
        insertLineAfterHR(body);
        return;
      }

      if (!hasTextAfterCursor && /^[\s\u200B\u200C\u200D\uFEFF]*`{3}$/.test(textBefore)) {
        handleCodeBlockMacro(e, container, offset, textBefore, body);
        return;
      }

      if (isStartOfLine &&
        (!hasTextAfterCursor || isUnorderedListPrefix || isTypedBlockPrefix) &&
        trimmedPrefix.length > 0) {
        let command = null;
        let arg = null;
        let prefixLen = 0;

        if (trimmedPrefix === '#') { command = 'formatBlock'; arg = 'H1'; prefixLen = 1; }
        else if (trimmedPrefix === '##') { command = 'formatBlock'; arg = 'H2'; prefixLen = 2; }
        else if (trimmedPrefix === '###') { command = 'formatBlock'; arg = 'H3'; prefixLen = 3; }
        else if (trimmedPrefix === '*' || trimmedPrefix === '-') { command = 'insertUnorderedList'; prefixLen = 1; }
        else if (/^\d+\.$/.test(trimmedPrefix)) { command = 'insertOrderedList'; prefixLen = trimmedPrefix.length; }
        else if (trimmedPrefix === '>') { command = 'insertQuoteDiv'; prefixLen = 1; }

        if (command === 'insertQuoteDiv') {
          body._mdTypedBlockPrefix = null;
          e.preventDefault();
          deletePrecise(container, offset, prefixLen);
          splitBlockAtCursor(body);
          const emptyBlockAnchor = anchorEmptyBlockForCommand(body);
          // Use formatBlock to wrap the current line in a blockquote, then immediately
          // replace it with a styled <div>. This avoids Gmail's email renderer stripping
          // styles from <blockquote> elements.
          document.execCommand('formatBlock', false, 'blockquote');
          removeEmptyBlockAnchor(emptyBlockAnchor, body);
          const currentSel = window.getSelection();
          if (currentSel.rangeCount) {
            let bq = currentSel.getRangeAt(0).startContainer;
            if (bq.nodeType === Node.TEXT_NODE) bq = bq.parentNode;
            while (bq && bq !== body && bq.tagName !== 'BLOCKQUOTE') bq = bq.parentNode;
            if (bq && bq.tagName === 'BLOCKQUOTE') {
              const quoteDiv = document.createElement('div');
              quoteDiv.setAttribute('style', BLOCKQUOTE_INLINE_STYLE);
              quoteDiv.setAttribute('data-md-quote', '1');

              // Automatically inject a physical space so the user doesn't have to manually.
              const spaceNode = document.createTextNode('\u00A0');
              quoteDiv.appendChild(spaceNode);

              while (bq.firstChild) quoteDiv.appendChild(bq.firstChild);
              bq.parentNode.replaceChild(quoteDiv, bq);
              const emptyDiv = document.createElement('div');
              emptyDiv.innerHTML = '<br>';
              quoteDiv.parentNode.insertBefore(emptyDiv, quoteDiv.nextSibling);
              const newRange = document.createRange();

              // Set cursor immediately after the injected space
              newRange.setStart(spaceNode, 1);
              newRange.collapse(true);
              currentSel.removeAllRanges();
              currentSel.addRange(newRange);
            }
          }
          return;
        } else if (command) {
          body._mdTypedBlockPrefix = null;
          e.preventDefault();
          deletePrecise(container, offset, prefixLen);
          if (command === 'insertUnorderedList' || command === 'insertOrderedList') {
            convertCurrentBlockToList(body, command === 'insertOrderedList');
            return;
          }
          if (command === 'formatBlock') {
            splitBlockAtCursor(body);
          }
          const emptyBlockAnchor = anchorEmptyBlockForCommand(body);
          document.execCommand(command, false, arg);
          removeEmptyBlockAnchor(emptyBlockAnchor, body);
          // Add an empty line after the formatted block
          if (command === 'formatBlock') {
            // Move cursor to end of current content, then insert a paragraph after
            const currentSel = window.getSelection();
            if (currentSel.rangeCount) {
              const currentRange = currentSel.getRangeAt(0);
              let blockEl = currentRange.startContainer;
              if (blockEl.nodeType === Node.TEXT_NODE) blockEl = blockEl.parentNode;
              while (blockEl && blockEl !== body && !blockEl.matches('h1, h2, h3, h4, h5, h6')) {
                blockEl = blockEl.parentNode;
              }
              if (blockEl && blockEl !== body) {
                const emptyDiv = document.createElement('div');
                emptyDiv.innerHTML = '<br>';
                blockEl.parentNode.insertBefore(emptyDiv, blockEl.nextSibling);
              }
            }
          }
          return;
        }
      }

      if (!hasTextAfterCursor) {
        for (const f of AUTO_FORMATS) {
          const match = textBefore.match(f.reg);
          if (match) {
            const fullMatch = match[0];
            const content = match[2] || match[1] || fullMatch.replace(/^(\*\*|__|~~|\*|_|`)|(\*\*|__|~~|\*|_|`)$/g, '');

            let emojiStr = null;
            if (f.cmd === 'emoji') {
              const emojiMap = window.EMOJI_MAP || (typeof EMOJI_MAP !== 'undefined' ? EMOJI_MAP : {});
              emojiStr = emojiMap[content] || emojiMap[content.toLowerCase()];
              if (!emojiStr) continue; // Not a registered emoji, ignore
            }

            e.preventDefault();
            deletePrecise(container, offset, fullMatch.length);

            if (f.cmd === 'code') {
              const html = `<code style="${INLINE_CODE_STYLE}">${escapeHtml(content)}</code>`;
              document.execCommand('insertHTML', false, html);
              // Explicitly place cursor outside the <code> element so the browser
              // doesn't carry forward monospace/padding styles into subsequent text.
              const codeSel = window.getSelection();
              if (codeSel.rangeCount) {
                let cur = codeSel.getRangeAt(0).startContainer;
                if (cur.nodeType === Node.TEXT_NODE) cur = cur.parentNode;
                while (cur && cur !== body && cur.tagName !== 'CODE') cur = cur.parentNode;
                if (cur && cur.tagName === 'CODE') {
                  const space = document.createTextNode('\u00A0');
                  cur.parentNode.insertBefore(space, cur.nextSibling);
                  const r = document.createRange();
                  r.setStartAfter(space);
                  r.collapse(true);
                  codeSel.removeAllRanges();
                  codeSel.addRange(r);
                } else {
                  document.execCommand('insertText', false, '\u00A0');
                }
              }
            } else if (f.cmd === 'emoji') {
              document.execCommand('insertText', false, emojiStr + '\u00A0');
            } else {
              let style = '';
              if (f.cmd === 'bold') style = 'font-weight:bold;';
              else if (f.cmd === 'italic') style = 'font-style:italic;';
              else if (f.cmd === 'strikeThrough') style = 'text-decoration:line-through;';

              const html = `<span style="${style}">${escapeHtml(content)}</span>\u00A0`;
              document.execCommand('insertHTML', false, html);
            }
            return;
          }
        }
      }
    }

    if (e.key === 'Enter') {
      const hasTextAfterCursor = hasTextAfterCursorInBlock(range, body);

      if (!hasTextAfterCursor && textBefore.trim() === '---') {
        e.preventDefault();
        deletePrecise(container, offset, textBefore.length);
        document.execCommand('insertHorizontalRule');
        insertLineAfterHR(body);
        return;
      }

      if (!hasTextAfterCursor && /^[\s\u200B\u200C\u200D\uFEFF]*`{3}$/.test(textBefore)) {
        handleCodeBlockMacro(e, container, offset, textBefore, body);
        return;
      }

      // Exit code block when Enter is pressed on an empty line inside <pre>
      let preEl = container.parentNode;
      while (preEl && preEl !== body && preEl.tagName !== 'PRE') {
        preEl = preEl.parentNode;
      }
      if (preEl && preEl !== body && preEl.tagName === 'PRE') {
        const lastNl = textBefore.lastIndexOf('\n');
        const currentLine = lastNl >= 0 ? textBefore.slice(lastNl + 1) : textBefore;
        if (currentLine === '') {
          e.preventDefault();
          if (container.nodeType === Node.TEXT_NODE && container.textContent.endsWith('\n')) {
            container.textContent = container.textContent.slice(0, -1);
          }
          // If pre is inside a code wrapper div, exit the wrapper instead
          const exitTarget = (preEl.parentElement && preEl.parentElement.getAttribute('data-md-code'))
            ? preEl.parentElement : preEl;
          let afterEl = exitTarget.nextSibling;
          if (!afterEl || afterEl.tagName !== 'DIV') {
            afterEl = document.createElement('div');
            afterEl.innerHTML = '\u200B<br>';
            exitTarget.parentNode.insertBefore(afterEl, exitTarget.nextSibling);
          } else if (afterEl.innerHTML === '<br>') {
            afterEl.innerHTML = '\u200B<br>';
          }
          const exitRange = document.createRange();
          if (afterEl.firstChild && afterEl.firstChild.nodeType === Node.TEXT_NODE) {
            exitRange.setStart(afterEl.firstChild, afterEl.firstChild.textContent.length);
          } else {
            exitRange.setStart(afterEl, 0);
          }
          exitRange.collapse(true);
          const exitSel = window.getSelection();
          exitSel.removeAllRanges();
          exitSel.addRange(exitRange);
          return;
        }
      }
    }
  }

  function attachShortcutListener(body, opts) {
    applyTheme(opts.theme);
    if (body._mdShortcutsAttached) return;
    body._mdShortcutsAttached = true;
    body.addEventListener('keydown', (e) => {
      if (handleSlashCommandKeydown(e, body)) return;

      if (opts.autoFormat) {
        trackTypedBlockPrefix(e, body);
        applyAutoFormat(e, body);
      }

      // Code shortcut (default Ctrl+E): wrap/unwrap selected text in inline code
      if (opts.codeShortcut && matchesShortcut(e, opts.codeShortcut)) {
        const sel = window.getSelection();
        if (sel && sel.rangeCount && !sel.isCollapsed && body.contains(sel.getRangeAt(0).commonAncestorContainer)) {
          e.preventDefault();
          const range = sel.getRangeAt(0);

          // Toggle off: if selection is inside an existing <code>, unwrap it
          let ancestor = range.commonAncestorContainer;
          if (ancestor.nodeType === Node.TEXT_NODE) ancestor = ancestor.parentElement;
          let codeEl = ancestor;
          while (codeEl && codeEl !== body) {
            if (codeEl.tagName === 'CODE') break;
            codeEl = codeEl.parentElement;
          }
          if (codeEl && codeEl.tagName === 'CODE') {
            const text = document.createTextNode(codeEl.textContent);
            codeEl.parentNode.replaceChild(text, codeEl);
          } else {
            const selectedText = sel.toString();
            // Build the <code> element manually so we can place the cursor
            // *after* it in a clean text node, preventing style leaking.
            range.deleteContents();
            const codeNode = document.createElement('code');
            codeNode.setAttribute('style', INLINE_CODE_STYLE);
            codeNode.textContent = selectedText;
            range.insertNode(codeNode);
            // Insert a zero-width space after <code> to break style inheritance
            const breaker = document.createTextNode('\u200B');
            if (codeNode.nextSibling) {
              codeNode.parentNode.insertBefore(breaker, codeNode.nextSibling);
            } else {
              codeNode.parentNode.appendChild(breaker);
            }
            // Place cursor after the breaker so typing starts unstyled
            const newRange = document.createRange();
            newRange.setStartAfter(breaker);
            newRange.collapse(true);
            sel.removeAllRanges();
            sel.addRange(newRange);
          }
          return;
        }
      }

      if (e.key !== ' ' && e.key !== 'Enter') return;
      const sel = window.getSelection();
      if (!sel.rangeCount) return;
      const range = sel.getRangeAt(0);
      let container = range.startContainer;
      let offset = range.startOffset;

      if (container.nodeType !== Node.TEXT_NODE) {
        if (container.childNodes[offset - 1] && container.childNodes[offset - 1].nodeType === Node.TEXT_NODE) {
          container = container.childNodes[offset - 1];
          offset = container.textContent.length;
        } else {
          return;
        }
      }

      const text = container.textContent;
      if (text.slice(offset - 5, offset) === '/note' &&
        !hasTextAfterCursorInBlock(range, body)) {
        e.preventDefault();
        closeSlashCommandMenu(body);
        deletePrecise(container, offset, 5);
        const html = `<div class="md-callout" style="${CALLOUT_INLINE_STYLE}">Important info</div>`;
        document.execCommand('insertHTML', false, html);
      }
    });
    body.addEventListener('input', () => updateSlashCommandMenu(body));
    body.addEventListener('keyup', (event) => {
      if (['ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) {
        updateSlashCommandMenu(body);
      }
      updateTableToolbar();
    });
    body.addEventListener('mouseup', () => {
      updateSlashCommandMenu(body);
      updateTableToolbar();
    });
    body.addEventListener('blur', () => {
      window.setTimeout(() => {
        closeSlashCommandMenu(body);
        if (tableToolbarState && tableToolbarState.editor === body) closeTableToolbar();
      }, 0);
    }, true);
  }

  function matchesShortcut(e, combo) {
    const parts = combo.toLowerCase().split('+');
    const key = parts.pop();
    const ctrl = parts.includes('ctrl');
    const shift = parts.includes('shift');
    const alt = parts.includes('alt');
    const meta = parts.includes('meta') || parts.includes('cmd');
    return e.key.toLowerCase() === key &&
      e.ctrlKey === ctrl &&
      e.shiftKey === shift &&
      e.altKey === alt &&
      e.metaKey === meta;
  }

  function getSelectedListItem() {
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) return null;

    let node = selection.getRangeAt(0).startContainer;
    if (node.nodeType === Node.TEXT_NODE) node = node.parentNode;
    return node.closest ? node.closest('li') : null;
  }

  function indentListItem(listItem) {
    const list = listItem.parentElement;
    if (!list || !list.matches('ul, ol')) return false;

    const previousItem = listItem.previousElementSibling;
    if (!previousItem || previousItem.tagName !== 'LI') return true;

    let nestedList = Array.from(previousItem.children)
      .find(child => child.tagName === list.tagName);
    if (!nestedList) {
      nestedList = document.createElement(list.tagName.toLowerCase());
      previousItem.appendChild(nestedList);
    }

    nestedList.appendChild(listItem);
    return true;
  }

  function outdentListItem(listItem) {
    const list = listItem.parentElement;
    if (!list || !list.matches('ul, ol')) return false;

    const parentItem = list.parentElement;
    if (!parentItem || parentItem.tagName !== 'LI') return true;

    const outerList = parentItem.parentElement;
    if (!outerList || !outerList.matches('ul, ol')) return true;

    outerList.insertBefore(listItem, parentItem.nextSibling);
    if (!list.querySelector(':scope > li')) list.remove();
    return true;
  }

  function handleListTab(event) {
    if (event.key !== 'Tab') return false;

    const listItem = getSelectedListItem();
    const editor = listItem && listItem.closest(SELECTOR);
    if (!listItem || !editor) return false;

    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();

    if (event.shiftKey) outdentListItem(listItem);
    else indentListItem(listItem);

    editor.dispatchEvent(new window.Event('input', { bubbles: true }));
    return true;
  }

  function getSelectedTableCell() {
    const selection = window.getSelection();
    if (!selection || selection.rangeCount === 0) return null;

    let node = selection.getRangeAt(0).startContainer;
    if (node.nodeType === Node.TEXT_NODE) node = node.parentNode;
    return node.closest ? node.closest('th, td') : null;
  }

  function placeCaretInTableCell(cell) {
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(cell);
    range.collapse(false);
    selection.removeAllRanges();
    selection.addRange(range);
  }

  function handleTableTab(event) {
    if (event.key !== 'Tab') return false;

    const cell = getSelectedTableCell();
    const table = cell && cell.closest('table[data-md-table="1"]');
    const editor = table && table.closest(SELECTOR);
    if (!cell || !table || !editor) return false;

    const cells = Array.from(table.querySelectorAll('th, td'));
    const currentIndex = cells.indexOf(cell);
    if (currentIndex < 0) return false;

    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();

    let targetCell = event.shiftKey ? cells[currentIndex - 1] : cells[currentIndex + 1];
    if (!targetCell && !event.shiftKey) {
      const columnCount = table.rows[0] ? table.rows[0].cells.length : 2;
      const row = document.createElement('tr');
      for (let columnIndex = 0; columnIndex < columnCount; columnIndex += 1) {
        const newCell = document.createElement('td');
        newCell.setAttribute('style', TABLE_CELL_INLINE_STYLE);
        newCell.appendChild(document.createElement('br'));
        row.appendChild(newCell);
      }
      (table.tBodies[0] || table).appendChild(row);
      targetCell = row.cells[0];
      editor.dispatchEvent(new window.Event('input', { bubbles: true }));
    }

    if (targetCell) placeCaretInTableCell(targetCell);
    return true;
  }

  function attachPasteListener(body, opts) {
    if (body._mdPasteAttached) return;
    body._mdPasteAttached = true;
    body.addEventListener('paste', (e) => {
      const text = e.clipboardData.getData('text/plain');
      if (!text) return;
      e.preventDefault();
      e.stopImmediatePropagation();
      if (opts.convertOnPaste) {
        // Because convertMarkdown takes priority, we must trigger it
        convertMarkdown(opts, text);
      } else {
        // Insert as plain text wrapped in <div> elements to match Gmail's native structure.
        // Using <br> instead would corrupt Gmail's contenteditable state, causing it to
        // switch from <div> to <p> elements for subsequent lines (which have margin spacing).
        const lines = text.split(/\r\n|\r|\n/);
        if (lines.length === 1) {
          // Single line: insert inline to avoid block-level duplication quirks
          document.execCommand('insertText', false, text);
        } else {
          // Multi-line: wrap in <div> to match Gmail's native structure
          const html = lines.map(line => `<div>${line ? escapeHtml(line) : '<br>'}</div>`).join('');
          document.execCommand('insertHTML', false, html);
        }
      }
    }, true);
  }



  function setupCentralObserver(opts) {
    function scanAndAttach() {
      if (slashMenuState && !slashMenuState.body.isConnected) {
        closeSlashCommandMenu();
      }
      if (tableToolbarState && !tableToolbarState.editor.isConnected) {
        closeTableToolbar();
      }
      const editors = document.querySelectorAll(SELECTOR);
      editors.forEach(body => {
        attachShortcutListener(body, opts);
        attachPasteListener(body, opts);
      });
    }

    scanAndAttach();

    const observer = new MutationObserver(() => scanAndAttach());
    observer.observe(document.body, { childList: true, subtree: true });
  }

  function replaceEmojis(text) {
    if (typeof window.replaceEmojis === 'function') return window.replaceEmojis(text);
    return text;
  }

  // Convert Marked's block-level paragraph tags to <br> line breaks
  // so spacing matches Gmail's native contenteditable behavior
  function gmailifyHtml(html) {
    return html
      .replace(/<table(\s[^>]*)?>/gi, (match, attributes = '') => {
        if (/data-md-table\s*=/.test(attributes)) return match;
        return `<table data-md-table="1"${attributes}>`;
      })
      // Replace <blockquote> with a styled <div> — Gmail's renderer strips styles from
      // <blockquote> elements, so a plain div with inline styles is more reliable.
      .replace(/<blockquote[^>]*>/gi, `<div style="${BLOCKQUOTE_INLINE_STYLE}">`)
      .replace(/<\/blockquote>/gi, '</div>')
      // Wrap <pre> blocks in a styled <div> to preserve background color and formatting
      .replace(/<pre[^>]*><code[^>]*>([\s\S]*?)<\/code><\/pre>/gi, `<div style="${PRE_WRAPPER_STYLE}"><pre style="${PRE_CODE_STYLE}">$1</pre></div>`)
      // Apply inline styles to standalone <code> tags
      .replace(/<code[^>]*>([\s\S]*?)<\/code>/gi, `<code style="${INLINE_CODE_STYLE}">$1</code>`)
      .replace(/<p>([\s\S]*?)<\/p>/g, '<div>$1</div>')
      .replace(/(<br>)+$/, ''); // strip trailing <br>
  }

  function convertMarkdown(opts, markdownText) {
    applyTheme(opts.theme);
    const emailBody = getActiveEditable();
    const markedLib = window.marked || (typeof marked !== 'undefined' ? marked : null);
    if (!emailBody || !markedLib || typeof markedLib.parse !== 'function') {
      console.warn('[gmail-md] Marked library not ready');
      return;
    }

    const selection = window.getSelection();
    const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;

    const process = (text) => {
      const withEmojis = replaceEmojis(text);
      return convertLinksToReadable(withEmojis);
    };
    const markedOpts = createMarkedOptions(markedLib, opts.gfm);

    if (markdownText !== undefined) {
      const html = gmailifyHtml(markedLib.parse(process(markdownText), markedOpts));
      document.execCommand('insertHTML', false, html);
      return;
    }

    if (range && emailBody.contains(range.commonAncestorContainer) && selection.toString().trim()) {
      const html = gmailifyHtml(markedLib.parse(process(selection.toString()), markedOpts));
      document.execCommand('insertHTML', false, html);
    } else {
      const html = gmailifyHtml(markedLib.parse(process(emailBody.innerText), markedOpts));
      emailBody.innerHTML = html;
    }
    emailBody.dispatchEvent(new Event('input', { bubbles: true }));
  }

  if (typeof chrome !== 'undefined' && chrome.storage && chrome.storage.sync) {
    chrome.storage.sync.get(DEFAULTS, (opts) => {
      applyTheme(opts.theme);
      setupCentralObserver(opts);

      document.addEventListener('keydown', (e) => {
        if (opts.shortcut && matchesShortcut(e, opts.shortcut)) {
          e.preventDefault();
          convertMarkdown(opts);
        }
      });

      // Capture Tab early before Gmail's focus navigation can intercept it 
      window.addEventListener('keydown', (e) => {
        if (handleTableTab(e)) {
          updateTableToolbar();
        } else {
          handleListTab(e);
        }
      }, true); // useCapture: true is critical here

      document.addEventListener('selectionchange', updateTableToolbar);
      window.addEventListener('resize', () => {
        if (tableToolbarState) positionTableToolbar(tableToolbarState);
      });
      window.addEventListener('scroll', () => {
        if (tableToolbarState) positionTableToolbar(tableToolbarState);
      }, true);
    });
  }

  if (typeof module !== 'undefined') {
    module.exports = {
      convertLinksToReadable,
      matchesShortcut,
      applyTheme,
      convertMarkdown,
      setupCentralObserver,
      gmailifyHtml
    };
  }
})();