Column plugin

.changeset/calm-pans-grow.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-layout": minor
+---
+
+Add `createColumnPlugin`

.changeset/ninety-jeans-worry.md

@@ -0,0 +1,9 @@
+---
+"@udecode/plate-serializer-md": patch
+"@udecode/plate-indent-list": patch
+"@udecode/plate-toggle": patch
+"@udecode/plate-emoji": patch
+"@udecode/plate-table": patch
+---
+
+Missing exports

apps/www/content/docs/column.mdx

@@ -0,0 +1,157 @@
+---
+title: Column
+description: Add Columns to your document.
+docs:
+  - route: /docs/components/column-element
+    title: Column Element
+  - route: /docs/components/column-group-element
+    title: Column Group Element
+---
+
+<ComponentPreview name="playground-demo" id="column" />
+
+<PackageInfo>
+
+## Features
+
+- Add columns to your document.
+- Choose from a variety of column layouts using `column-group-element` toolbar.
+- [ ] Resizable columns
+
+</PackageInfo>
+
+## Installation
+
+```bash
+npm install @udecode/plate-layout
+```
+
+## Usage
+
+```tsx
+// ...
+import { createColumnPlugin } from '@udecode/plate-layout';
+
+const plugins = [
+  // ...otherPlugins,
+  createColumnPlugin(),
+];
+```
+
+## API
+
+### createColumnPlugin
+
+Add Column Plugin to your document.
+
+### TColumnGroupElement
+
+<APIAttributes>
+Extends `TElement`.
+
+<APIItem name="layout" type="number[]" optional>
+  Set the width of it’s children `Column`
+</APIItem>
+</APIAttributes>
+
+
+
+### TColumnElement
+
+<APIAttributes>
+Extends `TElement`.
+
+<APIItem name="width" type="string" optional>
+  The `Column`'s width end with `%`
+</APIItem>
+</APIAttributes>
+
+
+
+### insertColumnGroup
+
+Insert an columnGroup with two empty column.
+
+<APIParameters>
+  <APIItem name="editor" type="TEditor">
+    The editor instance.
+  </APIItem>
+</APIParameters>
+
+### insertEmptyColumn
+
+Insert an empty column. You can set the with by options.width default is "33%"
+
+<APIParameters>
+  <APIItem name="editor" type="TEditor">
+    The editor instance.
+  </APIItem>
+  <APIItem name="options" type="InsertNodesOptions<V> & { width?: string }">
+    InsertNodesOptions and with to set the insert behavior.
+  </APIItem>
+</APIParameters>
+
+### moveMiddleColumn
+
+Move the middle column to the left of right by options.direction. if the middle node is empty return false and remove it.
+
+<APIParameters>
+  <APIItem name="editor" type="TEditor">
+    The editor instance.
+  </APIItem>
+  <APIItem name="nodeEntry" type="TNodeEntry<N>">
+    The node entry of `column` element
+  </APIItem>
+  <APIItem name="options" type="{ direction: 'left' | 'right' }">
+    Control the middle column move to
+  </APIItem>
+</APIParameters>
+
+### 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` changed.
+If you want to set the `layout` use setNodes.
+
+<APIParameters>
+  <APIItem name="editor" type="TEditor">
+    The editor instance.
+  </APIItem>
+  <APIItem name="groupPathRef" type="PathRef">
+    the path ref of `ColumnGoup`
+  </APIItem>
+  <APIItem name="layout" type="number">
+    The element property of `layout`
+  </APIItem>
+</APIParameters>
+
+## API Components
+
+### useColumnState
+
+<APIReturns>
+  <APIItem name="setDoubleColumn" type="function">
+    Call this function make the `ColumnGroup`'s children, column bisects the
+    parent element space.This nature is set the `layout` property of
+    `ColumnGroup` to `[50,50]`
+  </APIItem>
+  <APIItem name="setThreeColumn" type="function">
+    Set the `layout` property of `ColumnGroup` to `[33, 33, 33]`
+  </APIItem>
+  <APIItem name="setRightSideDoubleColumn" type="function">
+    Set the `layout` property of `ColumnGroup` to `[70,30]`
+  </APIItem>
+  <APIItem name="setLeftSideDoubleColumn" type="function">
+    Set the `layout` property of `ColumnGroup` to `[30,70]`
+  </APIItem>
+  <APIItem name="setDoubleSideDoubleColumn" type="function">
+    Set the `layout` property of `ColumnGroup` to `[25, 50, 25]`
+  </APIItem>
+</APIReturns>
+
+### useDebouncePopoverOpen
+
+<APIReturns>
+
+<APIItem type="boolean">Control the `popover` is open or not</APIItem>
+
+</APIReturns>

apps/www/content/docs/components/changelog.mdx

@@ -10,6 +10,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## April 2024 #9
 
+### April 17 #9.2
+
+- Add `column-element`, `column-group-element`
+
 ### April 6 #9.1
 
 - fix `combobox`: undo was crashing the editor

apps/www/content/docs/components/column-element.mdx

@@ -0,0 +1,65 @@
+---
+title: Column Element
+description: Add Column component to your document.
+component: true
+docs:
+  - route: /docs/column
+    title: Column
+  - route: /docs/components/column-group-element
+    title: Column Group Element
+---
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+<TabsTrigger value="cli">CLI</TabsTrigger>
+<TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx @udecode/plate-ui@latest add column-element
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>
+
+Install the following dependencies:
+
+- [Layout](/docs/column)
+- [Resizable](/docs/components/resizable)
+
+</Step>
+
+<Step>
+
+Copy and paste the following code into your project.
+
+</Step>
+
+<ComponentSource name="column-element" />
+
+<Step>
+
+Update the import paths to match your project setup.
+
+</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Examples
+
+<ComponentPreview name="playground-demo" id="column" />
+
+<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />

apps/www/content/docs/components/column-group-element.mdx

@@ -0,0 +1,67 @@
+---
+title: Column Group Element
+description: Add Column Group component to your document.
+component: true
+docs:
+  - route: /docs/column
+    title: Column
+  - route: /docs/components/column-element
+    title: Column Element
+---
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+<TabsTrigger value="cli">CLI</TabsTrigger>
+<TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx @udecode/plate-ui@latest add column-group-element
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>
+
+Install the following dependencies:
+
+- [Layout](/docs/column)
+- [Button](/docs/components/button)
+- [Popover](/docs/components/popover)
+- [Separator](/docs/components/separator)
+
+</Step>
+
+<Step>
+
+Copy and paste the following code into your project.
+
+</Step>
+
+<ComponentSource name="column-group-element" />
+
+<Step>
+
+Update the import paths to match your project setup.
+
+</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Examples
+
+<ComponentPreview name="playground-demo" id="column" />
+
+<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />

apps/www/content/docs/components/toggle-element.mdx

@@ -1,6 +1,6 @@
 ---
 title: Toggle Element
-description: Add toggles to your document.
+description: Add Toggles to your document.
 component: true
 docs:
   - route: /docs/toggle

apps/www/content/docs/toggle.mdx

@@ -1,7 +1,9 @@
 ---
 title: Toggle
-description: Add toggles to your document.
+description: Add Toggles to your document.
 docs:
+  - route: /docs/components/toggle-element
+    title: Toggle Element
   - route: /docs/components/toggle-toolbar-button
     title: Toggle Button
 ---

apps/www/package.json

@@ -78,6 +78,7 @@
     "@udecode/plate-indent-list": "workspace:^",
     "@udecode/plate-juice": "workspace:^",
     "@udecode/plate-kbd": "workspace:^",
+    "@udecode/plate-layout": "workspace:^",
     "@udecode/plate-line-height": "workspace:^",
     "@udecode/plate-link": "workspace:^",
     "@udecode/plate-list": "workspace:^",

apps/www/src/app/docs/[[...slug]]/page.tsx

@@ -140,7 +140,7 @@ export default async function DocPage({ params }: DocPageProps) {
             </p>
           )}
         </div>
-        {doc.links ? (
+        {doc.links || doc.docs ? (
           <div className="flex flex-wrap items-center gap-1 pt-4">
             {doc.links?.doc && (
               <Link

apps/www/src/app/page.tsx

@@ -23,7 +23,6 @@ const HomeTabs = dynamic(() => import('./_components/home-tabs'));
 const CustomizerDrawer = dynamic(
   () => import('@/components/customizer-drawer')
 );
-
 export default function IndexPage() {
   return (
     <div className="container relative">