@portabletext/plugin-input-rule 5.0.21 → 5.0.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -6
- package/package.json +11 -11
package/README.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
> Easily configure Input Rules in the Portable Text Editor
|
|
4
4
|
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install @portabletext/plugin-input-rule
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Why
|
|
12
|
+
|
|
5
13
|
1. How do you implement undo functionality correctly?
|
|
6
14
|
2. What about smart undo with <kbd>Backspace</kbd>?
|
|
7
15
|
3. Have you considered `insert.text` events that carry more than one character? (Android, anyone?)
|
|
@@ -12,7 +20,7 @@ _This is why this plugin exists_. It brings the concept of "Input Rules" to the
|
|
|
12
20
|
import type {EditorSchema} from '@portabletext/editor'
|
|
13
21
|
import {raise} from '@portabletext/editor/behaviors'
|
|
14
22
|
import {getPreviousInlineObject} from '@portabletext/editor/selectors'
|
|
15
|
-
import {defineInputRule} from '@portabletext/plugin-input-rule'
|
|
23
|
+
import {defineInputRule, InputRulePlugin} from '@portabletext/plugin-input-rule'
|
|
16
24
|
|
|
17
25
|
const unorderedListRule = defineInputRule({
|
|
18
26
|
// Listen for a RegExp pattern instead of a raw event
|
|
@@ -61,13 +69,18 @@ export function MyMarkdownPlugin() {
|
|
|
61
69
|
}
|
|
62
70
|
```
|
|
63
71
|
|
|
64
|
-
>
|
|
72
|
+
> **Tip:** The [`@portabletext/plugin-markdown-shortcuts`](../plugin-markdown-shortcuts/) package is already built using Input Rules and provides common markdown shortcuts out of the box.
|
|
65
73
|
|
|
66
|
-
## Text
|
|
74
|
+
## Text transformation rules
|
|
67
75
|
|
|
68
76
|
Text transformations are so common that the plugin provides a high-level `defineTextTransformRule` helper to configure them without any boilerplate:
|
|
69
77
|
|
|
70
78
|
```tsx
|
|
79
|
+
import {
|
|
80
|
+
defineTextTransformRule,
|
|
81
|
+
InputRulePlugin,
|
|
82
|
+
} from '@portabletext/plugin-input-rule'
|
|
83
|
+
|
|
71
84
|
const emDashRule = defineTextTransformRule({
|
|
72
85
|
on: /--/,
|
|
73
86
|
transform: () => '—',
|
|
@@ -80,14 +93,14 @@ export function MyTypographyPlugin() {
|
|
|
80
93
|
|
|
81
94
|
In fact, the production-ready [`@portabletext/plugin-typography`](../plugin-typography/) is built on top of Input Rules and comes packed with common text transformations like this.
|
|
82
95
|
|
|
83
|
-
## Advanced
|
|
96
|
+
## Advanced examples
|
|
84
97
|
|
|
85
98
|
Input Rules can handle more complex transformations. Here are two advanced examples:
|
|
86
99
|
|
|
87
100
|
1. **Markdown Link**: Automatically convert `[text](url)` syntax into proper links
|
|
88
101
|
2. **Stock Ticker**: Convert `{SYMBOL}` patterns into stock ticker objects
|
|
89
102
|
|
|
90
|
-
### Markdown
|
|
103
|
+
### Markdown link rule
|
|
91
104
|
|
|
92
105
|
This example shows how to convert markdown-style link syntax `[text](url)` into proper link annotations:
|
|
93
106
|
|
|
@@ -174,7 +187,7 @@ const markdownLinkRule = defineInputRule({
|
|
|
174
187
|
})
|
|
175
188
|
```
|
|
176
189
|
|
|
177
|
-
### Stock
|
|
190
|
+
### Stock ticker rule
|
|
178
191
|
|
|
179
192
|
This example demonstrates how to convert text patterns like `{AAPL}` into custom inline objects:
|
|
180
193
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@portabletext/plugin-input-rule",
|
|
3
|
-
"version": "5.0.
|
|
4
|
-
"description": "Easily configure
|
|
3
|
+
"version": "5.0.23",
|
|
4
|
+
"description": "Easily configure Input Rules in the Portable Text Editor",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"portabletext",
|
|
7
7
|
"plugin",
|
|
@@ -36,24 +36,24 @@
|
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@sanity/pkg-utils": "^10.2.1",
|
|
38
38
|
"@sanity/tsconfig": "^2.1.0",
|
|
39
|
-
"@types/react": "^19.2.
|
|
39
|
+
"@types/react": "^19.2.17",
|
|
40
40
|
"@vitejs/plugin-react": "^5.2.0",
|
|
41
|
-
"@vitest/browser": "^4.1.
|
|
42
|
-
"@vitest/browser-playwright": "^4.1.
|
|
41
|
+
"@vitest/browser": "^4.1.9",
|
|
42
|
+
"@vitest/browser-playwright": "^4.1.9",
|
|
43
43
|
"babel-plugin-react-compiler": "^1.0.0",
|
|
44
44
|
"eslint": "^9.39.1",
|
|
45
45
|
"eslint-formatter-gha": "^1.6.0",
|
|
46
46
|
"eslint-plugin-react-hooks": "^7.1.1",
|
|
47
|
-
"react": "^19.2.
|
|
47
|
+
"react": "^19.2.7",
|
|
48
48
|
"typescript": "5.9.3",
|
|
49
49
|
"typescript-eslint": "^8.48.0",
|
|
50
|
-
"vitest": "^4.1.
|
|
51
|
-
"@portabletext/editor": "^7.
|
|
52
|
-
"@portabletext/schema": "2.2.
|
|
53
|
-
"racejar": "2.0.
|
|
50
|
+
"vitest": "^4.1.9",
|
|
51
|
+
"@portabletext/editor": "^7.8.0",
|
|
52
|
+
"@portabletext/schema": "2.2.2",
|
|
53
|
+
"racejar": "2.0.9"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
|
-
"@portabletext/editor": "^7.
|
|
56
|
+
"@portabletext/editor": "^7.8.0",
|
|
57
57
|
"react": "^19.2"
|
|
58
58
|
},
|
|
59
59
|
"engines": {
|