Skip to content

Commit 3314038

Browse files
zbeyenszbeyens
authored
Merge pull request #3118 from udecode/feat/layout
Column plugin
2 parents 9b6ffdd + fac0fed commit 3314038

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+1204
-16
lines changed

‎.changeset/calm-pans-grow.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@udecode/plate-layout": minor
3+
---
4+
5+
Add `createColumnPlugin`

‎.changeset/ninety-jeans-worry.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@udecode/plate-serializer-md": patch
3+
"@udecode/plate-indent-list": patch
4+
"@udecode/plate-toggle": patch
5+
"@udecode/plate-emoji": patch
6+
"@udecode/plate-table": patch
7+
---
8+
9+
Missing exports

‎apps/www/content/docs/column.mdx

+157
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
---
2+
title: Column
3+
description: Add Columns to your document.
4+
docs:
5+
- route: /docs/components/column-element
6+
title: Column Element
7+
- route: /docs/components/column-group-element
8+
title: Column Group Element
9+
---
10+
11+
<ComponentPreview name="playground-demo" id="column" />
12+
13+
<PackageInfo>
14+
15+
## Features
16+
17+
- Add columns to your document.
18+
- Choose from a variety of column layouts using `column-group-element` toolbar.
19+
- [ ] Resizable columns
20+
21+
</PackageInfo>
22+
23+
## Installation
24+
25+
```bash
26+
npm install @udecode/plate-layout
27+
```
28+
29+
## Usage
30+
31+
```tsx
32+
// ...
33+
import { createColumnPlugin } from '@udecode/plate-layout';
34+
35+
const plugins = [
36+
// ...otherPlugins,
37+
createColumnPlugin(),
38+
];
39+
```
40+
41+
## API
42+
43+
### createColumnPlugin
44+
45+
Add Column Plugin to your document.
46+
47+
### TColumnGroupElement
48+
49+
<APIAttributes>
50+
Extends `TElement`.
51+
52+
<APIItem name="layout" type="number[]" optional>
53+
Set the width of it’s children `Column`
54+
</APIItem>
55+
</APIAttributes>
56+
57+
58+
59+
### TColumnElement
60+
61+
<APIAttributes>
62+
Extends `TElement`.
63+
64+
<APIItem name="width" type="string" optional>
65+
The `Column`'s width end with `%`
66+
</APIItem>
67+
</APIAttributes>
68+
69+
70+
71+
### insertColumnGroup
72+
73+
Insert an columnGroup with two empty column.
74+
75+
<APIParameters>
76+
<APIItem name="editor" type="TEditor">
77+
The editor instance.
78+
</APIItem>
79+
</APIParameters>
80+
81+
### insertEmptyColumn
82+
83+
Insert an empty column. You can set the with by options.width default is "33%"
84+
85+
<APIParameters>
86+
<APIItem name="editor" type="TEditor">
87+
The editor instance.
88+
</APIItem>
89+
<APIItem name="options" type="InsertNodesOptions<V> & { width?: string }">
90+
InsertNodesOptions and with to set the insert behavior.
91+
</APIItem>
92+
</APIParameters>
93+
94+
### moveMiddleColumn
95+
96+
Move the middle column to the left of right by options.direction. if the middle node is empty return false and remove it.
97+
98+
<APIParameters>
99+
<APIItem name="editor" type="TEditor">
100+
The editor instance.
101+
</APIItem>
102+
<APIItem name="nodeEntry" type="TNodeEntry<N>">
103+
The node entry of `column` element
104+
</APIItem>
105+
<APIItem name="options" type="{ direction: 'left' | 'right' }">
106+
Control the middle column move to
107+
</APIItem>
108+
</APIParameters>
109+
110+
### setColumnWidth
111+
112+
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.
113+
If you want to set the `layout` use setNodes.
114+
115+
<APIParameters>
116+
<APIItem name="editor" type="TEditor">
117+
The editor instance.
118+
</APIItem>
119+
<APIItem name="groupPathRef" type="PathRef">
120+
the path ref of `ColumnGoup`
121+
</APIItem>
122+
<APIItem name="layout" type="number">
123+
The element property of `layout`
124+
</APIItem>
125+
</APIParameters>
126+
127+
## API Components
128+
129+
### useColumnState
130+
131+
<APIReturns>
132+
<APIItem name="setDoubleColumn" type="function">
133+
Call this function make the `ColumnGroup`'s children, column bisects the
134+
parent element space.This nature is set the `layout` property of
135+
`ColumnGroup` to `[50,50]`
136+
</APIItem>
137+
<APIItem name="setThreeColumn" type="function">
138+
Set the `layout` property of `ColumnGroup` to `[33, 33, 33]`
139+
</APIItem>
140+
<APIItem name="setRightSideDoubleColumn" type="function">
141+
Set the `layout` property of `ColumnGroup` to `[70,30]`
142+
</APIItem>
143+
<APIItem name="setLeftSideDoubleColumn" type="function">
144+
Set the `layout` property of `ColumnGroup` to `[30,70]`
145+
</APIItem>
146+
<APIItem name="setDoubleSideDoubleColumn" type="function">
147+
Set the `layout` property of `ColumnGroup` to `[25, 50, 25]`
148+
</APIItem>
149+
</APIReturns>
150+
151+
### useDebouncePopoverOpen
152+
153+
<APIReturns>
154+
155+
<APIItem type="boolean">Control the `popover` is open or not</APIItem>
156+
157+
</APIReturns>

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

+4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
1010

1111
## April 2024 #9
1212

13+
### April 17 #9.2
14+
15+
- Add `column-element`, `column-group-element`
16+
1317
### April 6 #9.1
1418

1519
- fix `combobox`: undo was crashing the editor

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

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: Column Element
3+
description: Add Column component to your document.
4+
component: true
5+
docs:
6+
- route: /docs/column
7+
title: Column
8+
- route: /docs/components/column-group-element
9+
title: Column Group Element
10+
---
11+
12+
## Installation
13+
14+
<Tabs defaultValue="cli">
15+
16+
<TabsList>
17+
<TabsTrigger value="cli">CLI</TabsTrigger>
18+
<TabsTrigger value="manual">Manual</TabsTrigger>
19+
</TabsList>
20+
<TabsContent value="cli">
21+
22+
```bash
23+
npx @udecode/plate-ui@latest add column-element
24+
```
25+
26+
</TabsContent>
27+
28+
<TabsContent value="manual">
29+
30+
<Steps>
31+
32+
<Step>
33+
34+
Install the following dependencies:
35+
36+
- [Layout](/docs/column)
37+
- [Resizable](/docs/components/resizable)
38+
39+
</Step>
40+
41+
<Step>
42+
43+
Copy and paste the following code into your project.
44+
45+
</Step>
46+
47+
<ComponentSource name="column-element" />
48+
49+
<Step>
50+
51+
Update the import paths to match your project setup.
52+
53+
</Step>
54+
55+
</Steps>
56+
57+
</TabsContent>
58+
59+
</Tabs>
60+
61+
## Examples
62+
63+
<ComponentPreview name="playground-demo" id="column" />
64+
65+
<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />

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

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: Column Group Element
3+
description: Add Column Group component to your document.
4+
component: true
5+
docs:
6+
- route: /docs/column
7+
title: Column
8+
- route: /docs/components/column-element
9+
title: Column Element
10+
---
11+
12+
## Installation
13+
14+
<Tabs defaultValue="cli">
15+
16+
<TabsList>
17+
<TabsTrigger value="cli">CLI</TabsTrigger>
18+
<TabsTrigger value="manual">Manual</TabsTrigger>
19+
</TabsList>
20+
<TabsContent value="cli">
21+
22+
```bash
23+
npx @udecode/plate-ui@latest add column-group-element
24+
```
25+
26+
</TabsContent>
27+
28+
<TabsContent value="manual">
29+
30+
<Steps>
31+
32+
<Step>
33+
34+
Install the following dependencies:
35+
36+
- [Layout](/docs/column)
37+
- [Button](/docs/components/button)
38+
- [Popover](/docs/components/popover)
39+
- [Separator](/docs/components/separator)
40+
41+
</Step>
42+
43+
<Step>
44+
45+
Copy and paste the following code into your project.
46+
47+
</Step>
48+
49+
<ComponentSource name="column-group-element" />
50+
51+
<Step>
52+
53+
Update the import paths to match your project setup.
54+
55+
</Step>
56+
57+
</Steps>
58+
59+
</TabsContent>
60+
61+
</Tabs>
62+
63+
## Examples
64+
65+
<ComponentPreview name="playground-demo" id="column" />
66+
67+
<ComponentSource src="../../templates/plate-playground-template/src/lib/plate/plate-plugins.ts" />

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Toggle Element
3-
description: Add toggles to your document.
3+
description: Add Toggles to your document.
44
component: true
55
docs:
66
- route: /docs/toggle

‎apps/www/content/docs/toggle.mdx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
---
22
title: Toggle
3-
description: Add toggles to your document.
3+
description: Add Toggles to your document.
44
docs:
5+
- route: /docs/components/toggle-element
6+
title: Toggle Element
57
- route: /docs/components/toggle-toolbar-button
68
title: Toggle Button
79
---

‎apps/www/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878
"@udecode/plate-indent-list": "workspace:^",
7979
"@udecode/plate-juice": "workspace:^",
8080
"@udecode/plate-kbd": "workspace:^",
81+
"@udecode/plate-layout": "workspace:^",
8182
"@udecode/plate-line-height": "workspace:^",
8283
"@udecode/plate-link": "workspace:^",
8384
"@udecode/plate-list": "workspace:^",

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ export default async function DocPage({ params }: DocPageProps) {
140140
</p>
141141
)}
142142
</div>
143-
{doc.links ? (
143+
{doc.links || doc.docs ? (
144144
<div className="flex flex-wrap items-center gap-1 pt-4">
145145
{doc.links?.doc && (
146146
<Link

‎apps/www/src/app/page.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ const HomeTabs = dynamic(() => import('./_components/home-tabs'));
2323
const CustomizerDrawer = dynamic(
2424
() => import('@/components/customizer-drawer')
2525
);
26-
2726
export default function IndexPage() {
2827
return (
2928
<div className="container relative">

0 commit comments

Comments
 (0)