feat(quickTools): replace checkbox with height select & dynamic toggler

src/components/quickTools/items.js

@@ -46,6 +46,7 @@ export default [
 	item("modulo", "letters", "insert", "%", "%"),
 	item("caret", "letters", "insert", "^", "^"),
 	item("hyphen", "letters", "insert", "-", "-"),
+	item("paste", "paste", "command", "paste"),
 ];
 
 /**
@@ -54,7 +55,7 @@ export default [
  * @returns
  */
 export function description(id) {
-	return strings[`quicktools:${id}`];
+	return strings[`quicktools:${id}`] || strings[id];
 }
 
 /**

src/components/quickTools/style.scss

@@ -1,12 +1,21 @@
 @use '../../styles/mixins.scss';
 
 #quick-tools {
-  .icon.click {
+  .icon.click:not([disabled]) {
     @include mixins.active-icon;
     transition: all 0.3s ease-in-out;
     transform: scale(1.2);
   }
 
+  [disabled] {
+    cursor: default;
+    opacity: 0.45;
+  }
+
+  [data-id="paste"] {
+    font-size: 0.9em;
+  }
+
   &[data-alt="true"] {
     [data-id="alt-key"] {
       @include mixins.active-icon;
@@ -36,4 +45,4 @@
       @include mixins.icon-badge;
     }
   }
-}
+}

src/components/searchbar/index.js

@@ -184,10 +184,29 @@ function searchBar($list, setHide, onhideCb, searchFunction) {
 	function cloneSearchItem($item) {
 		const $clone = $item.cloneNode(true);
 		$clone.addEventListener("click", () => {
+			$item.addEventListener(
+				"settings-item-interaction-end",
+				(event) => {
+					if (event.detail?.updated) {
+						syncSearchClone($clone, $item);
+					}
+				},
+				{ once: true },
+			);
 			$item.click();
 		});
 		return $clone;
 	}
+
+	/**
+	 * Keep a visible search-result clone in sync after the backing item updates.
+	 * @param {HTMLElement} $clone
+	 * @param {HTMLElement} $item
+	 */
+	function syncSearchClone($clone, $item) {
+		$clone.className = $item.className;
+		$clone.innerHTML = $item.innerHTML;
+	}
 }
 
 export default searchBar;

src/components/settingsPage.js

@@ -233,17 +233,31 @@ function listItems($list, items, callback, options = {}) {
 		const item = itemByKey.get(key);
 		if (!item) return;
 		const result = await resolveItemInteraction(item, $target);
-		if (result.shouldCallCallback === false) return;
-		if (!result.shouldUpdateValue)
+		if (result.shouldCallCallback === false) {
+			dispatchItemInteractionEnd($target, false);
+			return;
+		}
+		if (!result.shouldUpdateValue) {
+			dispatchItemInteractionEnd($target, false);
 			return callback.call($target, key, item.value);
+		}
 
 		item.value = result.value;
 		updateItemValueDisplay($target, item, options, useInfoAsDescription);
+		dispatchItemInteractionEnd($target, true);
 
 		callback.call($target, key, item.value);
 	}
 }
 
+function dispatchItemInteractionEnd($target, updated) {
+	$target.dispatchEvent(
+		new CustomEvent("settings-item-interaction-end", {
+			detail: { updated },
+		}),
+	);
+}
+
 function normalizeSettings(settings) {
 	/** @type {string | undefined} */
 	let note;

src/handlers/quickTools.js

@@ -21,6 +21,7 @@ export let quickToolUsed = false;
 let input;
 /** @type {number} */
 let quickToolUsedTimeout = null;
+let activeSearchState = null;
 
 const state = {
 	shift: false,
@@ -348,6 +349,7 @@ function toggleSearch() {
 		const { className } = quickTools.$toggler;
 		const $content = [...$footer.children];
 		const footerHeight = getFooterHeight();
+		activeSearchState = { className, content: $content, footerHeight };
 
 		$toggler.className = "floating icon clearclose";
 		$footer.content = [$searchRow1, $searchRow2];
@@ -375,10 +377,16 @@ function toggleSearch() {
 		actionStack.push({
 			id: "search-bar",
 			action: () => {
+				const restoreState = activeSearchState || {
+					className,
+					content: $content,
+					footerHeight,
+				};
 				removeSearch();
-				$footer.content = $content;
-				$toggler.className = className;
-				setFooterHeight(footerHeight);
+				$footer.content = restoreState.content;
+				$toggler.className = restoreState.className;
+				setFooterHeight(restoreState.footerHeight);
+				activeSearchState = null;
 			},
 		});
 	} else {
@@ -427,17 +435,30 @@ function setHeight(height = 1, save = true) {
 		save = false;
 	}
 
+	const searchBar = actionStack.get("search-bar");
+	if (searchBar?.action) {
+		if (height === 0) {
+			searchBar.action();
+		} else {
+			const footerHeight = Number(height) || 0;
+			activeSearchState = {
+				className:
+					activeSearchState?.className || quickTools.$toggler.className,
+				content: getQuickToolsRows(footerHeight),
+				footerHeight,
+			};
+			if (save) {
+				appSettings.update({ quickTools: height }, false);
+			}
+			return;
+		}
+	}
+
 	setFooterHeight(height);
 	if (save) {
 		appSettings.update({ quickTools: height }, false);
 	}
 
-	if (!height) {
-		$row1.remove();
-		$row2.remove();
-		return;
-	}
-
 	if (height >= 1) {
 		$row1.style.scrollBehavior = "unset";
 		$footer.append($row1);
@@ -446,6 +467,8 @@ function setHeight(height = 1, save = true) {
 			10,
 		);
 		--height;
+	} else {
+		$row1.remove();
 	}
 
 	if (height >= 1) {
@@ -456,9 +479,16 @@ function setHeight(height = 1, save = true) {
 			10,
 		);
 		--height;
+	} else {
+		$row2.remove();
 	}
 }
 
+function getQuickToolsRows(height) {
+	const { $row1, $row2 } = quickTools;
+	return [$row1, $row2].slice(0, height);
+}
+
 /**
  * Removes search bar from footer
  */

src/handlers/quickToolsInit.js

@@ -1,3 +1,4 @@
+import { redoDepth, undoDepth } from "@codemirror/commands";
 import quickTools from "components/quickTools";
 import config from "lib/config";
 import appSettings from "lib/settings";
@@ -78,14 +79,26 @@ export default function init() {
 		} else {
 			$footer.removeAttribute("data-unsaved");
 		}
+		updateHistoryButtons();
 	});
 
 	editorManager.on("save-file", () => {
 		$footer.removeAttribute("data-unsaved");
 	});
 
-	root.append($footer, $toggler);
+	editorManager.on("editor-state-changed", updateHistoryButtons);
+
+	appSettings.on("update:quicktoolsItems:after", () => {
+		setTimeout(updateHistoryButtons, 100);
+	});
+
+	root.append($footer);
+	if (appSettings.value.floatingButton) {
+		root.appendOuter($toggler);
+	}
 	document.body.append($input);
+	setTimeout(updateHistoryButtons, 0);
+
 	if (
 		appSettings.value.quickToolsTriggerMode ===
 		appSettings.QUICKTOOLS_TRIGGER_MODE_CLICK
@@ -136,6 +149,12 @@ function onwheel(e) {
 function onclick(e) {
 	reset();
 
+	if (e.target.disabled) {
+		e.preventDefault();
+		e.stopPropagation();
+		return;
+	}
+
 	e.preventDefault();
 	e.stopPropagation();
 	click(e.target);
@@ -149,6 +168,11 @@ function touchstart(e) {
 	if ($el instanceof HTMLInputElement) {
 		return;
 	}
+	if ($el.disabled) {
+		e.preventDefault();
+		e.stopPropagation();
+		return;
+	}
 
 	startTime = performance.now();
 	$touchstart = $el;
@@ -326,6 +350,8 @@ function oncontextmenu(e) {
  * @param {HTMLElement} $el
  */
 function click($el) {
+	if ($el.disabled) return;
+
 	$el.classList.add("click");
 	clearTimeout($el.dataset.timeout);
 	$el.dataset.timeout = setTimeout(() => {
@@ -347,3 +373,20 @@ function click($el) {
 
 	actions(action, value);
 }
+
+function updateHistoryButtons() {
+	const { editor, activeFile } = editorManager;
+	const disabled = !editor || activeFile?.type !== "editor";
+
+	updateHistoryButton("undo", disabled || undoDepth(editor.state) === 0);
+	updateHistoryButton("redo", disabled || redoDepth(editor.state) === 0);
+}
+
+function updateHistoryButton(id, disabled) {
+	quickTools.$footer
+		.querySelectorAll(`[data-id="${id}"]`)
+		.forEach(($button) => {
+			$button.disabled = disabled;
+			$button.setAttribute("aria-disabled", String(disabled));
+		});
+}

src/lang/ar-ye.json

@@ -146,7 +146,6 @@
 	"none": "بلا",
 	"small": "صغير",
 	"large": "كبير",
-	"floating button": "الزر العائم",
 	"confirm on exit": "تأكيد عند الخروج",
 	"show console": "إظهار وحدة التحكم",
 	"image": "صورة",
@@ -760,5 +759,9 @@
 	"scrollbar height": "Scrollbar height",
 	"full": "Full",
 	"scroll past end": "Scroll past end",
-	"settings-info-scroll-past-end": "Adds extra empty space at the bottom of the editor, allowing you to scroll the last line to the top."
+	"settings-info-scroll-past-end": "Adds extra empty space at the bottom of the editor, allowing you to scroll the last line to the top.",
+	"compact": "مضغوط",
+	"off": "إيقاف",
+	"quick tools height": "ارتفاع الأدوات السريعة",
+	"quick tools toggler": "مبدل الأدوات السريعة"
 }

src/lang/be-by.json

@@ -146,7 +146,6 @@
 	"none": "Няма",
 	"small": "Маленькі",
 	"large": "Вялікі",
-	"floating button": "Выплыўная панэль кнопак",
 	"confirm on exit": "Пацвярджэнне выхаду",
 	"show console": "Паказваць кансоль",
 	"image": "Выява",
@@ -760,5 +759,9 @@
 	"scrollbar height": "Scrollbar height",
 	"full": "Full",
 	"scroll past end": "Scroll past end",
-	"settings-info-scroll-past-end": "Adds extra empty space at the bottom of the editor, allowing you to scroll the last line to the top."
+	"settings-info-scroll-past-end": "Adds extra empty space at the bottom of the editor, allowing you to scroll the last line to the top.",
+	"compact": "Кампактны",
+	"off": "Выкл",
+	"quick tools height": "Вышыня хуткіх інструментаў",
+	"quick tools toggler": "Пераключальнік хуткіх інструментаў"
 }

src/lang/bn-bd.json

@@ -146,7 +146,6 @@
 	"none": "none",
 	"small": "ছোট",
 	"large": "বড়",
-	"floating button": "ভাসমান বাটোন",
 	"confirm on exit": "প্রস্থান নিশ্চিত করুন",
 	"show console": "কনসোল দেখান",
 	"image": "ছবি",
@@ -760,5 +759,9 @@
 	"scrollbar height": "Scrollbar height",
 	"full": "Full",
 	"scroll past end": "Scroll past end",
-	"settings-info-scroll-past-end": "Adds extra empty space at the bottom of the editor, allowing you to scroll the last line to the top."
+	"settings-info-scroll-past-end": "Adds extra empty space at the bottom of the editor, allowing you to scroll the last line to the top.",
+	"compact": "কম্প্যাক্ট",
+	"off": "বন্ধ",
+	"quick tools height": "কুইক টুলসের উচ্চতা",
+	"quick tools toggler": "কুইক টুলস টগলার"
 }

src/lang/cs-cz.json

@@ -146,7 +146,6 @@
 	"none": "Žádná",
 	"small": "Malá",
 	"large": "Velká",
-	"floating button": "Plovoucí tlačítko",
 	"confirm on exit": "Potvrdit při zavření",
 	"show console": "Zobrazit konzoli",
 	"image": "Obrázek",
@@ -760,5 +759,9 @@
 	"scrollbar height": "Scrollbar height",
 	"full": "Full",
 	"scroll past end": "Scroll past end",
-	"settings-info-scroll-past-end": "Adds extra empty space at the bottom of the editor, allowing you to scroll the last line to the top."
+	"settings-info-scroll-past-end": "Adds extra empty space at the bottom of the editor, allowing you to scroll the last line to the top.",
+	"compact": "Kompaktní",
+	"off": "Vypnuto",
+	"quick tools height": "Výška rychlých nástrojů",
+	"quick tools toggler": "Přepínač rychlých nástrojů"
 }

src/lang/de-de.json

@@ -146,7 +146,6 @@
 	"none": "Keiner",
 	"small": "Klein",
 	"large": "Groß",
-	"floating button": "Schwebende Schaltfläche",
 	"confirm on exit": "Bestätigung beim Beenden",
 	"show console": "Konsole anzeigen",
 	"image": "Bild",
@@ -760,5 +759,9 @@
 	"scrollbar height": "Scrollbar height",
 	"full": "Full",
 	"scroll past end": "Scroll past end",
-	"settings-info-scroll-past-end": "Adds extra empty space at the bottom of the editor, allowing you to scroll the last line to the top."
+	"settings-info-scroll-past-end": "Adds extra empty space at the bottom of the editor, allowing you to scroll the last line to the top.",
+	"compact": "Kompakt",
+	"off": "Aus",
+	"quick tools height": "Schnelltools-Höhe",
+	"quick tools toggler": "Schnelltools-Umschalter"
 }