📝

.changeset/clever-games-type.md

@@ -0,0 +1,10 @@
+---
+'@udecode/cn': minor
+---
+
+New package
+
+- `cn`: utility function to conditionally join classNames
+- `withCn`: Set default `className` to a component using `cn`
+- `withProps`: Set default props to a component
+- `withVariants`: Set default `className` to a component using variants from `class-variance-authority`

.changeset/clever-games-types.md

@@ -0,0 +1,8 @@
+---
+'@udecode/react-utils': minor
+---
+
+New package
+
+- `PortalBody`, `Text`, `Box`, `createPrimitiveComponent`, `createSlotComponent`, `withProviders` from `@udecode/plate-utils`
+- `createPrimitiveElement`: Creates a component from an element type

.changeset/cli.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-ui': minor
+---
+
+- Remove `utils` aliases: `@udecode/cn` dependency is now used
+- Remove `clsx` dependency

.changeset/common.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-common': patch
+---
+
+- Fix import from RSC

.changeset/commonm.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-common': minor
+---
+
+- re-export `@udecode/react-utils`

.changeset/utils.md

@@ -0,0 +1,7 @@
+---
+'@udecode/plate-utils': major
+---
+
+- Moved `withProps` to `@udecode/cn`
+- Moved `PortalBody`, `Text`, `Box`, `createPrimitiveComponent`, `createSlotComponent`, `withProviders` to `@udecode/react-utils`
+- Removed `getRootProps` (unused)

apps/www/content/docs/components/changelog.mdx

@@ -10,6 +10,42 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## December 2023 #6
 
+### December 27 #6.3
+
+- remove `clsx` from dependency: `class-variance-utility` already exports it as `cx`
+- new dependency: `@udecode/cn`
+- remove `@/lib/utils.ts` in favor of `cn` from `@udecode/cn`. Replace all imports from `@/lib/utils` with `@udecode/cn`
+- import `withProps` from `@udecode/cn` instead of `@udecode/plate-common`
+- all components using `forwardRef` are now using `withRef`. `withProps`, `withCn` and `withVariants` are also used to reduce boilerplate.
+- add `withCn` to ESLint `settings.tailwindcss.callees` and `classAttributes` in your IDE settings 
+
+```tsx
+// before
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+export { Avatar };
+
+// after
+export const Avatar = withCn(
+  AvatarPrimitive.Root,
+  'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full'
+);
+```
+
+
 ### December 25 #6.2
 
 - [dialog](https://github.com/udecode/plate/pull/2824/files#diff-5f7205cdd85718b7f26cef1e746ad67d69c83703135a7e3ad1a9a09ca69c38c8)

apps/www/content/docs/components/cli.mdx

@@ -22,7 +22,6 @@ Where is your global CSS file? › src/style/globals.css
 Do you want to use CSS variables for colors? › no / yes
 Where is your tailwind.config.js located? › tailwind.config.js
 Configure the import alias for components: › @/components
-Configure the import alias for utils: › @udecode/cn
 Are you using React Server Components? › no / yes
 ```
 

apps/www/content/docs/components/installation/next.mdx

@@ -36,7 +36,6 @@ Where is your global CSS file? › src/style/globals.css
 Do you want to use CSS variables for colors? › no / yes
 Where is your tailwind.config.js located? › tailwind.config.js
 Configure the import alias for components: › @/components
-Configure the import alias for utils: › @udecode/cn
 Are you using React Server Components? › no / yes
 ```
 

apps/www/content/docs/components/installation/vite.mdx

@@ -85,7 +85,6 @@ Where is your global CSS file? › › src/styles/globals.css
 Do you want to use CSS variables for colors? › no / yes
 Where is your tailwind.config.js located? › tailwind.config.js
 Configure the import alias for components: › @/components
-Configure the import alias for utils: › @udecode/cn
 Are you using React Server Components? › no / yes (no)
 ```
 

apps/www/src/app/_components/installation-tab.tsx

@@ -85,6 +85,23 @@ export default function InstallationTab() {
     return Array.from(uniqueImports).join(', ');
   }, [plugins, components]);
 
+  // Create cnImports string
+  const cnImports = useMemo(() => {
+    const combinedArray = [...plugins, ...components];
+
+    const uniqueImports = combinedArray.reduce(
+      (acc, { cnImports: _cnImports }) => {
+        if (_cnImports) {
+          _cnImports.forEach((importItem) => acc.add(importItem));
+        }
+        return acc;
+      },
+      new Set<string>()
+    );
+
+    return Array.from(uniqueImports).join(', ');
+  }, [plugins, components]);
+
   const installCommands = useMemo(() => {
     return {
       plugins: `npm install ${Array.from(
@@ -191,7 +208,11 @@ export default function InstallationTab() {
         )} } from '@/components/plate-ui/${componentId}';`
     );
     return [
-      `import { createPlugins, Plate${hasEditor ? '' : ', PlateContent'}${
+      `${
+        cnImports.length > 0
+          ? `import { ${cnImports} } from '@udecode/cn';\n`
+          : ''
+      }import { createPlugins, Plate${hasEditor ? '' : ', PlateContent'}${
         plateImports.length > 0 ? ', ' + plateImports : ''
       } } from '@udecode/plate-common';`,
       ...importsGroups,
@@ -397,7 +418,9 @@ export default function InstallationTab() {
           bash
           code={[
             `npm install react react-dom slate slate-react slate-history slate-hyperscript`,
-            `npm install @udecode/plate-common`,
+            `npm install @udecode/plate-common${
+              someComponents ? ' @udecode/cn' : ''
+            }`,
           ].join('\n')}
         >
           Start from our{' '}

apps/www/src/app/docs/[[...slug]]/page.tsx

@@ -9,9 +9,9 @@ import Balancer from 'react-wrap-balancer';
 
 import { docToPackage } from '@/config/doc-to-package';
 import { siteConfig } from '@/config/site';
+import { absoluteUrl } from '@/lib/absoluteUrl';
 import { formatBytes, getPackageData } from '@/lib/bundlephobia';
 import { getTableOfContents } from '@/lib/toc';
-import { absoluteUrl } from '@/lib/utils';
 import { PackageInfoType } from '@/hooks/use-package-info';
 import { badgeVariants } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';

apps/www/src/config/customizer-items.ts

@@ -57,6 +57,7 @@ export type SettingPlugin = {
   npmPackage?: string;
   packageImports?: string[];
   customImports?: string[];
+  cnImports?: string[];
   plateImports?: string[];
   pluginFactory?: string;
   pluginOptions?: string[];
@@ -71,6 +72,7 @@ export type SettingPlugin = {
     registry?: string;
     filename?: string; // e.g. 'blockquote-element' (default: id)
     customImports?: string[];
+    cnImports?: string[];
     plateImports?: string[];
     pluginOptions?: string[];
     route?: string;
@@ -264,7 +266,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'h1',
         filename: 'heading-element',
-        plateImports: ['withProps'],
+        cnImports: ['withProps'],
         label: 'H1Element',
         pluginKey: 'ELEMENT_H1',
         import: 'HeadingElement',
@@ -274,7 +276,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'h2',
         filename: 'heading-element',
-        plateImports: ['withProps'],
+        cnImports: ['withProps'],
         label: 'H2Element',
         pluginKey: 'ELEMENT_H2',
         import: 'HeadingElement',
@@ -284,7 +286,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'h3',
         filename: 'heading-element',
-        plateImports: ['withProps'],
+        cnImports: ['withProps'],
         label: 'H3Element',
         pluginKey: 'ELEMENT_H3',
         import: 'HeadingElement',
@@ -294,7 +296,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'h4',
         filename: 'heading-element',
-        plateImports: ['withProps'],
+        cnImports: ['withProps'],
         label: 'H4Element',
         pluginKey: 'ELEMENT_H4',
         import: 'HeadingElement',
@@ -304,7 +306,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'h5',
         filename: 'heading-element',
-        plateImports: ['withProps'],
+        cnImports: ['withProps'],
         label: 'H5Element',
         pluginKey: 'ELEMENT_H5',
         import: 'HeadingElement',
@@ -314,7 +316,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'h6',
         filename: 'heading-element',
-        plateImports: ['withProps'],
+        cnImports: ['withProps'],
         label: 'H6Element',
         pluginKey: 'ELEMENT_H6',
         import: 'HeadingElement',
@@ -335,6 +337,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'ul',
         filename: 'list-element',
+        cnImports: ['withProps'],
         label: 'BulletedListElement',
         pluginKey: 'ELEMENT_UL',
         import: 'ListElement',
@@ -344,6 +347,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'ol',
         filename: 'list-element',
+        cnImports: ['withProps'],
         label: 'NumberedListElement',
         pluginKey: 'ELEMENT_OL',
         noImport: true,
@@ -354,6 +358,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'li',
         filename: 'list-element',
+        cnImports: ['withProps'],
         plateImports: ['PlateElement'],
         label: 'ListItemElement',
         pluginKey: 'ELEMENT_LI',
@@ -499,6 +504,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'bold',
         label: 'BoldLeaf',
+        cnImports: ['withProps'],
         plateImports: ['PlateLeaf'],
         pluginKey: 'MARK_BOLD',
         noImport: true,
@@ -599,6 +605,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'italic',
         label: 'ItalicLeaf',
+        cnImports: ['withProps'],
         plateImports: ['PlateLeaf'],
         pluginKey: 'MARK_ITALIC',
         noImport: true,
@@ -634,6 +641,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'strikethrough',
         label: 'StrikethroughLeaf',
+        cnImports: ['withProps'],
         plateImports: ['PlateLeaf'],
         pluginKey: 'MARK_STRIKETHROUGH',
         noImport: true,
@@ -652,6 +660,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'subscript',
         label: 'SubscriptLeaf',
+        cnImports: ['withProps'],
         plateImports: ['PlateLeaf'],
         pluginKey: 'MARK_SUBSCRIPT',
         noImport: true,
@@ -670,6 +679,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'superscript',
         label: 'SuperscriptLeaf',
+        cnImports: ['withProps'],
         plateImports: ['PlateLeaf'],
         pluginKey: 'MARK_SUPERSCRIPT',
         noImport: true,
@@ -688,6 +698,7 @@ export const customizerItems: Record<string, SettingPlugin> = {
       {
         id: 'underline',
         label: 'UnderlineLeaf',
+        cnImports: ['withProps'],
         plateImports: ['PlateLeaf'],
         pluginKey: 'MARK_UNDERLINE',
         noImport: true,

apps/www/src/config/docs.ts

@@ -650,7 +650,7 @@ export const docsConfig: DocsConfig = {
         {
           title: 'cn',
           href: '/docs/api/cn',
-          headings: ['withCn', 'withProps', 'withVariants'],
+          headings: ['cn', 'withCn', 'withProps', 'withVariants'],
         },
       ],
     },

apps/www/src/lib/absoluteUrl.ts

@@ -0,0 +1,3 @@
+export function absoluteUrl(path: string) {
+  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`;
+}