npm - autumnnote - Versions diffs - 1.0.0 - Mend

autumnnote 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (50) hide show

package/LICENSE +21 -0
package/README.md +874 -0
package/dist/autumnnote.css +1 -0
package/dist/autumnnote.es.js +5888 -0
package/dist/autumnnote.es.js.map +1 -0
package/dist/autumnnote.umd.js +74 -0
package/dist/autumnnote.umd.js.map +1 -0
package/package.json +55 -0
package/src/js/Context.js +497 -0
package/src/js/core/dom.js +315 -0
package/src/js/core/env.js +25 -0
package/src/js/core/func.js +153 -0
package/src/js/core/key.js +66 -0
package/src/js/core/lists.js +121 -0
package/src/js/core/markdown.js +294 -0
package/src/js/core/range.js +194 -0
package/src/js/core/sanitise.js +78 -0
package/src/js/editing/History.js +205 -0
package/src/js/editing/Style.js +329 -0
package/src/js/editing/Table.js +59 -0
package/src/js/editing/Typing.js +142 -0
package/src/js/index.js +126 -0
package/src/js/module/Buttons.js +300 -0
package/src/js/module/Clipboard.js +460 -0
package/src/js/module/CodeTooltip.js +428 -0
package/src/js/module/Codeview.js +122 -0
package/src/js/module/ContextMenu.js +470 -0
package/src/js/module/Editor.js +528 -0
package/src/js/module/EmojiDialog.js +726 -0
package/src/js/module/FindReplace.js +440 -0
package/src/js/module/Fullscreen.js +80 -0
package/src/js/module/IconDialog.js +620 -0
package/src/js/module/ImageDialog.js +208 -0
package/src/js/module/ImageResizer.js +216 -0
package/src/js/module/ImageTooltip.js +286 -0
package/src/js/module/LinkDialog.js +204 -0
package/src/js/module/LinkTooltip.js +242 -0
package/src/js/module/Placeholder.js +44 -0
package/src/js/module/ShortcutsDialog.js +141 -0
package/src/js/module/Statusbar.js +238 -0
package/src/js/module/TableTooltip.js +568 -0
package/src/js/module/Toolbar.js +562 -0
package/src/js/module/VideoDialog.js +263 -0
package/src/js/module/VideoResizer.js +227 -0
package/src/js/module/VideoTooltip.js +252 -0
package/src/js/renderer.js +107 -0
package/src/js/settings.js +134 -0
package/src/styles/_variables.scss +48 -0
package/src/styles/autumnnote.scss +1740 -0
package/types/index.d.ts +324 -0

package/src/js/core/markdown.js ADDED Viewed

@@ -0,0 +1,294 @@
+/**
+ * markdown.js - Lightweight Markdown → HTML converter for paste handling.
+ *
+ * Handles: headings H1–H6, bold/italic/strikethrough/inline-code, fenced code
+ * blocks (with language), blockquotes, unordered/ordered lists, horizontal
+ * rules, links, images, and plain paragraphs.
+ *
+ * The HTML output MUST be passed through sanitiseHTML() before insertion.
+ */
+/**
+ * Converts an HTML string to Markdown.
+ * Handles: headings, paragraphs, bold/italic/del/code, links, images,
+ * unordered/ordered lists, blockquote, pre/code blocks, tables, hr.
+ * @param {string} html
+ * @returns {string}
+ */
+export function htmlToMarkdown(html) {
+  const doc = new DOMParser().parseFromString(`<body>${html || ''}</body>`, 'text/html');
+  return _domToMd(doc.body).replace(/\n{3,}/g, '\n\n').trim();
+}
+function _domToMd(node) {
+  if (node.nodeType === 3) {
+    return node.textContent.replace(/\s+/g, ' ');
+  }
+  if (node.nodeType !== 1) return '';
+  const tag = node.nodeName.toLowerCase();
+  const inner = () => Array.from(node.childNodes).map(_domToMd).join('');
+  switch (tag) {
+    case 'p':
+    case 'div':      return `\n\n${inner()}\n\n`;
+    case 'br':       return '  \n';
+    case 'h1':       return `\n\n# ${inner()}\n\n`;
+    case 'h2':       return `\n\n## ${inner()}\n\n`;
+    case 'h3':       return `\n\n### ${inner()}\n\n`;
+    case 'h4':       return `\n\n#### ${inner()}\n\n`;
+    case 'h5':       return `\n\n##### ${inner()}\n\n`;
+    case 'h6':       return `\n\n###### ${inner()}\n\n`;
+    case 'strong':
+    case 'b':        return `**${inner()}**`;
+    case 'em':
+    case 'i':        return `*${inner()}*`;
+    case 'del':
+    case 's':
+    case 'strike':   return `~~${inner()}~~`;
+    case 'sup':      return `^${inner()}`;
+    case 'sub':      return `~${inner()}`;
+    case 'code': {
+      // Inside <pre> we emit raw text; outside we wrap in backticks
+      if (node.closest('pre')) return inner();
+      return `\`${inner()}\``;
+    }
+    case 'pre': {
+      const codeEl = node.querySelector('code');
+      const langMatch = ((codeEl && codeEl.className) || '').match(/language-(\S+)/);
+      const lang = langMatch ? langMatch[1] : '';
+      const content = (codeEl || node).textContent || '';
+      return `\n\n\`\`\`${lang}\n${content}\n\`\`\`\n\n`;
+    }
+    case 'blockquote': {
+      const lines = inner().trim().split('\n');
+      return `\n\n${lines.map((l) => `> ${l}`).join('\n')}\n\n`;
+    }
+    case 'a': {
+      const href = node.getAttribute('href') || '';
+      return `[${inner()}](${href})`;
+    }
+    case 'img': {
+      const src = node.getAttribute('src') || '';
+      const alt = node.getAttribute('alt') || '';
+      return `![${alt}](${src})`;
+    }
+    case 'ul': {
+      const items = Array.from(node.querySelectorAll(':scope > li'));
+      if (!items.length) return inner();
+      return `\n\n${items.map((li) => `- ${_domToMd(li).trim()}`).join('\n')}\n\n`;
+    }
+    case 'ol': {
+      const items = Array.from(node.querySelectorAll(':scope > li'));
+      if (!items.length) return inner();
+      return `\n\n${items.map((li, i) => `${i + 1}. ${_domToMd(li).trim()}`).join('\n')}\n\n`;
+    }
+    case 'li':  return inner();
+    case 'hr':  return '\n\n---\n\n';
+    case 'table': {
+      const rows = Array.from(node.querySelectorAll('tr'));
+      if (!rows.length) return inner();
+      const cellTexts = rows.map((tr) =>
+        Array.from(tr.querySelectorAll('th, td')).map((c) => c.textContent.trim().replace(/\|/g, '\\|')),
+      );
+      const cols = Math.max(...cellTexts.map((r) => r.length));
+      const padRow = (row) => { const r = [...row]; while (r.length < cols) r.push(''); return r; };
+      let md = '\n\n';
+      md += `| ${padRow(cellTexts[0]).join(' | ')} |\n`;
+      md += `| ${Array(cols).fill('---').join(' | ')} |\n`;
+      for (let r = 1; r < cellTexts.length; r++) {
+        md += `| ${padRow(cellTexts[r]).join(' | ')} |\n`;
+      }
+      return md + '\n';
+    }
+    default: return inner();
+  }
+}
+/**
+ * Returns true if the text contains recognisable Markdown patterns.
+ * @param {string} text
+ * @returns {boolean}
+ */
+export function isMarkdown(text) {
+  return /^#{1,6} \S|^\s*[-*+] \S|^\s*\d+\. \S|^> \S|\*{2}.+?\*{2}|^```/m.test(text);
+}
+/**
+ * Converts a Markdown string to an HTML string.
+ * @param {string} text
+ * @returns {string}
+ */
+export function markdownToHTML(text) {
+  const lines = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n');
+  const out = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    // ---- Fenced code block ``` lang ... ``` -----------------------------------
+    const fenceMatch = line.match(/^```(\S*)$/);
+    if (fenceMatch) {
+      const lang = fenceMatch[1];
+      const codeLines = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith('```')) {
+        codeLines.push(_esc(lines[i]));
+        i++;
+      }
+      const langAttr = lang ? ` class="language-${_escAttr(lang)}"` : '';
+      out.push(`<pre><code${langAttr}>${codeLines.join('\n')}</code></pre>`);
+      i++; // skip closing ```
+      continue;
+    }
+    // ---- Horizontal rule --- / *** / _________________________________________
+    if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
+      out.push('<hr>');
+      i++;
+      continue;
+    }
+    // ---- ATX Headings # – ######  -------------------------------------------
+    const hMatch = line.match(/^(#{1,6})\s+(.+)$/);
+    if (hMatch) {
+      const level = hMatch[1].length;
+      out.push(`<h${level}>${_inline(hMatch[2])}</h${level}>`);
+      i++;
+      continue;
+    }
+    // ---- Blockquote  > text --------------------------------------------------
+    if (line.startsWith('> ')) {
+      const bqLines = [];
+      while (i < lines.length && lines[i].startsWith('> ')) {
+        bqLines.push(lines[i].slice(2));
+        i++;
+      }
+      out.push(`<blockquote>${bqLines.map(_inline).join('<br>')}</blockquote>`);
+      continue;
+    }
+    // ---- Unordered list  - / * / + item  ------------------------------------
+    if (/^[-*+] /.test(line)) {
+      const items = [];
+      while (i < lines.length && /^[-*+] /.test(lines[i])) {
+        items.push(`<li>${_inline(lines[i].slice(2))}</li>`);
+        i++;
+      }
+      out.push(`<ul>${items.join('')}</ul>`);
+      continue;
+    }
+    // ---- Ordered list  1. item  ----------------------------------------------
+    if (/^\d+\. /.test(line)) {
+      const items = [];
+      while (i < lines.length && /^\d+\. /.test(lines[i])) {
+        items.push(`<li>${_inline(lines[i].replace(/^\d+\. /, ''))}</li>`);
+        i++;
+      }
+      out.push(`<ol>${items.join('')}</ol>`);
+      continue;
+    }
+    // ---- Blank line ----------------------------------------------------------
+    if (line.trim() === '') {
+      i++;
+      continue;
+    }
+    // ---- GFM Table  | col | col | -------------------------------------------
+    // A table starts with a pipe-prefixed or pipe-containing line followed by
+    // a separator row (| --- | --- |). We detect and collect all rows.
+    if (/^\|.+\|/.test(line) && i + 1 < lines.length && /^\|[\s|:-]+\|/.test(lines[i + 1])) {
+      const headerCells = _parseTableRow(line);
+      i += 2; // skip header + separator
+      const bodyRows = [];
+      while (i < lines.length && /^\|.+\|/.test(lines[i])) {
+        bodyRows.push(_parseTableRow(lines[i]));
+        i++;
+      }
+      const thead = `<thead><tr>${headerCells.map((c) => `<th>${_inline(c)}</th>`).join('')}</tr></thead>`;
+      const tbody = bodyRows.length
+        ? `<tbody>${bodyRows.map((row) => `<tr>${row.map((c) => `<td>${_inline(c)}</td>`).join('')}</tr>`).join('')}</tbody>`
+        : '';
+      out.push(`<table>${thead}${tbody}</table>`);
+      continue;
+    }
+    // ---- Paragraph: collect consecutive non-block lines ---------------------
+    const paraLines = [];
+    while (
+      i < lines.length &&
+      lines[i].trim() !== '' &&
+      !/^(#{1,6} |> |[-*+] |\d+\. |```|---\s*$|\*{3}\s*$|_{3}\s*$)/.test(lines[i]) &&
+      !/^\|.+\|/.test(lines[i])
+    ) {
+      paraLines.push(lines[i]);
+      i++;
+    }
+    if (paraLines.length) {
+      out.push(`<p>${_inline(paraLines.join(' '))}</p>`);
+    }
+  }
+  return out.join('');
+}
+// ---------------------------------------------------------------------------
+// Inline formatting
+// ---------------------------------------------------------------------------
+/**
+ * Splits a GFM table row string into trimmed cell strings.
+ * '| a | b | c |' → ['a', 'b', 'c']
+ * @param {string} row
+ * @returns {string[]}
+ */
+function _parseTableRow(row) {
+  return row
+    .replace(/^\|/, '')
+    .replace(/\|$/, '')
+    .split('|')
+    .map((c) => c.trim());
+}
+function _inline(text) {
+  // Images before links (they share [] syntax)
+  text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_, alt, src) =>
+    `<img src="${_escAttr(src)}" alt="${_escAttr(alt)}" class="an-image">`);
+  // Links
+  text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, href) =>
+    `<a href="${_escAttr(href)}">${_esc(label)}</a>`);
+  // Bold + italic  ***text***
+  text = text.replace(/\*{3}(.+?)\*{3}/g, (_, c) => `<strong><em>${_esc(c)}</em></strong>`);
+  text = text.replace(/_{3}(.+?)_{3}/g,   (_, c) => `<strong><em>${_esc(c)}</em></strong>`);
+  // Bold  **text**
+  text = text.replace(/\*{2}(.+?)\*{2}/g, (_, c) => `<strong>${_esc(c)}</strong>`);
+  text = text.replace(/_{2}(.+?)_{2}/g,   (_, c) => `<strong>${_esc(c)}</strong>`);
+  // Italic  *text*  _text_
+  text = text.replace(/\*([^*\n]+?)\*/g, (_, c) => `<em>${_esc(c)}</em>`);
+  text = text.replace(/_([^_\n]+?)_/g,   (_, c) => `<em>${_esc(c)}</em>`);
+  // Strikethrough  ~~text~~
+  text = text.replace(/~~(.+?)~~/g, (_, c) => `<del>${_esc(c)}</del>`);
+  // Inline code  `code`
+  text = text.replace(/`([^`]+)`/g, (_, c) => `<code>${_esc(c)}</code>`);
+  return text;
+}
+function _esc(v) {
+  return String(v)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+function _escAttr(v) {
+  return String(v)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}

package/src/js/core/range.js ADDED Viewed

@@ -0,0 +1,194 @@
+/**
+ * range.js - Selection and Range utilities
+ * Inspired by Summernote's range.js — rewritten as vanilla JS
+ */
+import { isElement, closest } from './dom.js';
+// ---------------------------------------------------------------------------
+// WrappedRange — a convenience wrapper over the native Range API
+// ---------------------------------------------------------------------------
+export class WrappedRange {
+  /**
+   * @param {Node} sc - start container
+   * @param {number} so - start offset
+   * @param {Node} ec - end container
+   * @param {number} eo - end offset
+   */
+  constructor(sc, so, ec, eo) {
+    this.sc = sc;
+    this.so = so;
+    this.ec = ec;
+    this.eo = eo;
+  }
+  /** @returns {boolean} */
+  isCollapsed() {
+    return this.sc === this.ec && this.so === this.eo;
+  }
+  /** @returns {Range} */
+  toNativeRange() {
+    const range = document.createRange();
+    try {
+      range.setStart(this.sc, this.so);
+      range.setEnd(this.ec, this.eo);
+    } catch (_e) {
+      // Guard against detached nodes
+    }
+    return range;
+  }
+  /**
+   * Select this wrapped range in the window.
+   */
+  select() {
+    const sel = window.getSelection();
+    if (!sel) return;
+    sel.removeAllRanges();
+    sel.addRange(this.toNativeRange());
+  }
+  /**
+   * Returns the common ancestor element of this range.
+   * @returns {Element|null}
+   */
+  commonAncestor() {
+    const native = this.toNativeRange();
+    const ancestor = native.commonAncestorContainer;
+    return isElement(ancestor) ? ancestor : ancestor.parentElement;
+  }
+  /**
+   * Returns the nearest paragraph/block ancestor within the editable area.
+   * @param {HTMLElement} editable
+   * @returns {Element|null}
+   */
+  blockNode(editable) {
+    return closest(this.sc, (n) => isElement(n) && n !== editable, editable);
+  }
+  /**
+   * Returns either the selected text string or empty string.
+   * @returns {string}
+   */
+  toString() {
+    return this.toNativeRange().toString();
+  }
+  /**
+   * Returns the bounding DOMRect of the range (or null).
+   * @returns {DOMRect|null}
+   */
+  getClientRects() {
+    const rects = this.toNativeRange().getClientRects();
+    return rects.length > 0 ? rects[rects.length - 1] : null;
+  }
+  /**
+   * Inserts a node at the start of this range.
+   * @param {Node} node
+   */
+  insertNode(node) {
+    const native = this.toNativeRange();
+    native.insertNode(node);
+  }
+}
+// ---------------------------------------------------------------------------
+// Factory helpers
+// ---------------------------------------------------------------------------
+/**
+ * Creates a WrappedRange from a native Range object.
+ * @param {Range} range
+ * @returns {WrappedRange}
+ */
+export function fromNativeRange(range) {
+  return new WrappedRange(
+    range.startContainer,
+    range.startOffset,
+    range.endContainer,
+    range.endOffset,
+  );
+}
+/**
+ * Returns a WrappedRange for the current window selection,
+ * optionally restricted to a given editable element.
+ * @param {HTMLElement} [editable]
+ * @returns {WrappedRange|null}
+ */
+export function currentRange(editable) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return null;
+  const native = sel.getRangeAt(0);
+  // Optionally check that the selection is inside the editable element
+  if (editable && !editable.contains(native.commonAncestorContainer)) {
+    return null;
+  }
+  return fromNativeRange(native);
+}
+/**
+ * Creates a WrappedRange that covers the entire content of an element.
+ * @param {HTMLElement} el
+ * @returns {WrappedRange}
+ */
+export function rangeFromElement(el) {
+  return new WrappedRange(el, 0, el, el.childNodes.length);
+}
+/**
+ * Creates a collapsed range (cursor) at the given node / offset.
+ * @param {Node} node
+ * @param {number} offset
+ * @returns {WrappedRange}
+ */
+export function collapsedRange(node, offset = 0) {
+  return new WrappedRange(node, offset, node, offset);
+}
+// ---------------------------------------------------------------------------
+// Utility helpers
+// ---------------------------------------------------------------------------
+/**
+ * Returns true if the current selection is inside the given element.
+ * @param {HTMLElement} el
+ * @returns {boolean}
+ */
+export function isSelectionInside(el) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return false;
+  return el.contains(sel.getRangeAt(0).commonAncestorContainer);
+}
+/**
+ * Saves the current selection, executes fn, then restores the selection.
+ * @param {Function} fn
+ */
+export function withSavedRange(fn) {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) {
+    fn(null);
+    return;
+  }
+  const saved = sel.getRangeAt(0).cloneRange();
+  fn(fromNativeRange(saved));
+  sel.removeAllRanges();
+  sel.addRange(saved);
+}
+/**
+ * Splits the text node at the given offset and returns the two halves.
+ * @param {Text} textNode
+ * @param {number} offset
+ * @returns {[Text, Text]}
+ */
+export function splitText(textNode, offset) {
+  const after = textNode.splitText(offset);
+  return [textNode, after];
+}

package/src/js/core/sanitise.js ADDED Viewed

@@ -0,0 +1,78 @@
+/**
+ * sanitise.js - Shared HTML and URL sanitisation utilities
+ *
+ * Single source of truth used by Editor, Clipboard, Codeview, and renderer.
+ * 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', 'input', 'button'];
+/** Attributes whose values must be sanitised as URLs. */
+const URL_ATTRS = ['href', 'src', 'action', 'formaction'];
+/**
+ * Sanitises an HTML string by removing dangerous elements and attributes.
+ * Uses DOMParser so the sanitisation follows normal browser parsing rules —
+ * no regex shortcuts that can be bypassed by encoding tricks.
+ *
+ * - Strips PROHIBITED_TAGS (script, style, iframe, object, embed, form, input, button)
+ * - Removes all on* event-handler attributes
+ * - Rejects javascript: and vbscript: URLs in URL attributes
+ * - Rejects data: URIs everywhere except img[src] (base64 uploads)
+ *
+ * @param {string} html
+ * @returns {string}
+ */
+export function sanitiseHTML(html, { allowIframes = false } = {}) {
+  const doc = new DOMParser().parseFromString(`<body>${html || ''}</body>`, 'text/html');
+  // Remove outright dangerous elements (optionally preserve iframes for video embeds)
+  const tags = allowIframes ? PROHIBITED_TAGS.filter((t) => t !== 'iframe') : PROHIBITED_TAGS;
+  tags.forEach((tag) => {
+    doc.querySelectorAll(tag).forEach((el) => el.remove());
+  });
+  // Strip dangerous attributes from remaining elements
+  doc.querySelectorAll('*').forEach((el) => {
+    Array.from(el.attributes).forEach((attr) => {
+      // Remove all event handlers (onclick, onload, onerror, …)
+      if (attr.name.startsWith('on')) {
+        el.removeAttribute(attr.name);
+        return;
+      }
+      // Sanitise URL attributes
+      if (URL_ATTRS.includes(attr.name)) {
+        const val = attr.value.trim();
+        // Block javascript: and vbscript: protocols
+        if (/^(javascript|vbscript):/i.test(val)) {
+          el.removeAttribute(attr.name);
+          return;
+        }
+        // Allow data: URIs only on img[src] (base64 image uploads); block elsewhere
+        if (/^data:/i.test(val) && !(attr.name === 'src' && el.tagName === 'IMG')) {
+          el.removeAttribute(attr.name);
+        }
+      }
+    });
+  });
+  return doc.body.innerHTML;
+}
+/**
+ * Sanitises a URL string, rejecting dangerous protocols.
+ *
+ * Blocked protocols: javascript:, vbscript:
+ * Optionally blocked: data: (safe to allow for img/src base64 embeds)
+ *
+ * @param {string} url
+ * @param {{ allowData?: boolean }} [opts]
+ * @returns {string|null} The original URL if safe, null if rejected.
+ */
+export function sanitiseUrl(url, { allowData = false } = {}) {
+  const trimmed = (url || '').trim();
+  if (/^(javascript|vbscript):/i.test(trimmed)) return null;
+  if (!allowData && /^data:/i.test(trimmed)) return null;
+  return url;
+}