From ec9f0689d0ec0d5ed492b5a1ea8b29b2bce9d53a Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Fri, 7 Jun 2024 15:55:40 +0200
Subject: [PATCH 01/25] added draggable ui element

---
 mikupad.html | 241 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 239 insertions(+), 2 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index bdc7661..a63069b 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -344,6 +344,54 @@
 	font-size: 0.8rem;
 }
 
+.widget-title {
+	-webkit-user-select: none; /* Safari */
+	-ms-user-select: none; /* IE 10 and IE 11 */
+	user-select: none; /* Standard syntax */
+	padding:0.2em;
+	font-weight: bold;
+	font-size: 110%;
+	background-color: var(--color-base-40);
+	border-radius:2px;
+	width: calc(100% - 2em);
+}
+
+#searchAndReplace {
+	position: absolute;
+  width: 70%;
+  background: var(--color-base-50);
+	top:.75em;
+	left:.75em;
+	border-radius:3px;
+	padding:0.25em;
+}
+
+#searchAndReplace .widget-container {
+	position: relative;
+}
+#searchAndReplace .button-widget-top {
+	position: absolute;
+	top:0.1em;
+	right:0.1em;
+}
+
+.searchAndReplace-inputs {
+	display: flex;
+	flex-direction: row;
+	gap: 8px;
+	padding: .2em;
+}
+.searchAndReplace-inputs .InputBox {
+	width: 100%;
+}
+.searchAndReplace-inputs .SelectBox {
+	width: 40%;
+}
+
+/* .widget-body {
+
+} */
+
 .modal-overlay {
 	position: fixed;
 	top: 0;
@@ -1975,8 +2023,6 @@
 		</div>`;
 }
 
-
-
 function Modal({ isOpen, onClose, title, description, children, ...props }) {
 	if (!isOpen) {
 		return null;
@@ -2014,6 +2060,168 @@
 		</div>`;
 }
 
+//https://stackoverflow.com/questions/20926551/recommended-way-of-making-react-component-div-draggable
+function Draggable({ isOpen, onClose, title, id, children, ...props }) {
+  function getDefaultProps() {
+    return {
+      // allow the initial position to be passed in as a prop
+      initialPos: {x: 0, y: 0}
+    }
+  }
+  function getInitialState() {
+    return {
+      pos: this.props.initialPos,
+      dragging: false,
+      rel: null // position relative to the cursor
+    }
+  }
+  // we could get away with not having this (and just having the listeners on
+  // our div), but then the experience would be possibly be janky. If there's
+  // anything w/ a higher z-index that gets in the way, then you're toast,
+  // etc.
+  function componentDidUpdate(props, state) {
+    if (this.state.dragging && !state.dragging) {
+      document.addEventListener('mousemove', this.onMouseMove)
+      document.addEventListener('mouseup', this.onMouseUp)
+    } else if (!this.state.dragging && state.dragging) {
+      document.removeEventListener('mousemove', this.onMouseMove)
+      document.removeEventListener('mouseup', this.onMouseUp)
+    }
+  }
+
+  // calculate relative position of the mouse and set dragging=true
+  function onMouseDown(e) {
+    // only left mouse button
+    if (e.button !== 0) return
+    var pos = $(this.getDOMNode()).offset()
+    this.setState({
+      dragging: true,
+      rel: {
+        x: e.pageX - pos.left,
+        y: e.pageY - pos.top
+      }
+    })
+    e.stopPropagation()
+    e.preventDefault()
+  }
+  function onMouseUp(e) {
+    this.setState({dragging: false})
+    e.stopPropagation()
+    e.preventDefault()
+  }
+  function onMouseMove(e) {
+    if (!this.state.dragging) return
+    this.setState({
+      pos: {
+        x: e.pageX - this.state.rel.x,
+        y: e.pageY - this.state.rel.y
+      }
+    })
+    e.stopPropagation()
+    e.preventDefault()
+  }
+  function render() {
+    // transferPropsTo will merge style & other props passed into our
+    // component to also be on the child DIV.
+    return this.transferPropsTo(React.DOM.div({
+      onMouseDown: this.onMouseDown,
+      style: {
+        left: this.state.pos.x + 'px',
+        top: this.state.pos.y + 'px'
+      }
+    }, this.props.children))
+  }
+}
+
+
+function Widget({ isOpen, onClose, title, id, children, ...props }) {
+	if (!isOpen) {
+		return null;
+	}
+
+	const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragRef = useRef(null);
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (!isDragging) return;
+      const deltaX = e.clientX - dragRef.current.startX;
+      const deltaY = e.clientY - dragRef.current.startY;
+      setPosition({
+        x: dragRef.current.initialX + deltaX,
+        y: dragRef.current.initialY + deltaY,
+      });
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging]);
+
+  const handleMouseDown = (e) => {
+    setIsDragging(true);
+    dragRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      initialX: position.x,
+      initialY: position.y,
+    };
+  };
+
+	useEffect(() => {
+		const onKeyDown = (event) => {
+			if (event.key === 'Escape') {
+				onClose();
+			}
+		};
+		document.addEventListener('keydown', onKeyDown);
+		return () => {
+			document.removeEventListener('keydown', onKeyDown);
+		};
+	}, []);
+
+	return html`
+		<div className="widget-body"
+			id="${id}"
+			style=${{ transform: `translate(${position.x}px, ${position.y}px)` }}>
+			<div class="widget-container">
+				<div class="widget-title"
+					style=${{ cursor: isDragging ? 'grabbing' : 'grab' }}
+					onMouseDown=${handleMouseDown}
+					onMouseMove=${() => {}}
+					onMouseUp=${() => {}}
+					onMouseLeave=${() => {}}>
+					${title}
+				</div>
+				<div className="widget-content">
+					${children}
+				</div>
+				<button
+					class="button-widget-top"
+					onClick=${onClose}>
+					<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="-1 -1 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M 0 1 L 3 4 L 0 7 L 1 8 L 4 5 L 7 8 L 8 7 L 5 4 L 8 1 L 7 0 L 4 3 L 1 0 L 1 0 Z"></path></svg>
+				</button>
+			</div>
+		</div>`;
+}
+function SearchAndReplaceWidget({ isOpen, closeWidget, id, children, ...props }) {
+	return html`
+		<${Widget} isOpen=${isOpen} onClose=${closeWidget}
+			title="Search and Replace"
+			id="${id}">
+				${children}
+			</${Widget}>`;
+}
+
 function EditorPreferencesModal({ isOpen, closeModal, children }) {
 	return html`
 		<${Modal} isOpen=${isOpen} onClose=${closeModal}
@@ -3747,6 +3955,9 @@
 	const [authorNoteTokens, setAuthorNoteTokens] = useSessionState('authorNoteTokens', defaultPresets.authorNoteTokens);
 	const [authorNoteDepth, setAuthorNoteDepth] = useSessionState('authorNoteDepth', defaultPresets.authorNoteDepth);
 	const [worldInfo, setWorldInfo] = useSessionState('worldInfo', defaultPresets.worldInfo);
+	const [searchAndReplaceMode, setSearchAndReplaceMode] = usePersistentState('searchAndReplaceMode', 0);
+	const [searchTerm, setSearchTerm] = usePersistentState('searchTerm', '');
+	const [replaceTerm, setReplaceTerm] = usePersistentState('replaceTerm', '');
 
 
 	function replacePlaceholders(string,placeholders) {
@@ -4952,6 +5163,29 @@
 							</span>`;
 					})}` : null}
 			</div>
+			<${SearchAndReplaceWidget}
+				isOpen=${modalState.searchAndReplace}
+				closeWidget=${() => closeModal("searchAndReplace")}
+				id="searchAndReplace"
+				>
+				<div class="searchAndReplace-inputs">
+					<${SelectBox}
+						label="Mode"
+						value=${searchAndReplaceMode}
+						onValueChange=${setSearchAndReplaceMode}
+						options=${[
+							{ name: 'Plaintext', value: 0 },
+							{ name: 'Regex', value: 1 },
+							{ name: 'Template', value: 2 },
+						]}/>
+					${searchAndReplaceMode == 0 && html`
+						<${InputBox} label="Search This" type="text"
+							readOnly=${!!cancel} value=${searchTerm} onValueChange=${setSearchTerm}/>
+						<${InputBox} label="Replace With" type="text"
+							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
+					`}
+				</div>
+			</${SearchAndReplaceWidget}>
 		</div>
 		${probs ? html`
 			<div
@@ -5259,6 +5493,9 @@
 					<svg transform="translate(0, 2)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" fill="var(--color-light)"/></svg>
 				</button>
 			</div>
+			<button onClick=${() => toggleModal("searchAndReplace")}>
+				show search and replace
+			</button>
 			${!!lastError && html`
 				<span className="error-text">${lastError}</span>`}
 		</div>

From 0c50b1e6a5910ac5908608f092b971ae3dd22b8c Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Fri, 7 Jun 2024 16:55:37 +0200
Subject: [PATCH 02/25] widget component functional, plaintext replace
 functional

---
 mikupad.html | 115 +++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 85 insertions(+), 30 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index a63069b..b9cbc01 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -344,6 +344,10 @@
 	font-size: 0.8rem;
 }
 
+.widget-body {
+	z-index: 99;
+}
+
 .widget-title {
 	-webkit-user-select: none; /* Safari */
 	-ms-user-select: none; /* IE 10 and IE 11 */
@@ -369,17 +373,25 @@
 #searchAndReplace .widget-container {
 	position: relative;
 }
-#searchAndReplace .button-widget-top {
+
+.button-widget-top {
+	all:unset;
 	position: absolute;
-	top:0.1em;
-	right:0.1em;
+	top: 0.25em;
+	right: 0.15em;
+	width:1.25em;
+	height:1.25em;
+	border-radius: 3px;
+}
+#searchAndReplace .widget-content {
+	padding: .2em;
 }
 
 .searchAndReplace-inputs {
 	display: flex;
 	flex-direction: row;
 	gap: 8px;
-	padding: .2em;
+	margin-bottom:8px;
 }
 .searchAndReplace-inputs .InputBox {
 	width: 100%;
@@ -388,9 +400,6 @@
 	width: 40%;
 }
 
-/* .widget-body {
-
-} */
 
 .modal-overlay {
 	position: fixed;
@@ -2213,12 +2222,77 @@
 			</div>
 		</div>`;
 }
-function SearchAndReplaceWidget({ isOpen, closeWidget, id, children, ...props }) {
+function SearchAndReplaceWidget({ isOpen, closeWidget, id, children, promptArea, cancel, ...props }) {
+	const [searchAndReplaceMode, setSearchAndReplaceMode] = usePersistentState('searchAndReplaceMode', 0);
+	const [searchTerm, setSearchTerm] = usePersistentState('searchTerm', '');
+	const [replaceTerm, setReplaceTerm] = usePersistentState('replaceTerm', '');
+	const [inputElement, setInputElement] = useState(null);
+
+	useEffect(() => {
+		if (promptArea.current) {
+			setInputElement(promptArea.current);
+		}
+	}, [promptArea]);
+
+
+	console.log(promptArea)
+	console.log(promptArea.current)
+
+
+	function handleSearchAndReplace(mode,search,replace) {
+		// console.log(prompt)
+		if (!search)
+			return
+
+		switch(mode) {
+			case 0:
+				plaintextReplace(search,replace,inputElement)
+				break;
+			case 1:
+				regexReplace(search,replace,inputElement)
+				break;
+			case 2:
+				templateReplace(search,replace,inputElement)
+				break;
+		}
+	}
+
+	function plaintextReplace(search,replace,elem) {
+		// console.log(elem.value)
+		// need to figure out a smart way to keep the cursor position
+		elem.value = elem.value.replaceAll(search,replace)
+	}
+
 	return html`
 		<${Widget} isOpen=${isOpen} onClose=${closeWidget}
 			title="Search and Replace"
 			id="${id}">
 				${children}
+				<div class="searchAndReplace-inputs">
+					<${SelectBox}
+						label="Mode"
+						value=${searchAndReplaceMode}
+						onValueChange=${setSearchAndReplaceMode}
+						options=${[
+							{ name: 'Plaintext', value: 0 },
+							{ name: 'Regex', value: 1 },
+							{ name: 'Template', value: 2 },
+						]}/>
+					${searchAndReplaceMode == 0 && html`
+						<${InputBox} label="Search This" type="text"
+							placeholder="Hatusne Miku"
+							readOnly=${!!cancel} value=${searchTerm} onValueChange=${setSearchTerm}/>
+						<${InputBox} label="Replace With" type="text"
+							placeholder="Makise Kurisu"
+							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
+					`}
+				</div>
+				<button
+					title="Replace"
+					disabled=${!!cancel}
+					onClick=${() => handleSearchAndReplace(searchAndReplaceMode,searchTerm,replaceTerm)}>
+						Replace
+				</button>
 			</${Widget}>`;
 }
 
@@ -3955,9 +4029,7 @@
 	const [authorNoteTokens, setAuthorNoteTokens] = useSessionState('authorNoteTokens', defaultPresets.authorNoteTokens);
 	const [authorNoteDepth, setAuthorNoteDepth] = useSessionState('authorNoteDepth', defaultPresets.authorNoteDepth);
 	const [worldInfo, setWorldInfo] = useSessionState('worldInfo', defaultPresets.worldInfo);
-	const [searchAndReplaceMode, setSearchAndReplaceMode] = usePersistentState('searchAndReplaceMode', 0);
-	const [searchTerm, setSearchTerm] = usePersistentState('searchTerm', '');
-	const [replaceTerm, setReplaceTerm] = usePersistentState('replaceTerm', '');
+
 
 
 	function replacePlaceholders(string,placeholders) {
@@ -5167,25 +5239,8 @@
 				isOpen=${modalState.searchAndReplace}
 				closeWidget=${() => closeModal("searchAndReplace")}
 				id="searchAndReplace"
-				>
-				<div class="searchAndReplace-inputs">
-					<${SelectBox}
-						label="Mode"
-						value=${searchAndReplaceMode}
-						onValueChange=${setSearchAndReplaceMode}
-						options=${[
-							{ name: 'Plaintext', value: 0 },
-							{ name: 'Regex', value: 1 },
-							{ name: 'Template', value: 2 },
-						]}/>
-					${searchAndReplaceMode == 0 && html`
-						<${InputBox} label="Search This" type="text"
-							readOnly=${!!cancel} value=${searchTerm} onValueChange=${setSearchTerm}/>
-						<${InputBox} label="Replace With" type="text"
-							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
-					`}
-				</div>
-			</${SearchAndReplaceWidget}>
+				promptArea=${promptArea}
+				cancel=${cancel}/>
 		</div>
 		${probs ? html`
 			<div

From bbd97fc561743e05f95b8ec1f60a65c1618a2f5b Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Fri, 7 Jun 2024 17:04:53 +0200
Subject: [PATCH 03/25] fixed serif light theme

---
 mikupad.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/mikupad.html b/mikupad.html
index b9cbc01..6d45186 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -346,6 +346,7 @@
 
 .widget-body {
 	z-index: 99;
+	color: var(--color-light)
 }
 
 .widget-title {

From 2c431447393a06c041a557b794db33b426629934 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Fri, 7 Jun 2024 17:17:35 +0200
Subject: [PATCH 04/25] added error display

---
 mikupad.html | 86 +++++-----------------------------------------------
 1 file changed, 7 insertions(+), 79 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 6d45186..b76908a 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -2070,80 +2070,6 @@
 		</div>`;
 }
 
-//https://stackoverflow.com/questions/20926551/recommended-way-of-making-react-component-div-draggable
-function Draggable({ isOpen, onClose, title, id, children, ...props }) {
-  function getDefaultProps() {
-    return {
-      // allow the initial position to be passed in as a prop
-      initialPos: {x: 0, y: 0}
-    }
-  }
-  function getInitialState() {
-    return {
-      pos: this.props.initialPos,
-      dragging: false,
-      rel: null // position relative to the cursor
-    }
-  }
-  // we could get away with not having this (and just having the listeners on
-  // our div), but then the experience would be possibly be janky. If there's
-  // anything w/ a higher z-index that gets in the way, then you're toast,
-  // etc.
-  function componentDidUpdate(props, state) {
-    if (this.state.dragging && !state.dragging) {
-      document.addEventListener('mousemove', this.onMouseMove)
-      document.addEventListener('mouseup', this.onMouseUp)
-    } else if (!this.state.dragging && state.dragging) {
-      document.removeEventListener('mousemove', this.onMouseMove)
-      document.removeEventListener('mouseup', this.onMouseUp)
-    }
-  }
-
-  // calculate relative position of the mouse and set dragging=true
-  function onMouseDown(e) {
-    // only left mouse button
-    if (e.button !== 0) return
-    var pos = $(this.getDOMNode()).offset()
-    this.setState({
-      dragging: true,
-      rel: {
-        x: e.pageX - pos.left,
-        y: e.pageY - pos.top
-      }
-    })
-    e.stopPropagation()
-    e.preventDefault()
-  }
-  function onMouseUp(e) {
-    this.setState({dragging: false})
-    e.stopPropagation()
-    e.preventDefault()
-  }
-  function onMouseMove(e) {
-    if (!this.state.dragging) return
-    this.setState({
-      pos: {
-        x: e.pageX - this.state.rel.x,
-        y: e.pageY - this.state.rel.y
-      }
-    })
-    e.stopPropagation()
-    e.preventDefault()
-  }
-  function render() {
-    // transferPropsTo will merge style & other props passed into our
-    // component to also be on the child DIV.
-    return this.transferPropsTo(React.DOM.div({
-      onMouseDown: this.onMouseDown,
-      style: {
-        left: this.state.pos.x + 'px',
-        top: this.state.pos.y + 'px'
-      }
-    }, this.props.children))
-  }
-}
-
-
 function Widget({ isOpen, onClose, title, id, children, ...props }) {
 	if (!isOpen) {
 		return null;
@@ -2224,6 +2150,7 @@
 		</div>`;
 }
 function SearchAndReplaceWidget({ isOpen, closeWidget, id, children, promptArea, cancel, ...props }) {
+	const [searchAndReplaceError, setSearchAndReplaceError] = useState(undefined);
 	const [searchAndReplaceMode, setSearchAndReplaceMode] = usePersistentState('searchAndReplaceMode', 0);
 	const [searchTerm, setSearchTerm] = usePersistentState('searchTerm', '');
 	const [replaceTerm, setReplaceTerm] = usePersistentState('replaceTerm', '');
@@ -2235,12 +2162,8 @@
 		}
 	}, [promptArea]);
 
-
-	console.log(promptArea)
-	console.log(promptArea.current)
-
-
 	function handleSearchAndReplace(mode,search,replace) {
+		setSearchAndReplaceError(undefined)
 		// console.log(prompt)
 		if (!search)
 			return
@@ -2262,6 +2185,9 @@
 		// console.log(elem.value)
 		// need to figure out a smart way to keep the cursor position
 		elem.value = elem.value.replaceAll(search,replace)
+		// TODO
+		// THIS DOESN'T SAVE REPLACEMENTS IF YOU DO NOT ADD ANY MANUAL EDITS
+		// BEFORE PREDICTING OR RELOADING
 	}
 
 	return html`
@@ -2294,6 +2220,8 @@
 					onClick=${() => handleSearchAndReplace(searchAndReplaceMode,searchTerm,replaceTerm)}>
 						Replace
 				</button>
+				${!!searchAndReplaceError && html`
+					<div style=${{"margin":"8px auto"}} className="error-text">${searchAndReplaceError}</div>`}
 			</${Widget}>`;
 }
 

From bc5a4eecf11ed09c86cdd564212b5e31fbdc5d0d Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Fri, 7 Jun 2024 18:38:57 +0200
Subject: [PATCH 05/25] regex replace functional

---
 mikupad.html | 26 +++++++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index b76908a..f19fdbd 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -2152,8 +2152,8 @@
 function SearchAndReplaceWidget({ isOpen, closeWidget, id, children, promptArea, cancel, ...props }) {
 	const [searchAndReplaceError, setSearchAndReplaceError] = useState(undefined);
 	const [searchAndReplaceMode, setSearchAndReplaceMode] = usePersistentState('searchAndReplaceMode', 0);
-	const [searchTerm, setSearchTerm] = usePersistentState('searchTerm', '');
-	const [replaceTerm, setReplaceTerm] = usePersistentState('replaceTerm', '');
+	const [searchTerm, setSearchTerm] = usePersistentState('searchTerm','');
+	const [replaceTerm, setReplaceTerm] = usePersistentState('replaceTerm','');
 	const [inputElement, setInputElement] = useState(null);
 
 	useEffect(() => {
@@ -2188,6 +2188,18 @@
 		// TODO
 		// THIS DOESN'T SAVE REPLACEMENTS IF YOU DO NOT ADD ANY MANUAL EDITS
 		// BEFORE PREDICTING OR RELOADING
+		// TODO
+		// Add this to undo/redo
+	}
+	function regexReplace(search,replace,elem) {
+		let regexComponents = search.match(/\/([^\/]+)\/(\w+)?/)
+		try {
+			let re = new RegExp(String.raw`${regexComponents[1]}`, `${regexComponents[2] ?? ""}`);
+			elem.value = elem.value.replace(re,replace)
+		}
+		catch {
+			setSearchAndReplaceError("Error: Not a RegEx. Is it wrapped in '/'?")
+		}
 	}
 
 	return html`
@@ -2203,7 +2215,7 @@
 						options=${[
 							{ name: 'Plaintext', value: 0 },
 							{ name: 'Regex', value: 1 },
-							{ name: 'Template', value: 2 },
+							// { name: 'Template', value: 2 },
 						]}/>
 					${searchAndReplaceMode == 0 && html`
 						<${InputBox} label="Search This" type="text"
@@ -2213,6 +2225,14 @@
 							placeholder="Makise Kurisu"
 							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
 					`}
+					${searchAndReplaceMode == 1 && html`
+						<${InputBox} label="Search This" type="text"
+							placeholder="/(\\w+) Miku/gi"
+							readOnly=${!!cancel} value=${searchTerm} onValueChange=${setSearchTerm}/>
+						<${InputBox} label="Replace With" type="text"
+							placeholder="$1 Kurisu"
+							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
+					`}
 				</div>
 				<button
 					title="Replace"

From 0236e52ec929e5a6e8f3aa12a4bad912578724ee Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Fri, 7 Jun 2024 20:07:49 +0200
Subject: [PATCH 06/25] added drag symbol to title

---
 mikupad.html | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/mikupad.html b/mikupad.html
index f19fdbd..f92c2d2 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -359,8 +359,16 @@
 	background-color: var(--color-base-40);
 	border-radius:2px;
 	width: calc(100% - 2em);
+	display: flex;
+	align-items: center;
 }
 
+.widget-title svg {
+	height: 1.1em;
+	margin-right: .25em;
+}
+
+
 #searchAndReplace {
 	position: absolute;
   width: 70%;
@@ -2136,6 +2144,8 @@
 					onMouseMove=${() => {}}
 					onMouseUp=${() => {}}
 					onMouseLeave=${() => {}}>
+					
+					<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><path d="M 5.5 11 L 7 9 L 6 9 L 6 6 L 9 6 L 9 7 L 11 5.5 L 9 4 L 9 5 L 6 5 L 6 2 L 7 2 L 5.5 0 L 4 2 L 5 2 L 5 5 L 2 5 L 2 4 L 0 5.5 L 2 7 L 2 6 L 5 6 L 5 9 L 4 9 Z"></path></svg>
 					${title}
 				</div>
 				<div className="widget-content">

From 85e2db2cff0aabb4d16173a0b0cb02bfbc8f4c72 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Fri, 7 Jun 2024 21:20:00 +0200
Subject: [PATCH 07/25] fixed typo

---
 mikupad.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index f92c2d2..27aed11 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -364,7 +364,7 @@
 }
 
 .widget-title svg {
-	height: 1.1em;
+	height: 1em;
 	margin-right: .25em;
 }
 
@@ -2144,7 +2144,6 @@
 					onMouseMove=${() => {}}
 					onMouseUp=${() => {}}
 					onMouseLeave=${() => {}}>
-					
 					<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><path d="M 5.5 11 L 7 9 L 6 9 L 6 6 L 9 6 L 9 7 L 11 5.5 L 9 4 L 9 5 L 6 5 L 6 2 L 7 2 L 5.5 0 L 4 2 L 5 2 L 5 5 L 2 5 L 2 4 L 0 5.5 L 2 7 L 2 6 L 5 6 L 5 9 L 4 9 Z"></path></svg>
 					${title}
 				</div>
@@ -2229,7 +2228,7 @@
 						]}/>
 					${searchAndReplaceMode == 0 && html`
 						<${InputBox} label="Search This" type="text"
-							placeholder="Hatusne Miku"
+							placeholder="Hatsune Miku"
 							readOnly=${!!cancel} value=${searchTerm} onValueChange=${setSearchTerm}/>
 						<${InputBox} label="Replace With" type="text"
 							placeholder="Makise Kurisu"

From 1c2ab98f88166c61f8dd503399a8e41d872df739 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Fri, 7 Jun 2024 21:22:11 +0200
Subject: [PATCH 08/25] moved widget functions

---
 mikupad.html | 352 +++++++++++++++++++++++++--------------------------
 1 file changed, 176 insertions(+), 176 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 27aed11..cf025ed 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -2078,182 +2078,6 @@
 		</div>`;
 }
 
-function Widget({ isOpen, onClose, title, id, children, ...props }) {
-	if (!isOpen) {
-		return null;
-	}
-
-	const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [isDragging, setIsDragging] = useState(false);
-  const dragRef = useRef(null);
-
-  useEffect(() => {
-    const handleMouseMove = (e) => {
-      if (!isDragging) return;
-      const deltaX = e.clientX - dragRef.current.startX;
-      const deltaY = e.clientY - dragRef.current.startY;
-      setPosition({
-        x: dragRef.current.initialX + deltaX,
-        y: dragRef.current.initialY + deltaY,
-      });
-    };
-
-    const handleMouseUp = () => {
-      setIsDragging(false);
-    };
-
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-
-    return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [isDragging]);
-
-  const handleMouseDown = (e) => {
-    setIsDragging(true);
-    dragRef.current = {
-      startX: e.clientX,
-      startY: e.clientY,
-      initialX: position.x,
-      initialY: position.y,
-    };
-  };
-
-	useEffect(() => {
-		const onKeyDown = (event) => {
-			if (event.key === 'Escape') {
-				onClose();
-			}
-		};
-		document.addEventListener('keydown', onKeyDown);
-		return () => {
-			document.removeEventListener('keydown', onKeyDown);
-		};
-	}, []);
-
-	return html`
-		<div className="widget-body"
-			id="${id}"
-			style=${{ transform: `translate(${position.x}px, ${position.y}px)` }}>
-			<div class="widget-container">
-				<div class="widget-title"
-					style=${{ cursor: isDragging ? 'grabbing' : 'grab' }}
-					onMouseDown=${handleMouseDown}
-					onMouseMove=${() => {}}
-					onMouseUp=${() => {}}
-					onMouseLeave=${() => {}}>
-					<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><path d="M 5.5 11 L 7 9 L 6 9 L 6 6 L 9 6 L 9 7 L 11 5.5 L 9 4 L 9 5 L 6 5 L 6 2 L 7 2 L 5.5 0 L 4 2 L 5 2 L 5 5 L 2 5 L 2 4 L 0 5.5 L 2 7 L 2 6 L 5 6 L 5 9 L 4 9 Z"></path></svg>
-					${title}
-				</div>
-				<div className="widget-content">
-					${children}
-				</div>
-				<button
-					class="button-widget-top"
-					onClick=${onClose}>
-					<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="-1 -1 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M 0 1 L 3 4 L 0 7 L 1 8 L 4 5 L 7 8 L 8 7 L 5 4 L 8 1 L 7 0 L 4 3 L 1 0 L 1 0 Z"></path></svg>
-				</button>
-			</div>
-		</div>`;
-}
-function SearchAndReplaceWidget({ isOpen, closeWidget, id, children, promptArea, cancel, ...props }) {
-	const [searchAndReplaceError, setSearchAndReplaceError] = useState(undefined);
-	const [searchAndReplaceMode, setSearchAndReplaceMode] = usePersistentState('searchAndReplaceMode', 0);
-	const [searchTerm, setSearchTerm] = usePersistentState('searchTerm','');
-	const [replaceTerm, setReplaceTerm] = usePersistentState('replaceTerm','');
-	const [inputElement, setInputElement] = useState(null);
-
-	useEffect(() => {
-		if (promptArea.current) {
-			setInputElement(promptArea.current);
-		}
-	}, [promptArea]);
-
-	function handleSearchAndReplace(mode,search,replace) {
-		setSearchAndReplaceError(undefined)
-		// console.log(prompt)
-		if (!search)
-			return
-
-		switch(mode) {
-			case 0:
-				plaintextReplace(search,replace,inputElement)
-				break;
-			case 1:
-				regexReplace(search,replace,inputElement)
-				break;
-			case 2:
-				templateReplace(search,replace,inputElement)
-				break;
-		}
-	}
-
-	function plaintextReplace(search,replace,elem) {
-		// console.log(elem.value)
-		// need to figure out a smart way to keep the cursor position
-		elem.value = elem.value.replaceAll(search,replace)
-		// TODO
-		// THIS DOESN'T SAVE REPLACEMENTS IF YOU DO NOT ADD ANY MANUAL EDITS
-		// BEFORE PREDICTING OR RELOADING
-		// TODO
-		// Add this to undo/redo
-	}
-	function regexReplace(search,replace,elem) {
-		let regexComponents = search.match(/\/([^\/]+)\/(\w+)?/)
-		try {
-			let re = new RegExp(String.raw`${regexComponents[1]}`, `${regexComponents[2] ?? ""}`);
-			elem.value = elem.value.replace(re,replace)
-		}
-		catch {
-			setSearchAndReplaceError("Error: Not a RegEx. Is it wrapped in '/'?")
-		}
-	}
-
-	return html`
-		<${Widget} isOpen=${isOpen} onClose=${closeWidget}
-			title="Search and Replace"
-			id="${id}">
-				${children}
-				<div class="searchAndReplace-inputs">
-					<${SelectBox}
-						label="Mode"
-						value=${searchAndReplaceMode}
-						onValueChange=${setSearchAndReplaceMode}
-						options=${[
-							{ name: 'Plaintext', value: 0 },
-							{ name: 'Regex', value: 1 },
-							// { name: 'Template', value: 2 },
-						]}/>
-					${searchAndReplaceMode == 0 && html`
-						<${InputBox} label="Search This" type="text"
-							placeholder="Hatsune Miku"
-							readOnly=${!!cancel} value=${searchTerm} onValueChange=${setSearchTerm}/>
-						<${InputBox} label="Replace With" type="text"
-							placeholder="Makise Kurisu"
-							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
-					`}
-					${searchAndReplaceMode == 1 && html`
-						<${InputBox} label="Search This" type="text"
-							placeholder="/(\\w+) Miku/gi"
-							readOnly=${!!cancel} value=${searchTerm} onValueChange=${setSearchTerm}/>
-						<${InputBox} label="Replace With" type="text"
-							placeholder="$1 Kurisu"
-							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
-					`}
-				</div>
-				<button
-					title="Replace"
-					disabled=${!!cancel}
-					onClick=${() => handleSearchAndReplace(searchAndReplaceMode,searchTerm,replaceTerm)}>
-						Replace
-				</button>
-				${!!searchAndReplaceError && html`
-					<div style=${{"margin":"8px auto"}} className="error-text">${searchAndReplaceError}</div>`}
-			</${Widget}>`;
-}
-
 function EditorPreferencesModal({ isOpen, closeModal, children }) {
 	return html`
 		<${Modal} isOpen=${isOpen} onClose=${closeModal}
@@ -3206,6 +3030,182 @@
 		</${Modal}>`;
 }
 
+function Widget({ isOpen, onClose, title, id, children, ...props }) {
+	if (!isOpen) {
+		return null;
+	}
+
+	const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const dragRef = useRef(null);
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      if (!isDragging) return;
+      const deltaX = e.clientX - dragRef.current.startX;
+      const deltaY = e.clientY - dragRef.current.startY;
+      setPosition({
+        x: dragRef.current.initialX + deltaX,
+        y: dragRef.current.initialY + deltaY,
+      });
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isDragging]);
+
+  const handleMouseDown = (e) => {
+    setIsDragging(true);
+    dragRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      initialX: position.x,
+      initialY: position.y,
+    };
+  };
+
+	useEffect(() => {
+		const onKeyDown = (event) => {
+			if (event.key === 'Escape') {
+				onClose();
+			}
+		};
+		document.addEventListener('keydown', onKeyDown);
+		return () => {
+			document.removeEventListener('keydown', onKeyDown);
+		};
+	}, []);
+
+	return html`
+		<div className="widget-body"
+			id="${id}"
+			style=${{ transform: `translate(${position.x}px, ${position.y}px)` }}>
+			<div class="widget-container">
+				<div class="widget-title"
+					style=${{ cursor: isDragging ? 'grabbing' : 'grab' }}
+					onMouseDown=${handleMouseDown}
+					onMouseMove=${() => {}}
+					onMouseUp=${() => {}}
+					onMouseLeave=${() => {}}>
+					<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><path d="M 5.5 11 L 7 9 L 6 9 L 6 6 L 9 6 L 9 7 L 11 5.5 L 9 4 L 9 5 L 6 5 L 6 2 L 7 2 L 5.5 0 L 4 2 L 5 2 L 5 5 L 2 5 L 2 4 L 0 5.5 L 2 7 L 2 6 L 5 6 L 5 9 L 4 9 Z"></path></svg>
+					${title}
+				</div>
+				<div className="widget-content">
+					${children}
+				</div>
+				<button
+					class="button-widget-top"
+					onClick=${onClose}>
+					<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="-1 -1 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M 0 1 L 3 4 L 0 7 L 1 8 L 4 5 L 7 8 L 8 7 L 5 4 L 8 1 L 7 0 L 4 3 L 1 0 L 1 0 Z"></path></svg>
+				</button>
+			</div>
+		</div>`;
+}
+function SearchAndReplaceWidget({ isOpen, closeWidget, id, children, promptArea, cancel, ...props }) {
+	const [searchAndReplaceError, setSearchAndReplaceError] = useState(undefined);
+	const [searchAndReplaceMode, setSearchAndReplaceMode] = usePersistentState('searchAndReplaceMode', 0);
+	const [searchTerm, setSearchTerm] = usePersistentState('searchTerm','');
+	const [replaceTerm, setReplaceTerm] = usePersistentState('replaceTerm','');
+	const [inputElement, setInputElement] = useState(null);
+
+	useEffect(() => {
+		if (promptArea.current) {
+			setInputElement(promptArea.current);
+		}
+	}, [promptArea]);
+
+	function handleSearchAndReplace(mode,search,replace) {
+		setSearchAndReplaceError(undefined)
+		// console.log(prompt)
+		if (!search)
+			return
+
+		switch(mode) {
+			case 0:
+				plaintextReplace(search,replace,inputElement)
+				break;
+			case 1:
+				regexReplace(search,replace,inputElement)
+				break;
+			case 2:
+				templateReplace(search,replace,inputElement)
+				break;
+		}
+	}
+
+	function plaintextReplace(search,replace,elem) {
+		// console.log(elem.value)
+		// need to figure out a smart way to keep the cursor position
+		elem.value = elem.value.replaceAll(search,replace)
+		// TODO
+		// THIS DOESN'T SAVE REPLACEMENTS IF YOU DO NOT ADD ANY MANUAL EDITS
+		// BEFORE PREDICTING OR RELOADING
+		// TODO
+		// Add this to undo/redo
+	}
+	function regexReplace(search,replace,elem) {
+		let regexComponents = search.match(/\/([^\/]+)\/(\w+)?/)
+		try {
+			let re = new RegExp(String.raw`${regexComponents[1]}`, `${regexComponents[2] ?? ""}`);
+			elem.value = elem.value.replace(re,replace)
+		}
+		catch {
+			setSearchAndReplaceError("Error: Not a RegEx. Is it wrapped in '/'?")
+		}
+	}
+
+	return html`
+		<${Widget} isOpen=${isOpen} onClose=${closeWidget}
+			title="Search and Replace"
+			id="${id}">
+				${children}
+				<div class="searchAndReplace-inputs">
+					<${SelectBox}
+						label="Mode"
+						value=${searchAndReplaceMode}
+						onValueChange=${setSearchAndReplaceMode}
+						options=${[
+							{ name: 'Plaintext', value: 0 },
+							{ name: 'Regex', value: 1 },
+							// { name: 'Template', value: 2 },
+						]}/>
+					${searchAndReplaceMode == 0 && html`
+						<${InputBox} label="Search This" type="text"
+							placeholder="Hatsune Miku"
+							readOnly=${!!cancel} value=${searchTerm} onValueChange=${setSearchTerm}/>
+						<${InputBox} label="Replace With" type="text"
+							placeholder="Makise Kurisu"
+							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
+					`}
+					${searchAndReplaceMode == 1 && html`
+						<${InputBox} label="Search This" type="text"
+							placeholder="/(\\w+) Miku/gi"
+							readOnly=${!!cancel} value=${searchTerm} onValueChange=${setSearchTerm}/>
+						<${InputBox} label="Replace With" type="text"
+							placeholder="$1 Kurisu"
+							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
+					`}
+				</div>
+				<button
+					title="Replace"
+					disabled=${!!cancel}
+					onClick=${() => handleSearchAndReplace(searchAndReplaceMode,searchTerm,replaceTerm)}>
+						Replace
+				</button>
+				${!!searchAndReplaceError && html`
+					<div style=${{"margin":"8px auto"}} className="error-text">${searchAndReplaceError}</div>`}
+		</${Widget}>`;
+}
+
 class IndexedDBAdapter {
 	constructor() {
 		this.dbName = 'MikuPad';

From 0524cd213a47a4df6cdb4e90be8e72c42691c57c Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sat, 8 Jun 2024 00:20:27 +0200
Subject: [PATCH 09/25] added search and replace button to prompt-container

---
 mikupad.html | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index cf025ed..13e9ecc 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -5153,11 +5153,27 @@
 	return html`
 		<div id="prompt-container" onMouseMove=${onPromptMouseMove} style=${{ 'margin-bottom': isMobile ? sidebarHeight + 'px' : 0 }}>
 			<button
+				title="Editor Preferences"
 				className="textAreaSettings"
 				onClick=${() => toggleModal("prompt")}>
-
 				<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="-1 -5 8 7" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 3-3C3-4 3-5 5-5L4-4 5-3 6-4C6-2 5-2 4-2L1 1C0 2-1 1 0 0"></path></svg>
 			</button>
+			<button
+				title="Search & Replace"
+				style=${{"margin-top":"1.5em"}}
+				className="textAreaSettings"
+				onClick=${() => toggleModal("searchAndReplace")}>
+				<svg
+					style=${{"height":"1.3em"}}
+					fill="currentColor" stroke="currentColor"
+					stroke-linecap="round"
+					stroke-width="5" viewBox="0 0 29.4 35.4" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+					<path fill="none" stroke-linejoin="round" d="M5 9.1a10.6 10.6 0 0 1 9.7-6.6 10.6 10.6 0 0 1 9.8 6.6m0 7.9a10.6 10.6 0 0 1-9.8 6.7A10.6 10.6 0 0 1 5 17"/>
+					<path fill="none" d="m20.4 24.5 3.6 7.1"/>
+					<path stroke="none" d="M3.6 13.2 0 23.2l13.6-6.4-10-3.6m22.2-.2 3.6-10L16 9.3l10 3.6"/>
+				</svg>
+
+			</button>
 			<textarea
 				ref=${promptArea}
 				readOnly=${!!cancel}
@@ -5506,9 +5522,6 @@
 					<svg transform="translate(0, 2)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 512 512"><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" fill="var(--color-light)"/></svg>
 				</button>
 			</div>
-			<button onClick=${() => toggleModal("searchAndReplace")}>
-				show search and replace
-			</button>
 			${!!lastError && html`
 				<span className="error-text">${lastError}</span>`}
 		</div>

From a5736be3a6fb4be9ced84c135160543ac31a859f Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sat, 8 Jun 2024 00:37:26 +0200
Subject: [PATCH 10/25] String.raw for replacement too

---
 mikupad.html | 48 ++++++++++++++++++++++++------------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 13e9ecc..77a2f3e 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -3155,7 +3155,7 @@
 	function regexReplace(search,replace,elem) {
 		let regexComponents = search.match(/\/([^\/]+)\/(\w+)?/)
 		try {
-			let re = new RegExp(String.raw`${regexComponents[1]}`, `${regexComponents[2] ?? ""}`);
+			let re = new RegExp(String.raw`${regexComponents[1]}`, String.raw`${regexComponents[2] ?? ""}`);
 			elem.value = elem.value.replace(re,replace)
 		}
 		catch {
@@ -4783,30 +4783,30 @@
 			if (defaultPrevented)
 				return;
 			switch (`${altKey}:${ctrlKey}:${shiftKey}:${key}`) {
-			case 'false:false:true:Enter':
-			case 'false:true:false:Enter':
-				predict();
-				break;
-			case 'false:false:false:Escape':
-				cancel();
-				break;
-			case 'false:true:false:r':
-			case 'false:false:true:r':
-				undoAndPredict();
-				break;
-			case 'false:true:false:z':
-			case 'false:false:true:z':
-				if (cancel || !undo()) return;
-				break;
-			case 'false:true:true:Z':
-			case 'false:true:false:y':
-			case 'false:false:true:y':
-				if (cancel || !redo()) return;
-				break;
+				case 'false:false:true:Enter':
+				case 'false:true:false:Enter':
+					predict();
+					break;
+				case 'false:false:false:Escape':
+					cancel();
+					break;
+				case 'false:true:false:r':
+				case 'false:false:true:r':
+					undoAndPredict();
+					break;
+				case 'false:true:false:z':
+				case 'false:false:true:z':
+					if (cancel || !undo()) return;
+					break;
+				case 'false:true:true:Z':
+				case 'false:true:false:y':
+				case 'false:false:true:y':
+					if (cancel || !redo()) return;
+					break;
 
-			default:
-				keyState.current = e;
-				return;
+				default:
+					keyState.current = e;
+					return;
 			}
 			e.preventDefault();
 		}

From 1755bf630d14e10181f09896ee36124e65e27808 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sat, 8 Jun 2024 00:50:52 +0200
Subject: [PATCH 11/25] fixed nockoffAI theme

---
 mikupad.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/mikupad.html b/mikupad.html
index 77a2f3e..8e2e4e4 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -348,6 +348,10 @@
 	z-index: 99;
 	color: var(--color-light)
 }
+html.nockoffAI #searchAndReplace {
+	background: var(--color-sidebar);
+}
+
 
 .widget-title {
 	-webkit-user-select: none; /* Safari */
@@ -362,6 +366,10 @@
 	display: flex;
 	align-items: center;
 }
+html.nockoffAI .widget-title {
+	background: var(--color-input);
+	color: var(--color-base-50);
+}
 
 .widget-title svg {
 	height: 1em;

From 153152e5c72b9a8ce3476d98295d6a5d8dc5a236 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sat, 8 Jun 2024 00:55:38 +0200
Subject: [PATCH 12/25] fixed spacing in widget

---
 mikupad.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 8e2e4e4..1423a78 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -411,10 +411,10 @@
 	margin-bottom:8px;
 }
 .searchAndReplace-inputs .InputBox {
-	width: 100%;
+	flex-grow: 1;
 }
 .searchAndReplace-inputs .SelectBox {
-	width: 40%;
+	width: max-content;
 }
 
 

From 4104c8f62e17f68b7a3d9e102f65f6377b585ab6 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sat, 8 Jun 2024 10:00:04 +0200
Subject: [PATCH 13/25] cosmetic fixes, fixed revert bug

---
 mikupad.html | 98 ++++++++++++++++++++++++++++++++--------------------
 1 file changed, 61 insertions(+), 37 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 1423a78..8063a23 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -344,15 +344,29 @@
 	font-size: 0.8rem;
 }
 
+.flexfiller {
+	flex-grow: 1;
+}
+
 .widget-body {
-	z-index: 99;
+	z-index: 10;
 	color: var(--color-light)
 }
 html.nockoffAI #searchAndReplace {
 	background: var(--color-sidebar);
 }
 
-
+.widget-title-bar {
+	display: flex;
+	align-items: center;
+}
+.button-widget-top {
+	all:unset;
+	margin: auto;
+	width:1.25em;
+	height:1.25em;
+	border-radius: 3px;
+}
 .widget-title {
 	-webkit-user-select: none; /* Safari */
 	-ms-user-select: none; /* IE 10 and IE 11 */
@@ -370,13 +384,15 @@
 	background: var(--color-input);
 	color: var(--color-base-50);
 }
+html.monospace-dark .widget-title {
+  background: #46465a;
+} 
 
 .widget-title svg {
 	height: 1em;
 	margin-right: .25em;
 }
 
-
 #searchAndReplace {
 	position: absolute;
   width: 70%;
@@ -387,19 +403,10 @@
 	padding:0.25em;
 }
 
-#searchAndReplace .widget-container {
-	position: relative;
-}
+html.monospace-dark #searchAndReplace {
+  background: #282833;
+} 
 
-.button-widget-top {
-	all:unset;
-	position: absolute;
-	top: 0.25em;
-	right: 0.15em;
-	width:1.25em;
-	height:1.25em;
-	border-radius: 3px;
-}
 #searchAndReplace .widget-content {
 	padding: .2em;
 }
@@ -417,6 +424,10 @@
 	width: max-content;
 }
 
+.searchAndReplace-buttons {
+	display: flex;
+	gap: 8px;
+}
 
 .modal-overlay {
 	position: fixed;
@@ -428,6 +439,7 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	z-index: 20;
 }
 .modal-container {
 	width: 100%;
@@ -3098,23 +3110,25 @@
 			id="${id}"
 			style=${{ transform: `translate(${position.x}px, ${position.y}px)` }}>
 			<div class="widget-container">
-				<div class="widget-title"
-					style=${{ cursor: isDragging ? 'grabbing' : 'grab' }}
-					onMouseDown=${handleMouseDown}
-					onMouseMove=${() => {}}
-					onMouseUp=${() => {}}
-					onMouseLeave=${() => {}}>
-					<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><path d="M 5.5 11 L 7 9 L 6 9 L 6 6 L 9 6 L 9 7 L 11 5.5 L 9 4 L 9 5 L 6 5 L 6 2 L 7 2 L 5.5 0 L 4 2 L 5 2 L 5 5 L 2 5 L 2 4 L 0 5.5 L 2 7 L 2 6 L 5 6 L 5 9 L 4 9 Z"></path></svg>
-					${title}
+				<div class="widget-title-bar">
+					<div class="widget-title"
+						style=${{ cursor: isDragging ? 'grabbing' : 'grab' }}
+						onMouseDown=${handleMouseDown}
+						onMouseMove=${() => {}}
+						onMouseUp=${() => {}}
+						onMouseLeave=${() => {}}>
+						<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><path d="M 5.5 11 L 7 9 L 6 9 L 6 6 L 9 6 L 9 7 L 11 5.5 L 9 4 L 9 5 L 6 5 L 6 2 L 7 2 L 5.5 0 L 4 2 L 5 2 L 5 5 L 2 5 L 2 4 L 0 5.5 L 2 7 L 2 6 L 5 6 L 5 9 L 4 9 Z"></path></svg>
+						${title}
+					</div>
+					<button
+						class="button-widget-top"
+						onClick=${onClose}>
+						<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="-1 -1 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M 0 1 L 3 4 L 0 7 L 1 8 L 4 5 L 7 8 L 8 7 L 5 4 L 8 1 L 7 0 L 4 3 L 1 0 L 1 0 Z"></path></svg>
+					</button>
 				</div>
 				<div className="widget-content">
 					${children}
 				</div>
-				<button
-					class="button-widget-top"
-					onClick=${onClose}>
-					<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="-1 -1 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M 0 1 L 3 4 L 0 7 L 1 8 L 4 5 L 7 8 L 8 7 L 5 4 L 8 1 L 7 0 L 4 3 L 1 0 L 1 0 Z"></path></svg>
-				</button>
 			</div>
 		</div>`;
 }
@@ -3155,16 +3169,17 @@
 		// need to figure out a smart way to keep the cursor position
 		elem.value = elem.value.replaceAll(search,replace)
 		// TODO
-		// THIS DOESN'T SAVE REPLACEMENTS IF YOU DO NOT ADD ANY MANUAL EDITS
-		// BEFORE PREDICTING OR RELOADING
-		// TODO
 		// Add this to undo/redo
+		const event = new Event('input', { bubbles: true });
+		elem.dispatchEvent(event);
 	}
 	function regexReplace(search,replace,elem) {
 		let regexComponents = search.match(/\/([^\/]+)\/(\w+)?/)
 		try {
 			let re = new RegExp(String.raw`${regexComponents[1]}`, String.raw`${regexComponents[2] ?? ""}`);
 			elem.value = elem.value.replace(re,replace)
+			const event = new Event('input', { bubbles: true });
+			elem.dispatchEvent(event);
 		}
 		catch {
 			setSearchAndReplaceError("Error: Not a RegEx. Is it wrapped in '/'?")
@@ -3203,12 +3218,21 @@
 							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
 					`}
 				</div>
-				<button
-					title="Replace"
-					disabled=${!!cancel}
-					onClick=${() => handleSearchAndReplace(searchAndReplaceMode,searchTerm,replaceTerm)}>
-						Replace
-				</button>
+				<div class="searchAndReplace-buttons">
+					<div class="flexfiller"/>
+					<button
+						title="Replace"
+						disabled=${!!cancel}
+						onClick=${() => handleSearchAndReplace(searchAndReplaceMode,searchTerm,replaceTerm)}>
+							Replace
+					</button>
+					<button
+						title="Find"
+						disabled=${!!cancel}
+						onClick=${() => handleFind(searchAndReplaceMode,searchTerm)}>
+							Find
+					</button>
+				</div>
 				${!!searchAndReplaceError && html`
 					<div style=${{"margin":"8px auto"}} className="error-text">${searchAndReplaceError}</div>`}
 		</${Widget}>`;

From 3d8509297f509ffff1f3599dbcc9e571b57151a1 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sat, 8 Jun 2024 11:18:39 +0200
Subject: [PATCH 14/25] added find previous and next functions

---
 mikupad.html | 153 +++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 143 insertions(+), 10 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index dea618e..08b3a66 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -432,6 +432,17 @@
 	display: flex;
 	gap: 8px;
 }
+#searchAndReplace .findButton {
+	display: flex;
+	align-items: center;
+}
+#searchAndReplace .findButtonText svg {
+	margin-right:.25em;
+}
+#searchAndReplace .findButton svg {
+	width: .75em;
+}
+
 
 .modal-overlay {
 	position: fixed;
@@ -3196,12 +3207,120 @@
 		}
 	}, [promptArea]);
 
-	function handleSearchAndReplace(mode,search,replace) {
+	function handleFindNext(mode,search) {
+		setSearchAndReplaceError(undefined)
+		if (!search)
+			return
+		switch(mode) {
+			case 0:
+				findNextMatch(mode,search,inputElement)
+				break;
+			case 1:
+				findNextMatch(mode,search,inputElement)
+				break;
+			case 2:
+				templateFindNext(search,inputElement)
+				break;
+		}
+	}
+	function handleFindPrev(mode,search) {
 		setSearchAndReplaceError(undefined)
-		// console.log(prompt)
 		if (!search)
 			return
+		switch(mode) {
+			case 0:
+				findPrevMatch(mode,search,inputElement)
+				break;
+			case 1:
+				findPrevMatch(mode,search,inputElement)
+				break;
+			case 2:
+				templateFindPrev(mode,search,inputElement)
+				break;
+		}
+	}
+
+	// Plaintext Find
+	let positions = [];
+	let currentIndex = -1;
+
+	function findAllMatches(mode, search, elem) {
+		setSearchAndReplaceError(undefined)
+		let startIndex = 0;
+		let index;
+		let match;
+		let positions = [];
+		let text = elem.value;
+
+		if (mode == 0) {
+			while ((index = text.indexOf(search, startIndex)) > -1) {
+					positions.push({ start: index, end: index + search.length });
+					startIndex = index + search.length;
+			}
+		}
+		else if (mode == 1) {
+			try {
+				let regexComponents = search.match(/\/([^\/]+)\/(\w+)?/)
+				if (regexComponents[2] && !regexComponents[2].includes("g"))
+					regexComponents[2] += "g" // if no global flag, while loop is infinite
+				let re = new RegExp(String.raw`${regexComponents[1]}`, String.raw`${regexComponents[2] ?? "g"}`);
+				console.log("a")
+				while ((match = re.exec(text)) !== null) {
+					positions.push({ start: match.index, end: re.lastIndex });
+					if (match.index === re.lastIndex) {
+						re.lastIndex++;
+					}
+				}
+			}
+			catch (e) {
+				reportError(e);
+				const errStr = e.toString()
+				if (errStr == "TypeError: regexComponents is null")
+					setSearchAndReplaceError("Error: Regex not wrapped in '/'")
+				else
+					setSearchAndReplaceError(errStr)
+			}
+		}
+		return positions;
+	}
+	function highlightCurrent(elem) {
+		if (positions.length > 0 && currentIndex >= 0 && currentIndex < positions.length) {
+			const position = positions[currentIndex];
+			elem.focus();
+			elem.setSelectionRange(position.start, position.end);
+		}
+	}
+	function findNextMatch(mode,search,elem) {
+		if (positions.length === 0) {
+			findAndStorePositions(mode,search,elem);
+		}
+		if (positions.length > 0) {
+			currentIndex = (currentIndex + 1) % positions.length;
+			highlightCurrent(elem);
+		}
+	}
+
+	function findPrevMatch(mode,search,elem) {
+		if (positions.length === 0) {
+			findAndStorePositions(mode,search,elem);
+		}
+		if (positions.length > 0) {
+			currentIndex = (currentIndex - 1 + positions.length) % positions.length;
+			highlightCurrent(elem);
+		}
+	}
+
+	function findAndStorePositions(mode,search,elem) {
+		positions = findAllMatches(mode, search, elem);
+		currentIndex = -1; 
+	}
+
+
 
+	function handleSearchAndReplace(mode,search,replace) {
+		setSearchAndReplaceError(undefined)
+		if (!search)
+			return
 		switch(mode) {
 			case 0:
 				plaintextReplace(search,replace,inputElement)
@@ -3232,8 +3351,13 @@
 			const event = new Event('input', { bubbles: true });
 			elem.dispatchEvent(event);
 		}
-		catch {
-			setSearchAndReplaceError("Error: Not a RegEx. Is it wrapped in '/'?")
+		catch (e) {
+			reportError(e);
+			const errStr = e.toString()
+			if (errStr == "TypeError: regexComponents is null")
+				setSearchAndReplaceError("Error: Regex not wrapped in '/'")
+			else
+				setSearchAndReplaceError(errStr)
 		}
 	}
 
@@ -3272,16 +3396,25 @@
 				<div class="searchAndReplace-buttons">
 					<div class="flexfiller"/>
 					<button
-						title="Replace"
+						class="findButton"
+						title="Find Previous"
 						disabled=${!!cancel}
-						onClick=${() => handleSearchAndReplace(searchAndReplaceMode,searchTerm,replaceTerm)}>
-							Replace
+						onClick=${() => handleFindPrev(searchAndReplaceMode,searchTerm)}>
+						<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 2 1" xmlns="http://www.w3.org/2000/svg"><path d="M 0 1 L 1 0 L 2 1 Z"></path></svg>
+					</button>
+					<button
+						class="findButton findButtonText"
+						title="Find Next"
+						disabled=${!!cancel}
+						onClick=${() => handleFindNext(searchAndReplaceMode,searchTerm)}>
+							<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 2 1" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 1 1 L 2 0 Z"></path></svg>
+							Find Next
 					</button>
 					<button
-						title="Find"
+						title="Replace"
 						disabled=${!!cancel}
-						onClick=${() => handleFind(searchAndReplaceMode,searchTerm)}>
-							Find
+						onClick=${() => handleSearchAndReplace(searchAndReplaceMode,searchTerm,replaceTerm)}>
+							Replace
 					</button>
 				</div>
 				${!!searchAndReplaceError && html`

From 7b38310282259d55952bb240d4e7cb215b8a6cfd Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sat, 8 Jun 2024 11:22:17 +0200
Subject: [PATCH 15/25] remove console.logs

---
 mikupad.html | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 08b3a66..93dd915 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -3264,7 +3264,6 @@
 				if (regexComponents[2] && !regexComponents[2].includes("g"))
 					regexComponents[2] += "g" // if no global flag, while loop is infinite
 				let re = new RegExp(String.raw`${regexComponents[1]}`, String.raw`${regexComponents[2] ?? "g"}`);
-				console.log("a")
 				while ((match = re.exec(text)) !== null) {
 					positions.push({ start: match.index, end: re.lastIndex });
 					if (match.index === re.lastIndex) {
@@ -3318,6 +3317,8 @@
 
 
 	function handleSearchAndReplace(mode,search,replace) {
+		// TODO
+		// Add this to undo/redo
 		setSearchAndReplaceError(undefined)
 		if (!search)
 			return
@@ -3335,11 +3336,8 @@
 	}
 
 	function plaintextReplace(search,replace,elem) {
-		// console.log(elem.value)
 		// need to figure out a smart way to keep the cursor position
 		elem.value = elem.value.replaceAll(search,replace)
-		// TODO
-		// Add this to undo/redo
 		const event = new Event('input', { bubbles: true });
 		elem.dispatchEvent(event);
 	}

From d1605ec6c6e960439e09310ab4868903f644c149 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sat, 8 Jun 2024 11:35:39 +0200
Subject: [PATCH 16/25] clarified button labels and titles

---
 mikupad.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 93dd915..0b07a27 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -3395,24 +3395,24 @@
 					<div class="flexfiller"/>
 					<button
 						class="findButton"
-						title="Find Previous"
+						title="Find Previous Match"
 						disabled=${!!cancel}
 						onClick=${() => handleFindPrev(searchAndReplaceMode,searchTerm)}>
 						<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 2 1" xmlns="http://www.w3.org/2000/svg"><path d="M 0 1 L 1 0 L 2 1 Z"></path></svg>
 					</button>
 					<button
 						class="findButton findButtonText"
-						title="Find Next"
+						title="Find Next Match"
 						disabled=${!!cancel}
 						onClick=${() => handleFindNext(searchAndReplaceMode,searchTerm)}>
 							<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 2 1" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 1 1 L 2 0 Z"></path></svg>
 							Find Next
 					</button>
 					<button
-						title="Replace"
+						title="Replace All Matches"
 						disabled=${!!cancel}
 						onClick=${() => handleSearchAndReplace(searchAndReplaceMode,searchTerm,replaceTerm)}>
-							Replace
+							Replace All
 					</button>
 				</div>
 				${!!searchAndReplaceError && html`

From a26e00a913b5e19b0b02ed8614123c5d6ce0f39b Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sat, 8 Jun 2024 12:33:44 +0200
Subject: [PATCH 17/25] added separate field for regex flags

---
 mikupad.html | 62 ++++++++++++++++++++++++++++------------------------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 0b07a27..c6d554d 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -422,7 +422,7 @@
 	margin-bottom:8px;
 }
 .searchAndReplace-inputs .InputBox {
-	flex-grow: 1;
+	flex: 1
 }
 .searchAndReplace-inputs .SelectBox {
 	width: max-content;
@@ -3198,6 +3198,7 @@
 	const [searchAndReplaceError, setSearchAndReplaceError] = useState(undefined);
 	const [searchAndReplaceMode, setSearchAndReplaceMode] = usePersistentState('searchAndReplaceMode', 0);
 	const [searchTerm, setSearchTerm] = usePersistentState('searchTerm','');
+	const [searchFlags, setSearchFlags] = usePersistentState('searchFlags','gi');
 	const [replaceTerm, setReplaceTerm] = usePersistentState('replaceTerm','');
 	const [inputElement, setInputElement] = useState(null);
 
@@ -3207,32 +3208,32 @@
 		}
 	}, [promptArea]);
 
-	function handleFindNext(mode,search) {
+	function handleFindNext(mode,search,flags) {
 		setSearchAndReplaceError(undefined)
 		if (!search)
 			return
 		switch(mode) {
 			case 0:
-				findNextMatch(mode,search,inputElement)
+				findNextMatch(mode,search,flags,inputElement)
 				break;
 			case 1:
-				findNextMatch(mode,search,inputElement)
+				findNextMatch(mode,search,flags,inputElement)
 				break;
 			case 2:
 				templateFindNext(search,inputElement)
 				break;
 		}
 	}
-	function handleFindPrev(mode,search) {
+	function handleFindPrev(mode,search,flags) {
 		setSearchAndReplaceError(undefined)
 		if (!search)
 			return
 		switch(mode) {
 			case 0:
-				findPrevMatch(mode,search,inputElement)
+				findPrevMatch(mode,search,flags,inputElement)
 				break;
 			case 1:
-				findPrevMatch(mode,search,inputElement)
+				findPrevMatch(mode,search,flags,inputElement)
 				break;
 			case 2:
 				templateFindPrev(mode,search,inputElement)
@@ -3244,7 +3245,7 @@
 	let positions = [];
 	let currentIndex = -1;
 
-	function findAllMatches(mode, search, elem) {
+	function findAllMatches(mode, search, flags, elem) {
 		setSearchAndReplaceError(undefined)
 		let startIndex = 0;
 		let index;
@@ -3260,10 +3261,9 @@
 		}
 		else if (mode == 1) {
 			try {
-				let regexComponents = search.match(/\/([^\/]+)\/(\w+)?/)
-				if (regexComponents[2] && !regexComponents[2].includes("g"))
-					regexComponents[2] += "g" // if no global flag, while loop is infinite
-				let re = new RegExp(String.raw`${regexComponents[1]}`, String.raw`${regexComponents[2] ?? "g"}`);
+				if (flags && !flags.includes("g"))
+					flags += "g" // if no global flag, while loop is infinite
+				let re = new RegExp(String.raw`${search}`, String.raw`${flags ?? "g"}`);
 				while ((match = re.exec(text)) !== null) {
 					positions.push({ start: match.index, end: re.lastIndex });
 					if (match.index === re.lastIndex) {
@@ -3289,9 +3289,9 @@
 			elem.setSelectionRange(position.start, position.end);
 		}
 	}
-	function findNextMatch(mode,search,elem) {
+	function findNextMatch(mode,search,flags,elem) {
 		if (positions.length === 0) {
-			findAndStorePositions(mode,search,elem);
+			findAndStorePositions(mode,search,flags,elem);
 		}
 		if (positions.length > 0) {
 			currentIndex = (currentIndex + 1) % positions.length;
@@ -3299,9 +3299,9 @@
 		}
 	}
 
-	function findPrevMatch(mode,search,elem) {
+	function findPrevMatch(mode,search,flags,elem) {
 		if (positions.length === 0) {
-			findAndStorePositions(mode,search,elem);
+			findAndStorePositions(mode,search,flags,elem);
 		}
 		if (positions.length > 0) {
 			currentIndex = (currentIndex - 1 + positions.length) % positions.length;
@@ -3309,14 +3309,14 @@
 		}
 	}
 
-	function findAndStorePositions(mode,search,elem) {
-		positions = findAllMatches(mode, search, elem);
+	function findAndStorePositions(mode,search,flags,elem) {
+		positions = findAllMatches(mode, search, flags, elem);
 		currentIndex = -1; 
 	}
 
 
 
-	function handleSearchAndReplace(mode,search,replace) {
+	function handleSearchAndReplace(mode,search,flags,replace) {
 		// TODO
 		// Add this to undo/redo
 		setSearchAndReplaceError(undefined)
@@ -3327,7 +3327,7 @@
 				plaintextReplace(search,replace,inputElement)
 				break;
 			case 1:
-				regexReplace(search,replace,inputElement)
+				regexReplace(search,flags,replace,inputElement)
 				break;
 			case 2:
 				templateReplace(search,replace,inputElement)
@@ -3341,10 +3341,9 @@
 		const event = new Event('input', { bubbles: true });
 		elem.dispatchEvent(event);
 	}
-	function regexReplace(search,replace,elem) {
-		let regexComponents = search.match(/\/([^\/]+)\/(\w+)?/)
+	function regexReplace(search,flags,replace,elem) {
 		try {
-			let re = new RegExp(String.raw`${regexComponents[1]}`, String.raw`${regexComponents[2] ?? ""}`);
+			let re = new RegExp(String.raw`${search}`, String.raw`${flags ?? ""}`);
 			elem.value = elem.value.replace(re,replace)
 			const event = new Event('input', { bubbles: true });
 			elem.dispatchEvent(event);
@@ -3371,7 +3370,7 @@
 						onValueChange=${setSearchAndReplaceMode}
 						options=${[
 							{ name: 'Plaintext', value: 0 },
-							{ name: 'Regex', value: 1 },
+							{ name: 'RegEx', value: 1 },
 							// { name: 'Template', value: 2 },
 						]}/>
 					${searchAndReplaceMode == 0 && html`
@@ -3383,9 +3382,14 @@
 							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
 					`}
 					${searchAndReplaceMode == 1 && html`
-						<${InputBox} label="Search This" type="text"
-							placeholder="/(\\w+) Miku/gi"
+						<${InputBox} label="Search This RegEx" type="text"
+							placeholder="(\\w+) Miku"
 							readOnly=${!!cancel} value=${searchTerm} onValueChange=${setSearchTerm}/>
+						<div style=${{ 'flex':'0 1 min-content' }}>
+							<${InputBox} label="Flags" type="text"
+								placeholder="gi"
+								readOnly=${!!cancel} value=${searchFlags} onValueChange=${setSearchFlags}/>
+						</div>
 						<${InputBox} label="Replace With" type="text"
 							placeholder="$1 Kurisu"
 							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
@@ -3397,21 +3401,21 @@
 						class="findButton"
 						title="Find Previous Match"
 						disabled=${!!cancel}
-						onClick=${() => handleFindPrev(searchAndReplaceMode,searchTerm)}>
+						onClick=${() => handleFindPrev(searchAndReplaceMode,searchTerm,searchFlags)}>
 						<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 2 1" xmlns="http://www.w3.org/2000/svg"><path d="M 0 1 L 1 0 L 2 1 Z"></path></svg>
 					</button>
 					<button
 						class="findButton findButtonText"
 						title="Find Next Match"
 						disabled=${!!cancel}
-						onClick=${() => handleFindNext(searchAndReplaceMode,searchTerm)}>
+						onClick=${() => handleFindNext(searchAndReplaceMode,searchTerm,searchFlags)}>
 							<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 2 1" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 1 1 L 2 0 Z"></path></svg>
 							Find Next
 					</button>
 					<button
 						title="Replace All Matches"
 						disabled=${!!cancel}
-						onClick=${() => handleSearchAndReplace(searchAndReplaceMode,searchTerm,replaceTerm)}>
+						onClick=${() => handleSearchAndReplace(searchAndReplaceMode,searchTerm,searchFlags,replaceTerm)}>
 							Replace All
 					</button>
 				</div>

From d3067ff03ea3ca3925ca1fea52d430d02755471a Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sat, 8 Jun 2024 12:43:23 +0200
Subject: [PATCH 18/25] fixed issue with empty flag field

---
 mikupad.html | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index c6d554d..a15fb9a 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -3263,6 +3263,8 @@
 			try {
 				if (flags && !flags.includes("g"))
 					flags += "g" // if no global flag, while loop is infinite
+				else if (flags == "")
+					flags = "g"
 				let re = new RegExp(String.raw`${search}`, String.raw`${flags ?? "g"}`);
 				while ((match = re.exec(text)) !== null) {
 					positions.push({ start: match.index, end: re.lastIndex });
@@ -3274,10 +3276,7 @@
 			catch (e) {
 				reportError(e);
 				const errStr = e.toString()
-				if (errStr == "TypeError: regexComponents is null")
-					setSearchAndReplaceError("Error: Regex not wrapped in '/'")
-				else
-					setSearchAndReplaceError(errStr)
+				setSearchAndReplaceError(errStr)
 			}
 		}
 		return positions;
@@ -3351,10 +3350,7 @@
 		catch (e) {
 			reportError(e);
 			const errStr = e.toString()
-			if (errStr == "TypeError: regexComponents is null")
-				setSearchAndReplaceError("Error: Regex not wrapped in '/'")
-			else
-				setSearchAndReplaceError(errStr)
+			setSearchAndReplaceError(errStr)
 		}
 	}
 

From 9232a789e0cf60a431505efaad9efc16ecf55943 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sat, 8 Jun 2024 17:57:55 +0200
Subject: [PATCH 19/25] box-shadow for widgets

---
 mikupad.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/mikupad.html b/mikupad.html
index a15fb9a..406949e 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -354,7 +354,8 @@
 
 .widget-body {
 	z-index: 10;
-	color: var(--color-light)
+	color: var(--color-light);
+	box-shadow: #0004 2px 2px 6px 2px;
 }
 html.nockoffAI #searchAndReplace {
 	background: var(--color-sidebar);

From b51a490bb2910a21a1e7536377b4d665fde4cac9 Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sat, 8 Jun 2024 23:06:08 +0200
Subject: [PATCH 20/25] show warning when no matches found

---
 mikupad.html | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/mikupad.html b/mikupad.html
index 406949e..267f718 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -3278,6 +3278,7 @@
 				reportError(e);
 				const errStr = e.toString()
 				setSearchAndReplaceError(errStr)
+				return false
 			}
 		}
 		return positions;
@@ -3312,6 +3313,8 @@
 	function findAndStorePositions(mode,search,flags,elem) {
 		positions = findAllMatches(mode, search, flags, elem);
 		currentIndex = -1; 
+		if (positions.length === 0)
+			setSearchAndReplaceError(`Warning: No matches found for ${ (mode==0?"Plaintext":mode==1?"RegEx":"Template") } \'${search}\'`)
 	}
 
 
@@ -3322,6 +3325,13 @@
 		setSearchAndReplaceError(undefined)
 		if (!search)
 			return
+		positions = findAllMatches(mode, search, flags, inputElement);
+		console.log(positions)
+		if (positions.length === 0) {
+			setSearchAndReplaceError(`Warning: No matches found for ${ (mode==0?"Plaintext":mode==1?"RegEx":"Template") } \'${search}\'`)
+			return
+		}
+
 		switch(mode) {
 			case 0:
 				plaintextReplace(search,replace,inputElement)

From 67a086891860a39d469cc7fb39359b3d32a83e8c Mon Sep 17 00:00:00 2001
From: neCo <50079394+neCo2@users.noreply.github.com>
Date: Sun, 9 Jun 2024 12:07:51 +0200
Subject: [PATCH 21/25] added count button

---
 mikupad.html | 33 ++++++++++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 267f718..0e1aac5 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -443,6 +443,9 @@
 #searchAndReplace .findButton svg {
 	width: .75em;
 }
+.number-matches {
+	align-content: center;
+}
 
 
 .modal-overlay {
@@ -3201,6 +3204,7 @@
 	const [searchTerm, setSearchTerm] = usePersistentState('searchTerm','');
 	const [searchFlags, setSearchFlags] = usePersistentState('searchFlags','gi');
 	const [replaceTerm, setReplaceTerm] = usePersistentState('replaceTerm','');
+	const [numMatches, setNumMatches] = useState(0);
 	const [inputElement, setInputElement] = useState(null);
 
 	useEffect(() => {
@@ -3242,7 +3246,6 @@
 		}
 	}
 
-	// Plaintext Find
 	let positions = [];
 	let currentIndex = -1;
 
@@ -3278,7 +3281,7 @@
 				reportError(e);
 				const errStr = e.toString()
 				setSearchAndReplaceError(errStr)
-				return false
+				return null
 			}
 		}
 		return positions;
@@ -3317,8 +3320,6 @@
 			setSearchAndReplaceError(`Warning: No matches found for ${ (mode==0?"Plaintext":mode==1?"RegEx":"Template") } \'${search}\'`)
 	}
 
-
-
 	function handleSearchAndReplace(mode,search,flags,replace) {
 		// TODO
 		// Add this to undo/redo
@@ -3326,7 +3327,6 @@
 		if (!search)
 			return
 		positions = findAllMatches(mode, search, flags, inputElement);
-		console.log(positions)
 		if (positions.length === 0) {
 			setSearchAndReplaceError(`Warning: No matches found for ${ (mode==0?"Plaintext":mode==1?"RegEx":"Template") } \'${search}\'`)
 			return
@@ -3365,6 +3365,20 @@
 		}
 	}
 
+	function countMatches(mode, search, flags) {
+		setSearchAndReplaceError(undefined)
+		if (!searchTerm)
+			return
+		positions = findAllMatches(mode, search, flags, inputElement);
+		setNumMatches(positions.length ?? 0)
+		if (positions.length === 0)
+			setSearchAndReplaceError(`Warning: No matches found for ${ (mode==0?"Plaintext":mode==1?"RegEx":"Template") } \'${search}\'`)
+	}
+
+	useEffect(() => {
+		setNumMatches(0)
+	}, [searchTerm,searchFlags]);
+
 	return html`
 		<${Widget} isOpen=${isOpen} onClose=${closeWidget}
 			title="Search and Replace"
@@ -3404,6 +3418,15 @@
 				</div>
 				<div class="searchAndReplace-buttons">
 					<div class="flexfiller"/>
+					<div class="number-matches">
+						${numMatches == 0 ? "" : numMatches + " Matches"}
+					</div>
+					<button
+						title="Count Matches"
+						disabled=${!!cancel}
+						onClick=${() => countMatches(searchAndReplaceMode,searchTerm,searchFlags)}>
+							Count
+					</button>
 					<button
 						class="findButton"
 						title="Find Previous Match"

From c0b01b76b709280169e9a5d21335d42d580cb8e0 Mon Sep 17 00:00:00 2001
From: neCo2 <50079394+neCo2@users.noreply.github.com>
Date: Thu, 13 Jun 2024 21:31:08 +0200
Subject: [PATCH 22/25] all svgs to components

---
 mikupad.html | 35 +++++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index b2705ae..80da0c7 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -2267,6 +2267,26 @@
 		...${props}
 		style=${{ 'transform':'scaleX(-1)' }}/>
 `};
+const SVG_SearchAndReplace = ({...props}) => {
+	return html`
+	<${SVG}
+		...${props}
+		viewBox="0 0 29.4 35.4"
+		stroke-linecap="round"
+		stroke-width="5">
+		<path fill="none" stroke-linejoin="round" d="M5 9.1a10.6 10.6 0 0 1 9.7-6.6 10.6 10.6 0 0 1 9.8 6.6m0 7.9a10.6 10.6 0 0 1-9.8 6.7A10.6 10.6 0 0 1 5 17"/>
+		<path fill="none" d="m20.4 24.5 3.6 7.1"/>
+		<path stroke="none" d="M3.6 13.2 0 23.2l13.6-6.4-10-3.6m22.2-.2 3.6-10L16 9.3l10 3.6"/>
+	</${SVG}>
+`};
+const SVG_Moveable = ({...props}) => {
+	return html`
+	<${SVG}
+		...${props}
+		viewBox="0 0 11 11">
+		<path d="M 5.5 11 L 7 9 L 6 9 L 6 6 L 9 6 L 9 7 L 11 5.5 L 9 4 L 9 5 L 6 5 L 6 2 L 7 2 L 5.5 0 L 4 2 L 5 2 L 5 5 L 2 5 L 2 4 L 0 5.5 L 2 7 L 2 6 L 5 6 L 5 9 L 4 9 Z"/>
+	</${SVG}>
+`};
 
 function Modal({ isOpen, onClose, title, description, children, ...props }) {
 	if (!isOpen) {
@@ -3356,13 +3376,13 @@
 						onMouseMove=${() => {}}
 						onMouseUp=${() => {}}
 						onMouseLeave=${() => {}}>
-						<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><path d="M 5.5 11 L 7 9 L 6 9 L 6 6 L 9 6 L 9 7 L 11 5.5 L 9 4 L 9 5 L 6 5 L 6 2 L 7 2 L 5.5 0 L 4 2 L 5 2 L 5 5 L 2 5 L 2 4 L 0 5.5 L 2 7 L 2 6 L 5 6 L 5 9 L 4 9 Z"></path></svg>
+						<${SVG_Moveable}/>
 						${title}
 					</div>
 					<button
 						class="button-widget-top"
 						onClick=${onClose}>
-						<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="-1 -1 10 10" xmlns="http://www.w3.org/2000/svg"><path d="M 0 1 L 3 4 L 0 7 L 1 8 L 4 5 L 7 8 L 8 7 L 5 4 L 8 1 L 7 0 L 4 3 L 1 0 L 1 0 Z"></path></svg>
+						<${SVG_Close}/>
 					</button>
 				</div>
 				<div className="widget-content">
@@ -3605,14 +3625,14 @@
 						title="Find Previous Match"
 						disabled=${!!cancel}
 						onClick=${() => handleFindPrev(searchAndReplaceMode,searchTerm,searchFlags)}>
-						<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 2 1" xmlns="http://www.w3.org/2000/svg"><path d="M 0 1 L 1 0 L 2 1 Z"></path></svg>
+						<${SVG_ArrowUp}/>
 					</button>
 					<button
 						class="findButton findButtonText"
 						title="Find Next Match"
 						disabled=${!!cancel}
 						onClick=${() => handleFindNext(searchAndReplaceMode,searchTerm,searchFlags)}>
-							<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 2 1" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 1 1 L 2 0 Z"></path></svg>
+							<${SVG_ArrowDown}/>
 							Find Next
 					</button>
 					<button
@@ -5579,6 +5599,13 @@
 				onClick=${() => toggleModal("prompt")}>
 				<${SVG_Settings}/>
 			</button>
+			<button
+				title="Search & Replace"
+				style=${{"margin-top":"1.5em"}}
+				className="textAreaSettings"
+				onClick=${() => toggleModal("searchAndReplace")}>
+				<${SVG_SearchAndReplace} style=${{"height":"1.3em"}} />
+			</button>
 			<textarea
 				ref=${promptArea}
 				readOnly=${!!cancel}

From 2db850f27ff255e84095cd159370f4070782ccd3 Mon Sep 17 00:00:00 2001
From: neCo2 <50079394+neCo2@users.noreply.github.com>
Date: Mon, 17 Jun 2024 23:04:50 +0200
Subject: [PATCH 23/25] made countmatches auto-update, removed count button,
 removed 'find next' text, adjusted widget width

---
 mikupad.html | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 80da0c7..19312c5 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -400,8 +400,8 @@
 
 #searchAndReplace {
 	position: absolute;
-  width: 70%;
-  background: var(--color-base-50);
+	width: 40vw;
+	background: var(--color-base-50);
 	top:.75em;
 	left:.75em;
 	border-radius:3px;
@@ -3399,6 +3399,7 @@
 	const [replaceTerm, setReplaceTerm] = usePersistentState('replaceTerm','');
 	const [numMatches, setNumMatches] = useState(0);
 	const [inputElement, setInputElement] = useState(null);
+	const [replacedTrigger, setReplacedTrigger] = useState(false);
 
 	useEffect(() => {
 		if (promptArea.current) {
@@ -3443,6 +3444,8 @@
 	let currentIndex = -1;
 
 	function findAllMatches(mode, search, flags, elem) {
+		if (!inputElement)
+			return 0
 		setSearchAndReplaceError(undefined)
 		let startIndex = 0;
 		let index;
@@ -3524,6 +3527,7 @@
 			setSearchAndReplaceError(`Warning: No matches found for ${ (mode==0?"Plaintext":mode==1?"RegEx":"Template") } \'${search}\'`)
 			return
 		}
+		setReplacedTrigger((prev) => !prev)
 
 		switch(mode) {
 			case 0:
@@ -3560,17 +3564,22 @@
 
 	function countMatches(mode, search, flags) {
 		setSearchAndReplaceError(undefined)
-		if (!searchTerm)
+		if (!searchTerm) {
+			setNumMatches(0)
 			return
+		}
 		positions = findAllMatches(mode, search, flags, inputElement);
-		setNumMatches(positions.length ?? 0)
-		if (positions.length === 0)
-			setSearchAndReplaceError(`Warning: No matches found for ${ (mode==0?"Plaintext":mode==1?"RegEx":"Template") } \'${search}\'`)
+		try {
+			setNumMatches(positions.length ?? 0)
+		}
+		catch {
+			setNumMatches(0)
+		}
 	}
 
 	useEffect(() => {
-		setNumMatches(0)
-	}, [searchTerm,searchFlags]);
+		countMatches(searchAndReplaceMode,searchTerm,searchFlags)
+	}, [searchAndReplaceMode,searchTerm,searchFlags,isOpen,replacedTrigger]);
 
 	return html`
 		<${Widget} isOpen=${isOpen} onClose=${closeWidget}
@@ -3612,14 +3621,8 @@
 				<div class="searchAndReplace-buttons">
 					<div class="flexfiller"/>
 					<div class="number-matches">
-						${numMatches == 0 ? "" : numMatches + " Matches"}
+						${ searchTerm != "" ? numMatches + (numMatches == 1 ? " Match" : " Matches") : ""}
 					</div>
-					<button
-						title="Count Matches"
-						disabled=${!!cancel}
-						onClick=${() => countMatches(searchAndReplaceMode,searchTerm,searchFlags)}>
-							Count
-					</button>
 					<button
 						class="findButton"
 						title="Find Previous Match"
@@ -3633,7 +3636,6 @@
 						disabled=${!!cancel}
 						onClick=${() => handleFindNext(searchAndReplaceMode,searchTerm,searchFlags)}>
 							<${SVG_ArrowDown}/>
-							Find Next
 					</button>
 					<button
 						title="Replace All Matches"

From 3943ba244f1a62da82654832e746ee361d423f5a Mon Sep 17 00:00:00 2001
From: neCo2 <50079394+neCo2@users.noreply.github.com>
Date: Mon, 17 Jun 2024 23:18:23 +0200
Subject: [PATCH 24/25] omg it gumi

---
 mikupad.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/mikupad.html b/mikupad.html
index 19312c5..e291d3e 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -3601,7 +3601,7 @@
 							placeholder="Hatsune Miku"
 							readOnly=${!!cancel} value=${searchTerm} onValueChange=${setSearchTerm}/>
 						<${InputBox} label="Replace With" type="text"
-							placeholder="Makise Kurisu"
+							placeholder="GUMI"
 							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
 					`}
 					${searchAndReplaceMode == 1 && html`
@@ -3614,7 +3614,7 @@
 								readOnly=${!!cancel} value=${searchFlags} onValueChange=${setSearchFlags}/>
 						</div>
 						<${InputBox} label="Replace With" type="text"
-							placeholder="$1 Kurisu"
+							placeholder="$1 GUMI"
 							readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
 					`}
 				</div>

From 9daff6ab2254f2e7c93e0fc2918019e58574f3f2 Mon Sep 17 00:00:00 2001
From: neCo2 <50079394+neCo2@users.noreply.github.com>
Date: Mon, 17 Jun 2024 23:28:15 +0200
Subject: [PATCH 25/25] fix findnext button layout

---
 mikupad.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mikupad.html b/mikupad.html
index e291d3e..f56eda0 100644
--- a/mikupad.html
+++ b/mikupad.html
@@ -3631,7 +3631,7 @@
 						<${SVG_ArrowUp}/>
 					</button>
 					<button
-						class="findButton findButtonText"
+						class="findButton"
 						title="Find Next Match"
 						disabled=${!!cancel}
 						onClick=${() => handleFindNext(searchAndReplaceMode,searchTerm,searchFlags)}>