@portabletext/plugin-emoji-picker 0.0.15 → 1.0.1

package/dist/index.d.cts

@@ -1,3 +1,18 @@
+/**
+ * The base type representing an emoji match.
+ *
+ * @beta
+ */
+export declare type BaseEmojiMatch =
+  | {
+      type: 'exact'
+      emoji: string
+    }
+  | {
+      type: 'partial'
+      emoji: string
+    }
+
 /**
  * Proposed, but not required, function to create a `MatchEmojis` function.
  *
@@ -15,7 +30,7 @@
  */
 export declare function createMatchEmojis(config: {
   emojis: Record<string, ReadonlyArray<string>>
-}): MatchEmojis
+}): MatchEmojis<EmojiMatch>
 
 /**
  * Proposed, but not required type, to represent an emoji match.
@@ -62,7 +77,9 @@ export declare type EmojiMatch =
 /**
  * @beta
  */
-export declare type EmojiPicker<TEmojiMatch = EmojiMatch> = {
+export declare type EmojiPicker<
+  TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch,
+> = {
   /**
    * The matched keyword, including colons.
    *
@@ -155,7 +172,9 @@ export declare type EmojiPicker<TEmojiMatch = EmojiMatch> = {
 /**
  * @beta
  */
-export declare type EmojiPickerProps<TEmojiMatch = EmojiMatch> = {
+export declare type EmojiPickerProps<
+  TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch,
+> = {
   matchEmojis: MatchEmojis<TEmojiMatch>
 }
 
@@ -164,16 +183,16 @@ export declare type EmojiPickerProps<TEmojiMatch = EmojiMatch> = {
  *
  * @beta
  */
-export declare type MatchEmojis<TEmojiMatch = EmojiMatch> = (query: {
-  keyword: string
-}) => ReadonlyArray<TEmojiMatch>
+export declare type MatchEmojis<
+  TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch,
+> = (query: {keyword: string}) => ReadonlyArray<TEmojiMatch>
 
 /**
  * Proposed, but not required, default implementation of `MatchEmojis`.
  *
  * @beta
  */
-export declare const matchEmojis: MatchEmojis
+export declare const matchEmojis: MatchEmojis<EmojiMatch>
 
 /**
  * Handles the state and logic needed to create an emoji picker.
@@ -202,8 +221,8 @@ export declare const matchEmojis: MatchEmojis
  *
  * @beta
  */
-export declare function useEmojiPicker<TEmojiMatch = EmojiMatch>(
-  props: EmojiPickerProps<TEmojiMatch>,
-): EmojiPicker<TEmojiMatch>
+export declare function useEmojiPicker<
+  TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch,
+>(props: EmojiPickerProps<TEmojiMatch>): EmojiPicker<TEmojiMatch>
 
 export {}

package/dist/index.d.ts

@@ -1,3 +1,18 @@
+/**
+ * The base type representing an emoji match.
+ *
+ * @beta
+ */
+export declare type BaseEmojiMatch =
+  | {
+      type: 'exact'
+      emoji: string
+    }
+  | {
+      type: 'partial'
+      emoji: string
+    }
+
 /**
  * Proposed, but not required, function to create a `MatchEmojis` function.
  *
@@ -15,7 +30,7 @@
  */
 export declare function createMatchEmojis(config: {
   emojis: Record<string, ReadonlyArray<string>>
-}): MatchEmojis
+}): MatchEmojis<EmojiMatch>
 
 /**
  * Proposed, but not required type, to represent an emoji match.
@@ -62,7 +77,9 @@ export declare type EmojiMatch =
 /**
  * @beta
  */
-export declare type EmojiPicker<TEmojiMatch = EmojiMatch> = {
+export declare type EmojiPicker<
+  TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch,
+> = {
   /**
    * The matched keyword, including colons.
    *
@@ -155,7 +172,9 @@ export declare type EmojiPicker<TEmojiMatch = EmojiMatch> = {
 /**
  * @beta
  */
-export declare type EmojiPickerProps<TEmojiMatch = EmojiMatch> = {
+export declare type EmojiPickerProps<
+  TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch,
+> = {
   matchEmojis: MatchEmojis<TEmojiMatch>
 }
 
@@ -164,16 +183,16 @@ export declare type EmojiPickerProps<TEmojiMatch = EmojiMatch> = {
  *
  * @beta
  */
-export declare type MatchEmojis<TEmojiMatch = EmojiMatch> = (query: {
-  keyword: string
-}) => ReadonlyArray<TEmojiMatch>
+export declare type MatchEmojis<
+  TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch,
+> = (query: {keyword: string}) => ReadonlyArray<TEmojiMatch>
 
 /**
  * Proposed, but not required, default implementation of `MatchEmojis`.
  *
  * @beta
  */
-export declare const matchEmojis: MatchEmojis
+export declare const matchEmojis: MatchEmojis<EmojiMatch>
 
 /**
  * Handles the state and logic needed to create an emoji picker.
@@ -202,8 +221,8 @@ export declare const matchEmojis: MatchEmojis
  *
  * @beta
  */
-export declare function useEmojiPicker<TEmojiMatch = EmojiMatch>(
-  props: EmojiPickerProps<TEmojiMatch>,
-): EmojiPicker<TEmojiMatch>
+export declare function useEmojiPicker<
+  TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch,
+>(props: EmojiPickerProps<TEmojiMatch>): EmojiPicker<TEmojiMatch>
 
 export {}

package/dist/index.js

@@ -2039,7 +2039,7 @@ function createKeywordFoundEvent(payload) {
     ...payload
   };
 }
-const colonListenerCallback = ({
+const triggerListenerCallback = ({
   sendBack,
   input
 }) => {
@@ -2062,10 +2062,7 @@ const colonListenerCallback = ({
       actions: [({
         event
       }) => [effect(() => {
-        sendBack({
-          ...event,
-          type: "colon inserted"
-        });
+        sendBack(event);
       })]]
     })
   }), input.editor.registerBehavior({
@@ -2074,10 +2071,7 @@ const colonListenerCallback = ({
       actions: [({
         event
       }) => [effect(() => {
-        sendBack({
-          ...event,
-          type: "colon inserted"
-        });
+        sendBack(event);
       })]]
     })
   })];
@@ -2135,65 +2129,28 @@ const colonListenerCallback = ({
   };
 }, emojiInsertListener = ({
   sendBack,
-  input,
-  receive
-}) => {
-  let context = input.context;
-  receive((event) => {
-    context = event.context;
-  });
-  const unregisterBehaviors = [input.context.editor.registerBehavior({
-    behavior: defineBehavior({
-      on: "custom.insert emoji",
-      actions: [({
-        event
-      }) => [effect(() => {
-        sendBack({
-          type: "dismiss"
-        });
-      }), raise({
-        type: "delete.text",
-        at: {
-          anchor: event.anchor,
-          focus: event.focus
-        }
-      }), raise({
-        type: "insert.text",
-        text: event.emoji
-      })]]
-    })
-  }), input.context.editor.registerBehavior({
-    behavior: defineBehavior({
-      on: "insert.text",
-      guard: ({
-        event
-      }) => {
-        if (event.text !== ":")
-          return !1;
-        const anchor = context.keywordAnchor?.blockOffset, focus = context.keywordFocus, match = context.matches[context.selectedIndex];
-        return match && match.type === "exact" && anchor && focus ? {
-          anchor,
-          focus,
-          emoji: match.emoji
-        } : !1;
-      },
-      actions: [(_, {
-        anchor,
-        focus,
-        emoji
-      }) => [raise({
-        type: "custom.insert emoji",
-        emoji,
-        anchor,
-        focus
-      })]]
-    })
-  })];
-  return () => {
-    for (const unregister of unregisterBehaviors)
-      unregister();
-  };
-}, submitListenerCallback = ({
+  input
+}) => input.context.editor.registerBehavior({
+  behavior: defineBehavior({
+    on: "custom.insert emoji",
+    actions: [({
+      event
+    }) => [effect(() => {
+      sendBack({
+        type: "dismiss"
+      });
+    }), raise({
+      type: "delete.text",
+      at: {
+        anchor: event.anchor,
+        focus: event.focus
+      }
+    }), raise({
+      type: "insert.text",
+      text: event.emoji
+    })]]
+  })
+}), submitListenerCallback = ({
   sendBack,
   input,
   receive
@@ -2240,6 +2197,19 @@ const colonListenerCallback = ({
         });
       })]]
     })
+  }), input.context.editor.registerBehavior({
+    behavior: defineInputRuleBehavior({
+      rules: [keywordRule]
+    })
+  }), input.context.editor.registerBehavior({
+    behavior: defineBehavior({
+      on: "custom.keyword found",
+      actions: [({
+        event
+      }) => [effect(() => {
+        sendBack(event);
+      })]]
+    })
   })];
   return () => {
     for (const unregister of unregisterBehaviors)
@@ -2332,7 +2302,7 @@ const colonListenerCallback = ({
     "emoji insert listener": fromCallback(emojiInsertListener),
     "submit listener": fromCallback(submitListenerCallback),
     "arrow listener": fromCallback(arrowListenerCallback),
-    "colon listener": fromCallback(colonListenerCallback),
+    "trigger listener": fromCallback(triggerListenerCallback),
     "escape listener": fromCallback(escapeListenerCallback),
     "selection listener": fromCallback(selectionListenerCallback),
     "text change listener": fromCallback(textChangeListener)
@@ -2342,19 +2312,19 @@ const colonListenerCallback = ({
       keyword: ({
         context,
         event
-      }) => event.type !== "colon inserted" && event.type !== "custom.keyword found" ? context.keyword : event.keyword
+      }) => event.type !== "custom.trigger found" && event.type !== "custom.partial keyword found" && event.type !== "custom.keyword found" ? context.keyword : event.keyword
     }),
     "set keyword anchor": assign({
       keywordAnchor: ({
         context,
         event
-      }) => event.type !== "colon inserted" && event.type !== "custom.keyword found" ? context.keywordAnchor : event.keywordAnchor
+      }) => event.type !== "custom.trigger found" && event.type !== "custom.partial keyword found" && event.type !== "custom.keyword found" ? context.keywordAnchor : event.keywordAnchor
     }),
     "set keyword focus": assign({
       keywordFocus: ({
         context,
         event
-      }) => event.type !== "colon inserted" && event.type !== "custom.keyword found" ? context.keywordFocus : event.keywordFocus
+      }) => event.type !== "custom.trigger found" && event.type !== "custom.partial keyword found" && event.type !== "custom.keyword found" ? context.keywordFocus : event.keywordFocus
     }),
     "update keyword focus": assign({
       keywordFocus: ({
@@ -2430,10 +2400,11 @@ const colonListenerCallback = ({
       context
     })),
     "insert selected match": ({
-      context
+      context,
+      event
     }) => {
       const match = context.matches[context.selectedIndex];
-      !match || !context.keywordAnchor || !context.keywordFocus || context.editor.send({
+      !match || !context.keywordAnchor || !context.keywordFocus || event.type === "custom.keyword found" && match.type !== "exact" || context.editor.send({
         type: "custom.insert emoji",
         emoji: match.emoji,
         anchor: context.keywordAnchor.blockOffset,
@@ -2526,7 +2497,7 @@ const colonListenerCallback = ({
     idle: {
       entry: ["reset"],
       invoke: {
-        src: "colon listener",
+        src: "trigger listener",
         input: ({
           context
         }) => ({
@@ -2534,12 +2505,18 @@ const colonListenerCallback = ({
         })
       },
       on: {
-        "colon inserted": {
+        "custom.trigger found": {
+          target: "searching",
+          actions: ["set keyword anchor", "set keyword focus", "init keyword"]
+        },
+        "custom.partial keyword found": {
           target: "searching",
           actions: ["set keyword anchor", "set keyword focus", "init keyword"]
         },
         "custom.keyword found": {
-          actions: ["set keyword anchor", "set keyword focus", "init keyword", "update matches", "insert selected match"]
+          actions: ["set keyword anchor", "set keyword focus", "init keyword", "update matches", "insert selected match"],
+          target: "idle",
+          reenter: !0
         }
       }
     },
@@ -2575,6 +2552,9 @@ const colonListenerCallback = ({
         })
       }],
       on: {
+        "custom.keyword found": {
+          actions: ["set keyword anchor", "set keyword focus", "init keyword", "update matches", "insert selected match"]
+        },
         "insert.text": [{
           guard: "unexpected text insertion",
           target: "idle"
@@ -2594,7 +2574,7 @@ const colonListenerCallback = ({
           guard: "selection moved unexpectedly",
           target: "idle"
         }, {
-          actions: ["update keyword", "update matches", "reset selected index", "update emoji insert listener context", "update submit listener context"]
+          actions: ["update keyword", "update matches", "reset selected index", "update submit listener context"]
         }]
       },
       always: [{
@@ -2625,13 +2605,13 @@ const colonListenerCallback = ({
           }],
           on: {
             "navigate down": {
-              actions: ["increment selected index", "update emoji insert listener context", "update submit listener context"]
+              actions: ["increment selected index", "update submit listener context"]
             },
             "navigate up": {
-              actions: ["decrement selected index", "update emoji insert listener context", "update submit listener context"]
+              actions: ["decrement selected index", "update submit listener context"]
             },
             "navigate to": {
-              actions: ["set selected index", "update emoji insert listener context", "update submit listener context"]
+              actions: ["set selected index", "update submit listener context"]
             },
             "insert selected match": {
               actions: ["insert selected match"]
@@ -2643,48 +2623,48 @@ const colonListenerCallback = ({
   }
 });
 function useEmojiPicker(props) {
-  const $ = c(17), editor = useEditor(), t0 = props.matchEmojis;
-  let t1;
-  $[0] !== editor || $[1] !== t0 ? (t1 = {
+  const $ = c(17), editor = useEditor();
+  let t0;
+  $[0] !== editor || $[1] !== props.matchEmojis ? (t0 = {
     input: {
       editor,
-      matchEmojis: t0
+      matchEmojis: props.matchEmojis
     }
-  }, $[0] = editor, $[1] = t0, $[2] = t1) : t1 = $[2];
-  const emojiPickerActor = useActorRef(emojiPickerMachine, t1), keyword = useSelector(emojiPickerActor, _temp), matches = useSelector(emojiPickerActor, _temp2), selectedIndex = useSelector(emojiPickerActor, _temp3);
-  let t2;
-  $[3] !== emojiPickerActor ? (t2 = () => {
+  }, $[0] = editor, $[1] = props.matchEmojis, $[2] = t0) : t0 = $[2];
+  const emojiPickerActor = useActorRef(emojiPickerMachine, t0), keyword = useSelector(emojiPickerActor, _temp), matches = useSelector(emojiPickerActor, _temp2), selectedIndex = useSelector(emojiPickerActor, _temp3);
+  let t1;
+  $[3] !== emojiPickerActor ? (t1 = () => {
     emojiPickerActor.send({
       type: "dismiss"
     });
-  }, $[3] = emojiPickerActor, $[4] = t2) : t2 = $[4];
-  const onDismiss = t2;
-  let t3;
-  $[5] !== emojiPickerActor ? (t3 = (index) => {
+  }, $[3] = emojiPickerActor, $[4] = t1) : t1 = $[4];
+  const onDismiss = t1;
+  let t2;
+  $[5] !== emojiPickerActor ? (t2 = (index) => {
     emojiPickerActor.send({
       type: "navigate to",
       index
     });
-  }, $[5] = emojiPickerActor, $[6] = t3) : t3 = $[6];
-  const onNavigateTo = t3;
-  let t4;
-  $[7] !== editor || $[8] !== emojiPickerActor ? (t4 = () => {
+  }, $[5] = emojiPickerActor, $[6] = t2) : t2 = $[6];
+  const onNavigateTo = t2;
+  let t3;
+  $[7] !== editor || $[8] !== emojiPickerActor ? (t3 = () => {
     emojiPickerActor.send({
       type: "insert selected match"
     }), editor.send({
       type: "focus"
     });
-  }, $[7] = editor, $[8] = emojiPickerActor, $[9] = t4) : t4 = $[9];
-  const onSelect = t4;
-  let t5;
-  return $[10] !== keyword || $[11] !== matches || $[12] !== onDismiss || $[13] !== onNavigateTo || $[14] !== onSelect || $[15] !== selectedIndex ? (t5 = {
+  }, $[7] = editor, $[8] = emojiPickerActor, $[9] = t3) : t3 = $[9];
+  const onSelect = t3;
+  let t4;
+  return $[10] !== keyword || $[11] !== matches || $[12] !== onDismiss || $[13] !== onNavigateTo || $[14] !== onSelect || $[15] !== selectedIndex ? (t4 = {
     keyword,
     matches,
     selectedIndex,
     onDismiss,
     onNavigateTo,
     onSelect
-  }, $[10] = keyword, $[11] = matches, $[12] = onDismiss, $[13] = onNavigateTo, $[14] = onSelect, $[15] = selectedIndex, $[16] = t5) : t5 = $[16], t5;
+  }, $[10] = keyword, $[11] = matches, $[12] = onDismiss, $[13] = onNavigateTo, $[14] = onSelect, $[15] = selectedIndex, $[16] = t4) : t4 = $[16], t4;
 }
 function _temp3(snapshot_1) {
   return snapshot_1.context.selectedIndex;