Column

Add columns to your document.

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

import React from 'react';

import { Plate } from '@udecode/plate-common/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.

API

TColumnGroupElement

Attributes

Collapse all

    Extends TElement.

    Set the width of its children Column

TColumnElement

Attributes

Collapse all

    Extends TElement.

    The Column's width end with %

insertColumnGroup

Insert a columnGroup with two empty columns.

Parameters

Collapse all

    The editor instance.

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

insertColumn

Insert an empty column. You can set the width by options.width default is "33%"

Parameters

Collapse all

    The editor instance.

    InsertNodesOptions and width to set the insert behavior.

moveMiddleColumn

Move the middle column to the left or right by options.direction. If the middle node is empty, return false and remove it.

Parameters

Collapse all

    The editor instance.

    The node entry of column element

    Control the direction the middle column moves to

setColumnWidth

Set the width of ColumnGroup's children. In general, you don't need to use this function, since we will call this function automatically when the property of layout changes. If you want to set the layout use setNodes.

Parameters

Collapse all

    The editor instance.

    The path ref of ColumnGroup

    The element property of layout

toggleColumnGroup

Convert a block into a column group layout. The selected block becomes the content of the first column.

Parameters

Collapse all

    The editor instance.

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

API Components

useColumnState

Returns

Collapse all

    Call this function to make the ColumnGroup's children, column bisects the parent element space. This sets the layout property of ColumnGroup to [50,50]

    Set the layout property of ColumnGroup to [33, 33, 33]

    Set the layout property of ColumnGroup to [70,30]

    Set the layout property of ColumnGroup to [30,70]

    Set the layout property of ColumnGroup to [25, 50, 25]

useDebouncePopoverOpen

Returns

Collapse all

    Control whether the popover is open or not
CollaborationCombobox