autumnnote 1.0.1 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "A modern, lightweight WYSIWYG editor — built with vanilla JavaScript, no jQuery required.",
   "main": "dist/autumnnote.umd.js",
   "module": "dist/autumnnote.es.js",
@@ -19,7 +19,7 @@
     "prepublishOnly": "npm run build",
     "test": "vitest run",
     "test:watch": "vitest",
-    "lint": "eslint src --ext .js"
+    "lint": "eslint src"
   },
   "keywords": [
     "wysiwyg",

package/src/js/core/sanitise.js

@@ -11,6 +11,16 @@ const PROHIBITED_TAGS = ['script', 'style', 'iframe', 'object', 'embed', 'form',
 /** Attributes whose values must be sanitised as URLs. */
 const URL_ATTRS = ['href', 'src', 'action', 'formaction'];
 
+/** Trusted hosts for iframe embeds when allowIframes is enabled. */
+const TRUSTED_IFRAME_HOSTS = new Set([
+  'www.youtube.com',
+  'youtube.com',
+  'm.youtube.com',
+  'www.youtube-nocookie.com',
+  'youtube-nocookie.com',
+  'player.vimeo.com',
+]);
+
 /**
  * Sanitises an HTML string by removing dangerous elements and attributes.
  * Uses DOMParser so the sanitisation follows normal browser parsing rules —
@@ -54,12 +64,45 @@ export function sanitiseHTML(html, { allowIframes = false } = {}) {
           el.removeAttribute(attr.name);
         }
       }
+
+      // Strip iframe HTML-injection vectors and limit iframe src to trusted hosts.
+      if (el.tagName === 'IFRAME') {
+        if (attr.name === 'srcdoc') {
+          el.removeAttribute(attr.name);
+          return;
+        }
+        if (attr.name === 'src') {
+          if (!isTrustedIframeSrc(attr.value)) {
+            el.removeAttribute(attr.name);
+          }
+          return;
+        }
+      }
     });
   });
 
   return doc.body.innerHTML;
 }
 
+/**
+ * Returns true if iframe src points to an approved video host.
+ * Relative, protocol-relative and invalid URLs are rejected.
+ * @param {string} src
+ * @returns {boolean}
+ */
+function isTrustedIframeSrc(src) {
+  const trimmed = (src || '').trim();
+  if (!trimmed) return false;
+  if (trimmed.startsWith('//') || trimmed.startsWith('/')) return false;
+  try {
+    const url = new URL(trimmed);
+    if (url.protocol !== 'https:') return false;
+    return TRUSTED_IFRAME_HOSTS.has(url.hostname.toLowerCase());
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Sanitises a URL string, rejecting dangerous protocols.
  *

package/src/js/editing/History.js

@@ -56,7 +56,7 @@ export class History {
       if (cur === node) return count + offset;
       count += cur.length;
     }
-    return count;
+    return 0;
   }
 
   /**
@@ -83,7 +83,15 @@ export class History {
       }
       count += len;
     }
-    if (!startNode) return;
+    if (!startNode) {
+      // Offset exceeds content (e.g. undo to a shorter state): place at end
+      const lastWalker = document.createTreeWalker(this.editable, NodeFilter.SHOW_TEXT, null);
+      let lastNode = null;
+      while ((lastNode = lastWalker.nextNode())) { startNode = lastNode; }
+      startOff = startNode ? startNode.length : 0;
+      endNode = startNode;
+      endOff = startOff;
+    }
     if (!endNode) { endNode = startNode; endOff = startOff; }
     try {
       const range = document.createRange();

package/src/js/editing/Style.js

@@ -36,8 +36,27 @@ export const italic = () => execCommand('italic');
 
 /**
  * Underlines / un-underlines the selection.
+ * Falls back to manual DOM manipulation when inside <code> where
+ * execCommand's state detection is unreliable.
  */
-export const underline = () => execCommand('underline');
+export function underline() {
+  const sel = window.getSelection();
+  if (!sel || !sel.rangeCount) return;
+  let container = sel.getRangeAt(0).commonAncestorContainer;
+  if (container.nodeType === 3) container = container.parentElement;
+  // Check if we're inside a <u> (DOM truth), to guard against unreliable queryCommandState
+  const uEl = container && container.closest && container.closest('u');
+  const nativeState = document.queryCommandState('underline');
+  if (uEl && !nativeState) {
+    // Browser doesn't recognise the underline state (e.g. inside <code>).
+    // Manually unwrap the <u> element.
+    const parent = uEl.parentNode;
+    while (uEl.firstChild) parent.insertBefore(uEl.firstChild, uEl);
+    parent.removeChild(uEl);
+    return;
+  }
+  execCommand('underline');
+}
 
 /**
  * Strikethrough / removes strikethrough.
@@ -254,12 +273,22 @@ export function toggleInlineCode(editable) {
     try {
       const code = document.createElement('code');
       range.surroundContents(code);
+      // Re-select wrapped content so subsequent format toggles work
+      const newRange = document.createRange();
+      newRange.selectNodeContents(code);
+      sel.removeAllRanges();
+      sel.addRange(newRange);
     } catch {
       // surroundContents fails across element boundaries — extract and rewrap
       const frag = range.extractContents();
       const code = document.createElement('code');
       code.appendChild(frag);
       range.insertNode(code);
+      // Re-select wrapped content
+      const newRange = document.createRange();
+      newRange.selectNodeContents(code);
+      sel.removeAllRanges();
+      sel.addRange(newRange);
     }
   }
 }
@@ -306,13 +335,45 @@ export function toggleChecklist() {
     ul.removeChild(li);
     if (ul.children.length === 0) ul.remove();
     const nr = document.createRange();
-    nr.setStart(p, 0);
+    // Point into the text node (or first child) rather than the element node
+    // so the cursor is at a well-defined text position, not element-offset 0.
+    const startNode = p.firstChild || p;
+    nr.setStart(startNode, 0);
     nr.collapse(true);
     sel.removeAllRanges();
     sel.addRange(nr);
   } else {
-    const cb = '<input type="checkbox" contenteditable="false">';
-    execCommand('insertHTML', `<ul class="an-checklist"><li>${cb}\u00a0</li></ul>`);
+    // Use a temporary marker attribute so the new <li> can be found reliably
+    // even when execCommand('insertHTML') places the cursor outside the list.
+    // Chrome often moves the caret to a generated <p> after the <ul> rather
+    // than staying inside the <li>, making a selection-based lookup fail.
+    const MARKER = 'data-an-new-cli';
+    execCommand('insertHTML',
+      `<ul class="an-checklist"><li ${MARKER}><input type="checkbox" contenteditable="false"></li></ul>`);
+    const newLi = document.querySelector(`[${MARKER}]`);
+    if (newLi) {
+      newLi.removeAttribute(MARKER);
+      const cbEl = newLi.querySelector('input[type="checkbox"]');
+      if (cbEl) {
+        // Use \u200B (zero-width space) instead of an empty string.
+        // Chrome does not reliably honour a Selection pointing into an empty
+        // text node and may silently normalise it to an element-level offset,
+        // rendering the caret before the absolutely-positioned checkbox.
+        // \u200B is invisible/zero-width and is stripped by getHTML().
+        let textNode = cbEl.nextSibling;
+        if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
+          textNode = document.createTextNode('\u200B');
+          newLi.appendChild(textNode);
+        } else if (!textNode.textContent) {
+          textNode.textContent = '\u200B';
+        }
+        const nr = document.createRange();
+        nr.setStart(textNode, 0);
+        nr.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(nr);
+      }
+    }
   }
 }
 

package/src/js/editing/Typing.js

@@ -16,6 +16,153 @@ import { currentRange } from '../core/range.js';
  * @returns {boolean} true if the event was consumed
  */
 export function handleKeydown(event, editable, options = {}) {
+  const isFAIcon = (n) => !!(n && n.nodeName === 'I' && /\bfa-/.test(n.className || ''));
+  const isZwsAnchor = (n) => !!(n && n.nodeType === Node.TEXT_NODE && (n.textContent === '\u200B' || n.textContent === ''));
+  const moveCaret = (setFn) => {
+    const sel = window.getSelection();
+    if (!sel) return false;
+    const nr = document.createRange();
+    setFn(nr);
+    nr.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(nr);
+    return true;
+  };
+
+  // -------------------------------------------------------------------------
+  // Backspace key — one-press deletion of a preceding FA icon (<i> element)
+  // -------------------------------------------------------------------------
+  if (isKey(event, key.BACKSPACE)) {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      const r = sel.getRangeAt(0);
+      if (r.collapsed && r.startContainer.nodeType === Node.TEXT_NODE) {
+        const textNode = r.startContainer;
+        // Case A: cursor at offset 0, preceding sibling is an FA icon
+        if (r.startOffset === 0 && isFAIcon(textNode.previousSibling)) {
+          event.preventDefault();
+          textNode.previousSibling.remove();
+          return true;
+        }
+
+        // Case B: cursor at offset 1 of a ZWS-only text node whose preceding
+        // sibling is an FA icon. The ZWS is the invisible caret anchor inserted
+        // by IconDialog; treat the whole Backspace as "delete icon + its anchor".
+        if (r.startOffset === 1 && textNode.textContent === '\u200B' &&
+            isFAIcon(textNode.previousSibling)) {
+          event.preventDefault();
+          textNode.previousSibling.remove();
+          textNode.remove();
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  // -------------------------------------------------------------------------
+  // ArrowLeft / ArrowRight — one-press navigation across FA icon nodes
+  // -------------------------------------------------------------------------
+  if (isKey(event, key.LEFT) || isKey(event, key.RIGHT)) {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return false;
+
+    const r = sel.getRangeAt(0);
+    if (!r.collapsed) return false;
+
+    const sc = r.startContainer;
+    const movingLeft = isKey(event, key.LEFT);
+
+    if (sc.nodeType === Node.TEXT_NODE) {
+      const textNode = sc;
+
+      if (movingLeft &&
+          r.startOffset === 1 &&
+          textNode.textContent === '\u200B' &&
+          isFAIcon(textNode.previousSibling)) {
+        event.preventDefault();
+        return moveCaret((nr) => nr.setStartBefore(textNode.previousSibling));
+      }
+
+      if (movingLeft && r.startOffset === 0 && isFAIcon(textNode.previousSibling)) {
+        event.preventDefault();
+        return moveCaret((nr) => nr.setStartBefore(textNode.previousSibling));
+      }
+
+      if (movingLeft &&
+          r.startOffset === 0 &&
+          isZwsAnchor(textNode.previousSibling) &&
+          isFAIcon(textNode.previousSibling.previousSibling)) {
+        event.preventDefault();
+        return moveCaret((nr) => nr.setStartBefore(textNode.previousSibling.previousSibling));
+      }
+
+      if (!movingLeft &&
+          r.startOffset === textNode.textContent.length &&
+          isFAIcon(textNode.nextSibling)) {
+        const icon = textNode.nextSibling;
+        const after = icon.nextSibling;
+        event.preventDefault();
+        if (after && after.nodeType === Node.TEXT_NODE) {
+          const offset = ((after.textContent || '').startsWith('\u200B')) ? 1 : 0;
+          return moveCaret((nr) => nr.setStart(after, Math.min(offset, after.textContent.length)));
+        }
+        return moveCaret((nr) => nr.setStartAfter(icon));
+      }
+
+      if (!movingLeft &&
+          r.startOffset === textNode.textContent.length &&
+          isZwsAnchor(textNode.nextSibling) &&
+          isFAIcon(textNode.nextSibling.nextSibling)) {
+        const icon = textNode.nextSibling.nextSibling;
+        const after = icon.nextSibling;
+        event.preventDefault();
+        if (after && after.nodeType === Node.TEXT_NODE) {
+          const offset = ((after.textContent || '').startsWith('\u200B')) ? 1 : 0;
+          return moveCaret((nr) => nr.setStart(after, Math.min(offset, after.textContent.length)));
+        }
+        return moveCaret((nr) => nr.setStartAfter(icon));
+      }
+    }
+
+    if (sc.nodeType === Node.ELEMENT_NODE) {
+      const el = sc;
+      if (movingLeft && r.startOffset > 0) {
+        const prev = el.childNodes[r.startOffset - 1];
+        if (isFAIcon(prev)) {
+          event.preventDefault();
+          return moveCaret((nr) => nr.setStartBefore(prev));
+        }
+        if (isZwsAnchor(prev) && isFAIcon(prev.previousSibling)) {
+          event.preventDefault();
+          return moveCaret((nr) => nr.setStartBefore(prev.previousSibling));
+        }
+      }
+      if (!movingLeft && r.startOffset < el.childNodes.length) {
+        const next = el.childNodes[r.startOffset];
+        if (isFAIcon(next)) {
+          const after = next.nextSibling;
+          event.preventDefault();
+          if (after && after.nodeType === Node.TEXT_NODE) {
+            const offset = ((after.textContent || '').startsWith('\u200B')) ? 1 : 0;
+            return moveCaret((nr) => nr.setStart(after, Math.min(offset, after.textContent.length)));
+          }
+          return moveCaret((nr) => nr.setStartAfter(next));
+        }
+        if (isZwsAnchor(next) && isFAIcon(next.nextSibling)) {
+          const icon = next.nextSibling;
+          const after = icon.nextSibling;
+          event.preventDefault();
+          if (after && after.nodeType === Node.TEXT_NODE) {
+            const offset = ((after.textContent || '').startsWith('\u200B')) ? 1 : 0;
+            return moveCaret((nr) => nr.setStart(after, Math.min(offset, after.textContent.length)));
+          }
+          return moveCaret((nr) => nr.setStartAfter(icon));
+        }
+      }
+    }
+  }
+
   // -------------------------------------------------------------------------
   // Tab key — indent / outdent list items, or insert soft tab in code blocks
   // -------------------------------------------------------------------------
@@ -36,6 +183,7 @@ export function handleKeydown(event, editable, options = {}) {
 
     // In a pre/code block, insert spaces
     if (para && para.nodeName.toUpperCase() === 'PRE') {
+      if (event.shiftKey) return false;
       event.preventDefault();
       execCommand('insertText', '    ');
       return true;
@@ -43,6 +191,7 @@ export function handleKeydown(event, editable, options = {}) {
 
     // Default: insert &nbsp; * tabSize
     if (options.tabSize) {
+      if (event.shiftKey) return false;
       event.preventDefault();
       execCommand('insertText', ' '.repeat(options.tabSize));
       return true;
@@ -65,62 +214,119 @@ export function handleKeydown(event, editable, options = {}) {
     const range = currentRange(editable);
     if (!range) return false;
 
-    // Checklist — Enter creates new item; empty item exits the list
+    // Hoist sc/el once so all guards below can reuse them.
     const sc = range.sc;
     const el = sc.nodeType === 3 ? sc.parentElement : sc;
+
+    // Guard: if the cursor is inside a <i> FA icon element (zero text children,
+    // rendered entirely by CSS ::before), pressing Enter would split the block
+    // and leave an orphan <i> in the new paragraph — visually an "auto-created
+    // icon". Push the cursor to just after the <i> first, then fall through so
+    // the browser fires its default Enter at a safe text boundary.
+    if (el && el.nodeName === 'I' && /\bfa-/.test(el.className || '')) {
+      const nr = document.createRange();
+      nr.setStartAfter(el);
+      nr.collapse(true);
+      const selI = window.getSelection();
+      if (selI) { selI.removeAllRanges(); selI.addRange(nr); }
+      return false; // cursor is now outside <i> — let browser default handle Enter
+    }
+
+    // Video wrapper — Enter should create a new paragraph after the wrapper,
+    // not split the wrapper's container and produce an empty video clone.
+    const videoWrapper = el && el.closest && el.closest('.an-video-wrapper');
+    if (videoWrapper) {
+      event.preventDefault();
+      const p = document.createElement('p');
+      p.innerHTML = '\u00a0';
+      videoWrapper.parentNode.insertBefore(p, videoWrapper.nextSibling);
+      const nr = document.createRange();
+      nr.setStart(p, 0);
+      nr.collapse(true);
+      const sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(nr);
+      return true;
+    }
+
+    // Checklist — Enter creates new item; empty item exits the list
     const checkLi = el && el.closest && el.closest('.an-checklist li');
     if (checkLi) {
       event.preventDefault();
       const ul = checkLi.closest('.an-checklist');
       const sel = window.getSelection();
-      const nativeRange = sel.getRangeAt(0);
-
-      // Extract content from cursor to end of li into a fragment
-      const afterRange = document.createRange();
-      afterRange.setStart(nativeRange.endContainer, nativeRange.endOffset);
-      afterRange.setEnd(checkLi, checkLi.childNodes.length);
-      const afterFrag = afterRange.extractContents();
+      let nativeRange = sel.getRangeAt(0);
 
-      // Check if text remaining before cursor (excl checkbox) is empty
-      const textBefore = Array.from(checkLi.childNodes)
-        .filter((n) => !(n.nodeType === 1 && n.tagName === 'INPUT'))
-        .map((n) => n.textContent).join('').replace(/\u00a0/g, ' ').trim();
+      // Helper: get trimmed text content of a li, excluding the checkbox INPUT.
+      // Strip both \u00a0 (placeholder nbsp) and \u200B (ZWS cursor anchors).
+      const liText = (li) =>
+        Array.from(li.childNodes)
+          .filter((n) => !(n.nodeType === 1 && n.tagName === 'INPUT'))
+          .map((n) => n.textContent).join('').replace(/[\u00a0\u200B]/g, ' ').trim();
 
-      if (!textBefore) {
+      // 1. Check if the ENTIRE item is empty BEFORE any DOM mutation.
+      //    (Do NOT check only the "before-cursor" part — that check incorrectly
+      //    exits the list when cursor is at the start of a non-empty item.)
+      if (!liText(checkLi)) {
         // Empty item — exit checklist, insert <p> after list
         const p = document.createElement('p');
-        const afterText = afterFrag.textContent.replace(/\u00a0/g, ' ').trim();
-        p.textContent = afterText || '\u00a0';
+        p.innerHTML = '\u00a0';
         ul.parentNode.insertBefore(p, ul.nextSibling);
         checkLi.remove();
         if (ul.children.length === 0) ul.remove();
         const nr = document.createRange();
-        nr.setStart(p, 0);
-        nr.collapse(true);
-        sel.removeAllRanges();
-        sel.addRange(nr);
-      } else {
-        // Create new checklist item; move after-cursor content into it
-        const newLi = document.createElement('li');
-        const cb = document.createElement('input');
-        cb.type = 'checkbox';
-        cb.setAttribute('contenteditable', 'false');
-        newLi.appendChild(cb);
-        let cursorNode;
-        if (afterFrag.textContent.length > 0) {
-          newLi.appendChild(afterFrag);
-          cursorNode = newLi.childNodes[1]; // first node after checkbox
-        } else {
-          cursorNode = document.createTextNode('\u00a0');
-          newLi.appendChild(cursorNode);
-        }
-        checkLi.insertAdjacentElement('afterend', newLi);
-        const nr = document.createRange();
-        nr.setStart(cursorNode, 0);
+        nr.setStart(p.firstChild, 0);
         nr.collapse(true);
         sel.removeAllRanges();
         sel.addRange(nr);
+        return true;
       }
+
+      // 2. If selection is not collapsed, delete the selected content first —
+      //    mirrors browser-default Enter behaviour (delete selection, then split).
+      if (!nativeRange.collapsed) {
+        nativeRange.deleteContents();
+        // nativeRange is now collapsed at the deletion point; re-read it
+        nativeRange = sel.getRangeAt(0);
+      }
+
+      // 3. Extract everything from cursor to end of li into afterFrag.
+      //    Use startContainer/startOffset (cursor position after potential delete),
+      //    NOT endContainer/endOffset which is wrong for non-collapsed ranges.
+      const afterRange = document.createRange();
+      afterRange.setStart(nativeRange.startContainer, nativeRange.startOffset);
+      afterRange.setEnd(checkLi, checkLi.childNodes.length);
+      const afterFrag = afterRange.extractContents();
+
+      // 4. Build the new checklist item with the extracted "after" content.
+      const newLi = document.createElement('li');
+      const cb = document.createElement('input');
+      cb.type = 'checkbox';
+      cb.setAttribute('contenteditable', 'false');
+      newLi.appendChild(cb);
+
+      // Append extracted "after" content (if any) then insert the new item.
+      if (afterFrag.textContent.replace(/[\u00a0\u200B]/g, '').length > 0) {
+        newLi.appendChild(afterFrag);
+      }
+
+      // Always ensure a text node exists so the cursor has a text-level
+      // anchor. Use \u200B (zero-width space) instead of an empty string:
+      // Chrome does not reliably honour a Selection in an empty text node and
+      // may normalise it to element-level, placing the caret before the
+      // absolutely-positioned checkbox.  \u200B is stripped by getHTML().
+      let cursorNode = newLi.childNodes[1]; // first child after checkbox
+      if (!cursorNode || cursorNode.nodeType !== Node.TEXT_NODE) {
+        cursorNode = document.createTextNode('\u200B');
+        newLi.appendChild(cursorNode);
+      }
+      checkLi.insertAdjacentElement('afterend', newLi);
+
+      const nr = document.createRange();
+      nr.setStart(cursorNode, 0);
+      nr.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(nr);
       return true;
     }
 

package/src/js/index.umd.js

@@ -1,12 +1,12 @@
-/**
- * index.umd.js — UMD entry point for AutumnNote
- *
- * Re-exports only the default export so the UMD global is the factory object
- * directly, enabling the script-tag usage documented in the README:
- *
- *   <script src="dist/autumnnote.umd.js"></script>
- *   <script>
- *     const editor = AutumnNote.create('#my-editor');
- *   </script>
- */
-export { default } from './index.js';
+/**
+ * index.umd.js — UMD entry point for AutumnNote
+ *
+ * Re-exports only the default export so the UMD global is the factory object
+ * directly, enabling the script-tag usage documented in the README:
+ *
+ *   <script src="dist/autumnnote.umd.js"></script>
+ *   <script>
+ *     const editor = AutumnNote.create('#my-editor');
+ *   </script>
+ */
+export { default } from './index.js';

package/src/js/module/Buttons.js

@@ -57,7 +57,16 @@ function btn(name, icon, tooltip, action, isActive, isDisabled) {
 
 export const boldBtn = btn('bold', 'bold', 'Bold (Ctrl+B)', () => Style.bold(), () => document.queryCommandState('bold'));
 export const italicBtn = btn('italic', 'italic', 'Italic (Ctrl+I)', () => Style.italic(), () => document.queryCommandState('italic'));
-export const underlineBtn = btn('underline', 'underline', 'Underline (Ctrl+U)', () => Style.underline(), () => document.queryCommandState('underline'));
+export const underlineBtn = btn('underline', 'underline', 'Underline (Ctrl+U)', () => Style.underline(), () => {
+  // queryCommandState('underline') is unreliable inside <code> elements;
+  // also check for a <u> ancestor in the DOM.
+  if (document.queryCommandState('underline')) return true;
+  const sel = window.getSelection();
+  if (!sel || !sel.rangeCount) return false;
+  let container = sel.getRangeAt(0).commonAncestorContainer;
+  if (container.nodeType === 3) container = container.parentElement;
+  return !!(container && container.closest && container.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'));
 export const subscriptBtn = btn('subscript', 'subscript', 'Subscript', () => Style.subscript(), () => document.queryCommandState('subscript'));
@@ -134,8 +143,8 @@ export const fontSizeBtn = {
       if (sel && sel.rangeCount) {
         let el = sel.getRangeAt(0).startContainer;
         if (el.nodeType === 3) el = el.parentElement;
-        while (el && !el.style) el = el.parentElement;
-        const size = el ? (el.style.fontSize || '') : '';
+        while (el && el.nodeType === 1 && !el.style.fontSize) el = el.parentElement;
+        const size = (el && el.style && el.style.fontSize) ? el.style.fontSize : '';
         if (size) return size;
       }
       // Fallback: read the base font size from the editable element itself
@@ -237,7 +246,8 @@ export const lineHeightBtn = {
       let el = sel.getRangeAt(0).startContainer;
       if (el.nodeType === 3) el = el.parentElement;
       while (el && !BLOCKS.has(el.tagName)) el = el.parentElement;
-      return el ? (el.style.lineHeight || '') : '';
+      if (!el) return '';
+      return el.style.lineHeight || getComputedStyle(el).lineHeight || '';
     } catch { return ''; }
   },
 };
@@ -248,7 +258,7 @@ export const lineHeightBtn = {
 
 export const codeviewBtn = btn('codeview', 'code', 'HTML Code View', (ctx) => ctx.invoke('codeview.toggle'), (ctx) => ctx.invoke('codeview.isActive'));
 export const fullscreenBtn = btn('fullscreen', 'expand', 'Fullscreen', (ctx) => ctx.invoke('fullscreen.toggle'), (ctx) => ctx.invoke('fullscreen.isActive'));
-export const shortcutsBtn = btn('shortcuts', 'keyboard', 'Keyboard Shortcuts (Shift+?)', (ctx) => ctx.invoke('shortcutsDialog.show'));
+export const shortcutsBtn = btn('shortcuts', 'keyboard', 'Keyboard Shortcuts (Ctrl+Shift+/)', (ctx) => ctx.invoke('shortcutsDialog.show'));
 export const findBtn = btn('find', 'search', 'Find (Ctrl+F)', (ctx) => ctx.invoke('findReplace.show', 'find'));
 export const findReplaceBtn = btn('findReplace', 'find-replace', 'Find & Replace (Ctrl+H)', (ctx) => ctx.invoke('findReplace.show', 'replace'));
 export const inlineCodeBtn = btn('inlineCode', 'inline-code', 'Inline Code (Ctrl+`)', (ctx) => ctx.invoke('editor.inlineCode'), () => Style.isInlineCode());

package/src/js/module/CodeTooltip.js

@@ -221,8 +221,9 @@ export class CodeTooltip {
     if (left + tipW > window.innerWidth  - margin) left = window.innerWidth  - tipW - margin;
     if (left < margin) left = margin;
 
-    this._el.style.top  = `${top  + window.scrollY}px`;
-    this._el.style.left = `${left + window.scrollX}px`;
+    // Tooltip uses position:fixed, so viewport coordinates are used directly.
+    this._el.style.top  = `${top}px`;
+    this._el.style.left = `${left}px`;
   }
 
   // ---------------------------------------------------------------------------
@@ -356,15 +357,25 @@ export class CodeTooltip {
     if (!this.context.options.codeHighlight || window.Prism) return;
     const cdn = this.context.options.codeHighlightCDN
       || 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0';
+    const themeHref = `${cdn}/themes/prism-tomorrow.min.css`;
+    const scriptSrc = `${cdn}/prism.min.js`;
+
+    if (!document.querySelector(`link[href="${themeHref}"]`)) {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = themeHref;
+      document.head.appendChild(link);
+    }
 
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = `${cdn}/themes/prism-tomorrow.min.css`;
-    document.head.appendChild(link);
+    const existingScript = document.querySelector(`script[src="${scriptSrc}"]`);
+    if (existingScript) {
+      this._prismScript = window.Prism ? null : existingScript;
+      return;
+    }
 
     const script = document.createElement('script');
     script.dataset.manual = ''; // prevent auto-highlight on load
-    script.src = `${cdn}/prism.min.js`;
+    script.src = scriptSrc;
     this._prismScript = script;
     script.addEventListener('load', () => { this._prismScript = null; }, { once: true });
     document.head.appendChild(script);

package/src/js/module/Codeview.js

@@ -98,7 +98,12 @@ export class Codeview {
     const INLINE_RE = /^<(a|abbr|b|bdo|br|button|cite|code|dfn|em|i|img|input|kbd|label|output|q|samp|select|small|span|strong|sub|sup|textarea|time|tt|u|var)([\s>/])/i;
     let indent = 0;
     return html
-      .replace(/>\s*</g, '>\n<')
+      .replace(/>\s*</g, (match, offset, str) => {
+        // Check what comes after the '>' — if it starts an inline tag, keep on same line
+        const remaining = str.slice(offset + 1);
+        if (INLINE_RE.test(remaining.trimStart())) return '><';
+        return '>\n<';
+      })
       .split('\n')
       .map((line) => {
         const stripped = line.trim();