Skip to content

Commit

Permalink
docs
Browse files Browse the repository at this point in the history
  • Loading branch information
felixfeng33 committed Oct 26, 2024
1 parent c941773 commit 808af9a
Show file tree
Hide file tree
Showing 26 changed files with 460 additions and 32 deletions.
77 changes: 77 additions & 0 deletions apps/www/content/docs/components/ai-leaf.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
---
title: AI Leaf
description: Opens the AI menu from the editor toolbar.
component: true
docs:
- route: /docs/ai
title: AI
- route: https://pro.platejs.org/docs/components/ai-leaf
title: AI Leaf
---

## 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 ai-leaf -r plate-ui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>

Install the following dependencies:

- [AI](/docs/ai)


</Step>

<Step>

Copy and paste the following code into your project.

</Step>

<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/ai-leaf.tsx" />

<Step>

Update the import paths to match your project setup.

</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

<ComponentPreview name="playground-demo" id="copilot" />

<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/ai-leaf.tsx" />

## Plate Plus

In Plate Plus, we provides more advanced styles and complete backend setup

All of the backend setup is available in [Potion template](https://pro.platejs.org/docs/templates/potion).

<ComponentPreviewPro
name="pro-iframe-demo"
id="pro-ai"
component="ai"
/>
84 changes: 84 additions & 0 deletions apps/www/content/docs/components/ai-menu.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
---
title: AI Menu
description: AI-powered menu for generating and inserting content in the editor.
component: true
docs:
- route: /docs/ai
title: AI
- route: https://pro.platejs.org/docs/components/ai-menu
title: AI Menu
---

## 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 ai-menu -r plate-ui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>

Install the following dependencies:

```bash
npm install ai sonner
```

- [AI](/docs/ai)
- [Command](/docs/components/command)
- [Popover](/docs/components/popover)


</Step>

<Step>

Copy and paste the following code into your project.

</Step>

<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/ai-menu.tsx" />
<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/ai-menu-items.tsx" />

<Step>

Update the import paths to match your project setup.

</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

<ComponentPreview name="playground-demo" id="copilot" />

<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/ai-menu.tsx" />
<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/ai-menu-items.tsx" />
## Plate Plus

In Plate Plus, we provides more advanced styles and complete backend setup

All of the backend setup is available in [Potion template](https://pro.platejs.org/docs/templates/potion).

<ComponentPreviewPro
name="pro-iframe-demo"
id="pro-ai"
component="ai"
/>
78 changes: 78 additions & 0 deletions apps/www/content/docs/components/ai-toolbar-button.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
---
title: AI Toolbar Button
description: AI toolbar button
component: true
docs:
- route: /docs/ai
title: AI
- route: https://pro.platejs.org/docs/components/ai-toolbar-button
title: AI Toolbar Button
---

## 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 ai-toolbar-button -r plate-ui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>

Install the following dependencies:

- [AI](/docs/ai)
- [Toolbar](/docs/components/toolbar)


</Step>

<Step>

Copy and paste the following code into your project.

</Step>

<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/ai-toolbar-button.tsx" />

<Step>

Update the import paths to match your project setup.

</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

<ComponentPreview name="playground-demo" id="copilot" />

<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/ai-toolbar-button.tsx" />

## Plate Plus

In Plate Plus, we provides more advanced styles and complete backend setup

All of the backend setup is available in [Potion template](https://pro.platejs.org/docs/templates/potion).

<ComponentPreviewPro
name="pro-iframe-demo"
id="pro-ai"
component="ai"
/>
8 changes: 5 additions & 3 deletions apps/www/content/docs/components/block-context-menu.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ docs:
<TabsContent value="cli">

```bash
npx @udecode/plate-ui@latest add block-context-menu
npx @udecode/plate-ui@latest add block-context-menu -r plate-ui
```

</TabsContent>
Expand All @@ -37,6 +37,8 @@ Install the following dependencies:
```bash
npm install @radix-ui/react-context-menu
```
- [BlockSelection](/docs/block-selection)
- [BlockMenu](/docs/block-menu)

</Step>

Expand All @@ -46,7 +48,7 @@ Copy and paste the following code into your project.

</Step>

<ComponentSource name="block-context-menu" />
<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/block-context-menu.tsx" />

<Step>

Expand All @@ -64,7 +66,7 @@ Update the import paths to match your project setup.

<ComponentPreview name="playground-demo" id="blockmenu" />

<ComponentSource name="block-context-menu" />
<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/block-context-menu.tsx" />

## Plus

Expand Down
4 changes: 4 additions & 0 deletions apps/www/content/docs/components/changelog.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver

## October 2024 #15

### October 26 #15.5

- Rename `indent-todo-marker-component` to `indent-todo-marker`.

### October 25 #15.4

- `slash-input-element`: add AI command & add `focusEditor` option
Expand Down
14 changes: 11 additions & 3 deletions apps/www/content/docs/components/ghost-text.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ docs:
<TabsContent value="cli">

```bash
npx @udecode/plate-ui@latest add ghost-text
npx @udecode/plate-ui@latest add ghost-text -r plate-ui
```

</TabsContent>
Expand All @@ -31,11 +31,19 @@ npx @udecode/plate-ui@latest add ghost-text

<Step>

Install the following dependencies:

- [Copilot](/docs/copilot)

</Step>

<Step>

Copy and paste the following code into your project.

</Step>

<ComponentSource name="ghost-text" />
<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/ghost-text.tsx" />

<Step>

Expand All @@ -53,7 +61,7 @@ Update the import paths to match your project setup.

<ComponentPreview name="playground-demo" id="copilot" />

<ComponentSource name="ghost-text" />
<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/ghost-text.tsx" />

## Plate Plus

Expand Down
64 changes: 64 additions & 0 deletions apps/www/content/docs/components/indent-todo-marker.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
---
title: Indent Todo Marker
description: Turn any block into a todo list item.
component: true
docs:
- route: /docs/indent-list
title: Indent List
- route: https://pro.platejs.org/docs/components/indent-todo-marker
title: Indent Todo Marker
---

## 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 indent-todo-marker -r plate-ui
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>

Install the following dependencies:

- [Indent List](/docs/indent-list)

</Step>

<Step>

Copy and paste the following code into your project.

</Step>

<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/indent-todo-marker.tsx" />

<Step>

Update the import paths to match your project setup.

</Step>

</Steps>

</TabsContent>

</Tabs>

## Examples

<ComponentPreview name="playground-demo" id="copilot" />

<ComponentSource src="../../templates/plate-playground-template/src/components/plate-ui/indent-todo-marker.tsx" />
Loading

0 comments on commit 808af9a

Please sign in to comment.