autumnnote 1.7.0 → 1.8.0

package/dist/autumnnote.umd.js

@@ -968,6 +968,13 @@
 		}
 	};
 	var removeFormatBtn = btn("removeFormat", "remove-format", "Remove Format", () => execCommand("removeFormat"));
+	var directionBtn = btn("direction", "direction", "Toggle Text Direction (LTR / RTL)", (ctx) => {
+		const editable = ctx.layoutInfo.editable;
+		const next = (editable.getAttribute("dir") || "ltr") === "ltr" ? "rtl" : "ltr";
+		editable.setAttribute("dir", next);
+		editable.style.textAlign = next === "rtl" ? "right" : "left";
+		ctx.invoke("editor.afterCommand");
+	});
 	/** @type {DropdownDef} */
 	var fontFamilyBtn = {
 		name: "fontFamily",
@@ -1090,9 +1097,122 @@
 	var fullscreenBtn = btn("fullscreen", "expand", "Fullscreen", (ctx) => ctx.invoke("fullscreen.toggle"), (ctx) => ctx.invoke("fullscreen.isActive"));
 	var shortcutsBtn = btn("shortcuts", "keyboard", "Keyboard Shortcuts (Ctrl+Shift+/)", (ctx) => ctx.invoke("shortcutsDialog.show"));
 	var findBtn = btn("find", "search", "Find (Ctrl+F)", (ctx) => ctx.invoke("findReplace.show", "find"));
+	var findReplaceBtn = btn("findReplace", "find-replace", "Find & Replace (Ctrl+H)", (ctx) => ctx.invoke("findReplace.show", "replace"));
 	var inlineCodeBtn = btn("inlineCode", "inline-code", "Inline Code (Ctrl+`)", (ctx) => ctx.invoke("editor.inlineCode"), () => isInlineCode());
 	var checklistBtn = btn("checklist", "checklist", "Checklist", (ctx) => ctx.invoke("editor.toggleChecklist"), () => isInChecklist());
 	var printBtn = btn("print", "print", "Print", (ctx) => ctx.invoke("editor.print"));
+	/** @type {{ name: string, type: 'colorpicker', icon: string, tooltip: string, defaultColor: string, action: Function }} */
+	var foreColorBtn = {
+		name: "foreColor",
+		type: "colorpicker",
+		icon: "foreColor",
+		tooltip: "Text Color",
+		defaultColor: "#e11d48",
+		action: (ctx, color) => foreColor(color)
+	};
+	/** @type {{ name: string, type: 'colorpicker', icon: string, tooltip: string, defaultColor: string, action: Function }} */
+	var backColorBtn = {
+		name: "backColor",
+		type: "colorpicker",
+		icon: "backColor",
+		tooltip: "Highlight Color",
+		defaultColor: "#fbbf24",
+		action: (ctx, color) => backColor(color)
+	};
+	/**
+	* The default toolbar button groups.
+	* Each sub-array is a button group (separated by a divider).
+	*/
+	var defaultToolbar = [
+		[
+			paragraphStyleBtn,
+			fontFamilyBtn,
+			fontSizeBtn,
+			lineHeightBtn
+		],
+		[undoBtn, redoBtn],
+		[
+			boldBtn,
+			italicBtn,
+			underlineBtn,
+			strikeBtn,
+			inlineCodeBtn
+		],
+		[superscriptBtn, subscriptBtn],
+		[foreColorBtn, backColorBtn],
+		[
+			alignLeftBtn,
+			alignCenterBtn,
+			alignRightBtn,
+			alignJustifyBtn
+		],
+		[
+			ulBtn,
+			olBtn,
+			checklistBtn,
+			indentBtn,
+			outdentBtn
+		],
+		[
+			hrBtn,
+			linkBtn,
+			imageBtn,
+			videoBtn,
+			tableBtn,
+			emojiBtn,
+			iconBtn
+		],
+		[
+			removeFormatBtn,
+			codeviewBtn,
+			fullscreenBtn,
+			findBtn,
+			printBtn,
+			shortcutsBtn
+		]
+	];
+	var buttons = {
+		boldBtn,
+		italicBtn,
+		underlineBtn,
+		strikeBtn,
+		superscriptBtn,
+		subscriptBtn,
+		alignLeftBtn,
+		alignCenterBtn,
+		alignRightBtn,
+		alignJustifyBtn,
+		ulBtn,
+		olBtn,
+		indentBtn,
+		outdentBtn,
+		undoBtn,
+		redoBtn,
+		hrBtn,
+		linkBtn,
+		imageBtn,
+		videoBtn,
+		emojiBtn,
+		iconBtn,
+		tableBtn,
+		fontSizeBtn,
+		removeFormatBtn,
+		directionBtn,
+		fontFamilyBtn,
+		paragraphStyleBtn,
+		lineHeightBtn,
+		codeviewBtn,
+		fullscreenBtn,
+		shortcutsBtn,
+		findBtn,
+		findReplaceBtn,
+		inlineCodeBtn,
+		checklistBtn,
+		printBtn,
+		foreColorBtn,
+		backColorBtn,
+		defaultToolbar
+	};
 	//#endregion
 	//#region src/js/settings.js
 	/**
@@ -1166,68 +1286,7 @@
 		maxHeight: 0,
 		focus: false,
 		resizable: true,
-		toolbar: [
-			[
-				paragraphStyleBtn,
-				fontFamilyBtn,
-				fontSizeBtn,
-				lineHeightBtn
-			],
-			[undoBtn, redoBtn],
-			[
-				boldBtn,
-				italicBtn,
-				underlineBtn,
-				strikeBtn,
-				inlineCodeBtn
-			],
-			[superscriptBtn, subscriptBtn],
-			[{
-				name: "foreColor",
-				type: "colorpicker",
-				icon: "foreColor",
-				tooltip: "Text Color",
-				defaultColor: "#e11d48",
-				action: (ctx, color) => foreColor(color)
-			}, {
-				name: "backColor",
-				type: "colorpicker",
-				icon: "backColor",
-				tooltip: "Highlight Color",
-				defaultColor: "#fbbf24",
-				action: (ctx, color) => backColor(color)
-			}],
-			[
-				alignLeftBtn,
-				alignCenterBtn,
-				alignRightBtn,
-				alignJustifyBtn
-			],
-			[
-				ulBtn,
-				olBtn,
-				checklistBtn,
-				indentBtn,
-				outdentBtn
-			],
-			[
-				hrBtn,
-				linkBtn,
-				imageBtn,
-				videoBtn,
-				tableBtn,
-				emojiBtn,
-				iconBtn
-			],
-			[
-				removeFormatBtn,
-				codeviewBtn,
-				fullscreenBtn,
-				findBtn,
-				printBtn,
-				shortcutsBtn
-			]
-		],
+		toolbar: defaultToolbar,
 		useBootstrap: false,
 		toolbarButtonClass: "btn btn-sm btn-light",
 		useFontAwesome: true,
@@ -1448,6 +1507,7 @@
 			findPlaceholder: "Find…",
 			searchAriaLabel: "Search text",
 			caseSensitive: "\xA0Case sensitive",
+			wholeWord: "Whole Word",
 			prevBtn: "← Prev",
 			nextBtn: "Next →",
 			replacePlaceholder: "Replace with…",
@@ -1458,6 +1518,12 @@
 			useRegex: "Use Regular Expression",
 			close: "×"
 		},
+		autoSaveRestore: {
+			found: "Draft found. Restore?",
+			foundAt: "Draft from {date}. Restore?",
+			restore: "Restore",
+			discard: "Discard"
+		},
 		shortcutsDialog: {
 			title: "Keyboard Shortcuts",
 			ariaLabel: "Keyboard Shortcuts",
@@ -2020,6 +2086,12 @@
 			errors: {
 				imageFormat: (type) => `Định dạng "${type}" không được hỗ trợ hiển thị trên trình duyệt. Vui lòng chuyển đổi sang JPEG, PNG hoặc WebP.`,
 				imageSize: (maxSize) => `Tệp hình ảnh quá lớn. Kích thước tối đa cho phép là ${maxSize} MB.`
+			},
+			autoSaveRestore: {
+				found: "Tìm thấy bản nháp. Khôi phục?",
+				foundAt: "Bản nháp từ {date}. Khôi phục?",
+				restore: "Khôi phục",
+				discard: "Bỏ qua"
 			}
 		},
 		ja: {
@@ -2358,6 +2430,12 @@
 			errors: {
 				imageFormat: (type) => `形式 "${type}" はブラウザでの表示をサポートしていません。JPEG、PNG、または WebP に変換してください。`,
 				imageSize: (maxSize) => `画像ファイルが大きすぎます。最大許容サイズは ${maxSize} MB です。`
+			},
+			autoSaveRestore: {
+				found: "下書きが見つかりました。復元しますか？",
+				foundAt: "{date} の下書きが見つかりました。復元しますか？",
+				restore: "復元",
+				discard: "破棄"
 			}
 		},
 		zh: {
@@ -2696,6 +2774,12 @@
 			errors: {
 				imageFormat: (type) => `格式 "${type}" 不支持在浏览器中显示。请转换为 JPEG、PNG 或 WebP。`,
 				imageSize: (maxSize) => `图片文件过大。最大允许大小为 ${maxSize} MB。`
+			},
+			autoSaveRestore: {
+				found: "找到草稿。是否恢复？",
+				foundAt: "发现 {date} 的草稿。是否恢复？",
+				restore: "恢复",
+				discard: "放弃"
 			}
 		},
 		fr: {
@@ -3034,6 +3118,12 @@
 			errors: {
 				imageFormat: (type) => `Le format "${type}" n'est pas pris en charge par le navigateur. Veuillez le convertir en JPEG, PNG ou WebP.`,
 				imageSize: (maxSize) => `Le fichier image est trop volumineux. La taille maximale autorisée est de ${maxSize}\u00a0Mo.`
+			},
+			autoSaveRestore: {
+				found: "Brouillon trouvé. Restaurer ?",
+				foundAt: "Brouillon du {date}. Restaurer ?",
+				restore: "Restaurer",
+				discard: "Ignorer"
 			}
 		},
 		de: {
@@ -3372,6 +3462,12 @@
 			errors: {
 				imageFormat: (type) => `Das Format „${type}" wird in Webbrowsern nicht unterstützt. Bitte konvertieren Sie es zuerst in JPEG, PNG oder WebP.`,
 				imageSize: (maxSize) => `Die Bilddatei ist zu groß. Die maximal zulässige Größe beträgt ${maxSize} MB.`
+			},
+			autoSaveRestore: {
+				found: "Entwurf gefunden. Wiederherstellen?",
+				foundAt: "Entwurf vom {date}. Wiederherstellen?",
+				restore: "Wiederherstellen",
+				discard: "Verwerfen"
 			}
 		},
 		es: {
@@ -3710,6 +3806,12 @@
 			errors: {
 				imageFormat: (type) => `El formato "${type}" no es compatible con los navegadores web. Por favor, conviértalo primero a JPEG, PNG o WebP.`,
 				imageSize: (maxSize) => `El archivo de imagen es demasiado grande. El tamaño máximo permitido es ${maxSize} MB.`
+			},
+			autoSaveRestore: {
+				found: "Borrador encontrado. ¿Restaurar?",
+				foundAt: "Borrador del {date}. ¿Restaurar?",
+				restore: "Restaurar",
+				discard: "Descartar"
 			}
 		},
 		ko: {
@@ -4048,6 +4150,12 @@
 			errors: {
 				imageFormat: (type) => `"${type}" 형식은 웹 브라우저에서 지원되지 않습니다. JPEG, PNG 또는 WebP로 변환해 주세요.`,
 				imageSize: (maxSize) => `이미지 파일이 너무 큽니다. 최대 허용 크기는 ${maxSize} MB입니다.`
+			},
+			autoSaveRestore: {
+				found: "초안을 찾았습니다. 복원하시겠습니까?",
+				foundAt: "{date}의 초안을 찾았습니다. 복원하시겠습니까?",
+				restore: "복원",
+				discard: "삭제"
 			}
 		}
 	};
@@ -6673,6 +6781,15 @@
 			if (!clipboardData) return;
 			const forcePlain = this._forcePlain;
 			this._forcePlain = false;
+			const maxBytes = (this.options.maxPasteSize ?? 5) * 1024 * 1024;
+			if (maxBytes > 0) {
+				const text = clipboardData.getData("text/plain") || "";
+				const html = clipboardData.getData("text/html") || "";
+				if (Math.max(text.length, html.length) > maxBytes) {
+					event.preventDefault();
+					return;
+				}
+			}
 			if (clipboardData.items) {
 				const imageItems = Array.from(clipboardData.items).filter((item) => item.kind === "file" && item.type.startsWith("image/"));
 				if (imageItems.length > 0) {
@@ -7795,6 +7912,7 @@
 			const aspectRatio = startW / (startH || 1);
 			const isCorner = pos.length === 2;
 			const editable = this.context.layoutInfo.editable;
+			const minSz = this.context.options?.minImageSize ?? 20;
 			let _raf = null;
 			const onMove = (me) => {
 				if (_raf !== null) return;
@@ -7807,15 +7925,15 @@
 					const maxW = editable.clientWidth || Infinity;
 					let newW = startW;
 					let newH = startH;
-					if (pos.includes("e")) newW = Math.max(20, startW + dx);
-					if (pos.includes("w")) newW = Math.max(20, startW - dx);
-					if (pos.includes("s")) newH = Math.max(20, startH + dy);
-					if (pos.includes("n")) newH = Math.max(20, startH - dy);
+					if (pos.includes("e")) newW = Math.max(minSz, startW + dx);
+					if (pos.includes("w")) newW = Math.max(minSz, startW - dx);
+					if (pos.includes("s")) newH = Math.max(minSz, startH + dy);
+					if (pos.includes("n")) newH = Math.max(minSz, startH - dy);
 					newW = Math.min(newW, maxW);
-					if (isCorner) if (Math.abs(dx) >= Math.abs(dy)) newH = Math.max(20, Math.round(newW / aspectRatio));
+					if (isCorner) if (Math.abs(dx) >= Math.abs(dy)) newH = Math.max(minSz, Math.round(newW / aspectRatio));
 					else {
-						newW = Math.min(Math.max(20, Math.round(newH * aspectRatio)), maxW);
-						newH = Math.max(20, Math.round(newW / aspectRatio));
+						newW = Math.min(Math.max(minSz, Math.round(newH * aspectRatio)), maxW);
+						newH = Math.max(minSz, Math.round(newW / aspectRatio));
 					}
 					img.style.width = `${newW}px`;
 					img.style.height = `${newH}px`;
@@ -14258,6 +14376,7 @@
 			this._currentIndex = -1;
 			this._caseSensitive = false;
 			this._useRegex = false;
+			this._wholeWord = false;
 			/** @type {'find'|'replace'} */
 			this._mode = "find";
 			/** Cached compiled regex — reused when query and case-sensitivity are unchanged */
@@ -14265,6 +14384,7 @@
 			this._lastQuery = null;
 			this._lastCaseSensitive = null;
 			this._lastUseRegex = null;
+			this._lastWholeWord = null;
 			this._focusTimer = null;
 		}
 		destroy() {
@@ -14375,6 +14495,13 @@
 				"aria-label": L.useRegex
 			});
 			regexBtn.textContent = ".*";
+			const wholeWordBtn = createElement("button", {
+				type: "button",
+				class: "an-fr-icon-btn",
+				title: L.wholeWord,
+				"aria-label": L.wholeWord
+			});
+			wholeWordBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="10" rx="2"/><line x1="7" y1="21" x2="7" y2="17"/><line x1="17" y1="21" x2="17" y2="17"/></svg>`;
 			const prevBtn = createElement("button", {
 				type: "button",
 				class: "an-fr-icon-btn",
@@ -14391,7 +14518,7 @@
 			nextBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`;
 			const counter = createElement("span", { class: "an-fr-counter" });
 			this._counterEl = counter;
-			searchBar.append(findInput, caseCheckbox, caseBtn, regexBtn, prevBtn, nextBtn, counter);
+			searchBar.append(findInput, caseCheckbox, caseBtn, regexBtn, wholeWordBtn, prevBtn, nextBtn, counter);
 			box.appendChild(searchBar);
 			const replaceRow = createElement("div", { class: "an-fr-replace-row" });
 			replaceRow.style.display = "none";
@@ -14459,7 +14586,14 @@
 				this._lastQuery = null;
 				this._onSearch();
 			});
-			this._disposers.push(d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, dRegex);
+			const dWholeWord = on(wholeWordBtn, "click", () => {
+				this._wholeWord = !this._wholeWord;
+				wholeWordBtn.classList.toggle("an-fr-icon-btn--active", this._wholeWord);
+				this._queryRegex = null;
+				this._lastQuery = null;
+				this._onSearch();
+			});
+			this._disposers.push(d1, d2, d3, d4, d5, d6, d7, d8, d9, d10, d11, dRegex, dWholeWord);
 			return overlay;
 		}
 		_onSearch() {
@@ -14517,10 +14651,11 @@
 		*/
 		_findRawMatches(query, root) {
 			const results = [];
-			if (this._lastQuery !== query || this._lastCaseSensitive !== this._caseSensitive || this._lastUseRegex !== this._useRegex) {
+			if (this._lastQuery !== query || this._lastCaseSensitive !== this._caseSensitive || this._lastUseRegex !== this._useRegex || this._lastWholeWord !== this._wholeWord) {
 				const flags = this._caseSensitive ? "g" : "gi";
 				try {
-					const pattern = this._useRegex ? query : query.replace(/[.*+?^${}()|[\]\\]/g, String.raw`\$&`);
+					let pattern = this._useRegex ? query : query.replace(/[.*+?^${}()|[\]\\]/g, String.raw`\$&`);
+					if (this._wholeWord) pattern = `\\b${pattern}\\b`;
 					this._queryRegex = new RegExp(pattern, flags);
 				} catch (_) {
 					this._queryRegex = null;
@@ -14528,6 +14663,7 @@
 				this._lastQuery = query;
 				this._lastCaseSensitive = this._caseSensitive;
 				this._lastUseRegex = this._useRegex;
+				this._lastWholeWord = this._wholeWord;
 			}
 			if (!this._queryRegex) return results;
 			const re = this._queryRegex;
@@ -16074,7 +16210,10 @@
 					this._showDropdown();
 				};
 				const result = this._cfg.onSearch(this._query, cb);
-				if (result && typeof result.then === "function") result.then(cb).catch(() => this._hideDropdown());
+				if (result && typeof result.then === "function") result.then(cb).catch((err) => {
+					this._hideDropdown();
+					if (typeof this._cfg.onError === "function") this._cfg.onError(err);
+				});
 			}, this._cfg.debounce);
 		}
 		_onKeydown(e) {
@@ -16342,10 +16481,13 @@
 		}
 		/**
 		* Returns the current HTML content of the editor.
+		* Zero-width spaces (U+200B) inserted by inline editing helpers are stripped
+		* from the output so they don't leak into the consumer's HTML.
 		* @returns {string}
 		*/
 		getHTML() {
-			return this.invoke("editor.getHTML");
+			const html = this.invoke("editor.getHTML");
+			return typeof html === "string" ? html.replace(/​/g, "") : html;
 		}
 		/**
 		* Sets the HTML content of the editor.
@@ -16516,6 +16658,25 @@
 			}));
 		}
 		/**
+		* Moves focus into the editable area.
+		*/
+		focus() {
+			this.layoutInfo.editable.focus();
+		}
+		/**
+		* Removes focus from the editable area.
+		*/
+		blur() {
+			this.layoutInfo.editable.blur();
+		}
+		/**
+		* Returns true when the editor is currently in fullscreen mode.
+		* @returns {boolean}
+		*/
+		isFullscreen() {
+			return this.invoke("fullscreen.isActive") === true;
+		}
+		/**
 		* Sets whether the editor is disabled (readonly).
 		* @param {boolean} disabled
 		*/
@@ -16685,8 +16846,10 @@
 			registerButton(btnDef);
 			return this;
 		},
+		/** All pre-built button definitions — accessible in every module format including UMD/CJS. */
+		buttons,
 		/** Library version */
-		version: "1.7.0"
+		version: "1.8.0"
 	};
 	/**
 	* @param {string|Element|NodeList|Element[]} selector