From 82df361cd22dd91d997073549255afbd23bdfeb9 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Tue, 6 Feb 2024 13:50:51 +0100 Subject: [PATCH] fix --- .../www/content/docs/components/changelog.mdx | 6 +- .../docs/components/installation/manual.mdx | 68 +++++++++++-- .../docs/components/installation/next.mdx | 24 +++-- .../docs/components/installation/vite.mdx | 14 ++- .../src/app/_components/installation-tab.tsx | 97 ++++++++++++++----- .../src/components/context/settings-store.ts | 8 +- .../default/plate-ui/list-element.tsx | 4 +- 7 files changed, 173 insertions(+), 48 deletions(-) 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 && ( +

+ Next,{' '} + + install Plate UI + + . +

+ )} +
+ ) : ( +
+ Use{' '} + + this template + + . +
+ )} {somePlugins && ( <> Install Plugins @@ -472,7 +522,8 @@ export default function InstallationTab() { Finally, render the editor - + {/*Not using the template?*/} + {/*Wrap your */} { return { ...defaultCheckedPlugins, - normalizeTypes: false, - singleLine: false, + [KEY_NORMALIZE_TYPES]: false, + [KEY_SINGLE_LINE]: false, + [KEY_SELECT_ON_BACKSPACE]: false, list: false, } as Record; }; diff --git a/apps/www/src/registry/default/plate-ui/list-element.tsx b/apps/www/src/registry/default/plate-ui/list-element.tsx index 470da9d99c..93f38e15d6 100644 --- a/apps/www/src/registry/default/plate-ui/list-element.tsx +++ b/apps/www/src/registry/default/plate-ui/list-element.tsx @@ -17,11 +17,11 @@ const ListElementVariants = withVariants(PlateElement, listVariants, [ ]); export const ListElement = withRef( - ({ className, children, variant = 'ul', ...props }, ref) => { + ({ children, variant = 'ul', ...props }, ref) => { const Component = variant!; return ( - + {children} );