Skip to content

Commit a31b565

Browse files
committed
docs: show nested blockquote examples
1 parent cb61f91 commit a31b565

24 files changed

+166
-22
lines changed

apps/www/public/r/autoformat-docs.json

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

apps/www/public/r/blockquote-docs.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"files": [
88
{
99
"path": "../../content/(plugins)/(elements)/blockquote.mdx",
10-
"content": "---\ntitle: Blockquote\ndocs:\n - route: /docs/components/blockquote-node\n title: Blockquote Element\n---\n\n<ComponentPreview name=\"basic-blocks-demo\" />\n\n<PackageInfo>\n\n## Features\n\n- Create blockquotes to emphasize important information or highlight quotes from external sources.\n- Renders as `<blockquote>` HTML element by default.\n- Supports nested block content such as paragraphs and lists.\n\n</PackageInfo>\n\n## Kit Usage\n\n<Steps>\n\n### Installation\n\nThe fastest way to add the blockquote plugin is with the `BasicBlocksKit`, which includes pre-configured `BlockquotePlugin` along with other basic block elements and their [Plate UI](/docs/installation/plate-ui) components.\n\n<ComponentSource name=\"basic-blocks-kit\" />\n\n- [`BlockquoteElement`](/docs/components/blockquote-node): Renders blockquote elements.\n\n### Add Kit\n\nAdd the kit to your plugins:\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\nimport { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n ...BasicBlocksKit,\n ],\n});\n```\n\n</Steps>\n\n## Manual Usage\n\n<Steps>\n\n### Installation\n\n```bash\nnpm install @platejs/basic-nodes\n```\n\n### Add Plugin\n\nInclude `BlockquotePlugin` in your Plate plugins array when creating the editor.\n\n```tsx\nimport { BlockquotePlugin } from '@platejs/basic-nodes/react';\nimport { createPlateEditor } from 'platejs/react';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n BlockquotePlugin,\n ],\n});\n```\n\n### Configure Plugin\n\nYou can configure the `BlockquotePlugin` with options such as a specific rendering component or custom keyboard shortcuts.\n\n```tsx\nimport { BlockquotePlugin } from '@platejs/basic-nodes/react';\nimport { createPlateEditor } from 'platejs/react';\nimport { BlockquoteElement } from '@/components/ui/blockquote-node';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n BlockquotePlugin.configure({\n node: { component: BlockquoteElement },\n shortcuts: { toggle: 'mod+shift+.' },\n }),\n ],\n});\n```\n\n- `node.component`: Assigns [`BlockquoteElement`](/docs/components/blockquote-node) to render blockquote elements.\n- `shortcuts.toggle`: Defines a keyboard [shortcut](/docs/plugin-shortcuts) to toggle blockquote formatting.\n\n### Turn Into Toolbar Button\n\nYou can add blockquote to the [Turn Into Toolbar Button](/docs/toolbar#turn-into-toolbar-button) to toggle blockquotes:\n\n```tsx\n{\n icon: <QuoteIcon />,\n label: 'Quote',\n value: KEYS.blockquote,\n}\n```\n\n### Insert Toolbar Button\n\nYou can add blockquote to the [Insert Toolbar Button](/docs/toolbar#insert-toolbar-button) to insert blockquotes:\n\n```tsx\n{\n icon: <QuoteIcon />,\n label: 'Quote',\n value: KEYS.blockquote,\n}\n```\n\n</Steps>\n\n## Plugins\n\n### `BlockquotePlugin`\n\nPlugin for blockquote container elements. Renders as `<blockquote>` HTML element by default.\n\n## Transforms\n\n### `tf.blockquote.toggle`\n\nWraps the current block or selection in a blockquote. If the selection is already inside a blockquote, it unwraps the quoted blocks.\n",
10+
"content": "---\ntitle: Blockquote\ndocs:\n - route: /docs/components/blockquote-node\n title: Blockquote Element\n---\n\n<ComponentPreview name=\"basic-blocks-demo\" />\n\n<PackageInfo>\n\n## Features\n\n- Create blockquotes to emphasize important information or highlight quotes from external sources.\n- Renders as `<blockquote>` HTML element by default.\n- Supports nested block content such as paragraphs, lists, and nested blockquotes.\n\n</PackageInfo>\n\n## Kit Usage\n\n<Steps>\n\n### Installation\n\nThe fastest way to add the blockquote plugin is with the `BasicBlocksKit`, which includes pre-configured `BlockquotePlugin` along with other basic block elements and their [Plate UI](/docs/installation/plate-ui) components.\n\n<ComponentSource name=\"basic-blocks-kit\" />\n\n- [`BlockquoteElement`](/docs/components/blockquote-node): Renders blockquote elements.\n\n### Add Kit\n\nAdd the kit to your plugins:\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\nimport { BasicBlocksKit } from '@/components/editor/plugins/basic-blocks-kit';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n ...BasicBlocksKit,\n ],\n});\n```\n\n</Steps>\n\n## Manual Usage\n\n<Steps>\n\n### Installation\n\n```bash\nnpm install @platejs/basic-nodes\n```\n\n### Add Plugin\n\nInclude `BlockquotePlugin` in your Plate plugins array when creating the editor.\n\n```tsx\nimport { BlockquotePlugin } from '@platejs/basic-nodes/react';\nimport { createPlateEditor } from 'platejs/react';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n BlockquotePlugin,\n ],\n});\n```\n\n### Configure Plugin\n\nYou can configure the `BlockquotePlugin` with options such as a specific rendering component or custom keyboard shortcuts.\n\n```tsx\nimport { BlockquotePlugin } from '@platejs/basic-nodes/react';\nimport { createPlateEditor } from 'platejs/react';\nimport { BlockquoteElement } from '@/components/ui/blockquote-node';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n BlockquotePlugin.configure({\n node: { component: BlockquoteElement },\n shortcuts: { toggle: 'mod+shift+.' },\n }),\n ],\n});\n```\n\n- `node.component`: Assigns [`BlockquoteElement`](/docs/components/blockquote-node) to render blockquote elements.\n- `shortcuts.toggle`: Defines a keyboard [shortcut](/docs/plugin-shortcuts) to toggle blockquote formatting.\n\n### Turn Into Toolbar Button\n\nYou can add blockquote to the [Turn Into Toolbar Button](/docs/toolbar#turn-into-toolbar-button) to toggle blockquotes:\n\n```tsx\n{\n icon: <QuoteIcon />,\n label: 'Quote',\n value: KEYS.blockquote,\n}\n```\n\n### Insert Toolbar Button\n\nYou can add blockquote to the [Insert Toolbar Button](/docs/toolbar#insert-toolbar-button) to insert blockquotes:\n\n```tsx\n{\n icon: <QuoteIcon />,\n label: 'Quote',\n value: KEYS.blockquote,\n}\n```\n\n</Steps>\n\n## Plugins\n\n### `BlockquotePlugin`\n\nPlugin for blockquote container elements. Renders as `<blockquote>` HTML element by default.\n\n## Transforms\n\n### `tf.blockquote.toggle`\n\nWraps the current block or selection in a blockquote. If the selection is already inside a blockquote, it unwraps the quoted blocks.\n",
1111
"type": "registry:file",
1212
"target": "content/docs/plate/(plugins)/(elements)/blockquote.mdx"
1313
}

0 commit comments

Comments
 (0)