add minimum requirement of 2 [A-za-z] for slashcommand autocomplete to show up (#4080) * add minimum requirement of 2 [A-za-z] for slashcommand autocomplete to show up * Migrate to dedicated AC toggle * Replace state checkbox with select --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

fa10833e520b2e39c6597308126a0d0276ca904d

RossAscends <124905043+RossAscends@users.noreply.github.com>

Signed

Parents: 4c3bb1aede8b3aaae497607242bf04284d647330

public/index.html+8 -0 Viewed

                                     <div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
                                 </div>
                                 <div class="inline-drawer-content">
+                                    <label for="stscript_autocomplete_state">
+                                        <small data-i18n="Visibility">Visibility</small>
+                                    </label>
+                                    <select id="stscript_autocomplete_state">
+                                        <option value="0" data-i18n="Don't show">Don't show</option>
+                                        <option value="1" data-i18n="Input length > 1">Input length > 1</option>
+                                        <option value="2" data-i18n="Always show">Always show</option>
+                                    </select>
                                     <label class="checkbox_label" for="stscript_autocomplete_autoHide">
                                         <input id="stscript_autocomplete_autoHide" type="checkbox" />
                                         <small data-i18n="Automatically hide details">

public/scripts/autocomplete/AutoComplete.js+36 -30 Viewed

     'ENTER': 2, // 2^1
 };
+/** @readonly */
+/** @enum {Number} */
+export const AUTOCOMPLETE_STATE = {
+    DISABLED: 0,
+    MIN_LENGTH: 1,
+    ALWAYS: 2,
+};
 export class AutoComplete {
     /**@type {HTMLTextAreaElement|HTMLInputElement}*/ textarea;
     /**@type {boolean}*/ isFloating = false;

         this.updateDetailsPositionDebounced = debounce(this.updateDetailsPosition.bind(this), 10);
         this.updateFloatingPositionDebounced = debounce(this.updateFloatingPosition.bind(this), 10);
-        textarea.addEventListener('input', ()=>{
+        textarea.addEventListener('input', () => {
             this.selectionStart = this.textarea.selectionStart;
             if (this.text != this.textarea.value) this.show(true, this.wasForced);
         });
-        textarea.addEventListener('keydown', (evt)=>this.handleKeyDown(evt));
+        textarea.addEventListener('keydown', (evt) => this.handleKeyDown(evt));
-        textarea.addEventListener('click', ()=>{
+        textarea.addEventListener('click', () => {
             this.selectionStart = this.textarea.selectionStart;
             if (this.isActive) this.show();
         });
-        textarea.addEventListener('blur', ()=>this.hide());
+        textarea.addEventListener('blur', () => this.hide());
         if (isFloating) {
-            textarea.addEventListener('scroll', ()=>this.updateFloatingPositionDebounced());
+            textarea.addEventListener('scroll', () => this.updateFloatingPositionDebounced());
+        }
-        window.addEventListener('resize', ()=>this.updatePositionDebounced());
+        window.addEventListener('resize', () => this.updatePositionDebounced());
+    }
     /**

     makeItem(option) {
         const li = option.renderItem();
         // gotta listen to pointerdown (happens before textarea-blur)
-        li.addEventListener('pointerdown', (evt)=>{
+        li.addEventListener('pointerdown', (evt) => {
             evt.preventDefault();
-            this.selectedItem = this.result.find(it=>it.name == li.getAttribute('data-name'));
+            this.selectedItem = this.result.find(it => it.name == li.getAttribute('data-name'));
             this.select();
         });
         return li;

         const chars = Array.from(item.dom.querySelector('.name').children);
         switch (this.matchType) {
             case 'strict': {
-                chars.forEach((it, idx)=>{
+                chars.forEach((it, idx) => {
                     if (idx + item.nameOffset < item.name.length) {
                         it.classList.add('matched');
                     } else {

+            }
             case 'includes': {
                 const start = item.name.toLowerCase().search(this.name);
-                chars.forEach((it, idx)=>{
+                chars.forEach((it, idx) => {
                     if (idx + item.nameOffset < start) {
                         it.classList.remove('matched');
                     } else if (idx + item.nameOffset < start + item.name.length) {

                 break;
+            }
             case 'fuzzy': {
-                item.name.replace(this.fuzzyRegex, (_, ...parts)=>{
+                item.name.replace(this.fuzzyRegex, (_, ...parts) => {
                     parts.splice(-2, 2);
                     if (parts.length == 2) {
-                        chars.forEach(c=>c.classList.remove('matched'));
+                        chars.forEach(c => c.classList.remove('matched'));
                     } else {
                         let cIdx = item.nameOffset;
-                        parts.forEach((it, idx)=>{
+                        parts.forEach((it, idx) => {
                             if (it === null || it.length == 0) return '';
                             if (idx % 2 == 1) {
-                                chars.slice(cIdx, cIdx + it.length).forEach(c=>c.classList.add('matched'));
+                                chars.slice(cIdx, cIdx + it.length).forEach(c => c.classList.add('matched'));
                             } else {
-                                chars.slice(cIdx, cIdx + it.length).forEach(c=>c.classList.remove('matched'));
+                                chars.slice(cIdx, cIdx + it.length).forEach(c => c.classList.remove('matched'));
+                            }
                             cIdx += it.length;
                         });

@@ -230,7 +238,7 @@ export class AutoComplete {
230	if (current.length > 0) {	238	if (current.length > 0) {
231	consecutive.push(current);	239	consecutive.push(current);
232	}	240	}
233	consecutive.sort((a,b)=>b.length - a.length);	241	consecutive.sort((a, b) => b.length - a.length);
234	option.score = new AutoCompleteFuzzyScore(start, consecutive[0]?.length ?? 0);	242	option.score = new AutoCompleteFuzzyScore(start, consecutive[0]?.length ?? 0);
235	return option;	243	return option;
236	}	244	}

             + this.parserResult.name.length
             + (this.startQuote ? 1 : 0)
             + (this.endQuote ? 1 : 0)
-            + 1
+            + 1;
-        ;
+    }
     /**

         if (this.matchType == 'fuzzy') {
             // only build the fuzzy regex if match type is set to fuzzy
-            this.fuzzyRegex = new RegExp(`^(.*?)${this.name.split('').map(char=>`(${escapeRegex(char)})`).join('(.*?)')}(.*?)$`, 'i');
+            this.fuzzyRegex = new RegExp(`^(.*?)${this.name.split('').map(char => `(${escapeRegex(char)})`).join('(.*?)')}(.*?)$`, 'i');
+        }
         //TODO maybe move the matchers somewhere else; a single match function? matchType is available as property

             // filter the list of options by the partial name according to the matching type
             .filter(it => this.isReplaceable || it.name == '' ? (it.matchProvider ? it.matchProvider(this.name) : matchers[this.matchType](it.name)) : it.name.toLowerCase() == this.name)
             // remove aliases
-            .filter((it,idx,list) => list.findIndex(opt=>opt.value == it.value) == idx);
+            .filter((it, idx, list) => list.findIndex(opt => opt.value == it.value) == idx);
         if (this.result.length == 0 && this.effectiveParserResult != this.parserResult && isForced) {
             // no matching secondary results and forced trigger -> show current command details
             this.secondaryParserResult = null;
-            this.result = [this.effectiveParserResult.optionList.find(it=>it.name == this.effectiveParserResult.name)];
+            this.result = [this.effectiveParserResult.optionList.find(it => it.name == this.effectiveParserResult.name)];
             this.name = this.effectiveParserResult.name;
             this.fuzzyRegex = /(.*)(.*)(.*)/;
+        }

                 return option;
             })
             // sort by fuzzy score or alphabetical
-            .toSorted(this.matchType == 'fuzzy' ? this.fuzzyScoreCompare : (a, b) => a.name.localeCompare(b.name))
+            .toSorted(this.matchType == 'fuzzy' ? this.fuzzyScoreCompare : (a, b) => a.name.localeCompare(b.name));
-        ;

             this.clone.style.position = 'fixed';
             this.clone.style.visibility = 'hidden';
             document.body.append(this.clone);
-            const mo = new MutationObserver(muts=>{
+            const mo = new MutationObserver(muts => {
-                if (muts.find(it=>Array.from(it.removedNodes).includes(this.textarea))) {
+                if (muts.find(it => Array.from(it.removedNodes).includes(this.textarea))) {
                     this.clone.remove();
+                }
             });
-            mo.observe(this.textarea.parentElement, { childList:true });
+            mo.observe(this.textarea.parentElement, { childList: true });
+        }
         this.clone.style.height = `${inputRect.height}px`;
         this.clone.style.left = `${inputRect.left}px`;

@@ -685,7 +691,7 @@ export class AutoComplete {
685	this.textarea.selectionDirection = selectionEnd;	691	this.textarea.selectionDirection = selectionEnd;
686	}	692	}
687	this.wasForced = false;	693	this.wasForced = false;
688	this.textarea.dispatchEvent(new Event('input', { bubbles:true }));	694	this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
689	this.onSelect?.(this.selectedItem);	695	this.onSelect?.(this.selectedItem);
690	}	696	}
691		697

         this.selectedItem.dom.classList.add('selected');
         const rect = this.selectedItem.dom.children[0].getBoundingClientRect();
         const rectParent = this.dom.getBoundingClientRect();
-        if (rect.top < rectParent.top || rect.bottom > rectParent.bottom ) {
+        if (rect.top < rectParent.top || rect.bottom > rectParent.bottom) {
             this.dom.scrollTop += rect.top < rectParent.top ? rect.top - rectParent.top : rect.bottom - rectParent.bottom;
+        }
         this.renderDetailsDebounced();

+        }
         // await keyup to see if cursor position or text has changed
         const oldText = this.textarea.value;
-        await new Promise(resolve=>{
+        await new Promise(resolve => {
-            window.addEventListener('keyup', resolve, { once:true });
+            window.addEventListener('keyup', resolve, { once: true });
         });
         if (this.selectionStart != this.textarea.selectionStart) {
             this.selectionStart = this.textarea.selectionStart;

public/scripts/power-user.js+11 -1 Viewed

 import { PARSER_FLAG, SlashCommandParser } from './slash-commands/SlashCommandParser.js';
 import { SlashCommand } from './slash-commands/SlashCommand.js';
 import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from './slash-commands/SlashCommandArgument.js';
-import { AUTOCOMPLETE_SELECT_KEY, AUTOCOMPLETE_WIDTH } from './autocomplete/AutoComplete.js';
+import { AUTOCOMPLETE_SELECT_KEY, AUTOCOMPLETE_STATE, AUTOCOMPLETE_WIDTH } from './autocomplete/AutoComplete.js';
 import { SlashCommandEnumValue, enumTypes } from './slash-commands/SlashCommandEnumValue.js';
 import { commonEnumProviders, enumIcons } from './slash-commands/SlashCommandCommonEnumsProvider.js';
 import { POPUP_TYPE, callGenericPopup, fixToastrForDialogs } from './popup.js';

     stscript: {
         matching: 'fuzzy',
         autocomplete: {
+            state: AUTOCOMPLETE_STATE.ALWAYS,
             autoHide: false,
             style: 'theme',
             font: {

         if (power_user.stscript.autocomplete === undefined) {
             power_user.stscript.autocomplete = defaultStscript.autocomplete;
         } else {
+            if (power_user.stscript.autocomplete.state === undefined) {
+                power_user.stscript.autocomplete.state = defaultStscript.autocomplete.state;
+            }
             if (power_user.stscript.autocomplete.width === undefined) {
                 power_user.stscript.autocomplete.width = defaultStscript.autocomplete.width;
+            }

     $('#aux_field').val(power_user.aux_field);
     $('#tag_import_setting').val(power_user.tag_import_setting);
+    $('#stscript_autocomplete_state').val(power_user.stscript.autocomplete.state).trigger('input');
     $('#stscript_autocomplete_autoHide').prop('checked', power_user.stscript.autocomplete.autoHide ?? false).trigger('input');
     $('#stscript_matching').val(power_user.stscript.matching ?? 'fuzzy');
     $('#stscript_autocomplete_style').val(power_user.stscript.autocomplete.style ?? 'theme');

         saveSettingsDebounced();
     });
+    $('#stscript_autocomplete_state').on('input', function () {
+        power_user.stscript.autocomplete.state = Number($(this).val());
+        saveSettingsDebounced();
+    });
     $('#stscript_autocomplete_autoHide').on('input', function () {
         power_user.stscript.autocomplete.autoHide = !!$(this).prop('checked');
         saveSettingsDebounced();

public/scripts/slash-commands.js+2 -2 Viewed

 import { SlashCommandClosure } from './slash-commands/SlashCommandClosure.js';
 import { SlashCommandClosureResult } from './slash-commands/SlashCommandClosureResult.js';
 import { ARGUMENT_TYPE, SlashCommandArgument, SlashCommandNamedArgument } from './slash-commands/SlashCommandArgument.js';
-import { AutoComplete } from './autocomplete/AutoComplete.js';
+import { AutoComplete, AUTOCOMPLETE_STATE } from './autocomplete/AutoComplete.js';
 import { SlashCommand } from './slash-commands/SlashCommand.js';
 import { SlashCommandAbortController } from './slash-commands/SlashCommandAbortController.js';
 import { SlashCommandNamedArgumentAssignment } from './slash-commands/SlashCommandNamedArgumentAssignment.js';

     const parser = new SlashCommandParser();
     const ac = new AutoComplete(
         textarea,
-        () => ac.text[0] == '/',
+        () => ac.text[0] == '/' && (power_user.stscript.autocomplete.state === AUTOCOMPLETE_STATE.ALWAYS || power_user.stscript.autocomplete.state === AUTOCOMPLETE_STATE.MIN_LENGTH && ac.text.length > 2),
         async (text, index) => await parser.getNameAt(text, index),
         isFloating,
     );