@portabletext/plugin-emoji-picker 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/plugin-emoji-picker",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Easily configure an Emoji Picker for the Portable Text Editor",
   "keywords": [
     "portabletext",
@@ -56,9 +56,9 @@
     "typescript": "5.9.3",
     "typescript-eslint": "^8.46.1",
     "vitest": "^3.2.4",
-    "racejar": "1.3.2",
+    "@portabletext/editor": "2.15.5",
     "@portabletext/schema": "1.2.0",
-    "@portabletext/editor": "2.15.5"
+    "racejar": "1.3.2"
   },
   "peerDependencies": {
     "@portabletext/editor": "^2.15.5",

package/src/create-match-emojis.ts

@@ -1,4 +1,3 @@
-import {emojis} from './emojis'
 import type {MatchEmojis} from './match-emojis'
 
 /**
@@ -43,13 +42,6 @@ export type EmojiMatch =
       endSlice: string
     }
 
-/**
- * Proposed, but not required, default implementation of `MatchEmojis`.
- *
- * @beta
- */
-export const matchEmojis = createMatchEmojis({emojis})
-
 /**
  * Proposed, but not required, function to create a `MatchEmojis` function.
  *

package/src/emoji-picker-machine.tsx

@@ -97,7 +97,7 @@ function createTriggerFoundEvent(payload: {
  * Listen for a partial keyword like ":joy"
  */
 const partialKeywordRule = defineInputRule({
-  on: /:[a-zA-Z-_0-9]+/,
+  on: /:[\S]+/,
   guard: ({event}) => {
     const lastMatch = event.matches.at(-1)
 
@@ -139,7 +139,7 @@ function createPartialKeywordFoundEvent(payload: {
  * Listen for a complete keyword like ":joy:"
  */
 const keywordRule = defineInputRule({
-  on: /:[a-zA-Z-_0-9]+:/,
+  on: /:[\S]+:/,
   guard: ({event}) => {
     const lastMatch = event.matches.at(-1)
 
@@ -675,9 +675,10 @@ export const emojiPickerMachine = setup({
           ? context.keyword.slice(1)
           : context.keyword
         // Strip trailing colon
-        rawKeyword = rawKeyword.endsWith(':')
-          ? rawKeyword.slice(0, -1)
-          : rawKeyword
+        rawKeyword =
+          rawKeyword.length > 1 && rawKeyword.endsWith(':')
+            ? rawKeyword.slice(0, -1)
+            : rawKeyword
 
         if (rawKeyword === undefined) {
           return []
@@ -837,7 +838,7 @@ export const emojiPickerMachine = setup({
     keywordAnchor: undefined,
     keywordFocus: undefined,
     matchEmojis: input.matchEmojis,
-    incompleteKeywordRegex: /:([a-zA-Z-_0-9:]*)$/,
+    incompleteKeywordRegex: /:[\S]*$/,
     matches: [],
     selectedIndex: 0,
   }),

package/src/emoji-picker.feature

@@ -32,14 +32,14 @@ Feature: Emoji Picker
   Scenario: Picking wrong direct hit
     When ":jo:" is typed
     Then the text is ":jo:"
-    And the keyword is ":jo:"
-    And the matches are "😂, 😹"
+    And the keyword is "jo"
+    And the matches are "😂,😹,🕹️"
 
   Scenario: Colon after wrong direct hit
     When ":jo:" is typed
     And ":" is typed
     Then the text is ":jo::"
-    And the keyword is ":jo::"
+    And the keyword is "jo:"
     And the matches are ""
 
   Scenario: Picking wrong direct hit after undoing direct hit
@@ -174,3 +174,25 @@ Feature: Emoji Picker
       | text          | position    | keyword | button                              | final text        |
       | "foo bar baz" | after "foo" | ":j"    | "{ArrowRight}"                      | "foo:j \|bar baz" |
       | "foo bar baz" | after "foo" | ":j"    | "{ArrowLeft}{ArrowLeft}{ArrowLeft}" | "fo\|o:j bar baz" |
+
+  Scenario: Dismissing by pressing Space
+    Given the text ""
+    When ":joy" is typed
+    Then the keyword is "joy"
+    When " " is typed
+    Then the keyword is ""
+
+  Scenario Outline: Allow special characters
+    Given the text <text>
+    When <inserted text> is inserted
+    Then the keyword is <keyword>
+    And the matches are <matches>
+
+    Examples:
+      | text | inserted text | keyword | matches        |
+      | ""   | ":joy!"       | "joy!"  | "🕹️"          |
+      | ""   | ":*"          | "*"     | "😘"           |
+      | ""   | ":!"          | "!"     | "🕹️,❗️,⁉️,‼️" |
+      | ""   | ":!!"         | "!!"    | "‼️"           |
+      | ""   | "::)"         | ":)"    | "😊"           |
+      | ""   | "::"          | ":"     | "😊"           |

package/src/emoji-picker.test.tsx

@@ -64,6 +64,12 @@ Feature({
 const emojis: Record<string, Array<string>> = {
   '😂': ['joy'],
   '😹': ['joy_cat'],
+  '🕹️': ['joy!stick'],
+  '😘': ['*'],
+  '❗️': ['!'],
+  '⁉️': ['!?'],
+  '‼️': ['!!'],
+  '😊': [':)'],
 }
 
 const matchEmojis = createMatchEmojis({emojis})
@@ -75,7 +81,7 @@ function EmojiPickerPlugin() {
     <>
       <div data-testid="keyword">{keyword}</div>
       <div data-testid="matches">
-        {matches.map((match) => match.emoji).join(', ')}
+        {matches.map((match) => match.emoji).join(',')}
       </div>
     </>
   )

package/src/use-emoji-picker.ts

@@ -9,14 +9,14 @@ import type {BaseEmojiMatch, MatchEmojis} from './match-emojis'
  */
 export type EmojiPicker<TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch> = {
   /**
-   * The matched keyword, including colons.
+   * The matched keyword.
    *
    * Can be used to display the keyword in the UI or conditionally render the
    * list of matches.
    *
    * @example
    * ```tsx
-   * if (keyword.length < 2) {
+   * if (keyword.length < 1) {
    *   return null
    * }
    * ```
@@ -145,10 +145,14 @@ export function useEmojiPicker<
   const emojiPickerActor = useActorRef(emojiPickerMachine, {
     input: {editor, matchEmojis: props.matchEmojis},
   })
-  const keyword = useSelector(
-    emojiPickerActor,
-    (snapshot) => snapshot.context.keyword,
-  )
+  const keyword = useSelector(emojiPickerActor, (snapshot) => {
+    const rawKeyword = snapshot.context.keyword.startsWith(':')
+      ? snapshot.context.keyword.slice(1)
+      : snapshot.context.keyword
+    return rawKeyword.length > 1 && rawKeyword.endsWith(':')
+      ? rawKeyword.slice(0, -1)
+      : rawKeyword
+  })
   const matches = useSelector(
     emojiPickerActor,
     (snapshot) => snapshot.context.matches as ReadonlyArray<TEmojiMatch>,