@portabletext/plugin-emoji-picker 1.0.0 → 1.0.2

package/package.json

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

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:
     | {

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 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

package/src/emoji-picker.test.tsx

@@ -9,8 +9,8 @@ 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 & {

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'

package/src/match-emojis.ts

@@ -1,45 +1,16 @@
-import {emojis} from './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',
- * }
- * ```
+ * The base type representing an emoji match.
  *
  * @beta
  */
-export type EmojiMatch =
+export type BaseEmojiMatch =
   | {
       type: 'exact'
-      key: string
       emoji: string
-      keyword: string
     }
   | {
       type: 'partial'
-      key: string
       emoji: string
-      keyword: string
-      startSlice: string
-      endSlice: string
     }
 
 /**
@@ -47,75 +18,5 @@ export type EmojiMatch =
  *
  * @beta
  */
-export type MatchEmojis<TEmojiMatch = EmojiMatch> = (query: {
-  keyword: string
-}) => ReadonlyArray<TEmojiMatch>
-
-/**
- * Proposed, but not required, default implementation of `MatchEmojis`.
- *
- * @beta
- */
-export const matchEmojis: 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 {
-  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
-  }
-}
+export type MatchEmojis<TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch> =
+  (query: {keyword: string}) => ReadonlyArray<TEmojiMatch>

package/src/use-emoji-picker.ts

@@ -2,21 +2,21 @@ import {useEditor} from '@portabletext/editor'
 import {useActorRef, useSelector} from '@xstate/react'
 import {useCallback} from 'react'
 import {emojiPickerMachine} from './emoji-picker-machine'
-import type {EmojiMatch, MatchEmojis} from './match-emojis'
+import type {BaseEmojiMatch, MatchEmojis} from './match-emojis'
 
 /**
  * @beta
  */
-export type EmojiPicker<TEmojiMatch = EmojiMatch> = {
+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
    * }
    * ```
@@ -105,7 +105,9 @@ export type EmojiPicker<TEmojiMatch = EmojiMatch> = {
 /**
  * @beta
  */
-export type EmojiPickerProps<TEmojiMatch = EmojiMatch> = {
+export type EmojiPickerProps<
+  TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch,
+> = {
   matchEmojis: MatchEmojis<TEmojiMatch>
 }
 
@@ -136,17 +138,19 @@ export type EmojiPickerProps<TEmojiMatch = EmojiMatch> = {
  *
  * @beta
  */
-export function useEmojiPicker<TEmojiMatch = EmojiMatch>(
-  props: EmojiPickerProps<TEmojiMatch>,
-): EmojiPicker<TEmojiMatch> {
+export function useEmojiPicker<
+  TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch,
+>(props: EmojiPickerProps<TEmojiMatch>): EmojiPicker<TEmojiMatch> {
   const editor = useEditor()
   const emojiPickerActor = useActorRef(emojiPickerMachine, {
-    input: {editor, matchEmojis: props.matchEmojis as MatchEmojis<EmojiMatch>},
+    input: {editor, matchEmojis: props.matchEmojis},
+  })
+  const keyword = useSelector(emojiPickerActor, (snapshot) => {
+    const rawKeyword = snapshot.context.keyword.startsWith(':')
+      ? snapshot.context.keyword.slice(1)
+      : snapshot.context.keyword
+    return rawKeyword.endsWith(':') ? rawKeyword.slice(0, -1) : rawKeyword
   })
-  const keyword = useSelector(
-    emojiPickerActor,
-    (snapshot) => snapshot.context.keyword,
-  )
   const matches = useSelector(
     emojiPickerActor,
     (snapshot) => snapshot.context.matches as ReadonlyArray<TEmojiMatch>,