Column

Column ElementColumn Group Element
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

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

Installation

npm install @udecode/plate-layout

Usage

import { ColumnPlugin, ColumnItemPlugin } from '@udecode/plate-layout/react';
 
const plugins = [
  // ...otherPlugins,
  ColumnPlugin,
];

Plugins

ColumnPlugin

Add Column Plugin to your document.

ColumnItemPlugin

Add Column Item Plugin to your document.

Types

TColumnGroupElement

Attributes

Collapse all

    Base element type.

TColumnElement

Attributes

Collapse all

    Base element type.

    The column's width (must end with %)

Transforms

insertColumnGroup

Insert a columnGroup with two empty columns.

Parameters

Collapse all

    The editor instance.

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

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

Collapse all

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

    Other options to control insert behavior

insertColumn

Insert an empty column.

Parameters

Collapse all

    The editor instance.

    InsertNodesOptions and width to set the insert behavior.

OptionsInsertNodesOptions & { width?: string }

Collapse all

    Column width (default: "33%")

    Other options to control insert behavior

moveMiddleColumn

Move the middle column to the left or right.

Parameters

Collapse all

    The editor instance.

    The node entry of column element

    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.

Parameters

Collapse all

    The editor instance.

    Options for toggling the column group.

Optionsobject

Collapse all

    The location to toggle the column group at.

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

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

setColumns

Update the column layout of an existing column group.

Parameters

Collapse all

    The editor instance.

    Options for setting columns.

Optionsobject

Collapse all

    The path to the column group element.

    Number of equal-width columns to create.

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

Hooks

useDebouncePopoverOpen

Returnsboolean

    Whether the popover is open.