diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
index 3c487b804b..05ccf28eb5 100644
--- a/apps/www/content/docs/components/changelog.mdx
+++ b/apps/www/content/docs/components/changelog.mdx
@@ -10,9 +10,13 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
## February 2025 #8
+### February 6 #8.2
+
+- fix `list-element`: variant styles were missing
+
### February 5 #8.1
-- Fix: Mention input removed when clicking mention combobox scrollbar
+- fix `mention-element`: Mention input removed when clicking mention combobox scrollbar
([#2919](https://github.com/udecode/plate/issues/2919))
## January 2024 #7
diff --git a/apps/www/content/docs/components/installation/manual.mdx b/apps/www/content/docs/components/installation/manual.mdx
index 3cac55c4af..cc21d32b14 100644
--- a/apps/www/content/docs/components/installation/manual.mdx
+++ b/apps/www/content/docs/components/installation/manual.mdx
@@ -19,14 +19,6 @@ Add the following dependencies to your project:
npm install @udecode/cn tailwindcss-animate class-variance-authority tailwind-merge lucide-react
```
-### Add icons
-
-Add the icons you'll use in `components/icons.tsx`:
-
-
-
-We use icons from [Lucide](https://lucide.dev). You can use any icon library you want.
-
### Configure path aliases
We use the `@` alias. This is how we configure it in `tsconfig.json`:
@@ -64,8 +56,66 @@ Add the following to your `styles/globals.css` file. You can learn more about us
open
/>
-### That's it
+### Run the CLI
+
+```bash
+npx @udecode/plate-ui@latest init
+```
+
+### Configure plate-components.json
+
+You will be asked a few questions to configure `plate-components.json`:
+
+```txt showLineNumbers
+Which style would you like to use? › Default
+Which color would you like to use as base color? › Slate
+Where is your global CSS file? › src/style/globals.css
+Do you want to use CSS variables for colors? › no / yes
+Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
+Where is your tailwind.config.js located? › tailwind.config.js
+Configure the import alias for components: › @/components
+Configure the import alias for ui: › @/components/plate-ui
+Are you using React Server Components? › no / yes
+```
+
+### Add TooltipProvider
+
+Wrap your editor with `TooltipProvider`. Here's an example:
+
+
+
+### Add icons
+
+Add the icons you'll use in `components/icons.tsx`:
+
+
+
+We use icons from [Lucide](https://lucide.dev). You can use any icon library you want.
+
+### Add components
You can now start adding components to your project.
+```bash
+npx @udecode/plate-ui@latest add button
+```
+
+The command above will add the `Button` component to your project. You can then import it like this:
+
+```tsx {1,6} showLineNumbers
+import { Button } from '@/components/plate-ui/button';
+
+export default function Home() {
+ return (
+
+
+
+ );
+}
+```
+
+### Register components
+
+To add the components to your plugins, see [Plugin Components](/docs/plugin-components#register-components).
+
diff --git a/apps/www/content/docs/components/installation/next.mdx b/apps/www/content/docs/components/installation/next.mdx
index 43c34d596f..e581be1102 100644
--- a/apps/www/content/docs/components/installation/next.mdx
+++ b/apps/www/content/docs/components/installation/next.mdx
@@ -96,15 +96,7 @@ module.exports = {
}
```
-### Add icons
-
-Add the icons you'll use in `components/icons.tsx`:
-
-
-
-We use icons from [Lucide](https://lucide.dev). You can use any icon library you want.
-
-## App structure
+### App structure
Here's how we structure our Next.js apps. You can use this as a reference:
@@ -136,6 +128,20 @@ Here's how we structure our Next.js apps. You can use this as a reference:
- The rest of the components such as `` and `` are placed in the `components` folder.
- The `styles` folder contains the global CSS.
+### Add TooltipProvider
+
+Wrap your editor with `TooltipProvider`. Here's an example:
+
+
+
+### Add icons
+
+Add the icons you'll use in `components/icons.tsx`:
+
+
+
+We use icons from [Lucide](https://lucide.dev). You can use any icon library you want.
+
### Add components
You can now start adding components to your project.
diff --git a/apps/www/content/docs/components/installation/vite.mdx b/apps/www/content/docs/components/installation/vite.mdx
index b29ac27f1f..8f4fc02c40 100644
--- a/apps/www/content/docs/components/installation/vite.mdx
+++ b/apps/www/content/docs/components/installation/vite.mdx
@@ -90,6 +90,12 @@ Configure the import alias for ui: › @/components/plate-ui
Are you using React Server Components? › no / yes (no)
```
+### Add TooltipProvider
+
+Wrap your editor with `TooltipProvider`. Here's an example:
+
+
+
### Add icons
Add the icons you'll use in `components/icons.tsx`:
@@ -98,7 +104,7 @@ Add the icons you'll use in `components/icons.tsx`:
We use icons from [Lucide](https://lucide.dev). You can use any icon library you want.
-### That's it
+### Add components
You can now start adding components to your project.
@@ -109,7 +115,7 @@ npx @udecode/plate-ui@latest add button
The command above will add the `Button` component to your project. You can then import it like this:
```tsx {1,6} showLineNumbers
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/plate-ui/button';
export default function Home() {
return (
@@ -120,4 +126,8 @@ export default function Home() {
}
```
+### Register components
+
+To add the components to your plugins, see [Plugin Components](/docs/plugin-components#register-components).
+
diff --git a/apps/www/src/app/_components/installation-tab.tsx b/apps/www/src/app/_components/installation-tab.tsx
index da6524c7bf..ff35b2604f 100644
--- a/apps/www/src/app/_components/installation-tab.tsx
+++ b/apps/www/src/app/_components/installation-tab.tsx
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
import { KEY_DND } from '@udecode/plate-dnd';
import { uniqBy } from 'lodash';
@@ -13,6 +13,8 @@ import {
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import {
settingsStore,
SettingsStoreValue,
@@ -59,6 +61,7 @@ export default function InstallationTab() {
const checkedPlugins = settingsStore.use.checkedPlugins();
const checkedComponents = settingsStore.use.checkedComponents();
const mounted = useMounted();
+ const [isManual, setIsManual] = useState(false);
// Assign initial values to plugins and components using useMemo
const { plugins, components } = useMemo(
@@ -128,9 +131,9 @@ export default function InstallationTab() {
},
new Set()
)
- ).join(' ')}`,
+ ).join(' ')}${isManual && ' tooltip'}`,
};
- }, [plugins, components]);
+ }, [plugins, components, isManual]);
const componentImports = useMemo(() => {
return components.reduce(
@@ -213,7 +216,8 @@ export default function InstallationTab() {
', '
)} } from '@/components/plate-ui/${componentId}';`
);
- return [
+
+ const imports = [
`${
cnImports.length > 0
? `import { ${cnImports} } from '@udecode/cn';\n`
@@ -225,13 +229,21 @@ export default function InstallationTab() {
...customImports,
'',
...componentImportsGroup,
- ].join('\n');
+ ];
+
+ if (someComponents && isManual) {
+ imports.push(
+ `import { TooltipProvider } from '@/components/plate-ui/tooltip';`
+ );
+ }
+ return imports.join('\n');
}, [
cnImports,
componentImports,
customImports,
groupedImportsByPackage,
hasEditor,
+ isManual,
plateImports,
]);
@@ -327,6 +339,10 @@ export default function InstallationTab() {
}
};
+ if (isManual) {
+ addLine(``, true);
+ }
+
if (hasDnd) {
addLine(``, true);
}
@@ -383,6 +399,10 @@ export default function InstallationTab() {
addLine(``, false, true);
}
+ if (isManual) {
+ addLine(``, false, true);
+ }
+
const plateCode = [
`const initialValue = [`,
` {`,
@@ -421,24 +441,54 @@ export default function InstallationTab() {
Install Plate
- {
+ setIsManual(value === 'manual');
+ }}
>
- Start from our{' '}
-
- template
- {' '}
- or install the peer dependencies and Plate:
-
+
+
+
+
+
+
+
+
+
+ {isManual ? (
+
+
+ Install the peer dependencies and Plate:
+
+ {someComponents && (
+