Add TooltipProvider and icons to interactive builder

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

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`:
-
-<ComponentSource src="../../templates/plate-playground-template/src/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:
+
+<ComponentSource src="../../templates/plate-template/src/app/layout.tsx" />
+
+### Add icons
+
+Add the icons you'll use in `components/icons.tsx`:
+
+<ComponentSource src="../../templates/plate-playground-template/src/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 (
+    <div>
+      <Button>Click me</Button>
+    </div>
+  );
+}
+```
+
+### Register components
+
+To add the components to your plugins, see [Plugin Components](/docs/plugin-components#register-components).
+
 </Steps>

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`:
-
-<ComponentSource src="../../templates/plate-playground-template/src/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 `<PageHeader />` and `<MainNav />` are placed in the `components` folder.
 - The `styles` folder contains the global CSS.
 
+### Add TooltipProvider
+
+Wrap your editor with `TooltipProvider`. Here's an example:
+
+<ComponentSource src="../../templates/plate-template/src/app/layout.tsx" />
+
+### Add icons
+
+Add the icons you'll use in `components/icons.tsx`:
+
+<ComponentSource src="../../templates/plate-playground-template/src/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.

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:
+
+<ComponentSource src="../../templates/plate-template/src/app/layout.tsx" />
+
 ### 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).
+
 </Steps>

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<string>()
         )
-      ).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(`<TooltipProvider>`, true);
+  }
+
   if (hasDnd) {
     addLine(`<DndProvider backend={HTML5Backend}>`, true);
   }
@@ -383,6 +399,10 @@ export default function InstallationTab() {
     addLine(`</DndProvider>`, false, true);
   }
 
+  if (isManual) {
+    addLine(`</TooltipProvider>`, false, true);
+  }
+
   const plateCode = [
     `const initialValue = [`,
     `  {`,
@@ -421,24 +441,54 @@ export default function InstallationTab() {
 
       <Steps>
         <Step>Install Plate</Step>
-        <InstallationCode
-          bash
-          code={[
-            `npm install react react-dom slate slate-react slate-history slate-hyperscript`,
-            `npm install @udecode/plate-common${
-              someComponents ? ' @udecode/cn' : ''
-            }`,
-          ].join('\n')}
+        <RadioGroup
+          value={isManual ? 'manual' : 'template'}
+          onValueChange={(value) => {
+            setIsManual(value === 'manual');
+          }}
         >
-          Start from our{' '}
-          <Link
-            href="https://github.com/udecode/plate-template"
-            target="_blank"
-          >
-            template
-          </Link>{' '}
-          or install the peer dependencies and Plate:
-        </InstallationCode>
+          <div className="mt-4 flex items-center space-x-2">
+            <RadioGroupItem value="template" id="r2" />
+            <Label htmlFor="r2">Start from Template</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="manual" id="r1" />
+            <Label htmlFor="r1">Manual installation</Label>
+          </div>
+        </RadioGroup>
+        {isManual ? (
+          <div>
+            <InstallationCode
+              bash
+              code={[
+                `npm install react react-dom slate slate-react slate-history slate-hyperscript`,
+                `npm install @udecode/plate-common`,
+              ].join('\n')}
+            >
+              Install the peer dependencies and Plate:
+            </InstallationCode>
+            {someComponents && (
+              <p className="mt-4">
+                Next,{' '}
+                <Link href="/docs/components/installation" target="_blank">
+                  install Plate UI
+                </Link>
+                .
+              </p>
+            )}
+          </div>
+        ) : (
+          <div className="mt-6">
+            Use{' '}
+            <Link
+              href="https://github.com/udecode/plate-template"
+              target="_blank"
+            >
+              this template
+            </Link>
+            .
+          </div>
+        )}
         {somePlugins && (
           <>
             <Step>Install Plugins</Step>

apps/www/src/components/context/settings-store.ts

@@ -1,6 +1,9 @@
 'use client';
 
+import { KEY_SINGLE_LINE } from '@udecode/plate-break';
 import { createZustandStore } from '@udecode/plate-common';
+import { KEY_NORMALIZE_TYPES } from '@udecode/plate-normalizers';
+import { KEY_SELECT_ON_BACKSPACE } from '@udecode/plate-select';
 import { toast } from 'sonner';
 
 import { customizerItems, SettingPlugin } from '@/config/customizer-items';
@@ -28,8 +31,9 @@ const defaultCheckedPlugins = customizerList.reduce(
 export const getDefaultCheckedPlugins = () => {
   return {
     ...defaultCheckedPlugins,
-    normalizeTypes: false,
-    singleLine: false,
+    [KEY_NORMALIZE_TYPES]: false,
+    [KEY_SINGLE_LINE]: false,
+    [KEY_SELECT_ON_BACKSPACE]: false,
     list: false,
   } as Record<string, boolean>;
 };

apps/www/src/registry/default/plate-ui/list-element.tsx

@@ -17,11 +17,11 @@ const ListElementVariants = withVariants(PlateElement, listVariants, [
 ]);
 
 export const ListElement = withRef<typeof ListElementVariants>(
-  ({ className, children, variant = 'ul', ...props }, ref) => {
+  ({ children, variant = 'ul', ...props }, ref) => {
     const Component = variant!;
 
     return (
-      <ListElementVariants ref={ref} asChild {...props}>
+      <ListElementVariants ref={ref} asChild variant={variant} {...props}>
         <Component>{children}</Component>
       </ListElementVariants>
     );

templates/plate-playground-template/components.json

@@ -9,7 +9,6 @@
     "cssVariables": true
   },
   "aliases": {
-    "components": "@/components",
-    "utils": "@udecode/cn"
+    "components": "@/components"
   }
 }