autumnnote 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "WYSIWYG rich-text editor built with vanilla JavaScript — zero dependencies, no jQuery. Dark mode, @mention, markdown shortcuts, bubble toolbar. React and Vue 3 wrappers included.",
   "type": "module",
   "main": "dist/autumnnote.cjs",
@@ -104,7 +104,7 @@
     "@vitest/browser-playwright": "^4.1.10",
     "@vitest/coverage-v8": "^4.1.8",
     "cross-env": "^10.1.0",
-    "eslint": "10.7.0",
+    "eslint": "^10.7.0",
     "jsdom": "^25.0.1",
     "playwright": "^1.61.1",
     "rollup-plugin-visualizer": "^7.0.1",

package/src/js/core/env.js

@@ -1,25 +1,38 @@
 /**
  * env.js - Environment / browser detection
  * Inspired by Summernote's env.js
+ *
+ * Every field is a lazy getter rather than a value computed at module load.
+ * This module is re-exported from the package entry point, so reading
+ * `navigator` eagerly meant that merely `import`ing autumnnote threw
+ * `ReferenceError: navigator is not defined` under SSR on any runtime without
+ * a global `navigator` — including Node 20, which package.json still supports.
+ * Nothing inside the library reads these fields, so the crash happened before
+ * an editor was ever created.
  */
 
-const userAgent = navigator.userAgent;
+/** @returns {string} the current user agent, or '' when there is no navigator (SSR). */
+function ua() {
+  return globalThis.navigator?.userAgent ?? '';
+}
 
 export const env = {
-  /** True if browser is Chrome */
-  isChrome: /Chrome\//.test(userAgent),
+  /** True if browser is Chrome (excludes Edge, whose UA also contains "Chrome/") */
+  get isChrome() { return /Chrome\//.test(ua()) && !/Edg\//.test(ua()); },
   /** True if browser is Firefox */
-  isFF: /Firefox\//.test(userAgent),
+  get isFF() { return /Firefox\//.test(ua()); },
   /** True if browser is Safari (not Chrome) */
-  isSafari: /^((?!chrome|android).)*safari/i.test(userAgent),
+  get isSafari() { return /^((?!chrome|android).)*safari/i.test(ua()); },
   /** True if browser is Edge (Chromium) */
-  isEdge: /Edg\//.test(userAgent),
+  get isEdge() { return /Edg\//.test(ua()); },
   /** True if running on macOS */
-  isMac: /Macintosh/.test(userAgent),
+  get isMac() { return /Macintosh/.test(ua()); },
   /** True if running on mobile */
-  isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent),
+  get isMobile() { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua()); },
   /** True if touch is supported */
-  isTouch: 'ontouchstart' in globalThis || navigator.maxTouchPoints > 0,
+  get isTouch() {
+    return 'ontouchstart' in globalThis || (globalThis.navigator?.maxTouchPoints ?? 0) > 0;
+  },
   /** Modifier key name depending on platform */
-  modifierKey: /Macintosh/.test(userAgent) ? 'metaKey' : 'ctrlKey',
+  get modifierKey() { return /Macintosh/.test(ua()) ? 'metaKey' : 'ctrlKey'; },
 };

package/src/js/core/sanitise.js

@@ -5,14 +5,49 @@
  * DOM-parser based — no regex-based stripping of HTML (avoids bypass tricks).
  */
 
-/** Tags that are unconditionally removed from editor content. */
-const PROHIBITED_TAGS = ['script', 'style', 'iframe', 'object', 'embed', 'form', 'base', 'template', 'link', 'meta', 'noscript', 'portal', 'frame', 'frameset', 'applet'];
+/**
+ * Tags that are unconditionally removed from editor content.
+ *
+ * Beyond the obvious script hosts this covers two SVG/MathML-specific classes:
+ *
+ * - SMIL animation (`animate`, `set`, `animateTransform`, `animateMotion`)
+ *   can rewrite an attribute *after* sanitisation finishes, so
+ *   `<svg><a><animate attributeName="href" values="javascript:…">` survives an
+ *   attribute-level filter untouched and still navigates on click. The editor
+ *   only ever emits static `<svg>` icons, so animation is pure attack surface.
+ *
+ * - `mglyph` / `malignmark` / `annotation-xml` are HTML integration points
+ *   inside the MathML namespace. They make the parser switch namespaces
+ *   mid-tree, which is what lets a crafted fragment re-parse into different
+ *   markup than it serialised from (mXSS). The rest of MathML is left alone so
+ *   pasted formulae survive.
+ */
+const PROHIBITED_TAGS = [
+  'script', 'style', 'iframe', 'object', 'embed', 'form', 'base', 'template',
+  'link', 'meta', 'noscript', 'portal', 'frame', 'frameset', 'applet',
+  'animate', 'set', 'animatetransform', 'animatemotion',
+  'mglyph', 'malignmark', 'annotation-xml',
+];
 
 /** Tags whose element wrapper is stripped but content (child nodes) is preserved. */
 const UNWRAP_TAGS = new Set(['button']);
 
 /** Attributes whose values must be sanitised as URLs. */
-const URL_ATTRS = ['href', 'src', 'action', 'formaction', 'xlink:href'];
+const URL_ATTRS = ['href', 'src', 'action', 'formaction', 'xlink:href', 'poster', 'background', 'srcset'];
+
+/**
+ * URL attributes that address media rather than navigation, so they are
+ * validated against SAFE_MEDIA_PROTOCOLS regardless of which element carries
+ * them (unlike `src`, whose meaning depends on the owning tag).
+ */
+const MEDIA_URL_ATTRS = new Set(['poster', 'background', 'srcset']);
+
+/**
+ * Attributes removed outright: the editor never emits them and their only
+ * effect is an outbound request the author did not ask for. `ping` fires a
+ * POST beacon to arbitrary hosts when a link is clicked.
+ */
+const BEACON_ATTRS = new Set(['ping']);
 
 /** Inline style properties the editor's own toolbar/table features persist on saved content. */
 const ALLOWED_STYLE_PROPS = new Set([
@@ -22,8 +57,12 @@ const ALLOWED_STYLE_PROPS = new Set([
   'border-width', 'border-style', 'border-color', 'padding',
 ]);
 
-/** Value patterns that are never safe regardless of property. */
-const DANGEROUS_STYLE_VALUE_RE = /url\s*\(|expression\s*\(|@import|javascript:|vbscript:|behavior\s*:|-moz-binding/i;
+/**
+ * Value patterns that are never safe regardless of property.
+ * `image-set()` and `src()` are covered alongside `url()` — all three fetch an
+ * external resource, so allowing them would let pasted content phone home.
+ */
+const DANGEROUS_STYLE_VALUE_RE = /url\s*\(|image-set\s*\(|src\s*\(|expression\s*\(|@import|javascript:|vbscript:|behavior\s*:|-moz-binding/i;
 
 /** Trusted hosts for iframe embeds when allowIframes is enabled. */
 const TRUSTED_IFRAME_HOSTS = new Set([
@@ -106,12 +145,21 @@ export function sanitiseHTML(html, { allowIframes = false } = {}) {
         else el.removeAttribute('style');
         continue;
       }
+      // Drop tracking-beacon attributes outright
+      if (BEACON_ATTRS.has(attr.name)) {
+        el.removeAttribute(attr.name);
+        continue;
+      }
       // Sanitise URL attributes
       if (URL_ATTRS.includes(attr.name)) {
         const val = attr.value.trim();
-        const isMediaSource = attr.name === 'src' &&
-          ['IMG', 'VIDEO', 'AUDIO', 'SOURCE'].includes(el.tagName);
-        if (!isSafeUrl(val, { media: isMediaSource, allowData: el.tagName === 'IMG' })) {
+        const isMediaSource = MEDIA_URL_ATTRS.has(attr.name) ||
+          (attr.name === 'src' && ['IMG', 'VIDEO', 'AUDIO', 'SOURCE'].includes(el.tagName));
+        const allowData = el.tagName === 'IMG';
+        const safe = attr.name === 'srcset'
+          ? isSafeSrcset(val, { allowData })
+          : isSafeUrl(val, { media: isMediaSource, allowData });
+        if (!safe) {
           el.removeAttribute(attr.name);
           continue;
         }
@@ -174,6 +222,31 @@ function sanitiseStyleValue(value) {
   return kept.join('; ');
 }
 
+/**
+ * Validates every candidate URL in a `srcset` attribute.
+ *
+ * Per the HTML srcset grammar a candidate URL is a run of non-whitespace
+ * characters — commas may appear *inside* it, which is why `data:` URLs work
+ * there — optionally followed by a width (`300w`) or density (`2x`) descriptor.
+ * Splitting on whitespace and skipping descriptor tokens therefore yields the
+ * URL set. Anything unparseable makes the whole attribute fail, since a
+ * partially-trusted candidate list is not something we can express.
+ *
+ * @param {string} value
+ * @param {{ allowData?: boolean }} [options]
+ * @returns {boolean}
+ */
+function isSafeSrcset(value, { allowData = false } = {}) {
+  const tokens = (value || '').trim().split(/\s+/).filter(Boolean);
+  for (const token of tokens) {
+    if (/^[\d.]+[xw],?$/i.test(token)) continue; // width/density descriptor
+    const url = token.replace(/,+$/, ''); // trailing comma = candidate separator
+    if (!url) continue;
+    if (!isSafeUrl(url, { media: true, allowData })) return false;
+  }
+  return true;
+}
+
 /**
  * Returns true if iframe src points to an approved video host.
  * Relative, protocol-relative and invalid URLs are rejected.

package/src/js/index.js

@@ -166,7 +166,7 @@ const AutumnNote = {
   buttons,
 
   /** Library version */
-  version: '2.0.0',
+  version: '2.1.0',
 };
 
 // ---------------------------------------------------------------------------

package/src/js/module/BaseResizer.js

@@ -168,7 +168,11 @@ export class BaseResizer {
       h.dataset.handle = pos;
       // Attach handle listeners here so they're torn down in destroy() via _disposers
       this._disposers.push(
-        on(h, 'mousedown', (e) => {
+        // Pointer events rather than mouse events, so the same code path serves
+        // mouse, touch and pen. The handles also set `touch-action: none` in
+        // CSS — without it a touch drag is claimed by the browser as a scroll
+        // gesture and the pointer stream is cancelled before it starts.
+        on(h, 'pointerdown', (e) => {
           e.preventDefault();
           e.stopPropagation();
           this._startResize(e, pos);
@@ -293,20 +297,26 @@ export class BaseResizer {
       });
     };
 
+    const stop = () => {
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerup', onUp);
+      document.removeEventListener('pointercancel', onUp);
+    };
+
     const onUp = () => {
       if (raf !== null) { cancelAnimationFrame(raf); raf = null; }
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
+      stop();
       this._dragDisposers = null;
       this.context.invoke('editor.afterCommand');
     };
 
-    document.addEventListener('mousemove', onMove);
-    document.addEventListener('mouseup', onUp);
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', onUp);
+    // A touch drag interrupted by the system (incoming call, gesture takeover)
+    // ends with pointercancel and no pointerup, which would otherwise leave the
+    // move listener attached for the rest of the session.
+    document.addEventListener('pointercancel', onUp);
     // Track these so destroy() can clean them up if called during an active drag
-    this._dragDisposers = [
-      () => document.removeEventListener('mousemove', onMove),
-      () => document.removeEventListener('mouseup', onUp),
-    ];
+    this._dragDisposers = [stop];
   }
 }