{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "column-docs",
"title": "Column",
"description": "Documentation for Column",
"files": [
{
"path": "../../content/docs/(plugins)/(elements)/column.mdx",
"content": "---\ntitle: Column\ndocs:\n - route: /docs/components/column-node\n title: Column Nodes\n---\n\n\n\n\n\n## Features\n\n- Add columns to your document.\n- Choose from a variety of column layouts using `column-group-node` toolbar.\n- [ ] Resizable columns\n\n\n\n## Kit Usage\n\n\n\n### Installation\n\nThe fastest way to add column functionality is with the `ColumnKit`, which includes pre-configured `ColumnPlugin` and `ColumnItemPlugin` with [Plate UI](/docs/installation/plate-ui) components.\n\n\n\n- [`ColumnGroupElement`](/docs/components/column-node): Renders column group containers.\n- [`ColumnElement`](/docs/components/column-node): Renders individual column items.\n\n### Add Kit\n\nAdd the kit to your plugins:\n\n```tsx\nimport { createPlateEditor } from 'platejs/react';\nimport { ColumnKit } from '@/components/editor/plugins/column-kit';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n ...ColumnKit,\n ],\n});\n```\n\n\n\n## Manual Usage\n\n\n\n### Installation\n\n```bash\nnpm install @platejs/layout\n```\n\n### Add Plugins\n\nInclude the column plugins in your Plate plugins array when creating the editor.\n\n```tsx\nimport { ColumnPlugin, ColumnItemPlugin } from '@platejs/layout/react';\nimport { createPlateEditor } from 'platejs/react';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n ColumnPlugin,\n ColumnItemPlugin,\n ],\n});\n```\n\n### Configure Plugins\n\nConfigure the plugins with custom components to render column layouts.\n\n```tsx\nimport { ColumnPlugin, ColumnItemPlugin } from '@platejs/layout/react';\nimport { createPlateEditor } from 'platejs/react';\nimport { ColumnGroupElement, ColumnElement } from '@/components/ui/column-node';\n\nconst editor = createPlateEditor({\n plugins: [\n // ...otherPlugins,\n ColumnPlugin.withComponent(ColumnGroupElement),\n ColumnItemPlugin.withComponent(ColumnElement),\n ],\n});\n```\n\n- `withComponent`: Assigns [`ColumnGroupElement`](/docs/components/column-node) to render column group containers and [`ColumnElement`](/docs/components/column-node) to render individual columns.\n\n### Turn Into Toolbar Button\n\nYou can add this item to the [Turn Into Toolbar Button](/docs/toolbar#turn-into-toolbar-button) to convert blocks into column layouts:\n\n```tsx\n{\n icon: ,\n label: '3 columns',\n value: 'action_three_columns',\n}\n```\n\n\n\n## Plugins\n\n### `ColumnPlugin`\n\nAdd Column Plugin to your document.\n\n### `ColumnItemPlugin`\n\nAdd Column Item Plugin to your document.\n\n## Types\n\n### `TColumnGroupElement`\n\nExtends `TElement`.\n\n### `TColumnElement`\n\nExtends `TElement`.\n\n\n\n \n The column's width (must end with `%`)\n \n\n\n\n## Transforms\n\n### `insertColumnGroup`\n\nInsert a columnGroup with two empty columns.\n\n\n\n - `columns`: Array of column widths or number of equal-width columns (default: 2)\n - Other `InsertNodesOptions` to control insert behavior\n \n Array of column widths or number of equal-width columns (default: 2)\n \n \n Other options to control insert behavior\n \n\n\n\n### `insertColumn`\n\nInsert an empty column.\n\n\n\n \n Column width (default: \"33%\")\n \n \n Other options to control insert behavior\n \n\n\n\n### `moveMiddleColumn`\n\nMove the middle column to the left or right.\n\n\n\n \n The node entry of `column` element\n \n \n Control the direction the middle column moves to\n \n\n\n\n Returns `false` if the middle node is empty (and removes it), `true` otherwise.\n\n\n\n### `toggleColumnGroup`\n\nConvert a block into a column group layout or update an existing column group's layout.\n\n\n- If the target block is not a column group, wraps it in a new column group with the specified number of columns\n- If the target block is already a column group, updates its column layout using `setColumns`\n- The original content becomes the content of the first column\n- Additional columns are created with empty paragraphs\n\n \n The location to toggle the column group at.\n \n \n Number of equal-width columns to create (default: 2)\n \n \n Array of column widths (e.g., ['50%', '50%']). Takes precedence over `columns`.\n \n\n\n\n### `setColumns`\n\nUpdate the column layout of an existing column group.\n\n\n- When increasing columns:\n - Keeps existing column content\n - Adds new empty columns with specified widths\n- When decreasing columns:\n - Merges content from removed columns into the last remaining column\n - Updates widths of remaining columns\n- When keeping same number of columns:\n - Only updates column widths\n\n \n The path to the column group element.\n \n \n Number of equal-width columns to create.\n \n \n Array of column widths (e.g., ['33%', '67%']). Takes precedence over `columns`.\n \n\n\n\n\n## Hooks\n\n### `useDebouncePopoverOpen`\n\n\n\n Whether the popover is open.\n\n",
"type": "registry:file",
"target": "content/docs/plate/(plugins)/(elements)/column.mdx"
}
],
"type": "registry:file"
}