@portabletext/plugin-emoji-picker 3.0.22 → 3.0.24

package/src/emoji-picker.feature

@@ -1,264 +0,0 @@
-Feature: Emoji Picker
-
-  Scenario Outline: Picking a direct hit
-    When the editor is focused
-    And <initial text> is inserted
-    And <inserted text> is inserted
-    Then the text is <final text>
-
-    Examples:
-      | initial text | inserted text | final text |
-      | ""           | ":joy:"       | "😂"       |
-      | ":jo"        | "y:"          | "😂"       |
-      | ":joy"       | ":"           | "😂"       |
-
-  Scenario Outline: Is only triggered when an initial colon is typed
-    Given the text <text>
-    When the caret is put <position>
-    And <inserted text> is inserted
-    Then the text is <final text>
-    And the keyword is <keyword>
-
-    Examples:
-      | text   | position     | inserted text | final text | keyword |
-      | ""     | after ""     | ":j"          | ":j"       | "j"     |
-      | ":"    | after ":"    | "j"           | ":j"       | ""      |
-      | ":j"   | after ":j"   | "o"           | ":jo"      | ""      |
-      | ":jo"  | after ":jo"  | ":"           | ":jo:"     | ""      |
-      | ":joy" | after ":joy" | ":"           | ":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 ":joy:"
-    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
-    And "{Enter}" is pressed
-    Then the text is "😂"
-
-  Scenario: Picking the closest hit with Tab
-    When ":joy" is typed
-    And "{Tab}" is pressed
-    Then the text is "😂"
-
-  Scenario: Navigating down the list
-    When ":joy" is typed
-    And "{ArrowDown}" is pressed
-    And "{Enter}" is pressed
-    Then the text is "😹"
-
-  Scenario: Aborting on Escape
-    When ":joy" is typed
-    And "{Escape}" is pressed
-    And "{Enter}" is pressed
-    Then the text is ":joy|"
-
-  Scenario: Aborting and forwarding Enter if there is no keyword
-    When ":" is typed
-    And "{Enter}" is pressed
-    Then the text is ":|"
-
-  Scenario: Aborting Enter if there are no matches
-    When ":asdf" is typed
-    And "{Enter}" is pressed
-    Then the text is ":asdf"
-    And the keyword is ""
-
-  Scenario: Backspacing to narrow search
-    When ":joy" is typed
-    And "{Backspace}" is pressed
-    And "{Enter}" is pressed
-    Then the text is "😂"
-
-  Scenario Outline: Inserting longer trigger text
-    Given the text <text>
-    When <inserted text> is inserted
-    And <new text> is typed
-    Then the text is <final text>
-
-    Examples:
-      | text | inserted text | new text | final text |
-      | ""   | ":"           | "joy:"   | "😂"       |
-      | ""   | ":j"          | "oy:"    | "😂"       |
-      | ""   | ":joy"        | ":"      | "😂"       |
-      | ""   | ":joy:"       | ":"      | "😂:"      |
-
-  Scenario Outline: Matching inside decorator
-    Given the text <text>
-    And "strong" around <decorated>
-    When the caret is put <position>
-    And <keyword> is typed
-    Then the text is <final text>
-
-    Examples:
-      | text          | decorated | position        | keyword | final text        |
-      | "foo bar baz" | "bar"     | before "ar baz" | ":joy:" | "foo ,b😂ar, baz" |
-      | "foo bar baz" | "bar"     | before "r baz"  | ":joy:" | "foo ,ba😂r, baz" |
-
-  Scenario Outline: Triggering at the edge of decorator
-    Given the text "foo bar baz"
-    And "strong" around "bar"
-    When the caret is put <position>
-    And ":j" is typed
-    Then the keyword is "j"
-
-    Examples:
-      | position      |
-      | after "foo "  |
-      | before "bar"  |
-      | after "bar"   |
-      | before " baz" |
-
-  Scenario Outline: Matching at the edge of decorator
-    Given the text "foo bar baz"
-    And "strong" around "bar"
-    When the caret is put <position>
-    And ":joy:" is typed
-    Then the text is <final text>
-
-    Examples:
-      | position      | final text        |
-      | after "foo "  | "foo 😂,bar, baz" |
-      | before "bar"  | "foo 😂,bar, baz" |
-      | after "bar"   | "foo ,bar😂, baz" |
-      | before " baz" | "foo ,bar😂, baz" |
-
-  Scenario Outline: Matching inside annotation
-    Given the text <text>
-    And a "link" "l1" around <annotated>
-    When the caret is put <position>
-    And <keyword> is typed
-    Then the text is <final text>
-
-    Examples:
-      | text          | annotated | position        | keyword | final text        |
-      | "foo bar baz" | "bar"     | before "ar baz" | ":joy:" | "foo ,b😂ar, baz" |
-      | "foo bar baz" | "bar"     | before "r baz"  | ":joy:" | "foo ,ba😂r, baz" |
-
-  Scenario Outline: Triggering at the edge of an annotation
-    Given the text "foo bar baz"
-    And a "link" "l1" around "bar"
-    When the caret is put <position>
-    And ":j" is typed
-    Then the keyword is "j"
-
-    Examples:
-      | position      |
-      | after "foo "  |
-      | before "bar"  |
-      | after "bar"   |
-      | before " baz" |
-
-  Scenario Outline: Matching at the edge of an annotation
-    Given the text "foo bar baz"
-    And a "link" "l1" around "bar"
-    When the caret is put <position>
-    And ":joy:" is typed
-    Then the text is <final text>
-
-    Examples:
-      | position      | final text        |
-      | after "foo "  | "foo 😂,bar, baz" |
-      | before "bar"  | "foo 😂,bar, baz" |
-      | after "bar"   | "foo ,bar,😂 baz" |
-      | before " baz" | "foo ,bar,😂 baz" |
-
-  Scenario Outline: Typing before the colon dismisses the emoji picker
-    Given the text <text>
-    When <inserted text> is typed
-    And <button> is pressed
-    And <new text> is typed
-    Then the keyword is ""
-
-    Examples:
-      | text | inserted text | button                   | new text |
-      | ""   | ":j"          | "{ArrowLeft}{ArrowLeft}" | "f"      |
-      | "fo" | ":j"          | "{ArrowLeft}{ArrowLeft}" | "o"      |
-      | ""   | ":j"          | "{ArrowLeft}{ArrowLeft}" | ":"      |
-
-  Scenario Outline: Navigating away from the keyword
-    Given the text <text>
-    When the caret is put <position>
-    And <keyword> is typed
-    And <button> is pressed
-    And "{Enter}" is pressed
-    Then the text is <final text>
-
-    Examples:
-      | 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!"  | "🕹️"          |
-      | ""   | ":*"          | "*"     | "😘"           |
-      | ""   | ":!"          | "!"     | "🕹️,❗️,⁉️,‼️" |
-      | ""   | ":!!"         | "!!"    | "‼️"           |
-      | ""   | "::)"         | ":)"    | "😊"           |
-      | ""   | "::"          | ":"     | "😊"           |
-
-  Scenario: Narrowing keyword by deletion
-    Given the text "foo"
-    When the caret is put after "fo"
-    And <inserted text> is inserted
-    And "{ArrowLeft}" is pressed
-    And "{Backspace}" is pressed
-    Then the text is <final text>
-    And the keyword is <keyword>
-
-    Examples:
-      | inserted text | final text | keyword |
-      | ":joy"        | "fo:jyo"   | "jy"    |
-      | ":j👻y"       | "fo:jyo"   | "jy"    |

package/src/emoji-picker.test.tsx

@@ -1,88 +0,0 @@
-import {parameterTypes} from '@portabletext/editor/test'
-import {
-  createTestEditor,
-  stepDefinitions,
-  type Context,
-} from '@portabletext/editor/test/vitest'
-import {defineSchema} from '@portabletext/schema'
-import {Before, Then} from 'racejar'
-import {Feature} from 'racejar/vitest'
-import {expect, vi} from 'vitest'
-import {page, type Locator} from 'vitest/browser'
-import {createMatchEmojis} from './create-match-emojis'
-import emojiPickerFeature from './emoji-picker.feature?raw'
-import {useEmojiPicker} from './use-emoji-picker'
-
-type EmojiPickerTestContext = Context & {
-  keywordLocator: Locator
-  matchesLocator: Locator
-}
-
-Feature({
-  hooks: [
-    Before(async (context: EmojiPickerTestContext) => {
-      const {editor, locator} = await createTestEditor({
-        children: <EmojiPickerPlugin />,
-        schemaDefinition: defineSchema({
-          decorators: [{name: 'strong'}],
-          annotations: [{name: 'link'}],
-        }),
-      })
-
-      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,
-    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,
-})
-
-const emojis: Record<string, Array<string>> = {
-  '😂': ['joy'],
-  '😹': ['joy_cat'],
-  '🕹️': ['joy!stick'],
-  '😘': ['*'],
-  '❗️': ['!'],
-  '⁉️': ['!?'],
-  '‼️': ['!!'],
-  '😊': [':)'],
-}
-
-const matchEmojis = createMatchEmojis({emojis})
-
-function EmojiPickerPlugin() {
-  const {keyword, matches} = useEmojiPicker({matchEmojis})
-
-  return (
-    <>
-      <div data-testid="keyword">{keyword}</div>
-      <div data-testid="matches">
-        {matches.map((match) => match.emoji).join(',')}
-      </div>
-    </>
-  )
-}

package/src/global.d.ts

@@ -1,4 +0,0 @@
-declare module '*.feature?raw' {
-  const content: string
-  export default content
-}

package/src/index.ts

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

package/src/match-emojis.ts

@@ -1,22 +0,0 @@
-/**
- * The base type representing an emoji match.
- *
- * @beta
- */
-export type BaseEmojiMatch =
-  | {
-      type: 'exact'
-      emoji: string
-    }
-  | {
-      type: 'partial'
-      emoji: string
-    }
-
-/**
- * A function that returns an array of emoji matches for a given keyword.
- *
- * @beta
- */
-export type MatchEmojis<TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch> =
-  (query: {keyword: string}) => ReadonlyArray<TEmojiMatch>

package/src/use-emoji-picker.ts

@@ -1,187 +0,0 @@
-import {useEditor} from '@portabletext/editor'
-import {useActorRef, useSelector} from '@xstate/react'
-import {useCallback} from 'react'
-import {emojiPickerMachine} from './emoji-picker-machine'
-import type {BaseEmojiMatch, MatchEmojis} from './match-emojis'
-
-/**
- * @beta
- */
-export type EmojiPicker<TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch> = {
-  /**
-   * 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 < 1) {
-   *   return null
-   * }
-   * ```
-   */
-  keyword: string
-
-  /**
-   * Emoji matches found for the current keyword.
-   *
-   * Can be used to display the matches in a list.
-   */
-  matches: ReadonlyArray<TEmojiMatch>
-
-  /**
-   * The index of the selected match.
-   *
-   * Can be used to highlight the selected match in the list.
-   *
-   * @example
-   * ```tsx
-   * <EmojiListItem
-   *   key={match.key}
-   *   match={match}
-   *   selected={selectedIndex === index}
-   * />
-   * ```
-   */
-  selectedIndex: number
-
-  /**
-   * Navigate to a specific match by index.
-   *
-   * Can be used to control the `selectedIndex`. For example, using
-   * `onMouseEnter`.
-   *
-   * @example
-   * ```tsx
-   * <EmojiListItem
-   *   key={match.key}
-   *   match={match}
-   *   selected={selectedIndex === index}
-   *   onMouseEnter={() => {onNavigateTo(index)}}
-   * />
-   * ```
-   */
-  onNavigateTo: (index: number) => void
-
-  /**
-   * Select the current match.
-   *
-   * Can be used to insert the currently selected match.
-   *
-   *
-   * @example
-   * ```tsx
-   * <EmojiListItem
-   *   key={match.key}
-   *   match={match}
-   *   selected={selectedIndex === index}
-   *   onMouseEnter={() => {onNavigateTo(index)}}
-   *   onSelect={() => {onSelect()}}
-   * />
-   * ```
-   *
-   * Note: The currently selected match is automatically inserted on Enter or
-   * Tab.
-   */
-  onSelect: () => void
-
-  /**
-   * Dismiss the emoji picker. Can be used to let the user dismiss the picker
-   * by clicking a button.
-   *
-   * @example
-   * ```tsx
-   * {matches.length === 0 ? (
-   *   <Button onPress={onDismiss}>Dismiss</Button>
-   * ) : <EmojiListBox {...props} />}
-   * ```
-   *
-   * Note: The emoji picker is automatically dismissed on Escape.
-   */
-  onDismiss: () => void
-}
-
-/**
- * @beta
- */
-export type EmojiPickerProps<
-  TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch,
-> = {
-  matchEmojis: MatchEmojis<TEmojiMatch>
-}
-
-/**
- * Handles the state and logic needed to create an emoji picker.
- *
- * The `matchEmojis` function is generic and can return any shape of emoji
- * match required for the emoji picker.
- *
- * However, the default implementation of `matchEmojis` returns an array of
- * `EmojiMatch` objects and can be created using the `createMatchEmojis`
- * function.
- *
- * @example
- *
- * ```tsx
- * const matchEmojis = createMatchEmojis({emojis: {
- *   '😂': ['joy'],
- *   '😹': ['joy_cat'],
- * }})
- *
- * const {keyword, matches, selectedIndex, onDismiss, onNavigateTo, onSelect} =
- *   useEmojiPicker({matchEmojis})
- * ```
- *
- *  Note: This hook is not concerned with the UI, how the emoji picker is
- * rendered or positioned in the document.
- *
- * @beta
- */
-export function useEmojiPicker<
-  TEmojiMatch extends BaseEmojiMatch = BaseEmojiMatch,
->(props: EmojiPickerProps<TEmojiMatch>): EmojiPicker<TEmojiMatch> {
-  const editor = useEditor()
-  const emojiPickerActor = useActorRef(emojiPickerMachine, {
-    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.length > 1 && rawKeyword.endsWith(':')
-      ? rawKeyword.slice(0, -1)
-      : rawKeyword
-  })
-  const matches = useSelector(
-    emojiPickerActor,
-    (snapshot) => snapshot.context.matches as ReadonlyArray<TEmojiMatch>,
-  )
-  const selectedIndex = useSelector(
-    emojiPickerActor,
-    (snapshot) => snapshot.context.selectedIndex,
-  )
-
-  const onDismiss = useCallback(() => {
-    emojiPickerActor.send({type: 'dismiss'})
-  }, [emojiPickerActor])
-  const onNavigateTo = useCallback(
-    (index: number) => {
-      emojiPickerActor.send({type: 'navigate to', index})
-    },
-    [emojiPickerActor],
-  )
-  const onSelect = useCallback(() => {
-    emojiPickerActor.send({type: 'insert selected match'})
-    editor.send({type: 'focus'})
-  }, [emojiPickerActor, editor])
-
-  return {
-    keyword,
-    matches,
-    selectedIndex,
-    onDismiss,
-    onNavigateTo,
-    onSelect,
-  }
-}