autumnnote 1.0.0

package/src/js/editing/History.js

@@ -0,0 +1,205 @@
+/**
+ * History.js - Undo / redo stack for editor content
+ * Inspired by Summernote's History module, rewritten without jQuery
+ */
+
+export class History {
+  /**
+   * @param {HTMLElement} editable - the contenteditable element
+   * @param {number} [limit=100] - maximum number of undo/redo states
+   */
+  constructor(editable, limit = 100) {
+    this.editable = editable;
+    this._limit = limit;
+    /** @type {Array<{html: string, range: {sc: string, so: number, ec: string, eo: number}|null}>} */
+    this.stack = [];
+    this.stackOffset = -1;
+    this._savePoint();
+  }
+
+  // ---------------------------------------------------------------------------
+  // Private helpers
+  // ---------------------------------------------------------------------------
+
+  _serialize() {
+    return this.editable.innerHTML;
+  }
+
+  /**
+   * Serializes the current selection as character offsets from the start of
+   * the editable element, so it can be restored after innerHTML replacement.
+   * @returns {{ start: number, end: number }|null}
+   */
+  _serializeSelection() {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return null;
+    const range = sel.getRangeAt(0);
+    if (!this.editable.contains(range.startContainer)) return null;
+    return {
+      start: this._charOffset(range.startContainer, range.startOffset),
+      end: this._charOffset(range.endContainer, range.endOffset),
+    };
+  }
+
+  /**
+   * Returns the character offset of (node, offset) from the beginning of
+   * the editable's text content.
+   * @param {Node} node
+   * @param {number} offset
+   * @returns {number}
+   */
+  _charOffset(node, offset) {
+    let count = 0;
+    const walker = document.createTreeWalker(this.editable, NodeFilter.SHOW_TEXT, null);
+    let cur;
+    while ((cur = walker.nextNode())) {
+      if (cur === node) return count + offset;
+      count += cur.length;
+    }
+    return count;
+  }
+
+  /**
+   * Restores a previously serialized selection inside the editable.
+   * @param {{ start: number, end: number }|null} saved
+   */
+  _restoreSelection(saved) {
+    if (!saved) return;
+    let startNode = null, startOff = 0;
+    let endNode = null, endOff = 0;
+    let count = 0;
+    const walker = document.createTreeWalker(this.editable, NodeFilter.SHOW_TEXT, null);
+    let cur;
+    while ((cur = walker.nextNode())) {
+      const len = cur.length;
+      if (!startNode && count + len >= saved.start) {
+        startNode = cur;
+        startOff = saved.start - count;
+      }
+      if (!endNode && count + len >= saved.end) {
+        endNode = cur;
+        endOff = saved.end - count;
+        break;
+      }
+      count += len;
+    }
+    if (!startNode) return;
+    if (!endNode) { endNode = startNode; endOff = startOff; }
+    try {
+      const range = document.createRange();
+      range.setStart(startNode, startOff);
+      range.setEnd(endNode, endOff);
+      const sel = window.getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+    } catch (_) { /* detached node — ignore */ }
+  }
+
+  _savePoint() {
+    // Trim future history if we're mid-stack
+    if (this.stackOffset < this.stack.length - 1) {
+      this.stack = this.stack.slice(0, this.stackOffset + 1);
+    }
+    const raw = this._serialize();
+    const { html, images } = this._tokenizeImages(raw);
+    this.stack.push({ html, images, sel: this._serializeSelection() });
+    if (this.stack.length > this._limit) {
+      this.stack.shift();
+    } else {
+      this.stackOffset++;
+    }
+  }
+
+  _restore(point) {
+    if (!point) return;
+    this.editable.innerHTML = this._detokenizeImages(point);
+    this._restoreSelection(point.sel);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Base64 tokenisation — keeps snapshot strings small so that the
+  // per-keystroke `recordUndo` string comparison stays fast even when the
+  // editor contains large embedded images.
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Replaces every `data:…;base64,…` occurrence in `html` with a compact
+   * token `__asn_img_0__`, `__asn_img_1__`, … and returns the tokenized
+   * string together with a map from token → original data URL.
+   * @param {string} html
+   * @returns {{ html: string, images: Object<string,string> }}
+   */
+  _tokenizeImages(html) {
+    const images = {};
+    let index = 0;
+    const tokenized = html.replace(/data:[^;]+;base64,[^"' >]*/g, (match) => {
+      const token = `__asn_img_${index}__`;
+      images[token] = match;
+      index++;
+      return token;
+    });
+    return { html: tokenized, images };
+  }
+
+  /**
+   * Restores a snapshot by replacing tokens back with their data URLs.
+   * @param {{ html: string, images: Object<string,string> }} point
+   * @returns {string}
+   */
+  _detokenizeImages(point) {
+    if (!point.images || Object.keys(point.images).length === 0) return point.html;
+    return point.html.replace(/__asn_img_\d+__/g, (token) => point.images[token] || token);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  /**
+   * Records the current editor state as a history checkpoint.
+   */
+  recordUndo() {
+    const current = this._serialize();
+    const { html: tokenized } = this._tokenizeImages(current);
+    const prev = this.stack[this.stackOffset];
+    if (prev && prev.html === tokenized) return; // No change
+    this._savePoint();
+  }
+
+  /**
+   * Undo to the previous state.
+   */
+  undo() {
+    if (this.stackOffset <= 0) return;
+    this.stackOffset--;
+    this._restore(this.stack[this.stackOffset]);
+  }
+
+  /**
+   * Redo to the next state.
+   */
+  redo() {
+    if (this.stackOffset >= this.stack.length - 1) return;
+    this.stackOffset++;
+    this._restore(this.stack[this.stackOffset]);
+  }
+
+  /**
+   * Resets the history stack (e.g. on editor destroy or full content replace).
+   */
+  reset() {
+    this.stack = [];
+    this.stackOffset = -1;
+    this._savePoint();
+  }
+
+  /** @returns {boolean} */
+  canUndo() {
+    return this.stackOffset > 0;
+  }
+
+  /** @returns {boolean} */
+  canRedo() {
+    return this.stackOffset < this.stack.length - 1;
+  }
+}

package/src/js/editing/Style.js

@@ -0,0 +1,329 @@
+/**
+ * Style.js - Inline / block style detection and application utilities
+ * Rewritten from Summernote's approach using vanilla JS + execCommand fallback
+ */
+
+import { closest, isElement, isPara } from '../core/dom.js';
+import { currentRange } from '../core/range.js';
+
+// ---------------------------------------------------------------------------
+// execCommand wrappers (still the most compatible way in contenteditable)
+// ---------------------------------------------------------------------------
+
+/**
+ * Applies a document execCommand.
+ * @param {string} cmd
+ * @param {string} [value]
+ * @returns {boolean}
+ */
+export function execCommand(cmd, value = null) {
+  return document.execCommand(cmd, false, value);
+}
+
+// ---------------------------------------------------------------------------
+// Inline style helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Bolds / unbolds the selection.
+ */
+export const bold = () => execCommand('bold');
+
+/**
+ * Italicises / un-italicises the selection.
+ */
+export const italic = () => execCommand('italic');
+
+/**
+ * Underlines / un-underlines the selection.
+ */
+export const underline = () => execCommand('underline');
+
+/**
+ * Strikethrough / removes strikethrough.
+ */
+export const strikethrough = () => execCommand('strikeThrough');
+
+/**
+ * Superscript toggle.
+ */
+export const superscript = () => execCommand('superscript');
+
+/**
+ * Subscript toggle.
+ */
+export const subscript = () => execCommand('subscript');
+
+/**
+ * Sets the foreground colour of the selected text.
+ * @param {string} color - CSS colour string
+ */
+export const foreColor = (color) => execCommand('foreColor', color);
+
+/**
+ * Sets the background (highlight) colour of the selected text.
+ * @param {string} color - CSS colour string
+ */
+export const backColor = (color) => execCommand('hiliteColor', color);
+
+/**
+ * Sets the font name for the selection.
+ * @param {string} name
+ */
+export const fontName = (name) => execCommand('fontName', name);
+
+/**
+ * Sets the font size (in pt or with unit) for the selection.
+ * Uses a span-based approach to set px sizes precisely.
+ * @param {string} size - e.g. '14px'
+ * @param {HTMLElement} [editable] - scoping element to avoid touching nodes outside this editor
+ */
+export function fontSize(size, editable = document) {
+  execCommand('fontSize', '7'); // placeholder
+  // Replace font elements with spans, scoped to the active editable
+  editable.querySelectorAll('font[size="7"]').forEach((el) => {
+    const span = document.createElement('span');
+    span.style.fontSize = size;
+    el.parentNode.insertBefore(span, el);
+    while (el.firstChild) span.appendChild(el.firstChild);
+    el.parentNode.removeChild(el);
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Block style helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Wraps the selection in the given block tag (p, h1-h6, blockquote, pre).
+ * @param {string} tagName
+ */
+export const formatBlock = (tagName) => execCommand('formatBlock', `<${tagName}>`);
+
+/**
+ * Left-aligns the current block.
+ */
+export const justifyLeft = () => execCommand('justifyLeft');
+
+/**
+ * Center-aligns the current block.
+ */
+export const justifyCenter = () => execCommand('justifyCenter');
+
+/**
+ * Right-aligns the current block.
+ */
+export const justifyRight = () => execCommand('justifyRight');
+
+/**
+ * Fully justifies the current block.
+ */
+export const justifyFull = () => execCommand('justifyFull');
+
+/**
+ * Indents the list or block.
+ */
+export const indent = () => execCommand('indent');
+
+/**
+ * Outdents the list or block.
+ */
+export const outdent = () => execCommand('outdent');
+
+/**
+ * Inserts an unordered list or converts selection.
+ */
+export const insertUnorderedList = () => execCommand('insertUnorderedList');
+
+/**
+ * Inserts an ordered list or converts selection.
+ */
+export const insertOrderedList = () => execCommand('insertOrderedList');
+
+// ---------------------------------------------------------------------------
+// Line-height helper
+// ---------------------------------------------------------------------------
+
+/**
+ * Applies a line-height value to every block-level element that intersects
+ * the current selection.
+ * @param {string} value - unitless multiplier, e.g. '1.5'
+ */
+export function lineHeight(value) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+
+  const range = sel.getRangeAt(0);
+  const BLOCK_TAGS = new Set(['P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'LI', 'BLOCKQUOTE', 'PRE', 'TD', 'TH']);
+
+  const nearestBlock = (node) => {
+    let el = node instanceof Element ? node : node.parentElement;
+    while (el) {
+      if (BLOCK_TAGS.has(el.tagName)) return el;
+      el = el.parentElement;
+    }
+    return null;
+  };
+
+  if (range.collapsed) {
+    const block = nearestBlock(range.startContainer);
+    if (block) block.style.lineHeight = value;
+    return;
+  }
+
+  // For a range selection, collect all unique block ancestors of text nodes
+  const blocks = new Set();
+  const iter = document.createNodeIterator(range.commonAncestorContainer, NodeFilter.SHOW_TEXT, null);
+  let textNode;
+  while ((textNode = iter.nextNode())) {
+    if (range.intersectsNode(textNode)) {
+      const block = nearestBlock(textNode);
+      if (block) blocks.add(block);
+    }
+  }
+  if (blocks.size === 0) {
+    const block = nearestBlock(range.commonAncestorContainer);
+    if (block) blocks.add(block);
+  }
+  blocks.forEach((block) => { block.style.lineHeight = value; });
+}
+
+// ---------------------------------------------------------------------------
+// Style query helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns the computed styles relevant to the current cursor position.
+ * @param {HTMLElement} editable
+ * @returns {object} styleMap
+ */
+export function currentStyle(editable) {
+  const range = currentRange(editable);
+  if (!range) return {};
+
+  const container = range.isCollapsed()
+    ? range.sc
+    : range.commonAncestor();
+
+  const el = isElement(container) ? container : container.parentElement;
+  if (!el) return {};
+
+  const computed = window.getComputedStyle(el);
+
+  return {
+    bold: document.queryCommandState('bold'),
+    italic: document.queryCommandState('italic'),
+    underline: document.queryCommandState('underline'),
+    strikethrough: document.queryCommandState('strikeThrough'),
+    superscript: document.queryCommandState('superscript'),
+    subscript: document.queryCommandState('subscript'),
+    fontSize: computed.fontSize,
+    fontFamily: computed.fontFamily,
+    color: computed.color,
+    backgroundColor: computed.backgroundColor,
+    textAlign: computed.textAlign,
+    lineHeight: computed.lineHeight,
+    formatBlock: (closest(el, isPara, editable) || { nodeName: 'p' }).nodeName.toLowerCase(),
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Inline code toggle
+// ---------------------------------------------------------------------------
+
+/**
+ * Wraps the selection in an inline <code> element, or unwraps it if the
+ * cursor is already inside a <code> that is not inside a <pre>.
+ * @param {HTMLElement} [editable]
+ */
+export function toggleInlineCode(editable) {
+  const sel = window.getSelection();
+  if (!sel || !sel.rangeCount) return;
+  const range = sel.getRangeAt(0);
+  let container = range.commonAncestorContainer;
+  if (container.nodeType === 3) container = container.parentElement;
+  const codeEl = container && container.closest ? container.closest('code') : null;
+  if (codeEl && !codeEl.closest('pre')) {
+    // Unwrap
+    const parent = codeEl.parentNode;
+    while (codeEl.firstChild) parent.insertBefore(codeEl.firstChild, codeEl);
+    parent.removeChild(codeEl);
+    if (editable) editable.normalize();
+  } else {
+    if (range.collapsed) return;
+    try {
+      const code = document.createElement('code');
+      range.surroundContents(code);
+    } catch {
+      // surroundContents fails across element boundaries — extract and rewrap
+      const frag = range.extractContents();
+      const code = document.createElement('code');
+      code.appendChild(frag);
+      range.insertNode(code);
+    }
+  }
+}
+
+/**
+ * Returns true when the cursor / selection is inside an inline <code>
+ * (not nested in a <pre>).
+ * @returns {boolean}
+ */
+export function isInlineCode() {
+  const sel = window.getSelection();
+  if (!sel || !sel.rangeCount) return false;
+  let container = sel.getRangeAt(0).commonAncestorContainer;
+  if (container.nodeType === 3) container = container.parentElement;
+  const code = container && container.closest ? container.closest('code') : null;
+  return !!(code && !code.closest('pre'));
+}
+
+// ---------------------------------------------------------------------------
+// Checklist (task list)
+// ---------------------------------------------------------------------------
+
+/**
+ * Toggles a task-list at the cursor.
+ * If inside a checklist <li>, converts it back to a <p>.
+ * Otherwise inserts a new <ul class="an-checklist"> with one item.
+ */
+export function toggleChecklist() {
+  const sel = window.getSelection();
+  if (!sel || !sel.rangeCount) return;
+  const range = sel.getRangeAt(0);
+  let container = range.commonAncestorContainer;
+  if (container.nodeType === 3) container = container.parentElement;
+  const li = container && container.closest ? container.closest('.an-checklist li') : null;
+  if (li) {
+    // Exit checklist — convert item to a <p>
+    const ul = li.closest('.an-checklist');
+    const text = Array.from(li.childNodes)
+      .filter((n) => !(n.nodeType === 1 && n.tagName === 'INPUT'))
+      .map((n) => n.textContent).join('').replace(/\u00a0/g, ' ').trim();
+    const p = document.createElement('p');
+    p.textContent = text || '\u00a0';
+    ul.parentNode.insertBefore(p, ul.nextSibling);
+    ul.removeChild(li);
+    if (ul.children.length === 0) ul.remove();
+    const nr = document.createRange();
+    nr.setStart(p, 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>`);
+  }
+}
+
+/**
+ * Returns true when the cursor is inside a checklist item.
+ * @returns {boolean}
+ */
+export function isInChecklist() {
+  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('.an-checklist li'));
+}

package/src/js/editing/Table.js

@@ -0,0 +1,59 @@
+/**
+ * Table.js - Table creation and manipulation utilities
+ * Inspired by Summernote's table handling
+ */
+
+import { createElement } from '../core/dom.js';
+import { execCommand } from './Style.js';
+
+// ---------------------------------------------------------------------------
+// Table creation
+// ---------------------------------------------------------------------------
+
+/**
+ * Creates a table element with the specified dimensions.
+ * @param {number} cols
+ * @param {number} rows
+ * @param {{ headerRow?: boolean }} [opts]
+ * @returns {HTMLTableElement}
+ */
+export function createTable(cols, rows, opts = {}) {
+  const { headerRow = false } = opts;
+  const table = createElement('table', { class: 'an-table' });
+
+  if (headerRow && rows > 0) {
+    const thead = createElement('thead');
+    const tr = createElement('tr');
+    for (let c = 0; c < cols; c++) {
+      const th = createElement('th', {}, ['\u00a0']);
+      tr.appendChild(th);
+    }
+    thead.appendChild(tr);
+    table.appendChild(thead);
+  }
+
+  const bodyRows = headerRow ? Math.max(rows - 1, 1) : rows;
+  const tbody = createElement('tbody');
+  table.appendChild(tbody);
+
+  for (let r = 0; r < bodyRows; r++) {
+    const tr = createElement('tr');
+    for (let c = 0; c < cols; c++) {
+      const td = createElement('td', {}, ['\u00a0']); // &nbsp;
+      tr.appendChild(td);
+    }
+    tbody.appendChild(tr);
+  }
+  return table;
+}
+
+/**
+ * Inserts a table at the current cursor position.
+ * @param {number} cols
+ * @param {number} rows
+ * @param {{ headerRow?: boolean }} [opts]
+ */
+export function insertTable(cols, rows, opts = {}) {
+  const table = createTable(cols, rows, opts);
+  execCommand('insertHTML', table.outerHTML);
+}