@portabletext/plugin-typography 8.0.20 → 8.0.22
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 +25 -10
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -10,6 +10,12 @@ Automatically handles smart undo with <kbd>Backspace</kbd> right after insertion
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npm install @portabletext/plugin-typography
|
|
17
|
+
```
|
|
18
|
+
|
|
13
19
|
## Usage
|
|
14
20
|
|
|
15
21
|
Import the `TypographyPlugin` React component and place it inside the `EditorProvider`:
|
|
@@ -40,7 +46,7 @@ function App() {
|
|
|
40
46
|
}
|
|
41
47
|
```
|
|
42
48
|
|
|
43
|
-
## Rules
|
|
49
|
+
## Rules included
|
|
44
50
|
|
|
45
51
|
The plugin includes the following typographic transformation rules:
|
|
46
52
|
|
|
@@ -76,11 +82,11 @@ The plugin includes the following typographic transformation rules:
|
|
|
76
82
|
| `oneQuarter` | `1/4` → `¼` |
|
|
77
83
|
| `threeQuarters` | `3/4` → `¾` |
|
|
78
84
|
|
|
79
|
-
## Configuring
|
|
85
|
+
## Configuring rules
|
|
80
86
|
|
|
81
87
|
The plugin supports flexible configuration through `preset`, `enable`, and `disable` props:
|
|
82
88
|
|
|
83
|
-
### Using
|
|
89
|
+
### Using presets
|
|
84
90
|
|
|
85
91
|
The `preset` prop provides quick configuration:
|
|
86
92
|
|
|
@@ -99,7 +105,7 @@ The `preset` prop provides quick configuration:
|
|
|
99
105
|
<TypographyPlugin preset="none" enable={['emDash', 'ellipsis']} />
|
|
100
106
|
```
|
|
101
107
|
|
|
102
|
-
### Enabling
|
|
108
|
+
### Enabling additional rules
|
|
103
109
|
|
|
104
110
|
Use `enable` to add rules beyond the preset:
|
|
105
111
|
|
|
@@ -111,7 +117,7 @@ Use `enable` to add rules beyond the preset:
|
|
|
111
117
|
<TypographyPlugin preset="all" disable={['emDash', 'ellipsis']} />
|
|
112
118
|
```
|
|
113
119
|
|
|
114
|
-
### Disabling
|
|
120
|
+
### Disabling rules
|
|
115
121
|
|
|
116
122
|
Use `disable` to remove rules from the preset:
|
|
117
123
|
|
|
@@ -127,7 +133,7 @@ Use `disable` to remove rules from the preset:
|
|
|
127
133
|
/>
|
|
128
134
|
```
|
|
129
135
|
|
|
130
|
-
### Combining
|
|
136
|
+
### Combining options
|
|
131
137
|
|
|
132
138
|
All three props work together. The order of operations is:
|
|
133
139
|
|
|
@@ -149,11 +155,11 @@ All three props work together. The order of operations is:
|
|
|
149
155
|
/>
|
|
150
156
|
```
|
|
151
157
|
|
|
152
|
-
## Controlling when
|
|
158
|
+
## Controlling when text transformations run
|
|
153
159
|
|
|
154
160
|
The `TypographyPlugin` has an optional `guard` prop that accepts any type of `BehaviorGuard`. Here, you'll have access to the current `EditorSnapshot` as well as information about the current rule being matched.
|
|
155
161
|
|
|
156
|
-
Because disallowing text transformations inside code is a common use case, this plugin ships a built-in `createDecoratorGuard` function.
|
|
162
|
+
Because disallowing text transformations inside code is a common use case, this plugin ships a built-in `createDecoratorGuard` function. Use that to create a `guard` that only allows text transformations inside certain decorators:
|
|
157
163
|
|
|
158
164
|
```tsx
|
|
159
165
|
import {
|
|
@@ -173,9 +179,18 @@ return (
|
|
|
173
179
|
)
|
|
174
180
|
```
|
|
175
181
|
|
|
176
|
-
|
|
182
|
+
The `decorators` callback derives its allowed list from `context.schema`
|
|
183
|
+
rather than hardcoding decorator names, so the guard tracks whatever the
|
|
184
|
+
schema actually declares instead of a fixed list that can drift from it.
|
|
185
|
+
Because `context.schema` is resolved at the caret, it also follows
|
|
186
|
+
[containers](../schema/README.md#containers-and-sub-schemas): inside a code
|
|
187
|
+
block the guard sees that container's sub-schema rather than the top-level
|
|
188
|
+
one, which is what lets a guard keyed on the `code` decorator suppress
|
|
189
|
+
transformations inside a code block whose sub-schema defines `code`.
|
|
190
|
+
|
|
191
|
+
## Using individual rules with `InputRulePlugin`
|
|
177
192
|
|
|
178
|
-
All included typographic rules are exported from the plugin. To use them in your own abstraction, import them from this
|
|
193
|
+
All included typographic rules are exported from the plugin. To use them in your own abstraction, import them from this plugin and use them with the `InputRulePlugin`:
|
|
179
194
|
|
|
180
195
|
```tsx
|
|
181
196
|
import {InputRulePlugin} from '@portabletext/plugin-input-rule'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@portabletext/plugin-typography",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.22",
|
|
4
4
|
"description": "Automatically transform text to typographic variants",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"portabletext",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"dist"
|
|
31
31
|
],
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@portabletext/plugin-input-rule": "^5.0.
|
|
33
|
+
"@portabletext/plugin-input-rule": "^5.0.22"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@sanity/pkg-utils": "^10.2.1",
|
|
@@ -47,12 +47,12 @@
|
|
|
47
47
|
"typescript": "5.9.3",
|
|
48
48
|
"typescript-eslint": "^8.48.0",
|
|
49
49
|
"vitest": "^4.1.8",
|
|
50
|
-
"@portabletext/editor": "^7.6.1",
|
|
51
50
|
"@portabletext/schema": "^2.2.1",
|
|
51
|
+
"@portabletext/editor": "^7.7.0",
|
|
52
52
|
"racejar": "2.0.8"
|
|
53
53
|
},
|
|
54
54
|
"peerDependencies": {
|
|
55
|
-
"@portabletext/editor": "^7.
|
|
55
|
+
"@portabletext/editor": "^7.7.0",
|
|
56
56
|
"react": "^19.2"
|
|
57
57
|
},
|
|
58
58
|
"engines": {
|