@portabletext/plugin-emoji-picker 0.0.15 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/plugin-emoji-picker",
-  "version": "0.0.15",
+  "version": "1.0.1",
   "description": "Easily configure an Emoji Picker for the Portable Text Editor",
   "keywords": [
     "portabletext",
@@ -36,53 +36,53 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "pkg-utils build --strict --check --clean",
-    "check:lint": "biome lint .",
-    "check:react-compiler": "eslint --cache .",
-    "check:types": "tsc",
-    "check:types:watch": "tsc --watch",
-    "clean": "del .turbo && del lib && del node_modules",
-    "dev": "pkg-utils watch",
-    "lint:fix": "biome lint --write .",
-    "prepublishOnly": "turbo run build",
-    "test": "vitest --run",
-    "test:browser": "vitest --run --project browser",
-    "test:browser:chromium": "vitest run --project \"browser (chromium)\"",
-    "test:browser:chromium:watch": "vitest watch --project \"browser (chromium)\"",
-    "test:browser:firefox": "vitest run --project \"browser (firefox)\"",
-    "test:browser:firefox:watch": "vitest watch --project \"browser (firefox)\"",
-    "test:browser:webkit": "vitest run --project \"browser (webkit)\"",
-    "test:browser:webkit:watch": "vitest watch --project \"browser (webkit)\""
-  },
   "dependencies": {
-    "@portabletext/keyboard-shortcuts": "workspace:^",
-    "@portabletext/plugin-input-rule": "workspace:~",
     "@xstate/react": "^6.0.0",
     "react-compiler-runtime": "1.0.0",
-    "xstate": "^5.23.0"
+    "xstate": "^5.23.0",
+    "@portabletext/keyboard-shortcuts": "^1.1.1",
+    "@portabletext/plugin-input-rule": "~0.4.0"
   },
   "devDependencies": {
-    "@portabletext/editor": "workspace:*",
-    "@portabletext/schema": "workspace:*",
     "@sanity/pkg-utils": "^8.1.4",
     "@types/react": "^19.2.0",
     "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser": "^3.2.4",
     "babel-plugin-react-compiler": "1.0.0",
     "eslint": "^9.38.0",
     "eslint-formatter-gha": "^1.6.0",
     "eslint-plugin-react-hooks": "7.0.0",
-    "racejar": "workspace:*",
     "react": "^19.2.0",
-    "typescript": "catalog:",
+    "typescript": "5.9.3",
     "typescript-eslint": "^8.46.1",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "racejar": "1.3.2",
+    "@portabletext/schema": "1.2.0",
+    "@portabletext/editor": "2.15.5"
   },
   "peerDependencies": {
-    "@portabletext/editor": "workspace:^2.15.5",
+    "@portabletext/editor": "^2.15.5",
     "react": "^19.1.1"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "pkg-utils build --strict --check --clean",
+    "check:lint": "biome lint .",
+    "check:react-compiler": "eslint --cache .",
+    "check:types": "tsc",
+    "check:types:watch": "tsc --watch",
+    "clean": "del .turbo && del lib && del node_modules",
+    "dev": "pkg-utils watch",
+    "lint:fix": "biome lint --write .",
+    "test": "vitest --run",
+    "test:browser": "vitest --run --project browser",
+    "test:browser:chromium": "vitest run --project \"browser (chromium)\"",
+    "test:browser:chromium:watch": "vitest watch --project \"browser (chromium)\"",
+    "test:browser:firefox": "vitest run --project \"browser (firefox)\"",
+    "test:browser:firefox:watch": "vitest watch --project \"browser (firefox)\"",
+    "test:browser:webkit": "vitest run --project \"browser (webkit)\"",
+    "test:browser:webkit:watch": "vitest watch --project \"browser (webkit)\""
   }
-}
+}

package/src/create-match-emojis.ts

@@ -0,0 +1,113 @@
+import {emojis} from './emojis'
+import type {MatchEmojis} from './match-emojis'
+
+/**
+ * Proposed, but not required type, to represent an emoji match.
+ *
+ * @example
+ * ```tsx
+ * {
+ *   type: 'exact',
+ *   key: '😂-joy',
+ *   emoji: '😂',
+ *   keyword: 'joy',
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * {
+ *   type: 'partial',
+ *   key: '😹-joy-_cat',
+ *   emoji: '😹',
+ *   keyword: 'joy',
+ *   startSlice: '',
+ *   endSlice: '_cat',
+ * }
+ * ```
+ *
+ * @beta
+ */
+export type EmojiMatch =
+  | {
+      type: 'exact'
+      key: string
+      emoji: string
+      keyword: string
+    }
+  | {
+      type: 'partial'
+      key: string
+      emoji: string
+      keyword: string
+      startSlice: string
+      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.
+ *
+ * @example
+ * ```ts
+ * const matchEmojis = createMatchEmojis({
+ *   emojis: {
+ *     '😂': ['joy'],
+ *     '😹': ['joy_cat'],
+ *   },
+ * })
+ * ```
+ *
+ * @beta
+ */
+export function createMatchEmojis(config: {
+  emojis: Record<string, ReadonlyArray<string>>
+}): MatchEmojis<EmojiMatch> {
+  return ({keyword}: {keyword: string}) => {
+    const foundEmojis: Array<EmojiMatch> = []
+
+    if (keyword.length < 1) {
+      return foundEmojis
+    }
+
+    for (const emoji in config.emojis) {
+      const emojiKeywords = config.emojis[emoji] ?? []
+
+      for (const emojiKeyword of emojiKeywords) {
+        const keywordIndex = emojiKeyword.indexOf(keyword)
+
+        if (keywordIndex === -1) {
+          continue
+        }
+
+        if (emojiKeyword === keyword) {
+          foundEmojis.push({
+            type: 'exact',
+            key: `${emoji}-${keyword}`,
+            emoji,
+            keyword,
+          })
+        } else {
+          const start = emojiKeyword.slice(0, keywordIndex)
+          const end = emojiKeyword.slice(keywordIndex + keyword.length)
+
+          foundEmojis.push({
+            type: 'partial',
+            key: `${emoji}-${start}${keyword}${end}`,
+            emoji,
+            keyword,
+            startSlice: start,
+            endSlice: end,
+          })
+        }
+      }
+    }
+
+    return foundEmojis
+  }
+}

package/src/emoji-picker-machine.tsx

@@ -28,7 +28,7 @@ import {
   type AnyEventObject,
   type CallbackLogicFunction,
 } from 'xstate'
-import type {EmojiMatch, MatchEmojis} from './match-emojis'
+import type {BaseEmojiMatch, MatchEmojis} from './match-emojis'
 
 /*******************
  * Keyboard shortcuts
@@ -175,10 +175,10 @@ function createKeywordFoundEvent(payload: {
   } as const
 }
 
-type EmojiPickerContext<TEmojiMatch = EmojiMatch> = {
+type EmojiPickerContext = {
   editor: Editor
-  matches: ReadonlyArray<TEmojiMatch>
-  matchEmojis: MatchEmojis<TEmojiMatch>
+  matches: ReadonlyArray<BaseEmojiMatch>
+  matchEmojis: MatchEmojis<BaseEmojiMatch>
   selectedIndex: number
   keywordAnchor:
     | {
@@ -192,15 +192,8 @@ type EmojiPickerContext<TEmojiMatch = EmojiMatch> = {
 }
 
 type EmojiPickerEvent =
-  | {
-      type: 'colon inserted'
-      keyword: string
-      keywordAnchor: {
-        point: EditorSelectionPoint
-        blockOffset: BlockOffset
-      }
-      keywordFocus: BlockOffset
-    }
+  | TriggerFoundEvent
+  | PartialKeywordFoundEvent
   | KeywordFoundEvent
   | {
       type: 'selection changed'
@@ -236,7 +229,7 @@ type EmojiPickerEvent =
       type: 'insert selected match'
     }
 
-const colonListenerCallback: CallbackLogicFunction<
+const triggerListenerCallback: CallbackLogicFunction<
   AnyEventObject,
   EmojiPickerEvent,
   {editor: Editor}
@@ -268,10 +261,7 @@ const colonListenerCallback: CallbackLogicFunction<
         actions: [
           ({event}) => [
             effect(() => {
-              sendBack({
-                ...event,
-                type: 'colon inserted',
-              })
+              sendBack(event)
             }),
           ],
         ],
@@ -283,10 +273,7 @@ const colonListenerCallback: CallbackLogicFunction<
         actions: [
           ({event}) => [
             effect(() => {
-              sendBack({
-                ...event,
-                type: 'colon inserted',
-              })
+              sendBack(event)
             }),
           ],
         ],
@@ -363,76 +350,34 @@ const arrowListenerCallback: CallbackLogicFunction<
 }
 
 const emojiInsertListener: CallbackLogicFunction<
-  {type: 'context changed'; context: EmojiPickerContext},
+  AnyEventObject,
   EmojiPickerEvent,
   {context: EmojiPickerContext}
-> = ({sendBack, input, receive}) => {
-  let context = input.context
-
-  receive((event) => {
-    context = event.context
-  })
-
-  const unregisterBehaviors = [
-    input.context.editor.registerBehavior({
-      behavior: defineBehavior<{
-        emoji: string
-        anchor: BlockOffset
-        focus: BlockOffset
-      }>({
-        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 false
-          }
-
-          const anchor = context.keywordAnchor?.blockOffset
-          const focus = context.keywordFocus
-          const match = context.matches[context.selectedIndex]
-
-          return match && match.type === 'exact' && anchor && focus
-            ? {anchor, focus, emoji: match.emoji}
-            : false
-        },
-        actions: [
-          (_, {anchor, focus, emoji}) => [
-            raise({
-              type: 'custom.insert emoji',
-              emoji,
-              anchor,
-              focus,
-            }),
-          ],
+> = ({sendBack, input}) => {
+  return input.context.editor.registerBehavior({
+    behavior: defineBehavior<{
+      emoji: string
+      anchor: BlockOffset
+      focus: BlockOffset
+    }>({
+      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,
+          }),
         ],
-      }),
+      ],
     }),
-  ]
-
-  return () => {
-    for (const unregister of unregisterBehaviors) {
-      unregister()
-    }
-  }
+  })
 }
 
 const submitListenerCallback: CallbackLogicFunction<
@@ -493,6 +438,31 @@ const submitListenerCallback: CallbackLogicFunction<
         ],
       }),
     }),
+    input.context.editor.registerBehavior({
+      behavior: defineInputRuleBehavior({
+        rules: [keywordRule],
+      }),
+    }),
+    input.context.editor.registerBehavior({
+      behavior: defineBehavior<
+        KeywordFoundEvent,
+        KeywordFoundEvent['type'],
+        {
+          anchor: BlockOffset
+          focus: BlockOffset
+          emoji: string
+        }
+      >({
+        on: 'custom.keyword found',
+        actions: [
+          ({event}) => [
+            effect(() => {
+              sendBack(event)
+            }),
+          ],
+        ],
+      }),
+    }),
   ]
 
   return () => {
@@ -603,7 +573,7 @@ export const emojiPickerMachine = setup({
     '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),
@@ -612,7 +582,8 @@ export const emojiPickerMachine = setup({
     'init keyword': assign({
       keyword: ({context, event}) => {
         if (
-          event.type !== 'colon inserted' &&
+          event.type !== 'custom.trigger found' &&
+          event.type !== 'custom.partial keyword found' &&
           event.type !== 'custom.keyword found'
         ) {
           return context.keyword
@@ -624,7 +595,8 @@ export const emojiPickerMachine = setup({
     'set keyword anchor': assign({
       keywordAnchor: ({context, event}) => {
         if (
-          event.type !== 'colon inserted' &&
+          event.type !== 'custom.trigger found' &&
+          event.type !== 'custom.partial keyword found' &&
           event.type !== 'custom.keyword found'
         ) {
           return context.keywordAnchor
@@ -636,7 +608,8 @@ export const emojiPickerMachine = setup({
     'set keyword focus': assign({
       keywordFocus: ({context, event}) => {
         if (
-          event.type !== 'colon inserted' &&
+          event.type !== 'custom.trigger found' &&
+          event.type !== 'custom.partial keyword found' &&
           event.type !== 'custom.keyword found'
         ) {
           return context.keywordFocus
@@ -753,13 +726,17 @@ export const emojiPickerMachine = setup({
         context,
       }),
     ),
-    'insert selected match': ({context}) => {
+    'insert selected match': ({context, event}) => {
       const match = context.matches[context.selectedIndex]
 
       if (!match || !context.keywordAnchor || !context.keywordFocus) {
         return
       }
 
+      if (event.type === 'custom.keyword found' && match.type !== 'exact') {
+        return
+      }
+
       context.editor.send({
         type: 'custom.insert emoji',
         emoji: match.emoji,
@@ -876,11 +853,15 @@ export const emojiPickerMachine = setup({
     idle: {
       entry: ['reset'],
       invoke: {
-        src: 'colon listener',
+        src: 'trigger listener',
         input: ({context}) => ({editor: context.editor}),
       },
       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'],
         },
@@ -892,6 +873,8 @@ export const emojiPickerMachine = setup({
             'update matches',
             'insert selected match',
           ],
+          target: 'idle',
+          reenter: true,
         },
       },
     },
@@ -916,6 +899,15 @@ export const emojiPickerMachine = setup({
         },
       ],
       on: {
+        'custom.keyword found': {
+          actions: [
+            'set keyword anchor',
+            'set keyword focus',
+            'init keyword',
+            'update matches',
+            'insert selected match',
+          ],
+        },
         'insert.text': [
           {
             guard: 'unexpected text insertion',
@@ -944,7 +936,6 @@ export const emojiPickerMachine = setup({
               'update keyword',
               'update matches',
               'reset selected index',
-              'update emoji insert listener context',
               'update submit listener context',
             ],
           },
@@ -980,23 +971,17 @@ export const emojiPickerMachine = setup({
             'navigate down': {
               actions: [
                 'increment selected index',
-                'update emoji insert listener context',
                 'update submit listener context',
               ],
             },
             'navigate up': {
               actions: [
                 'decrement selected index',
-                'update emoji insert listener context',
                 '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'],

package/src/emoji-picker.feature

@@ -3,9 +3,58 @@ Feature: Emoji Picker
   Background:
     Given the editor is focused
 
-  Scenario: Picking a direct hit
+  Scenario Outline: Picking a direct hit
+    When <initial text> is inserted
+    When <inserted text> is inserted
+    Then the text is <final text>
+
+    Examples:
+      | initial text | inserted text | final text |
+      | ""           | ":joy:"       | "😂"       |
+      | ":jo"        | "y:"          | "😂"       |
+      | ":joy"       | ":"           | "😂"       |
+
+  Scenario: Undo after direct hit
     When ":joy:" is typed
     Then the text is "😂"
+    When undo is performed
+    Then the text is ":joy:"
+
+  Scenario: Picking direct hit after undo
+    When ":joy:" is typed
+    And undo is performed
+    And "{Backspace}" is pressed
+    And ":" is typed
+    Then the text is "😂"
+    And the keyword is ""
+    And the matches are ""
+
+  Scenario: Picking wrong direct hit
+    When ":jo:" is typed
+    Then the text is ":jo:"
+    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 matches are ""
+
+  Scenario: Picking wrong direct hit after undoing direct hit
+    When ":joy:" is typed
+    And undo is performed
+    And "{Backspace}{Backspace}" is pressed
+    And ":" is typed
+    Then the text is ":jo:"
+    And the keyword is ""
+    And the matches are ""
+
+  Scenario: Two consecutive direct hits
+    When ":joy:" is typed
+    And ":joy_cat:" is typed
+    Then the text is "😂😹"
 
   Scenario: Picking the closest hit with Enter
     When ":joy" is typed

package/src/emoji-picker.test.tsx

@@ -5,15 +5,22 @@ import {
   type Context,
 } from '@portabletext/editor/test/vitest'
 import {defineSchema} from '@portabletext/schema'
-import {Before} from 'racejar'
+import {page, type Locator} from '@vitest/browser/context'
+import {Before, Then} from 'racejar'
 import {Feature} from 'racejar/vitest'
+import {expect, vi} from 'vitest'
+import {createMatchEmojis} from './create-match-emojis'
 import emojiPickerFeature from './emoji-picker.feature?raw'
-import {createMatchEmojis} from './match-emojis'
 import {useEmojiPicker} from './use-emoji-picker'
 
+type EmojiPickerTestContext = Context & {
+  keywordLocator: Locator
+  matchesLocator: Locator
+}
+
 Feature({
   hooks: [
-    Before(async (context: Context) => {
+    Before(async (context: EmojiPickerTestContext) => {
       const {editor, locator} = await createTestEditor({
         children: <EmojiPickerPlugin />,
         schemaDefinition: defineSchema({
@@ -24,10 +31,33 @@ Feature({
 
       context.locator = locator
       context.editor = editor
+      context.keywordLocator = page.getByTestId('keyword')
+      context.matchesLocator = page.getByTestId('matches')
+
+      await vi.waitFor(() =>
+        expect.element(context.keywordLocator).toBeInTheDocument(),
+      )
+      await vi.waitFor(() =>
+        expect.element(context.matchesLocator).toBeInTheDocument(),
+      )
     }),
   ],
   featureText: emojiPickerFeature,
-  stepDefinitions,
+  stepDefinitions: [
+    ...stepDefinitions,
+    Then(
+      'the keyword is {string}',
+      (context: EmojiPickerTestContext, keyword: string) => {
+        expect(context.keywordLocator.element().textContent).toEqual(keyword)
+      },
+    ),
+    Then(
+      'the matches are {string}',
+      (context: EmojiPickerTestContext, matches: string) => {
+        expect(context.matchesLocator.element().textContent).toEqual(matches)
+      },
+    ),
+  ],
   parameterTypes,
 })
 
@@ -39,7 +69,14 @@ const emojis: Record<string, Array<string>> = {
 const matchEmojis = createMatchEmojis({emojis})
 
 function EmojiPickerPlugin() {
-  useEmojiPicker({matchEmojis})
+  const {keyword, matches} = useEmojiPicker({matchEmojis})
 
-  return null
+  return (
+    <>
+      <div data-testid="keyword">{keyword}</div>
+      <div data-testid="matches">
+        {matches.map((match) => match.emoji).join(', ')}
+      </div>
+    </>
+  )
 }

package/src/emojis.ts

@@ -1,6 +1,3 @@
-/**
- * @beta
- */
 export const emojis: Record<string, Array<string>> = {
   '😀': [
     'grinning_face',

package/src/index.ts

@@ -1,2 +1,3 @@
+export * from './create-match-emojis'
 export * from './match-emojis'
 export * from './use-emoji-picker'