소스 검색

fix: editor text field autocomplete (#1383)

Ahmad Kholid 1 년 전
부모
커밋
82c0af00d4
2개의 변경된 파일18개의 추가작업 그리고 25개의 파일을 삭제
  1. 6 23
      src/components/newtab/workflow/edit/EditAutocomplete.vue
  2. 12 2
      src/components/ui/UiAutocomplete.vue

+ 6 - 23
src/components/newtab/workflow/edit/EditAutocomplete.vue

@@ -24,44 +24,27 @@ const state = shallowReactive({
   pathLen: -1,
 });
 
-const cache = new Map();
-
 function autocompleteFilter({ text, item }) {
-  const query = text.replace('@', '.').split('.').pop();
+  if (!text) return true;
 
+  const query = text.replace('@', '.').split('.').pop();
   return item.toLocaleLowerCase().includes(query);
 }
 function onSearch(value) {
-  const path = (value ?? '').replace('@', '.');
-  const pathArr = path.split('.');
-
-  if (pathArr.length <= 1) {
-    state.path = '';
-    state.pathLen = 0;
+  const pathArr = (value ?? '').replace('@', '.').split('.');
 
-    return;
-  }
-
-  if (pathArr.length !== state.pathLen) {
-    state.path = path.endsWith('.') ? path.slice(0, -1) : path;
-    state.pathLen = pathArr.length;
-  }
+  state.path = (pathArr.length > 1 ? pathArr.slice(0, -1) : pathArr).join('.');
+  state.pathLen = pathArr.length;
 }
 
 const autocompleteList = computed(() => {
-  if (cache.has(state.path)) {
-    return cache.get(state.path);
-  }
-
   const data =
-    !state.path || state.pathLen < 1
+    !state.path || state.pathLen <= 1
       ? autocompleteData.value
       : objectPath.get(autocompleteData.value, state.path);
 
   const list = typeof data === 'string' ? [] : Object.keys(data || {});
 
-  cache.set(state.path, list);
-
   return list;
 });
 </script>

+ 12 - 2
src/components/ui/UiAutocomplete.vue

@@ -134,8 +134,19 @@ function getLastKeyBeforeCaret(caretIndex) {
 }
 function getSearchText(caretIndex, charIndex) {
   if (charIndex !== -1) {
+    const closeTrigger = (props.triggerChar ?? [])[1];
+    const searchRgxp = new RegExp(
+      `\\s${closeTrigger ? `|${closeTrigger}` : ''}`
+    );
+
+    const inputValue = input.value;
+    const afterCaretTxt = inputValue.substring(caretIndex);
+    const lastClosingIdx = afterCaretTxt.search(searchRgxp);
+
     const charsLength = props.triggerChar.length;
-    const text = input.value.substring(charIndex + charsLength, caretIndex);
+    const text =
+      input.value.substring(charIndex + charsLength, caretIndex) +
+      afterCaretTxt.substring(0, lastClosingIdx);
 
     if (!/\s/.test(text)) {
       return text;
@@ -199,7 +210,6 @@ function updateValue(value) {
 }
 function selectItem(itemIndex, selected) {
   let selectedItem = filteredItems.value[itemIndex];
-
   if (!selectedItem) return;
 
   selectedItem = getItem(selectedItem);