Column

PreviousNext
Column Nodes
Loading...

Features

  • Add columns to your document.
  • Choose from a variety of column layouts using column-group-node toolbar.
  • Resizable columns

Kit Usage

Installation

The fastest way to add column functionality is with the ColumnKit, which includes pre-configured ColumnPlugin and ColumnItemPlugin with Plate UI components.

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { ColumnKit } from '@/components/editor/plugins/column-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...ColumnKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/layout

Add Plugins

Include the column plugins in your Plate plugins array when creating the editor.

import { ColumnPlugin, ColumnItemPlugin } from '@platejs/layout/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ColumnPlugin,
    ColumnItemPlugin,
  ],
});

Configure Plugins

Configure the plugins with custom components to render column layouts.

import { ColumnPlugin, ColumnItemPlugin } from '@platejs/layout/react';
import { createPlateEditor } from 'platejs/react';
import { ColumnGroupElement, ColumnElement } from '@/components/ui/column-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ColumnPlugin.withComponent(ColumnGroupElement),
    ColumnItemPlugin.withComponent(ColumnElement),
  ],
});

Turn Into Toolbar Button

You can add this item to the Turn Into Toolbar Button to convert blocks into column layouts:

{
  icon: <Columns3Icon />,
  label: '3 columns',
  value: 'action_three_columns',
}

Plugins

ColumnPlugin

Add Column Plugin to your document.

ColumnItemPlugin

Add Column Item Plugin to your document.

Types

TColumnGroupElement

Extends TElement.

TColumnElement

Extends TElement.

Attributes

  • width optional string

    The column's width (must end with %)

Transforms

insertColumnGroup

Insert a columnGroup with two empty columns.

OptionsInsertNodesOptions & { columns?: number[] | number }

Collapse all
    • columns: Array of column widths or number of equal-width columns (default: 2)
    • Other InsertNodesOptions to control insert behavior

  • columns optional number[] | number

    Array of column widths or number of equal-width columns (default: 2)

  • ...InsertNodesOptions InsertNodesOptions

    Other options to control insert behavior

insertColumn

Insert an empty column.

OptionsInsertNodesOptions & { width?: string }

Collapse all

  • width optional string

    Column width (default: "33%")

  • ...InsertNodesOptions InsertNodesOptions

    Other options to control insert behavior

moveMiddleColumn

Move the middle column to the left or right.

Parameters

Collapse all

  • nodeEntry NodeEntry

    The node entry of column element

  • options { direction: 'left' | 'right' }

    Control the direction the middle column moves to

Returnsboolean

    Returns false if the middle node is empty (and removes it), true otherwise.

toggleColumnGroup

Convert a block into a column group layout or update an existing column group's layout.

  • If the target block is not a column group, wraps it in a new column group with the specified number of columns
  • If the target block is already a column group, updates its column layout using setColumns
  • The original content becomes the content of the first column
  • Additional columns are created with empty paragraphs

Optionsobject

Collapse all

  • at optional Location

    The location to toggle the column group at.

  • columns optional number

    Number of equal-width columns to create (default: 2)

  • widths optional string[]

    Array of column widths (e.g., ['50%', '50%']). Takes precedence over columns.

setColumns

Update the column layout of an existing column group.

  • When increasing columns:
    • Keeps existing column content
    • Adds new empty columns with specified widths
  • When decreasing columns:
    • Merges content from removed columns into the last remaining column
    • Updates widths of remaining columns
  • When keeping same number of columns:
    • Only updates column widths

Optionsobject

Collapse all

  • at Path

    The path to the column group element.

  • columns optional number

    Number of equal-width columns to create.

  • widths optional string[]

    Array of column widths (e.g., ['33%', '67%']). Takes precedence over columns.

Hooks

useDebouncePopoverOpen

Returnsboolean

    Whether the popover is open.

分栏日期