@portabletext/plugin-typeahead-picker 1.0.0

package/dist/index.js

@@ -0,0 +1,1117 @@
+import { c } from "react/compiler-runtime";
+import { useEditor } from "@portabletext/editor";
+import { useActor } from "@xstate/react";
+import { defineBehavior, effect, forward, raise } from "@portabletext/editor/behaviors";
+import { getFocusSpan, getNextSpan, isSelectionCollapsed, isPointAfterSelection, isPointBeforeSelection, getMarkState, getPreviousSpan } from "@portabletext/editor/selectors";
+import { isEqualPaths, isEqualSelectionPoints } from "@portabletext/editor/utils";
+import { createKeyboardShortcut } from "@portabletext/keyboard-shortcuts";
+import { defineInputRuleBehavior, defineInputRule } from "@portabletext/plugin-input-rule";
+import { setup, assign, sendTo, fromPromise, fromCallback } from "xstate";
+function defineTypeaheadPicker(config) {
+  return {
+    ...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 escapeRegExp(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function normalizePattern(pattern) {
+  return new RegExp(pattern.source);
+}
+function buildCompletePattern(definition) {
+  if (!definition.autoCompleteWith)
+    return;
+  const autoCompleteWith = escapeRegExp(definition.autoCompleteWith);
+  return new RegExp(`${definition.pattern.source}${autoCompleteWith}`);
+}
+const arrowUpShortcut = createKeyboardShortcut({
+  default: [{
+    key: "ArrowUp"
+  }]
+}), arrowDownShortcut = createKeyboardShortcut({
+  default: [{
+    key: "ArrowDown"
+  }]
+}), enterShortcut = createKeyboardShortcut({
+  default: [{
+    key: "Enter"
+  }]
+}), tabShortcut = createKeyboardShortcut({
+  default: [{
+    key: "Tab"
+  }]
+}), escapeShortcut = createKeyboardShortcut({
+  default: [{
+    key: "Escape"
+  }]
+}), getTriggerState = (snapshot) => {
+  const focusSpan = getFocusSpan(snapshot), markState = getMarkState(snapshot);
+  if (!focusSpan || !markState || !snapshot.context.selection)
+    return;
+  const focusSpanTextBefore = focusSpan.node.text.slice(0, snapshot.context.selection.focus.offset), focusSpanTextAfter = focusSpan.node.text.slice(snapshot.context.selection.focus.offset), previousSpan = getPreviousSpan(snapshot), nextSpan = getNextSpan(snapshot);
+  return {
+    focusSpan,
+    markState,
+    focusSpanTextBefore,
+    focusSpanTextAfter,
+    previousSpan,
+    nextSpan
+  };
+};
+function createTriggerActions({
+  snapshot,
+  payload,
+  keywordState,
+  pickerId
+}) {
+  if (payload.markState.state === "unchanged") {
+    const textBeforeMatch = payload.focusSpanTextBefore.slice(0, payload.lastMatch.targetOffsets.anchor.offset), focusSpan2 = {
+      node: {
+        _key: payload.focusSpan.node._key,
+        _type: payload.focusSpan.node._type,
+        text: `${textBeforeMatch}${payload.lastMatch.text}${payload.focusSpanTextAfter}`,
+        marks: payload.markState.marks
+      },
+      path: payload.focusSpan.path,
+      textBefore: textBeforeMatch,
+      textAfter: payload.focusSpanTextAfter
+    };
+    return keywordState === "complete" ? [raise(createKeywordFoundEvent({
+      focusSpan: focusSpan2,
+      extractedKeyword: payload.extractedKeyword,
+      pickerId
+    }))] : [raise(createTriggerFoundEvent({
+      focusSpan: focusSpan2,
+      extractedKeyword: payload.extractedKeyword,
+      pickerId
+    }))];
+  }
+  const newSpan = {
+    _key: snapshot.context.keyGenerator(),
+    _type: payload.focusSpan.node._type,
+    text: payload.lastMatch.text,
+    marks: payload.markState.marks
+  };
+  let focusSpan = {
+    node: {
+      _key: newSpan._key,
+      _type: newSpan._type,
+      text: `${newSpan.text}${payload.nextSpan?.node.text ?? payload.focusSpanTextAfter}`,
+      marks: payload.markState.marks
+    },
+    path: [{
+      _key: payload.focusSpan.path[0]._key
+    }, "children", {
+      _key: newSpan._key
+    }],
+    textBefore: "",
+    textAfter: payload.nextSpan?.node.text ?? payload.focusSpanTextAfter
+  };
+  return payload.previousSpan && payload.focusSpanTextBefore.length === 0 && JSON.stringify(payload.previousSpan.node.marks ?? []) === JSON.stringify(payload.markState.marks) && (focusSpan = {
+    node: {
+      _key: payload.previousSpan.node._key,
+      _type: newSpan._type,
+      text: `${payload.previousSpan.node.text}${newSpan.text}`,
+      marks: newSpan.marks
+    },
+    path: payload.previousSpan.path,
+    textBefore: payload.previousSpan.node.text,
+    textAfter: ""
+  }), [raise({
+    type: "select",
+    at: payload.lastMatch.targetOffsets
+  }), raise({
+    type: "delete",
+    at: payload.lastMatch.targetOffsets
+  }), raise({
+    type: "insert.child",
+    child: newSpan
+  }), ...keywordState === "complete" ? [raise(createKeywordFoundEvent({
+    focusSpan,
+    extractedKeyword: payload.extractedKeyword,
+    pickerId
+  }))] : [raise(createTriggerFoundEvent({
+    focusSpan,
+    extractedKeyword: payload.extractedKeyword,
+    pickerId
+  }))]];
+}
+function createTriggerFoundEvent(payload) {
+  return {
+    type: "custom.typeahead trigger found",
+    ...payload
+  };
+}
+function createKeywordFoundEvent(payload) {
+  return {
+    type: "custom.typeahead keyword found",
+    ...payload
+  };
+}
+function extractFullMatchFromFocusSpan(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);
+  if (completePattern) {
+    const completeTriggerRule = defineInputRule({
+      on: completePattern,
+      guard: ({
+        snapshot,
+        event
+      }) => {
+        const lastMatch = event.matches.at(-1);
+        if (!lastMatch || lastMatch.targetOffsets.anchor.offset < event.textBefore.length)
+          return !1;
+        const triggerState = getTriggerState(snapshot);
+        return triggerState ? {
+          ...triggerState,
+          lastMatch,
+          extractedKeyword: extractKeywordFromMatch(lastMatch, partialPattern, definition.autoCompleteWith)
+        } : !1;
+      },
+      actions: [({
+        snapshot
+      }, payload) => createTriggerActions({
+        snapshot,
+        payload,
+        keywordState: "complete",
+        pickerId: definition._id
+      })]
+    });
+    rules.push(completeTriggerRule);
+  }
+  const partialTriggerRule = defineInputRule({
+    on: partialPattern,
+    guard: ({
+      snapshot,
+      event
+    }) => {
+      const lastMatch = event.matches.at(-1);
+      if (!lastMatch || lastMatch.targetOffsets.anchor.offset < event.textBefore.length)
+        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)
+          return !1;
+      }
+      return {
+        ...triggerState,
+        lastMatch,
+        extractedKeyword: extractKeywordFromMatch(lastMatch, partialPattern, definition.autoCompleteWith)
+      };
+    },
+    actions: [({
+      snapshot
+    }, payload) => createTriggerActions({
+      snapshot,
+      payload,
+      keywordState: "partial",
+      pickerId: definition._id
+    })]
+  });
+  return rules.push(partialTriggerRule), rules;
+}
+const triggerListenerCallback = () => ({
+  sendBack,
+  input
+}) => {
+  const rules = createInputRules(input.definition), unregisterBehaviors = [input.editor.registerBehavior({
+    behavior: defineInputRuleBehavior({
+      rules
+    })
+  }), input.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: "custom.typeahead keyword found",
+      guard: ({
+        event
+      }) => event.pickerId === input.definition._id,
+      actions: [({
+        event
+      }) => [effect(() => {
+        sendBack(event);
+      })]]
+    })
+  }), input.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: "custom.typeahead trigger found",
+      guard: ({
+        event
+      }) => event.pickerId === input.definition._id,
+      actions: [({
+        event
+      }) => [effect(() => {
+        sendBack(event);
+      })]]
+    })
+  })];
+  return () => {
+    for (const unregister of unregisterBehaviors)
+      unregister();
+  };
+}, escapeListenerCallback = () => ({
+  sendBack,
+  input
+}) => input.editor.registerBehavior({
+  behavior: defineBehavior({
+    on: "keyboard.keydown",
+    guard: ({
+      event
+    }) => escapeShortcut.guard(event.originEvent),
+    actions: [() => [effect(() => {
+      sendBack({
+        type: "dismiss"
+      });
+    })]]
+  })
+}), arrowListenerCallback = () => ({
+  sendBack,
+  input
+}) => {
+  const unregisterBehaviors = [input.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: "keyboard.keydown",
+      guard: ({
+        event
+      }) => arrowDownShortcut.guard(event.originEvent),
+      actions: [() => [effect(() => {
+        sendBack({
+          type: "navigate down"
+        });
+      })]]
+    })
+  }), input.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: "keyboard.keydown",
+      guard: ({
+        event
+      }) => arrowUpShortcut.guard(event.originEvent),
+      actions: [() => [effect(() => {
+        sendBack({
+          type: "navigate up"
+        });
+      })]]
+    })
+  })];
+  return () => {
+    for (const unregister of unregisterBehaviors)
+      unregister();
+  };
+}, selectionListenerCallback = () => ({
+  sendBack,
+  input
+}) => input.editor.on("selection", () => {
+  sendBack({
+    type: "selection changed"
+  });
+}).unsubscribe, submitListenerCallback = () => ({
+  sendBack,
+  input,
+  receive
+}) => {
+  let context = input.context;
+  receive((event) => {
+    context = event.context;
+  });
+  const unregisterBehaviors = [input.context.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: "keyboard.keydown",
+      guard: ({
+        event
+      }) => {
+        if (!enterShortcut.guard(event.originEvent) && !tabShortcut.guard(event.originEvent))
+          return !1;
+        const focusSpan = context.focusSpan, match = context.matches[context.selectedIndex];
+        return match && focusSpan ? {
+          focusSpan,
+          match
+        } : !1;
+      },
+      actions: [() => [effect(() => {
+        sendBack({
+          type: "select"
+        });
+      })]]
+    })
+  }), input.context.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: "keyboard.keydown",
+      guard: ({
+        event
+      }) => (enterShortcut.guard(event.originEvent) || tabShortcut.guard(event.originEvent)) && context.fullMatch.length === 1,
+      actions: [({
+        event
+      }) => [forward(event), effect(() => {
+        sendBack({
+          type: "dismiss"
+        });
+      })]]
+    })
+  }), input.context.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: "keyboard.keydown",
+      guard: ({
+        event
+      }) => (enterShortcut.guard(event.originEvent) || tabShortcut.guard(event.originEvent)) && context.fullMatch.length > 1 && context.matches.length === 0,
+      actions: [() => [effect(() => {
+        sendBack({
+          type: "dismiss"
+        });
+      })]]
+    })
+  })];
+  return () => {
+    for (const unregister of unregisterBehaviors)
+      unregister();
+  };
+}, textInsertionListenerCallback = () => ({
+  sendBack,
+  input,
+  receive
+}) => {
+  let context = input.context;
+  return receive((event) => {
+    context = event.context;
+  }), input.context.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: "insert.text",
+      guard: ({
+        snapshot
+      }) => {
+        if (!context.focusSpan || !snapshot.context.selection)
+          return !1;
+        const keywordAnchor = {
+          path: context.focusSpan.path,
+          offset: context.focusSpan.textBefore.length
+        };
+        return isEqualSelectionPoints(snapshot.context.selection.focus, keywordAnchor);
+      },
+      actions: [({
+        event
+      }) => [forward(event), effect(() => {
+        sendBack({
+          type: "dismiss"
+        });
+      })]]
+    })
+  });
+}, insertMatchListenerCallback = () => ({
+  sendBack,
+  input
+}) => input.context.editor.registerBehavior({
+  behavior: defineBehavior({
+    on: "custom.typeahead insert match",
+    guard: ({
+      event
+    }) => event.pickerId === input.context.definition._id,
+    actions: [({
+      event,
+      snapshot,
+      dom
+    }) => {
+      const patternSelection = {
+        anchor: {
+          path: event.focusSpan.path,
+          offset: event.focusSpan.textBefore.length
+        },
+        focus: {
+          path: event.focusSpan.path,
+          offset: event.focusSpan.node.text.length - event.focusSpan.textAfter.length
+        }
+      }, allActions = [effect(() => {
+        sendBack({
+          type: "dismiss"
+        });
+      })];
+      for (const actionSet of input.context.definition.actions) {
+        const actions = actionSet({
+          snapshot,
+          dom,
+          event: {
+            type: "typeahead.select",
+            match: event.match,
+            keyword: event.keyword,
+            patternSelection
+          }
+        }, !0);
+        for (const action of actions)
+          allActions.push(action);
+      }
+      return allActions.push(effect(() => {
+        queueMicrotask(() => {
+          const currentSelection = input.context.editor.getSnapshot().context.selection;
+          currentSelection && input.context.editor.send({
+            type: "select",
+            at: currentSelection
+          });
+        });
+      })), allActions;
+    }]
+  })
+});
+function createTypeaheadPickerMachine() {
+  return setup({
+    types: {
+      context: {},
+      input: {},
+      events: {}
+    },
+    delays: {
+      DEBOUNCE: ({
+        context
+      }) => context.definition.debounceMs ?? 0
+    },
+    actors: {
+      "trigger listener": fromCallback(triggerListenerCallback()),
+      "escape listener": fromCallback(escapeListenerCallback()),
+      "arrow listener": fromCallback(arrowListenerCallback()),
+      "selection listener": fromCallback(selectionListenerCallback()),
+      "submit listener": fromCallback(submitListenerCallback()),
+      "text insertion listener": fromCallback(textInsertionListenerCallback()),
+      "insert match listener": fromCallback(insertMatchListenerCallback()),
+      "get matches": fromPromise(async ({
+        input
+      }) => {
+        const result = input.getMatches({
+          keyword: input.keyword
+        }), matches = await Promise.resolve(result);
+        return {
+          keyword: input.keyword,
+          matches
+        };
+      })
+    },
+    actions: {
+      "handle trigger found": assign(({
+        context,
+        event
+      }) => {
+        if (event.type !== "custom.typeahead trigger found" && event.type !== "custom.typeahead keyword found")
+          return {};
+        const focusSpan = event.focusSpan, fullMatch = extractFullMatchFromFocusSpan(focusSpan), keyword = event.extractedKeyword;
+        if (context.definition.mode === "async" || context.definition.debounceMs)
+          return {
+            focusSpan,
+            fullMatch,
+            keyword,
+            isLoading: !0,
+            selectedIndex: 0
+          };
+        const matches = context.definition.getMatches({
+          keyword
+        });
+        return {
+          focusSpan,
+          fullMatch,
+          keyword,
+          matches,
+          loadingFullMatch: fullMatch,
+          isLoading: !1,
+          selectedIndex: 0
+        };
+      }),
+      "handle selection changed": 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({
+          keyword
+        });
+        return {
+          focusSpan: updatedFocusSpan,
+          fullMatch,
+          keyword,
+          matches,
+          loadingFullMatch: fullMatch,
+          selectedIndex: 0,
+          isLoading: !1
+        };
+      }),
+      "handle async load complete": assign(({
+        context,
+        event
+      }) => {
+        const output = event.output;
+        return output.keyword !== context.keyword ? {
+          isLoading: context.fullMatch !== context.loadingFullMatch
+        } : {
+          matches: output.matches,
+          isLoading: context.fullMatch !== context.loadingFullMatch
+        };
+      }),
+      reset: assign({
+        fullMatch: "",
+        keyword: "",
+        matches: [],
+        selectedIndex: 0,
+        isLoading: !1,
+        loadingFullMatch: "",
+        focusSpan: void 0,
+        error: void 0
+      }),
+      navigate: assign(({
+        context,
+        event
+      }) => context.matches.length === 0 ? {
+        selectedIndex: 0
+      } : event.type === "navigate to" ? {
+        selectedIndex: event.index
+      } : event.type === "navigate up" ? {
+        selectedIndex: (context.selectedIndex - 1 + context.matches.length) % context.matches.length
+      } : {
+        selectedIndex: (context.selectedIndex + 1) % context.matches.length
+      }),
+      "insert match": ({
+        context
+      }, params) => {
+        if (!context.focusSpan)
+          return;
+        const match = params.exact ? getExactMatch(context.matches) : context.matches[context.selectedIndex];
+        match && context.editor.send({
+          type: "custom.typeahead insert match",
+          match,
+          focusSpan: context.focusSpan,
+          keyword: context.keyword,
+          pickerId: context.definition._id
+        });
+      },
+      "update submit listener context": sendTo("submit listener", ({
+        context
+      }) => ({
+        type: "context changed",
+        context
+      })),
+      "update text insertion listener context": sendTo("text insertion listener", ({
+        context
+      }) => ({
+        type: "context changed",
+        context
+      })),
+      "handle error": assign({
+        isLoading: !1,
+        error: ({
+          event
+        }) => event.error
+      })
+    },
+    guards: {
+      "no focus span": ({
+        context
+      }) => !context.focusSpan,
+      "no debounce": ({
+        context
+      }) => !context.definition.debounceMs || context.definition.debounceMs === 0,
+      "is complete keyword": ({
+        context
+      }) => {
+        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);
+      },
+      "has matches": ({
+        context
+      }) => context.matches.length > 0,
+      "no matches": ({
+        context
+      }) => context.matches.length === 0,
+      "is loading": ({
+        context
+      }) => context.isLoading
+    }
+  }).createMachine({
+    id: "typeahead picker",
+    context: ({
+      input
+    }) => ({
+      editor: input.editor,
+      definition: input.definition,
+      partialPattern: normalizePattern(input.definition.pattern),
+      completePattern: buildCompletePattern(input.definition),
+      matches: [],
+      selectedIndex: 0,
+      focusSpan: void 0,
+      fullMatch: "",
+      keyword: "",
+      loadingFullMatch: "",
+      error: void 0,
+      isLoading: !1
+    }),
+    initial: "idle",
+    states: {
+      idle: {
+        entry: ["reset"],
+        invoke: {
+          src: "trigger listener",
+          input: ({
+            context
+          }) => ({
+            editor: context.editor,
+            definition: context.definition
+          })
+        },
+        on: {
+          "custom.typeahead trigger found": {
+            target: "active",
+            actions: ["handle trigger found"]
+          },
+          "custom.typeahead keyword found": {
+            target: "checking complete",
+            actions: ["handle trigger found"]
+          }
+        }
+      },
+      "checking complete": {
+        invoke: [{
+          src: "insert match listener",
+          input: ({
+            context
+          }) => ({
+            context
+          })
+        }, {
+          src: "get matches",
+          input: ({
+            context
+          }) => ({
+            keyword: context.keyword,
+            getMatches: context.definition.getMatches
+          }),
+          onDone: [{
+            guard: ({
+              event
+            }) => hasExactlyOneExactMatch(event.output.matches),
+            target: "idle",
+            actions: [assign({
+              matches: ({
+                event
+              }) => event.output.matches
+            }), {
+              type: "insert match",
+              params: {
+                exact: !0
+              }
+            }]
+          }, {
+            target: "active",
+            actions: [assign({
+              matches: ({
+                event
+              }) => event.output.matches
+            })]
+          }],
+          onError: {
+            target: "active.no matches",
+            actions: ["handle error"]
+          }
+        }]
+      },
+      active: {
+        invoke: [{
+          src: "insert match listener",
+          input: ({
+            context
+          }) => ({
+            context
+          })
+        }, {
+          src: "escape listener",
+          input: ({
+            context
+          }) => ({
+            editor: context.editor
+          })
+        }, {
+          src: "selection listener",
+          input: ({
+            context
+          }) => ({
+            editor: context.editor
+          })
+        }, {
+          src: "submit listener",
+          id: "submit listener",
+          input: ({
+            context
+          }) => ({
+            context
+          })
+        }, {
+          src: "text insertion listener",
+          id: "text insertion listener",
+          input: ({
+            context
+          }) => ({
+            context
+          })
+        }],
+        on: {
+          dismiss: {
+            target: "idle"
+          },
+          "selection changed": {
+            actions: ["handle selection changed", "update submit listener context", "update text insertion listener context"]
+          }
+        },
+        always: [{
+          guard: "no focus span",
+          target: "idle"
+        }, {
+          guard: "is complete keyword",
+          actions: [{
+            type: "insert match",
+            params: {
+              exact: !1
+            }
+          }],
+          target: "idle"
+        }],
+        initial: "evaluating",
+        states: {
+          evaluating: {
+            always: [{
+              guard: "is loading",
+              target: "loading"
+            }, {
+              guard: "has matches",
+              target: "showing matches"
+            }, {
+              target: "no matches"
+            }]
+          },
+          loading: {
+            entry: [assign({
+              loadingFullMatch: ({
+                context
+              }) => context.fullMatch
+            })],
+            initial: "debouncing",
+            states: {
+              debouncing: {
+                always: [{
+                  guard: "no debounce",
+                  target: "fetching"
+                }],
+                after: {
+                  DEBOUNCE: "fetching"
+                }
+              },
+              fetching: {
+                invoke: {
+                  src: "get matches",
+                  input: ({
+                    context
+                  }) => ({
+                    keyword: context.keyword,
+                    getMatches: context.definition.getMatches
+                  }),
+                  onDone: {
+                    target: "#typeahead picker.active.evaluating",
+                    actions: [assign(({
+                      context,
+                      event
+                    }) => event.output.keyword !== context.keyword ? {
+                      isLoading: context.fullMatch !== context.loadingFullMatch
+                    } : {
+                      matches: event.output.matches,
+                      isLoading: context.fullMatch !== context.loadingFullMatch
+                    })]
+                  },
+                  onError: {
+                    target: "#typeahead picker.active.no matches",
+                    actions: ["handle error"]
+                  }
+                }
+              }
+            }
+          },
+          "no matches": {
+            entry: [assign({
+              selectedIndex: 0
+            })],
+            always: [{
+              guard: "has matches",
+              target: "showing matches"
+            }],
+            initial: "idle",
+            states: {
+              idle: {
+                always: [{
+                  guard: "is loading",
+                  target: "loading"
+                }]
+              },
+              loading: {
+                entry: [assign({
+                  loadingFullMatch: ({
+                    context
+                  }) => context.fullMatch
+                })],
+                initial: "debouncing",
+                states: {
+                  debouncing: {
+                    always: [{
+                      guard: "no debounce",
+                      target: "fetching"
+                    }],
+                    after: {
+                      DEBOUNCE: "fetching"
+                    }
+                  },
+                  fetching: {
+                    invoke: {
+                      src: "get matches",
+                      input: ({
+                        context
+                      }) => ({
+                        keyword: context.keyword,
+                        getMatches: context.definition.getMatches
+                      }),
+                      onDone: {
+                        target: "#typeahead picker.active.no matches.idle",
+                        actions: ["handle async load complete"]
+                      },
+                      onError: {
+                        target: "#typeahead picker.active.no matches.idle",
+                        actions: ["handle error"]
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "showing matches": {
+            entry: ["update submit listener context", "update text insertion listener context"],
+            invoke: {
+              src: "arrow listener",
+              input: ({
+                context
+              }) => ({
+                editor: context.editor
+              })
+            },
+            always: [{
+              guard: "no matches",
+              target: "no matches"
+            }],
+            on: {
+              "navigate down": {
+                actions: ["navigate", "update submit listener context", "update text insertion listener context"]
+              },
+              "navigate up": {
+                actions: ["navigate", "update submit listener context", "update text insertion listener context"]
+              },
+              "navigate to": {
+                actions: ["navigate", "update submit listener context", "update text insertion listener context"]
+              },
+              select: {
+                target: "#typeahead picker.idle",
+                actions: [{
+                  type: "insert match",
+                  params: {
+                    exact: !1
+                  }
+                }]
+              }
+            },
+            initial: "idle",
+            states: {
+              idle: {
+                always: [{
+                  guard: "is loading",
+                  target: "loading"
+                }]
+              },
+              loading: {
+                entry: [assign({
+                  loadingFullMatch: ({
+                    context
+                  }) => context.fullMatch
+                })],
+                initial: "debouncing",
+                states: {
+                  debouncing: {
+                    always: [{
+                      guard: "no debounce",
+                      target: "fetching"
+                    }],
+                    after: {
+                      DEBOUNCE: "fetching"
+                    }
+                  },
+                  fetching: {
+                    invoke: {
+                      src: "get matches",
+                      input: ({
+                        context
+                      }) => ({
+                        keyword: context.keyword,
+                        getMatches: context.definition.getMatches
+                      }),
+                      onDone: {
+                        target: "#typeahead picker.active.showing matches.idle",
+                        actions: ["handle async load complete"]
+                      },
+                      onError: {
+                        target: "#typeahead picker.active.showing matches.idle",
+                        actions: ["handle error"]
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  });
+}
+function hasExactlyOneExactMatch(matches) {
+  return matches.filter((match) => match?.type === "exact").length === 1;
+}
+function getExactMatch(matches) {
+  const exactMatches = matches.filter((match) => match?.type === "exact");
+  return exactMatches.length === 1 ? exactMatches[0] : void 0;
+}
+function useTypeaheadPicker(definition) {
+  const $ = c(19), editor = useEditor();
+  let t0;
+  $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = createTypeaheadPickerMachine(), $[0] = t0) : t0 = $[0];
+  let t1;
+  $[1] !== definition || $[2] !== editor ? (t1 = {
+    input: {
+      editor,
+      definition
+    }
+  }, $[1] = definition, $[2] = editor, $[3] = t1) : t1 = $[3];
+  const [actorSnapshot, send] = useActor(t0, t1);
+  let t2;
+  $[4] !== actorSnapshot ? (t2 = (state) => actorSnapshot.matches(state), $[4] = actorSnapshot, $[5] = t2) : t2 = $[5];
+  const t3 = actorSnapshot.context.matches;
+  let t4;
+  $[6] !== actorSnapshot.context.error || $[7] !== actorSnapshot.context.keyword || $[8] !== actorSnapshot.context.selectedIndex || $[9] !== t3 ? (t4 = {
+    keyword: actorSnapshot.context.keyword,
+    matches: t3,
+    selectedIndex: actorSnapshot.context.selectedIndex,
+    error: actorSnapshot.context.error
+  }, $[6] = actorSnapshot.context.error, $[7] = actorSnapshot.context.keyword, $[8] = actorSnapshot.context.selectedIndex, $[9] = t3, $[10] = t4) : t4 = $[10];
+  let t5;
+  $[11] !== t2 || $[12] !== t4 ? (t5 = {
+    matches: t2,
+    context: t4
+  }, $[11] = t2, $[12] = t4, $[13] = t5) : t5 = $[13];
+  let t6;
+  $[14] !== send ? (t6 = (event) => {
+    send(event);
+  }, $[14] = send, $[15] = t6) : t6 = $[15];
+  let t7;
+  return $[16] !== t5 || $[17] !== t6 ? (t7 = {
+    snapshot: t5,
+    send: t6
+  }, $[16] = t5, $[17] = t6, $[18] = t7) : t7 = $[18], t7;
+}
+export {
+  defineTypeaheadPicker,
+  useTypeaheadPicker
+};
+//# sourceMappingURL=index.js.map