@portabletext/plugin-emoji-picker 1.0.3 → 1.0.5

package/src/emoji-picker.feature

@@ -14,6 +14,21 @@ Feature: Emoji Picker
       | ":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 "😂"
@@ -25,7 +40,7 @@ Feature: Emoji Picker
     And undo is performed
     And "{Backspace}" is pressed
     And ":" is typed
-    Then the text is "😂"
+    Then the text is ":joy:"
     And the keyword is ""
     And the matches are ""
 
@@ -109,20 +124,34 @@ Feature: Emoji Picker
       | "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 <text>
-    And "strong" around <decorated>
+    Given the text "foo bar baz"
+    And "strong" around "bar"
     When the caret is put <position>
-    And <keyword> is typed
+    And ":joy:" is typed
     Then the text is <final text>
 
     Examples:
-      | text          | decorated | position     | keyword | final text        |
-      | "foo bar baz" | "bar"     | after "foo " | ":joy:" | "foo 😂,bar, baz" |
-      # | "foo bar baz" | "bar"     | before "bar"  | ":joy:" | "foo 😂,bar, baz" |
-      | "foo bar baz" | "bar"     | after "bar"  | ":joy:" | "foo ,bar😂, baz" |
+      | position      | final text        |
+      | after "foo "  | "foo 😂,bar, baz" |
+      | before "bar"  | "foo 😂,bar, baz" |
+      | after "bar"   | "foo ,bar😂, baz" |
+      | before " baz" | "foo ,bar😂, baz" |
 
-  # | "foo bar baz" | "bar"     | before " baz" | ":joy:" | "foo ,bar😂, baz" |
   Scenario Outline: Matching inside annotation
     Given the text <text>
     And a "link" "l1" around <annotated>
@@ -135,32 +164,46 @@ Feature: Emoji Picker
       | "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 <text>
-    And a "link" "l1" around <annotated>
+    Given the text "foo bar baz"
+    And a "link" "l1" around "bar"
     When the caret is put <position>
-    And <keyword> is typed
+    And ":joy:" is typed
     Then the text is <final text>
 
     Examples:
-      | text          | annotated | position      | keyword | final text        |
-      | "foo bar baz" | "bar"     | after "foo "  | ":joy:" | "foo 😂,bar, baz" |
-      # | "foo bar baz" | "bar"     | before "bar"  | ":joy:" | "foo 😂,bar, baz" |
-      | "foo bar baz" | "bar"     | after "bar"   | ":joy:" | "foo ,bar,😂 baz" |
-      | "foo bar baz" | "bar"     | before " baz" | ":joy:" | "foo ,bar,😂 baz" |
+      | 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
+  Scenario Outline: Typing before the colon dismisses the emoji picker
     Given the text <text>
-    When <keyword> is typed
+    When <inserted text> is typed
     And <button> is pressed
     And <new text> is typed
-    And "{Enter}" is pressed
-    Then the text is <final text>
+    Then the keyword is ""
 
     Examples:
-      | text | keyword | button                   | new text | final text |
-      | ""   | ":j"    | "{ArrowLeft}{ArrowLeft}" | "f"      | "f\|:j"    |
-      | "fo" | ":j"    | "{ArrowLeft}{ArrowLeft}" | "o"      | "foo\|:j"  |
+      | 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>
@@ -196,3 +239,17 @@ Feature: Emoji Picker
       | ""   | ":!!"         | "!!"    | "‼️"           |
       | ""   | "::)"         | ":)"    | "😊"           |
       | ""   | "::"          | ":"     | "😊"           |
+
+  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

@@ -5,10 +5,10 @@ import {
   type Context,
 } from '@portabletext/editor/test/vitest'
 import {defineSchema} from '@portabletext/schema'
-import {page, type Locator} from '@vitest/browser/context'
 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'