@portabletext/plugin-emoji-picker 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/plugin-emoji-picker",
-  "version": "1.0.2",
+  "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",
+    "@portabletext/editor": "2.15.5",
     "@portabletext/schema": "1.2.0",
-    "racejar": "1.3.2",
-    "@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

@@ -33,7 +33,7 @@ Feature: Emoji Picker
     When ":jo:" is typed
     Then the text is ":jo:"
     And the keyword is "jo"
-    And the matches are "😂, 😹"
+    And the matches are "😂,😹,🕹️"
 
   Scenario: Colon after wrong direct hit
     When ":jo:" is typed
@@ -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

@@ -149,7 +149,9 @@ export function useEmojiPicker<
     const rawKeyword = snapshot.context.keyword.startsWith(':')
       ? snapshot.context.keyword.slice(1)
       : snapshot.context.keyword
-    return rawKeyword.endsWith(':') ? rawKeyword.slice(0, -1) : rawKeyword
+    return rawKeyword.length > 1 && rawKeyword.endsWith(':')
+      ? rawKeyword.slice(0, -1)
+      : rawKeyword
   })
   const matches = useSelector(
     emojiPickerActor,