@portabletext/plugin-input-rule 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/plugin-input-rule",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Easily configure input rules in the Portable Text Editor",
   "keywords": [
     "portabletext",
@@ -45,20 +45,22 @@
     "@sanity/pkg-utils": "^8.1.4",
     "@types/react": "^19.2.0",
     "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser": "^4.0.4",
+    "@vitest/browser-playwright": "^4.0.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",
+    "eslint-plugin-react-hooks": "7.0.1",
     "react": "^19.2.0",
     "typescript": "5.9.3",
     "typescript-eslint": "^8.46.1",
-    "vitest": "^3.2.4",
-    "@portabletext/editor": "2.15.5",
-    "racejar": "1.3.2",
-    "@portabletext/schema": "1.2.0"
+    "vitest": "^4.0.4",
+    "@portabletext/editor": "2.16.0",
+    "@portabletext/schema": "1.2.0",
+    "racejar": "1.3.2"
   },
   "peerDependencies": {
-    "@portabletext/editor": "^2.15.5",
+    "@portabletext/editor": "^2.16.0",
     "react": "^19.1.1"
   },
   "publishConfig": {

package/src/edge-cases.feature

@@ -201,3 +201,8 @@ Feature: Edge Cases
     And "{ArrowLeft}" is pressed
     And undo is performed
     Then the text is "-"
+
+  Scenario Outline: Multiple overlapping matches in one insertion
+    Given the text ""
+    When "1*2*3" is inserted
+    Then the text is "1×2×3"

package/src/edge-cases.test.tsx

@@ -57,6 +57,11 @@ const unmatchedGroupsRule = defineTextTransformRule({
   transform: () => '<hr />',
 })
 
+const multiplicationRule = defineTextTransformRule({
+  on: /\d+\s?([*x])\s?\d+/,
+  transform: () => '×',
+})
+
 Feature({
   hooks: [
     Before(async (context: Context) => {
@@ -71,6 +76,7 @@ Feature({
             <InputRulePlugin rules={[betterH2Rule]} />
             <InputRulePlugin rules={[replaceAandCRule]} />
             <InputRulePlugin rules={[unmatchedGroupsRule]} />
+            <InputRulePlugin rules={[multiplicationRule]} />
           </>
         ),
         schemaDefinition: defineSchema({

package/src/emoji-picker-rules.feature

@@ -0,0 +1,30 @@
+Feature: Emoji Picker Rules
+
+  Background:
+    Given the editor is focused
+
+  Scenario: Trigger Rule
+    Given the text ""
+    When ":" is typed
+    Then the keyword is ""
+
+  Scenario: Partial Keyword Rule
+    Given the text ""
+    When ":jo" is typed
+    Then the keyword is "jo"
+
+  Scenario: Keyword Rule
+    Given the text ""
+    When ":joy:" is typed
+    Then the keyword is "joy"
+
+  Scenario Outline: Consecutive keywords
+    Given the text ":joy:"
+    When <text> is typed
+    Then the keyword is <keyword>
+
+    Examples:
+      | text    | keyword |
+      | ":"     | ""      |
+      | ":cat"  | "cat"   |
+      | ":cat:" | "cat"   |

package/src/emoji-picker-rules.test.tsx

@@ -0,0 +1,124 @@
+import {useEditor} from '@portabletext/editor'
+import {defineBehavior, effect, raise} from '@portabletext/editor/behaviors'
+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 {useEffect, useState} from 'react'
+import {expect, vi} from 'vitest'
+import {page, type Locator} from 'vitest/browser'
+import emojiPickerRulesFeature from './emoji-picker-rules.feature?raw'
+import {defineInputRule} from './input-rule'
+import {defineInputRuleBehavior} from './plugin.input-rule'
+
+const triggerRule = defineInputRule({
+  on: /:/,
+  actions: [
+    () => [
+      raise({
+        type: 'custom.keyword found',
+        keyword: '',
+      }),
+    ],
+  ],
+})
+const partialKeywordRule = defineInputRule({
+  on: /:[a-zA-Z-_0-9]+/,
+  guard: ({event}) => {
+    const lastMatch = event.matches.at(-1)
+
+    if (!lastMatch) {
+      return false
+    }
+
+    return {keyword: lastMatch.text.slice(1)}
+  },
+  actions: [(_, {keyword}) => [raise({type: 'custom.keyword found', keyword})]],
+})
+const keywordRule = defineInputRule({
+  on: /:[a-zA-Z-_0-9]+:/,
+  guard: ({event}) => {
+    const lastMatch = event.matches.at(-1)
+
+    if (!lastMatch) {
+      return false
+    }
+
+    return {keyword: lastMatch.text.slice(1, -1)}
+  },
+  actions: [(_, {keyword}) => [raise({type: 'custom.keyword found', keyword})]],
+})
+
+function EmojiPickerRulesPlugin() {
+  const editor = useEditor()
+  const [keyword, setKeyword] = useState('')
+
+  useEffect(() => {
+    const unregisterBehaviors = [
+      editor.registerBehavior({
+        behavior: defineInputRuleBehavior({
+          rules: [keywordRule, partialKeywordRule, triggerRule],
+        }),
+      }),
+      editor.registerBehavior({
+        behavior: defineBehavior<{keyword: string}>({
+          on: 'custom.keyword found',
+          actions: [
+            ({event}) => [
+              effect(() => {
+                setKeyword(event.keyword)
+              }),
+            ],
+          ],
+        }),
+      }),
+    ]
+
+    return () => {
+      for (const unregister of unregisterBehaviors) {
+        unregister()
+      }
+    }
+  }, [])
+
+  return <div data-testid="keyword">{keyword}</div>
+}
+
+Feature({
+  hooks: [
+    Before(async (context: Context & {keywordLocator: Locator}) => {
+      const {editor, locator} = await createTestEditor({
+        children: <EmojiPickerRulesPlugin />,
+        schemaDefinition: defineSchema({
+          decorators: [{name: 'strong'}],
+          annotations: [{name: 'link'}],
+          inlineObjects: [{name: 'stock-ticker'}],
+        }),
+      })
+
+      context.locator = locator
+      context.editor = editor
+      context.keywordLocator = page.getByTestId('keyword')
+
+      await vi.waitFor(() =>
+        expect.element(context.keywordLocator).toBeInTheDocument(),
+      )
+    }),
+  ],
+  featureText: emojiPickerRulesFeature,
+  stepDefinitions: [
+    ...stepDefinitions,
+    Then(
+      'the keyword is {string}',
+      (context: Context & {keywordLocator: Locator}, keyword: string) => {
+        expect(context.keywordLocator.element().textContent).toEqual(keyword)
+      },
+    ),
+  ],
+  parameterTypes,
+})