autumnnote 1.0.0

package/src/js/core/dom.js

@@ -0,0 +1,315 @@
+/**
+ * dom.js - DOM manipulation utilities
+ * Inspired by Summernote's dom.js — rewritten for vanilla JS without jQuery
+ */
+
+// ---------------------------------------------------------------------------
+// Node type helpers
+// ---------------------------------------------------------------------------
+
+export const ELEMENT_NODE = 1;
+export const TEXT_NODE = 3;
+
+/** @param {Node} node */
+export const isElement = (node) => node && node.nodeType === ELEMENT_NODE;
+/** @param {Node} node */
+export const isText = (node) => node && node.nodeType === TEXT_NODE;
+/** @param {Node} node */
+export const isVoid = (node) => isElement(node) && /^(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/i.test(node.nodeName);
+/** @param {Node} node */
+export const isPara = (node) => isElement(node) && /^(p|div|li|h[1-6]|blockquote|td|th|pre)$/i.test(node.nodeName);
+/** @param {Node} node */
+export const isLi = (node) => isElement(node) && /^(li)$/i.test(node.nodeName);
+/** @param {Node} node */
+export const isList = (node) => isElement(node) && /^(ul|ol)$/i.test(node.nodeName);
+/** @param {Node} node */
+export const isTable = (node) => isElement(node) && node.nodeName.toUpperCase() === 'TABLE';
+/** @param {Node} node */
+export const isInline = (node) =>
+  isElement(node) &&
+  /^(a|abbr|acronym|b|bdo|big|br|button|cite|code|dfn|em|i|img|input|kbd|label|map|object|output|q|s|samp|select|small|span|strong|sub|sup|textarea|time|tt|u|var)$/i.test(node.nodeName);
+/** @param {Node} node */
+export const isEditable = (node) => isElement(node) && node.isContentEditable;
+/** @param {Node} node */
+export const isAnchor = (node) => isElement(node) && node.nodeName.toUpperCase() === 'A';
+/** @param {Node} node */
+export const isImage = (node) => isElement(node) && node.nodeName.toUpperCase() === 'IMG';
+
+// ---------------------------------------------------------------------------
+// Tree traversal
+// ---------------------------------------------------------------------------
+
+/**
+ * Walk up the DOM tree from node, returning the first element matching predicate (inclusive).
+ * @param {Node} node
+ * @param {(node: Node) => boolean} predicate
+ * @param {Node} [stopAt] - stop traversal at this ancestor (exclusive)
+ * @returns {Node|null}
+ */
+export function closest(node, predicate, stopAt) {
+  let cur = node;
+  while (cur && cur !== stopAt) {
+    if (predicate(cur)) return cur;
+    cur = cur.parentNode;
+  }
+  return null;
+}
+
+/**
+ * Returns the nearest ancestor that is a paragraph-like block.
+ * @param {Node} node
+ * @param {Node} [editable]
+ * @returns {Node|null}
+ */
+export function closestPara(node, editable) {
+  return closest(node, isPara, editable);
+}
+
+/**
+ * Returns all ancestors of node up to (but not including) stopAt.
+ * @param {Node} node
+ * @param {Node} [stopAt]
+ * @returns {Node[]}
+ */
+export function ancestors(node, stopAt) {
+  const result = [];
+  let cur = node.parentNode;
+  while (cur && cur !== stopAt) {
+    result.push(cur);
+    cur = cur.parentNode;
+  }
+  return result;
+}
+
+/**
+ * Returns all children of node as an Array.
+ * @param {Node} node
+ * @returns {Node[]}
+ */
+export function children(node) {
+  return Array.from(node.childNodes);
+}
+
+/**
+ * Returns the previous sibling element (skipping text/comment nodes).
+ * @param {Node} node
+ * @returns {Element|null}
+ */
+export function prevElement(node) {
+  let sibling = node.previousSibling;
+  while (sibling && !isElement(sibling)) {
+    sibling = sibling.previousSibling;
+  }
+  return sibling;
+}
+
+/**
+ * Returns the next sibling element.
+ * @param {Node} node
+ * @returns {Element|null}
+ */
+export function nextElement(node) {
+  let sibling = node.nextSibling;
+  while (sibling && !isElement(sibling)) {
+    sibling = sibling.nextSibling;
+  }
+  return sibling;
+}
+
+// ---------------------------------------------------------------------------
+// DOM mutation helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Creates an element with optional attributes and children.
+ * @param {string} tag
+ * @param {Record<string, string>} [attrs]
+ * @param {(Node|string)[]} [childNodes]
+ * @returns {HTMLElement}
+ */
+export function createElement(tag, attrs = {}, childNodes = []) {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs)) {
+    el.setAttribute(k, v);
+  }
+  for (const child of childNodes) {
+    if (typeof child === 'string') {
+      el.appendChild(document.createTextNode(child));
+    } else {
+      el.appendChild(child);
+    }
+  }
+  return el;
+}
+
+/**
+ * Removes a node from its parent.
+ * @param {Node} node
+ */
+export function remove(node) {
+  if (node && node.parentNode) {
+    node.parentNode.removeChild(node);
+  }
+}
+
+/**
+ * Unwraps a node — replaces the node with its children.
+ * @param {Node} node
+ */
+export function unwrap(node) {
+  const parent = node.parentNode;
+  if (!parent) return;
+  while (node.firstChild) {
+    parent.insertBefore(node.firstChild, node);
+  }
+  parent.removeChild(node);
+}
+
+/**
+ * Wraps a node with a wrapper element.
+ * @param {Node} node
+ * @param {HTMLElement} wrapper
+ * @returns {HTMLElement} the wrapper
+ */
+export function wrap(node, wrapper) {
+  node.parentNode.insertBefore(wrapper, node);
+  wrapper.appendChild(node);
+  return wrapper;
+}
+
+/**
+ * Insert node after reference node.
+ * @param {Node} newNode
+ * @param {Node} refNode
+ */
+export function insertAfter(newNode, refNode) {
+  if (refNode.nextSibling) {
+    refNode.parentNode.insertBefore(newNode, refNode.nextSibling);
+  } else {
+    refNode.parentNode.appendChild(newNode);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Content helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns the text content of a node (safe).
+ * @param {Node} node
+ * @returns {string}
+ */
+export function nodeValue(node) {
+  return isText(node) ? node.nodeValue : node.textContent || '';
+}
+
+/**
+ * Returns true if a node is empty (no visible content).
+ * @param {Node} node
+ * @returns {boolean}
+ */
+export function isEmpty(node) {
+  if (isText(node)) return !node.nodeValue;
+  if (isVoid(node)) return false;
+  return !node.textContent.trim() && !node.querySelector('img, video, hr, table');
+}
+
+/**
+ * Returns the outerHTML of an element.
+ * @param {Element} el
+ * @returns {string}
+ */
+export function outerHtml(el) {
+  return el.outerHTML;
+}
+
+// ---------------------------------------------------------------------------
+// Selection / editing helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Places the caret at the end of a contenteditable element.
+ * @param {HTMLElement} el
+ */
+export function placeCaret(el) {
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  range.collapse(false);
+  const sel = window.getSelection();
+  if (sel) {
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+}
+
+/**
+ * Returns true if the node is inside a contenteditable root.
+ * @param {Node} node
+ * @returns {boolean}
+ */
+export function isInsideEditable(node) {
+  return !!closest(node, isEditable);
+}
+
+// ---------------------------------------------------------------------------
+// Event helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Adds an event listener and returns a disposer function.
+ * @param {EventTarget} target
+ * @param {string} type
+ * @param {EventListener} handler
+ * @param {AddEventListenerOptions} [options]
+ * @returns {() => void} disposer
+ */
+export function on(target, type, handler, options) {
+  target.addEventListener(type, handler, options);
+  return () => target.removeEventListener(type, handler, options);
+}
+
+/**
+ * Installs a keyboard focus trap inside a dialog container.
+ * - Tab / Shift+Tab cycles focus within the container's focusable children.
+ * - Escape calls `onEscape` and removes the trap listener.
+ *
+ * Returns a disposer function that removes the listener (call on dialog close).
+ *
+ * @param {HTMLElement} container - the dialog element to trap focus inside
+ * @param {() => void} onEscape  - called when Escape is pressed
+ * @returns {() => void} disposer
+ */
+export function trapFocus(container, onEscape) {
+  const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  const getFocusable = () => Array.from(container.querySelectorAll(FOCUSABLE)).filter(
+    (el) => !el.closest('[style*="display: none"]') && !el.closest('[style*="display:none"]'),
+  );
+
+  const handler = (e) => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      onEscape && onEscape();
+      return;
+    }
+    if (e.key !== 'Tab') return;
+    const els = getFocusable();
+    if (!els.length) return;
+    const first = els[0];
+    const last = els[els.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  };
+
+  document.addEventListener('keydown', handler);
+  return () => document.removeEventListener('keydown', handler);
+}

package/src/js/core/env.js

@@ -0,0 +1,25 @@
+/**
+ * env.js - Environment / browser detection
+ * Inspired by Summernote's env.js
+ */
+
+const userAgent = navigator.userAgent;
+
+export const env = {
+  /** True if browser is Chrome */
+  isChrome: /Chrome\//.test(userAgent),
+  /** True if browser is Firefox */
+  isFF: /Firefox\//.test(userAgent),
+  /** True if browser is Safari (not Chrome) */
+  isSafari: /^((?!chrome|android).)*safari/i.test(userAgent),
+  /** True if browser is Edge (Chromium) */
+  isEdge: /Edg\//.test(userAgent),
+  /** True if running on macOS */
+  isMac: /Macintosh/.test(userAgent),
+  /** True if running on mobile */
+  isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent),
+  /** True if touch is supported */
+  isTouch: 'ontouchstart' in window || navigator.maxTouchPoints > 0,
+  /** Modifier key name depending on platform */
+  modifierKey: /Macintosh/.test(userAgent) ? 'metaKey' : 'ctrlKey',
+};

package/src/js/core/func.js

@@ -0,0 +1,153 @@
+/**
+ * func.js - General utility / functional helpers
+ * Inspired by Summernote's func.js
+ */
+
+/**
+ * Clamp a value between min and max.
+ * @param {number} val
+ * @param {number} min
+ * @param {number} max
+ * @returns {number}
+ */
+export function clamp(val, min, max) {
+  return Math.min(Math.max(val, min), max);
+}
+
+/**
+ * Debounce a function call.
+ * @param {Function} fn
+ * @param {number} delay - milliseconds
+ * @returns {Function}
+ */
+export function debounce(fn, delay) {
+  let timer;
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn.apply(this, args), delay);
+  };
+}
+
+/**
+ * Throttle a function call.
+ * @param {Function} fn
+ * @param {number} limit - milliseconds
+ * @returns {Function}
+ */
+export function throttle(fn, limit) {
+  let lastCall = 0;
+  return function (...args) {
+    const now = Date.now();
+    if (now - lastCall >= limit) {
+      lastCall = now;
+      return fn.apply(this, args);
+    }
+  };
+}
+
+/**
+ * Compose multiple functions right-to-left.
+ * @param {...Function} fns
+ * @returns {Function}
+ */
+export function compose(...fns) {
+  return (x) => fns.reduceRight((v, f) => f(v), x);
+}
+
+/**
+ * Identity function.
+ * @template T
+ * @param {T} x
+ * @returns {T}
+ */
+export function identity(x) {
+  return x;
+}
+
+/**
+ * Determines if a value is null or undefined.
+ * @param {*} val
+ * @returns {boolean}
+ */
+export function isNil(val) {
+  return val === null || val === undefined;
+}
+
+/**
+ * Determines if a value is a string.
+ * @param {*} val
+ * @returns {boolean}
+ */
+export function isString(val) {
+  return typeof val === 'string';
+}
+
+/**
+ * Determines if a value is a function.
+ * @param {*} val
+ * @returns {boolean}
+ */
+export function isFunction(val) {
+  return typeof val === 'function';
+}
+
+/**
+ * Deep-merge two plain objects. Returns a new object.
+ * Arrays are cloned (shallow copy) rather than shared by reference so that
+ * mutations to the merged result do not bleed back into the source object
+ * (e.g. mutating `instance.options.fontFamilies` should not affect
+ * `AutumnNote.defaults.fontFamilies`).
+ * @param {object} target
+ * @param {object} source
+ * @returns {object}
+ */
+export function mergeDeep(target, source) {
+  // Start with a shallow copy of target; clone any arrays to avoid shared refs
+  const output = {};
+  for (const key of Object.keys(target)) {
+    output[key] = Array.isArray(target[key]) ? [...target[key]] : target[key];
+  }
+  if (isPlainObject(target) && isPlainObject(source)) {
+    for (const key of Object.keys(source)) {
+      if (isPlainObject(source[key])) {
+        if (!(key in target)) {
+          output[key] = mergeDeep({}, source[key]);
+        } else {
+          output[key] = mergeDeep(target[key], source[key]);
+        }
+      } else if (Array.isArray(source[key])) {
+        output[key] = [...source[key]];
+      } else {
+        output[key] = source[key];
+      }
+    }
+  }
+  return output;
+}
+
+/**
+ * Checks if value is a plain object.
+ * @param {*} val
+ * @returns {boolean}
+ */
+export function isPlainObject(val) {
+  return val !== null && typeof val === 'object' && !Array.isArray(val);
+}
+
+/**
+ * Convert a DOMRect (or similar bounding object) to a plain object bounding box.
+ * Guards against missing/null rect (e.g. in AirMode).
+ * @param {DOMRect|null|undefined} rect
+ * @returns {{ top: number, left: number, width: number, height: number, bottom: number, right: number }|null}
+ */
+export function rect2bnd(rect) {
+  if (!rect) return null;
+  return {
+    top: Math.round(rect.top),
+    left: Math.round(rect.left),
+    width: Math.round(rect.width),
+    height: Math.round(rect.height),
+    bottom: Math.round(rect.bottom),
+    right: Math.round(rect.right),
+  };
+}

package/src/js/core/key.js

@@ -0,0 +1,66 @@
+/**
+ * key.js - Keyboard key code constants
+ * Inspired by Summernote's key.js
+ */
+
+export const key = {
+  BACKSPACE: 'Backspace',
+  TAB: 'Tab',
+  ENTER: 'Enter',
+  ESCAPE: 'Escape',
+  SPACE: ' ',
+  PAGE_UP: 'PageUp',
+  PAGE_DOWN: 'PageDown',
+  END: 'End',
+  HOME: 'Home',
+  LEFT: 'ArrowLeft',
+  UP: 'ArrowUp',
+  RIGHT: 'ArrowRight',
+  DOWN: 'ArrowDown',
+  DELETE: 'Delete',
+  // Numbers
+  NUM0: '0',
+  NUM1: '1',
+  NUM2: '2',
+  NUM3: '3',
+  NUM4: '4',
+  NUM5: '5',
+  NUM6: '6',
+  NUM7: '7',
+  NUM8: '8',
+  // Letters
+  B: 'b',
+  E: 'e',
+  I: 'i',
+  J: 'j',
+  K: 'k',
+  L: 'l',
+  R: 'r',
+  S: 's',
+  U: 'u',
+  V: 'v',
+  Y: 'y',
+  Z: 'z',
+  SLASH: '/',
+  PERIOD: '.',
+};
+
+/**
+ * Returns true if the event matches the given key
+ * @param {KeyboardEvent} event
+ * @param {string} keyName - one of key.*
+ * @returns {boolean}
+ */
+export function isKey(event, keyName) {
+  return event.key === keyName || event.key === keyName.toUpperCase();
+}
+
+/**
+ * Returns true if the event is a modifier key press (Ctrl/Cmd + key)
+ * @param {KeyboardEvent} event
+ * @param {string} keyName
+ * @returns {boolean}
+ */
+export function isModifier(event, keyName) {
+  return (event.ctrlKey || event.metaKey) && isKey(event, keyName);
+}

package/src/js/core/lists.js

@@ -0,0 +1,121 @@
+/**
+ * lists.js - Array/list utility helpers
+ * Inspired by Summernote's lists.js
+ */
+
+/**
+ * Returns the last element of an array.
+ * @template T
+ * @param {T[]} arr
+ * @returns {T|undefined}
+ */
+export function last(arr) {
+  return arr[arr.length - 1];
+}
+
+/**
+ * Returns the first element of an array.
+ * @template T
+ * @param {T[]} arr
+ * @returns {T|undefined}
+ */
+export function first(arr) {
+  return arr[0];
+}
+
+/**
+ * Returns a new array without the last n items.
+ * @template T
+ * @param {T[]} arr
+ * @param {number} [n=1]
+ * @returns {T[]}
+ */
+export function initial(arr, n = 1) {
+  return arr.slice(0, arr.length - n);
+}
+
+/**
+ * Returns a new array without the first n items.
+ * @template T
+ * @param {T[]} arr
+ * @param {number} [n=1]
+ * @returns {T[]}
+ */
+export function tail(arr, n = 1) {
+  return arr.slice(n);
+}
+
+/**
+ * Returns a flattened (one level) array.
+ * @template T
+ * @param {T[][]} arr
+ * @returns {T[]}
+ */
+export function flatten(arr) {
+  return arr.reduce((acc, val) => acc.concat(val), []);
+}
+
+/**
+ * Returns unique elements of an array (using Set).
+ * @template T
+ * @param {T[]} arr
+ * @returns {T[]}
+ */
+export function unique(arr) {
+  return [...new Set(arr)];
+}
+
+/**
+ * Splits an array into chunks of size n.
+ * @template T
+ * @param {T[]} arr
+ * @param {number} n
+ * @returns {T[][]}
+ */
+export function chunk(arr, n) {
+  const result = [];
+  for (let i = 0; i < arr.length; i += n) {
+    result.push(arr.slice(i, i + n));
+  }
+  return result;
+}
+
+/**
+ * Groups array elements by a key function.
+ * @template T
+ * @param {T[]} arr
+ * @param {(item: T) => string} keyFn
+ * @returns {Record<string, T[]>}
+ */
+export function groupBy(arr, keyFn) {
+  return arr.reduce((groups, item) => {
+    const key = keyFn(item);
+    if (!groups[key]) {
+      groups[key] = [];
+    }
+    groups[key].push(item);
+    return groups;
+  }, {});
+}
+
+/**
+ * Returns true if all elements satisfy the predicate.
+ * @template T
+ * @param {T[]} arr
+ * @param {(item: T) => boolean} predicate
+ * @returns {boolean}
+ */
+export function all(arr, predicate) {
+  return arr.every(predicate);
+}
+
+/**
+ * Returns true if any element satisfies the predicate.
+ * @template T
+ * @param {T[]} arr
+ * @param {(item: T) => boolean} predicate
+ * @returns {boolean}
+ */
+export function any(arr, predicate) {
+  return arr.some(predicate);
+}