autumnnote 1.8.2 → 1.9.1

package/README.md

@@ -177,6 +177,9 @@ Official React and Vue 3 wrappers are available as separate packages in this mon
 
 ```bash
 npm install autumnnote autumnnote-react
+```
+
+```js
 import 'autumnnote/dist/autumnnote.css';
 ```
 
@@ -206,6 +209,9 @@ The `ref` is forwarded to the underlying `Context` instance via `useImperativeHa
 
 ```bash
 npm install autumnnote autumnnote-vue
+```
+
+```js
 import 'autumnnote/dist/autumnnote.css';
 ```
 
@@ -260,7 +266,6 @@ const editor = AutumnNote.create('#my-editor', {
 ```js
 const editor = AutumnNote.create('#my-editor', {
   useBootstrap: true,
-  bootstrapVersion: 5,
   toolbarButtonClass: 'btn btn-sm btn-light',
 });
 ```
@@ -296,7 +301,7 @@ const editor = AutumnNote.create('#my-editor', {
     fd.append('file', files[0]);
     fetch('/api/upload', { method: 'POST', body: fd })
       .then(r => r.json())
-      .then(({ url }) => editor.insertImage(url, files[0].name));
+      .then(({ url }) => editor.invoke('editor.insertImage', url, files[0].name));
   },
 });
 ```
@@ -462,7 +467,6 @@ See the [full Plugin API docs →](https://autumn.konexforge.com/docs.html#plugi
 | `toolbar` | `Array[]` | all buttons | Toolbar layout. See [Toolbar Customisation](#toolbar-customisation). |
 | `toolbarOverflow` | `string` | `'wrap'` | Toolbar overflow strategy: `'wrap'` or `'scroll'`. |
 | `useBootstrap` | `boolean` | `false` | Apply Bootstrap CSS classes to toolbar buttons. |
-| `bootstrapVersion` | `number` | `5` | Bootstrap major version (`4` or `5`). |
 | `toolbarButtonClass` | `string` | `'btn btn-sm btn-light'` | CSS classes for toolbar buttons when `useBootstrap` is `true`. |
 | `useFontAwesome` | `boolean` | `true` | Use FA icons when FontAwesome is detected on the page. |
 | `fontAwesomeClass` | `string` | `'fas'` | FA prefix: `'fas'` for FA 5, `'fa-solid'` for FA 6. |
@@ -479,7 +483,7 @@ See the [full Plugin API docs →](https://autumn.konexforge.com/docs.html#plugi
 | `fontFamilies` | `string[]` | 10 fonts | Font families available in the font-family dropdown. |
 | `stickyToolbar` | `boolean` | `false` | Pin the toolbar to the viewport top when the page is scrolled. |
 | `stickyToolbarOffset` | `number` | `0` | Top offset in pixels for the sticky toolbar (e.g. height of a fixed nav bar). |
-| `theme` | `string` | `'light'` | Colour theme: `'light'` or `'dark'`. |
+| `theme` | `string` | `'light'` | Colour theme: `'light'`, `'dark'`, or `'auto'` (follows system preference). |
 | `readOnly` | `boolean` | `false` | Start the editor in non-editable (read-only) mode with toolbar hidden. |
 | `spellcheck` | `boolean` | `true` | Enable browser spellcheck in the editable area. |
 | `direction` | `string` | `'ltr'` | Text direction: `'ltr'` or `'rtl'`. |
@@ -495,10 +499,12 @@ See the [full Plugin API docs →](https://autumn.konexforge.com/docs.html#plugi
 | `lang` | `string \| object` | `'en'` | UI display language. Built-in codes: `'en'`, `'vi'`, `'ja'`, `'zh'`, `'fr'`, `'de'`, `'es'`, `'ko'`. Pass a partial locale object for custom overrides. |
 | `markdownShortcuts` | `boolean` | `true` | Convert Markdown-style syntax typed in the editor to HTML in real time (block and inline rules). |
 | `bubbleToolbar` | `boolean` | `false` | Show a mini floating toolbar above the text selection for quick formatting. |
-| `bubbleToolbarItems` | `string[]` | `['bold','italic','underline','link','foreColor','removeFormat']` | Buttons shown in the bubble toolbar. Available names: `'bold'`, `'italic'`, `'underline'`, `'strikethrough'`, `'link'`, `'foreColor'`, `'removeFormat'`, `'inlineCode'`. |
+| `bubbleToolbarItems` | `string[]` | `['bold','italic','underline','link','foreColor','hiliteColor','removeFormat']` | Buttons shown in the bubble toolbar. Available names: `'bold'`, `'italic'`, `'underline'`, `'strikethrough'`, `'link'`, `'foreColor'`, `'hiliteColor'`, `'removeFormat'`, `'inlineCode'`. |
 | `autoSaveRestore` | `boolean` | `false` | When `autoSave` is also `true`, show a restore banner on load if a draft exists. |
 | `autoSaveRestoreTimeout` | `number` | `7` | Max draft age in days before it is auto-discarded. `0` = no expiry. |
 | `onAutoSaveRestore` | `Function` | `null` | `(html, context) => void` — called after the user restores a draft. |
+| `maxPasteSize` | `number` | `5242880` | Maximum paste payload size in bytes (default 5 MB). Pastes larger than this are silently dropped. |
+| `minImageSize` | `number` | `20` | Minimum image dimension in px during resize (width and height). |
 | `mention` | `object` | `null` | @mention configuration object. Set `mention.onSearch` to activate. See [Mentions](#mentions). |
 | `onChange` | `Function` | `null` | `(html: string) => void` — called on every content change. |
 | `onFocus` | `Function` | `null` | `(context) => void` — called when the editor gains focus. |

package/dist/autumnnote.es.js

@@ -1724,6 +1724,8 @@ var defaultOptions = {
 	autoSaveRestoreTimeout: 7,
 	onAutoSaveRestore: null,
 	markdownShortcuts: true,
+	maxPasteSize: 5 * 1024 * 1024,
+	minImageSize: 20,
 	bubbleToolbar: false,
 	bubbleToolbarItems: [
 		"bold",
@@ -5594,7 +5596,7 @@ function _domToMd(node, depth = 0) {
 * @returns {boolean} `true` if any Markdown-like pattern is present, `false` otherwise.
 */
 function isMarkdown(text) {
-	return /^#{1,6} [^\s]|^[ \t]*[-*+] [^\s]|^[ \t]*\d+\. [^\s]|^> [^\s]|^```|^\*{2}[^*\n]+\*{2}/m.test(text);
+	return /^#{1,6} [^\s]|^[ \t]*[-*+] [^\s]|^[ \t]*\d+\. [^\s]|^> [^\s]|^```|^\*{2}[^*\n]+\*{2}/m.test(text) || /^.+\n=+\s*$/m.test(text) || /^.+\n-{2,}\s*$/m.test(text);
 }
 /**
 * Converts a Markdown string to an HTML string.
@@ -5621,6 +5623,18 @@ function markdownToHTML(text) {
 			i++;
 			continue;
 		}
+		if (line.trim() && !/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line) && !/^#{1,6} /.test(line) && i + 1 < lines.length) {
+			if (/^=+\s*$/.test(lines[i + 1])) {
+				out.push(`<h1>${_inline(line.trim())}</h1>`);
+				i += 2;
+				continue;
+			}
+			if (/^-{2,}\s*$/.test(lines[i + 1])) {
+				out.push(`<h2>${_inline(line.trim())}</h2>`);
+				i += 2;
+				continue;
+			}
+		}
 		if (/^(-{3,}|\*{3,}|_{3,})\s*$/.test(line)) {
 			out.push("<hr>");
 			i++;
@@ -5643,30 +5657,15 @@ function markdownToHTML(text) {
 			continue;
 		}
 		if (/^[-*+] /.test(line)) {
-			const items = [];
-			const isChecklist = /^[-*+]\s+\[[ xX]\]\s+/.test(line);
-			const listTag = isChecklist ? "ul class=\"an-checklist\"" : "ul";
-			while (i < lines.length && /^[-*+] /.test(lines[i])) {
-				if (/^[-*+]\s+\[[ xX]\]\s+/.test(lines[i]) !== isChecklist) break;
-				const content = lines[i].slice(2);
-				if (isChecklist) {
-					const cbMatch = /^\[([ xX])\][ \t]+/.exec(content);
-					const cbHtml = `<input type="checkbox" contenteditable="false"${cbMatch?.[1]?.toLowerCase() === "x" ? " checked" : ""}>`;
-					const textContent = cbMatch ? content.slice(cbMatch[0].length) : content;
-					items.push(`<li>${cbHtml}${_inline(textContent)}</li>`);
-				} else items.push(`<li>${_inline(content)}</li>`);
-				i++;
-			}
-			out.push(`<${listTag}>${items.join("")}</${listTag.split(" ")[0]}>`);
+			const { html: listHtml, endIdx } = _parseListBlock(lines, i);
+			out.push(listHtml);
+			i = endIdx;
 			continue;
 		}
 		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>`);
+			const { html: listHtml, endIdx } = _parseListBlock(lines, i);
+			out.push(listHtml);
+			i = endIdx;
 			continue;
 		}
 		if (line.trim() === "") {
@@ -5675,20 +5674,29 @@ function markdownToHTML(text) {
 		}
 		if (/^\|.+\|/.test(line) && i + 1 < lines.length && /^\|[\s|:-]+\|/.test(lines[i + 1])) {
 			const headerCells = _parseTableRow(line);
+			const alignments = _parseTableRow(lines[i + 1]).map((c) => {
+				if (c.startsWith(":") && c.endsWith(":")) return "center";
+				if (c.endsWith(":")) return "right";
+				if (c.startsWith(":")) return "left";
+				return null;
+			});
 			i += 2;
 			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 renderRow = (row) => `<tr>${row.map((c) => `<td>${_inline(c)}</td>`).join("")}</tr>`;
+			const _cell = (tag, content, align) => {
+				return `<${tag}${align ? ` style="text-align:${align}"` : ""}>${_inline(content)}</${tag}>`;
+			};
+			const thead = `<thead><tr>${headerCells.map((c, idx) => _cell("th", c, alignments[idx])).join("")}</tr></thead>`;
+			const renderRow = (row) => `<tr>${row.map((c, idx) => _cell("td", c, alignments[idx])).join("")}</tr>`;
 			const tbody = bodyRows.length ? `<tbody>${bodyRows.map(renderRow).join("")}</tbody>` : "";
 			out.push(`<table>${thead}${tbody}</table>`);
 			continue;
 		}
 		const paraLines = [];
-		while (i < lines.length && lines[i].trim() !== "" && !/^(#{1,6} |> |[-*+] |\d+\. |```|---\s*$|\*{3}\s*$|_{3}\s*$)/.test(lines[i]) && !/^\|.+\|/.test(lines[i])) {
+		while (i < lines.length && lines[i].trim() !== "" && !/^(#{1,6} |> |[-*+] |\d+\. |```|---\s*$|\*{3}\s*$|_{3}\s*$)/.test(lines[i]) && !/^\|.+\|/.test(lines[i]) && !(i + 1 < lines.length && /^=+\s*$/.test(lines[i + 1])) && !(i + 1 < lines.length && /^-{2,}\s*$/.test(lines[i + 1]))) {
 			paraLines.push(lines[i]);
 			i++;
 		}
@@ -5705,6 +5713,57 @@ function markdownToHTML(text) {
 function _parseTableRow(row) {
 	return row.replace(/^\|/, "").replace(/\|$/, "").split("|").map((c) => c.trim());
 }
+function _parseListBlock(lines, startIdx) {
+	const baseIndent = lines[startIdx].match(/^(\s*)/)[1].length;
+	const isOL = /^\s*\d+\. /.test(lines[startIdx]);
+	const items = [];
+	let firstIsCB = null;
+	let i = startIdx;
+	while (i < lines.length) {
+		const line = lines[i];
+		if (line.trim() === "") break;
+		const indent = line.match(/^(\s*)/)[1].length;
+		if (indent < baseIndent) break;
+		if (indent === baseIndent) {
+			if (!/^\s*(?:[-*+]|\d+\.) /.test(line)) break;
+			if (/^\s*\d+\. /.test(line) !== isOL) break;
+			const raw = isOL ? line.replace(/^\s*\d+\. /, "") : line.replace(/^\s*[-*+] /, "");
+			const isCB = !isOL && /^\[[ xX]\]\s+/.test(raw);
+			if (firstIsCB === null) firstIsCB = isCB;
+			if (isCB !== firstIsCB) break;
+			const checked = isCB && raw[1].toLowerCase() === "x";
+			const text = isCB ? raw.replace(/^\[[ xX]\]\s+/, "") : raw;
+			items.push({
+				text,
+				isCB,
+				checked,
+				sub: ""
+			});
+			i++;
+		} else {
+			if (!items.length) {
+				i++;
+				continue;
+			}
+			if (/^\s*(?:[-*+]|\d+\.) /.test(line)) {
+				const nested = _parseListBlock(lines, i);
+				items[items.length - 1].sub += nested.html;
+				i = nested.endIdx;
+			} else {
+				items[items.length - 1].text += " " + line.trim();
+				i++;
+			}
+		}
+	}
+	const open = isOL ? "<ol>" : !isOL && firstIsCB === true ? "<ul class=\"an-checklist\">" : "<ul>";
+	const close = isOL ? "</ol>" : "</ul>";
+	return {
+		html: `${open}${items.map(({ text, isCB, checked, sub }) => {
+			return `<li>${isCB ? `<input type="checkbox" contenteditable="false"${checked ? " checked" : ""}>` : ""}${_inline(text)}${sub}</li>`;
+		}).join("")}${close}`,
+		endIdx: i
+	};
+}
 function _inline(text) {
 	text = text.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_, alt, src) => `<img src="${_escAttr(src)}" alt="${_escAttr(alt)}" class="an-image">`);
 	text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, href) => `<a href="${_escAttr(href)}">${_esc(label)}</a>`);
@@ -7256,6 +7315,29 @@ var Clipboard = class {
 		return doc.body.innerHTML;
 	}
 	/**
+	* Normalizes task lists from external sources (GitHub, GitLab, etc.) so they
+	* pass the sanitiser's `ul.an-checklist` guard. Runs before sanitiseHTML().
+	* @param {string} html
+	* @returns {string}
+	*/
+	_normalizeExternalTaskLists(html) {
+		const doc = new DOMParser().parseFromString(`<body>${html}</body>`, "text/html");
+		for (const cb of doc.querySelectorAll("input[type=\"checkbox\"]")) {
+			const li = cb.closest("li");
+			const ul = li?.closest("ul");
+			if (!li || !ul || ul.classList.contains("an-checklist")) continue;
+			ul.classList.add("an-checklist");
+			cb.removeAttribute("disabled");
+			cb.setAttribute("contenteditable", "false");
+			for (const attr of Array.from(cb.attributes)) if (![
+				"type",
+				"checked",
+				"contenteditable"
+			].includes(attr.name)) cb.removeAttribute(attr.name);
+		}
+		return doc.body.innerHTML;
+	}
+	/**
 	* Forces the next paste operation to strip all HTML formatting.
 	* Called by Editor when Ctrl+Shift+V is pressed.
 	* @param {boolean} val
@@ -7313,6 +7395,7 @@ var Clipboard = class {
 			let html = raw;
 			if (isWordContent) html = this._cleanWordHtml(html);
 			else if (isSocialContent) html = this._cleanSocialHtml(html);
+			html = this._normalizeExternalTaskLists(html);
 			html = sanitiseHTML(html);
 			if (this.options.pasteStripAttributes) html = this._stripAttributes(html);
 			execCommand("insertHTML", html);
@@ -7427,7 +7510,7 @@ var Clipboard = class {
 	_compressImage(file) {
 		const MAX_DIM = 1920;
 		const QUALITY = .85;
-		return new Promise((resolve) => {
+		return new Promise((resolve, reject) => {
 			const objectUrl = URL.createObjectURL(file);
 			const img = new Image();
 			img.onload = () => {
@@ -7447,6 +7530,7 @@ var Clipboard = class {
 				if (!ctx) {
 					const reader = new FileReader();
 					reader.onload = (e) => resolve(e.target.result);
+					reader.onerror = () => reject(/* @__PURE__ */ new Error("FileReader failed"));
 					reader.readAsDataURL(file);
 					return;
 				}
@@ -7458,6 +7542,7 @@ var Clipboard = class {
 				URL.revokeObjectURL(objectUrl);
 				const reader = new FileReader();
 				reader.onload = (e) => resolve(e.target.result);
+				reader.onerror = () => reject(/* @__PURE__ */ new Error("FileReader failed"));
 				reader.readAsDataURL(file);
 			};
 			img.src = objectUrl;
@@ -14179,7 +14264,7 @@ var defaultItems = [
 			};
 			if (typeof navigator.clipboard.read === "function") navigator.clipboard.read().then((items) => {
 				for (const item of items) if (item.types.includes("text/html")) {
-					item.getType("text/html").then((blob) => blob.text()).then((html) => doInsert(html, null));
+					item.getType("text/html").then((blob) => blob.text()).then((html) => doInsert(html, null)).catch(() => {});
 					return;
 				}
 				navigator.clipboard.readText().then((text) => doInsert(null, text)).catch(() => {});
@@ -15304,6 +15389,10 @@ function drawCropToCanvas(img, naturalRect, renderW, renderH) {
 			canvas.width = Math.round(renderW);
 			canvas.height = Math.round(renderH);
 			const ctx = canvas.getContext("2d");
+			if (!ctx) {
+				resolve(null);
+				return;
+			}
 			try {
 				ctx.drawImage(source, naturalRect.x, naturalRect.y, naturalRect.width, naturalRect.height, 0, 0, canvas.width, canvas.height);
 				ctx.getImageData(0, 0, 1, 1);
@@ -17492,7 +17581,7 @@ var AutumnNote = {
 	/** All pre-built button definitions — accessible in every module format including UMD/CJS. */
 	buttons,
 	/** Library version */
-	version: "1.8.2"
+	version: "1.9.1"
 };
 /**
 * @param {string|Element|NodeList|Element[]} selector