From eef9c3ef62255882c840765b801e45f97d5b263e Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 9 Mar 2025 17:41:38 +0200
Subject: [PATCH 1/3] Add info block for find regex flags #3647

---
 public/scripts/extensions/regex/editor.html |  7 +++
 public/scripts/extensions/regex/index.js    | 49 ++++++++++++++++++++-
 public/scripts/extensions/regex/style.css   | 18 ++++++++
 3 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/public/scripts/extensions/regex/editor.html b/public/scripts/extensions/regex/editor.html
index 8cfe9e008..cfe0fa566 100644
--- a/public/scripts/extensions/regex/editor.html
+++ b/public/scripts/extensions/regex/editor.html
@@ -16,6 +16,13 @@
         </small>
         <hr />
 
+        <div id="regex_info_block" class="info-block">
+            <span class="info-block-text"></span>
+            <a class="info-block-flags-hint" href="http://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags" target="_blank" rel="noopener noreferrer">
+                <i class="fa-solid fa-circle-info" title="Click here to learn more about regex flags."></i>
+            </a>
+        </div>
+
         <div id="regex_test_mode" class="flex1 flex-container displayNone">
             <div class="flex1">
                 <label class="title_restorable" for="regex_test_input">
diff --git a/public/scripts/extensions/regex/index.js b/public/scripts/extensions/regex/index.js
index 5166befea..e7c7e2505 100644
--- a/public/scripts/extensions/regex/index.js
+++ b/public/scripts/extensions/regex/index.js
@@ -7,7 +7,7 @@ import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '
 import { enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
 import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js';
 import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
-import { download, getFileText, getSortableDelay, uuidv4 } from '../../utils.js';
+import { download, getFileText, getSortableDelay, regexFromString, uuidv4 } from '../../utils.js';
 import { regex_placement, runRegexScript, substitute_find_regex } from './engine.js';
 import { t } from '../../i18n.js';
 import { accountStorage } from '../../util/AccountStorage.js';
@@ -258,6 +258,8 @@ async function onRegexEditorOpenClick(existingId, isScoped) {
     });
 
     function updateTestResult() {
+        updateInfoBlock(editorHtml);
+
         if (!editorHtml.find('#regex_test_mode').is(':visible')) {
             return;
         }
@@ -276,6 +278,7 @@ async function onRegexEditorOpenClick(existingId, isScoped) {
     }
 
     editorHtml.find('input, textarea, select').on('input', updateTestResult);
+    updateInfoBlock(editorHtml);
 
     const popupResult = await callPopup(editorHtml, 'confirm', undefined, { okButton: t`Save` });
     if (popupResult) {
@@ -305,6 +308,48 @@ async function onRegexEditorOpenClick(existingId, isScoped) {
     }
 }
 
+/**
+ * Updates the info block in the regex editor with hints regarding the find regex.
+ * @param {JQuery<HTMLElement>} editorHtml The editor HTML
+ */
+function updateInfoBlock(editorHtml) {
+    const infoBlock = editorHtml.find('.info-block');
+    const infoBlockTextSpan = infoBlock.find('.info-block-text');
+    const infoBlockFlagsHint = infoBlock.find('.info-block-flags-hint');
+    const findRegex = String(editorHtml.find('.find_regex').val());
+
+    infoBlock.removeClass('error hint info warning');
+    infoBlockFlagsHint.hide();
+
+    // Clear the info block if the find regex is empty
+    if (!findRegex) {
+        infoBlock.addClass('info');
+        infoBlockTextSpan.text(t`Find Regex is empty`);
+        return;
+    }
+
+    try {
+        const regex = regexFromString(findRegex);
+        if (!regex) {
+            throw new Error(t`Invalid Find Regex`);
+        }
+
+        const flagInfo = [];
+        // Check flags
+
+        flagInfo.push(regex.flags.includes('g') ? t`Applies to all matches` : t`Applies to the first match`);
+        flagInfo.push(regex.flags.includes('i') ? t`Case insensitive` : t`Case sensitive`);
+
+        infoBlock.addClass('hint');
+        infoBlockTextSpan.text(flagInfo.join('. '));
+        infoBlockFlagsHint.show();
+    } catch (error) {
+        infoBlock.addClass('error');
+        infoBlockTextSpan.text(error.message);
+        return;
+    }
+}
+
 // Common settings migration function. Some parts will eventually be removed
 // TODO: Maybe migrate placement to strings?
 function migrateSettings() {
@@ -418,7 +463,7 @@ async function onRegexImportFileChange(file, isScoped) {
     }
 }
 
-function purgeEmbeddedRegexScripts( { character }){
+function purgeEmbeddedRegexScripts({ character }) {
     const avatar = character?.avatar;
 
     if (avatar && extension_settings.character_allowed_regex?.includes(avatar)) {
diff --git a/public/scripts/extensions/regex/style.css b/public/scripts/extensions/regex/style.css
index 2816d562f..56cd475e4 100644
--- a/public/scripts/extensions/regex/style.css
+++ b/public/scripts/extensions/regex/style.css
@@ -105,3 +105,21 @@ input.enable_scoped {
 .disable_regex:not(:checked) ~ .regex-toggle-on {
     display: block;
 }
+
+#regex_info_block {
+    position: relative;
+    margin: 10px 0;
+    padding: 5px 20px;
+    font-size: 0.9em;
+}
+
+#regex_info_block:empty {
+    display: none;
+}
+
+#regex_info_block .info-block-flags-hint {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+}

From 34b2ef0fd7e582e2dccae04e9ee1c9d7ef0aaed1 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 9 Mar 2025 17:47:23 +0200
Subject: [PATCH 2/3] Clean-up code

---
 public/scripts/extensions/regex/index.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/public/scripts/extensions/regex/index.js b/public/scripts/extensions/regex/index.js
index e7c7e2505..78db4957a 100644
--- a/public/scripts/extensions/regex/index.js
+++ b/public/scripts/extensions/regex/index.js
@@ -335,8 +335,6 @@ function updateInfoBlock(editorHtml) {
         }
 
         const flagInfo = [];
-        // Check flags
-
         flagInfo.push(regex.flags.includes('g') ? t`Applies to all matches` : t`Applies to the first match`);
         flagInfo.push(regex.flags.includes('i') ? t`Case insensitive` : t`Case sensitive`);
 
@@ -346,7 +344,6 @@ function updateInfoBlock(editorHtml) {
     } catch (error) {
         infoBlock.addClass('error');
         infoBlockTextSpan.text(error.message);
-        return;
     }
 }
 

From 0f8a17b65224739a0fc03ecea7336288c7d6c9e5 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Sun, 9 Mar 2025 23:29:00 +0200
Subject: [PATCH 3/3] Refactor regex info block to use a shared function

---
 public/scripts/extensions/regex/editor.html |  6 +++---
 public/scripts/extensions/regex/index.js    | 17 ++++++-----------
 public/scripts/extensions/regex/style.css   |  9 ++++++---
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/public/scripts/extensions/regex/editor.html b/public/scripts/extensions/regex/editor.html
index cfe0fa566..e46ccbaf3 100644
--- a/public/scripts/extensions/regex/editor.html
+++ b/public/scripts/extensions/regex/editor.html
@@ -16,9 +16,9 @@
         </small>
         <hr />
 
-        <div id="regex_info_block" class="info-block">
-            <span class="info-block-text"></span>
-            <a class="info-block-flags-hint" href="http://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags" target="_blank" rel="noopener noreferrer">
+        <div id="regex_info_block_wrapper">
+            <div id="regex_info_block" class="info-block"></div>
+            <a id="regex_info_block_flags_hint" href="http://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#advanced_searching_with_flags" target="_blank" rel="noopener noreferrer">
                 <i class="fa-solid fa-circle-info" title="Click here to learn more about regex flags."></i>
             </a>
         </div>
diff --git a/public/scripts/extensions/regex/index.js b/public/scripts/extensions/regex/index.js
index 78db4957a..8576e9680 100644
--- a/public/scripts/extensions/regex/index.js
+++ b/public/scripts/extensions/regex/index.js
@@ -7,7 +7,7 @@ import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from '
 import { enumIcons } from '../../slash-commands/SlashCommandCommonEnumsProvider.js';
 import { SlashCommandEnumValue, enumTypes } from '../../slash-commands/SlashCommandEnumValue.js';
 import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';
-import { download, getFileText, getSortableDelay, regexFromString, uuidv4 } from '../../utils.js';
+import { download, getFileText, getSortableDelay, regexFromString, setInfoBlock, uuidv4 } from '../../utils.js';
 import { regex_placement, runRegexScript, substitute_find_regex } from './engine.js';
 import { t } from '../../i18n.js';
 import { accountStorage } from '../../util/AccountStorage.js';
@@ -313,18 +313,15 @@ async function onRegexEditorOpenClick(existingId, isScoped) {
  * @param {JQuery<HTMLElement>} editorHtml The editor HTML
  */
 function updateInfoBlock(editorHtml) {
-    const infoBlock = editorHtml.find('.info-block');
-    const infoBlockTextSpan = infoBlock.find('.info-block-text');
-    const infoBlockFlagsHint = infoBlock.find('.info-block-flags-hint');
+    const infoBlock = editorHtml.find('.info-block').get(0);
+    const infoBlockFlagsHint = editorHtml.find('#regex_info_block_flags_hint');
     const findRegex = String(editorHtml.find('.find_regex').val());
 
-    infoBlock.removeClass('error hint info warning');
     infoBlockFlagsHint.hide();
 
     // Clear the info block if the find regex is empty
     if (!findRegex) {
-        infoBlock.addClass('info');
-        infoBlockTextSpan.text(t`Find Regex is empty`);
+        setInfoBlock(infoBlock, t`Find Regex is empty`, 'info');
         return;
     }
 
@@ -338,12 +335,10 @@ function updateInfoBlock(editorHtml) {
         flagInfo.push(regex.flags.includes('g') ? t`Applies to all matches` : t`Applies to the first match`);
         flagInfo.push(regex.flags.includes('i') ? t`Case insensitive` : t`Case sensitive`);
 
-        infoBlock.addClass('hint');
-        infoBlockTextSpan.text(flagInfo.join('. '));
+        setInfoBlock(infoBlock, flagInfo.join('. '), 'hint');
         infoBlockFlagsHint.show();
     } catch (error) {
-        infoBlock.addClass('error');
-        infoBlockTextSpan.text(error.message);
+        setInfoBlock(infoBlock, error.message, 'error');
     }
 }
 
diff --git a/public/scripts/extensions/regex/style.css b/public/scripts/extensions/regex/style.css
index 56cd475e4..2a2da50ed 100644
--- a/public/scripts/extensions/regex/style.css
+++ b/public/scripts/extensions/regex/style.css
@@ -106,18 +106,21 @@ input.enable_scoped {
     display: block;
 }
 
-#regex_info_block {
+#regex_info_block_wrapper {
     position: relative;
+}
+
+#regex_info_block {
     margin: 10px 0;
     padding: 5px 20px;
     font-size: 0.9em;
 }
 
-#regex_info_block:empty {
+#regex_info_block_wrapper:has(#regex_info_block:empty) {
     display: none;
 }
 
-#regex_info_block .info-block-flags-hint {
+#regex_info_block_flags_hint {
     position: absolute;
     top: 50%;
     right: 10px;