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 @@
-
- - +
+
+
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} 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;