0
# @udecode/plate-basic-marks
1

2
@udecode/plate-basic-marks provides a comprehensive set of basic text formatting mark plugins for the Plate rich text editor. The package includes both base plugins and React-compatible versions, supporting bold, italic, underline, strikethrough, code, subscript, superscript, highlight, and keyboard input formatting.
3

4
**Note**: This package is deprecated as of version 49.0.0. Users should migrate to `@platejs/basic-nodes` for new projects.
5

6
## Package Information
7

8
- **Package Name**: @udecode/plate-basic-marks
9
- **Package Type**: npm
10
- **Language**: TypeScript
11
- **Installation**: `npm install @udecode/plate-basic-marks`
12
- **Status**: Deprecated (use `@platejs/basic-nodes` instead)
13

14
## Core Imports
15

16
### Base Plugins
17

18
```typescript
19
import { 
20
  BaseBasicMarksPlugin,
21
  BaseBoldPlugin,
22
  BaseItalicPlugin,
23
  BaseUnderlinePlugin,
24
  BaseStrikethroughPlugin,
25
  BaseCodePlugin,
26
  BaseSubscriptPlugin,
27
  BaseSuperscriptPlugin,
28
  BaseHighlightPlugin,
29
  BaseKbdPlugin
30
} from "@udecode/plate-basic-marks";
31
```
32

33
### React Plugins
34

35
```typescript
36
import { 
37
  BasicMarksPlugin,
38
  BoldPlugin,
39
  ItalicPlugin,
40
  UnderlinePlugin,
41
  StrikethroughPlugin,
42
  CodePlugin,
43
  SubscriptPlugin,
44
  SuperscriptPlugin,
45
  HighlightPlugin,
46
  KbdPlugin
47
} from "@udecode/plate-basic-marks/react";
48
```
49

50
For CommonJS:
51

52
```javascript
53
const { BaseBoldPlugin, BaseItalicPlugin } = require("@udecode/plate-basic-marks");
54
const { BoldPlugin, ItalicPlugin } = require("@udecode/plate-basic-marks/react");
55
```
56

57
## Basic Usage
58

59
```typescript
60
import { createPlateEditor } from "@udecode/plate-core";
61
import { 
62
  BasicMarksPlugin,
63
  BoldPlugin,
64
  ItalicPlugin,
65
  UnderlinePlugin 
66
} from "@udecode/plate-basic-marks/react";
67

68
// Create editor with basic marks
69
const editor = createPlateEditor({
70
  plugins: [
71
    BasicMarksPlugin, // Includes all basic marks
72
    // Or use individual plugins:
73
    // BoldPlugin,
74
    // ItalicPlugin,
75
    // UnderlinePlugin,
76
  ]
77
});
78

79
// Toggle marks programmatically
80
BoldPlugin.toggle();
81
ItalicPlugin.toggle();
82
```
83

84
## Architecture
85

86
The package is organized around the SlatePlugin architecture from the Plate ecosystem:
87

88
- **Base Plugins**: Core plugin implementations without React dependencies
89
- **React Plugins**: React-compatible versions with component rendering support
90
- **Plugin Collections**: Aggregate plugins (`BaseBasicMarksPlugin`, `BasicMarksPlugin`) that bundle all individual mark plugins
91
- **Toggle Methods**: React plugins provide a `.toggle()` method for applying/removing marks
92
- **SlatePlugin Interface**: All plugins implement the standard SlatePlugin interface for consistent integration
93

94
## Capabilities
95

96
### Plugin Collections
97

98
Aggregate plugins that include all basic mark functionality in a single import.
99

100
```typescript { .api }
101
/**
102
 * Base plugin collection containing all basic mark plugins
103
 */
104
const BaseBasicMarksPlugin: SlatePlugin;
105

106
/**
107
 * React plugin collection containing all basic mark plugins with React components
108
 */
109
const BasicMarksPlugin: SlatePlugin;
110
```
111

112
### Bold Formatting
113

114
Enables bold text formatting with keyboard shortcuts and toggle functionality.
115

116
```typescript { .api }
117
/**
118
 * Base bold formatting plugin
119
 */
120
const BaseBoldPlugin: SlatePlugin;
121

122
/**
123
 * React bold formatting plugin with component rendering
124
 */
125
const BoldPlugin: SlatePlugin & {
126
  /** Toggle bold mark on current selection */
127
  toggle(): void;
128
};
129
```
130

131
### Italic Formatting
132

133
Enables italic text formatting with keyboard shortcuts and toggle functionality.
134

135
```typescript { .api }
136
/**
137
 * Base italic formatting plugin
138
 */
139
const BaseItalicPlugin: SlatePlugin;
140

141
/**
142
 * React italic formatting plugin with component rendering
143
 */
144
const ItalicPlugin: SlatePlugin & {
145
  /** Toggle italic mark on current selection */
146
  toggle(): void;
147
};
148
```
149

150
### Underline Formatting
151

152
Enables underline text formatting with keyboard shortcuts and toggle functionality.
153

154
```typescript { .api }
155
/**
156
 * Base underline formatting plugin
157
 */
158
const BaseUnderlinePlugin: SlatePlugin;
159

160
/**
161
 * React underline formatting plugin with component rendering
162
 */
163
const UnderlinePlugin: SlatePlugin & {
164
  /** Toggle underline mark on current selection */
165
  toggle(): void;
166
};
167
```
168

169
### Strikethrough Formatting
170

171
Enables strikethrough text formatting with keyboard shortcuts and toggle functionality.
172

173
```typescript { .api }
174
/**
175
 * Base strikethrough formatting plugin
176
 */
177
const BaseStrikethroughPlugin: SlatePlugin;
178

179
/**
180
 * React strikethrough formatting plugin with component rendering
181
 */
182
const StrikethroughPlugin: SlatePlugin & {
183
  /** Toggle strikethrough mark on current selection */
184
  toggle(): void;
185
};
186
```
187

188
### Code Formatting
189

190
Enables inline code text formatting with keyboard shortcuts and toggle functionality.
191

192
```typescript { .api }
193
/**
194
 * Base code formatting plugin
195
 */
196
const BaseCodePlugin: SlatePlugin;
197

198
/**
199
 * React code formatting plugin with component rendering
200
 */
201
const CodePlugin: SlatePlugin & {
202
  /** Toggle code mark on current selection */
203
  toggle(): void;
204
};
205
```
206

207
### Subscript Formatting
208

209
Enables subscript text positioning with keyboard shortcuts and toggle functionality.
210

211
```typescript { .api }
212
/**
213
 * Base subscript formatting plugin
214
 */
215
const BaseSubscriptPlugin: SlatePlugin;
216

217
/**
218
 * React subscript formatting plugin with component rendering
219
 */
220
const SubscriptPlugin: SlatePlugin & {
221
  /** Toggle subscript mark on current selection */
222
  toggle(): void;
223
};
224
```
225

226
### Superscript Formatting
227

228
Enables superscript text positioning with keyboard shortcuts and toggle functionality.
229

230
```typescript { .api }
231
/**
232
 * Base superscript formatting plugin
233
 */
234
const BaseSuperscriptPlugin: SlatePlugin;
235

236
/**
237
 * React superscript formatting plugin with component rendering
238
 */
239
const SuperscriptPlugin: SlatePlugin & {
240
  /** Toggle superscript mark on current selection */
241
  toggle(): void;
242
};
243
```
244

245
### Highlight Formatting
246

247
Enables text highlighting/background color with keyboard shortcuts and toggle functionality.
248

249
```typescript { .api }
250
/**
251
 * Base highlight formatting plugin
252
 */
253
const BaseHighlightPlugin: SlatePlugin;
254

255
/**
256
 * React highlight formatting plugin with component rendering
257
 */
258
const HighlightPlugin: SlatePlugin & {
259
  /** Toggle highlight mark on current selection */
260
  toggle(): void;
261
};
262
```
263

264
### Keyboard Input Formatting
265

266
Enables keyboard input representation formatting with keyboard shortcuts and toggle functionality.
267

268
```typescript { .api }
269
/**
270
 * Base keyboard input formatting plugin
271
 */
272
const BaseKbdPlugin: SlatePlugin;
273

274
/**
275
 * React keyboard input formatting plugin with component rendering
276
 */
277
const KbdPlugin: SlatePlugin & {
278
  /** Toggle kbd mark on current selection */
279
  toggle(): void;
280
};
281
```
282

283
## Types
284

285
```typescript { .api }
286
/**
287
 * Base plugin interface from @udecode/plate-core
288
 */
289
interface SlatePlugin {
290
  /** Plugin identifier */
291
  key: string;
292
  /** Plugin configuration and handlers */
293
  [key: string]: any;
294
}
295
```
296

297
## Usage Examples
298

299
### Individual Plugin Usage
300

301
```typescript
302
import { BoldPlugin, ItalicPlugin } from "@udecode/plate-basic-marks/react";
303

304
// Toggle formatting programmatically
305
const handleBoldClick = () => {
306
  BoldPlugin.toggle();
307
};
308

309
const handleItalicClick = () => {
310
  ItalicPlugin.toggle();
311
};
312
```
313

314
### Full Plugin Collection Usage
315

316
```typescript
317
import { createPlateEditor } from "@udecode/plate-core";
318
import { BasicMarksPlugin } from "@udecode/plate-basic-marks/react";
319

320
// Use all basic marks at once
321
const editor = createPlateEditor({
322
  plugins: [
323
    BasicMarksPlugin, // Includes all formatting options
324
  ]
325
});
326
```
327

328
### Base Plugin Usage (No React)
329

330
```typescript
331
import { BaseBoldPlugin, BaseItalicPlugin } from "@udecode/plate-basic-marks";
332

333
// For server-side or non-React environments
334
const editor = createPlateEditor({
335
  plugins: [
336
    BaseBoldPlugin,
337
    BaseItalicPlugin,
338
  ]
339
});
340
```
341

342
## Migration Information
343

344
This package is deprecated. To migrate to the new `@platejs/basic-nodes` package:
345

346
1. Replace `@udecode/plate-basic-marks` with `@platejs/basic-nodes`
347
2. Update import paths from `@udecode/plate-basic-marks` to `@platejs/basic-nodes`
348
3. Review API changes in the new package documentation
349
4. Test mark functionality to ensure compatibility
350

351
The core functionality remains similar, but the package structure and some APIs may have evolved in the new namespace.