Skip to content

Commit

Permalink
Merge pull request #3727 from udecode/feat/block
Browse files Browse the repository at this point in the history
Fix blocks
  • Loading branch information
zbeyens authored Nov 5, 2024
2 parents b37ea84 + bd3f63f commit 20f5459
Show file tree
Hide file tree
Showing 28 changed files with 232 additions and 53 deletions.
2 changes: 1 addition & 1 deletion apps/www/content/docs/autoformat.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ const plugins = [

### `autoformatRules`

<ComponentSource src="../../templates/plate-playground-template/src/components/editor/plugins/autoformat-plugin.ts" />
<ComponentSource name="autoformat-plugin" />

### `autoformatBlocks`

Expand Down
18 changes: 17 additions & 1 deletion apps/www/content/docs/components/installation/manual.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Here's what demo `tailwind.config.js` looks like:

### Configure styles

Add the following to your `styles/globals.css` file. You can learn more about using CSS variables for theming in the [theming section](/docs/components/theming).
Add the following to your `globals.css` file. You can learn more about using CSS variables for theming in the [theming section](/docs/components/theming).

<ComponentSource
src="../../templates/plate-playground-template/src/app/globals.css"
Expand All @@ -47,4 +47,20 @@ You can now start adding components to your project.
npx shadcx@latest add plate/paragraph-element
```

### Add editor (optional)

Choose your editor to get started ([browse available editors](/editors)).

[Minimal Editor](https://template.platejs.org/editor)
```bash
npx shadcx@latest add plate/editor-basic
```

[AI Editor](https://playground.platejs.org/editor)
```bash
npx shadcx@latest add plate/editor-ai
```

This will add an `/editor` page to your project along with all necessary components as a starting point.

</Steps>
40 changes: 37 additions & 3 deletions apps/www/content/docs/components/installation/next.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,30 @@ description: Install and configure Next.js.

<Callout>

A [template](https://github.com/udecode/plate/tree/main/templates/plate-template) is available to help you get started quickly.

**If you're using Next.js 15, see the [Next.js 15 + React 19](https://ui.shadcn.com/docs/installation/react-19) guide.**
**If you're using React 19, see the [Next.js 15 + React 19](https://ui.shadcn.com/docs/react-19) guide.**

</Callout>

## Quick Start

Choose your editor to get started. These commands will initialize your project and add the editor ([browse available editors](/editors)):

[Minimal Editor](https://template.platejs.org/editor)
```bash
npx shadcx@latest add plate/editor-basic
```

[AI Editor](https://playground.platejs.org/editor)
```bash
npx shadcx@latest add plate/editor-ai
```

This will add an `/editor` page to your project along with all necessary components as a starting point.

## Manual Installation

If you prefer to set up your project step by step, follow these instructions:

<Steps>

### Create project
Expand Down Expand Up @@ -44,4 +62,20 @@ The command above will add the `ParagraphElement` component to your project.

To add more components to your plugins, see [Plugin Components](/docs/plugin-components#register-components).

### Add editor (optional)

Choose your editor to get started ([browse available editors](/editors)).

[Minimal Editor](https://template.platejs.org/editor)
```bash
npx shadcx@latest add plate/editor-basic
```

[AI Editor](https://playground.platejs.org/editor)
```bash
npx shadcx@latest add plate/editor-ai
```

This will add an `/editor` page to your project along with all necessary components as a starting point.

</Steps>
16 changes: 16 additions & 0 deletions apps/www/content/docs/components/installation/vite.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -143,4 +143,20 @@ npx shadcx@latest add plate/paragraph-element

To add the components to your plugins, see [Plugin Components](/docs/plugin-components#register-components).

### Add editor (optional)

Choose your editor to get started ([browse available editors](/editors)).

[Minimal Editor](https://template.platejs.org/editor)
```bash
npx shadcx@latest add plate/editor-basic
```

[AI Editor](https://playground.platejs.org/editor)
```bash
npx shadcx@latest add plate/editor-ai
```

This will add an `/editor` page to your project along with all necessary components as a starting point.

</Steps>
29 changes: 29 additions & 0 deletions apps/www/public/r/index.json
Original file line number Diff line number Diff line change
Expand Up @@ -890,6 +890,35 @@
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"@udecode/plate-list"
],
"doc": {
"description": "A checkbox list element with interactive todo items.",
"docs": [
{
"route": "/docs/list",
"title": "List"
}
],
"examples": [
"list-demo"
]
},
"files": [
{
"path": "plate-ui/todo-list-element.tsx",
"type": "registry:ui"
}
],
"name": "todo-list-element",
"registryDependencies": [
"checkbox",
"plate-element"
],
"type": "registry:ui"
},
{
"dependencies": [
"@udecode/plate-toggle"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/copilot-plugins.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
],
"files": [
{
"content": "'use client';\n\nimport type { TElement } from '@udecode/plate-common';\n\nimport { faker } from '@faker-js/faker';\nimport { CopilotPlugin } from '@udecode/plate-ai/react';\nimport { getAncestorNode } from '@udecode/plate-common';\nimport { serializeMdNodes, stripMarkdown } from '@udecode/plate-markdown';\n\nimport { GhostText } from '@/components/plate-ui/ghost-text';\n\nexport const copilotPlugins = [\n CopilotPlugin.configure(({ api }) => ({\n options: {\n completeOptions: {\n api: '/api/ai/copilot',\n body: {\n system: `You are an advanced AI writing assistant, similar to VSCode Copilot but for general text. Your task is to predict and generate the next part of the text based on the given context.\n \n Rules:\n - Continue the text naturally up to the next punctuation mark (., ,, ;, :, ?, or !).\n - Maintain style and tone. Don't repeat given text.\n - For unclear context, provide the most likely continuation.\n - Handle code snippets, lists, or structured text if needed.\n - Don't include \"\"\" in your response.\n - CRITICAL: Always end with a punctuation mark.\n - CRITICAL: Avoid starting a new block. Do not use block formatting like >, #, 1., 2., -, etc. The suggestion should continue in the same block as the context.\n - If no context is provided or you can't generate a continuation, return \"0\" without explanation.`,\n },\n onError: () => {\n api.copilot.setBlockSuggestion({\n text: stripMarkdown(faker.lorem.sentence()),\n });\n },\n onFinish: (_, completion) => {\n if (completion === '0') return;\n\n api.copilot.setBlockSuggestion({\n //stripMarkdownBlocks in plus GhostText\n text: stripMarkdown(completion),\n });\n },\n },\n debounceDelay: 500,\n getPrompt: ({ editor }) => {\n const contextEntry = getAncestorNode(editor);\n\n if (!contextEntry) return '';\n\n const prompt = serializeMdNodes([contextEntry[0] as TElement]);\n\n return `Continue the text up to the next punctuation mark:\n \"\"\"\n ${prompt}\n \"\"\"`;\n },\n renderGhostText: GhostText,\n },\n })),\n] as const;\n",
"content": "'use client';\n\nimport type { TElement } from '@udecode/plate-common';\n\nimport { faker } from '@faker-js/faker';\nimport { CopilotPlugin } from '@udecode/plate-ai/react';\nimport { getAncestorNode } from '@udecode/plate-common';\nimport { serializeMdNodes, stripMarkdown } from '@udecode/plate-markdown';\n\nimport { GhostText } from '@/components/plate-ui/ghost-text';\n\nexport const copilotPlugins = [\n CopilotPlugin.configure(({ api }) => ({\n options: {\n completeOptions: {\n api: '/api/ai/copilot',\n body: {\n system: `You are an advanced AI writing assistant, similar to VSCode Copilot but for general text. Your task is to predict and generate the next part of the text based on the given context.\n \n Rules:\n - Continue the text naturally up to the next punctuation mark (., ,, ;, :, ?, or !).\n - Maintain style and tone. Don't repeat given text.\n - For unclear context, provide the most likely continuation.\n - Handle code snippets, lists, or structured text if needed.\n - Don't include \"\"\" in your response.\n - CRITICAL: Always end with a punctuation mark.\n - CRITICAL: Avoid starting a new block. Do not use block formatting like >, #, 1., 2., -, etc. The suggestion should continue in the same block as the context.\n - If no context is provided or you can't generate a continuation, return \"0\" without explanation.`,\n },\n onError: () => {\n // Mock the API response. Remove it when you implement the route /api/ai/copilot\n api.copilot.setBlockSuggestion({\n text: stripMarkdown(faker.lorem.sentence()),\n });\n },\n onFinish: (_, completion) => {\n if (completion === '0') return;\n\n api.copilot.setBlockSuggestion({\n text: stripMarkdown(completion),\n });\n },\n },\n debounceDelay: 500,\n getPrompt: ({ editor }) => {\n const contextEntry = getAncestorNode(editor);\n\n if (!contextEntry) return '';\n\n const prompt = serializeMdNodes([contextEntry[0] as TElement]);\n\n return `Continue the text up to the next punctuation mark:\n \"\"\"\n ${prompt}\n \"\"\"`;\n },\n renderGhostText: GhostText,\n },\n })),\n] as const;\n",
"path": "components/editor/plugins/copilot-plugins.tsx",
"target": "components/editor/plugins/copilot-plugins.tsx",
"type": "registry:component"
Expand Down
31 changes: 31 additions & 0 deletions apps/www/public/r/styles/default/todo-list-element.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{
"dependencies": [
"@udecode/plate-list"
],
"doc": {
"description": "A checkbox list element with interactive todo items.",
"docs": [
{
"route": "/docs/list",
"title": "List"
}
],
"examples": [
"list-demo"
]
},
"files": [
{
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n useTodoListElement,\n useTodoListElementState,\n} from '@udecode/plate-list/react';\n\nimport { Checkbox } from './checkbox';\nimport { PlateElement } from './plate-element';\n\nexport const TodoListElement = withRef<typeof PlateElement>(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n const state = useTodoListElementState({ element });\n const { checkboxProps } = useTodoListElement(state);\n\n return (\n <PlateElement\n ref={ref}\n className={cn('flex flex-row py-1', className)}\n {...props}\n >\n <div\n className=\"mr-1.5 flex select-none items-center justify-center\"\n contentEditable={false}\n >\n <Checkbox {...checkboxProps} />\n </div>\n <span\n className={cn(\n 'flex-1 focus:outline-none',\n state.checked && 'text-muted-foreground line-through'\n )}\n contentEditable={!state.readOnly}\n suppressContentEditableWarning\n >\n {children}\n </span>\n </PlateElement>\n );\n }\n);\n",
"path": "plate-ui/todo-list-element.tsx",
"target": "components/plate-ui/todo-list-element.tsx",
"type": "registry:ui"
}
],
"name": "todo-list-element",
"registryDependencies": [
"checkbox",
"plate-element"
],
"type": "registry:ui"
}
Loading

0 comments on commit 20f5459

Please sign in to comment.