@portabletext/plugin-typeahead-picker 1.0.0 → 2.0.0

package/dist/index.js

@@ -13,26 +13,30 @@ function defineTypeaheadPicker(config) {
     _id: /* @__PURE__ */ Symbol("typeahead-picker")
   };
 }
-function extractKeywordFromPattern(matchedText, pattern, autoCompleteWith) {
-  if (autoCompleteWith && matchedText.endsWith(autoCompleteWith)) {
-    const strippedMatch = matchedText.slice(0, -autoCompleteWith.length).match(pattern), strippedKeyword = strippedMatch ? strippedMatch[1] ?? strippedMatch[0] : "";
-    if (strippedKeyword.length > 0)
-      return strippedKeyword;
-  }
-  const match = matchedText.match(pattern);
-  return match ? match[1] ?? match[0] : matchedText;
+function extractKeyword(patternText, triggerPattern, delimiter, completePattern) {
+  const triggerMatch = patternText.match(triggerPattern);
+  if (!triggerMatch || triggerMatch.index !== 0)
+    return patternText;
+  let keyword = patternText.slice(triggerMatch[0].length);
+  return delimiter && keyword.endsWith(delimiter) && (completePattern && (() => {
+    const completeMatch = patternText.match(completePattern);
+    return completeMatch && completeMatch.index === 0 && completeMatch[0] === patternText;
+  })() || keyword.length > delimiter.length) && (keyword = keyword.slice(0, -delimiter.length)), keyword;
 }
 function escapeRegExp(str) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-function normalizePattern(pattern) {
-  return new RegExp(pattern.source);
+function buildTriggerPattern(definition) {
+  return new RegExp(definition.trigger.source);
+}
+function buildPartialPattern(definition) {
+  return new RegExp(definition.trigger.source + definition.keyword.source);
 }
 function buildCompletePattern(definition) {
-  if (!definition.autoCompleteWith)
+  if (!definition.delimiter)
     return;
-  const autoCompleteWith = escapeRegExp(definition.autoCompleteWith);
-  return new RegExp(`${definition.pattern.source}${autoCompleteWith}`);
+  const escapedDelimiter = escapeRegExp(definition.delimiter);
+  return new RegExp(definition.trigger.source + definition.keyword.source + escapedDelimiter);
 }
 const arrowUpShortcut = createKeyboardShortcut({
   default: [{
@@ -158,79 +162,47 @@ function createKeywordFoundEvent(payload) {
     ...payload
   };
 }
-function extractFullMatchFromFocusSpan(focusSpan) {
+function extractPatternTextFromFocusSpan(focusSpan) {
   return focusSpan.textBefore.length > 0 && focusSpan.textAfter.length > 0 ? focusSpan.node.text.slice(focusSpan.textBefore.length, -focusSpan.textAfter.length) : focusSpan.textBefore.length > 0 ? focusSpan.node.text.slice(focusSpan.textBefore.length) : focusSpan.textAfter.length > 0 ? focusSpan.node.text.slice(0, -focusSpan.textAfter.length) : focusSpan.node.text;
 }
-function validateFocusSpan(currentFocusSpan, editor, partialPattern, completePattern) {
-  const snapshot = editor.getSnapshot(), focusSpan = getFocusSpan(snapshot);
-  if (!snapshot.context.selection || !focusSpan)
-    return;
-  const nextSpan = getNextSpan({
-    ...snapshot,
-    context: {
-      ...snapshot.context,
-      selection: {
-        anchor: {
-          path: currentFocusSpan.path,
-          offset: 0
-        },
-        focus: {
-          path: currentFocusSpan.path,
-          offset: 0
-        }
-      }
-    }
-  });
-  if (!isEqualPaths(focusSpan.path, currentFocusSpan.path))
-    return nextSpan && currentFocusSpan.textAfter.length === 0 && snapshot.context.selection.focus.offset === 0 && isSelectionCollapsed(snapshot) ? currentFocusSpan : void 0;
-  if (!focusSpan.node.text.startsWith(currentFocusSpan.textBefore) || !focusSpan.node.text.endsWith(currentFocusSpan.textAfter))
-    return;
-  const keywordAnchor = {
-    path: focusSpan.path,
-    offset: currentFocusSpan.textBefore.length
-  }, keywordFocus = {
-    path: focusSpan.path,
-    offset: focusSpan.node.text.length - currentFocusSpan.textAfter.length
-  }, selectionIsBeforeKeyword = isPointAfterSelection(keywordAnchor)(snapshot), selectionIsAfterKeyword = isPointBeforeSelection(keywordFocus)(snapshot);
-  if (selectionIsBeforeKeyword || selectionIsAfterKeyword)
-    return;
-  const keywordText = focusSpan.node.text.slice(currentFocusSpan.textBefore.length, currentFocusSpan.textAfter.length > 0 ? -currentFocusSpan.textAfter.length : void 0), patternMatch = keywordText.match(partialPattern);
-  if (!patternMatch || patternMatch.index !== 0)
-    return;
-  let matchEnd = currentFocusSpan.textBefore.length + patternMatch[0].length;
-  if (completePattern) {
-    const completeMatch = keywordText.match(completePattern);
-    completeMatch && completeMatch.index === 0 && completeMatch[0] === keywordText && (matchEnd = currentFocusSpan.textBefore.length + completeMatch[0].length);
-  }
-  if (!(snapshot.context.selection.focus.offset > matchEnd))
-    return {
-      node: focusSpan.node,
-      path: focusSpan.path,
-      textBefore: currentFocusSpan.textBefore,
-      textAfter: currentFocusSpan.textAfter
-    };
-}
-function extractKeywordFromMatch(match, pattern, autoCompleteWith) {
-  const firstGroupMatch = match.groupMatches[0];
-  return firstGroupMatch && firstGroupMatch.text.length > 0 ? firstGroupMatch.text : extractKeywordFromPattern(match.text, pattern, autoCompleteWith);
-}
 function createInputRules(definition) {
-  const rules = [], partialPattern = definition.pattern, completePattern = buildCompletePattern(definition);
+  const rules = [], triggerPattern = buildTriggerPattern(definition), partialPattern = buildPartialPattern(definition), completePattern = buildCompletePattern(definition);
   if (completePattern) {
-    const completeTriggerRule = defineInputRule({
+    const completeRule = defineInputRule({
       on: completePattern,
       guard: ({
         snapshot,
         event
       }) => {
         const lastMatch = event.matches.at(-1);
-        if (!lastMatch || lastMatch.targetOffsets.anchor.offset < event.textBefore.length)
+        if (lastMatch === void 0)
           return !1;
+        if (lastMatch.targetOffsets.anchor.offset < event.textBefore.length) {
+          const insertedMatch = event.textInserted.match(completePattern);
+          if (insertedMatch === null || insertedMatch.index !== 0)
+            return !1;
+          const triggerState2 = getTriggerState(snapshot);
+          return triggerState2 ? {
+            ...triggerState2,
+            lastMatch: {
+              ...lastMatch,
+              text: event.textInserted,
+              targetOffsets: {
+                ...lastMatch.targetOffsets,
+                anchor: {
+                  ...lastMatch.targetOffsets.anchor,
+                  offset: event.textBefore.length
+                }
+              }
+            },
+            extractedKeyword: extractKeyword(event.textInserted, triggerPattern, definition.delimiter, completePattern)
+          } : !1;
+        }
         const triggerState = getTriggerState(snapshot);
         return triggerState ? {
           ...triggerState,
           lastMatch,
-          extractedKeyword: extractKeywordFromMatch(lastMatch, partialPattern, definition.autoCompleteWith)
+          extractedKeyword: extractKeyword(lastMatch.text, triggerPattern, definition.delimiter, completePattern)
         } : !1;
       },
       actions: [({
@@ -242,30 +214,75 @@ function createInputRules(definition) {
         pickerId: definition._id
       })]
     });
-    rules.push(completeTriggerRule);
+    rules.push(completeRule);
   }
-  const partialTriggerRule = defineInputRule({
+  const partialRule = defineInputRule({
     on: partialPattern,
     guard: ({
       snapshot,
       event
     }) => {
       const lastMatch = event.matches.at(-1);
-      if (!lastMatch || lastMatch.targetOffsets.anchor.offset < event.textBefore.length)
+      if (lastMatch === void 0)
         return !1;
-      const triggerState = getTriggerState(snapshot);
-      if (!triggerState)
-        return !1;
-      if (completePattern) {
-        const completeMatch = triggerState.focusSpan.node.text.slice(lastMatch.targetOffsets.anchor.offset).match(completePattern);
-        if (completeMatch && completeMatch.index === 0)
+      if (lastMatch.targetOffsets.anchor.offset < event.textBefore.length) {
+        const insertedMatch = event.textInserted.match(partialPattern);
+        if (insertedMatch === null || insertedMatch.index !== 0)
           return !1;
+        if (completePattern) {
+          const completeMatch = event.textInserted.match(completePattern);
+          if (completeMatch !== null && completeMatch.index === 0 && completeMatch[0] === event.textInserted)
+            return !1;
+        }
+        const triggerState2 = getTriggerState(snapshot);
+        return triggerState2 ? {
+          ...triggerState2,
+          lastMatch: {
+            ...lastMatch,
+            text: event.textInserted,
+            targetOffsets: {
+              ...lastMatch.targetOffsets,
+              anchor: {
+                ...lastMatch.targetOffsets.anchor,
+                offset: event.textBefore.length
+              }
+            }
+          },
+          extractedKeyword: extractKeyword(event.textInserted, triggerPattern, definition.delimiter)
+        } : !1;
       }
-      return {
+      const triggerState = getTriggerState(snapshot);
+      return triggerState ? {
+        ...triggerState,
+        lastMatch,
+        extractedKeyword: extractKeyword(lastMatch.text, triggerPattern, definition.delimiter)
+      } : !1;
+    },
+    actions: [({
+      snapshot
+    }, payload) => createTriggerActions({
+      snapshot,
+      payload,
+      keywordState: "partial",
+      pickerId: definition._id
+    })]
+  });
+  rules.push(partialRule);
+  const triggerRule = defineInputRule({
+    on: triggerPattern,
+    guard: ({
+      snapshot,
+      event
+    }) => {
+      const lastMatch = event.matches.at(-1);
+      if (lastMatch === void 0 || event.textInserted !== lastMatch.text)
+        return !1;
+      const triggerState = getTriggerState(snapshot);
+      return triggerState ? {
         ...triggerState,
         lastMatch,
-        extractedKeyword: extractKeywordFromMatch(lastMatch, partialPattern, definition.autoCompleteWith)
-      };
+        extractedKeyword: ""
+      } : !1;
     },
     actions: [({
       snapshot
@@ -276,7 +293,7 @@ function createInputRules(definition) {
       pickerId: definition._id
     })]
   });
-  return rules.push(partialTriggerRule), rules;
+  return rules.push(triggerRule), rules;
 }
 const triggerListenerCallback = () => ({
   sendBack,
@@ -404,7 +421,7 @@ const triggerListenerCallback = () => ({
       on: "keyboard.keydown",
       guard: ({
         event
-      }) => (enterShortcut.guard(event.originEvent) || tabShortcut.guard(event.originEvent)) && context.fullMatch.length === 1,
+      }) => (enterShortcut.guard(event.originEvent) || tabShortcut.guard(event.originEvent)) && context.patternText.length === 1,
       actions: [({
         event
       }) => [forward(event), effect(() => {
@@ -418,7 +435,7 @@ const triggerListenerCallback = () => ({
       on: "keyboard.keydown",
       guard: ({
         event
-      }) => (enterShortcut.guard(event.originEvent) || tabShortcut.guard(event.originEvent)) && context.fullMatch.length > 1 && context.matches.length === 0,
+      }) => (enterShortcut.guard(event.originEvent) || tabShortcut.guard(event.originEvent)) && context.patternText.length > 1 && context.matches.length === 0,
       actions: [() => [effect(() => {
         sendBack({
           type: "dismiss"
@@ -554,11 +571,11 @@ function createTypeaheadPickerMachine() {
       }) => {
         if (event.type !== "custom.typeahead trigger found" && event.type !== "custom.typeahead keyword found")
           return {};
-        const focusSpan = event.focusSpan, fullMatch = extractFullMatchFromFocusSpan(focusSpan), keyword = event.extractedKeyword;
+        const focusSpan = event.focusSpan, patternText = extractPatternTextFromFocusSpan(focusSpan), keyword = event.extractedKeyword;
         if (context.definition.mode === "async" || context.definition.debounceMs)
           return {
             focusSpan,
-            fullMatch,
+            patternText,
             keyword,
             isLoading: !0,
             selectedIndex: 0
@@ -568,82 +585,110 @@ function createTypeaheadPickerMachine() {
         });
         return {
           focusSpan,
-          fullMatch,
+          patternText,
           keyword,
           matches,
-          loadingFullMatch: fullMatch,
+          requestedKeyword: keyword,
           isLoading: !1,
           selectedIndex: 0
         };
       }),
-      "handle selection changed": assign(({
+      "update focus span": assign({
+        focusSpan: ({
+          context
+        }) => {
+          if (!context.focusSpan)
+            return context.focusSpan;
+          const snapshot = context.editor.getSnapshot(), focusSpan = getFocusSpan(snapshot);
+          if (!snapshot.context.selection || !focusSpan)
+            return;
+          const nextSpan = getNextSpan({
+            ...snapshot,
+            context: {
+              ...snapshot.context,
+              selection: {
+                anchor: {
+                  path: context.focusSpan.path,
+                  offset: 0
+                },
+                focus: {
+                  path: context.focusSpan.path,
+                  offset: 0
+                }
+              }
+            }
+          });
+          if (!isEqualPaths(focusSpan.path, context.focusSpan.path))
+            return nextSpan && context.focusSpan.textAfter.length === 0 && snapshot.context.selection.focus.offset === 0 && isSelectionCollapsed(snapshot) ? context.focusSpan : void 0;
+          if (!focusSpan.node.text.startsWith(context.focusSpan.textBefore) || !focusSpan.node.text.endsWith(context.focusSpan.textAfter))
+            return;
+          const keywordAnchor = {
+            path: focusSpan.path,
+            offset: context.focusSpan.textBefore.length
+          }, keywordFocus = {
+            path: focusSpan.path,
+            offset: focusSpan.node.text.length - context.focusSpan.textAfter.length
+          }, selectionIsBeforeKeyword = isPointAfterSelection(keywordAnchor)(snapshot), selectionIsAfterKeyword = isPointBeforeSelection(keywordFocus)(snapshot);
+          if (!(selectionIsBeforeKeyword || selectionIsAfterKeyword))
+            return {
+              node: focusSpan.node,
+              path: focusSpan.path,
+              textBefore: context.focusSpan.textBefore,
+              textAfter: context.focusSpan.textAfter
+            };
+        }
+      }),
+      "update pattern text": assign(({
         context
       }) => {
         if (!context.focusSpan)
-          return {
-            focusSpan: void 0,
-            fullMatch: "",
-            keyword: "",
-            matches: [],
-            selectedIndex: 0,
-            isLoading: !1
-          };
-        const updatedFocusSpan = validateFocusSpan(context.focusSpan, context.editor, context.partialPattern, context.completePattern);
-        if (!updatedFocusSpan)
-          return {
-            focusSpan: void 0,
-            fullMatch: "",
-            keyword: "",
-            matches: [],
-            selectedIndex: 0,
-            isLoading: !1
-          };
-        const fullMatch = extractFullMatchFromFocusSpan(updatedFocusSpan);
-        if (fullMatch === context.fullMatch)
-          return {
-            focusSpan: updatedFocusSpan
-          };
-        const keyword = extractKeywordFromPattern(fullMatch, context.definition.pattern, context.definition.autoCompleteWith);
-        if (context.definition.mode === "async" || context.definition.debounceMs)
-          return {
-            focusSpan: updatedFocusSpan,
-            fullMatch,
-            keyword,
-            selectedIndex: 0,
-            isLoading: context.isLoading || context.loadingFullMatch !== fullMatch
-          };
-        const matches = context.definition.getMatches({
+          return {};
+        const patternText = extractPatternTextFromFocusSpan(context.focusSpan);
+        return patternText === context.patternText ? {} : {
+          patternText,
+          selectedIndex: 0
+        };
+      }),
+      "update keyword": assign(({
+        context
+      }) => {
+        if (!context.focusSpan || !context.patternText)
+          return {};
+        const keyword = extractKeyword(context.patternText, context.triggerPattern, context.definition.delimiter, context.completePattern);
+        return keyword === context.keyword ? {} : {
           keyword
-        });
-        return {
-          focusSpan: updatedFocusSpan,
-          fullMatch,
-          keyword,
-          matches,
-          loadingFullMatch: fullMatch,
-          selectedIndex: 0,
-          isLoading: !1
         };
       }),
+      "update matches": assign(({
+        context
+      }) => !context.focusSpan || !context.patternText ? {} : context.definition.mode === "async" || context.definition.debounceMs ? {
+        isLoading: context.isLoading || context.requestedKeyword !== context.keyword
+      } : {
+        matches: context.definition.getMatches({
+          keyword: context.keyword
+        }),
+        requestedKeyword: context.keyword,
+        isLoading: !1
+      }),
       "handle async load complete": assign(({
         context,
         event
       }) => {
         const output = event.output;
         return output.keyword !== context.keyword ? {
-          isLoading: context.fullMatch !== context.loadingFullMatch
+          isLoading: context.keyword !== context.requestedKeyword
         } : {
           matches: output.matches,
-          isLoading: context.fullMatch !== context.loadingFullMatch
+          isLoading: context.keyword !== context.requestedKeyword
         };
       }),
       reset: assign({
-        fullMatch: "",
+        patternText: "",
         keyword: "",
         matches: [],
         selectedIndex: 0,
         isLoading: !1,
-        loadingFullMatch: "",
+        requestedKeyword: "",
         focusSpan: void 0,
         error: void 0
       }),
@@ -664,7 +709,7 @@ function createTypeaheadPickerMachine() {
       }, params) => {
         if (!context.focusSpan)
           return;
-        const match = params.exact ? getExactMatch(context.matches) : context.matches[context.selectedIndex];
+        const match = params.exact ? getFirstExactMatch(context.matches) : context.matches[context.selectedIndex];
         match && context.editor.send({
           type: "custom.typeahead insert match",
           match,
@@ -696,6 +741,24 @@ function createTypeaheadPickerMachine() {
       "no focus span": ({
         context
       }) => !context.focusSpan,
+      "invalid pattern": ({
+        context
+      }) => {
+        if (!context.patternText)
+          return !0;
+        const triggerMatch = context.patternText.match(context.triggerPattern);
+        if (triggerMatch && triggerMatch.index === 0 && triggerMatch[0] === context.patternText)
+          return !1;
+        const partialMatch = context.patternText.match(context.partialPattern);
+        if (partialMatch && partialMatch.index === 0 && partialMatch[0] === context.patternText)
+          return !1;
+        if (context.completePattern) {
+          const completeMatch = context.patternText.match(context.completePattern);
+          if (completeMatch && completeMatch.index === 0 && completeMatch[0] === context.patternText)
+            return !1;
+        }
+        return !0;
+      },
       "no debounce": ({
         context
       }) => !context.definition.debounceMs || context.definition.debounceMs === 0,
@@ -705,7 +768,7 @@ function createTypeaheadPickerMachine() {
         if (!context.completePattern || !context.focusSpan)
           return !1;
         const fullKeywordText = context.focusSpan.node.text.slice(context.focusSpan.textBefore.length, context.focusSpan.textAfter.length > 0 ? -context.focusSpan.textAfter.length : void 0), completeMatch = fullKeywordText.match(context.completePattern);
-        return !completeMatch || completeMatch.index !== 0 || completeMatch[0] !== fullKeywordText ? !1 : hasExactlyOneExactMatch(context.matches);
+        return !completeMatch || completeMatch.index !== 0 || completeMatch[0] !== fullKeywordText ? !1 : hasAtLeastOneExactMatch(context.matches);
       },
       "has matches": ({
         context
@@ -724,14 +787,15 @@ function createTypeaheadPickerMachine() {
     }) => ({
       editor: input.editor,
       definition: input.definition,
-      partialPattern: normalizePattern(input.definition.pattern),
+      triggerPattern: buildTriggerPattern(input.definition),
+      partialPattern: buildPartialPattern(input.definition),
       completePattern: buildCompletePattern(input.definition),
       matches: [],
       selectedIndex: 0,
       focusSpan: void 0,
-      fullMatch: "",
+      patternText: "",
       keyword: "",
-      loadingFullMatch: "",
+      requestedKeyword: "",
       error: void 0,
       isLoading: !1
     }),
@@ -778,7 +842,7 @@ function createTypeaheadPickerMachine() {
           onDone: [{
             guard: ({
               event
-            }) => hasExactlyOneExactMatch(event.output.matches),
+            }) => hasAtLeastOneExactMatch(event.output.matches),
             target: "idle",
             actions: [assign({
               matches: ({
@@ -848,12 +912,15 @@ function createTypeaheadPickerMachine() {
             target: "idle"
           },
           "selection changed": {
-            actions: ["handle selection changed", "update submit listener context", "update text insertion listener context"]
+            actions: ["update focus span", "update pattern text", "update keyword", "update matches", "update submit listener context", "update text insertion listener context"]
           }
         },
         always: [{
           guard: "no focus span",
           target: "idle"
+        }, {
+          guard: "invalid pattern",
+          target: "idle"
         }, {
           guard: "is complete keyword",
           actions: [{
@@ -879,9 +946,9 @@ function createTypeaheadPickerMachine() {
           },
           loading: {
             entry: [assign({
-              loadingFullMatch: ({
+              requestedKeyword: ({
                 context
-              }) => context.fullMatch
+              }) => context.keyword
             })],
             initial: "debouncing",
             states: {
@@ -909,10 +976,10 @@ function createTypeaheadPickerMachine() {
                       context,
                       event
                     }) => event.output.keyword !== context.keyword ? {
-                      isLoading: context.fullMatch !== context.loadingFullMatch
+                      isLoading: context.patternText !== context.requestedKeyword
                     } : {
                       matches: event.output.matches,
-                      isLoading: context.fullMatch !== context.loadingFullMatch
+                      isLoading: context.keyword !== context.requestedKeyword
                     })]
                   },
                   onError: {
@@ -941,9 +1008,9 @@ function createTypeaheadPickerMachine() {
               },
               loading: {
                 entry: [assign({
-                  loadingFullMatch: ({
+                  requestedKeyword: ({
                     context
-                  }) => context.fullMatch
+                  }) => context.keyword
                 })],
                 initial: "debouncing",
                 states: {
@@ -1023,9 +1090,9 @@ function createTypeaheadPickerMachine() {
               },
               loading: {
                 entry: [assign({
-                  loadingFullMatch: ({
+                  requestedKeyword: ({
                     context
-                  }) => context.fullMatch
+                  }) => context.keyword
                 })],
                 initial: "debouncing",
                 states: {
@@ -1066,12 +1133,11 @@ function createTypeaheadPickerMachine() {
     }
   });
 }
-function hasExactlyOneExactMatch(matches) {
-  return matches.filter((match) => match?.type === "exact").length === 1;
+function hasAtLeastOneExactMatch(matches) {
+  return matches.some((match) => match?.type === "exact");
 }
-function getExactMatch(matches) {
-  const exactMatches = matches.filter((match) => match?.type === "exact");
-  return exactMatches.length === 1 ? exactMatches[0] : void 0;
+function getFirstExactMatch(matches) {
+  return matches.find((match) => match?.type === "exact");
 }
 function useTypeaheadPicker(definition) {
   const $ = c(19), editor = useEditor();