Add info block for find regex flags #3647

eef9c3ef62255882c840765b801e45f97d5b263e

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 6f0f32d83d828b2d2bcd95d940ff4033d5b6bd1b

public/scripts/extensions/regex/editor.html+7 -0 Viewed

         </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">

public/scripts/extensions/regex/index.js+46 -1 Viewed

 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 { regex_placement, runRegexScript, substitute_find_regex } from './engine.js';
 import { t } from '../../i18n.js';
 import { accountStorage } from '../../util/AccountStorage.js';

     });
     function updateTestResult() {
 +        updateInfoBlock(editorHtml);
++
         if (!editorHtml.find('#regex_test_mode').is(':visible')) {
             return;
+        }

+    }
     editorHtml.find('input, textarea, select').on('input', updateTestResult);
 +    updateInfoBlock(editorHtml);
     const popupResult = await callPopup(editorHtml, 'confirm', undefined, { okButton: t`Save` });
     if (popupResult) {

+    }
+}
 +/**
 + * 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() {

public/scripts/extensions/regex/style.css+18 -0 Viewed

 .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%);
 +}