@portabletext/plugin-typeahead-picker 2.1.0 → 3.0.1

package/dist/index.js

@@ -1,5 +1,5 @@
+import { keyGenerator, useEditor } from "@portabletext/editor";
 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";
@@ -10,7 +10,7 @@ import { setup, assign, sendTo, fromPromise, fromCallback } from "xstate";
 function defineTypeaheadPicker(config) {
   return {
     ...config,
-    _id: /* @__PURE__ */ Symbol("typeahead-picker")
+    _id: keyGenerator()
   };
 }
 function extractKeyword(patternText, triggerPattern, delimiter, completePattern) {
@@ -343,20 +343,50 @@ const triggerListenerCallback = () => ({
   };
 }, escapeListenerCallback = () => ({
   sendBack,
-  input
-}) => input.editor.registerBehavior({
-  behavior: defineBehavior({
-    on: "keyboard.keydown",
-    guard: ({
-      event
-    }) => escapeShortcut.guard(event.originEvent),
-    actions: [() => [effect(() => {
-      sendBack({
-        type: "dismiss"
-      });
-    })]]
-  })
-}), arrowListenerCallback = () => ({
+  input,
+  receive
+}) => {
+  let context = input.context;
+  return receive((event) => {
+    context = event.context;
+  }), input.context.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: "keyboard.keydown",
+      guard: ({
+        event
+      }) => escapeShortcut.guard(event.originEvent),
+      actions: [({
+        snapshot,
+        dom
+      }) => {
+        if (!context.focusSpan || !context.definition.onDismiss)
+          return [effect(() => sendBack({
+            type: "close"
+          }))];
+        const patternSelection = {
+          anchor: {
+            path: context.focusSpan.path,
+            offset: context.focusSpan.textBefore.length
+          },
+          focus: {
+            path: context.focusSpan.path,
+            offset: context.focusSpan.node.text.length - context.focusSpan.textAfter.length
+          }
+        };
+        return [...context.definition.onDismiss.flatMap((actionSet) => actionSet({
+          snapshot,
+          dom,
+          event: {
+            type: "custom.typeahead dismiss",
+            patternSelection
+          }
+        }, !0)), effect(() => sendBack({
+          type: "close"
+        }))];
+      }]
+    })
+  });
+}, arrowListenerCallback = () => ({
   sendBack,
   input
 }) => {
@@ -396,7 +426,52 @@ const triggerListenerCallback = () => ({
   sendBack({
     type: "selection changed"
   });
-}).unsubscribe, submitListenerCallback = () => ({
+}).unsubscribe, dismissListenerCallback = () => ({
+  sendBack,
+  input,
+  receive
+}) => {
+  let context = input.context;
+  return receive((event) => {
+    context = event.context;
+  }), input.context.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: "custom.typeahead dismiss",
+      guard: ({
+        event
+      }) => event.pickerId === context.definition._id,
+      actions: [({
+        snapshot,
+        dom
+      }) => {
+        if (!context.focusSpan || !context.definition.onDismiss)
+          return [effect(() => sendBack({
+            type: "close"
+          }))];
+        const patternSelection = {
+          anchor: {
+            path: context.focusSpan.path,
+            offset: context.focusSpan.textBefore.length
+          },
+          focus: {
+            path: context.focusSpan.path,
+            offset: context.focusSpan.node.text.length - context.focusSpan.textAfter.length
+          }
+        };
+        return [...context.definition.onDismiss.flatMap((actionSet) => actionSet({
+          snapshot,
+          dom,
+          event: {
+            type: "custom.typeahead dismiss",
+            patternSelection
+          }
+        }, !0)), effect(() => sendBack({
+          type: "close"
+        }))];
+      }]
+    })
+  });
+}, submitListenerCallback = () => ({
   sendBack,
   input,
   receive
@@ -435,7 +510,7 @@ const triggerListenerCallback = () => ({
         event
       }) => [forward(event), effect(() => {
         sendBack({
-          type: "dismiss"
+          type: "close"
         });
       })]]
     })
@@ -445,11 +520,35 @@ const triggerListenerCallback = () => ({
       guard: ({
         event
       }) => (enterShortcut.guard(event.originEvent) || tabShortcut.guard(event.originEvent)) && context.patternText.length > 1 && context.matches.length === 0,
-      actions: [() => [effect(() => {
-        sendBack({
-          type: "dismiss"
-        });
-      })]]
+      actions: [({
+        snapshot,
+        dom
+      }) => {
+        if (!context.focusSpan || !context.definition.onDismiss)
+          return [effect(() => sendBack({
+            type: "close"
+          }))];
+        const patternSelection = {
+          anchor: {
+            path: context.focusSpan.path,
+            offset: context.focusSpan.textBefore.length
+          },
+          focus: {
+            path: context.focusSpan.path,
+            offset: context.focusSpan.node.text.length - context.focusSpan.textAfter.length
+          }
+        };
+        return [...context.definition.onDismiss.flatMap((actionSet) => actionSet({
+          snapshot,
+          dom,
+          event: {
+            type: "custom.typeahead dismiss",
+            patternSelection
+          }
+        }, !0)), effect(() => sendBack({
+          type: "close"
+        }))];
+      }]
     })
   })];
   return () => {
@@ -482,7 +581,7 @@ const triggerListenerCallback = () => ({
         event
       }) => [forward(event), effect(() => {
         sendBack({
-          type: "dismiss"
+          type: "close"
         });
       })]]
     })
@@ -510,26 +609,21 @@ const triggerListenerCallback = () => ({
           path: event.focusSpan.path,
           offset: event.focusSpan.node.text.length - event.focusSpan.textAfter.length
         }
-      }, allActions = [effect(() => {
+      }, selectActions = input.context.definition.onSelect.flatMap((actionSet) => actionSet({
+        snapshot,
+        dom,
+        event: {
+          type: "custom.typeahead select",
+          match: event.match,
+          keyword: event.keyword,
+          patternSelection
+        }
+      }, !0));
+      return [effect(() => {
         sendBack({
-          type: "dismiss"
+          type: "close"
         });
-      })];
-      for (const actionSet of input.context.definition.actions) {
-        const actions = actionSet({
-          snapshot,
-          dom,
-          event: {
-            type: "custom.typeahead select",
-            match: event.match,
-            keyword: event.keyword,
-            patternSelection
-          }
-        }, !0);
-        for (const action of actions)
-          allActions.push(action);
-      }
-      return allActions;
+      }), ...selectActions];
     }]
   })
 });
@@ -553,6 +647,7 @@ function createTypeaheadPickerMachine() {
       "submit listener": fromCallback(submitListenerCallback()),
       "text insertion listener": fromCallback(textInsertionListenerCallback()),
       "select match listener": fromCallback(selectMatchListenerCallback()),
+      "dismiss listener": fromCallback(dismissListenerCallback()),
       "get matches": fromPromise(async ({
         input
       }) => {
@@ -594,83 +689,84 @@ function createTypeaheadPickerMachine() {
           selectedIndex: 0
         };
       }),
-      "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(({
+      "handle selection changed": assign(({
         context
       }) => {
         if (!context.focusSpan)
-          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 ? {} : {
+          return {
+            focusSpan: void 0
+          };
+        const snapshot = context.editor.getSnapshot(), currentFocusSpan = getFocusSpan(snapshot);
+        if (!snapshot.context.selection || !currentFocusSpan)
+          return {
+            focusSpan: void 0
+          };
+        const nextSpan = getNextSpan({
+          ...snapshot,
+          context: {
+            ...snapshot.context,
+            selection: {
+              anchor: {
+                path: context.focusSpan.path,
+                offset: 0
+              },
+              focus: {
+                path: context.focusSpan.path,
+                offset: 0
+              }
+            }
+          }
+        });
+        if (!isEqualPaths(currentFocusSpan.path, context.focusSpan.path))
+          return nextSpan && context.focusSpan.textAfter.length === 0 && snapshot.context.selection.focus.offset === 0 && isSelectionCollapsed(snapshot) ? {} : {
+            focusSpan: void 0
+          };
+        if (!currentFocusSpan.node.text.startsWith(context.focusSpan.textBefore))
+          return {
+            focusSpan: void 0
+          };
+        if (!currentFocusSpan.node.text.endsWith(context.focusSpan.textAfter))
+          return {
+            focusSpan: void 0
+          };
+        const keywordAnchor = {
+          path: currentFocusSpan.path,
+          offset: context.focusSpan.textBefore.length
+        }, keywordFocus = {
+          path: currentFocusSpan.path,
+          offset: currentFocusSpan.node.text.length - context.focusSpan.textAfter.length
+        }, selectionIsBeforeKeyword = isPointAfterSelection(keywordAnchor)(snapshot), selectionIsAfterKeyword = isPointBeforeSelection(keywordFocus)(snapshot);
+        if (selectionIsBeforeKeyword || selectionIsAfterKeyword)
+          return {
+            focusSpan: void 0
+          };
+        const focusSpan = {
+          node: currentFocusSpan.node,
+          path: currentFocusSpan.path,
+          textBefore: context.focusSpan.textBefore,
+          textAfter: context.focusSpan.textAfter
+        }, patternText = extractPatternTextFromFocusSpan(focusSpan), keyword = extractKeyword(patternText, context.triggerPattern, context.definition.delimiter, context.completePattern);
+        if (context.definition.mode === "async" || context.definition.debounceMs)
+          return {
+            focusSpan,
+            patternText,
+            keyword,
+            selectedIndex: patternText !== context.patternText ? 0 : context.selectedIndex,
+            isLoading: context.isLoading || context.requestedKeyword !== keyword
+          };
+        const matches = context.definition.getMatches({
           keyword
+        });
+        return {
+          focusSpan,
+          patternText,
+          keyword,
+          matches,
+          requestedKeyword: keyword,
+          selectedIndex: patternText !== context.patternText ? 0 : context.selectedIndex,
+          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
@@ -731,6 +827,18 @@ function createTypeaheadPickerMachine() {
         type: "context changed",
         context
       })),
+      "update escape listener context": sendTo("escape listener", ({
+        context
+      }) => ({
+        type: "context changed",
+        context
+      })),
+      "update request dismiss listener context": sendTo("dismiss listener", ({
+        context
+      }) => ({
+        type: "context changed",
+        context
+      })),
       "handle error": assign({
         isLoading: !1,
         error: ({
@@ -879,10 +987,11 @@ function createTypeaheadPickerMachine() {
           })
         }, {
           src: "escape listener",
+          id: "escape listener",
           input: ({
             context
           }) => ({
-            editor: context.editor
+            context
           })
         }, {
           src: "selection listener",
@@ -907,13 +1016,21 @@ function createTypeaheadPickerMachine() {
           }) => ({
             context
           })
+        }, {
+          src: "dismiss listener",
+          id: "dismiss listener",
+          input: ({
+            context
+          }) => ({
+            context
+          })
         }],
         on: {
-          dismiss: {
+          close: {
             target: "idle"
           },
           "selection changed": {
-            actions: ["update focus span", "update pattern text", "update keyword", "update matches", "update submit listener context", "update text insertion listener context"]
+            actions: ["handle selection changed", "update submit listener context", "update text insertion listener context", "update escape listener context", "update request dismiss listener context"]
           }
         },
         always: [{
@@ -1141,7 +1258,7 @@ function getFirstExactMatch(matches) {
   return matches.find((match) => match?.type === "exact");
 }
 function useTypeaheadPicker(definition) {
-  const $ = c(19), editor = useEditor();
+  const $ = c(21), editor = useEditor();
   let t0;
   $[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t0 = createTypeaheadPickerMachine(), $[0] = t0) : t0 = $[0];
   let t1;
@@ -1168,14 +1285,17 @@ function useTypeaheadPicker(definition) {
     context: t4
   }, $[11] = t2, $[12] = t4, $[13] = t5) : t5 = $[13];
   let t6;
-  $[14] !== send ? (t6 = (event) => {
-    send(event);
-  }, $[14] = send, $[15] = t6) : t6 = $[15];
+  $[14] !== definition || $[15] !== editor || $[16] !== send ? (t6 = (event) => {
+    event.type === "dismiss" ? editor.send({
+      type: "custom.typeahead dismiss",
+      pickerId: definition._id
+    }) : send(event);
+  }, $[14] = definition, $[15] = editor, $[16] = send, $[17] = t6) : t6 = $[17];
   let t7;
-  return $[16] !== t5 || $[17] !== t6 ? (t7 = {
+  return $[18] !== t5 || $[19] !== t6 ? (t7 = {
     snapshot: t5,
     send: t6
-  }, $[16] = t5, $[17] = t6, $[18] = t7) : t7 = $[18], t7;
+  }, $[18] = t5, $[19] = t6, $[20] = t7) : t7 = $[20], t7;
 }
 export {
   defineTypeaheadPicker,