4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:Tede,--- title: Bold description: Add strong inline text formatting. docs: - route: /docs/basic-marks title: Basic Marks - route: /docs/components/mark-toolbar-button title: Mark Toolbar Button - route: /docs/plugin-shortcuts title: Plugin Shortcuts --- Bold applies the `bold` leaf mark to selected text. `BoldPlugin` owns the mark key, shortcut, HTML parsing, render tag, and toggle transform. ## Features - `KEYS.bold` leaf mark. - Default `⌘B` / `Ctrl+B` shortcut. - HTML deserialization from `strong`, `b`, and bold font weight. - `` rendering by default. - Optional Markdown-style input rules through `BoldRules`. - Toolbar support through `MarkToolbarButton`. ## Kit Usage ### Add Basic Marks `BasicMarksKit` includes `BoldPlugin`, bold input rules, and the standard toolbar buttons that use `KEYS.bold`. ```tsx import { createPlateEditor } from 'platejs/react'; import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit'; export const editor = createPlateEditor({ plugins: [...BasicMarksKit], }); ``` ### Add A Toolbar Button Use `MarkToolbarButton` with `KEYS.bold`. ```tsx import { BoldIcon } from 'lucide-react'; import { KEYS } from 'platejs'; import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button'; export function BoldToolbarButton() { return ( ); } ``` ## Manual Usage Install the mark package. ```bash npm install @platejs/basic-nodes ``` Add `BoldPlugin` directly when you do not want the whole kit. ```tsx import { BoldPlugin } from '@platejs/basic-nodes/react'; import { createPlateEditor } from 'platejs/react'; export const editor = createPlateEditor({ plugins: [BoldPlugin], }); ``` Register Markdown-style input rules when users should type bold delimiters. ```tsx import { BoldRules } from '@platejs/basic-nodes'; import { BoldPlugin } from '@platejs/basic-nodes/react'; export const boldPlugin = BoldPlugin.configure({ inputRules: [ BoldRules.markdown({ variant: '*' }), BoldRules.markdown({ variant: '_' }), ], }); ``` ## Ownership | Surface | Owner | What It Does | |---------|-------|--------------| | `BaseBoldPlugin` | `@platejs/basic-nodes` | Headless bold mark, HTML parser, render tag, and `toggle` transform. | | `BoldPlugin` | `@platejs/basic-nodes/react` | React wrapper with default `mod+b` shortcut. | | `BoldRules.markdown` | `@platejs/basic-nodes` | Optional mark input rule factory. | | `BasicMarksKit` | Registry | Adds `BoldPlugin` with `*` and `_` Markdown-style input rules. | | `MarkToolbarButton` | Registry UI | Reads active mark state and calls the mark toggle hook. | The package owns the mark. The registry owns toolbar placement and icon choice. ## Behavior | Behavior | Source | |----------|--------| | Mark key | `KEYS.bold` | | Leaf behavior | `node.isLeaf: true` | | Toggle transform | `editor.tf.bold.toggle()` calls `editor.tf.toggleMark(type)`. | | Shortcut | `BoldPlugin` registers `mod+b`. | | HTML tags | `strong`, `b` | | HTML styles | `font-weight: 600`, `700`, or `bold` | | HTML guard | Ignores descendants where `fontWeight` is `normal`. | | Render output | `strong` | ## API Reference | API | Package | Use | |-----|---------|-----| | `BaseBoldPlugin` | `@platejs/basic-nodes` | Headless bold plugin. | | `BoldPlugin` | `@platejs/basic-nodes/react` | React bold plugin with shortcut defaults. | | `BoldRules.markdown(options)` | `@platejs/basic-nodes` | Creates a bold mark input rule. | | `tf.bold.toggle()` | `@platejs/basic-nodes` | Toggles the bold mark at the selection. | 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"../../content/docs/(plugins)/(marks)/bold.mdx","content":"$4f","type":"registry:file","target":"content/docs/plate/(plugins)/(marks)/bold.mdx"}],"className":"h-[70svh] min-h-80"}]]}]