autumnnote 1.5.0 → 1.6.0

package/src/js/i18n/vi.js

@@ -293,6 +293,8 @@ export const vi = {
       rowHeight:          'Chiều cao hàng',
       tableBorderWidth:   'Độ rộng viền bảng',
       deleteTable:        'Xóa bảng',
+      cellBackground:     'Màu Nền Ô',
+      noShading:          'Xóa Màu Nền',
       columnWidthPx:      'Chiều rộng cột (px)',
       rowHeightPx:        'Chiều cao hàng (px)',
       tableBorderWidthPx: 'Độ rộng viền bảng (px)',

package/src/js/index.js

@@ -9,6 +9,7 @@
  *   const editor = AutumnNote.create('#my-editor');
  */
 
+// @ts-ignore
 import '../styles/autumnnote.scss';
 import { Context, _customModules, _globalPlugins } from './Context.js';
 import { registerButton } from './module/Buttons.js';
@@ -49,7 +50,7 @@ const AutumnNote = {
     const elements = resolveElements(selector);
     const ctxs = elements.map((el) => {
       if (instances.has(el)) return instances.get(el);
-      const ctx = new Context(el, options);
+      const ctx = new Context(/** @type {HTMLElement} */ (el), options);
       ctx.initialize();
       instances.set(el, ctx);
       return ctx;
@@ -159,7 +160,7 @@ function resolveElements(selector) {
     return [selector];
   }
   if (selector instanceof NodeList || Array.isArray(selector)) {
-    return Array.from(selector);
+    return /** @type {Element[]} */ (Array.from(selector));
   }
   return [];
 }

package/src/js/module/BubbleToolbar.js

@@ -53,7 +53,7 @@ const _ACTIONS = {
     if (sel && sel.rangeCount > 0 && !sel.getRangeAt(0).collapsed) {
       const range = sel.getRangeAt(0);
       const ancestor = range.commonAncestorContainer;
-      const root = ancestor.nodeType === 1 ? ancestor : ancestor.parentElement;
+      const root = /** @type {Element|null} */ (ancestor.nodeType === 1 ? ancestor : ancestor.parentElement);
       if (root) {
         const candidates = [root, ...root.querySelectorAll('[style]')];
         for (const el of candidates) {
@@ -115,7 +115,9 @@ export class BubbleToolbar {
     const d6 = this.context.on('contextMenu:hide', () => {
       this._contextMenuOpen = false;
     });
-    this._disposers.push(d1, d2, d3, d4, d5, d6);
+    const d7 = on(window, 'scroll', () => this._hide(), { passive: true });
+    const d8 = on(window, 'resize', () => this._hide(), { passive: true });
+    this._disposers.push(d1, d2, d3, d4, d5, d6, d7, d8);
     return this;
   }
 
@@ -249,9 +251,10 @@ export class BubbleToolbar {
     document.body.appendChild(picker);
 
     this._picker = picker;
-    this._picker._paletteEl = palette;
-    this._picker._noColorBtn = noColorBtn;
-    this._picker._colorInput = colorInput;
+    const pickerAny = /** @type {any} */ (picker);
+    pickerAny._paletteEl = palette;
+    pickerAny._noColorBtn = noColorBtn;
+    pickerAny._colorInput = colorInput;
   }
 
   _openColorPicker(type, anchorBtn) {
@@ -264,8 +267,9 @@ export class BubbleToolbar {
     this._pickerType = type;
 
     // Toggle "No highlight" swatch based on type
-    const palette = this._picker._paletteEl;
-    const noColorBtn = this._picker._noColorBtn;
+    const pickerAny = /** @type {any} */ (this._picker);
+    const palette = pickerAny._paletteEl;
+    const noColorBtn = pickerAny._noColorBtn;
     if (type === 'hiliteColor') {
       if (!palette.contains(noColorBtn)) palette.appendChild(noColorBtn);
     } else {
@@ -273,7 +277,7 @@ export class BubbleToolbar {
     }
 
     // Seed the custom color input
-    this._picker._colorInput.value = type === 'foreColor' ? '#000000' : '#ffff00';
+    /** @type {any} */ (this._picker)._colorInput.value = type === 'foreColor' ? '#000000' : '#ffff00';
 
     // Position the picker above the bubble toolbar (not blocking the content below it).
     // Fall back to below the toolbar if there's not enough room above.
@@ -320,7 +324,7 @@ export class BubbleToolbar {
     const name = type === 'hiliteColor' ? 'hiliteColor' : 'foreColor';
     const btn = this._el && this._el.querySelector(`[data-name="${name}"]`);
     const strip = btn && btn.querySelector('.an-bubble-color-strip');
-    if (strip) strip.style.background = color === 'transparent' ? 'transparent' : color;
+    if (strip) /** @type {HTMLElement} */ (strip).style.background = color === 'transparent' ? 'transparent' : color;
 
     this._closeColorPicker();
     this._syncActive();
@@ -352,6 +356,19 @@ export class BubbleToolbar {
       top = rect.bottom + gap;
     }
 
+    // If the Table Tooltip is visible, avoid overlapping it by flipping below the selection.
+    // The Table Tooltip sits above the table, which is the same vertical zone the bubble
+    // toolbar would normally occupy when text is selected inside a table cell.
+    const tableTooltipEl = document.querySelector('.an-table-tooltip');
+    if (tableTooltipEl && /** @type {HTMLElement} */ (tableTooltipEl).style.display !== 'none') {
+      const ttRect = tableTooltipEl.getBoundingClientRect();
+      const overlapsVertically = top < ttRect.bottom + gap && top + bh > ttRect.top - gap;
+      if (overlapsVertically) {
+        top = rect.bottom + gap;
+        if (top + bh > window.innerHeight - 8) top = ttRect.bottom + gap;
+      }
+    }
+
     el.style.top = `${top}px`;
     el.style.left = `${left}px`;
     el.style.visibility = '';
@@ -371,7 +388,7 @@ export class BubbleToolbar {
   _syncActive() {
     if (!this._btnCache) return;
     this._btnCache.forEach((btn) => {
-      const activeFn = _ACTIVE[btn.dataset.name];
+      const activeFn = _ACTIVE[/** @type {HTMLElement} */ (btn).dataset.name];
       btn.classList.toggle('an-active', !!(activeFn && activeFn()));
     });
   }
@@ -384,17 +401,17 @@ export class BubbleToolbar {
     let node = sel.getRangeAt(0).startContainer;
     if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
     if (!node) return;
-    const cs = window.getComputedStyle(node);
+    const cs = window.getComputedStyle(/** @type {Element} */ (node));
 
     const foreBtn = this._el.querySelector('[data-name="foreColor"]');
     const foreStrip = foreBtn && foreBtn.querySelector('.an-bubble-color-strip');
-    if (foreStrip) foreStrip.style.background = cs.color || '#000000';
+    if (foreStrip) /** @type {HTMLElement} */ (foreStrip).style.background = cs.color || '#000000';
 
     const hiliteBtn = this._el.querySelector('[data-name="hiliteColor"]');
     const hiliteStrip = hiliteBtn && hiliteBtn.querySelector('.an-bubble-color-strip');
     if (hiliteStrip) {
       const bg = cs.backgroundColor;
-      hiliteStrip.style.background = (!bg || bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') ? 'transparent' : bg;
+      /** @type {HTMLElement} */ (hiliteStrip).style.background = (!bg || bg === 'rgba(0, 0, 0, 0)' || bg === 'transparent') ? 'transparent' : bg;
     }
   }
 

package/src/js/module/Buttons.js

@@ -12,12 +12,14 @@ import * as Style from '../editing/Style.js';
 
 /**
  * @typedef {object} DropdownDef
- * @property {string}   name       - unique identifier
- * @property {'select'} type       - discriminator for Toolbar renderer
+ * @property {string}   name          - unique identifier
+ * @property {'select'} type          - discriminator for Toolbar renderer
  * @property {string}   tooltip
- * @property {string[]} [items]    - overridden at render time from options
- * @property {Function} action     - called with (context, value)
- * @property {Function} [getValue] - called with (context) to get current value
+ * @property {Array<string|{value:string,label:string,disabled?:boolean}>} [items] - overridden at render time from options
+ * @property {Function} action        - called with (context, value)
+ * @property {Function} [getValue]    - called with (context) to get current value
+ * @property {string}   [selectClass] - extra CSS class(es) for the <select>
+ * @property {string}   [placeholder] - placeholder text for the empty option
  */
 
 // ---------------------------------------------------------------------------
@@ -103,7 +105,7 @@ export const underlineBtn = btn('underline', 'underline', 'Underline (Ctrl+U)',
   if (!sel || !sel.rangeCount) return false;
   let sc = sel.getRangeAt(0).startContainer;
   if (sc.nodeType === 3) sc = sc.parentElement;
-  return !!(sc && sc.closest && sc.closest('u'));
+  return !!(sc && /** @type {Element} */ (sc).closest('u'));
 });
 export const strikeBtn = btn('strikethrough', 'strikethrough', 'Strikethrough', () => Style.strikethrough(), () => document.queryCommandState('strikeThrough'));
 export const superscriptBtn = btn('superscript', 'superscript', 'Superscript', () => Style.superscript(), () => document.queryCommandState('superscript'));
@@ -179,10 +181,10 @@ export const fontSizeBtn = {
     try {
       const sel = window.getSelection();
       if (sel && sel.rangeCount) {
-        let el = sel.getRangeAt(0).startContainer;
-        if (el.nodeType === 3) el = el.parentElement;
-        while (el && el.nodeType === 1 && !el.style.fontSize) el = el.parentElement;
-        const size = (el && el.style && el.style.fontSize) ? el.style.fontSize : '';
+        let el = /** @type {Element|null} */ (sel.getRangeAt(0).startContainer);
+        if (el && el.nodeType === 3) el = el.parentElement;
+        while (el && el.nodeType === 1 && !/** @type {HTMLElement} */ (el).style.fontSize) el = el.parentElement;
+        const size = (el && /** @type {HTMLElement} */ (el).style.fontSize) ? /** @type {HTMLElement} */ (el).style.fontSize : '';
         if (size) return size;
       }
       // Fallback: read the base font size from the editable element itself
@@ -281,11 +283,11 @@ export const lineHeightBtn = {
       const sel = window.getSelection();
       if (!sel || !sel.rangeCount) return '';
       const BLOCKS = new Set(['P','DIV','H1','H2','H3','H4','H5','H6','LI','BLOCKQUOTE','PRE','TD','TH']);
-      let el = sel.getRangeAt(0).startContainer;
-      if (el.nodeType === 3) el = el.parentElement;
-      while (el && !BLOCKS.has(el.tagName)) el = el.parentElement;
+      let el = /** @type {Element|null} */ (sel.getRangeAt(0).startContainer);
+      if (el && el.nodeType === 3) el = el.parentElement;
+      while (el && !BLOCKS.has(/** @type {Element} */ (el).tagName)) el = el.parentElement;
       if (!el) return '';
-      return el.style.lineHeight || getComputedStyle(el).lineHeight || '';
+      return /** @type {HTMLElement} */ (el).style.lineHeight || getComputedStyle(/** @type {Element} */ (el)).lineHeight || '';
     } catch { return ''; }
   },
 };

package/src/js/module/Clipboard.js

@@ -65,11 +65,11 @@ export class Clipboard {
    */
   _revokeRemovedBlobs(node) {
     if (!this._blobRegistry || !this._blobRegistry.size) return;
-    const imgs = [];
+    const imgs = /** @type {Element[]} */ ([]);
     if (node.nodeName === 'IMG') {
-      imgs.push(node);
-    } else if (node.querySelectorAll) {
-      imgs.push(...node.querySelectorAll('img'));
+      imgs.push(/** @type {Element} */ (node));
+    } else if (/** @type {Element} */ (node).querySelectorAll) {
+      imgs.push(.../** @type {Element} */ (node).querySelectorAll('img'));
     }
     imgs.forEach((img) => {
       const src = img.getAttribute('src') || '';
@@ -180,7 +180,7 @@ export class Clipboard {
   }
 
   _onPaste(event) {
-    const clipboardData = event.clipboardData || window.clipboardData;
+    const clipboardData = event.clipboardData || /** @type {any} */ (window).clipboardData;
     if (!clipboardData) return;
 
     // Consume and reset the one-shot plain-paste flag

package/src/js/module/CodeTooltip.js

@@ -40,21 +40,22 @@ export class CodeTooltip {
     this._disposers.push(
       on(editable, 'mouseover', (e) => {
         if (this.context.layoutInfo.container.classList.contains('an-disabled')) return;
-        const pre = e.target.closest('pre');
+        const pre = /** @type {Element} */ (e.target)?.closest('pre');
         if (pre && editable.contains(pre)) {
           this._scheduleShow(pre);
         }
       }),
       on(editable, 'mouseout', (e) => {
-        const to = e.relatedTarget;
+        const to = /** @type {Node|null} */ (/** @type {MouseEvent} */ (e).relatedTarget);
         if (!to || (!editable.contains(to) && !this._el.contains(to))) {
           this._scheduleHide();
         }
       }),
       on(document, 'click', (e) => {
+        const et = /** @type {Node} */ (e.target);
         if (this._activePre &&
-          !this._activePre.contains(e.target) &&
-          !this._el.contains(e.target)) {
+          !this._activePre.contains(et) &&
+          !this._el.contains(et)) {
           this._hide();
         }
       }),
@@ -92,15 +93,15 @@ export class CodeTooltip {
     el.appendChild(this._sep());
 
     // Language selector
-    this._langSelect = createElement('select', {
+    this._langSelect = /** @type {HTMLSelectElement} */ (createElement('select', {
       class: 'an-code-lang-select',
       title: L.syntaxLanguage,
       'aria-label': L.syntaxAriaLabel,
-    });
+    }));
     const LANGUAGES = [
       ['', 'Plain text'], ['javascript', 'JavaScript'], ['typescript', 'TypeScript'],
-      ['python', 'Python'], ['html', 'HTML'], ['css', 'CSS'], ['json', 'JSON'],
-      ['xml', 'XML'], ['bash', 'Bash / Shell'], ['sql', 'SQL'],
+      ['python', 'Python'], ['html', 'HTML'], ['css', 'CSS'], ['scss', 'SCSS'],
+      ['json', 'JSON'], ['xml', 'XML'], ['bash', 'Bash / Shell'], ['sql', 'SQL'],
       ['java', 'Java'], ['csharp', 'C#'], ['php', 'PHP'], ['ruby', 'Ruby'],
       ['go', 'Go'], ['rust', 'Rust'], ['cpp', 'C++'], ['c', 'C'],
       ['kotlin', 'Kotlin'], ['swift', 'Swift'],
@@ -300,10 +301,33 @@ export class CodeTooltip {
     this._positionNear(pre);
   }
 
+  /**
+   * Applies a language to a given <pre> element: sets classes, data-language,
+   * and triggers Prism highlighting. Called by the auto-detect flow.
+   * @param {HTMLElement} pre
+   * @param {string} lang - Prism language identifier, e.g. 'javascript'
+   */
+  applyLanguage(pre, lang) {
+    if (!pre || !lang) return;
+    // Temporarily set activePre so _onLangChange can target it
+    const savedPre    = this._activePre;
+    const savedSelect = this._langSelect ? this._langSelect.value : '';
+    this._activePre = pre;
+    if (this._langSelect) this._langSelect.value = lang;
+    this._onLangChange();
+    // Update the select to reflect the detected language when tooltip is shown
+    if (this._langSelect) this._langSelect.value = lang;
+    this._activePre = savedPre || pre;
+    // Don't restore savedPre if it was null — keep `pre` as activePre so that
+    // the tooltip select is correct the first time the user hovers over it.
+    void savedSelect;
+  }
+
   _onLangChange() {
     const pre = this._activePre;
     if (!pre) return;
     const lang = this._langSelect.value;
+    const _w = /** @type {any} */ (window);
 
     // Ensure a <code> child exists (Prism targets <pre><code class="language-xxx">)
     let codeEl = pre.querySelector('code');
@@ -328,14 +352,14 @@ export class CodeTooltip {
     // which drops <br> entirely, collapsing all lines into one. Convert first.
     const applyPrism = () => {
       codeEl.querySelectorAll('br').forEach((br) => br.replaceWith('\n'));
-      window.Prism.highlightElement(codeEl);
+      _w.Prism.highlightElement(codeEl);
       this.context.invoke('editor.afterCommand');
     };
 
     if (lang) {
-      if (typeof window.Prism !== 'undefined') {
+      if (typeof _w.Prism !== 'undefined') {
         // Grammar already loaded — highlight immediately
-        if (window.Prism.languages[lang]) {
+        if (_w.Prism.languages[lang]) {
           applyPrism();
           return;
         }
@@ -345,7 +369,7 @@ export class CodeTooltip {
       } else if (this._prismScript) {
         // Prism core is still loading — highlight once it arrives, then load grammar if needed
         this._prismScript.addEventListener('load', () => {
-          if (window.Prism.languages[lang]) {
+          if (_w.Prism.languages[lang]) {
             applyPrism();
           } else {
             this._loadPrismComponent(lang, applyPrism);
@@ -363,7 +387,8 @@ export class CodeTooltip {
    * Called once at initialize time. Fire-and-forget; errors are silent.
    */
   _ensurePrism() {
-    if (!this.context.options.codeHighlight || window.Prism) return;
+    const _w = /** @type {any} */ (window);
+    if (!this.context.options.codeHighlight || _w.Prism) return;
     const cdn = this.context.options.codeHighlightCDN;
     const themeHref = `${cdn}/themes/prism-tomorrow.min.css`;
     const scriptSrc = `${cdn}/prism.min.js`;
@@ -377,7 +402,7 @@ export class CodeTooltip {
 
     const existingScript = document.querySelector(`script[src="${scriptSrc}"]`);
     if (existingScript) {
-      this._prismScript = window.Prism ? null : existingScript;
+      this._prismScript = _w.Prism ? null : existingScript;
       return;
     }
 
@@ -397,13 +422,14 @@ export class CodeTooltip {
    * @param {Function} cb  – called once the grammar is ready
    */
   _loadPrismComponent(lang, cb) {
+    const _w = /** @type {any} */ (window);
     const cdn = this.context.options.codeHighlightCDN;
     const src = `${cdn}/components/prism-${lang}.min.js`;
     // Avoid loading the same component twice
     if (document.querySelector(`script[src="${src}"]`)) {
       // Already in DOM — might still be loading; poll briefly then call cb
       const poll = setInterval(() => {
-        if (window.Prism && window.Prism.languages[lang]) {
+        if (_w.Prism && _w.Prism.languages[lang]) {
           clearInterval(poll);
           cb();
         }
@@ -413,7 +439,7 @@ export class CodeTooltip {
     }
     const s = document.createElement('script');
     s.src = src;
-    s.addEventListener('load', cb, { once: true });
+    s.addEventListener('load', /** @type {EventListener} */ (cb), { once: true });
     document.head.appendChild(s);
   }
 

package/src/js/module/Codeview.js

@@ -53,13 +53,13 @@ export class Codeview {
     const { editable } = this.context.layoutInfo;
     const html = editable.innerHTML;
 
-    this._textarea = createElement('textarea', {
+    this._textarea = /** @type {HTMLTextAreaElement} */ (createElement('textarea', {
       class: 'an-codeview',
       spellcheck: 'false',
       autocomplete: 'off',
       autocorrect: 'off',
       autocapitalize: 'off',
-    });
+    }));
     this._textarea.value = this._prettyPrint(html);
 
     editable.style.display = 'none';

package/src/js/module/ContextMenu.js

@@ -137,16 +137,16 @@ export class ContextMenu {
     }
 
     this._disposers.push(on(document, 'click', (e) => this._maybeHide(e)));
-    this._disposers.push(on(document, 'keydown', (e) => { if (e.key === 'Escape') this.hide(); }));
+    this._disposers.push(on(document, 'keydown', (e) => { if (/** @type {KeyboardEvent} */ (e).key === 'Escape') this.hide(); }));
     this._disposers.push(on(window, 'scroll', () => this.hide(), { passive: true }));
 
     return this;
   }
 
   destroy() {
-    this._menuDisposers.forEach((d) => { try { d(); } catch (e) {} });
+    this._menuDisposers.forEach((d) => { try { d(); } catch (_e) {} });
     this._menuDisposers = [];
-    this._disposers.forEach((d) => { try { d(); } catch (e) {} });
+    this._disposers.forEach((d) => { try { d(); } catch (_e) {} });
     this._disposers = [];
     if (this.el && this.el.parentNode) this.el.parentNode.removeChild(this.el);
     this.el = null;
@@ -253,12 +253,12 @@ export class ContextMenu {
 
         // Custom color row
         const customRow = createElement('div', { class: 'an-context-color-custom' });
-        const colorInput = createElement('input', {
+        const colorInput = /** @type {HTMLInputElement} */ (createElement('input', {
           type: 'color',
           value: it.colorType === 'foreColor' ? '#000000' : '#ffff00',
           title: this.context.locale.contextMenu.customColor || 'Custom color',
           'aria-label': this.context.locale.contextMenu.customColor || 'Custom color',
-        });
+        }));
         const customLabel = createElement('span', {}, [this.context.locale.contextMenu.customColorLabel || 'Custom…']);
         const offCustom = on(colorInput, 'change', () => this._applyColor(it.colorType, colorInput.value));
         this._menuDisposers.push(offCustom);
@@ -324,13 +324,13 @@ export class ContextMenu {
         this._menuDisposers.push(offHeader);
 
         const offMove = on(gridEl, 'mousemove', (e) => {
-          const cell = e.target.closest('[data-row]');
+          const cell = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('[data-row]'));
           if (!cell) return;
           setHighlight(+cell.dataset.row, +cell.dataset.col);
         });
         const offLeave = on(gridEl, 'mouseleave', () => setHighlight(0, 0));
         const offClick = on(gridEl, 'click', (e) => {
-          const cell = e.target.closest('[data-row]');
+          const cell = /** @type {HTMLElement} */ (/** @type {Element} */ (e.target)?.closest('[data-row]'));
           if (!cell) return;
           const rows = +cell.dataset.row;
           const cols = +cell.dataset.col;
@@ -354,7 +354,7 @@ export class ContextMenu {
 
       // Regular item
       const btn = createElement('button', { type: 'button', class: 'an-context-item', 'data-name': it.name || '' });
-      if (typeof it.disabled === 'function' ? it.disabled(this.context) : !!it.disabled) btn.disabled = true;
+      if (typeof it.disabled === 'function' ? it.disabled(this.context) : !!it.disabled) /** @type {HTMLButtonElement} */ (btn).disabled = true;
       if (it.icon) {
         const iconSpan = createElement('span', { class: 'an-context-icon', 'aria-hidden': 'true' });
         iconSpan.innerHTML = it.icon;
@@ -386,7 +386,7 @@ export class ContextMenu {
     // Only apply when there is a real (non-collapsed) selection — a collapsed range
     // (cursor only) also has height > 0, which would misplace the menu relative
     // to the actual click point.
-    let openX = event.clientX;
+    const openX = event.clientX;
     let openY = event.clientY;
     if (this._savedRange && !this._savedRange.collapsed) {
       try {
@@ -454,7 +454,7 @@ export class ContextMenu {
     let node = range.startContainer;
     if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
     if (!node) return type === 'foreColor' ? '#000000' : 'transparent';
-    const cs = window.getComputedStyle(node);
+    const cs = window.getComputedStyle(/** @type {Element} */ (node));
     if (type === 'foreColor') {
       return cs.color || '#000000';
     }
@@ -488,7 +488,7 @@ export class ContextMenu {
     if (!node || !editable || !editable.contains(node)) return;
 
     // Walk up to collect explicitly-set inline properties from the nearest styled ancestor
-    const cs = window.getComputedStyle(node);
+    const cs = window.getComputedStyle(/** @type {Element} */ (node));
 
     // Detect if an explicit font-family / font-size is set on an element (not just inherited)
     const explicitFontFamily = this._findExplicitStyle(node, editable, 'fontFamily');
@@ -609,7 +609,7 @@ export class ContextMenu {
     let el;
     while ((el = iter.nextNode())) {
       if (!editable.contains(el) || el === editable) continue;
-      try { if (range.intersectsNode(el)) el.removeAttribute('style'); } catch { /* ignore */ }
+      try { if (range.intersectsNode(el)) /** @type {Element} */ (el).removeAttribute('style'); } catch { /* ignore */ }
     }
 
     this.context.invoke('editor.afterCommand');

package/src/js/module/Editor.js

@@ -12,6 +12,7 @@ import { handleKeydown } from '../editing/Typing.js';
 import { on } from '../core/dom.js';
 import { sanitiseHTML, sanitiseUrl } from '../core/sanitise.js';
 import { markdownToHTML, htmlToMarkdown } from '../core/markdown.js';
+import { detectLang } from '../core/detectLang.js';
 
 export class Editor {
   /**
@@ -93,7 +94,8 @@ export class Editor {
       // Only act when cursor is at the <li> element node itself (not inside
       // a text node — the browser already placed it correctly in that case).
       if (sc.nodeType !== Node.ELEMENT_NODE) return;
-      const li = sc.matches && sc.matches('.an-checklist li') ? sc : null;
+      const scEl = /** @type {Element} */ (sc);
+      const li = scEl.matches('.an-checklist li') ? scEl : null;
       if (!li) return;
       const cb = li.querySelector('input[type="checkbox"]');
       if (!cb) return;
@@ -160,9 +162,9 @@ export class Editor {
       // the mouse and moving outside the wrapper before releasing.
       on(editable, 'dragstart', (e) => {
         if (isReadOnly()) { e.preventDefault(); return; }
-        const target = e.target;
+        const target = /** @type {Element} */ (e.target);
         if (target && (target.nodeName === 'IFRAME' ||
-            (target.closest && target.closest('.an-video-wrapper')))) {
+            target.closest('.an-video-wrapper'))) {
           e.preventDefault();
         }
       }),
@@ -182,9 +184,10 @@ export class Editor {
       if (!sel || !sel.rangeCount) { _compositionSupSub = null; return; }
       let node = sel.getRangeAt(0).startContainer;
       if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
-      if (node && node.closest) {
-        if (node.closest('sup')) _compositionSupSub = 'superscript';
-        else if (node.closest('sub')) _compositionSupSub = 'subscript';
+      if (node) {
+        const el = /** @type {Element} */ (node);
+        if (el.closest('sup')) _compositionSupSub = 'superscript';
+        else if (el.closest('sub')) _compositionSupSub = 'subscript';
         else _compositionSupSub = null;
       }
     };
@@ -196,8 +199,9 @@ export class Editor {
       if (!sel || !sel.rangeCount) return;
       let node = sel.getRangeAt(0).startContainer;
       if (node.nodeType === Node.TEXT_NODE) node = node.parentElement;
-      const inContext = node && node.closest &&
-        (tag === 'superscript' ? node.closest('sup') : node.closest('sub'));
+      const el = /** @type {Element} */ (node);
+      const inContext = el &&
+        (tag === 'superscript' ? el.closest('sup') : el.closest('sub'));
       if (!inContext) {
         // The composed character escaped the sup/sub — re-apply the format.
         document.execCommand(tag);
@@ -314,6 +318,9 @@ export class Editor {
     // C4: Remove figure.an-figure elements whose <img> has been deleted so
     // orphaned figcaptions do not accumulate in the DOM.
     this._cleanOrphanedFigures();
+    // Ensure the editable always ends with a paragraph so the user can click
+    // and type after block elements that trap the cursor (pre, table, etc.).
+    this._ensureTrailingParagraph();
     // Immediate: keep toolbar and statusbar in sync on every mutation.
     this.context.invoke('toolbar.refresh');
     this.context.invoke('statusbar.update');
@@ -351,6 +358,25 @@ export class Editor {
     });
   }
 
+  /**
+   * Ensures the editable always ends with a plain paragraph so the cursor can
+   * be placed after block elements that do not naturally allow it
+   * (pre, blockquote, table, figure, ul, ol, hr).
+   * Without this, clicking below the last such element does nothing.
+   */
+  _ensureTrailingParagraph() {
+    const editable = this.context.layoutInfo.editable;
+    if (!editable) return;
+    const last = editable.lastElementChild;
+    if (!last) return;
+    const TRAPPING = new Set(['PRE', 'BLOCKQUOTE', 'TABLE', 'FIGURE', 'UL', 'OL', 'HR']);
+    if (TRAPPING.has(last.nodeName)) {
+      const p = document.createElement('p');
+      p.innerHTML = '<br>';
+      editable.appendChild(p);
+    }
+  }
+
   // ---------------------------------------------------------------------------
   // Focus management
   // ---------------------------------------------------------------------------
@@ -523,9 +549,35 @@ export class Editor {
   print()           { this.context.print(); }
 
   /**
-   * @param {string} tagName - e.g. 'h1', 'p', 'blockquote'
+   * @param {string} tagName - e.g. 'h1', 'p', 'blockquote', 'pre'
    */
-  formatBlock(tagName) { Style.formatBlock(tagName); this.afterCommand(); }
+  formatBlock(tagName) {
+    Style.formatBlock(tagName);
+
+    // Auto-detect the programming language when the user formats a code block.
+    // Only runs when converting TO <pre> and the block has no language yet.
+    if (tagName === 'pre') {
+      const sel = window.getSelection();
+      if (sel && sel.rangeCount > 0) {
+        const container = sel.getRangeAt(0).commonAncestorContainer;
+        const pre = /** @type {Element|null} */ (
+          container.nodeType === 1
+            ? /** @type {Element} */ (container).closest('pre')
+            : (/** @type {Element|null} */ (container.parentElement))?.closest('pre')
+        );
+        if (pre && !pre.getAttribute('data-language')) {
+          const code = pre.textContent || '';
+          const lang = detectLang(code);
+          if (lang) {
+            this.context.invoke('codeTooltip.applyLanguage', pre, lang);
+            return; // applyLanguage already calls afterCommand internally
+          }
+        }
+      }
+    }
+
+    this.afterCommand();
+  }
 
   /**
    * @param {string} color
@@ -580,8 +632,8 @@ export class Editor {
       if (openInNewTab) {
         const link = this._getClosestAnchor();
         if (link) {
-          link.setAttribute('target', '_blank');
-          link.setAttribute('rel', 'noopener noreferrer');
+          /** @type {Element} */ (link).setAttribute('target', '_blank');
+          /** @type {Element} */ (link).setAttribute('rel', 'noopener noreferrer');
         }
       }
     }