diff --git a/.changeset/clever-games-type.md b/.changeset/clever-games-type.md new file mode 100644 index 0000000000..abd41f28da --- /dev/null +++ b/.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` diff --git a/.changeset/clever-games-types.md b/.changeset/clever-games-types.md new file mode 100644 index 0000000000..07b6f2642d --- /dev/null +++ b/.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 diff --git a/.changeset/cli.md b/.changeset/cli.md new file mode 100644 index 0000000000..1e26ed128b --- /dev/null +++ b/.changeset/cli.md @@ -0,0 +1,6 @@ +--- +'@udecode/plate-ui': minor +--- + +- Remove `utils` aliases: `@udecode/cn` dependency is now used +- Remove `clsx` dependency diff --git a/.changeset/common.md b/.changeset/common.md new file mode 100644 index 0000000000..8135befc40 --- /dev/null +++ b/.changeset/common.md @@ -0,0 +1,5 @@ +--- +'@udecode/plate-common': patch +--- + +- Fix import from RSC diff --git a/.changeset/commonm.md b/.changeset/commonm.md new file mode 100644 index 0000000000..2c86eae581 --- /dev/null +++ b/.changeset/commonm.md @@ -0,0 +1,5 @@ +--- +'@udecode/plate-common': minor +--- + +- re-export `@udecode/react-utils` diff --git a/.changeset/utils.md b/.changeset/utils.md new file mode 100644 index 0000000000..b988609fb2 --- /dev/null +++ b/.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) diff --git a/apps/www/content/docs/api/cn.mdx b/apps/www/content/docs/api/cn.mdx new file mode 100644 index 0000000000..1498b65f92 --- /dev/null +++ b/apps/www/content/docs/api/cn.mdx @@ -0,0 +1,78 @@ +--- +title: cn +description: API reference for @udecode/cn. +--- + +`@udecode/cn` contains utility functions for React & Tailwind. + +### cn + +Conditionally add Tailwind CSS classes without conflicts. + + + + Class values set using `clsx` and `tailwind-merge`. + + + + +`className` string. + + + +### withCn + +Set default `className` to a component. + + + + The component to which props will be added. + + + The default `className` to set using `cn`. + + + + +A new component that includes the default `className`. + + + +### withProps + +Set default props to a component. + + + + The component to which props will be added. + + + The props to be added to the component. + + + + +A new component that includes the default props. + + + +### withVariants + +Set default `className` to a component using variants from `class-variance-authority`. + + + + The component to which props will be added. + + + The variants as the default `className`. + + + The props to exclude from `Component`. Set the props that are only used for variants. + + + + +A new component that includes the default `className`. + + diff --git a/apps/www/content/docs/api/react-utils.mdx b/apps/www/content/docs/api/react-utils.mdx new file mode 100644 index 0000000000..41f8e77e2b --- /dev/null +++ b/apps/www/content/docs/api/react-utils.mdx @@ -0,0 +1,82 @@ +--- +title: React Utils +description: API reference for @udecode/react-utils. +--- + +`@udecode/react-utils` contains utility functions for React. + +### PortalBody + +Renders a React component in the `document.body` using a portal. + +### Text + +Generic component for rendering a span. + +### Box + +Generic component for rendering a div. + +### createPrimitiveComponent + +Creates a primitive component factory which utilizes hooks for managing state, props, and forwards references to child components. + + + + The base component or native HTML element. + + + + A function returning a primitive component with hooks for state and props + management. + + +### createPrimitiveElement + +Creates a component from an element type. + + + + The native HTML element. + + + + A function component that renders the specified element. + + +### createSlotComponent + +Creates a Slot component, which is useful when you want a component to behave as its child. + + + + The base component or native HTML element. + + + + +A function returning a Slot component. + + + +### withProviders + +A function that wraps a component into multiple providers. + + + +Providers with which to wrap the component. + +If there are any props that you want a provider to receive, you can simply pass an array. + + + +The component to be wrapped. + + +The props to be passed to the wrapped component. + + + +A new component that is wrapped by the specified providers. + diff --git a/apps/www/content/docs/api/utils.mdx b/apps/www/content/docs/api/utils.mdx index 299e1d4ce7..475fc5fbe5 100644 --- a/apps/www/content/docs/api/utils.mdx +++ b/apps/www/content/docs/api/utils.mdx @@ -119,18 +119,6 @@ If true, merges its props onto its immediate child. -### PortalBody - -Renders a React component in the `document.body` using a portal. - -### Text - -Generic component for rendering a span. - -### Box - -Generic component for rendering a div. - ## Hooks ### useMarkToolbarButtonState @@ -306,35 +294,6 @@ Selects an editor at a target location or an edge (start, end). ## Utils -### createPrimitiveComponent - -Creates a primitive component factory which utilizes hooks for managing state, props, and forwards references to child components. - - - - The base component or native HTML element. - - - - A function returning a primitive component with hooks for state and props - management. - - -### createSlotComponent - -Creates a Slot component, which is useful when you want a component to behave as its child. - - - - The base component or native HTML element. - - - - -A function returning a Slot component. - - - ### defaultsDeepToNodes Recursively merges a source object into children nodes using a query. @@ -349,20 +308,6 @@ Recursively merges a source object into children nodes using a query. options. -### getRootProps - -Gets the Plate component root props. - - - - The properties of the Plate component. - - - - An object containing all props except 'editor', 'attributes', 'children', - 'nodeProps', 'element', 'leaf', and 'text'. - - ### onKeyDownToggleElement A function that toggles the type of the node in the editor when a hotkey is pressed. @@ -398,43 +343,3 @@ A function that toggles the mark of the node in the editor when a hotkey is pres A keyboard handler function that toggles the mark when a specified hotkey is pressed. - -### withProps - -A Higher-Order Component (HOC) that adds props to a component. - - - - The component to which props will be added. - - - The props to be added to the component. - - - - -A new component that includes the additional props. - - - -### withProviders - -A function that wraps a component into multiple providers. - - - -Providers with which to wrap the component. - -If there are any props that you want a provider to receive, you can simply pass an array. - - - -The component to be wrapped. - - -The props to be passed to the wrapped component. - - - -A new component that is wrapped by the specified providers. - diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx index c9f58fd9f9..af002c0281 100644 --- a/apps/www/content/docs/components/changelog.mdx +++ b/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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +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) diff --git a/apps/www/content/docs/components/cli.mdx b/apps/www/content/docs/components/cli.mdx index c11df4c407..7cb94a5fff 100644 --- a/apps/www/content/docs/components/cli.mdx +++ b/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: › @/lib/utils Are you using React Server Components? › no / yes ``` diff --git a/apps/www/content/docs/components/components-json.mdx b/apps/www/content/docs/components/components-json.mdx index d501e41723..3f124010ec 100644 --- a/apps/www/content/docs/components/components-json.mdx +++ b/apps/www/content/docs/components/components-json.mdx @@ -143,7 +143,7 @@ Import alias for your utility functions. ```json title="components.json" { "aliases": { - "utils": "@/lib/utils" + "utils": "@udecode/cn" } } ``` diff --git a/apps/www/content/docs/components/installation/manual.mdx b/apps/www/content/docs/components/installation/manual.mdx index 8532e1b217..3cac55c4af 100644 --- a/apps/www/content/docs/components/installation/manual.mdx +++ b/apps/www/content/docs/components/installation/manual.mdx @@ -16,7 +16,7 @@ Components are styled using Tailwind CSS. You need to install Tailwind CSS in yo Add the following dependencies to your project: ```bash -npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react +npm install @udecode/cn tailwindcss-animate class-variance-authority tailwind-merge lucide-react ``` ### Add icons @@ -64,12 +64,6 @@ Add the following to your `styles/globals.css` file. You can learn more about us open /> -### Add a cn helper - -We use a `cn` helper to make it easier to conditionally add Tailwind CSS classes. Here's how we define it in `lib/utils.ts`: - - - ### That's it You can now start adding components to your project. diff --git a/apps/www/content/docs/components/installation/next.mdx b/apps/www/content/docs/components/installation/next.mdx index 6746122238..e9fa7aa373 100644 --- a/apps/www/content/docs/components/installation/next.mdx +++ b/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: › @/lib/utils Are you using React Server Components? › no / yes ``` @@ -52,7 +51,7 @@ Here's how you can configure Inter for Next.js: import "@/styles/globals.css" import { Inter as FontSans } from "next/font/google" -import { cn } from "@/lib/utils" +import { cn } from "@udecode/cn" export const fontSans = FontSans({ subsets: ["latin"], @@ -122,8 +121,6 @@ Here's how we structure our Next.js apps. You can use this as a reference: │ │ ├── main-nav.tsx │ │ ├── page-header.tsx │ │ └── ... -│ │ lib -│ │ └── utils.ts │ │ styles │ │ └── globals.css ├── next.config.js @@ -135,7 +132,6 @@ Here's how we structure our Next.js apps. You can use this as a reference: - We place the UI components in the `components/ui` folder. If you already have one and want to keep them separated, you could use `components/plate-ui`. - The rest of the components such as `` and `` are placed in the `components` folder. -- The `lib` folder contains all the utility functions. We have a `utils.ts` where we define the `cn` helper. - The `styles` folder contains the global CSS. ### Add components diff --git a/apps/www/content/docs/components/installation/vite.mdx b/apps/www/content/docs/components/installation/vite.mdx index 69545461f8..9dba467a95 100644 --- a/apps/www/content/docs/components/installation/vite.mdx +++ b/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: › @/lib/utils Are you using React Server Components? › no / yes (no) ``` diff --git a/apps/www/content/docs/components/theming.mdx b/apps/www/content/docs/components/theming.mdx index 6b8443b243..38282b75c4 100644 --- a/apps/www/content/docs/components/theming.mdx +++ b/apps/www/content/docs/components/theming.mdx @@ -25,7 +25,7 @@ To use utility classes for theming set `tailwind.cssVariables` to `false` in you }, "aliases": { "components": "@/components", - "utils": "@/lib/utils" + "utils": "@udecode/cn" } } ``` @@ -50,7 +50,7 @@ To use CSS variables for theming set `tailwind.cssVariables` to `true` in your ` }, "aliases": { "components": "@/components", - "utils": "@/lib/utils" + "utils": "@udecode/cn" } } ``` diff --git a/apps/www/package.json b/apps/www/package.json index 198e30f70a..7d47a6592e 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -49,6 +49,7 @@ "@radix-ui/react-toggle-group": "^1.0.4", "@radix-ui/react-toolbar": "^1.0.4", "@radix-ui/react-tooltip": "^1.0.6", + "@udecode/cn": "workspace:^", "@udecode/plate-alignment": "workspace:^", "@udecode/plate-autoformat": "workspace:^", "@udecode/plate-basic-elements": "workspace:^", @@ -101,12 +102,12 @@ "@udecode/slate": "workspace:^", "@udecode/slate-react": "workspace:^", "@udecode/slate-utils": "workspace:^", + "@udecode/react-utils": "workspace:^", "@udecode/utils": "workspace:^", "@vercel/analytics": "^1.0.1", "@vercel/og": "^0.5.8", "change-case": "^4.1.2", - "class-variance-authority": "^0.6.1", - "clsx": "^1.2.1", + "class-variance-authority": "^0.7.0", "cmdk": "^0.2.0", "contentlayer": "0.3.4", "date-fns": "^2.30.0", diff --git a/apps/www/src/app/_components/home-tabs.tsx b/apps/www/src/app/_components/home-tabs.tsx index d3ea6515ee..ba7bd36ee9 100644 --- a/apps/www/src/app/_components/home-tabs.tsx +++ b/apps/www/src/app/_components/home-tabs.tsx @@ -2,10 +2,10 @@ import { useEffect } from 'react'; import dynamic from 'next/dynamic'; +import { cn } from '@udecode/cn'; import { Settings2 } from 'lucide-react'; import { useQueryState } from 'next-usequerystate'; -import { cn } from '@/lib/utils'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { settingsStore } from '@/components/context/settings-store'; import PlaygroundDemo from '@/registry/default/example/playground-demo'; diff --git a/apps/www/src/app/_components/installation-code.tsx b/apps/www/src/app/_components/installation-code.tsx index d6466b29b2..90dd21b23c 100644 --- a/apps/www/src/app/_components/installation-code.tsx +++ b/apps/www/src/app/_components/installation-code.tsx @@ -1,10 +1,10 @@ // Pre is deeply coupled to Contentlayer, so we need a wrapper to make it work import * as React from 'react'; import { ReactNode } from 'react'; +import { cn } from '@udecode/cn'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { vscDarkPlus as theme } from 'react-syntax-highlighter/dist/esm/styles/prism'; -import { cn } from '@/lib/utils'; import { CopyButton, CopyNpmCommandButton } from '@/components/copy-button'; import * as Typography from '@/components/typography'; diff --git a/apps/www/src/app/_components/installation-tab.tsx b/apps/www/src/app/_components/installation-tab.tsx index 9de0f67028..c9b33031a6 100644 --- a/apps/www/src/app/_components/installation-tab.tsx +++ b/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() + ); + + 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{' '} diff --git a/apps/www/src/app/docs/[[...slug]]/page.tsx b/apps/www/src/app/docs/[[...slug]]/page.tsx index 0bc97fc7b4..b669710d97 100644 --- a/apps/www/src/app/docs/[[...slug]]/page.tsx +++ b/apps/www/src/app/docs/[[...slug]]/page.tsx @@ -2,15 +2,16 @@ import '@/styles/mdx.css'; import Link from 'next/link'; import { notFound } from 'next/navigation'; +import { cn } from '@udecode/cn'; import { allDocs } from 'contentlayer/generated'; import { ChevronRight, ExternalLinkIcon } from 'lucide-react'; 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, cn } from '@/lib/utils'; import { PackageInfoType } from '@/hooks/use-package-info'; import { badgeVariants } from '@/components/ui/badge'; import { ScrollArea } from '@/components/ui/scroll-area'; diff --git a/apps/www/src/app/layout.tsx b/apps/www/src/app/layout.tsx index a6fab0c396..881afb2fc5 100644 --- a/apps/www/src/app/layout.tsx +++ b/apps/www/src/app/layout.tsx @@ -2,10 +2,10 @@ import '@/styles/globals.css'; import React from 'react'; import { Metadata, Viewport } from 'next'; +import { cn } from '@udecode/cn'; import { siteConfig } from '@/config/site'; import { fontSans } from '@/lib/fonts'; -import { cn } from '@/lib/utils'; import { Toaster } from '@/components/ui/sonner'; import { Analytics } from '@/components/analytics'; import { Body } from '@/components/body'; diff --git a/apps/www/src/app/page.tsx b/apps/www/src/app/page.tsx index e99de64a1a..32844d57eb 100644 --- a/apps/www/src/app/page.tsx +++ b/apps/www/src/app/page.tsx @@ -8,9 +8,9 @@ import { AnnouncementButton } from './announcement-button'; import '../../public/registry/themes.css'; import * as React from 'react'; +import { cn } from '@udecode/cn'; import { siteConfig } from '@/config/site'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { PageHeader, diff --git a/apps/www/src/components/api-list.tsx b/apps/www/src/components/api-list.tsx index 9cf9080637..4a8155a25d 100644 --- a/apps/www/src/components/api-list.tsx +++ b/apps/www/src/components/api-list.tsx @@ -1,8 +1,8 @@ 'use client'; import React, { ReactNode, useState } from 'react'; +import { cn } from '@udecode/cn'; -import { cn } from '@/lib/utils'; import { Separator } from '@/registry/default/plate-ui/separator'; import { Icons } from './icons'; diff --git a/apps/www/src/components/body.tsx b/apps/www/src/components/body.tsx index 120e21f005..2e9ac52da1 100644 --- a/apps/www/src/components/body.tsx +++ b/apps/www/src/components/body.tsx @@ -2,8 +2,8 @@ /* eslint-disable tailwindcss/no-custom-classname */ import { usePathname } from 'next/navigation'; +import { cn } from '@udecode/cn'; -import { cn } from '@/lib/utils'; import { useConfig } from '@/hooks/use-config'; import { useMounted } from '@/hooks/use-mounted'; diff --git a/apps/www/src/components/code-block-wrapper.tsx b/apps/www/src/components/code-block-wrapper.tsx index a843337888..2fd52235e3 100644 --- a/apps/www/src/components/code-block-wrapper.tsx +++ b/apps/www/src/components/code-block-wrapper.tsx @@ -1,8 +1,8 @@ 'use client'; import * as React from 'react'; +import { cn } from '@udecode/cn'; -import { cn } from '@/lib/utils'; import { Button } from '@/registry/default/plate-ui/button'; import { diff --git a/apps/www/src/components/code.tsx b/apps/www/src/components/code.tsx index 88d67f30bd..185f65c5c3 100644 --- a/apps/www/src/components/code.tsx +++ b/apps/www/src/components/code.tsx @@ -1,6 +1,5 @@ import React from 'react'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; export function Code({ className, diff --git a/apps/www/src/components/command-menu.tsx b/apps/www/src/components/command-menu.tsx index 5601135853..263e5459a4 100644 --- a/apps/www/src/components/command-menu.tsx +++ b/apps/www/src/components/command-menu.tsx @@ -4,12 +4,12 @@ import { ReactNode } from 'react'; import * as React from 'react'; import { useRouter } from 'next/navigation'; import { DialogProps } from '@radix-ui/react-alert-dialog'; +import { cn } from '@udecode/cn'; import { Circle, File, Laptop, Moon, SunMedium } from 'lucide-react'; import { useTheme } from 'next-themes'; import { NavItemWithChildren, SidebarNavItem } from '@/types/nav'; import { docsConfig } from '@/config/docs'; -import { cn } from '@/lib/utils'; import { Button } from '@/registry/default/plate-ui/button'; import { CommandDialog, diff --git a/apps/www/src/components/component-card.tsx b/apps/www/src/components/component-card.tsx index 1fa4c972b9..b94bb0844a 100644 --- a/apps/www/src/components/component-card.tsx +++ b/apps/www/src/components/component-card.tsx @@ -1,6 +1,5 @@ import React from 'react'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; import { AspectRatio } from './ui/aspect-ratio'; diff --git a/apps/www/src/components/component-example.tsx b/apps/www/src/components/component-example.tsx index d7b3991bd1..34cbf51f7e 100644 --- a/apps/www/src/components/component-example.tsx +++ b/apps/www/src/components/component-example.tsx @@ -1,8 +1,7 @@ 'use client'; import * as React from 'react'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; import { CopyButton, CopyWithClassNames } from './copy-button'; import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'; diff --git a/apps/www/src/components/component-preview.tsx b/apps/www/src/components/component-preview.tsx index 1561e40f33..76f466440e 100644 --- a/apps/www/src/components/component-preview.tsx +++ b/apps/www/src/components/component-preview.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { Index } from '@/__registry__'; +import { cn } from '@udecode/cn'; -import { cn } from '@/lib/utils'; import { useConfig } from '@/hooks/use-config'; import { styles } from '@/registry/styles'; diff --git a/apps/www/src/components/component-source.tsx b/apps/www/src/components/component-source.tsx index 937a4da8cb..b948cdc3ec 100644 --- a/apps/www/src/components/component-source.tsx +++ b/apps/www/src/components/component-source.tsx @@ -1,8 +1,7 @@ 'use client'; import * as React from 'react'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; import { CodeBlockWrapper } from './code-block-wrapper'; diff --git a/apps/www/src/components/copy-button.tsx b/apps/www/src/components/copy-button.tsx index e1d2b8fd90..d6d174ae04 100644 --- a/apps/www/src/components/copy-button.tsx +++ b/apps/www/src/components/copy-button.tsx @@ -2,10 +2,10 @@ import * as React from 'react'; import { DropdownMenuTriggerProps } from '@radix-ui/react-dropdown-menu'; +import { cn } from '@udecode/cn'; import { NpmCommands } from '@/types/unist'; import { Event, trackEvent } from '@/lib/events'; -import { cn } from '@/lib/utils'; import { Button } from '@/registry/default/plate-ui/button'; import { DropdownMenu, diff --git a/apps/www/src/components/link.tsx b/apps/www/src/components/link.tsx index 9fec214b35..e30ac0e943 100644 --- a/apps/www/src/components/link.tsx +++ b/apps/www/src/components/link.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import LinkPrimitive from 'next/link'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; export function Link({ className, diff --git a/apps/www/src/components/main-nav.tsx b/apps/www/src/components/main-nav.tsx index 1b6b20cabd..1948d4bcf2 100644 --- a/apps/www/src/components/main-nav.tsx +++ b/apps/www/src/components/main-nav.tsx @@ -3,9 +3,9 @@ import * as React from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; +import { cn } from '@udecode/cn'; import { siteConfig } from '@/config/site'; -import { cn } from '@/lib/utils'; import { Logo } from './icons/Logo'; import { Badge } from './ui/badge'; diff --git a/apps/www/src/components/mdx-components.tsx b/apps/www/src/components/mdx-components.tsx index de578d7c4a..a5b1000bec 100644 --- a/apps/www/src/components/mdx-components.tsx +++ b/apps/www/src/components/mdx-components.tsx @@ -3,10 +3,10 @@ import * as React from 'react'; import { ReactNode } from 'react'; import Image from 'next/image'; +import { cn } from '@udecode/cn'; import { Provider } from 'jotai'; import { useMDXComponent } from 'next-contentlayer/hooks'; -import { cn } from '@/lib/utils'; import { useConfig } from '@/hooks/use-config'; import { packageInfoAtom } from '@/hooks/use-package-info'; diff --git a/apps/www/src/components/mobile-nav.tsx b/apps/www/src/components/mobile-nav.tsx index 82f5e1d0a5..f25f85ead0 100644 --- a/apps/www/src/components/mobile-nav.tsx +++ b/apps/www/src/components/mobile-nav.tsx @@ -3,10 +3,10 @@ import * as React from 'react'; import Link, { LinkProps } from 'next/link'; import { usePathname, useRouter } from 'next/navigation'; +import { cn } from '@udecode/cn'; import { docsConfig } from '@/config/docs'; import { siteConfig } from '@/config/site'; -import { cn } from '@/lib/utils'; import { Button } from '@/registry/default/plate-ui/button'; import { Logo } from './icons/Logo'; diff --git a/apps/www/src/components/page-header.tsx b/apps/www/src/components/page-header.tsx index e742fa6278..fc094d501f 100644 --- a/apps/www/src/components/page-header.tsx +++ b/apps/www/src/components/page-header.tsx @@ -1,7 +1,6 @@ +import { cn } from '@udecode/cn'; import Balance from 'react-wrap-balancer'; -import { cn } from '@/lib/utils'; - function PageHeader({ className, children, diff --git a/apps/www/src/components/pager.tsx b/apps/www/src/components/pager.tsx index 8055dfd1f6..49b1c6dfcc 100644 --- a/apps/www/src/components/pager.tsx +++ b/apps/www/src/components/pager.tsx @@ -1,9 +1,9 @@ import Link from 'next/link'; +import { cn } from '@udecode/cn'; import { Doc } from 'contentlayer/generated'; import { NavItem, NavItemWithChildren } from '@/types/nav'; import { docsConfig } from '@/config/docs'; -import { cn } from '@/lib/utils'; import { buttonVariants } from '@/registry/default/plate-ui/button'; import { Icons } from './icons'; diff --git a/apps/www/src/components/setting-checkbox.tsx b/apps/www/src/components/setting-checkbox.tsx index 5cfbc983a4..6764318b78 100644 --- a/apps/www/src/components/setting-checkbox.tsx +++ b/apps/www/src/components/setting-checkbox.tsx @@ -1,9 +1,9 @@ import React from 'react'; import Link from 'next/link'; +import { cn } from '@udecode/cn'; import { customizerItems, SettingPlugin } from '@/config/customizer-items'; import { descriptions } from '@/config/descriptions'; -import { cn } from '@/lib/utils'; import { buttonVariants } from '@/registry/default/plate-ui/button'; import { Checkbox } from '@/registry/default/plate-ui/checkbox'; import { diff --git a/apps/www/src/components/settings-combobox.tsx b/apps/www/src/components/settings-combobox.tsx index dc6c948245..6710047fe7 100644 --- a/apps/www/src/components/settings-combobox.tsx +++ b/apps/www/src/components/settings-combobox.tsx @@ -1,10 +1,10 @@ import React from 'react'; import Link from 'next/link'; +import { cn } from '@udecode/cn'; import { Check } from 'lucide-react'; import { customizerItems, SettingPlugin } from '@/config/customizer-items'; import { customizerPlugins } from '@/config/customizer-plugins'; -import { cn } from '@/lib/utils'; import { useFixHydration } from '@/hooks/use-fix-hydration'; import { Button, buttonVariants } from '@/registry/default/plate-ui/button'; import { diff --git a/apps/www/src/components/sidebar-nav.tsx b/apps/www/src/components/sidebar-nav.tsx index 196167c3ff..f67ba2a186 100644 --- a/apps/www/src/components/sidebar-nav.tsx +++ b/apps/www/src/components/sidebar-nav.tsx @@ -3,9 +3,9 @@ import React from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; +import { cn } from '@udecode/cn'; import { SidebarNavItem } from '@/types/nav'; -import { cn } from '@/lib/utils'; export interface DocsSidebarNavProps { items: SidebarNavItem[]; diff --git a/apps/www/src/components/site-header.tsx b/apps/www/src/components/site-header.tsx index 2327e6ce73..26c213a384 100644 --- a/apps/www/src/components/site-header.tsx +++ b/apps/www/src/components/site-header.tsx @@ -1,8 +1,8 @@ /* eslint-disable turbo/no-undeclared-env-vars */ import Link from 'next/link'; +import { cn } from '@udecode/cn'; import { siteConfig } from '@/config/site'; -import { cn } from '@/lib/utils'; import ModeToggle from '@/registry/default/example/mode-toggle'; import { buttonVariants } from '@/registry/default/plate-ui/button'; diff --git a/apps/www/src/components/star-on-github.tsx b/apps/www/src/components/star-on-github.tsx index 5b7d697f79..7301cb3b61 100644 --- a/apps/www/src/components/star-on-github.tsx +++ b/apps/www/src/components/star-on-github.tsx @@ -1,10 +1,10 @@ 'use client'; import Link from 'next/link'; +import { cn } from '@udecode/cn'; import { StarIcon } from 'lucide-react'; import { siteConfig } from '@/config/site'; -import { cn } from '@/lib/utils'; import { buttonVariants } from '@/registry/default/plate-ui/button'; import { CountingNumbers } from './counting-numbers'; diff --git a/apps/www/src/components/style-switcher.tsx b/apps/www/src/components/style-switcher.tsx index d0cc9cd038..d4f1be8c9c 100644 --- a/apps/www/src/components/style-switcher.tsx +++ b/apps/www/src/components/style-switcher.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { type SelectTriggerProps } from '@radix-ui/react-select'; +import { cn } from '@udecode/cn'; -import { cn } from '@/lib/utils'; import { useConfig } from '@/hooks/use-config'; import { Style, styles } from '@/registry/styles'; diff --git a/apps/www/src/components/theme-component.tsx b/apps/www/src/components/theme-component.tsx index 1710a1fb29..c44b5c484f 100644 --- a/apps/www/src/components/theme-component.tsx +++ b/apps/www/src/components/theme-component.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { Index } from '@/__registry__'; +import { cn } from '@udecode/cn'; -import { cn } from '@/lib/utils'; import { useConfig } from '@/hooks/use-config'; import { Icons } from './icons'; diff --git a/apps/www/src/components/themes-button.tsx b/apps/www/src/components/themes-button.tsx index 504e6ae455..d8396f9dd4 100644 --- a/apps/www/src/components/themes-button.tsx +++ b/apps/www/src/components/themes-button.tsx @@ -2,10 +2,10 @@ import * as React from 'react'; import { CheckIcon } from '@radix-ui/react-icons'; +import { cn } from '@udecode/cn'; import { Paintbrush } from 'lucide-react'; import { useTheme } from 'next-themes'; -import { cn } from '@/lib/utils'; import { useConfig } from '@/hooks/use-config'; import { Button } from '@/registry/default/plate-ui/button'; import { diff --git a/apps/www/src/components/themes-tab-content.tsx b/apps/www/src/components/themes-tab-content.tsx index abd6b90eb1..ea20930979 100644 --- a/apps/www/src/components/themes-tab-content.tsx +++ b/apps/www/src/components/themes-tab-content.tsx @@ -8,9 +8,9 @@ import { ResetIcon, SunIcon, } from '@radix-ui/react-icons'; +import { cn } from '@udecode/cn'; import { useTheme } from 'next-themes'; -import { cn } from '@/lib/utils'; import { useConfig } from '@/hooks/use-config'; import { Button } from '@/registry/default/plate-ui/button'; import { diff --git a/apps/www/src/components/toc.tsx b/apps/www/src/components/toc.tsx index 23a3a2bea7..11e76f9f91 100644 --- a/apps/www/src/components/toc.tsx +++ b/apps/www/src/components/toc.tsx @@ -3,9 +3,9 @@ 'use client'; import * as React from 'react'; +import { cn } from '@udecode/cn'; import { TableOfContents } from '@/lib/toc'; -import { cn } from '@/lib/utils'; import { useMounted } from '@/hooks/use-mounted'; interface TocProps { diff --git a/apps/www/src/components/tree-icon.tsx b/apps/www/src/components/tree-icon.tsx index c8c0b374ca..9b3d2583a4 100644 --- a/apps/www/src/components/tree-icon.tsx +++ b/apps/www/src/components/tree-icon.tsx @@ -1,4 +1,4 @@ -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; interface TreeIconProps { isFirst: boolean; diff --git a/apps/www/src/components/typography.tsx b/apps/www/src/components/typography.tsx index 83824c7d4a..46a1185497 100644 --- a/apps/www/src/components/typography.tsx +++ b/apps/www/src/components/typography.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; +import { cn } from '@udecode/cn'; import { NpmCommands } from '@/types/unist'; import { Event } from '@/lib/events'; -import { cn } from '@/lib/utils'; import { Style } from '@/registry/styles'; import { CopyButton, CopyNpmCommandButton } from './copy-button'; diff --git a/apps/www/src/components/ui/accordion.tsx b/apps/www/src/components/ui/accordion.tsx index 67b29c83da..e59504febf 100644 --- a/apps/www/src/components/ui/accordion.tsx +++ b/apps/www/src/components/ui/accordion.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import * as AccordionPrimitive from '@radix-ui/react-accordion'; +import { cn } from '@udecode/cn'; import { ChevronDown, Plus } from 'lucide-react'; -import { cn } from '@/lib/utils'; - const Accordion = AccordionPrimitive.Root; const AccordionItem = React.forwardRef< diff --git a/apps/www/src/components/ui/alert.tsx b/apps/www/src/components/ui/alert.tsx index 7bf89fdf23..9835ca676c 100644 --- a/apps/www/src/components/ui/alert.tsx +++ b/apps/www/src/components/ui/alert.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; +import { cn } from '@udecode/cn'; import { cva, VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - const alertVariants = cva( 'relative w-full rounded-lg border p-4', // [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground diff --git a/apps/www/src/components/ui/badge.tsx b/apps/www/src/components/ui/badge.tsx index 604bdcab56..53e923dd8c 100644 --- a/apps/www/src/components/ui/badge.tsx +++ b/apps/www/src/components/ui/badge.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; +import { cn } from '@udecode/cn'; import { cva, VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - const badgeVariants = cva( 'inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold leading-none transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', { diff --git a/apps/www/src/components/ui/card.tsx b/apps/www/src/components/ui/card.tsx index fca7be46ce..0c74309533 100644 --- a/apps/www/src/components/ui/card.tsx +++ b/apps/www/src/components/ui/card.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; const Card = React.forwardRef< HTMLDivElement, diff --git a/apps/www/src/components/ui/drawer.tsx b/apps/www/src/components/ui/drawer.tsx index 952964cf80..71adb508d2 100644 --- a/apps/www/src/components/ui/drawer.tsx +++ b/apps/www/src/components/ui/drawer.tsx @@ -1,10 +1,9 @@ 'use client'; import * as React from 'react'; +import { cn } from '@udecode/cn'; import { Drawer as DrawerPrimitive } from 'vaul'; -import { cn } from '@/lib/utils'; - const Drawer = ({ shouldScaleBackground = true, ...props diff --git a/apps/www/src/components/ui/hover-card.tsx b/apps/www/src/components/ui/hover-card.tsx index 1c9816ea3a..80a26e21ac 100644 --- a/apps/www/src/components/ui/hover-card.tsx +++ b/apps/www/src/components/ui/hover-card.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import * as HoverCardPrimitive from '@radix-ui/react-hover-card'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; const HoverCard = HoverCardPrimitive.Root; diff --git a/apps/www/src/components/ui/label.tsx b/apps/www/src/components/ui/label.tsx index a6bb7fcf26..eab520a406 100644 --- a/apps/www/src/components/ui/label.tsx +++ b/apps/www/src/components/ui/label.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import * as LabelPrimitive from '@radix-ui/react-label'; +import { cn } from '@udecode/cn'; import { cva, VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - const labelVariants = cva( 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70' ); diff --git a/apps/www/src/components/ui/menubar.tsx b/apps/www/src/components/ui/menubar.tsx index 4886a21f58..88c4ac5c44 100644 --- a/apps/www/src/components/ui/menubar.tsx +++ b/apps/www/src/components/ui/menubar.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import * as MenubarPrimitive from '@radix-ui/react-menubar'; +import { cn } from '@udecode/cn'; import { Check, ChevronRight, Circle } from 'lucide-react'; -import { cn } from '@/lib/utils'; - const MenubarMenu = MenubarPrimitive.Menu; const MenubarGroup = MenubarPrimitive.Group; diff --git a/apps/www/src/components/ui/radio-group.tsx b/apps/www/src/components/ui/radio-group.tsx index acd55f346d..eade70b008 100644 --- a/apps/www/src/components/ui/radio-group.tsx +++ b/apps/www/src/components/ui/radio-group.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'; +import { cn } from '@udecode/cn'; import { Circle } from 'lucide-react'; -import { cn } from '@/lib/utils'; - const RadioGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef diff --git a/apps/www/src/components/ui/scroll-area.tsx b/apps/www/src/components/ui/scroll-area.tsx index 75c68fa4fa..d2ff4286d5 100644 --- a/apps/www/src/components/ui/scroll-area.tsx +++ b/apps/www/src/components/ui/scroll-area.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; const ScrollArea = React.forwardRef< React.ElementRef, diff --git a/apps/www/src/components/ui/select.tsx b/apps/www/src/components/ui/select.tsx index 9f3ef2157d..58efcc56a2 100644 --- a/apps/www/src/components/ui/select.tsx +++ b/apps/www/src/components/ui/select.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import * as SelectPrimitive from '@radix-ui/react-select'; +import { cn } from '@udecode/cn'; import { Check, ChevronDown, ChevronUp } from 'lucide-react'; -import { cn } from '@/lib/utils'; - const Select = SelectPrimitive.Root; const SelectGroup = SelectPrimitive.Group; diff --git a/apps/www/src/components/ui/sheet.tsx b/apps/www/src/components/ui/sheet.tsx index 9a4e8e0540..2f11981bec 100644 --- a/apps/www/src/components/ui/sheet.tsx +++ b/apps/www/src/components/ui/sheet.tsx @@ -2,11 +2,10 @@ import * as React from 'react'; import * as SheetPrimitive from '@radix-ui/react-dialog'; +import { cn } from '@udecode/cn'; import { cva, VariantProps } from 'class-variance-authority'; import { X } from 'lucide-react'; -import { cn } from '@/lib/utils'; - const Sheet = SheetPrimitive.Root; const SheetTrigger = SheetPrimitive.Trigger; diff --git a/apps/www/src/components/ui/skeleton.tsx b/apps/www/src/components/ui/skeleton.tsx index a626d9baa6..6e0397d10b 100644 --- a/apps/www/src/components/ui/skeleton.tsx +++ b/apps/www/src/components/ui/skeleton.tsx @@ -1,4 +1,4 @@ -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; function Skeleton({ className, diff --git a/apps/www/src/components/ui/table.tsx b/apps/www/src/components/ui/table.tsx index cfc24d2967..e92fc9ee34 100644 --- a/apps/www/src/components/ui/table.tsx +++ b/apps/www/src/components/ui/table.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; const Table = React.forwardRef< HTMLTableElement, diff --git a/apps/www/src/components/ui/tabs.tsx b/apps/www/src/components/ui/tabs.tsx index 73155376d6..195342b0cd 100644 --- a/apps/www/src/components/ui/tabs.tsx +++ b/apps/www/src/components/ui/tabs.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import * as TabsPrimitive from '@radix-ui/react-tabs'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; const Tabs = TabsPrimitive.Root; diff --git a/apps/www/src/config/customizer-items.ts b/apps/www/src/config/customizer-items.ts index aef2bd67c6..2794de203d 100644 --- a/apps/www/src/config/customizer-items.ts +++ b/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 = { { id: 'h1', filename: 'heading-element', - plateImports: ['withProps'], + cnImports: ['withProps'], label: 'H1Element', pluginKey: 'ELEMENT_H1', import: 'HeadingElement', @@ -274,7 +276,7 @@ export const customizerItems: Record = { { id: 'h2', filename: 'heading-element', - plateImports: ['withProps'], + cnImports: ['withProps'], label: 'H2Element', pluginKey: 'ELEMENT_H2', import: 'HeadingElement', @@ -284,7 +286,7 @@ export const customizerItems: Record = { { id: 'h3', filename: 'heading-element', - plateImports: ['withProps'], + cnImports: ['withProps'], label: 'H3Element', pluginKey: 'ELEMENT_H3', import: 'HeadingElement', @@ -294,7 +296,7 @@ export const customizerItems: Record = { { id: 'h4', filename: 'heading-element', - plateImports: ['withProps'], + cnImports: ['withProps'], label: 'H4Element', pluginKey: 'ELEMENT_H4', import: 'HeadingElement', @@ -304,7 +306,7 @@ export const customizerItems: Record = { { id: 'h5', filename: 'heading-element', - plateImports: ['withProps'], + cnImports: ['withProps'], label: 'H5Element', pluginKey: 'ELEMENT_H5', import: 'HeadingElement', @@ -314,7 +316,7 @@ export const customizerItems: Record = { { id: 'h6', filename: 'heading-element', - plateImports: ['withProps'], + cnImports: ['withProps'], label: 'H6Element', pluginKey: 'ELEMENT_H6', import: 'HeadingElement', @@ -335,6 +337,7 @@ export const customizerItems: Record = { { id: 'ul', filename: 'list-element', + cnImports: ['withProps'], label: 'BulletedListElement', pluginKey: 'ELEMENT_UL', import: 'ListElement', @@ -344,6 +347,7 @@ export const customizerItems: Record = { { id: 'ol', filename: 'list-element', + cnImports: ['withProps'], label: 'NumberedListElement', pluginKey: 'ELEMENT_OL', noImport: true, @@ -354,6 +358,7 @@ export const customizerItems: Record = { { id: 'li', filename: 'list-element', + cnImports: ['withProps'], plateImports: ['PlateElement'], label: 'ListItemElement', pluginKey: 'ELEMENT_LI', @@ -499,6 +504,7 @@ export const customizerItems: Record = { { id: 'bold', label: 'BoldLeaf', + cnImports: ['withProps'], plateImports: ['PlateLeaf'], pluginKey: 'MARK_BOLD', noImport: true, @@ -599,6 +605,7 @@ export const customizerItems: Record = { { id: 'italic', label: 'ItalicLeaf', + cnImports: ['withProps'], plateImports: ['PlateLeaf'], pluginKey: 'MARK_ITALIC', noImport: true, @@ -634,6 +641,7 @@ export const customizerItems: Record = { { id: 'strikethrough', label: 'StrikethroughLeaf', + cnImports: ['withProps'], plateImports: ['PlateLeaf'], pluginKey: 'MARK_STRIKETHROUGH', noImport: true, @@ -652,6 +660,7 @@ export const customizerItems: Record = { { id: 'subscript', label: 'SubscriptLeaf', + cnImports: ['withProps'], plateImports: ['PlateLeaf'], pluginKey: 'MARK_SUBSCRIPT', noImport: true, @@ -670,6 +679,7 @@ export const customizerItems: Record = { { id: 'superscript', label: 'SuperscriptLeaf', + cnImports: ['withProps'], plateImports: ['PlateLeaf'], pluginKey: 'MARK_SUPERSCRIPT', noImport: true, @@ -688,6 +698,7 @@ export const customizerItems: Record = { { id: 'underline', label: 'UnderlineLeaf', + cnImports: ['withProps'], plateImports: ['PlateLeaf'], pluginKey: 'MARK_UNDERLINE', noImport: true, diff --git a/apps/www/src/config/docs.ts b/apps/www/src/config/docs.ts index 0f78f23a4a..3dc8a1735a 100644 --- a/apps/www/src/config/docs.ts +++ b/apps/www/src/config/docs.ts @@ -411,9 +411,6 @@ export const docsConfig: DocsConfig = { headings: [ 'PlateElement', 'PlateLeaf', - 'PortalBody', - 'Text', - 'Box', 'useMarkToolbarButtonState', 'useMarkToolbarButton', 'usePlaceholderState', @@ -421,14 +418,9 @@ export const docsConfig: DocsConfig = { 'isType', 'resetEditorChildren', 'selectEditor', - 'createPrimitiveComponent', - 'createSlotComponent', 'defaultsDeepToNodes', - 'getRootProps', 'onKeyDownToggleElement', 'onKeyDownToggleMark', - 'withProps', - 'withProviders', ], }, { @@ -643,6 +635,23 @@ export const docsConfig: DocsConfig = { 'createNode', ], }, + { + title: 'React Utils', + href: '/docs/api/react-utils', + headings: [ + 'PortalBody', + 'Text', + 'Box', + 'createPrimitiveComponent', + 'createSlotComponent', + 'withProviders', + ], + }, + { + title: 'cn', + href: '/docs/api/cn', + headings: ['cn', 'withCn', 'withProps', 'withVariants'], + }, ], }, ], diff --git a/apps/www/src/lib/absoluteUrl.ts b/apps/www/src/lib/absoluteUrl.ts new file mode 100644 index 0000000000..7d51787990 --- /dev/null +++ b/apps/www/src/lib/absoluteUrl.ts @@ -0,0 +1,3 @@ +export function absoluteUrl(path: string) { + return `${process.env.NEXT_PUBLIC_APP_URL}${path}`; +} diff --git a/apps/www/src/lib/plate/create-plate-ui.ts b/apps/www/src/lib/plate/create-plate-ui.ts index 5c44fd3854..4c5c72552b 100644 --- a/apps/www/src/lib/plate/create-plate-ui.ts +++ b/apps/www/src/lib/plate/create-plate-ui.ts @@ -1,3 +1,4 @@ +import { withProps } from '@udecode/cn'; import { MARK_BOLD, MARK_CODE, @@ -18,7 +19,6 @@ import { PlateElement, PlateLeaf, PlatePluginComponent, - withProps, } from '@udecode/plate-common'; import { ELEMENT_EXCALIDRAW } from '@udecode/plate-excalidraw'; import { MARK_SEARCH_HIGHLIGHT } from '@udecode/plate-find-replace'; diff --git a/apps/www/src/lib/utils.tsx b/apps/www/src/lib/utils.tsx deleted file mode 100644 index a1ded9bc3b..0000000000 --- a/apps/www/src/lib/utils.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { - createElement, - ElementRef, - forwardRef, - ForwardRefExoticComponent, -} from 'react'; -import { cva, VariantProps } from 'class-variance-authority'; -import { clsx } from 'clsx'; -import { twMerge } from 'tailwind-merge'; - -import type { ClassValue } from 'clsx'; - -export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); -} - -export function withProps( - Component: ForwardRefExoticComponent, - defaultProps: T -) { - return forwardRef, T>( - function ExtendComponent(props, ref) { - return ( - - ); - } - ); -} - -export function withVariants< - T extends { className?: string }, - V extends ReturnType, ->( - Component: ForwardRefExoticComponent, - variants: V, - onlyVariantsProps?: (keyof VariantProps)[] -) { - return forwardRef, T & VariantProps>( - function ExtendComponent(props, ref) { - const variantProps = {} as VariantProps; - - if (onlyVariantsProps) { - Object.keys(onlyVariantsProps).forEach((key) => { - variantProps[key] = props[key]; - delete props[key]; - }); - } - - return ( - - ); - } - ); -} - -export function create(tag: T) { - return forwardRef( - function CreateComponent(props, ref) { - return createElement(tag, { ...props, ref }); - } - ); -} - -export function formatDate(input: string | number): string { - const date = new Date(input); - return date.toLocaleDateString('en-US', { - month: 'long', - day: 'numeric', - year: 'numeric', - }); -} - -export function absoluteUrl(path: string) { - return `${process.env.NEXT_PUBLIC_APP_URL}${path}`; -} diff --git a/apps/www/src/pages/api/components.json b/apps/www/src/pages/api/components.json index bab2069c63..aa0dde6db6 100644 --- a/apps/www/src/pages/api/components.json +++ b/apps/www/src/pages/api/components.json @@ -7,7 +7,7 @@ { "name": "button.tsx", "dir": "components/ui", - "content": "import * as React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst buttonVariants = cva(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n outline:\n 'border border-input hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-10 px-4 py-2',\n xs: 'h-8 rounded-md px-3',\n sm: 'h-9 rounded-md px-3',\n sms: 'h-9 w-9 rounded-md px-0',\n lg: 'h-11 rounded-md px-8',\n },\n // PLATE:\n isMenu: {\n true: 'h-auto w-full cursor-pointer justify-start',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef(\n ({ className, isMenu, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button';\n return (\n \n );\n }\n);\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n" + "content": "import * as React from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@udecode/cn';\n\nconst buttonVariants = cva(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n outline:\n 'border border-input hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n size: {\n default: 'h-10 px-4 py-2',\n xs: 'h-8 rounded-md px-3',\n sm: 'h-9 rounded-md px-3',\n sms: 'h-9 w-9 rounded-md px-0',\n lg: 'h-11 rounded-md px-8',\n },\n // PLATE:\n isMenu: {\n true: 'h-auto w-full cursor-pointer justify-start',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef(\n ({ className, isMenu, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button';\n return (\n \n );\n }\n);\nButton.displayName = 'Button';\n\nexport { Button, buttonVariants };\n" } ] } diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx index 23ce70072a..2618da37fa 100644 --- a/apps/www/src/registry/default/example/playground-demo.tsx +++ b/apps/www/src/registry/default/example/playground-demo.tsx @@ -23,6 +23,7 @@ import { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin'; import { trailingBlockPlugin } from '@/plate/demo/plugins/trailingBlockPlugin'; import { MENTIONABLES } from '@/plate/demo/values/mentionables'; import { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue'; +import { cn } from '@udecode/cn'; import { createAlignPlugin } from '@udecode/plate-alignment'; import { createAutoformatPlugin } from '@udecode/plate-autoformat'; import { @@ -92,7 +93,6 @@ import { HTML5Backend } from 'react-dnd-html5-backend'; import { ValueId } from '@/config/customizer-plugins'; import { captionPlugin } from '@/lib/plate/demo/plugins/captionPlugin'; -import { cn } from '@/lib/utils'; import { settingsStore } from '@/components/context/settings-store'; import { PlaygroundFixedToolbarButtons } from '@/components/plate-ui/playground-fixed-toolbar-buttons'; import { PlaygroundFloatingToolbarButtons } from '@/components/plate-ui/playground-floating-toolbar-buttons'; diff --git a/apps/www/src/registry/default/example/preview-md-demo.tsx b/apps/www/src/registry/default/example/preview-md-demo.tsx index 58162297e0..6048232077 100644 --- a/apps/www/src/registry/default/example/preview-md-demo.tsx +++ b/apps/www/src/registry/default/example/preview-md-demo.tsx @@ -16,7 +16,7 @@ import { TText, Value } from "@udecode/plate-common"; -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; import { Editor } from '@/registry/default/plate-ui/editor'; /** diff --git a/apps/www/src/registry/default/plate-ui/align-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/align-dropdown-menu.tsx index 1fe34c6f0e..dc49a66e08 100644 --- a/apps/www/src/registry/default/plate-ui/align-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/align-dropdown-menu.tsx @@ -38,12 +38,7 @@ const items = [ }, ]; -export interface AlignDropdownMenuProps extends DropdownMenuProps {} - -export function AlignDropdownMenu({ - children, - ...props -}: AlignDropdownMenuProps) { +export function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) { const state = useAlignDropdownMenuState(); const { radioGroupProps } = useAlignDropdownMenu(state); diff --git a/apps/www/src/registry/default/plate-ui/avatar.tsx b/apps/www/src/registry/default/plate-ui/avatar.tsx index 1346957c31..12c4cac2d1 100644 --- a/apps/www/src/registry/default/plate-ui/avatar.tsx +++ b/apps/www/src/registry/default/plate-ui/avatar.tsx @@ -1,50 +1,19 @@ 'use client'; -import * as React from 'react'; import * as AvatarPrimitive from '@radix-ui/react-avatar'; +import { withCn } from '@udecode/cn'; -import { cn } from '@/lib/utils'; +export const Avatar = withCn( + AvatarPrimitive.Root, + 'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full' +); -const Avatar = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -Avatar.displayName = AvatarPrimitive.Root.displayName; +export const AvatarImage = withCn( + AvatarPrimitive.Image, + 'aspect-square h-full w-full' +); -const AvatarImage = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AvatarImage.displayName = AvatarPrimitive.Image.displayName; - -const AvatarFallback = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; - -export { Avatar, AvatarImage, AvatarFallback }; +export const AvatarFallback = withCn( + AvatarPrimitive.Fallback, + 'flex h-full w-full items-center justify-center rounded-full bg-muted' +); diff --git a/apps/www/src/registry/default/plate-ui/blockquote-element.tsx b/apps/www/src/registry/default/plate-ui/blockquote-element.tsx index df481f95da..b3afcb7629 100644 --- a/apps/www/src/registry/default/plate-ui/blockquote-element.tsx +++ b/apps/www/src/registry/default/plate-ui/blockquote-element.tsx @@ -1,25 +1,20 @@ 'use client'; import React from 'react'; -import { PlateElement, PlateElementProps } from '@udecode/plate-common'; +import { cn, withRef } from '@udecode/cn'; +import { PlateElement } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - -const BlockquoteElement = React.forwardRef< - React.ElementRef, - PlateElementProps ->(({ className, children, ...props }, ref) => { - return ( - -
{children}
- - ); -}); -BlockquoteElement.displayName = 'BlockquoteElement'; - -export { BlockquoteElement }; +export const BlockquoteElement = withRef( + ({ className, children, ...props }, ref) => { + return ( + +
{children}
+ + ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/button.tsx b/apps/www/src/registry/default/plate-ui/button.tsx index 18b0a7f0b7..268e629e5a 100644 --- a/apps/www/src/registry/default/plate-ui/button.tsx +++ b/apps/www/src/registry/default/plate-ui/button.tsx @@ -1,10 +1,9 @@ import * as React from 'react'; import { Slot } from '@radix-ui/react-slot'; +import { cn, withRef } from '@udecode/cn'; import { cva, VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - -const buttonVariants = cva( +export const buttonVariants = cva( 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', { variants: { @@ -40,24 +39,19 @@ const buttonVariants = cva( } ); -export interface ButtonProps - extends React.ButtonHTMLAttributes, - VariantProps { - asChild?: boolean; -} - -const Button = React.forwardRef( - ({ className, isMenu, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : 'button'; - return ( - - ); +export const Button = withRef< + 'button', + VariantProps & { + asChild?: boolean; } -); -Button.displayName = 'Button'; +>(({ className, isMenu, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : 'button'; -export { Button, buttonVariants }; + return ( + + ); +}); diff --git a/apps/www/src/registry/default/plate-ui/caption.tsx b/apps/www/src/registry/default/plate-ui/caption.tsx index 0c4299873d..12bb4fdd7e 100644 --- a/apps/www/src/registry/default/plate-ui/caption.tsx +++ b/apps/www/src/registry/default/plate-ui/caption.tsx @@ -1,11 +1,9 @@ -import React, { ComponentProps } from 'react'; +import { cn, withCn, withVariants } from '@udecode/cn'; import { Caption as CaptionPrimitive, CaptionTextarea as CaptionTextareaPrimitive, } from '@udecode/plate-caption'; -import { cva, VariantProps } from 'class-variance-authority'; - -import { cn } from '@/lib/utils'; +import { cva } from 'class-variance-authority'; const captionVariants = cva('max-w-full', { variants: { @@ -20,33 +18,15 @@ const captionVariants = cva('max-w-full', { }, }); -const Caption = React.forwardRef< - React.ElementRef, - ComponentProps & VariantProps ->(({ className, align, ...props }, ref) => ( - -)); -Caption.displayName = 'Caption'; - -const CaptionTextarea = React.forwardRef< - React.ElementRef, - ComponentProps ->(({ className, ...props }, ref) => ( - -)); -CaptionTextarea.displayName = 'CaptionTextarea'; +export const Caption = withVariants(CaptionPrimitive, captionVariants, [ + 'align', +]); -export { Caption, CaptionTextarea }; +export const CaptionTextarea = withCn( + CaptionTextareaPrimitive, + cn( + 'mt-2 w-full resize-none border-none bg-inherit p-0 font-[inherit] text-inherit', + 'focus:outline-none focus:[&::placeholder]:opacity-0', + 'text-center print:placeholder:text-transparent' + ) +); diff --git a/apps/www/src/registry/default/plate-ui/checkbox.tsx b/apps/www/src/registry/default/plate-ui/checkbox.tsx index 61a68be69a..0778123142 100644 --- a/apps/www/src/registry/default/plate-ui/checkbox.tsx +++ b/apps/www/src/registry/default/plate-ui/checkbox.tsx @@ -2,29 +2,25 @@ import * as React from 'react'; import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; +import { cn, withRef } from '@udecode/cn'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; -const Checkbox = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - - ( + ({ className, ...props }, ref) => ( + - - - -)); -Checkbox.displayName = CheckboxPrimitive.Root.displayName; - -export { Checkbox }; + + + + + ) +); diff --git a/apps/www/src/registry/default/plate-ui/cloud-attachment-element.tsx b/apps/www/src/registry/default/plate-ui/cloud-attachment-element.tsx index eeac7f3e23..56528f1d28 100644 --- a/apps/www/src/registry/default/plate-ui/cloud-attachment-element.tsx +++ b/apps/www/src/registry/default/plate-ui/cloud-attachment-element.tsx @@ -1,13 +1,13 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { TCloudAttachmentElement, useCloudAttachmentElementState, } from '@udecode/plate-cloud'; import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { StatusBar } from './cloud-status-bar'; diff --git a/apps/www/src/registry/default/plate-ui/cloud-image-element.tsx b/apps/www/src/registry/default/plate-ui/cloud-image-element.tsx index 8f1084d529..95e62949d7 100644 --- a/apps/www/src/registry/default/plate-ui/cloud-image-element.tsx +++ b/apps/www/src/registry/default/plate-ui/cloud-image-element.tsx @@ -1,14 +1,13 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { TCloudImageElement, useCloudImageElementState, } from '@udecode/plate-cloud'; import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - import { ResizeControls } from './cloud-resize-controls'; import { StatusBar } from './cloud-status-bar'; @@ -74,7 +73,6 @@ export function CloudImageElement({ }} /> ) : ( - // eslint-disable-next-line @next/next/no-img-element { - const start = Date.now(); - // eslint-disable-next-line no-console - console.info('start finishUploads'); await editor.cloud.finishUploads(); - const end = Date.now(); - // NOTE: We don't use backtick with curly brace replacement because it - // doesn't work with gen:code script at time of writing. - // eslint-disable-next-line no-console - console.info(`end finishUploads in ms:`, end - start); }; return ( diff --git a/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx b/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx index b8968dca19..e77c6895f8 100644 --- a/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx +++ b/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx @@ -1,6 +1,7 @@ 'use client'; import React, { useState } from 'react'; +import { cn } from '@udecode/cn'; import { CODE_BLOCK_LANGUAGES, CODE_BLOCK_LANGUAGES_POPULAR, @@ -8,7 +9,6 @@ import { useCodeBlockComboboxState, } from '@udecode/plate-code-block'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { Button } from './button'; diff --git a/apps/www/src/registry/default/plate-ui/code-block-element.tsx b/apps/www/src/registry/default/plate-ui/code-block-element.tsx index 94217a3a9c..0cec6f8a9c 100644 --- a/apps/www/src/registry/default/plate-ui/code-block-element.tsx +++ b/apps/www/src/registry/default/plate-ui/code-block-element.tsx @@ -2,46 +2,37 @@ import './code-block-element.css'; -import React, { forwardRef } from 'react'; -import { - TCodeBlockElement, - useCodeBlockElementState, -} from '@udecode/plate-code-block'; -import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common'; - -import { cn } from '@/lib/utils'; +import React from 'react'; +import { cn, withRef } from '@udecode/cn'; +import { useCodeBlockElementState } from '@udecode/plate-code-block'; +import { PlateElement } from '@udecode/plate-common'; import { CodeBlockCombobox } from './code-block-combobox'; -const CodeBlockElement = forwardRef< - HTMLDivElement, - PlateElementProps ->(({ className, ...props }, ref) => { - const { children, element } = props; - - const state = useCodeBlockElementState({ element }); - - return ( - - 
-        {children}
-
- - {state.syntax && ( -
- -
- )} - - ); -}); -CodeBlockElement.displayName = 'CodeBlockElement'; - -export { CodeBlockElement }; +export const CodeBlockElement = withRef( + ({ className, children, ...props }, ref) => { + const { element } = props; + const state = useCodeBlockElementState({ element }); + + return ( + + 
+          {children}
+
+ + {state.syntax && ( +
+ +
+ )} + + ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/code-leaf.tsx b/apps/www/src/registry/default/plate-ui/code-leaf.tsx index d29849b671..48d06464c7 100644 --- a/apps/www/src/registry/default/plate-ui/code-leaf.tsx +++ b/apps/www/src/registry/default/plate-ui/code-leaf.tsx @@ -1,22 +1,23 @@ 'use client'; import React from 'react'; -import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common'; +import { cn, withRef } from '@udecode/cn'; +import { PlateLeaf } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - -export function CodeLeaf({ className, children, ...props }: PlateLeafProps) { - return ( - - {children} - - ); -} +export const CodeLeaf = withRef( + ({ className, children, ...props }, ref) => { + return ( + + {children} + + ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/code-line-element.tsx b/apps/www/src/registry/default/plate-ui/code-line-element.tsx index 316f450e29..02bdfe4f96 100644 --- a/apps/www/src/registry/default/plate-ui/code-line-element.tsx +++ b/apps/www/src/registry/default/plate-ui/code-line-element.tsx @@ -1,11 +1,9 @@ 'use client'; -import React, { forwardRef } from 'react'; -import { PlateElement, PlateElementProps } from '@udecode/plate-common'; +import React from 'react'; +import { withRef } from '@udecode/cn'; +import { PlateElement } from '@udecode/plate-common'; -const CodeLineElement = forwardRef( - (props, ref) => -); -CodeLineElement.displayName = 'CodeLineElement'; - -export { CodeLineElement }; +export const CodeLineElement = withRef((props, ref) => ( + +)); diff --git a/apps/www/src/registry/default/plate-ui/code-syntax-leaf.tsx b/apps/www/src/registry/default/plate-ui/code-syntax-leaf.tsx index 266e234cd5..065981ae83 100644 --- a/apps/www/src/registry/default/plate-ui/code-syntax-leaf.tsx +++ b/apps/www/src/registry/default/plate-ui/code-syntax-leaf.tsx @@ -1,17 +1,20 @@ 'use client'; import React from 'react'; +import { withRef } from '@udecode/cn'; import { useCodeSyntaxLeaf } from '@udecode/plate-code-block'; -import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common'; +import { PlateLeaf } from '@udecode/plate-common'; -export function CodeSyntaxLeaf({ children, ...props }: PlateLeafProps) { - const { leaf } = props; +export const CodeSyntaxLeaf = withRef( + ({ children, ...props }, ref) => { + const { leaf } = props; - const { tokenProps } = useCodeSyntaxLeaf({ leaf }); + const { tokenProps } = useCodeSyntaxLeaf({ leaf }); - return ( - - {children} - - ); -} + return ( + + {children} + + ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx b/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx index e772a157eb..dc0653655a 100644 --- a/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx +++ b/apps/www/src/registry/default/plate-ui/color-dropdown-menu-items.tsx @@ -2,18 +2,14 @@ import React from 'react'; import { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu'; +import { cn } from '@udecode/cn'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; -import { buttonVariants } from '@/registry/default/plate-ui/button'; -import { DropdownMenuItem } from '@/registry/default/plate-ui/dropdown-menu'; -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from '@/registry/default/plate-ui/tooltip'; +import { buttonVariants } from './button'; import { TColor } from './color-dropdown-menu'; +import { DropdownMenuItem } from './dropdown-menu'; +import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'; type ColorDropdownMenuItemProps = { value: string; diff --git a/apps/www/src/registry/default/plate-ui/color-input.tsx b/apps/www/src/registry/default/plate-ui/color-input.tsx index 2d7f6c2202..709fa63ffd 100644 --- a/apps/www/src/registry/default/plate-ui/color-input.tsx +++ b/apps/www/src/registry/default/plate-ui/color-input.tsx @@ -1,34 +1,30 @@ 'use client'; import React from 'react'; +import { cn, withRef } from '@udecode/cn'; +import { useComposedRef } from '@udecode/plate-common'; import { useColorInput } from '@udecode/plate-font'; -import { cn } from '@/lib/utils'; +export const ColorInput = withRef<'input'>( + ({ value = '#000000', children, className, ...props }, ref) => { + const { inputRef, childProps } = useColorInput(); -export function ColorInput({ - value = '#000000', - onChange, - children, - className, - ...props -}: React.InputHTMLAttributes) { - const { inputRef, childProps } = useColorInput(); + return ( +
+ {React.Children.map(children, (child) => { + if (!child) return child; - return ( -
- {React.Children.map(children, (child) => { - if (!child) return child; + return React.cloneElement(child as React.ReactElement, childProps); + })} - return React.cloneElement(child as React.ReactElement, childProps); - })} - - -
- ); -} + +
+ ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/color-picker.tsx b/apps/www/src/registry/default/plate-ui/color-picker.tsx index 1b7d96eb0f..27bb627aea 100644 --- a/apps/www/src/registry/default/plate-ui/color-picker.tsx +++ b/apps/www/src/registry/default/plate-ui/color-picker.tsx @@ -1,66 +1,75 @@ 'use client'; import React from 'react'; +import { cn, withRef } from '@udecode/cn'; -import { cn } from '@/lib/utils'; -import { buttonVariants } from '@/registry/default/plate-ui/button'; -import { DropdownMenuItem } from '@/registry/default/plate-ui/dropdown-menu'; -import { Separator } from '@/registry/default/plate-ui/separator'; - +import { buttonVariants } from './button'; import { TColor } from './color-dropdown-menu'; import { ColorDropdownMenuItems } from './color-dropdown-menu-items'; import { ColorsCustom } from './colors-custom'; +import { DropdownMenuItem } from './dropdown-menu'; +import { Separator } from './separator'; -type ColorPickerProps = { - color?: string; - colors: TColor[]; - customColors: TColor[]; - updateColor: (color: string) => void; - updateCustomColor: (color: string) => void; - clearColor: () => void; -} & React.HTMLAttributes; - -export function ColorPickerContent({ - color, - colors, - customColors, - updateColor, - updateCustomColor, - clearColor, - className, - ...props -}: ColorPickerProps) { - return ( -
- +export const ColorPickerContent = withRef< + 'div', + { + color?: string; + colors: TColor[]; + customColors: TColor[]; + updateColor: (color: string) => void; + updateCustomColor: (color: string) => void; + clearColor: () => void; + } +>( + ( + { + color, + colors, + customColors, + updateColor, + updateCustomColor, + clearColor, + className, + ...props + }, + ref + ) => { + return ( +
+ - + - - {color && ( - - Clear - - )} -
- ); -} + + {color && ( + + Clear + + )} +
+ ); + } +); export const ColorPicker = React.memo( ColorPickerContent, diff --git a/apps/www/src/registry/default/plate-ui/combobox.tsx b/apps/www/src/registry/default/plate-ui/combobox.tsx index 57a158e524..55db97eb49 100644 --- a/apps/www/src/registry/default/plate-ui/combobox.tsx +++ b/apps/www/src/registry/default/plate-ui/combobox.tsx @@ -2,14 +2,12 @@ import React, { useEffect } from 'react'; import * as Popover from '@radix-ui/react-popover'; +import { cn, withRef } from '@udecode/cn'; import { comboboxActions, ComboboxContentItemProps, ComboboxContentProps, ComboboxProps, - Data, - NoData, - TComboboxItem, useActiveComboboxStore, useComboboxContent, useComboboxContentState, @@ -25,30 +23,26 @@ import { } from '@udecode/plate-common'; import { createVirtualRef } from '@udecode/plate-floating'; -import { cn } from '@/lib/utils'; - -export function ComboboxItem({ - combobox, - index, - item, - onRenderItem, -}: ComboboxContentItemProps) { - const { props } = useComboboxItem({ item, index, combobox, onRenderItem }); - - return ( -
- ); -} +export const ComboboxItem = withRef<'div', ComboboxContentItemProps>( + ({ combobox, index, item, onRenderItem, className, ...rest }, ref) => { + const { props } = useComboboxItem({ item, index, combobox, onRenderItem }); + + return ( +
+ ); + } +); -export function ComboboxContent( - props: ComboboxContentProps -) { +export function ComboboxContent(props: ComboboxContentProps) { const { component: Component, items, @@ -59,8 +53,7 @@ export function ComboboxContent( const editor = useEditorRef(); - const filteredItems = - useComboboxSelectors.filteredItems() as TComboboxItem[]; + const filteredItems = useComboboxSelectors.filteredItems(); const activeComboboxStore = useActiveComboboxStore()!; const state = useComboboxContentState({ items, combobox }); @@ -100,11 +93,7 @@ export function ComboboxContent( ); } -/** - * Register the combobox id, trigger, onSelectItem - * Renders the combobox if active. - */ -export function Combobox({ +export function Combobox({ id, trigger, searchPattern, @@ -115,7 +104,7 @@ export function Combobox({ sort, disabled: _disabled, ...props -}: ComboboxProps) { +}: ComboboxProps) { const storeItems = useComboboxSelectors.items(); const disabled = _disabled ?? (storeItems.length === 0 && !props.items?.length); diff --git a/apps/www/src/registry/default/plate-ui/command.tsx b/apps/www/src/registry/default/plate-ui/command.tsx index 5540a843a8..b510fa8ece 100644 --- a/apps/www/src/registry/default/plate-ui/command.tsx +++ b/apps/www/src/registry/default/plate-ui/command.tsx @@ -2,31 +2,19 @@ import * as React from 'react'; import { type DialogProps } from '@radix-ui/react-dialog'; +import { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn'; import { Command as CommandPrimitive } from 'cmdk'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { Dialog, DialogContent } from './dialog'; -const Command = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -Command.displayName = CommandPrimitive.displayName; +export const Command = withCn( + CommandPrimitive, + 'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground' +); -interface CommandDialogProps extends DialogProps {} - -function CommandDialog({ children, ...props }: CommandDialogProps) { +export function CommandDialog({ children, ...props }: DialogProps) { return ( @@ -38,119 +26,48 @@ function CommandDialog({ children, ...props }: CommandDialogProps) { ); } -const CommandInput = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( -
- - -
-)); - -CommandInput.displayName = CommandPrimitive.Input.displayName; - -const CommandList = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); - -CommandList.displayName = CommandPrimitive.List.displayName; - -const CommandEmpty = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->((props, ref) => ( - -)); - -CommandEmpty.displayName = CommandPrimitive.Empty.displayName; - -const CommandGroup = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); - -CommandGroup.displayName = CommandPrimitive.Group.displayName; - -const CommandSeparator = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -CommandSeparator.displayName = CommandPrimitive.Separator.displayName; - -const CommandItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); - -CommandItem.displayName = CommandPrimitive.Item.displayName; - -function CommandShortcut({ - className, - ...props -}: React.HTMLAttributes) { - return ( - - ); -} -CommandShortcut.displayName = 'CommandShortcut'; - -export { - Command, - CommandDialog, - CommandInput, - CommandList, - CommandEmpty, - CommandGroup, - CommandItem, - CommandShortcut, - CommandSeparator, -}; +export const CommandInput = withRef( + ({ className, ...props }, ref) => ( +
+ + +
+ ) +); + +export const CommandList = withCn( + CommandPrimitive.List, + 'max-h-[500px] overflow-y-auto overflow-x-hidden' +); + +export const CommandEmpty = withCn( + CommandPrimitive.Empty, + 'py-6 text-center text-sm' +); + +export const CommandGroup = withCn( + CommandPrimitive.Group, + 'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground' +); + +export const CommandSeparator = withCn( + CommandPrimitive.Separator, + '-mx-1 h-px bg-border' +); + +export const CommandItem = withCn( + CommandPrimitive.Item, + 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50' +); + +export const CommandShortcut = withCn( + createPrimitiveElement('span'), + 'ml-auto text-xs tracking-widest text-muted-foreground' +); diff --git a/apps/www/src/registry/default/plate-ui/comment-create-form.tsx b/apps/www/src/registry/default/plate-ui/comment-create-form.tsx index 4e2cff6484..545516bceb 100644 --- a/apps/www/src/registry/default/plate-ui/comment-create-form.tsx +++ b/apps/www/src/registry/default/plate-ui/comment-create-form.tsx @@ -1,17 +1,16 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { CommentNewSubmitButton, CommentNewTextarea, useCommentsSelectors, } from '@udecode/plate-comments'; -import { cn } from '@/lib/utils'; -import { buttonVariants } from '@/registry/default/plate-ui/button'; -import { inputVariants } from '@/registry/default/plate-ui/input'; - +import { buttonVariants } from './button'; import { CommentAvatar } from './comment-avatar'; +import { inputVariants } from './input'; export function CommentCreateForm() { const myUserId = useCommentsSelectors().myUserId(); diff --git a/apps/www/src/registry/default/plate-ui/comment-leaf.tsx b/apps/www/src/registry/default/plate-ui/comment-leaf.tsx index 4de0a27ef2..c38cf17032 100644 --- a/apps/www/src/registry/default/plate-ui/comment-leaf.tsx +++ b/apps/www/src/registry/default/plate-ui/comment-leaf.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { TCommentText, useCommentLeaf, @@ -8,8 +9,6 @@ import { } from '@udecode/plate-comments'; import { PlateLeaf, PlateLeafProps, Value } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - export function CommentLeaf({ className, ...props @@ -19,7 +18,6 @@ export function CommentLeaf({ const state = useCommentLeafState({ leaf }); const { props: rootProps } = useCommentLeaf(state); - // hide resolved comments if (!state.commentCount) return <>{children}; let aboveChildren = <>{children}; diff --git a/apps/www/src/registry/default/plate-ui/comment-more-dropdown.tsx b/apps/www/src/registry/default/plate-ui/comment-more-dropdown.tsx index 0a8ed2e55b..051d12a3af 100644 --- a/apps/www/src/registry/default/plate-ui/comment-more-dropdown.tsx +++ b/apps/www/src/registry/default/plate-ui/comment-more-dropdown.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { useCommentDeleteButton, useCommentDeleteButtonState, @@ -8,15 +9,15 @@ import { useCommentEditButtonState, } from '@udecode/plate-comments'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; -import { Button } from '@/registry/default/plate-ui/button'; + +import { Button } from './button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, -} from '@/registry/default/plate-ui/dropdown-menu'; +} from './dropdown-menu'; export function CommentMoreDropdown() { const editButtonState = useCommentEditButtonState(); diff --git a/apps/www/src/registry/default/plate-ui/comment-resolve-button.tsx b/apps/www/src/registry/default/plate-ui/comment-resolve-button.tsx index a577065a98..98ba45c359 100644 --- a/apps/www/src/registry/default/plate-ui/comment-resolve-button.tsx +++ b/apps/www/src/registry/default/plate-ui/comment-resolve-button.tsx @@ -1,14 +1,15 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { CommentResolveButton as CommentResolveButtonPrimitive, useComment, } from '@udecode/plate-comments'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; -import { buttonVariants } from '@/registry/default/plate-ui/button'; + +import { buttonVariants } from './button'; export function CommentResolveButton() { const comment = useComment()!; diff --git a/apps/www/src/registry/default/plate-ui/comment-value.tsx b/apps/www/src/registry/default/plate-ui/comment-value.tsx index 314ef81e6b..ce5b392402 100644 --- a/apps/www/src/registry/default/plate-ui/comment-value.tsx +++ b/apps/www/src/registry/default/plate-ui/comment-value.tsx @@ -1,14 +1,14 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { CommentEditActions, CommentEditTextarea, } from '@udecode/plate-comments'; -import { cn } from '@/lib/utils'; -import { buttonVariants } from '@/registry/default/plate-ui/button'; -import { inputVariants } from '@/registry/default/plate-ui/input'; +import { buttonVariants } from './button'; +import { inputVariants } from './input'; export function CommentValue() { return ( diff --git a/apps/www/src/registry/default/plate-ui/comments-popover.tsx b/apps/www/src/registry/default/plate-ui/comments-popover.tsx index 0f6d3a0da0..a031c8e312 100644 --- a/apps/www/src/registry/default/plate-ui/comments-popover.tsx +++ b/apps/www/src/registry/default/plate-ui/comments-popover.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { CommentProvider, CommentsPositioner, @@ -10,12 +11,10 @@ import { } from '@udecode/plate-comments'; import { PortalBody } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; -import { popoverVariants } from '@/registry/default/plate-ui/popover'; - import { CommentCreateForm } from './comment-create-form'; import { CommentItem } from './comment-item'; import { CommentReplyItems } from './comment-reply-items'; +import { popoverVariants } from './popover'; export type FloatingCommentsContentProps = { disableForm?: boolean; diff --git a/apps/www/src/registry/default/plate-ui/cursor-overlay.tsx b/apps/www/src/registry/default/plate-ui/cursor-overlay.tsx index 273a3e3ecd..67b9929438 100644 --- a/apps/www/src/registry/default/plate-ui/cursor-overlay.tsx +++ b/apps/www/src/registry/default/plate-ui/cursor-overlay.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { createZustandStore } from '@udecode/plate-common'; import { CursorData, @@ -7,8 +8,6 @@ import { CursorProps, } from '@udecode/plate-cursor'; -import { cn } from '@/lib/utils'; - export const cursorStore = createZustandStore('cursor')({ cursors: {}, }); diff --git a/apps/www/src/registry/default/plate-ui/dialog.tsx b/apps/www/src/registry/default/plate-ui/dialog.tsx index 10977dc860..607f241492 100644 --- a/apps/www/src/registry/default/plate-ui/dialog.tsx +++ b/apps/www/src/registry/default/plate-ui/dialog.tsx @@ -2,121 +2,58 @@ import * as React from 'react'; import * as DialogPrimitive from '@radix-ui/react-dialog'; +import { cn, createPrimitiveElement, withCn, withRef } from '@udecode/cn'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; -const Dialog = DialogPrimitive.Root; +export const Dialog = DialogPrimitive.Root; +export const DialogTrigger = DialogPrimitive.Trigger; +export const DialogPortal = DialogPrimitive.Portal; +export const DialogClose = DialogPrimitive.Close; -const DialogTrigger = DialogPrimitive.Trigger; - -const DialogPortal = DialogPrimitive.Portal; - -const DialogClose = DialogPrimitive.Close; - -const DialogOverlay = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; - -const DialogContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( - - - - {children} - - - Close - - - -)); -DialogContent.displayName = DialogPrimitive.Content.displayName; +export const DialogOverlay = withCn( + DialogPrimitive.Overlay, + 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0' +); -const DialogHeader = ({ - className, - ...props -}: React.HTMLAttributes) => ( -
+export const DialogContent = withRef( + ({ className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + + ) ); -DialogHeader.displayName = 'DialogHeader'; -const DialogFooter = ({ - className, - ...props -}: React.HTMLAttributes) => ( -
+export const DialogHeader = withCn( + createPrimitiveElement('div'), + 'flex flex-col space-y-1.5 text-center sm:text-left' ); -DialogFooter.displayName = 'DialogFooter'; -const DialogTitle = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -DialogTitle.displayName = DialogPrimitive.Title.displayName; +export const DialogFooter = withCn( + createPrimitiveElement('div'), + 'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2' +); -const DialogDescription = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -DialogDescription.displayName = DialogPrimitive.Description.displayName; +export const DialogTitle = withCn( + DialogPrimitive.Title, + 'text-lg font-semibold leading-none tracking-tight' +); -export { - Dialog, - DialogPortal, - DialogOverlay, - DialogClose, - DialogTrigger, - DialogContent, - DialogHeader, - DialogFooter, - DialogTitle, - DialogDescription, -}; +export const DialogDescription = withCn( + DialogPrimitive.Description, + 'text-sm text-muted-foreground' +); diff --git a/apps/www/src/registry/default/plate-ui/draggable.tsx b/apps/www/src/registry/default/plate-ui/draggable.tsx index d05f632ff5..97a6cf540b 100644 --- a/apps/www/src/registry/default/plate-ui/draggable.tsx +++ b/apps/www/src/registry/default/plate-ui/draggable.tsx @@ -1,6 +1,7 @@ 'use client'; -import React, { forwardRef } from 'react'; +import React from 'react'; +import { cn, withRef } from '@udecode/cn'; import { ClassNames, PlateElementProps, TEditor } from '@udecode/plate-common'; import { DragItemNode, @@ -9,7 +10,6 @@ import { } from '@udecode/plate-dnd'; import { DropTargetMonitor } from 'react-dnd'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'; @@ -86,7 +86,7 @@ const dragHandle = ( ); -const Draggable = forwardRef( +export const Draggable = withRef<'div', DraggableProps>( ({ className, classNames = {}, onDropHandler, ...props }, ref) => { const { children, element } = props; @@ -102,13 +102,13 @@ const Draggable = forwardRef( return (
(
-
+
{children} {!!dropLine && ( @@ -152,6 +152,3 @@ const Draggable = forwardRef( ); } ); -Draggable.displayName = 'Draggable'; - -export { Draggable }; diff --git a/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx index a1d2a3da0e..ef8555a501 100644 --- a/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/dropdown-menu.tsx @@ -3,26 +3,28 @@ import * as React from 'react'; import { useCallback, useState } from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; -import { cva, VariantProps } from 'class-variance-authority'; +import { + cn, + createPrimitiveElement, + withCn, + withProps, + withRef, + withVariants, +} from '@udecode/cn'; +import { cva } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; -const DropdownMenu = DropdownMenuPrimitive.Root; +export const DropdownMenu = DropdownMenuPrimitive.Root; +export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; +export const DropdownMenuGroup = DropdownMenuPrimitive.Group; +export const DropdownMenuPortal = DropdownMenuPrimitive.Portal; +export const DropdownMenuSub = DropdownMenuPrimitive.Sub; +export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; -const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger; - -const DropdownMenuGroup = DropdownMenuPrimitive.Group; - -const DropdownMenuPortal = DropdownMenuPrimitive.Portal; - -const DropdownMenuSub = DropdownMenuPrimitive.Sub; - -const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; - -const DropdownMenuSubTrigger = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & { +export const DropdownMenuSubTrigger = withRef< + typeof DropdownMenuPrimitive.SubTrigger, + { inset?: boolean; } >(({ className, inset, children, ...props }, ref) => ( @@ -40,44 +42,28 @@ const DropdownMenuSubTrigger = React.forwardRef< )); -DropdownMenuSubTrigger.displayName = - DropdownMenuPrimitive.SubTrigger.displayName; -const DropdownMenuSubContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -DropdownMenuSubContent.displayName = - DropdownMenuPrimitive.SubContent.displayName; +export const DropdownMenuSubContent = withCn( + DropdownMenuPrimitive.SubContent, + 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' +); + +const DropdownMenuContentVariants = withProps(DropdownMenuPrimitive.Content, { + sideOffset: 4, + className: cn( + 'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2' + ), +}); -const DropdownMenuContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, sideOffset = 4, ...props }, ref) => ( +export const DropdownMenuContent = withRef< + typeof DropdownMenuPrimitive.Content +>(({ className, ...props }, ref) => ( - + )); -DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName; -export const menuItemVariants = cva( +const menuItemVariants = cva( cn( 'relative flex h-9 cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors', 'focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50' @@ -91,23 +77,15 @@ export const menuItemVariants = cva( } ); -const DropdownMenuItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & - VariantProps ->(({ className, inset, ...props }, ref) => ( - -)); -DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName; +export const DropdownMenuItem = withVariants( + DropdownMenuPrimitive.Item, + menuItemVariants, + ['inset'] +); -const DropdownMenuCheckboxItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, checked, ...props }, ref) => ( +export const DropdownMenuCheckboxItem = withRef< + typeof DropdownMenuPrimitive.CheckboxItem +>(({ className, children, ...props }, ref) => ( @@ -126,19 +103,12 @@ const DropdownMenuCheckboxItem = React.forwardRef< {children} )); -DropdownMenuCheckboxItem.displayName = - DropdownMenuPrimitive.CheckboxItem.displayName; - -interface DropdownMenuRadioItemProps - extends React.ComponentPropsWithoutRef< - typeof DropdownMenuPrimitive.RadioItem - > { - hideIcon?: boolean; -} - -const DropdownMenuRadioItem = React.forwardRef< - React.ElementRef, - DropdownMenuRadioItemProps + +export const DropdownMenuRadioItem = withRef< + typeof DropdownMenuPrimitive.RadioItem, + { + hideIcon?: boolean; + } >(({ className, children, hideIcon, ...props }, ref) => ( )); -DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName; -const DropdownMenuLabel = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & { - inset?: boolean; +const dropdownMenuLabelVariants = cva( + cn('select-none px-2 py-1.5 text-sm font-semibold'), + { + variants: { + inset: { + true: 'pl-8', + }, + }, } ->(({ className, inset, ...props }, ref) => ( - -)); -DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName; +); -const DropdownMenuSeparator = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName; - -function DropdownMenuShortcut({ - className, - ...props -}: React.HTMLAttributes) { - return ( - - ); -} -DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'; - -export { - DropdownMenu, - DropdownMenuTrigger, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuCheckboxItem, - DropdownMenuRadioItem, - DropdownMenuLabel, - DropdownMenuSeparator, - DropdownMenuShortcut, - DropdownMenuGroup, - DropdownMenuPortal, - DropdownMenuSub, - DropdownMenuSubContent, - DropdownMenuSubTrigger, - DropdownMenuRadioGroup, -}; +export const DropdownMenuLabel = withVariants( + DropdownMenuPrimitive.Label, + dropdownMenuLabelVariants, + ['inset'] +); + +export const DropdownMenuSeparator = withCn( + DropdownMenuPrimitive.Separator, + '-mx-1 my-1 h-px bg-muted' +); + +export const DropdownMenuShortcut = withCn( + createPrimitiveElement('span'), + 'ml-auto text-xs tracking-widest opacity-60' +); export const useOpenState = () => { const [open, setOpen] = useState(false); diff --git a/apps/www/src/registry/default/plate-ui/editor.tsx b/apps/www/src/registry/default/plate-ui/editor.tsx index f3e6197307..a8f971c403 100644 --- a/apps/www/src/registry/default/plate-ui/editor.tsx +++ b/apps/www/src/registry/default/plate-ui/editor.tsx @@ -1,9 +1,8 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateContent } from '@udecode/plate-common'; import { cva } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - import type { PlateContentProps } from '@udecode/plate-common'; import type { VariantProps } from 'class-variance-authority'; diff --git a/apps/www/src/registry/default/plate-ui/emoji-combobox.tsx b/apps/www/src/registry/default/plate-ui/emoji-combobox.tsx index 9bc4e95f4d..25c365b65c 100644 --- a/apps/www/src/registry/default/plate-ui/emoji-combobox.tsx +++ b/apps/www/src/registry/default/plate-ui/emoji-combobox.tsx @@ -21,11 +21,11 @@ export function EmojiComboboxItem({ item }: ComboboxItemProps) { ); } -export function EmojiCombobox({ +export function EmojiCombobox({ pluginKey = KEY_EMOJI, id = pluginKey, ...props -}: TEmojiCombobox) { +}: TEmojiCombobox) { const { trigger, onSelectItem } = useEmojiComboboxState({ pluginKey }); return ( @@ -33,7 +33,7 @@ export function EmojiCombobox({ id={id} trigger={trigger} controlled - onSelectItem={onSelectItem} + onSelectItem={onSelectItem as any} onRenderItem={EmojiComboboxItem} {...props} /> diff --git a/apps/www/src/registry/default/plate-ui/emoji-dropdown-menu.tsx b/apps/www/src/registry/default/plate-ui/emoji-dropdown-menu.tsx index 4af70799a5..5ed53d7aa0 100644 --- a/apps/www/src/registry/default/plate-ui/emoji-dropdown-menu.tsx +++ b/apps/www/src/registry/default/plate-ui/emoji-dropdown-menu.tsx @@ -5,18 +5,15 @@ import { } from '@udecode/plate-emoji'; import { Icons } from '@/components/icons'; -import { EmojiToolbarDropdown } from '@/registry/default/plate-ui/emoji-toolbar-dropdown'; -import { - ToolbarButton, - ToolbarButtonProps, -} from '@/registry/default/plate-ui/toolbar'; import { emojiCategoryIcons, emojiSearchIcons } from './emoji-icons'; import { EmojiPicker } from './emoji-picker'; +import { EmojiToolbarDropdown } from './emoji-toolbar-dropdown'; +import { ToolbarButton } from './toolbar'; type EmojiDropdownMenuProps = { options?: EmojiDropdownMenuOptions; -} & ToolbarButtonProps; +} & React.ComponentPropsWithoutRef; export function EmojiDropdownMenu({ options, diff --git a/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx b/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx index 9ff6b8fed6..fdb7371865 100644 --- a/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx +++ b/apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx @@ -1,4 +1,5 @@ import React, { memo, useCallback } from 'react'; +import { cn } from '@udecode/cn'; import { Emoji, EmojiSettings, @@ -6,8 +7,6 @@ import { UseEmojiPickerType, } from '@udecode/plate-emoji'; -import { cn } from '@/lib/utils'; - export type EmojiPickerContentProps = Pick< UseEmojiPickerType, | 'i18n' diff --git a/apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx b/apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx index c1cf60961c..834bb4389c 100644 --- a/apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx +++ b/apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx @@ -1,12 +1,11 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { EmojiCategoryList, IEmojiFloatingLibrary, UseEmojiPickerType, } from '@udecode/plate-emoji'; -import { cn } from '@/lib/utils'; - export type EmojiPickerNavigationProps = Pick< UseEmojiPickerType, 'i18n' | 'emojiLibrary' | 'icons' | 'focusedCategory' diff --git a/apps/www/src/registry/default/plate-ui/emoji-picker-search-and-clear.tsx b/apps/www/src/registry/default/plate-ui/emoji-picker-search-and-clear.tsx index 2869d2b8c2..79dbdb14d7 100644 --- a/apps/www/src/registry/default/plate-ui/emoji-picker-search-and-clear.tsx +++ b/apps/www/src/registry/default/plate-ui/emoji-picker-search-and-clear.tsx @@ -1,7 +1,7 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { UseEmojiPickerType } from '@udecode/plate-emoji'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; export type EmojiPickerSearchAndClearProps = Pick< diff --git a/apps/www/src/registry/default/plate-ui/emoji-picker.tsx b/apps/www/src/registry/default/plate-ui/emoji-picker.tsx index c36b7be758..96a5548186 100644 --- a/apps/www/src/registry/default/plate-ui/emoji-picker.tsx +++ b/apps/www/src/registry/default/plate-ui/emoji-picker.tsx @@ -1,8 +1,7 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { EmojiSettings, UseEmojiPickerType } from '@udecode/plate-emoji'; -import { cn } from '@/lib/utils'; - import { EmojiPickerContent } from './emoji-picker-content'; import { EmojiPickerNavigation } from './emoji-picker-navigation'; import { EmojiPickerPreview } from './emoji-picker-preview'; diff --git a/apps/www/src/registry/default/plate-ui/excalidraw-element.tsx b/apps/www/src/registry/default/plate-ui/excalidraw-element.tsx index 4b4d6cfe31..80608136db 100644 --- a/apps/www/src/registry/default/plate-ui/excalidraw-element.tsx +++ b/apps/www/src/registry/default/plate-ui/excalidraw-element.tsx @@ -1,30 +1,27 @@ import React from 'react'; -import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common'; -import { - TExcalidrawElement, - useExcalidrawElement, -} from '@udecode/plate-excalidraw'; +import { withRef } from '@udecode/cn'; +import { PlateElement } from '@udecode/plate-common'; +import { useExcalidrawElement } from '@udecode/plate-excalidraw'; -export function ExcalidrawElement({ - nodeProps, - ...props -}: PlateElementProps) { - const { children, element } = props; +export const ExcalidrawElement = withRef( + ({ nodeProps, ...props }, ref) => { + const { children, element } = props; - const { Excalidraw, excalidrawProps } = useExcalidrawElement({ - element, - }); + const { Excalidraw, excalidrawProps } = useExcalidrawElement({ + element, + }); - return ( - -
-
- {Excalidraw && ( - - )} + return ( + +
+
+ {Excalidraw && ( + + )} +
-
- {children} - - ); -} + {children} + + ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/fixed-toolbar.tsx b/apps/www/src/registry/default/plate-ui/fixed-toolbar.tsx index 8a8caa9777..c6a79c8edf 100644 --- a/apps/www/src/registry/default/plate-ui/fixed-toolbar.tsx +++ b/apps/www/src/registry/default/plate-ui/fixed-toolbar.tsx @@ -1,23 +1,8 @@ -import React from 'react'; +import { withCn } from '@udecode/cn'; -import { cn } from '@/lib/utils'; +import { Toolbar } from './toolbar'; -import { Toolbar, ToolbarProps } from './toolbar'; - -const FixedToolbar = React.forwardRef( - ({ className, ...props }: ToolbarProps, ref) => { - return ( - - ); - } +export const FixedToolbar = withCn( + Toolbar, + 'supports-backdrop-blur:bg-background/60 sticky left-0 top-[57px] z-50 w-full justify-between overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 backdrop-blur' ); -FixedToolbar.displayName = 'FixedToolbar'; - -export { FixedToolbar }; diff --git a/apps/www/src/registry/default/plate-ui/floating-toolbar.tsx b/apps/www/src/registry/default/plate-ui/floating-toolbar.tsx index d7891d72d3..61d75e1979 100644 --- a/apps/www/src/registry/default/plate-ui/floating-toolbar.tsx +++ b/apps/www/src/registry/default/plate-ui/floating-toolbar.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; +import { cn, withRef } from '@udecode/cn'; import { PortalBody, useComposedRef } from '@udecode/plate-common'; import { flip, @@ -10,17 +11,13 @@ import { useFloatingToolbarState, } from '@udecode/plate-floating'; -import { cn } from '@/lib/utils'; +import { Toolbar } from './toolbar'; -import { Toolbar, ToolbarProps } from './toolbar'; - -export interface FloatingToolbarProps extends ToolbarProps { - state?: FloatingToolbarState; -} - -const FloatingToolbar = React.forwardRef< - React.ElementRef, - FloatingToolbarProps +export const FloatingToolbar = withRef< + typeof Toolbar, + { + state?: FloatingToolbarState; + } >(({ state, children, ...props }, componentRef) => { const floatingToolbarState = useFloatingToolbarState({ ...state, @@ -67,6 +64,3 @@ const FloatingToolbar = React.forwardRef< ); }); -FloatingToolbar.displayName = 'FloatingToolbar'; - -export { FloatingToolbar }; diff --git a/apps/www/src/registry/default/plate-ui/heading-element.tsx b/apps/www/src/registry/default/plate-ui/heading-element.tsx index 7235ae1004..e2495b9547 100644 --- a/apps/www/src/registry/default/plate-ui/heading-element.tsx +++ b/apps/www/src/registry/default/plate-ui/heading-element.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { PlateElement, PlateElementProps } from '@udecode/plate-common'; -import { cva, VariantProps } from 'class-variance-authority'; +import { withRef, withVariants } from '@udecode/cn'; +import { PlateElement } from '@udecode/plate-common'; +import { cva } from 'class-variance-authority'; const headingVariants = cva('', { variants: { @@ -19,28 +20,27 @@ const headingVariants = cva('', { }, }); -export function HeadingElement({ - className, - variant = 'h1', - isFirstBlock, - children, - ...props -}: PlateElementProps & VariantProps) { - const { element, editor } = props; +const HeadingElementVariants = withVariants(PlateElement, headingVariants, [ + 'isFirstBlock', + 'variant', +]); - const Element = variant!; +export const HeadingElement = withRef( + ({ variant = 'h1', isFirstBlock, children, ...props }, ref) => { + const { element, editor } = props; - return ( - - {children} - - ); -} + const Element = variant!; + + return ( + + {children} + + ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/highlight-leaf.tsx b/apps/www/src/registry/default/plate-ui/highlight-leaf.tsx index 0f43071fba..26524bf2e1 100644 --- a/apps/www/src/registry/default/plate-ui/highlight-leaf.tsx +++ b/apps/www/src/registry/default/plate-ui/highlight-leaf.tsx @@ -1,20 +1,16 @@ import React from 'react'; -import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common'; +import { cn, withRef } from '@udecode/cn'; +import { PlateLeaf } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - -export function HighlightLeaf({ - className, - children, - ...props -}: PlateLeafProps) { - return ( +export const HighlightLeaf = withRef( + ({ className, children, ...props }, ref) => ( {children} - ); -} + ) +); diff --git a/apps/www/src/registry/default/plate-ui/hr-element.tsx b/apps/www/src/registry/default/plate-ui/hr-element.tsx index 6e637041a8..e5a9702fa6 100644 --- a/apps/www/src/registry/default/plate-ui/hr-element.tsx +++ b/apps/www/src/registry/default/plate-ui/hr-element.tsx @@ -1,34 +1,29 @@ import React from 'react'; -import { PlateElement, PlateElementProps } from '@udecode/plate-common'; +import { cn, withRef } from '@udecode/cn'; +import { PlateElement } from '@udecode/plate-common'; import { useFocused, useSelected } from 'slate-react'; -import { cn } from '@/lib/utils'; +export const HrElement = withRef( + ({ className, nodeProps, ...props }, ref) => { + const { children } = props; -const HrElement = React.forwardRef< - React.ElementRef, - PlateElementProps ->(({ className, nodeProps, ...props }, ref) => { - const { children } = props; + const selected = useSelected(); + const focused = useFocused(); - const selected = useSelected(); - const focused = useFocused(); - - return ( - -
-
-
- {children} - - ); -}); -HrElement.displayName = 'HrElement'; - -export { HrElement }; + return ( + +
+
+
+ {children} + + ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/image-element.tsx b/apps/www/src/registry/default/plate-ui/image-element.tsx index f6e71dfc93..236c203c18 100644 --- a/apps/www/src/registry/default/plate-ui/image-element.tsx +++ b/apps/www/src/registry/default/plate-ui/image-element.tsx @@ -1,20 +1,9 @@ import React from 'react'; -import { - PlateElement, - PlateElementProps, - Value, - withHOC, -} from '@udecode/plate-common'; -import { - ELEMENT_IMAGE, - Image, - TImageElement, - useMediaState, -} from '@udecode/plate-media'; +import { cn, withRef } from '@udecode/cn'; +import { PlateElement, withHOC } from '@udecode/plate-common'; +import { ELEMENT_IMAGE, Image, useMediaState } from '@udecode/plate-media'; import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable'; -import { cn } from '@/lib/utils'; - import { Caption, CaptionTextarea } from './caption'; import { MediaPopover } from './media-popover'; import { @@ -23,61 +12,59 @@ import { ResizeHandle, } from './resizable'; -const ImageElement = withHOC( +export const ImageElement = withHOC( ResizableProvider, - ({ - className, - children, - nodeProps, - ...props - }: PlateElementProps) => { - const { readOnly, focused, selected, align = 'center' } = useMediaState(); - const width = useResizableStore().get.width(); + withRef( + ({ className, children, nodeProps, ...props }, ref) => { + const { readOnly, focused, selected, align = 'center' } = useMediaState(); + const width = useResizableStore().get.width(); - return ( - - -
- - - - - + return ( + + +
+ + + + + - - - -
+ + + +
- {children} - - - ); - } + {children} + + + ); + } + ) ); -ImageElement.displayName = 'ImageElement'; - -export { ImageElement }; diff --git a/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx index 9bf1e08a43..191cfb8f3d 100644 --- a/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx +++ b/apps/www/src/registry/default/plate-ui/indent-list-toolbar-button.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { withRef } from '@udecode/cn'; import { ListStyleType, useIndentListToolbarButton, @@ -7,16 +8,20 @@ import { import { Icons } from '@/components/icons'; -import { ToolbarButton, ToolbarButtonProps } from './toolbar'; +import { ToolbarButton } from './toolbar'; -export function IndentListToolbarButton({ - nodeType = ListStyleType.Disc, -}: ToolbarButtonProps & { nodeType?: ListStyleType }) { +export const IndentListToolbarButton = withRef< + typeof ToolbarButton, + { + nodeType?: ListStyleType; + } +>(({ nodeType = ListStyleType.Disc }, ref) => { const state = useIndentListToolbarButtonState({ nodeType }); const { props } = useIndentListToolbarButton(state); return ( : } ); -} +}); diff --git a/apps/www/src/registry/default/plate-ui/indent-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/indent-toolbar-button.tsx index 53dce21aca..6d36bf3908 100644 --- a/apps/www/src/registry/default/plate-ui/indent-toolbar-button.tsx +++ b/apps/www/src/registry/default/plate-ui/indent-toolbar-button.tsx @@ -1,16 +1,19 @@ import React from 'react'; +import { withRef } from '@udecode/cn'; import { useIndentButton } from '@udecode/plate-indent'; import { Icons } from '@/components/icons'; import { ToolbarButton } from './toolbar'; -export function IndentToolbarButton() { - const { props } = useIndentButton(); +export const IndentToolbarButton = withRef( + (rest, ref) => { + const { props } = useIndentButton(); - return ( - - - - ); -} + return ( + + + + ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/input.tsx b/apps/www/src/registry/default/plate-ui/input.tsx index b4c7598860..16cdc2d078 100644 --- a/apps/www/src/registry/default/plate-ui/input.tsx +++ b/apps/www/src/registry/default/plate-ui/input.tsx @@ -1,7 +1,5 @@ -import * as React from 'react'; -import { cva, VariantProps } from 'class-variance-authority'; - -import { cn } from '@/lib/utils'; +import { withVariants } from '@udecode/cn'; +import { cva } from 'class-variance-authority'; export const inputVariants = cva( 'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50', @@ -24,22 +22,4 @@ export const inputVariants = cva( } ); -export interface InputProps - extends React.InputHTMLAttributes, - VariantProps {} - -const Input = React.forwardRef( - ({ className, variant, type, ...props }, ref) => { - return ( - - ); - } -); -Input.displayName = 'Input'; - -export { Input }; +export const Input = withVariants('input', inputVariants, ['variant', 'h']); diff --git a/apps/www/src/registry/default/plate-ui/kbd-leaf.tsx b/apps/www/src/registry/default/plate-ui/kbd-leaf.tsx index 4b7b0ee09d..e041466025 100644 --- a/apps/www/src/registry/default/plate-ui/kbd-leaf.tsx +++ b/apps/www/src/registry/default/plate-ui/kbd-leaf.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common'; +import { cn, withRef } from '@udecode/cn'; +import { PlateLeaf } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - -export function KbdLeaf({ className, children, ...props }: PlateLeafProps) { - return ( +export const KbdLeaf = withRef( + ({ className, children, ...props }, ref) => ( {children} - ); -} + ) +); diff --git a/apps/www/src/registry/default/plate-ui/link-element.tsx b/apps/www/src/registry/default/plate-ui/link-element.tsx index 8387e48950..90a3c92d2a 100644 --- a/apps/www/src/registry/default/plate-ui/link-element.tsx +++ b/apps/www/src/registry/default/plate-ui/link-element.tsx @@ -1,30 +1,26 @@ import React from 'react'; -import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common'; +import { cn, withRef } from '@udecode/cn'; +import { PlateElement, useElement } from '@udecode/plate-common'; import { TLinkElement, useLink } from '@udecode/plate-link'; -import { cn } from '@/lib/utils'; +export const LinkElement = withRef( + ({ className, children, ...props }, ref) => { + const element = useElement(); + const { props: linkProps } = useLink({ element }); -const LinkElement = React.forwardRef< - React.ElementRef, - PlateElementProps ->(({ className, children, ...props }, ref) => { - const { props: linkProps } = useLink({ element: props.element }); - - return ( - - {children} - - ); -}); -LinkElement.displayName = 'LinkElement'; - -export { LinkElement }; + return ( + + {children} + + ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/link-floating-toolbar.tsx b/apps/www/src/registry/default/plate-ui/link-floating-toolbar.tsx index 2fca9fb703..d6a89f4994 100644 --- a/apps/www/src/registry/default/plate-ui/link-floating-toolbar.tsx +++ b/apps/www/src/registry/default/plate-ui/link-floating-toolbar.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { flip, offset, @@ -16,7 +17,6 @@ import { useFloatingLinkInsertState, } from '@udecode/plate-link'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { buttonVariants } from './button'; diff --git a/apps/www/src/registry/default/plate-ui/link-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/link-toolbar-button.tsx index 2598e08dbf..1401e044db 100644 --- a/apps/www/src/registry/default/plate-ui/link-toolbar-button.tsx +++ b/apps/www/src/registry/default/plate-ui/link-toolbar-button.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { withRef } from '@udecode/cn'; import { useLinkToolbarButton, useLinkToolbarButtonState, @@ -8,13 +9,13 @@ import { Icons } from '@/components/icons'; import { ToolbarButton } from './toolbar'; -export function LinkToolbarButton() { +export const LinkToolbarButton = withRef((rest, ref) => { const state = useLinkToolbarButtonState(); const { props } = useLinkToolbarButton(state); return ( - + ); -} +}); 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 c13e4e7112..470da9d99c 100644 --- a/apps/www/src/registry/default/plate-ui/list-element.tsx +++ b/apps/www/src/registry/default/plate-ui/list-element.tsx @@ -1,8 +1,7 @@ import React from 'react'; -import { PlateElement, PlateElementProps } from '@udecode/plate-common'; -import { cva, VariantProps } from 'class-variance-authority'; - -import { cn } from '@/lib/utils'; +import { withRef, withVariants } from '@udecode/cn'; +import { PlateElement } from '@udecode/plate-common'; +import { cva } from 'class-variance-authority'; const listVariants = cva('m-0 ps-6', { variants: { @@ -13,21 +12,18 @@ const listVariants = cva('m-0 ps-6', { }, }); -export function ListElement({ - className, - children, - variant = 'ul', - ...props -}: PlateElementProps & VariantProps) { - const Element = variant!; +const ListElementVariants = withVariants(PlateElement, listVariants, [ + 'variant', +]); + +export const ListElement = withRef( + ({ className, children, variant = 'ul', ...props }, ref) => { + const Component = variant!; - return ( - - {children} - - ); -} + return ( + + {children} + + ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/list-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/list-toolbar-button.tsx index 5de764466f..e714752f16 100644 --- a/apps/www/src/registry/default/plate-ui/list-toolbar-button.tsx +++ b/apps/www/src/registry/default/plate-ui/list-toolbar-button.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { withRef } from '@udecode/cn'; import { ELEMENT_UL, useListToolbarButton, @@ -9,20 +10,23 @@ import { Icons } from '@/components/icons'; import { ToolbarButton } from './toolbar'; -export function ListToolbarButton({ - nodeType = ELEMENT_UL, -}: { - nodeType?: string; -}) { +export const ListToolbarButton = withRef< + typeof ToolbarButton, + { + nodeType?: string; + } +>(({ nodeType = ELEMENT_UL, ...rest }, ref) => { const state = useListToolbarButtonState({ nodeType }); const { props } = useListToolbarButton(state); return ( {nodeType === ELEMENT_UL ? : } ); -} +}); diff --git a/apps/www/src/registry/default/plate-ui/mark-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/mark-toolbar-button.tsx index dfc3edf2e6..d93e782e77 100644 --- a/apps/www/src/registry/default/plate-ui/mark-toolbar-button.tsx +++ b/apps/www/src/registry/default/plate-ui/mark-toolbar-button.tsx @@ -1,29 +1,23 @@ 'use client'; import React from 'react'; +import { withRef } from '@udecode/cn'; import { useMarkToolbarButton, useMarkToolbarButtonState, } from '@udecode/plate-common'; -import { ToolbarButton, ToolbarButtonProps } from './toolbar'; +import { ToolbarButton } from './toolbar'; -export interface MarkToolbarButtonProps - extends Pick { - nodeType: string; - clear?: string | string[]; -} - -/** - * Toolbar button to toggle the mark of the leaves in selection. - */ -export function MarkToolbarButton({ - clear, - nodeType, - ...props -}: MarkToolbarButtonProps) { +export const MarkToolbarButton = withRef< + typeof ToolbarButton, + { + nodeType: string; + clear?: string | string[]; + } +>(({ clear, nodeType, ...rest }, ref) => { const state = useMarkToolbarButtonState({ clear, nodeType }); - const { props: buttonProps } = useMarkToolbarButton(state); + const { props } = useMarkToolbarButton(state); - return ; -} + return ; +}); diff --git a/apps/www/src/registry/default/plate-ui/media-embed-element.tsx b/apps/www/src/registry/default/plate-ui/media-embed-element.tsx index 470aa5e050..56f3bd1282 100644 --- a/apps/www/src/registry/default/plate-ui/media-embed-element.tsx +++ b/apps/www/src/registry/default/plate-ui/media-embed-element.tsx @@ -1,23 +1,16 @@ import React from 'react'; -import { - PlateElement, - PlateElementProps, - Value, - withHOC, -} from '@udecode/plate-common'; +import { cn, withRef } from '@udecode/cn'; +import { PlateElement, withHOC } from '@udecode/plate-common'; import { ELEMENT_MEDIA_EMBED, parseTwitterUrl, parseVideoUrl, - TMediaEmbedElement, useMediaState, } from '@udecode/plate-media'; import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable'; import LiteYouTubeEmbed from 'react-lite-youtube-embed'; import { Tweet } from 'react-tweet'; -import { cn } from '@/lib/utils'; - import { Caption, CaptionTextarea } from './caption'; import { MediaPopover } from './media-popover'; import { @@ -26,13 +19,9 @@ import { ResizeHandle, } from './resizable'; -const MediaEmbedElement = withHOC( +export const MediaEmbedElement = withHOC( ResizableProvider, - // eslint-disable-next-line react/display-name - React.forwardRef< - React.ElementRef, - PlateElementProps - >(({ className, children, ...props }, ref) => { + withRef(({ className, children, ...props }, ref) => { const { align = 'center', focused, @@ -145,6 +134,3 @@ const MediaEmbedElement = withHOC( ); }) ); -MediaEmbedElement.displayName = 'MediaEmbedElement'; - -export { MediaEmbedElement }; diff --git a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx index cef85b6d5a..520b6d267b 100644 --- a/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx +++ b/apps/www/src/registry/default/plate-ui/media-toolbar-button.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { withRef } from '@udecode/cn'; import { ELEMENT_IMAGE, ELEMENT_MEDIA_EMBED, @@ -9,16 +10,17 @@ import { Icons } from '@/components/icons'; import { ToolbarButton } from './toolbar'; -export function MediaToolbarButton({ - nodeType, -}: { - nodeType?: typeof ELEMENT_IMAGE | typeof ELEMENT_MEDIA_EMBED; -}) { +export const MediaToolbarButton = withRef< + typeof ToolbarButton, + { + nodeType?: typeof ELEMENT_IMAGE | typeof ELEMENT_MEDIA_EMBED; + } +>(({ nodeType, ...rest }, ref) => { const { props } = useMediaToolbarButton({ nodeType }); return ( - + ); -} +}); diff --git a/apps/www/src/registry/default/plate-ui/mention-combobox.tsx b/apps/www/src/registry/default/plate-ui/mention-combobox.tsx index e2d65f27b0..5c127e2ca4 100644 --- a/apps/www/src/registry/default/plate-ui/mention-combobox.tsx +++ b/apps/www/src/registry/default/plate-ui/mention-combobox.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ComboboxProps, Data, NoData } from '@udecode/plate-combobox'; +import { ComboboxProps } from '@udecode/plate-combobox'; import { getPluginOptions, useEditorRef } from '@udecode/plate-common'; import { ELEMENT_MENTION, @@ -9,16 +9,13 @@ import { import { Combobox } from './combobox'; -export interface MentionComboboxProps - extends Partial> { - pluginKey?: string; -} - -export function MentionCombobox({ +export function MentionCombobox({ pluginKey = ELEMENT_MENTION, id = pluginKey, ...props -}: MentionComboboxProps) { +}: Partial & { + pluginKey?: string; +}) { const editor = useEditorRef(); const { trigger } = getPluginOptions(editor, pluginKey); diff --git a/apps/www/src/registry/default/plate-ui/mention-element.tsx b/apps/www/src/registry/default/plate-ui/mention-element.tsx index f475a4d794..27a55f74b5 100644 --- a/apps/www/src/registry/default/plate-ui/mention-element.tsx +++ b/apps/www/src/registry/default/plate-ui/mention-element.tsx @@ -1,31 +1,18 @@ -import React, { forwardRef } from 'react'; -import { - getHandler, - PlateElement, - PlateElementProps, - Value, -} from '@udecode/plate-common'; +import React from 'react'; +import { cn, withRef } from '@udecode/cn'; +import { getHandler, PlateElement, useElement } from '@udecode/plate-common'; import { TMentionElement } from '@udecode/plate-mention'; import { useFocused, useSelected } from 'slate-react'; -import { cn } from '@/lib/utils'; - -export interface MentionElementProps - extends PlateElementProps { - /** - * Prefix rendered before mention - */ - prefix?: string; - onClick?: (mentionNode: any) => void; - renderLabel?: (mentionable: TMentionElement) => string; -} - -const MentionElement = forwardRef< - React.ElementRef, - MentionElementProps ->(({ prefix, renderLabel, className, onClick, ...props }, ref) => { - const { children, element } = props; - +export const MentionElement = withRef< + typeof PlateElement, + { + prefix?: string; + onClick?: (mentionNode: any) => void; + renderLabel?: (mentionable: TMentionElement) => string; + } +>(({ children, prefix, renderLabel, className, onClick, ...props }, ref) => { + const element = useElement(); const selected = useSelected(); const focused = useFocused(); @@ -51,7 +38,3 @@ const MentionElement = forwardRef< ); }); - -MentionElement.displayName = 'MentionElement'; - -export { MentionElement }; diff --git a/apps/www/src/registry/default/plate-ui/mention-input-element.tsx b/apps/www/src/registry/default/plate-ui/mention-input-element.tsx index 2b3257be1e..c59dc27efa 100644 --- a/apps/www/src/registry/default/plate-ui/mention-input-element.tsx +++ b/apps/www/src/registry/default/plate-ui/mention-input-element.tsx @@ -1,23 +1,13 @@ import React from 'react'; -import { - getHandler, - PlateElement, - PlateElementProps, - Value, -} from '@udecode/plate-common'; -import { TMentionElement } from '@udecode/plate-mention'; +import { cn, withRef } from '@udecode/cn'; +import { getHandler, PlateElement } from '@udecode/plate-common'; import { useFocused, useSelected } from 'slate-react'; -import { cn } from '@/lib/utils'; - -export interface MentionInputElementProps - extends PlateElementProps { - onClick?: (mentionNode: any) => void; -} - -const MentionInputElement = React.forwardRef< - React.ElementRef, - MentionInputElementProps +export const MentionInputElement = withRef< + typeof PlateElement, + { + onClick?: (mentionNode: any) => void; + } >(({ className, onClick, ...props }, ref) => { const { children, element } = props; @@ -26,8 +16,8 @@ const MentionInputElement = React.forwardRef< return ( ); }); -MentionInputElement.displayName = 'MentionInputElement'; - -export { MentionInputElement }; diff --git a/apps/www/src/registry/default/plate-ui/outdent-toolbar-button.tsx b/apps/www/src/registry/default/plate-ui/outdent-toolbar-button.tsx index 1d92e309e3..99b86b1bec 100644 --- a/apps/www/src/registry/default/plate-ui/outdent-toolbar-button.tsx +++ b/apps/www/src/registry/default/plate-ui/outdent-toolbar-button.tsx @@ -1,16 +1,19 @@ import React from 'react'; +import { withRef } from '@udecode/cn'; import { useOutdentButton } from '@udecode/plate-indent'; import { Icons } from '@/components/icons'; import { ToolbarButton } from './toolbar'; -export function OutdentToolbarButton() { - const { props } = useOutdentButton(); +export const OutdentToolbarButton = withRef( + (rest, ref) => { + const { props } = useOutdentButton(); - return ( - - - - ); -} + return ( + + + + ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/paragraph-element.tsx b/apps/www/src/registry/default/plate-ui/paragraph-element.tsx index a5318f8abd..9196c2aa36 100644 --- a/apps/www/src/registry/default/plate-ui/paragraph-element.tsx +++ b/apps/www/src/registry/default/plate-ui/paragraph-element.tsx @@ -1,22 +1,4 @@ -import React from 'react'; -import { PlateElement, PlateElementProps } from '@udecode/plate-common'; +import { withCn } from '@udecode/cn'; +import { PlateElement } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - -const ParagraphElement = React.forwardRef< - React.ElementRef, - PlateElementProps ->(({ className, children, ...props }: PlateElementProps, ref) => { - return ( - - {children} - - ); -}); -ParagraphElement.displayName = 'ParagraphElement'; - -export { ParagraphElement }; +export const ParagraphElement = withCn(PlateElement, 'm-0 px-0 py-1'); diff --git a/apps/www/src/registry/default/plate-ui/placeholder.tsx b/apps/www/src/registry/default/plate-ui/placeholder.tsx index 7ed4dbf2e1..9f62a7aaa6 100644 --- a/apps/www/src/registry/default/plate-ui/placeholder.tsx +++ b/apps/www/src/registry/default/plate-ui/placeholder.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { createNodeHOC, createNodesHOC, @@ -8,8 +9,6 @@ import { import { ELEMENT_H1 } from '@udecode/plate-heading'; import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph'; -import { cn } from '@/lib/utils'; - export const Placeholder = (props: PlaceholderProps) => { const { children, placeholder, nodeProps } = props; diff --git a/apps/www/src/registry/default/plate-ui/popover.tsx b/apps/www/src/registry/default/plate-ui/popover.tsx index 57f42a82bb..1218647652 100644 --- a/apps/www/src/registry/default/plate-ui/popover.tsx +++ b/apps/www/src/registry/default/plate-ui/popover.tsx @@ -2,34 +2,28 @@ import * as React from 'react'; import * as PopoverPrimitive from '@radix-ui/react-popover'; +import { cn, withRef } from '@udecode/cn'; import { cva } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - -const Popover = PopoverPrimitive.Root; - -const PopoverTrigger = PopoverPrimitive.Trigger; -const PopoverAnchor = PopoverPrimitive.Anchor; +export const Popover = PopoverPrimitive.Root; +export const PopoverTrigger = PopoverPrimitive.Trigger; +export const PopoverAnchor = PopoverPrimitive.Anchor; export const popoverVariants = cva( 'w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 print:hidden' ); -const PopoverContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, style, align = 'center', sideOffset = 4, ...props }, ref) => ( - - - -)); -PopoverContent.displayName = PopoverPrimitive.Content.displayName; - -export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent }; +export const PopoverContent = withRef( + ({ className, style, align = 'center', sideOffset = 4, ...props }, ref) => ( + + + + ) +); diff --git a/apps/www/src/registry/default/plate-ui/resizable.tsx b/apps/www/src/registry/default/plate-ui/resizable.tsx index 3fe67f0161..553ad77c84 100644 --- a/apps/www/src/registry/default/plate-ui/resizable.tsx +++ b/apps/www/src/registry/default/plate-ui/resizable.tsx @@ -1,13 +1,12 @@ 'use client'; -import React, { ComponentProps } from 'react'; +import React from 'react'; +import { cn, withRef, withVariants } from '@udecode/cn'; import { Resizable as ResizablePrimitive, ResizeHandle as ResizeHandlePrimitive, } from '@udecode/plate-resizable'; -import { cva, VariantProps } from 'class-variance-authority'; - -import { cn } from '@/lib/utils'; +import { cva } from 'class-variance-authority'; export const mediaResizeHandleVariants = cva( cn( @@ -35,21 +34,21 @@ const resizeHandleVariants = cva(cn('absolute z-40'), { }, }); -const ResizeHandle = React.forwardRef< - React.ElementRef, - ComponentProps & - Omit, 'direction'> ->(({ className, ...props }, ref) => ( - -)); -ResizeHandle.displayName = 'ResizeHandle'; +const ResizeHandleVariants = withVariants( + ResizeHandlePrimitive, + resizeHandleVariants, + ['direction'] +); + +export const ResizeHandle = withRef( + (props, ref) => ( + + ) +); const resizableVariants = cva('', { variants: { @@ -61,17 +60,6 @@ const resizableVariants = cva('', { }, }); -const Resizable = React.forwardRef< - React.ElementRef, - ComponentProps & - VariantProps ->(({ className, align, ...props }, ref) => ( - -)); -Resizable.displayName = 'Resizable'; - -export { Resizable, ResizeHandle }; +export const Resizable = withVariants(ResizablePrimitive, resizableVariants, [ + 'align', +]); diff --git a/apps/www/src/registry/default/plate-ui/search-highlight-leaf.tsx b/apps/www/src/registry/default/plate-ui/search-highlight-leaf.tsx index b5d391854c..5ae8219906 100644 --- a/apps/www/src/registry/default/plate-ui/search-highlight-leaf.tsx +++ b/apps/www/src/registry/default/plate-ui/search-highlight-leaf.tsx @@ -1,8 +1,4 @@ -import React from 'react'; -import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common'; +import { withCn } from '@udecode/cn'; +import { PlateLeaf } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - -export function SearchHighlightLeaf({ className, ...props }: PlateLeafProps) { - return ; -} +export const SearchHighlightLeaf = withCn(PlateLeaf, 'bg-yellow-100'); diff --git a/apps/www/src/registry/default/plate-ui/separator.tsx b/apps/www/src/registry/default/plate-ui/separator.tsx index da040615d4..9129e7f4d7 100644 --- a/apps/www/src/registry/default/plate-ui/separator.tsx +++ b/apps/www/src/registry/default/plate-ui/separator.tsx @@ -1,31 +1,25 @@ 'use client'; -import * as React from 'react'; import * as SeparatorPrimitive from '@radix-ui/react-separator'; +import { withProps, withVariants } from '@udecode/cn'; +import { cva } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; +const separatorVariants = cva('shrink-0 bg-border', { + variants: { + orientation: { + horizontal: 'h-[1px] w-full', + vertical: 'h-full w-[1px]', + }, + }, + defaultVariants: { + orientation: 'horizontal', + }, +}); -const Separator = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->( - ( - { className, orientation = 'horizontal', decorative = true, ...props }, - ref - ) => ( - - ) +export const Separator = withVariants( + withProps(SeparatorPrimitive.Root, { + orientation: 'horizontal', + decorative: true, + }), + separatorVariants ); -Separator.displayName = SeparatorPrimitive.Root.displayName; - -export { Separator }; diff --git a/apps/www/src/registry/default/plate-ui/table-cell-element.tsx b/apps/www/src/registry/default/plate-ui/table-cell-element.tsx index 818f19b8b8..5b8b655957 100644 --- a/apps/www/src/registry/default/plate-ui/table-cell-element.tsx +++ b/apps/www/src/registry/default/plate-ui/table-cell-element.tsx @@ -1,26 +1,21 @@ import React from 'react'; -import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common'; +import { cn, withProps, withRef } from '@udecode/cn'; +import { PlateElement } from '@udecode/plate-common'; import { - TTableCellElement, useTableCellElement, useTableCellElementResizable, useTableCellElementResizableState, useTableCellElementState, } from '@udecode/plate-table'; -import { cn } from '@/lib/utils'; - import { ResizeHandle } from './resizable'; -export interface TableCellElementProps - extends PlateElementProps { - hideBorder?: boolean; - isHeader?: boolean; -} - -const TableCellElement = React.forwardRef< - React.ElementRef, - TableCellElementProps +export const TableCellElement = withRef< + typeof PlateElement, + { + hideBorder?: boolean; + isHeader?: boolean; + } >(({ children, className, style, hideBorder, isHeader, ...props }, ref) => { const { element } = props; @@ -50,8 +45,8 @@ const TableCellElement = React.forwardRef< return ( , - TableCellElementProps ->((props, ref) => { - return ; +export const TableCellHeaderElement = withProps(TableCellElement, { + isHeader: true, }); -TableCellHeaderElement.displayName = 'TableCellHeaderElement'; - -export { TableCellElement, TableCellHeaderElement }; diff --git a/apps/www/src/registry/default/plate-ui/table-element.tsx b/apps/www/src/registry/default/plate-ui/table-element.tsx index 3ff8aafed2..669e2eb0dd 100644 --- a/apps/www/src/registry/default/plate-ui/table-element.tsx +++ b/apps/www/src/registry/default/plate-ui/table-element.tsx @@ -1,10 +1,10 @@ -import React, { forwardRef } from 'react'; +import React from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; -import { PopoverAnchor, PopoverContentProps } from '@radix-ui/react-popover'; +import { PopoverAnchor } from '@radix-ui/react-popover'; +import { cn, withRef } from '@udecode/cn'; import { isSelectionExpanded, PlateElement, - PlateElementProps, useEditorRef, useEditorSelector, useElement, @@ -21,7 +21,6 @@ import { } from '@udecode/plate-table'; import { useReadOnly, useSelected } from 'slate-react'; -import { cn } from '@/lib/utils'; import { Icons, iconVariants } from '@/components/icons'; import { Button } from './button'; @@ -35,9 +34,8 @@ import { import { Popover, PopoverContent, popoverVariants } from './popover'; import { Separator } from './separator'; -const TableBordersDropdownMenuContent = forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef +export const TableBordersDropdownMenuContent = withRef< + typeof DropdownMenuPrimitive.Content >((props, ref) => { const { getOnSelectTableBorder, @@ -106,137 +104,133 @@ const TableBordersDropdownMenuContent = forwardRef< ); }); -TableBordersDropdownMenuContent.displayName = 'TableBordersDropdownMenuContent'; - -const TableFloatingToolbar = React.forwardRef< - React.ElementRef, - PopoverContentProps ->(({ children, ...props }, ref) => { - const element = useElement(); - const { props: buttonProps } = useRemoveNodeButton({ element }); - - const selectionCollapsed = useEditorSelector( - (editor) => !isSelectionExpanded(editor), - [] - ); - const readOnly = useReadOnly(); - const selected = useSelected(); - const editor = useEditorRef(); +export const TableFloatingToolbar = withRef( + ({ children, ...props }, ref) => { + const element = useElement(); + const { props: buttonProps } = useRemoveNodeButton({ element }); - const collapsed = !readOnly && selected && selectionCollapsed; - const open = !readOnly && selected; + const selectionCollapsed = useEditorSelector( + (editor) => !isSelectionExpanded(editor), + [] + ); - const { canMerge, canUnmerge } = useTableMergeState(); + const readOnly = useReadOnly(); + const selected = useSelected(); + const editor = useEditorRef(); - const mergeContent = canMerge && ( - - ); + const collapsed = !readOnly && selected && selectionCollapsed; + const open = !readOnly && selected; - const unmergeButton = canUnmerge && ( - - ); + const { canMerge, canUnmerge } = useTableMergeState(); - const bordersContent = collapsed && ( - <> - - - - - - - - - - - - - ); - - return ( - - {children} - {(canMerge || canUnmerge || collapsed) && ( - e.preventDefault()} - {...props} - > - {unmergeButton} - {mergeContent} - {bordersContent} - - )} - - ); -}); -TableFloatingToolbar.displayName = 'TableFloatingToolbar'; - -const TableElement = React.forwardRef< - React.ElementRef, - PlateElementProps ->(({ className, children, ...props }, ref) => { - const { colSizes, isSelectingCell, minColumnWidth, marginLeft } = - useTableElementState(); - const { props: tableProps, colGroupProps } = useTableElement(); - - return ( - -
- - - - {colSizes.map((width, index) => ( - - ))} - - - {children} -
- -
- - ); -}); -TableElement.displayName = 'TableElement'; - -export { TableElement, TableFloatingToolbar, TableBordersDropdownMenuContent }; + ); + + const unmergeButton = canUnmerge && ( + + ); + + const bordersContent = collapsed && ( + <> + + + + + + + + + + + + + ); + + return ( + + {children} + {(canMerge || canUnmerge || collapsed) && ( + e.preventDefault()} + {...props} + > + {unmergeButton} + {mergeContent} + {bordersContent} + + )} + + ); + } +); + +export const TableElement = withRef( + ({ className, children, ...props }, ref) => { + const { colSizes, isSelectingCell, minColumnWidth, marginLeft } = + useTableElementState(); + const { props: tableProps, colGroupProps } = useTableElement(); + + return ( + +
+ + + + {colSizes.map((width, index) => ( + + ))} + + + {children} +
+ +
+ + ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/table-row-element.tsx b/apps/www/src/registry/default/plate-ui/table-row-element.tsx index e8026ae1f2..a782d3831e 100644 --- a/apps/www/src/registry/default/plate-ui/table-row-element.tsx +++ b/apps/www/src/registry/default/plate-ui/table-row-element.tsx @@ -1,15 +1,12 @@ import React from 'react'; -import { PlateElement, PlateElementProps } from '@udecode/plate-common'; +import { cn, withRef } from '@udecode/cn'; +import { PlateElement } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - -export interface PlateTableRowElementProps extends PlateElementProps { - hideBorder?: boolean; -} - -const TableRowElement = React.forwardRef< - React.ElementRef, - PlateTableRowElementProps +export const TableRowElement = withRef< + typeof PlateElement, + { + hideBorder?: boolean; + } >(({ hideBorder, children, ...props }, ref) => { return ( ); }); -TableRowElement.displayName = 'TableRowElement'; - -export { TableRowElement }; diff --git a/apps/www/src/registry/default/plate-ui/todo-list-element.tsx b/apps/www/src/registry/default/plate-ui/todo-list-element.tsx index 9e03cba164..8afe6ff412 100644 --- a/apps/www/src/registry/default/plate-ui/todo-list-element.tsx +++ b/apps/www/src/registry/default/plate-ui/todo-list-element.tsx @@ -1,47 +1,42 @@ import React from 'react'; -import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common'; +import { cn, withRef } from '@udecode/cn'; +import { PlateElement } from '@udecode/plate-common'; import { - TTodoListItemElement, useTodoListElement, useTodoListElementState, } from '@udecode/plate-list'; -import { cn } from '@/lib/utils'; - import { Checkbox } from './checkbox'; -export type TodoListElementProps = PlateElementProps< - Value, - TTodoListItemElement ->; - -export function TodoListElement({ - className, - children, - ...props -}: TodoListElementProps) { - const { element } = props; - const state = useTodoListElementState({ element }); - const { checkboxProps } = useTodoListElement(state); +export const TodoListElement = withRef( + ({ className, children, ...props }, ref) => { + const { element } = props; + const state = useTodoListElementState({ element }); + const { checkboxProps } = useTodoListElement(state); - return ( - -
- -
- - {children} - - - ); -} +
+ +
+ + {children} + + + ); + } +); diff --git a/apps/www/src/registry/default/plate-ui/toggle.tsx b/apps/www/src/registry/default/plate-ui/toggle.tsx index 3594c18f40..162d038be7 100644 --- a/apps/www/src/registry/default/plate-ui/toggle.tsx +++ b/apps/www/src/registry/default/plate-ui/toggle.tsx @@ -1,12 +1,10 @@ 'use client'; -import * as React from 'react'; import * as TogglePrimitive from '@radix-ui/react-toggle'; -import { cva, VariantProps } from 'class-variance-authority'; +import { cn, withVariants } from '@udecode/cn'; +import { cva } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - -const toggleVariants = cva( +export const toggleVariants = cva( cn( 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', '[&_svg:not([data-icon])]:h-5 [&_svg:not([data-icon])]:w-5' @@ -34,22 +32,7 @@ const toggleVariants = cva( } ); -export type ToggleProps = React.ComponentPropsWithoutRef< - typeof TogglePrimitive.Root -> & - VariantProps; - -const Toggle = React.forwardRef< - React.ElementRef, - ToggleProps ->(({ className, variant, size, ...props }, ref) => ( - -)); - -Toggle.displayName = TogglePrimitive.Root.displayName; - -export { Toggle, toggleVariants }; +export const Toggle = withVariants(TogglePrimitive.Root, toggleVariants, [ + 'size', + 'variant', +]); diff --git a/apps/www/src/registry/default/plate-ui/toolbar.tsx b/apps/www/src/registry/default/plate-ui/toolbar.tsx index 898e33d2a1..4f0fe297e6 100644 --- a/apps/www/src/registry/default/plate-ui/toolbar.tsx +++ b/apps/www/src/registry/default/plate-ui/toolbar.tsx @@ -1,15 +1,14 @@ 'use client'; import * as React from 'react'; -import { ReactNode } from 'react'; +import { ComponentPropsWithoutRef, ReactNode } from 'react'; import * as ToolbarPrimitive from '@radix-ui/react-toolbar'; -import { cva, VariantProps } from 'class-variance-authority'; +import { cn, withCn, withRef, withVariants } from '@udecode/cn'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { Separator } from './separator'; -import { ToggleProps, toggleVariants } from './toggle'; +import { Toggle, toggleVariants } from './toggle'; import { Tooltip, TooltipContent, @@ -17,68 +16,31 @@ import { TooltipTrigger, } from './tooltip'; -const toolbarVariants = cva( +export const Toolbar = withCn( + ToolbarPrimitive.Root, 'relative flex select-none items-stretch gap-1 bg-background' ); -export const linkVariants = cva('font-medium underline underline-offset-4'); - -const ToolbarToggleGroup = ToolbarPrimitive.ToggleGroup; - -export interface ToolbarProps - extends React.ComponentPropsWithoutRef {} - -const Toolbar = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & - VariantProps ->(({ className, ...props }, ref) => ( - -)); -Toolbar.displayName = ToolbarPrimitive.Root.displayName; - -const ToolbarLink = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & - VariantProps ->(({ className, ...props }, ref) => ( - -)); -ToolbarLink.displayName = ToolbarPrimitive.Link.displayName; - -const ToolbarSeparator = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)); -ToolbarSeparator.displayName = ToolbarPrimitive.Separator.displayName; - -export interface ToolbarButtonProps - extends React.ComponentPropsWithoutRef, - VariantProps, - Omit { - buttonType?: 'button' | 'toggle'; - pressed?: boolean; - tooltip?: ReactNode; - isDropdown?: boolean; -} - -const ToolbarButton = React.forwardRef< - React.ElementRef, - ToolbarButtonProps +export const ToolbarToggleGroup = ToolbarPrimitive.ToggleGroup; + +export const ToolbarLink = withCn( + ToolbarPrimitive.Link, + 'font-medium underline underline-offset-4' +); + +export const ToolbarSeparator = withCn( + ToolbarPrimitive.Separator, + 'my-1 w-[1px] shrink-0 bg-border' +); + +export const ToolbarButton = withRef< + typeof ToolbarPrimitive.Button, + Omit, 'type'> & { + buttonType?: 'button' | 'toggle'; + pressed?: boolean; + tooltip?: ReactNode; + isDropdown?: boolean; + } >( ( { @@ -154,25 +116,19 @@ const ToolbarButton = React.forwardRef< ); } ); -ToolbarButton.displayName = ToolbarPrimitive.Button.displayName; - -const ToolbarToggleItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & - VariantProps ->(({ className, variant, size, ...props }, ref) => ( - -)); -ToolbarToggleItem.displayName = ToolbarPrimitive.ToggleItem.displayName; - -const ToolbarGroup = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes & { noSeparator?: boolean } ->(({ noSeparator, className, children }, ref) => { + +export const ToolbarToggleItem = withVariants( + ToolbarPrimitive.ToggleItem, + toggleVariants, + ['variant', 'size'] +); + +export const ToolbarGroup = withRef< + 'div', + { + noSeparator?: boolean; + } +>(({ className, children, noSeparator }, ref) => { const childArr = React.Children.map(children, (c) => c); if (!childArr || childArr.length === 0) return null; @@ -188,14 +144,3 @@ const ToolbarGroup = React.forwardRef<
); }); -ToolbarGroup.displayName = 'ToolbarGroup'; - -export { - Toolbar, - ToolbarLink, - ToolbarToggleGroup, - ToolbarSeparator, - ToolbarToggleItem, - ToolbarButton, - ToolbarGroup, -}; diff --git a/apps/www/src/registry/default/plate-ui/tooltip.tsx b/apps/www/src/registry/default/plate-ui/tooltip.tsx index 0757666e6b..e18f1d19a3 100644 --- a/apps/www/src/registry/default/plate-ui/tooltip.tsx +++ b/apps/www/src/registry/default/plate-ui/tooltip.tsx @@ -1,38 +1,16 @@ 'use client'; -import * as React from 'react'; import * as TooltipPrimitive from '@radix-ui/react-tooltip'; - -import { cn } from '@/lib/utils'; - -const TooltipProvider = TooltipPrimitive.Provider; - -const Tooltip = TooltipPrimitive.Root; - -const TooltipTrigger = TooltipPrimitive.Trigger; - -const TooltipPortal = TooltipPrimitive.Portal; - -const TooltipContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, sideOffset = 4, ...props }, ref) => ( - -)); -TooltipContent.displayName = TooltipPrimitive.Content.displayName; - -export { - Tooltip, - TooltipTrigger, - TooltipPortal, - TooltipContent, - TooltipProvider, -}; +import { withCn, withProps } from '@udecode/cn'; + +export const TooltipProvider = TooltipPrimitive.Provider; +export const Tooltip = TooltipPrimitive.Root; +export const TooltipTrigger = TooltipPrimitive.Trigger; +export const TooltipPortal = TooltipPrimitive.Portal; + +export const TooltipContent = withCn( + withProps(TooltipPrimitive.Content, { + sideOffset: 4, + }), + 'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md' +); diff --git a/config/aliases.js b/config/aliases.js index cebbc118bd..b66344b9b0 100644 --- a/config/aliases.js +++ b/config/aliases.js @@ -1,4 +1,5 @@ module.exports = { + '@udecode/cn': 'cn', '@udecode/slate': 'slate', '@udecode/slate-react': 'slate-react', '@udecode/slate-utils': 'slate-utils', @@ -47,6 +48,7 @@ module.exports = { '@udecode/plate-test-utils': 'test-utils', '@udecode/plate-trailing-block': 'trailing-block', '@udecode/plate-utils': 'plate-utils', + '@udecode/react-utils': 'react-utils', '@udecode/utils': 'utils', '@udecode/plate-excalidraw': 'excalidraw', }; diff --git a/config/eslint/bases/tailwind.cjs b/config/eslint/bases/tailwind.cjs index c6949c92df..899e0b20be 100644 --- a/config/eslint/bases/tailwind.cjs +++ b/config/eslint/bases/tailwind.cjs @@ -20,7 +20,7 @@ module.exports = { }, settings: { tailwindcss: { - callees: ['cn', 'cva'], + callees: ['cn', 'cva', 'withCn'], }, }, extends: [ diff --git a/packages/autoformat/src/onKeyDownAutoformat.ts b/packages/autoformat/src/onKeyDownAutoformat.ts index cef1b36e8e..49aad48d0d 100644 --- a/packages/autoformat/src/onKeyDownAutoformat.ts +++ b/packages/autoformat/src/onKeyDownAutoformat.ts @@ -1,4 +1,4 @@ -import { KeyboardEvent } from 'react'; +import React from 'react'; import { deleteBackward, getEditorString, @@ -21,7 +21,7 @@ export const onKeyDownAutoformat = options: { rules, enableUndoOnDelete }, }: WithPlatePlugin ): KeyboardHandlerReturnType => - (e: KeyboardEvent) => { + (e: React.KeyboardEvent) => { if (e.defaultPrevented) return false; // Abort quicky if hotKey was not pressed. diff --git a/packages/caption/README.md b/packages/caption/README.md index f1137167a0..fa84a3e28b 100644 --- a/packages/caption/README.md +++ b/packages/caption/README.md @@ -1,9 +1,5 @@ # Caption -## Documentation - -WIP - ## License [MIT](../../LICENSE) diff --git a/packages/caption/src/components/Caption.tsx b/packages/caption/src/components/Caption.tsx index b184da02a7..c4cafbf9d0 100644 --- a/packages/caption/src/components/Caption.tsx +++ b/packages/caption/src/components/Caption.tsx @@ -1,4 +1,4 @@ -import { ComponentPropsWithoutRef } from 'react'; +import React from 'react'; import { createPrimitiveComponent } from '@udecode/plate-common'; import { useReadOnly, useSelected } from 'slate-react'; @@ -8,7 +8,8 @@ export interface CaptionOptions { readOnly?: boolean; } -export interface CaptionProps extends ComponentPropsWithoutRef<'figcaption'> { +export interface CaptionProps + extends React.ComponentPropsWithoutRef<'figcaption'> { options?: CaptionOptions; } diff --git a/packages/caption/src/components/CaptionTextarea.tsx b/packages/caption/src/components/CaptionTextarea.tsx index 0904682181..571c114696 100644 --- a/packages/caption/src/components/CaptionTextarea.tsx +++ b/packages/caption/src/components/CaptionTextarea.tsx @@ -1,10 +1,4 @@ -import React, { - RefObject, - useCallback, - useEffect, - useRef, - useState, -} from 'react'; +import React from 'react'; import { createPrimitiveComponent, findNodePath, @@ -29,14 +23,14 @@ import { TextareaAutosize } from './TextareaAutosize'; * Focus textareaRef when focusCaptionPath is set to the image path. */ export const useCaptionTextareaFocus = ( - textareaRef: RefObject + textareaRef: React.RefObject ) => { const editor = useEditorRef(); const element = useElement(); const focusCaptionPath = captionGlobalStore.use.focusEndCaptionPath(); - useEffect(() => { + React.useEffect(() => { if (focusCaptionPath && textareaRef.current) { const path = findNodePath(editor, element); if (path && Path.equals(path, focusCaptionPath)) { @@ -54,13 +48,13 @@ export const useCaptionTextareaState = () => { caption: nodeCaption = [{ children: [{ text: '' }] }] as [TElement], } = element; - const [captionValue, setCaptionValue] = useState< + const [captionValue, setCaptionValue] = React.useState< TextareaAutosizeProps['value'] >(getNodeString(nodeCaption[0])); const readOnly = useReadOnly(); - const textareaRef = useRef(null); + const textareaRef = React.useRef(null); useCaptionTextareaFocus(textareaRef); @@ -82,7 +76,7 @@ export const useCaptionTextarea = ({ }: ReturnType) => { const editor = useEditorRef(); - const onChange: TextareaAutosizeProps['onChange'] = useCallback( + const onChange: TextareaAutosizeProps['onChange'] = React.useCallback( (e: React.ChangeEvent) => { const newValue = e.target.value; diff --git a/packages/caption/src/components/TextareaAutosize.tsx b/packages/caption/src/components/TextareaAutosize.tsx index 321d36a4af..ce46b64d6a 100644 --- a/packages/caption/src/components/TextareaAutosize.tsx +++ b/packages/caption/src/components/TextareaAutosize.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useState } from 'react'; +import React from 'react'; import { useIsomorphicLayoutEffect } from '@udecode/plate-common'; import ReactTextareaAutosize, { TextareaAutosizeProps, @@ -9,15 +9,16 @@ import ReactTextareaAutosize, { * @see https://github.com/Andarist/react-textarea-autosize * @see https://github.com/Andarist/react-textarea-autosize/issues/337 */ -const TextareaAutosize = forwardRef( - (props, ref) => { - const [isRerendered, setIsRerendered] = useState(false); +const TextareaAutosize = React.forwardRef< + HTMLTextAreaElement, + TextareaAutosizeProps +>((props, ref) => { + const [isRerendered, setIsRerendered] = React.useState(false); - useIsomorphicLayoutEffect(() => setIsRerendered(true), []); + useIsomorphicLayoutEffect(() => setIsRerendered(true), []); - return isRerendered ? : null; - } -); + return isRerendered ? : null; +}); TextareaAutosize.displayName = 'TextareaAutosize'; export { TextareaAutosize }; diff --git a/packages/caption/src/hooks/useCaptionString.ts b/packages/caption/src/hooks/useCaptionString.ts index 1b97cf38b6..06692f8bda 100644 --- a/packages/caption/src/hooks/useCaptionString.ts +++ b/packages/caption/src/hooks/useCaptionString.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import React from 'react'; import { getNodeString, useElement } from '@udecode/plate-common'; import { TCaptionElement } from '../TCaptionElement'; @@ -7,7 +7,7 @@ export const useCaptionString = () => { const { caption: nodeCaption = [{ children: [{ text: '' }] }] } = useElement(); - return useMemo(() => { + return React.useMemo(() => { return getNodeString(nodeCaption[0] as any) || ''; }, [nodeCaption]); }; diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts index bf639913fa..287e5560cd 100644 --- a/packages/cli/src/commands/init.ts +++ b/packages/cli/src/commands/init.ts @@ -14,7 +14,6 @@ import { DEFAULT_COMPONENTS, DEFAULT_TAILWIND_CONFIG, DEFAULT_TAILWIND_CSS, - DEFAULT_UTILS, getConfig, rawConfigSchema, resolveConfigPaths, @@ -35,7 +34,6 @@ import type { Config } from '../utils/get-config'; const PROJECT_DEPENDENCIES = [ 'tailwindcss-animate', 'class-variance-authority', - 'clsx', 'tailwind-merge', ]; @@ -147,12 +145,6 @@ export async function promptForConfig( message: `Configure the import alias for ${highlight('components')}:`, initial: defaultConfig?.aliases['components'] ?? DEFAULT_COMPONENTS, }, - { - type: 'text', - name: 'utils', - message: `Configure the import alias for ${highlight('utils')}:`, - initial: defaultConfig?.aliases['utils'] ?? DEFAULT_UTILS, - }, { type: 'toggle', name: 'rsc', @@ -176,7 +168,6 @@ export async function promptForConfig( rsc: options.rsc, tsx: true, aliases: { - utils: options.utils, components: options.components, }, }); @@ -210,21 +201,13 @@ export async function runInit(cwd: string, config: Config) { const spinner = ora(`Initializing project...`)?.start(); // Ensure all resolved paths directories exist. - for (const [key, resolvedPath] of Object.entries(config.resolvedPaths)) { + for (const [, resolvedPath] of Object.entries(config.resolvedPaths)) { // Determine if the path is a file or directory. // TODO: is there a better way to do this? - let dirname = path.extname(resolvedPath) + const dirname = path.extname(resolvedPath) ? path.dirname(resolvedPath) : resolvedPath; - // If the utils alias is set to something like "@/lib/utils", - // assume this is a file and remove the "utils" file name. - // TODO: In future releases we should add support for individual utils. - if (key === 'utils' && resolvedPath.endsWith('/utils')) { - // Remove /utils at the end. - dirname = dirname.replace(/\/utils$/, ''); - } - if (!existsSync(dirname)) { await fs.mkdir(dirname, { recursive: true }); } @@ -266,13 +249,6 @@ export async function runInit(cwd: string, config: Config) { ); } - // Write utils file. - await fs.writeFile( - `${config.resolvedPaths.utils}.ts`, - templates.UTILS, - 'utf8' - ); - spinner?.succeed(); // Install dependencies. diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts index c5b0bde852..71adccdad5 100644 --- a/packages/cli/src/utils/get-config.ts +++ b/packages/cli/src/utils/get-config.ts @@ -16,7 +16,6 @@ import { resolveImport } from './resolve-import'; export const DEFAULT_STYLE = 'default'; export const DEFAULT_COMPONENTS = '@/components'; -export const DEFAULT_UTILS = '@/lib/utils'; export const DEFAULT_TAILWIND_CSS = 'src/styles/globals.css'; export const DEFAULT_TAILWIND_CONFIG = 'tailwind.config.js'; export const DEFAULT_TAILWIND_BASE_COLOR = 'slate'; @@ -40,7 +39,6 @@ export const rawConfigSchema = z.object({ }), aliases: z.object({ components: z.string(), - utils: z.string(), }), }); @@ -50,7 +48,6 @@ export const configSchema = rawConfigSchema.extend({ resolvedPaths: z.object({ tailwindConfig: z.string(), tailwindCss: z.string(), - utils: z.string(), components: z.string(), }), }); @@ -82,7 +79,6 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) { resolvedPaths: { tailwindConfig: path.resolve(cwd, config.tailwind.config), tailwindCss: path.resolve(cwd, config.tailwind.css), - utils: await resolveImport(config.aliases['utils'], tsConfig), components: await resolveImport(config.aliases['components'], tsConfig), }, }); diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts index f3a115ef19..eaa9bf3c94 100644 --- a/packages/cli/src/utils/templates.ts +++ b/packages/cli/src/utils/templates.ts @@ -1,8 +1,10 @@ -export const UTILS = `import { type ClassValue, clsx } from 'clsx' -import { twMerge } from 'tailwind-merge' +export const UTILS = `import { cx } from 'class-variance-authority'; +import { twMerge } from 'tailwind-merge'; -export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) +import type { CxOptions } from 'class-variance-authority'; + +export function cn(...inputs: CxOptions) { + return twMerge(cx(inputs)) } `; diff --git a/packages/cli/src/utils/transformers/transform-import.ts b/packages/cli/src/utils/transformers/transform-import.ts index 2175ecf3ca..f975899c1c 100644 --- a/packages/cli/src/utils/transformers/transform-import.ts +++ b/packages/cli/src/utils/transformers/transform-import.ts @@ -15,17 +15,6 @@ export const transformImport: Transformer = async ({ sourceFile, config }) => { ) ); } - - // Replace `import { cn } from "@/lib/utils"` - if (moduleSpecifier == '@/lib/utils') { - const namedImports = importDeclaration.getNamedImports(); - const cnImport = namedImports.find((i) => i.getName() === 'cn'); - if (cnImport) { - importDeclaration.setModuleSpecifier( - moduleSpecifier.replace(/^@\/lib\/utils/, config.aliases.utils) - ); - } - } } return sourceFile; diff --git a/packages/cli/test/commands/init.test.ts b/packages/cli/test/commands/init.test.ts index e907a0186d..bcb6410ad9 100644 --- a/packages/cli/test/commands/init.test.ts +++ b/packages/cli/test/commands/init.test.ts @@ -46,11 +46,6 @@ test('init config-full', async () => { ); expect(mockMkdir).toHaveBeenNthCalledWith( 2, - expect.stringMatching(/src\/lib$/), - expect.anything() - ); - expect(mockMkdir).toHaveBeenNthCalledWith( - 3, expect.stringMatching(/src\/components$/), expect.anything() ); @@ -66,19 +61,12 @@ test('init config-full', async () => { expect.stringContaining(`@tailwind base`), 'utf8' ); - expect(mockWriteFile).toHaveBeenNthCalledWith( - 3, - expect.stringMatching(/src\/lib\/utils.ts$/), - expect.stringContaining(`import { type ClassValue, clsx } from 'clsx'`), - 'utf8' - ); expect(execa).toHaveBeenCalledWith( 'pnpm', [ 'add', 'tailwindcss-animate', 'class-variance-authority', - 'clsx', 'tailwind-merge', '@radix-ui/react-icons', ], @@ -116,11 +104,6 @@ test('init config-partial', async () => { ); expect(mockMkdir).toHaveBeenNthCalledWith( 2, - expect.stringMatching(/lib$/), - expect.anything() - ); - expect(mockMkdir).toHaveBeenNthCalledWith( - 3, expect.stringMatching(/components$/), expect.anything() ); @@ -136,19 +119,12 @@ test('init config-partial', async () => { expect.stringContaining(`@tailwind base`), 'utf8' ); - expect(mockWriteFile).toHaveBeenNthCalledWith( - 3, - expect.stringMatching(/utils.ts$/), - expect.stringContaining(`import { type ClassValue, clsx } from 'clsx'`), - 'utf8' - ); expect(execa).toHaveBeenCalledWith( 'npm', [ 'install', 'tailwindcss-animate', 'class-variance-authority', - 'clsx', 'tailwind-merge', 'lucide-react', ], diff --git a/packages/cli/test/fixtures/config-full/components.json b/packages/cli/test/fixtures/config-full/components.json index 675abb22e9..35a6fc35a9 100644 --- a/packages/cli/test/fixtures/config-full/components.json +++ b/packages/cli/test/fixtures/config-full/components.json @@ -9,7 +9,6 @@ }, "rsc": false, "aliases": { - "utils": "~/lib/utils", "components": "~/components" } } diff --git a/packages/cli/test/fixtures/config-partial/components.json b/packages/cli/test/fixtures/config-partial/components.json index b060258022..775891816e 100644 --- a/packages/cli/test/fixtures/config-partial/components.json +++ b/packages/cli/test/fixtures/config-partial/components.json @@ -7,7 +7,6 @@ "cssVariables": false }, "aliases": { - "utils": "@/lib/utils", "components": "@/components" } } diff --git a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap index 981b504a8c..9286dd9a8e 100644 --- a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap +++ b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap @@ -1,13 +1,5 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`transform css vars 4`] = ` -"import * as React from \\'react\\' -export function Foo() { - return
foo
-}'' - " -`; - exports[`transform css vars false 1`] = ` "import * as React from 'react' export function Foo() { diff --git a/packages/cli/test/utils/__snapshots__/transform-import.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-import.test.ts.snap index ff6a660bc4..af87937cd1 100644 --- a/packages/cli/test/utils/__snapshots__/transform-import.test.ts.snap +++ b/packages/cli/test/utils/__snapshots__/transform-import.test.ts.snap @@ -7,7 +7,7 @@ import { Foo } from \\"bar\\" import { Label} from \\"ui/label\\" import { Box } from \\"@/components/box\\" - import { cn } from \\"@/lib/utils\\" + import { cn } from \\"@udecode/cn\\" " `; @@ -18,8 +18,7 @@ import { Foo } from \\"bar\\" import { Label} from \\"ui/label\\" import { Box } from \\"~/src/components/box\\" - import { cn, foo, bar } from \\"~/lib\\" - import { bar } from \\"@/lib/utils/bar\\" + import { cn, foo, bar } from \\"@udecode/cn\\" " `; @@ -30,7 +29,6 @@ import { Foo } from \\"bar\\" import { Label} from \\"ui/label\\" import { Box } from \\"~/src/components/box\\" - import { cn } from \\"~/src/utils\\" - import { bar } from \\"@/lib/utils/bar\\" + import { cn } from \\"@udecode/cn\\" " `; diff --git a/packages/cli/test/utils/get-config.test.ts b/packages/cli/test/utils/get-config.test.ts index 1d575e6303..cbb01e9f53 100644 --- a/packages/cli/test/utils/get-config.test.ts +++ b/packages/cli/test/utils/get-config.test.ts @@ -21,7 +21,6 @@ test('get raw config', async () => { rsc: false, aliases: { components: '@/components', - utils: '@/lib/utils', }, }); @@ -52,7 +51,6 @@ test('get config', async () => { rsc: false, aliases: { components: '@/components', - utils: '@/lib/utils', }, resolvedPaths: { tailwindConfig: path.resolve( @@ -70,11 +68,6 @@ test('get config', async () => { '../fixtures/config-partial', './components' ), - utils: path.resolve( - __dirname, - '../fixtures/config-partial', - './lib/utils' - ), }, }); @@ -92,7 +85,6 @@ test('get config', async () => { }, aliases: { components: '~/components', - utils: '~/lib/utils', }, resolvedPaths: { tailwindConfig: path.resolve( @@ -110,11 +102,6 @@ test('get config', async () => { '../fixtures/config-full', './src/components' ), - utils: path.resolve( - __dirname, - '../fixtures/config-full', - './src/lib/utils' - ), }, }); }); diff --git a/packages/cli/test/utils/resolve-import.test.ts b/packages/cli/test/utils/resolve-import.test.ts index 73117acea1..ce77404c1f 100644 --- a/packages/cli/test/utils/resolve-import.test.ts +++ b/packages/cli/test/utils/resolve-import.test.ts @@ -39,17 +39,6 @@ test('resolve import', async () => { }, }) ).toEqual('/Users/shadcn/Projects/foobar/src/app/components/foo/bar'); - - expect( - await resolveImport('lib/utils', { - absoluteBaseUrl: '/Users/shadcn/Projects/foobar', - paths: { - 'components/*': ['./src/app/components/*'], - 'ui/*': ['./src/ui/primities/*'], - lib: ['./lib'], - }, - }) - ).toEqual('/Users/shadcn/Projects/foobar/lib/utils'); }); test('resolve import with base url', async () => { @@ -59,9 +48,6 @@ test('resolve import with base url', async () => { expect(await resolveImport('@/components/ui', config)).toEqual( path.resolve(cwd, 'components/ui') ); - expect(await resolveImport('@/lib/utils', config)).toEqual( - path.resolve(cwd, 'lib/utils') - ); expect(await resolveImport('foo/bar', config)).toEqual( path.resolve(cwd, 'foo/bar') ); @@ -74,9 +60,6 @@ test('resolve import without base url', async () => { expect(await resolveImport('~/components/ui', config)).toEqual( path.resolve(cwd, 'components/ui') ); - expect(await resolveImport('~/lib/utils', config)).toEqual( - path.resolve(cwd, 'lib/utils') - ); expect(await resolveImport('foo/bar', config)).toEqual( path.resolve(cwd, 'foo/bar') ); diff --git a/packages/cli/test/utils/transform-css-vars.test.ts b/packages/cli/test/utils/transform-css-vars.test.ts index 04c800efec..a31cc5de10 100644 --- a/packages/cli/test/utils/transform-css-vars.test.ts +++ b/packages/cli/test/utils/transform-css-vars.test.ts @@ -19,7 +19,6 @@ export function Foo() { }, aliases: { components: '@/components', - utils: '@/lib/utils', }, }, baseColor: stone, @@ -43,7 +42,6 @@ export function Foo() { }, aliases: { components: '@/components', - utils: '@/lib/utils', }, }, baseColor: stone, @@ -68,7 +66,6 @@ export function Foo() { }, aliases: { components: '@/components', - utils: '@/lib/utils', }, }, baseColor: stone, @@ -90,7 +87,6 @@ export function Foo() { }, aliases: { components: '@/components', - utils: '@/lib/utils', }, }, baseColor: stone, diff --git a/packages/cli/test/utils/transform-import.test.ts b/packages/cli/test/utils/transform-import.test.ts index 17d353ac6a..1f1b8ba4ce 100644 --- a/packages/cli/test/utils/transform-import.test.ts +++ b/packages/cli/test/utils/transform-import.test.ts @@ -12,7 +12,7 @@ import { Foo } from "bar" import { Label} from "ui/label" import { Box } from "@/registry/new-york/box" - import { cn } from "@/lib/utils" + import { cn } from "@udecode/cn" `, config: { tailwind: { @@ -21,7 +21,6 @@ import { Foo } from "bar" }, aliases: { components: '@/components', - utils: '@/lib/utils', }, }, }) @@ -36,13 +35,11 @@ import { Foo } from "bar" import { Label} from "ui/label" import { Box } from "@/registry/new-york/box" - import { cn, foo, bar } from "@/lib/utils" - import { bar } from "@/lib/utils/bar" + import { cn, foo, bar } from "@udecode/cn" `, config: { aliases: { components: '~/src/components', - utils: '~/lib', }, }, }) @@ -57,13 +54,11 @@ import { Foo } from "bar" import { Label} from "ui/label" import { Box } from "@/registry/new-york/box" - import { cn } from "@/lib/utils" - import { bar } from "@/lib/utils/bar" + import { cn } from "@udecode/cn" `, config: { aliases: { components: '~/src/components', - utils: '~/src/utils', }, }, }) diff --git a/packages/cli/test/utils/transform-tw-prefix.test.ts b/packages/cli/test/utils/transform-tw-prefix.test.ts index fba7984335..8c994ed2e0 100644 --- a/packages/cli/test/utils/transform-tw-prefix.test.ts +++ b/packages/cli/test/utils/transform-tw-prefix.test.ts @@ -20,7 +20,6 @@ test('transform tailwind prefix', async () => { }, aliases: { components: '@/components', - utils: '@/lib/utils', }, }, baseColor: 'stone', @@ -43,7 +42,6 @@ export function Foo() { }, aliases: { components: '@/components', - utils: '@/lib/utils', }, }, baseColor: stone, @@ -66,7 +64,6 @@ export function Foo() { }, aliases: { components: '@/components', - utils: '@/lib/utils', }, }, baseColor: stone, diff --git a/packages/cloud/src/attachment/useCloudAttachmentElementState.ts b/packages/cloud/src/attachment/useCloudAttachmentElementState.ts index 55b7467b35..e56d5f570f 100644 --- a/packages/cloud/src/attachment/useCloudAttachmentElementState.ts +++ b/packages/cloud/src/attachment/useCloudAttachmentElementState.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import React from 'react'; import { findNodePath, isDefined, @@ -20,7 +20,7 @@ export const useCloudAttachmentElementState = ({ const url = upload.status === 'not-found' ? undefined : upload.url; - useEffect(() => { + React.useEffect(() => { /** * We only want to update the actual URL of the element if the URL is not * a blob URL and if it's different from the current URL. diff --git a/packages/cloud/src/image/useCloudImageElementState.ts b/packages/cloud/src/image/useCloudImageElementState.ts index d4c87075db..45a63aa14c 100644 --- a/packages/cloud/src/image/useCloudImageElementState.ts +++ b/packages/cloud/src/image/useCloudImageElementState.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import React from 'react'; import { findNodePath, setNodes, useEditorRef } from '@udecode/plate-common'; import { useFocused, useSelected } from 'slate-react'; @@ -14,7 +14,7 @@ export const useCloudImageElementState = ({ const url = upload.status === 'not-found' ? undefined : upload.url; - useEffect(() => { + React.useEffect(() => { /** * We only want to update the actual URL of the element if the URL is not * a blob URL and if it's different from the current URL. @@ -42,12 +42,12 @@ export const useCloudImageElementState = ({ } }, [editor, element, url]); - const [size, setSize] = useState<{ width: number; height: number }>({ + const [size, setSize] = React.useState<{ width: number; height: number }>({ width: element.width, height: element.height, }); - useEffect(() => { + React.useEffect(() => { setSize({ width: element.width, height: element.height }); }, [element.width, element.height]); diff --git a/packages/cn/.npmignore b/packages/cn/.npmignore new file mode 100644 index 0000000000..7d3b305b17 --- /dev/null +++ b/packages/cn/.npmignore @@ -0,0 +1,3 @@ +__tests__ +__test-utils__ +__mocks__ diff --git a/packages/cn/README.md b/packages/cn/README.md new file mode 100644 index 0000000000..eb12b2a5b7 --- /dev/null +++ b/packages/cn/README.md @@ -0,0 +1,11 @@ +# `cn` utils + +React & Tailwind utils used by Plate UI. + +## Documentation + +Visit https://platejs.org/docs/api/cn to view the documentation. + +## License + +[MIT](../../LICENSE) diff --git a/packages/cn/package.json b/packages/cn/package.json new file mode 100644 index 0000000000..52ffa5324f --- /dev/null +++ b/packages/cn/package.json @@ -0,0 +1,55 @@ +{ + "name": "@udecode/cn", + "version": "24.3.0", + "description": "cn utils", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/udecode/plate.git", + "directory": "packages/cn" + }, + "bugs": { + "url": "https://github.com/udecode/plate/issues" + }, + "sideEffects": false, + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", + "files": [ + "dist/**/*" + ], + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.mjs", + "module": "./dist/index.mjs", + "require": "./dist/index.js" + } + }, + "scripts": { + "build": "yarn p:build", + "build:watch": "yarn p:build:watch", + "brl": "yarn p:brl:below", + "clean": "yarn p:clean", + "lint": "yarn p:lint", + "lint:fix": "yarn p:lint:fix", + "test": "yarn p:test", + "test:watch": "yarn p:test:watch", + "typecheck": "yarn p:typecheck" + }, + "dependencies": { + "@udecode/react-utils": "24.3.0" + }, + "peerDependencies": { + "class-variance-authority": ">=0.7.0", + "react": ">=16.8.0", + "react-dom": ">=16.8.0", + "tailwind-merge": ">=2.2.0" + }, + "keywords": [ + "utils" + ], + "publishConfig": { + "access": "public" + } +} diff --git a/packages/cn/src/cn.ts b/packages/cn/src/cn.ts new file mode 100644 index 0000000000..55e62713fa --- /dev/null +++ b/packages/cn/src/cn.ts @@ -0,0 +1,11 @@ +import { cx } from 'class-variance-authority'; +import { twMerge } from 'tailwind-merge'; + +import type { CxOptions } from 'class-variance-authority'; + +/** + * Tailwind CSS classnames merge. + */ +export function cn(...inputs: CxOptions) { + return twMerge(cx(inputs)); +} diff --git a/packages/cn/src/index.tsx b/packages/cn/src/index.tsx new file mode 100644 index 0000000000..c205dae6f3 --- /dev/null +++ b/packages/cn/src/index.tsx @@ -0,0 +1,9 @@ +/** + * @file Automatically generated by barrelsby. + */ + +export * from './cn'; +export * from './withCn'; +export * from './withProps'; +export * from './withVariants'; +export * from '@udecode/react-utils'; diff --git a/packages/cn/src/withCn.tsx b/packages/cn/src/withCn.tsx new file mode 100644 index 0000000000..3387da2914 --- /dev/null +++ b/packages/cn/src/withCn.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { CxOptions } from 'class-variance-authority'; + +import { cn } from './cn'; +import { withProps } from './withProps'; + +/** + * Set default `className` with `cn`. + * - IntelliSense: add `withCn` to `classAttributes` + * - ESLint: add `withCn` to `settings.tailwindcss.callees` + */ +export function withCn>( + Component: T, + ...inputs: CxOptions +) { + return withProps(Component, { className: cn(inputs) } as any); +} diff --git a/packages/cn/src/withProps.tsx b/packages/cn/src/withProps.tsx new file mode 100644 index 0000000000..4e808e3241 --- /dev/null +++ b/packages/cn/src/withProps.tsx @@ -0,0 +1,30 @@ +import React from 'react'; + +import { cn } from './cn'; + +/** + * Set default props with `React.forwardRef`. + * - Use `withCn` if only setting `className` + */ +export function withProps< + T extends keyof HTMLElementTagNameMap | React.ComponentType, +>(Component: T, defaultProps: Partial>) { + const ComponentWithClassName = Component as React.FC<{ className: string }>; + + return React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef + >(function ExtendComponent(props, ref) { + return ( + + ); + }); +} diff --git a/packages/cn/src/withVariants.tsx b/packages/cn/src/withVariants.tsx new file mode 100644 index 0000000000..0db3bdb780 --- /dev/null +++ b/packages/cn/src/withVariants.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { cva, VariantProps } from 'class-variance-authority'; + +import { cn } from './cn'; + +/** + * Set default `className` with `cn` and `variants`. + * @param Component - The component to which props will be added. + * @param variants - Variants from `cva`. `Component` props will be extended with `variants` props. + * @param onlyVariantsProps - Props to exclude from `Component`. Set the props that are only used for variants. + */ +export function withVariants< + T extends keyof HTMLElementTagNameMap | React.ComponentType, + V extends ReturnType, +>(Component: T, variants: V, onlyVariantsProps?: (keyof VariantProps)[]) { + const ComponentWithClassName = Component as React.FC<{ className: string }>; + + return React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & VariantProps + >(function ExtendComponent(allProps, ref) { + const { className, ...props } = allProps as any; + const rest = { ...props }; + + if (onlyVariantsProps) { + onlyVariantsProps.forEach((key) => { + if (props[key as string] !== undefined) { + delete rest[key as string]; + } + }); + } + + return ( + + ); + }); +} diff --git a/packages/cn/tsconfig.json b/packages/cn/tsconfig.json new file mode 100644 index 0000000000..425481e027 --- /dev/null +++ b/packages/cn/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../config/tsconfig.build.json", + "compilerOptions": { + "declarationDir": "./dist", + "outDir": "./dist" + }, + "include": ["src"] +} diff --git a/packages/code-block/src/hooks/useCodeBlockCombobox.ts b/packages/code-block/src/hooks/useCodeBlockCombobox.ts index 1660e5c374..659cd47851 100644 --- a/packages/code-block/src/hooks/useCodeBlockCombobox.ts +++ b/packages/code-block/src/hooks/useCodeBlockCombobox.ts @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { findNodePath, getPluginOptions, @@ -25,7 +25,7 @@ export const useCodeBlockComboboxState = () => { ELEMENT_CODE_BLOCK ); - useEffect(() => { + React.useEffect(() => { setValue(element.lang ?? 'text'); }, [element.lang]); diff --git a/packages/code-block/src/hooks/useCodeBlockElement.ts b/packages/code-block/src/hooks/useCodeBlockElement.ts index 14eda00f26..08631b5c2e 100644 --- a/packages/code-block/src/hooks/useCodeBlockElement.ts +++ b/packages/code-block/src/hooks/useCodeBlockElement.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import React from 'react'; import { getPluginOptions, useEditorRef } from '@udecode/plate-common'; import { @@ -13,12 +13,12 @@ export const useCodeBlockElementState = ({ element: TCodeBlockElement; }) => { const editor = useEditorRef(); - const [domLoaded, setDomLoaded] = useState(false); + const [domLoaded, setDomLoaded] = React.useState(false); const { lang } = element; const codeClassName = lang ? `${lang} language-${lang}` : ''; - useEffect(() => { + React.useEffect(() => { setDomLoaded(true); }, []); diff --git a/packages/combobox/src/hooks/useComboboxContent.ts b/packages/combobox/src/hooks/useComboboxContent.ts index ecb9d2d965..80a21b42d7 100644 --- a/packages/combobox/src/hooks/useComboboxContent.ts +++ b/packages/combobox/src/hooks/useComboboxContent.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import React from 'react'; import { comboboxActions, @@ -39,12 +39,12 @@ export const useComboboxContentState = ({ activeComboboxStore.use.maxSuggestions?.() ?? storeItems.length; // Update items - useEffect(() => { + React.useEffect(() => { items && comboboxActions.items(items); }, [items]); // Filter items - useEffect(() => { + React.useEffect(() => { comboboxActions.filteredItems( storeItems .filter( diff --git a/packages/combobox/src/hooks/useComboboxControls.ts b/packages/combobox/src/hooks/useComboboxControls.ts index 610fdd16d6..e1312176ce 100644 --- a/packages/combobox/src/hooks/useComboboxControls.ts +++ b/packages/combobox/src/hooks/useComboboxControls.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import React from 'react'; import { useCombobox } from 'downshift'; import { useComboboxSelectors } from '../combobox.store'; @@ -26,7 +26,7 @@ export const useComboboxControls = () => { getComboboxProps({}, { suppressRefError: true }); getInputProps({}, { suppressRefError: true }); - return useMemo( + return React.useMemo( () => ({ closeMenu, getMenuProps, diff --git a/packages/comments/src/components/CommentEditSaveButton.tsx b/packages/comments/src/components/CommentEditSaveButton.tsx index 558bea509e..b9e4d1852e 100644 --- a/packages/comments/src/components/CommentEditSaveButton.tsx +++ b/packages/comments/src/components/CommentEditSaveButton.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import React from 'react'; import { createPrimitiveComponent } from '@udecode/plate-common'; import { @@ -39,7 +39,7 @@ export const useCommentEditSaveButton = ({ }: ReturnType) => { return { props: { - onClick: useCallback(() => { + onClick: React.useCallback(() => { if (!editingValue) return; updateComment({ diff --git a/packages/comments/src/components/CommentEditTextarea.tsx b/packages/comments/src/components/CommentEditTextarea.tsx index cce48c533f..bbb3c750bb 100644 --- a/packages/comments/src/components/CommentEditTextarea.tsx +++ b/packages/comments/src/components/CommentEditTextarea.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react'; +import React from 'react'; import { createPrimitiveComponent } from '@udecode/plate-common'; import { @@ -10,9 +10,9 @@ export const useCommentEditTextareaState = () => { const setEditingValue = useCommentActions().editingValue(); const value = useEditingCommentText(); - const textareaRef = useRef(null); + const textareaRef = React.useRef(null); - useEffect(() => { + React.useEffect(() => { setTimeout(() => { const textarea = textareaRef.current; if (textarea) { diff --git a/packages/comments/src/components/CommentNewTextarea.tsx b/packages/comments/src/components/CommentNewTextarea.tsx index 62457db31d..a0ac6041a8 100644 --- a/packages/comments/src/components/CommentNewTextarea.tsx +++ b/packages/comments/src/components/CommentNewTextarea.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef } from 'react'; +import React from 'react'; import { createPrimitiveComponent } from '@udecode/plate-common'; import { @@ -17,9 +17,9 @@ export const useCommentNewTextareaState = () => { const focusTextarea = useCommentsSelectors().focusTextarea(); const setFocusTextarea = useCommentsActions().focusTextarea(); - const textareaRef = useRef(null); + const textareaRef = React.useRef(null); - useEffect(() => { + React.useEffect(() => { if (focusTextarea) { textareaRef.current?.focus(); setFocusTextarea(false); diff --git a/packages/comments/src/components/CommentsPositioner.tsx b/packages/comments/src/components/CommentsPositioner.tsx index fe9b47c218..d1bc58270b 100644 --- a/packages/comments/src/components/CommentsPositioner.tsx +++ b/packages/comments/src/components/CommentsPositioner.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import React from 'react'; import { createPrimitiveComponent, toDOMNode, @@ -13,10 +13,12 @@ export const useCommentsPositionerState = () => { const editor = useEditorRef(); let activeCommentId = useCommentsSelectors().activeCommentId(); - const [position, setPosition] = useState<{ top: number; left: number }>({ - left: 0, - top: 0, - }); + const [position, setPosition] = React.useState<{ top: number; left: number }>( + { + left: 0, + top: 0, + } + ); if (position.left === 0 && position.top === 0) { activeCommentId = null; @@ -24,7 +26,7 @@ export const useCommentsPositionerState = () => { const [node] = useActiveCommentNode() ?? []; - useEffect(() => { + React.useEffect(() => { if (!node) return; const domNode = toDOMNode(editor, node); diff --git a/packages/comments/src/components/useCommentAddButton.ts b/packages/comments/src/components/useCommentAddButton.ts index 683d9a1eaf..5f21cb3c17 100644 --- a/packages/comments/src/components/useCommentAddButton.ts +++ b/packages/comments/src/components/useCommentAddButton.ts @@ -1,4 +1,4 @@ -import { MouseEventHandler, useCallback } from 'react'; +import React from 'react'; import { useAddCommentMark, @@ -11,7 +11,7 @@ export const useCommentAddButton = () => { const setFocusTextarea = useCommentsActions().focusTextarea(); const myUserId = useCommentsSelectors().myUserId(); - const onClick = useCallback>( + const onClick = React.useCallback>( (e) => { e.preventDefault(); e.stopPropagation(); diff --git a/packages/comments/src/components/useCommentLeaf.ts b/packages/comments/src/components/useCommentLeaf.ts index 5350da914d..621e86becd 100644 --- a/packages/comments/src/components/useCommentLeaf.ts +++ b/packages/comments/src/components/useCommentLeaf.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from 'react'; +import React from 'react'; import { useEditorRef } from '@udecode/plate-common'; import { @@ -12,14 +12,14 @@ import { export const useCommentLeafState = ({ leaf }: { leaf: TCommentText }) => { const editor = useEditorRef(); - const [commentIds, setCommentIds] = useState([]); + const [commentIds, setCommentIds] = React.useState([]); const activeCommentId = useCommentsSelectors().activeCommentId(); const setActiveCommentId = useCommentsActions().activeCommentId(); const comments = useCommentsSelectors().comments(); - const [commentCount, setCommentCount] = useState(1); - const [isActive, setIsActive] = useState(false); + const [commentCount, setCommentCount] = React.useState(1); + const [isActive, setIsActive] = React.useState(false); - useEffect(() => { + React.useEffect(() => { const ids: string[] = []; let count = 0; @@ -72,7 +72,7 @@ export const useCommentLeaf = ({ }: ReturnType) => { return { props: { - onClick: useCallback( + onClick: React.useCallback( (e: MouseEvent) => { e.stopPropagation(); setActiveCommentId(lastCommentId); diff --git a/packages/comments/src/components/useFloatingCommentsContentState.ts b/packages/comments/src/components/useFloatingCommentsContentState.ts index e2255c15bb..81866aa0c3 100644 --- a/packages/comments/src/components/useFloatingCommentsContentState.ts +++ b/packages/comments/src/components/useFloatingCommentsContentState.ts @@ -1,4 +1,4 @@ -import { useRef } from 'react'; +import React from 'react'; import { useCommentById, useCommentsSelectors } from '../stores/index'; @@ -7,7 +7,7 @@ export const useFloatingCommentsContentState = () => { const activeComment = useCommentById(activeCommentId); const myUserId = useCommentsSelectors().myUserId(); - const ref = useRef(null); + const ref = React.useRef(null); return { ref, diff --git a/packages/comments/src/components/useFloatingCommentsState.ts b/packages/comments/src/components/useFloatingCommentsState.ts index 50bbc94604..f86f276b08 100644 --- a/packages/comments/src/components/useFloatingCommentsState.ts +++ b/packages/comments/src/components/useFloatingCommentsState.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import React from 'react'; import { someNode, useEditorRef, @@ -19,11 +19,11 @@ export const useFloatingCommentsState = () => { const editor = useEditorRef(); const version = useEditorVersion(); - const [loaded, setLoaded] = useState(false); + const [loaded, setLoaded] = React.useState(false); - const [active, setActive] = useState(false); + const [active, setActive] = React.useState(false); - useEffect(() => { + React.useEffect(() => { // there is a delay between activeCommentId and someNode, so we sync in `active` if ( activeCommentId && @@ -40,12 +40,12 @@ export const useFloatingCommentsState = () => { } }, [active, activeCommentId, editor, version, setActiveCommentId]); - useEffect(() => { + React.useEffect(() => { setLoaded(true); }, []); // reset comment editing value when active comment id changes - useEffect(() => { + React.useEffect(() => { if (activeCommentId) { resetNewCommentValue(); } diff --git a/packages/common/README.md b/packages/common/README.md index d94d4aeaaa..beca510607 100644 --- a/packages/common/README.md +++ b/packages/common/README.md @@ -1,9 +1,5 @@ # Plate utils -## Documentation - -WIP - ## License [MIT](../../LICENSE) diff --git a/packages/common/package.json b/packages/common/package.json index d7726ec2d9..3d68569b17 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -41,6 +41,7 @@ "dependencies": { "@udecode/plate-core": "28.0.0", "@udecode/plate-utils": "28.0.0", + "@udecode/react-utils": "24.3.0", "@udecode/slate": "25.0.0", "@udecode/slate-react": "25.0.0", "@udecode/slate-utils": "25.0.0", diff --git a/packages/common/src/index.tsx b/packages/common/src/index.tsx index 1a8b72bb46..228b7e9943 100644 --- a/packages/common/src/index.tsx +++ b/packages/common/src/index.tsx @@ -3,4 +3,5 @@ export * from '@udecode/plate-utils'; export * from '@udecode/slate'; export * from '@udecode/slate-react'; export * from '@udecode/slate-utils'; +export * from '@udecode/react-utils'; export * from '@udecode/utils'; diff --git a/packages/core/src/components/EditorMethodsEffect.ts b/packages/core/src/components/EditorMethodsEffect.ts index 82ef1fef3a..5cff55ca87 100644 --- a/packages/core/src/components/EditorMethodsEffect.ts +++ b/packages/core/src/components/EditorMethodsEffect.ts @@ -1,4 +1,4 @@ -import { useEffect, useMemo } from 'react'; +import React from 'react'; import { PlateId, useEditorRef, usePlateStore, useRedecorate } from '../stores'; import { EXPOSED_STORE_KEYS } from '../types/PlateStore'; @@ -15,9 +15,9 @@ export const EditorMethodsEffect = ({ id }: { id?: PlateId }) => { ) as any; // eslint-disable-next-line react-hooks/exhaustive-deps - const memorizedStoreSetters = useMemo(() => storeSetters, []); + const memorizedStoreSetters = React.useMemo(() => storeSetters, []); - useEffect(() => { + React.useEffect(() => { editor.redecorate = redecorate; editor.plate = { set: memorizedStoreSetters, diff --git a/packages/core/src/components/EditorRefEffect.tsx b/packages/core/src/components/EditorRefEffect.tsx index 5164af9996..6e8f9b7a9a 100644 --- a/packages/core/src/components/EditorRefEffect.tsx +++ b/packages/core/src/components/EditorRefEffect.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { PlateId, @@ -28,7 +28,7 @@ export function EditorRefEffect({ id }: { id?: PlateId }) { const editorState = useEditorRef(id); const editorRef = usePlateSelectors(id).editorRef(); - useEffect(() => { + React.useEffect(() => { setIsMounted(true); return () => { @@ -42,7 +42,7 @@ export function EditorRefEffect({ id }: { id?: PlateId }) { * consumers will need to manually trigger a re-render inside `onChange` if * they want to use `editorRef` with `useState`. */ - useEffect(() => { + React.useEffect(() => { if (typeof editorRef === 'function') { editorRef(editorState); return () => editorRef(null); diff --git a/packages/core/src/components/EditorStateEffect.tsx b/packages/core/src/components/EditorStateEffect.tsx index 52a82d4dd6..7e130155e7 100644 --- a/packages/core/src/components/EditorStateEffect.tsx +++ b/packages/core/src/components/EditorStateEffect.tsx @@ -1,27 +1,27 @@ /* eslint-disable react/display-name */ -import { memo, useEffect, useRef } from 'react'; +import React from 'react'; import { Range, Selection } from 'slate'; import { useSlate } from 'slate-react'; import { PlateId, useIncrementVersion } from '../stores'; -export const EditorStateEffect = memo(({ id }: { id?: PlateId }) => { +export const EditorStateEffect = React.memo(({ id }: { id?: PlateId }) => { const editorState = useSlate(); const updateVersionEditor = useIncrementVersion('versionEditor', id); - useEffect(() => { + React.useEffect(() => { updateVersionEditor(); }); const updateVersionSelection = useIncrementVersion('versionSelection', id); - const prevSelectionRef = useRef(editorState.selection); + const prevSelectionRef = React.useRef(editorState.selection); const sameSelection = isSelectionEqual( prevSelectionRef.current, editorState.selection ); - useEffect(() => { + React.useEffect(() => { if (!sameSelection) { updateVersionSelection(); } diff --git a/packages/core/src/components/Plate.tsx b/packages/core/src/components/Plate.tsx index f963a537ac..68c2a08848 100644 --- a/packages/core/src/components/Plate.tsx +++ b/packages/core/src/components/Plate.tsx @@ -1,4 +1,4 @@ -import React, { ForwardedRef, ReactNode, useMemo } from 'react'; +import React from 'react'; import { normalizeEditor, Value } from '@udecode/slate'; import { PLATE_SCOPE, PlateStoreProvider } from '../stores'; @@ -17,7 +17,7 @@ export interface PlateProps< > extends Partial< Pick, 'id' | 'editor' | 'value' | 'readOnly'> > { - children: ReactNode; + children: React.ReactNode; decorate?: TEditableProps['decorate']; /** @@ -43,7 +43,7 @@ export interface PlateProps< /** * Access the editor object using a React ref. */ - editorRef?: ForwardedRef; + editorRef?: React.ForwardedRef; /** * Initial value of the editor. @@ -93,7 +93,7 @@ function PlateInner< readOnly, maxLength, }: PlateProps) { - const editor: E = useMemo( + const editor: E = React.useMemo( () => editorProp ?? createPlateEditor({ @@ -106,7 +106,7 @@ function PlateInner< [] ); - const value = useMemo( + const value = React.useMemo( () => { let currValue = initialValue ?? valueProp; diff --git a/packages/core/src/components/PlateEffects.tsx b/packages/core/src/components/PlateEffects.tsx index d42e8eada0..9fe18cd3c7 100644 --- a/packages/core/src/components/PlateEffects.tsx +++ b/packages/core/src/components/PlateEffects.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import React from 'react'; import { Value } from '@udecode/slate'; import { usePlateEffects, UsePlateEffectsProps } from '../hooks'; @@ -8,7 +8,7 @@ export interface PlateEffectsProps< V extends Value = Value, E extends PlateEditor = PlateEditor, > extends UsePlateEffectsProps { - children: ReactNode; + children: React.ReactNode; } export function PlateEffects< diff --git a/packages/core/src/components/PlateSlate.tsx b/packages/core/src/components/PlateSlate.tsx index 7b0e5857f1..38fd415633 100644 --- a/packages/core/src/components/PlateSlate.tsx +++ b/packages/core/src/components/PlateSlate.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import React from 'react'; import { Slate } from 'slate-react'; import { useSlateProps } from '../hooks'; @@ -15,7 +15,7 @@ export function PlateSlate({ children, }: { id?: PlateId; - children: ReactNode; + children: React.ReactNode; }) { const slateProps = useSlateProps({ id }); diff --git a/packages/core/src/hooks/useEditableProps.ts b/packages/core/src/hooks/useEditableProps.ts index 0b82a095fb..d06a48661b 100644 --- a/packages/core/src/hooks/useEditableProps.ts +++ b/packages/core/src/hooks/useEditableProps.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import React from 'react'; import { isDefined } from '@udecode/utils'; import omit from 'lodash/omit.js'; import { useDeepCompareMemo } from 'use-deep-compare'; @@ -25,24 +25,24 @@ export const useEditableProps = ( const storeRenderLeaf = selectors.renderLeaf(); const storeRenderElement = selectors.renderElement(); - const decorateMemo = useMemo(() => { + const decorateMemo = React.useMemo(() => { return pipeDecorate(editor, storeDecorate ?? editableProps?.decorate); }, [editableProps?.decorate, editor, storeDecorate]); - const decorate: typeof decorateMemo = useMemo(() => { + const decorate: typeof decorateMemo = React.useMemo(() => { if (!versionDecorate || !decorateMemo) return; return (entry) => decorateMemo(entry); }, [decorateMemo, versionDecorate]); - const renderElement = useMemo(() => { + const renderElement = React.useMemo(() => { return pipeRenderElement( editor, storeRenderElement ?? editableProps?.renderElement ); }, [editableProps?.renderElement, editor, storeRenderElement]); - const renderLeaf = useMemo(() => { + const renderLeaf = React.useMemo(() => { return pipeRenderLeaf(editor, storeRenderLeaf ?? editableProps?.renderLeaf); }, [editableProps?.renderLeaf, editor, storeRenderLeaf]); diff --git a/packages/core/src/hooks/usePlateEffects.ts b/packages/core/src/hooks/usePlateEffects.ts index 6b67a1fe95..018046941c 100644 --- a/packages/core/src/hooks/usePlateEffects.ts +++ b/packages/core/src/hooks/usePlateEffects.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import React from 'react'; import { Value } from '@udecode/slate'; import { isDefined } from '@udecode/utils'; @@ -26,7 +26,7 @@ export const usePlateEffects = < const [rawPlugins, setRawPlugins] = states.rawPlugins(); const [, setPlugins] = states.plugins(); - useEffect(() => { + React.useEffect(() => { if (isDefined(pluginsProp) && pluginsProp !== rawPlugins) { setRawPlugins(rawPlugins); diff --git a/packages/core/src/hooks/useSlateProps.ts b/packages/core/src/hooks/useSlateProps.ts index aa1a41998a..7a5209a359 100644 --- a/packages/core/src/hooks/useSlateProps.ts +++ b/packages/core/src/hooks/useSlateProps.ts @@ -1,4 +1,4 @@ -import { useCallback, useMemo } from 'react'; +import React from 'react'; import { Value } from '@udecode/slate'; import { SlateProps } from '@udecode/slate-react'; @@ -19,7 +19,7 @@ export const useSlateProps = ({ const setValue = usePlateActions(id).value(); const onChangeProp = usePlateSelectors(id).onChange(); - const onChange = useCallback( + const onChange = React.useCallback( (newValue: V) => { const eventIsHandled = pipeOnChange(editor)(newValue); @@ -32,7 +32,7 @@ export const useSlateProps = ({ [editor, setValue, onChangeProp] ); - return useMemo(() => { + return React.useMemo(() => { return { key: editor.key, editor, diff --git a/packages/core/src/stores/element/useElementStore.spec.tsx b/packages/core/src/stores/element/useElementStore.spec.tsx index 42d589e192..474bd9d242 100644 --- a/packages/core/src/stores/element/useElementStore.spec.tsx +++ b/packages/core/src/stores/element/useElementStore.spec.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode, useMemo, useState } from 'react'; +import React from 'react'; import { act, render } from '@testing-library/react'; import { TElement } from '@udecode/slate'; @@ -33,9 +33,9 @@ describe('ElementProvider', () => { children, }: { name: string; - children: ReactNode; + children: React.ReactNode; }) => { - const element = useMemo(() => makeNameElement(name), [name]); + const element = React.useMemo(() => makeNameElement(name), [name]); return ( @@ -49,9 +49,9 @@ describe('ElementProvider', () => { children, }: { age: number; - children: ReactNode; + children: React.ReactNode; }) => { - const element = useMemo(() => makeAgeElement(age), [age]); + const element = React.useMemo(() => makeAgeElement(age), [age]); return ( @@ -69,9 +69,9 @@ describe('ElementProvider', () => { initialAge: number; increment: number; buttonLabel: string; - children: ReactNode; + children: React.ReactNode; }) => { - const [age, setAge] = useState(initialAge); + const [age, setAge] = React.useState(initialAge); return ( diff --git a/packages/core/src/stores/plate/actions/useIncrementVersion.ts b/packages/core/src/stores/plate/actions/useIncrementVersion.ts index 2bfe8e92ed..d743b46c7a 100644 --- a/packages/core/src/stores/plate/actions/useIncrementVersion.ts +++ b/packages/core/src/stores/plate/actions/useIncrementVersion.ts @@ -1,14 +1,14 @@ -import { useCallback, useRef } from 'react'; +import React from 'react'; import { PlateChangeKey } from '../../../types/index'; import { PlateId, usePlateActions } from '../createPlateStore'; export const useIncrementVersion = (key: PlateChangeKey, id?: PlateId) => { - const previousVersionRef = useRef(1); + const previousVersionRef = React.useRef(1); const set = usePlateActions(id)[key](); - return useCallback(() => { + return React.useCallback(() => { const nextVersion = previousVersionRef.current + 1; set(nextVersion); previousVersionRef.current = nextVersion; diff --git a/packages/core/src/stores/plate/actions/useRedecorate.ts b/packages/core/src/stores/plate/actions/useRedecorate.ts index 58bb12d3a6..5325594119 100644 --- a/packages/core/src/stores/plate/actions/useRedecorate.ts +++ b/packages/core/src/stores/plate/actions/useRedecorate.ts @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import React from 'react'; import { PlateId } from '../createPlateStore'; import { useIncrementVersion } from './useIncrementVersion'; @@ -6,7 +6,7 @@ import { useIncrementVersion } from './useIncrementVersion'; export const useRedecorate = (id?: PlateId) => { const updateDecorate = useIncrementVersion('versionDecorate', id); - return useCallback(() => { + return React.useCallback(() => { updateDecorate(); }, [updateDecorate]); }; diff --git a/packages/core/src/stores/plate/actions/useReplaceEditor.ts b/packages/core/src/stores/plate/actions/useReplaceEditor.ts index f56b9e99ef..b5aaf54d4f 100644 --- a/packages/core/src/stores/plate/actions/useReplaceEditor.ts +++ b/packages/core/src/stores/plate/actions/useReplaceEditor.ts @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import React from 'react'; import { createPlateEditor } from '../../../utils/index'; import { PlateId, usePlateActions } from '../createPlateStore'; @@ -12,7 +12,7 @@ export const useReplaceEditor = (id?: PlateId) => { const editor = useEditorRef(id); const setEditor = usePlateActions(id).editor(); - return useCallback(() => { + return React.useCallback(() => { const newEditor = createPlateEditor({ id: editor.id, plugins: editor.plugins, diff --git a/packages/core/src/stores/plate/selectors/useEditorSelector.ts b/packages/core/src/stores/plate/selectors/useEditorSelector.ts index b24a06a18a..c34cc46bf0 100644 --- a/packages/core/src/stores/plate/selectors/useEditorSelector.ts +++ b/packages/core/src/stores/plate/selectors/useEditorSelector.ts @@ -1,4 +1,4 @@ -import { DependencyList, useMemo } from 'react'; +import React from 'react'; import { Value } from '@udecode/slate'; import { selectAtom } from 'jotai/utils'; @@ -16,10 +16,10 @@ export const useEditorSelector = < E extends PlateEditor = PlateEditor, >( selector: (editor: E, prev?: T) => T, - deps: DependencyList, + deps: React.DependencyList, { id, equalityFn = (a: T, b: T) => a === b }: UseEditorSelectorOptions = {} ): T => { - const selectorAtom = useMemo( + const selectorAtom = React.useMemo( () => selectAtom<{ editor: E }, T>( plateStore.atom.trackedEditor, diff --git a/packages/core/src/types/PlateEditor.ts b/packages/core/src/types/PlateEditor.ts index 0c0ece49bf..2c513c047a 100644 --- a/packages/core/src/types/PlateEditor.ts +++ b/packages/core/src/types/PlateEditor.ts @@ -1,4 +1,4 @@ -import { KeyboardEvent } from 'react'; +import React from 'react'; import { EElement, TEditor, @@ -35,5 +35,5 @@ export type PlateEditor = TEditor & */ childrenFactory: () => V; - currentKeyboardEvent: KeyboardEvent | null; + currentKeyboardEvent: React.KeyboardEvent | null; }; diff --git a/packages/core/src/types/PlateStore.ts b/packages/core/src/types/PlateStore.ts index ea07c0bf85..7f341b15ac 100644 --- a/packages/core/src/types/PlateStore.ts +++ b/packages/core/src/types/PlateStore.ts @@ -1,4 +1,4 @@ -import { ForwardedRef } from 'react'; +import React from 'react'; import { Value } from '@udecode/slate'; import { PlateId } from '../stores'; @@ -81,7 +81,7 @@ export type PlateStoreState< /** * Access the editor object using a React ref. */ - editorRef: ForwardedRef; + editorRef: React.ForwardedRef; decorate: NonNullable; renderElement: NonNullable; diff --git a/packages/core/src/types/plugin/DOMHandlers.ts b/packages/core/src/types/plugin/DOMHandlers.ts index f443583e68..1bfb6f4f98 100644 --- a/packages/core/src/types/plugin/DOMHandlers.ts +++ b/packages/core/src/types/plugin/DOMHandlers.ts @@ -1,19 +1,4 @@ -import { - AnimationEvent, - ClipboardEvent, - CompositionEvent, - DragEvent, - FocusEvent, - FormEvent, - KeyboardEvent, - MouseEvent, - PointerEvent, - SyntheticEvent, - TouchEvent, - TransitionEvent, - UIEvent, - WheelEvent, -} from 'react'; +import React from 'react'; import { Value } from '@udecode/slate'; import { PlateEditor } from '../PlateEditor'; @@ -39,189 +24,189 @@ export interface DOMHandlers< E extends PlateEditor = PlateEditor, > { // Clipboard Events - onCopy?: DOMHandler; - onCopyCapture?: DOMHandler; - onCut?: DOMHandler; - onCutCapture?: DOMHandler; - onPaste?: DOMHandler; - onPasteCapture?: DOMHandler; + onCopy?: DOMHandler; + onCopyCapture?: DOMHandler; + onCut?: DOMHandler; + onCutCapture?: DOMHandler; + onPaste?: DOMHandler; + onPasteCapture?: DOMHandler; // Composition Events - onCompositionEnd?: DOMHandler; - onCompositionEndCapture?: DOMHandler; - onCompositionStart?: DOMHandler; - onCompositionStartCapture?: DOMHandler; - onCompositionUpdate?: DOMHandler; - onCompositionUpdateCapture?: DOMHandler; + onCompositionEnd?: DOMHandler; + onCompositionEndCapture?: DOMHandler; + onCompositionStart?: DOMHandler; + onCompositionStartCapture?: DOMHandler; + onCompositionUpdate?: DOMHandler; + onCompositionUpdateCapture?: DOMHandler; // Focus Events - onFocus?: DOMHandler; - onFocusCapture?: DOMHandler; - onBlur?: DOMHandler; - onBlurCapture?: DOMHandler; + onFocus?: DOMHandler; + onFocusCapture?: DOMHandler; + onBlur?: DOMHandler; + onBlurCapture?: DOMHandler; // Form Events onDOMBeforeInput?: DOMHandler; - onBeforeInput?: DOMHandler; - onBeforeInputCapture?: DOMHandler; - onInput?: DOMHandler; - onInputCapture?: DOMHandler; - onReset?: DOMHandler; - onResetCapture?: DOMHandler; - onSubmit?: DOMHandler; - onSubmitCapture?: DOMHandler; - onInvalid?: DOMHandler; - onInvalidCapture?: DOMHandler; + onBeforeInput?: DOMHandler; + onBeforeInputCapture?: DOMHandler; + onInput?: DOMHandler; + onInputCapture?: DOMHandler; + onReset?: DOMHandler; + onResetCapture?: DOMHandler; + onSubmit?: DOMHandler; + onSubmitCapture?: DOMHandler; + onInvalid?: DOMHandler; + onInvalidCapture?: DOMHandler; // Image Events - onLoad?: DOMHandler; - onLoadCapture?: DOMHandler; + onLoad?: DOMHandler; + onLoadCapture?: DOMHandler; // Keyboard Events - onKeyDown?: DOMHandler; - onKeyDownCapture?: DOMHandler; - onKeyPress?: DOMHandler; - onKeyPressCapture?: DOMHandler; - onKeyUp?: DOMHandler; - onKeyUpCapture?: DOMHandler; + onKeyDown?: DOMHandler; + onKeyDownCapture?: DOMHandler; + onKeyPress?: DOMHandler; + onKeyPressCapture?: DOMHandler; + onKeyUp?: DOMHandler; + onKeyUpCapture?: DOMHandler; // Media Events - onAbort?: DOMHandler; - onAbortCapture?: DOMHandler; - onCanPlay?: DOMHandler; - onCanPlayCapture?: DOMHandler; - onCanPlayThrough?: DOMHandler; - onCanPlayThroughCapture?: DOMHandler; - onDurationChange?: DOMHandler; - onDurationChangeCapture?: DOMHandler; - onEmptied?: DOMHandler; - onEmptiedCapture?: DOMHandler; - onEncrypted?: DOMHandler; - onEncryptedCapture?: DOMHandler; - onEnded?: DOMHandler; - onEndedCapture?: DOMHandler; - onLoadedData?: DOMHandler; - onLoadedDataCapture?: DOMHandler; - onLoadedMetadata?: DOMHandler; - onLoadedMetadataCapture?: DOMHandler; - onLoadStart?: DOMHandler; - onLoadStartCapture?: DOMHandler; - onPause?: DOMHandler; - onPauseCapture?: DOMHandler; - onPlay?: DOMHandler; - onPlayCapture?: DOMHandler; - onPlaying?: DOMHandler; - onPlayingCapture?: DOMHandler; - onProgress?: DOMHandler; - onProgressCapture?: DOMHandler; - onRateChange?: DOMHandler; - onRateChangeCapture?: DOMHandler; - onSeeked?: DOMHandler; - onSeekedCapture?: DOMHandler; - onSeeking?: DOMHandler; - onSeekingCapture?: DOMHandler; - onStalled?: DOMHandler; - onStalledCapture?: DOMHandler; - onSuspend?: DOMHandler; - onSuspendCapture?: DOMHandler; - onTimeUpdate?: DOMHandler; - onTimeUpdateCapture?: DOMHandler; - onVolumeChange?: DOMHandler; - onVolumeChangeCapture?: DOMHandler; - onWaiting?: DOMHandler; - onWaitingCapture?: DOMHandler; - - // MouseEvents - onAuxClick?: DOMHandler; - onAuxClickCapture?: DOMHandler; - onClick?: DOMHandler; - onClickCapture?: DOMHandler; - onContextMenu?: DOMHandler; - onContextMenuCapture?: DOMHandler; - onDoubleClick?: DOMHandler; - onDoubleClickCapture?: DOMHandler; - onDrag?: DOMHandler; - onDragCapture?: DOMHandler; - onDragEnd?: DOMHandler; - onDragEndCapture?: DOMHandler; - onDragEnter?: DOMHandler; - onDragEnterCapture?: DOMHandler; - onDragExit?: DOMHandler; - onDragExitCapture?: DOMHandler; - onDragLeave?: DOMHandler; - onDragLeaveCapture?: DOMHandler; - onDragOver?: DOMHandler; - onDragOverCapture?: DOMHandler; - onDragStart?: DOMHandler; - onDragStartCapture?: DOMHandler; - onDrop?: DOMHandler; - onDropCapture?: DOMHandler; - onMouseDown?: DOMHandler; - onMouseDownCapture?: DOMHandler; - onMouseEnter?: DOMHandler; - onMouseLeave?: DOMHandler; - onMouseMove?: DOMHandler; - onMouseMoveCapture?: DOMHandler; - onMouseOut?: DOMHandler; - onMouseOutCapture?: DOMHandler; - onMouseOver?: DOMHandler; - onMouseOverCapture?: DOMHandler; - onMouseUp?: DOMHandler; - onMouseUpCapture?: DOMHandler; + onAbort?: DOMHandler; + onAbortCapture?: DOMHandler; + onCanPlay?: DOMHandler; + onCanPlayCapture?: DOMHandler; + onCanPlayThrough?: DOMHandler; + onCanPlayThroughCapture?: DOMHandler; + onDurationChange?: DOMHandler; + onDurationChangeCapture?: DOMHandler; + onEmptied?: DOMHandler; + onEmptiedCapture?: DOMHandler; + onEncrypted?: DOMHandler; + onEncryptedCapture?: DOMHandler; + onEnded?: DOMHandler; + onEndedCapture?: DOMHandler; + onLoadedData?: DOMHandler; + onLoadedDataCapture?: DOMHandler; + onLoadedMetadata?: DOMHandler; + onLoadedMetadataCapture?: DOMHandler; + onLoadStart?: DOMHandler; + onLoadStartCapture?: DOMHandler; + onPause?: DOMHandler; + onPauseCapture?: DOMHandler; + onPlay?: DOMHandler; + onPlayCapture?: DOMHandler; + onPlaying?: DOMHandler; + onPlayingCapture?: DOMHandler; + onProgress?: DOMHandler; + onProgressCapture?: DOMHandler; + onRateChange?: DOMHandler; + onRateChangeCapture?: DOMHandler; + onSeeked?: DOMHandler; + onSeekedCapture?: DOMHandler; + onSeeking?: DOMHandler; + onSeekingCapture?: DOMHandler; + onStalled?: DOMHandler; + onStalledCapture?: DOMHandler; + onSuspend?: DOMHandler; + onSuspendCapture?: DOMHandler; + onTimeUpdate?: DOMHandler; + onTimeUpdateCapture?: DOMHandler; + onVolumeChange?: DOMHandler; + onVolumeChangeCapture?: DOMHandler; + onWaiting?: DOMHandler; + onWaitingCapture?: DOMHandler; + + // React.MouseEvents + onAuxClick?: DOMHandler; + onAuxClickCapture?: DOMHandler; + onClick?: DOMHandler; + onClickCapture?: DOMHandler; + onContextMenu?: DOMHandler; + onContextMenuCapture?: DOMHandler; + onDoubleClick?: DOMHandler; + onDoubleClickCapture?: DOMHandler; + onDrag?: DOMHandler; + onDragCapture?: DOMHandler; + onDragEnd?: DOMHandler; + onDragEndCapture?: DOMHandler; + onDragEnter?: DOMHandler; + onDragEnterCapture?: DOMHandler; + onDragExit?: DOMHandler; + onDragExitCapture?: DOMHandler; + onDragLeave?: DOMHandler; + onDragLeaveCapture?: DOMHandler; + onDragOver?: DOMHandler; + onDragOverCapture?: DOMHandler; + onDragStart?: DOMHandler; + onDragStartCapture?: DOMHandler; + onDrop?: DOMHandler; + onDropCapture?: DOMHandler; + onMouseDown?: DOMHandler; + onMouseDownCapture?: DOMHandler; + onMouseEnter?: DOMHandler; + onMouseLeave?: DOMHandler; + onMouseMove?: DOMHandler; + onMouseMoveCapture?: DOMHandler; + onMouseOut?: DOMHandler; + onMouseOutCapture?: DOMHandler; + onMouseOver?: DOMHandler; + onMouseOverCapture?: DOMHandler; + onMouseUp?: DOMHandler; + onMouseUpCapture?: DOMHandler; // Selection Events - onSelect?: DOMHandler; - onSelectCapture?: DOMHandler; + onSelect?: DOMHandler; + onSelectCapture?: DOMHandler; // Touch Events - onTouchCancel?: DOMHandler; - onTouchCancelCapture?: DOMHandler; - onTouchEnd?: DOMHandler; - onTouchEndCapture?: DOMHandler; - onTouchMove?: DOMHandler; - onTouchMoveCapture?: DOMHandler; - onTouchStart?: DOMHandler; - onTouchStartCapture?: DOMHandler; + onTouchCancel?: DOMHandler; + onTouchCancelCapture?: DOMHandler; + onTouchEnd?: DOMHandler; + onTouchEndCapture?: DOMHandler; + onTouchMove?: DOMHandler; + onTouchMoveCapture?: DOMHandler; + onTouchStart?: DOMHandler; + onTouchStartCapture?: DOMHandler; // Pointer Events - onPointerDown?: DOMHandler; - onPointerDownCapture?: DOMHandler; - onPointerMove?: DOMHandler; - onPointerMoveCapture?: DOMHandler; - onPointerUp?: DOMHandler; - onPointerUpCapture?: DOMHandler; - onPointerCancel?: DOMHandler; - onPointerCancelCapture?: DOMHandler; - onPointerEnter?: DOMHandler; - onPointerEnterCapture?: DOMHandler; - onPointerLeave?: DOMHandler; - onPointerLeaveCapture?: DOMHandler; - onPointerOver?: DOMHandler; - onPointerOverCapture?: DOMHandler; - onPointerOut?: DOMHandler; - onPointerOutCapture?: DOMHandler; - onGotPointerCapture?: DOMHandler; - onGotPointerCaptureCapture?: DOMHandler; - onLostPointerCapture?: DOMHandler; - onLostPointerCaptureCapture?: DOMHandler; + onPointerDown?: DOMHandler; + onPointerDownCapture?: DOMHandler; + onPointerMove?: DOMHandler; + onPointerMoveCapture?: DOMHandler; + onPointerUp?: DOMHandler; + onPointerUpCapture?: DOMHandler; + onPointerCancel?: DOMHandler; + onPointerCancelCapture?: DOMHandler; + onPointerEnter?: DOMHandler; + onPointerEnterCapture?: DOMHandler; + onPointerLeave?: DOMHandler; + onPointerLeaveCapture?: DOMHandler; + onPointerOver?: DOMHandler; + onPointerOverCapture?: DOMHandler; + onPointerOut?: DOMHandler; + onPointerOutCapture?: DOMHandler; + onGotPointerCapture?: DOMHandler; + onGotPointerCaptureCapture?: DOMHandler; + onLostPointerCapture?: DOMHandler; + onLostPointerCaptureCapture?: DOMHandler; // UI Events - onScroll?: DOMHandler; - onScrollCapture?: DOMHandler; + onScroll?: DOMHandler; + onScrollCapture?: DOMHandler; // Wheel Events - onWheel?: DOMHandler; - onWheelCapture?: DOMHandler; + onWheel?: DOMHandler; + onWheelCapture?: DOMHandler; // Animation Events - onAnimationStart?: DOMHandler; - onAnimationStartCapture?: DOMHandler; - onAnimationEnd?: DOMHandler; - onAnimationEndCapture?: DOMHandler; - onAnimationIteration?: DOMHandler; - onAnimationIterationCapture?: DOMHandler; + onAnimationStart?: DOMHandler; + onAnimationStartCapture?: DOMHandler; + onAnimationEnd?: DOMHandler; + onAnimationEndCapture?: DOMHandler; + onAnimationIteration?: DOMHandler; + onAnimationIterationCapture?: DOMHandler; // Transition Events - onTransitionEnd?: DOMHandler; - onTransitionEndCapture?: DOMHandler; + onTransitionEnd?: DOMHandler; + onTransitionEndCapture?: DOMHandler; } diff --git a/packages/core/src/types/plugin/InjectProps.ts b/packages/core/src/types/plugin/InjectProps.ts index a9828bb371..7fc4e39ca8 100644 --- a/packages/core/src/types/plugin/InjectProps.ts +++ b/packages/core/src/types/plugin/InjectProps.ts @@ -1,4 +1,4 @@ -import { CSSProperties } from 'react'; +import React from 'react'; import { Value } from '@udecode/slate'; import { AnyObject } from '@udecode/utils'; @@ -47,7 +47,7 @@ export interface InjectProps { * Style key to override. * @default nodeKey */ - styleKey?: keyof CSSProperties; + styleKey?: keyof React.CSSProperties; /** * Transform the className. @@ -73,7 +73,7 @@ export interface InjectProps { * Transform the style. * @default { ...style, [styleKey]: value } */ - transformStyle?: (options: TransformOptions) => CSSProperties; + transformStyle?: (options: TransformOptions) => React.CSSProperties; /** * List of supported node values. diff --git a/packages/core/src/types/plugin/KeyboardHandler.ts b/packages/core/src/types/plugin/KeyboardHandler.ts index f8c937f7fe..79c0899e46 100644 --- a/packages/core/src/types/plugin/KeyboardHandler.ts +++ b/packages/core/src/types/plugin/KeyboardHandler.ts @@ -1,4 +1,4 @@ -import { KeyboardEvent } from 'react'; +import React from 'react'; import { Value } from '@udecode/slate'; import { PlateEditor } from '../PlateEditor'; @@ -9,6 +9,7 @@ export type KeyboardHandler< P = PluginOptions, V extends Value = Value, E extends PlateEditor = PlateEditor, -> = DOMHandler; +> = DOMHandler; -export type KeyboardHandlerReturnType = DOMHandlerReturnType; +export type KeyboardHandlerReturnType = + DOMHandlerReturnType; diff --git a/packages/core/src/types/plugin/PlatePlugin.ts b/packages/core/src/types/plugin/PlatePlugin.ts index fa92318eac..76c9b12a95 100644 --- a/packages/core/src/types/plugin/PlatePlugin.ts +++ b/packages/core/src/types/plugin/PlatePlugin.ts @@ -1,4 +1,4 @@ -import { FC, ReactNode } from 'react'; +import React from 'react'; import { Value } from '@udecode/slate'; import { AnyObject, WithRequired } from '@udecode/utils'; @@ -161,15 +161,15 @@ export type PlatePlugin< /** * Render a component above `Editable`. */ - renderAboveEditable?: FC<{ - children: ReactNode; + renderAboveEditable?: React.FC<{ + children: React.ReactNode; }>; /** * Render a component above `Slate`. */ - renderAboveSlate?: FC<{ - children: ReactNode; + renderAboveSlate?: React.FC<{ + children: React.ReactNode; }>; /** diff --git a/packages/core/src/utils/getRenderNodeProps.ts b/packages/core/src/utils/getRenderNodeProps.ts index 55812a3b48..51cb0718da 100644 --- a/packages/core/src/utils/getRenderNodeProps.ts +++ b/packages/core/src/utils/getRenderNodeProps.ts @@ -1,6 +1,6 @@ import { Value } from '@udecode/slate'; import { AnyObject } from '@udecode/utils'; -import clsx from 'clsx'; +import { clsx } from 'clsx'; import { PlateRenderNodeProps } from '../types/PlateRenderNodeProps'; import { WithPlatePlugin } from '../types/plugin/PlatePlugin'; diff --git a/packages/core/src/utils/hotkeys.ts b/packages/core/src/utils/hotkeys.ts index 996016b56b..b60d998017 100644 --- a/packages/core/src/utils/hotkeys.ts +++ b/packages/core/src/utils/hotkeys.ts @@ -1,4 +1,4 @@ -import { KeyboardEvent } from 'react'; +import React from 'react'; import { isComposing, TReactEditor } from '@udecode/slate-react'; import { IS_APPLE } from '@udecode/utils'; import { isKeyHotkey } from 'is-hotkey'; @@ -62,7 +62,7 @@ const create = (key: string) => { const isApple = apple && isKeyHotkey(apple); const isWindows = windows && isKeyHotkey(windows); - return (event: KeyboardEvent) => { + return (event: React.KeyboardEvent) => { if (isGeneric && isGeneric(event)) return true; if (IS_APPLE && isApple && isApple(event)) return true; if (!IS_APPLE && isWindows && isWindows(event)) return true; @@ -74,7 +74,7 @@ const createComposing = (key: string) => ( editor: TReactEditor, - event: KeyboardEvent, + event: React.KeyboardEvent, { composing, }: { diff --git a/packages/core/src/utils/pipeHandler.ts b/packages/core/src/utils/pipeHandler.ts index 5d6ff55327..299b6f73fd 100644 --- a/packages/core/src/utils/pipeHandler.ts +++ b/packages/core/src/utils/pipeHandler.ts @@ -1,4 +1,4 @@ -import { SyntheticEvent } from 'react'; +import React from 'react'; import { Value } from '@udecode/slate'; import { PlateEditor } from '../types/PlateEditor'; @@ -9,7 +9,7 @@ import { TEditableProps } from '../types/slate-react/TEditableProps'; * Check if an event is overrided by a handler. */ export const isEventHandled = < - EventType extends SyntheticEvent, + EventType extends React.SyntheticEvent, >( event: EventType, handler?: (event: EventType) => void | boolean diff --git a/packages/core/src/utils/pluginInjectProps.ts b/packages/core/src/utils/pluginInjectProps.ts index e7656e8c92..2f698e4e13 100644 --- a/packages/core/src/utils/pluginInjectProps.ts +++ b/packages/core/src/utils/pluginInjectProps.ts @@ -1,7 +1,7 @@ -import { CSSProperties } from 'react'; +import React from 'react'; import { EElement, EText, isElement, Value } from '@udecode/slate'; import { AnyObject, isDefined } from '@udecode/utils'; -import clsx from 'clsx'; +import { clsx } from 'clsx'; import { TransformOptions } from '../types'; import { PlateEditor } from '../types/PlateEditor'; @@ -26,12 +26,12 @@ export interface GetInjectPropsOptions { /** * Existing style. */ - style?: CSSProperties; + style?: React.CSSProperties; } export interface GetInjectPropsReturnType extends AnyObject { className?: string; - style?: CSSProperties; + style?: React.CSSProperties; } /** diff --git a/packages/core/src/utils/pluginRenderElement.tsx b/packages/core/src/utils/pluginRenderElement.tsx index 2863d1b9cc..9d6a8fe074 100644 --- a/packages/core/src/utils/pluginRenderElement.tsx +++ b/packages/core/src/utils/pluginRenderElement.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import React from 'react'; import { Value } from '@udecode/slate'; import { DefaultElement } from 'slate-react'; @@ -47,7 +47,9 @@ export const pluginRenderElement = ( } }); - let component: ReactNode = {children}; + let component: React.ReactNode = ( + {children} + ); injectAboveComponents.forEach((withHOC) => { const hoc = withHOC({ ...nodeProps, key } as any); diff --git a/packages/core/src/utils/withHOC.spec.tsx b/packages/core/src/utils/withHOC.spec.tsx index bde3593b50..58334ac51c 100644 --- a/packages/core/src/utils/withHOC.spec.tsx +++ b/packages/core/src/utils/withHOC.spec.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react'; +import React from 'react'; import { render } from '@testing-library/react'; import { withHOC } from './withHOC'; @@ -8,15 +8,16 @@ describe('withHOC', () => { type DummyRef = { myRef: string }; type DummyProps = { myProp: string }; - const HOC = React.forwardRef( - ({ children, ...props }, ref) => ( -
- {JSON.stringify(props)} - {JSON.stringify(ref)} - {children} -
- ) - ); + const HOC = React.forwardRef< + DummyRef, + DummyProps & { children: React.ReactNode } + >(({ children, ...props }, ref) => ( +
+ {JSON.stringify(props)} + {JSON.stringify(ref)} + {children} +
+ )); const Component = React.forwardRef((props, ref) => (
diff --git a/packages/cursor/src/components/CursorOverlay.tsx b/packages/cursor/src/components/CursorOverlay.tsx index 84feb4cfe1..f355b66867 100644 --- a/packages/cursor/src/components/CursorOverlay.tsx +++ b/packages/cursor/src/components/CursorOverlay.tsx @@ -1,4 +1,4 @@ -import React, { RefObject } from 'react'; +import React from 'react'; import { ClassNames, UnknownObject, @@ -67,7 +67,7 @@ export interface CursorOverlayProps< * Container the overlay will be rendered in. * If set, all returned overlay positions will be relative to this container. */ - containerRef?: RefObject; + containerRef?: React.RefObject; /** * Whether to refresh the cursor overlay positions on container resize. diff --git a/packages/cursor/src/hooks/useCursorOverlayPositions.ts b/packages/cursor/src/hooks/useCursorOverlayPositions.ts index 1d68495e0b..7e55da40d1 100644 --- a/packages/cursor/src/hooks/useCursorOverlayPositions.ts +++ b/packages/cursor/src/hooks/useCursorOverlayPositions.ts @@ -1,4 +1,4 @@ -import { useCallback, useMemo, useRef, useState } from 'react'; +import React from 'react'; import { UnknownObject, useEditorRef, @@ -23,15 +23,15 @@ export const useCursorOverlayPositions = ({ }: CursorOverlayProps = {}) => { const editor = useEditorRef(); - const selectionRectCache = useRef>( + const selectionRectCache = React.useRef>( new WeakMap() ); - const [selectionRects, setSelectionRects] = useState< + const [selectionRects, setSelectionRects] = React.useState< Record >({}); - const updateSelectionRects = useCallback(() => { + const updateSelectionRects = React.useCallback(() => { // We have a container ref but the ref is null => container // isn't mounted to we can't calculate the selection rects. if (!containerRef?.current) return; @@ -91,7 +91,7 @@ export const useCursorOverlayPositions = ({ updateSelectionRects(); }); - const cursors = useMemo( + const cursors = React.useMemo( () => getCursorOverlayState({ selectionRects, diff --git a/packages/cursor/src/hooks/useRefreshOnResize.ts b/packages/cursor/src/hooks/useRefreshOnResize.ts index 74f1aebd8d..c8ac3255b5 100644 --- a/packages/cursor/src/hooks/useRefreshOnResize.ts +++ b/packages/cursor/src/hooks/useRefreshOnResize.ts @@ -1,24 +1,24 @@ -import { MutableRefObject, useCallback, useEffect } from 'react'; +import React from 'react'; import { Range } from 'slate'; import { CursorOverlayProps } from '../components'; import { SelectionRect } from '../types'; import { useRequestReRender } from './useRequestReRender'; -export interface UseRefreshOnResizeOptions +export interface useRefreshOnResizeOptions extends Pick { - selectionRectCache: MutableRefObject>; + selectionRectCache: React.MutableRefObject>; } export const useRefreshOnResize = ({ containerRef, refreshOnResize, selectionRectCache, -}: UseRefreshOnResizeOptions) => { +}: useRefreshOnResizeOptions) => { const requestReRender = useRequestReRender(); // Reset the selection rect cache and request re-render. - const refresh = useCallback( + const refresh = React.useCallback( (sync = false) => { selectionRectCache.current = new WeakMap(); requestReRender(sync); @@ -27,7 +27,7 @@ export const useRefreshOnResize = ({ ); // Refresh on container resize - useEffect(() => { + React.useEffect(() => { if (!refreshOnResize || !containerRef?.current) { return; } diff --git a/packages/cursor/src/hooks/useRequestReRender.ts b/packages/cursor/src/hooks/useRequestReRender.ts index 835e6fc752..ddf9a8ba2b 100644 --- a/packages/cursor/src/hooks/useRequestReRender.ts +++ b/packages/cursor/src/hooks/useRequestReRender.ts @@ -1,10 +1,10 @@ -import { useCallback, useEffect, useRef, useState } from 'react'; +import React from 'react'; export const useRequestReRender = () => { - const [, setUpdateCounter] = useState(0); - const animationFrameRef = useRef(null); + const [, setUpdateCounter] = React.useState(0); + const animationFrameRef = React.useRef(null); - const requestReRender = useCallback((immediate = false) => { + const requestReRender = React.useCallback((immediate = false) => { if (animationFrameRef.current && !immediate) { return; } @@ -25,14 +25,14 @@ export const useRequestReRender = () => { setUpdateCounter((state) => state + 1); }, []); - useEffect(() => { + React.useEffect(() => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); animationFrameRef.current = null; } }); - useEffect( + React.useEffect( () => () => { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); diff --git a/packages/cursor/src/types.ts b/packages/cursor/src/types.ts index f6850d8983..b992ac85fe 100644 --- a/packages/cursor/src/types.ts +++ b/packages/cursor/src/types.ts @@ -1,4 +1,4 @@ -import { CSSProperties } from 'react'; +import React from 'react'; import { UnknownObject } from '@udecode/plate-common'; import { Range } from 'slate'; @@ -30,6 +30,6 @@ export interface CursorOverlayState> } export type CursorData = { - style?: CSSProperties; - selectionStyle?: CSSProperties; + style?: React.CSSProperties; + selectionStyle?: React.CSSProperties; }; diff --git a/packages/dnd/src/components/Scroller/DndScroller.tsx b/packages/dnd/src/components/Scroller/DndScroller.tsx index bd0bcb0909..640a0ea976 100644 --- a/packages/dnd/src/components/Scroller/DndScroller.tsx +++ b/packages/dnd/src/components/Scroller/DndScroller.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { dndStore } from '../../dndStore'; import { Scroller, ScrollerProps } from './Scroller'; @@ -7,7 +7,7 @@ export function DndScroller(props: Partial) { const isDragging = dndStore.use.isDragging(); const [show, setShow] = React.useState(false); - useEffect(() => { + React.useEffect(() => { if (isDragging) { const timeout = setTimeout(() => { setShow(true); diff --git a/packages/dnd/src/components/Scroller/ScrollArea.tsx b/packages/dnd/src/components/Scroller/ScrollArea.tsx index 1564a65daa..d873c6afbb 100644 --- a/packages/dnd/src/components/Scroller/ScrollArea.tsx +++ b/packages/dnd/src/components/Scroller/ScrollArea.tsx @@ -1,10 +1,4 @@ -import React, { - CSSProperties, - HTMLAttributes, - RefObject, - useEffect, - useRef, -} from 'react'; +import React from 'react'; import throttle from 'lodash/throttle.js'; import raf from 'raf'; @@ -23,8 +17,8 @@ export interface ScrollAreaProps { zIndex?: number; minStrength?: number; strengthMultiplier?: number; - containerRef?: RefObject; - scrollAreaProps?: HTMLAttributes; + containerRef?: React.RefObject; + scrollAreaProps?: React.HTMLAttributes; } export function ScrollArea({ @@ -37,16 +31,16 @@ export function ScrollArea({ containerRef, scrollAreaProps, }: ScrollAreaProps) { - const ref = useRef(); + const ref = React.useRef(); - const scaleYRef = useRef(0); - const frameRef = useRef(null); + const scaleYRef = React.useRef(0); + const frameRef = React.useRef(null); const direction = placement === 'top' ? -1 : 1; // Drag a fixed, invisible box of custom height at the top, and bottom // of the window. Make sure to show it only when dragging something. - const style: CSSProperties = { + const style: React.CSSProperties = { position: 'fixed', height, width: '100%', @@ -122,7 +116,7 @@ export function ScrollArea({ updateScrolling(e); }; - useEffect(() => { + React.useEffect(() => { if (!enabled) { stopScrolling(); } diff --git a/packages/dnd/src/components/useDraggable.ts b/packages/dnd/src/components/useDraggable.ts index f3a57e6768..a39411a280 100644 --- a/packages/dnd/src/components/useDraggable.ts +++ b/packages/dnd/src/components/useDraggable.ts @@ -1,4 +1,4 @@ -import React, { useRef, useState } from 'react'; +import React from 'react'; import { TEditor, TElement } from '@udecode/plate-common'; import { ConnectDragSource, DropTargetMonitor } from 'react-dnd'; @@ -27,8 +27,8 @@ export const useDraggableState = (props: { }): DraggableState => { const { element, onDropHandler } = props; - const nodeRef = useRef(null); - const [isHovered, setIsHovered] = useState(false); + const nodeRef = React.useRef(null); + const [isHovered, setIsHovered] = React.useState(false); const { dropLine, isDragging, dragRef } = useDndBlock({ id: element.id as string, nodeRef, diff --git a/packages/dnd/src/components/useWithDraggable.ts b/packages/dnd/src/components/useWithDraggable.ts index fc1cf5b87d..a3f91db2e7 100644 --- a/packages/dnd/src/components/useWithDraggable.ts +++ b/packages/dnd/src/components/useWithDraggable.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import React from 'react'; import { findNodePath, PlateRenderElementProps, @@ -36,9 +36,12 @@ export const useWithDraggable = ({ draggableProps, }: WithDraggableOptions & PlateRenderElementProps) => { const readOnly = useReadOnly(); - const path = useMemo(() => findNodePath(editor, element), [editor, element]); + const path = React.useMemo( + () => findNodePath(editor, element), + [editor, element] + ); - const filteredOut = useMemo( + const filteredOut = React.useMemo( () => path && ((Number.isInteger(level) && level !== path.length - 1) || diff --git a/packages/dnd/src/components/withDraggable.tsx b/packages/dnd/src/components/withDraggable.tsx index 48b8528b77..a70acbaf03 100644 --- a/packages/dnd/src/components/withDraggable.tsx +++ b/packages/dnd/src/components/withDraggable.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react'; +import React from 'react'; import { AnyObject, PlateRenderElementProps } from '@udecode/plate-common'; import { useWithDraggable, WithDraggableOptions } from './useWithDraggable'; @@ -9,7 +9,7 @@ export const withDraggable = ( options?: WithDraggableOptions ) => // eslint-disable-next-line react/display-name - forwardRef((props, ref) => { + React.forwardRef((props, ref) => { const { disabled, draggableProps } = useWithDraggable({ ...options, ...props, diff --git a/packages/dnd/src/hooks/useDndNode.ts b/packages/dnd/src/hooks/useDndNode.ts index 01993a8caa..77b173866a 100644 --- a/packages/dnd/src/hooks/useDndNode.ts +++ b/packages/dnd/src/hooks/useDndNode.ts @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import React from 'react'; import { TEditor, useEditorRef } from '@udecode/plate-common'; import { DropTargetMonitor } from 'react-dnd'; import { getEmptyImage } from 'react-dnd-html5-backend'; @@ -50,7 +50,7 @@ export const useDndNode = ({ }: UseDndNodeOptions) => { const editor = useEditorRef(); - const [dropLine, setDropLine] = useState(''); + const [dropLine, setDropLine] = React.useState(''); const [{ isDragging }, dragRef, preview] = useDragNode(editor, { id, diff --git a/packages/emoji/src/utils/EmojiLibrary/EmojiFloatingGrid.ts b/packages/emoji/src/utils/EmojiLibrary/EmojiFloatingGrid.ts index 0b0512d944..65313eae23 100644 --- a/packages/emoji/src/utils/EmojiLibrary/EmojiFloatingGrid.ts +++ b/packages/emoji/src/utils/EmojiLibrary/EmojiFloatingGrid.ts @@ -1,27 +1,27 @@ -import { createRef, RefObject } from 'react'; +import React from 'react'; import { EmojiCategoryList } from '../../types'; import { AGridSection, Grid, IGrid } from '../Grid/index'; export type EmojiFloatingGridType = IGrid< - RefObject, + React.RefObject, EmojiCategoryList >; export class EmojiFloatingGrid extends Grid< - RefObject, + React.RefObject, EmojiCategoryList > { public createRootRef() { - return createRef(); + return React.createRef(); } } export class EmojiGridSectionWithRoot extends AGridSection< - RefObject, + React.RefObject, EmojiCategoryList > { protected createRootRef() { - this._root = createRef(); + this._root = React.createRef(); } } diff --git a/packages/emoji/src/utils/EmojiObserver.ts b/packages/emoji/src/utils/EmojiObserver.ts index 7e2a8ad484..793cc5f288 100644 --- a/packages/emoji/src/utils/EmojiObserver.ts +++ b/packages/emoji/src/utils/EmojiObserver.ts @@ -1,4 +1,4 @@ -import { MutableRefObject } from 'react'; +import React from 'react'; import { EmojiCategoryList } from '../types'; import { IEmojiFloatingLibrary } from './EmojiLibrary/index'; @@ -30,7 +30,7 @@ export type SetFocusedAndVisibleSectionsType = ( ) => void; export type ObserverCategoriesType = { - ancestorRef: MutableRefObject; + ancestorRef: React.MutableRefObject; emojiLibrary: IEmojiFloatingLibrary; setFocusedAndVisibleSections: SetFocusedAndVisibleSectionsType; }; diff --git a/packages/emoji/src/utils/EmojiPicker/EmojiPickerState.ts b/packages/emoji/src/utils/EmojiPicker/EmojiPickerState.ts index e731398cee..10858473c0 100644 --- a/packages/emoji/src/utils/EmojiPicker/EmojiPickerState.ts +++ b/packages/emoji/src/utils/EmojiPicker/EmojiPickerState.ts @@ -1,4 +1,4 @@ -import { Dispatch, Reducer, useReducer } from 'react'; +import React from 'react'; import { EmojiCategory, EmojiCategoryList } from '../../types'; import { Emoji } from '../EmojiLibrary/index'; @@ -36,10 +36,10 @@ const initialState: EmojiPickerStateProps = { export const EmojiPickerState = (): [ EmojiPickerStateProps, - Dispatch, + React.Dispatch, ] => { - const [cache, dispatch] = useReducer< - Reducer + const [cache, dispatch] = React.useReducer< + React.Reducer >((state, action) => { const { type, payload } = action; diff --git a/packages/emoji/src/utils/EmojiPicker/useEmojiPicker.ts b/packages/emoji/src/utils/EmojiPicker/useEmojiPicker.ts index 20ca75abcc..85a8a95077 100644 --- a/packages/emoji/src/utils/EmojiPicker/useEmojiPicker.ts +++ b/packages/emoji/src/utils/EmojiPicker/useEmojiPicker.ts @@ -1,11 +1,4 @@ -import { - createRef, - MutableRefObject, - RefObject, - useCallback, - useEffect, - useRef, -} from 'react'; +import React from 'react'; import { useEditorRef } from '@udecode/plate-common'; import { i18n } from '../../constants'; @@ -24,9 +17,9 @@ import { import { AIndexSearch } from '../IndexSearch/index'; import { EmojiPickerState, MapEmojiCategoryList } from './EmojiPickerState'; -export type MutableRefs = MutableRefObject<{ - contentRoot: RefObject | undefined; - content: RefObject | undefined; +export type MutableRefs = React.MutableRefObject<{ + contentRoot: React.RefObject | undefined; + content: React.RefObject | undefined; }>; export type UseEmojiPickerProps = { @@ -68,12 +61,12 @@ export const useEmojiPicker = ({ const editor = useEditorRef(); const [state, dispatch] = EmojiPickerState(); - const refs = useRef({ - contentRoot: createRef(), - content: createRef(), + const refs = React.useRef({ + contentRoot: React.createRef(), + content: React.createRef(), }); - const setIsOpen = useCallback( + const setIsOpen = React.useCallback( (isOpen: boolean) => { dispatch({ type: isOpen ? 'SET_OPEN' : 'SET_CLOSE', @@ -83,7 +76,7 @@ export const useEmojiPicker = ({ ); const setFocusedAndVisibleSections = - useCallback( + React.useCallback( (visibleSections, categoryId) => { dispatch({ type: 'SET_FOCUSED_AND_VISIBLE_CATEGORIES', @@ -96,7 +89,7 @@ export const useEmojiPicker = ({ [dispatch] ); - const handleSearchInput = useCallback( + const handleSearchInput = React.useCallback( (input: string) => { const value = String(input).replaceAll(/\s/g, ''); if (!value && !input) { @@ -118,25 +111,25 @@ export const useEmojiPicker = ({ [dispatch, indexSearch] ); - const setSearch = useCallback( + const setSearch = React.useCallback( (value: string) => { value ? handleSearchInput(value) : dispatch({ type: 'CLEAR_SEARCH' }); }, [dispatch, handleSearchInput] ); - const clearSearch = useCallback(() => { + const clearSearch = React.useCallback(() => { dispatch({ type: 'CLEAR_SEARCH' }); }, [dispatch]); - const onMouseOver = useCallback( + const onMouseOver = React.useCallback( (emoji?: Emoji) => { dispatch({ type: 'SET_EMOJI', payload: { emoji } }); }, [dispatch] ); - const updateFrequentEmojis = useCallback( + const updateFrequentEmojis = React.useCallback( (emojiId: string) => { emojiLibrary.updateFrequentCategory(emojiId); @@ -151,7 +144,7 @@ export const useEmojiPicker = ({ [closeOnSelect, dispatch, emojiLibrary, state.isOpen] ); - const onSelectEmoji = useCallback( + const onSelectEmoji = React.useCallback( (emoji: Emoji) => { const selectItem = getEmojiOnInsert(); selectItem(editor, { @@ -170,7 +163,7 @@ export const useEmojiPicker = ({ [editor, updateFrequentEmojis] ); - const handleCategoryClick = useCallback( + const handleCategoryClick = React.useCallback( (categoryId: EmojiCategoryList) => { dispatch({ type: 'SET_FOCUSED_CATEGORY', @@ -204,7 +197,7 @@ export const useEmojiPicker = ({ [dispatch, emojiLibrary] ); - useEffect(() => { + React.useEffect(() => { if (state.isOpen && !state.isSearching) { // Timeout to allow the category element refs to populate setTimeout(() => { diff --git a/packages/excalidraw/src/hooks/useExcalidrawElement.ts b/packages/excalidraw/src/hooks/useExcalidrawElement.ts index 35a4ebdf22..940c5f35ac 100644 --- a/packages/excalidraw/src/hooks/useExcalidrawElement.ts +++ b/packages/excalidraw/src/hooks/useExcalidrawElement.ts @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import React from 'react'; import { ExcalidrawImperativeAPI, LibraryItems, @@ -15,14 +15,14 @@ export const useExcalidrawElement = ({ scrollToContent?: boolean; libraryItems?: LibraryItems; }) => { - const [Excalidraw, setExcalidraw] = useState(null); - useEffect(() => { + const [Excalidraw, setExcalidraw] = React.useState(null); + React.useEffect(() => { import('@excalidraw/excalidraw').then((comp) => setExcalidraw(comp.Excalidraw) ); }); - const _excalidrawRef = useRef(null); + const _excalidrawRef = React.useRef(null); // const editor = useEditorRef(); diff --git a/packages/floating/src/hooks/useFloatingToolbar.ts b/packages/floating/src/hooks/useFloatingToolbar.ts index ebb464d311..5c021d06ab 100644 --- a/packages/floating/src/hooks/useFloatingToolbar.ts +++ b/packages/floating/src/hooks/useFloatingToolbar.ts @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import React from 'react'; import { getSelectionText, isSelectionExpanded, @@ -33,9 +33,9 @@ export const useFloatingToolbarState = ({ const focusedEditorId = useEventEditorSelectors.focus(); const focused = useFocused(); - const [open, setOpen] = useState(false); + const [open, setOpen] = React.useState(false); const [waitForCollapsedSelection, setWaitForCollapsedSelection] = - useState(false); + React.useState(false); const floating = useVirtualFloating( mergeProps( @@ -80,7 +80,7 @@ export const useFloatingToolbar = ({ }: ReturnType) => { // On refocus, the editor keeps the previous selection, // so we need to wait it's collapsed at the new position before displaying the floating toolbar. - useEffect(() => { + React.useEffect(() => { if (!focused || ignoreReadOnly) { setWaitForCollapsedSelection(true); } @@ -95,7 +95,7 @@ export const useFloatingToolbar = ({ setWaitForCollapsedSelection, ]); - useEffect(() => { + React.useEffect(() => { if ( !selectionExpanded || !selectionText || @@ -124,7 +124,7 @@ export const useFloatingToolbar = ({ const selectionTextLength = selectionText?.length ?? 0; - useEffect(() => { + React.useEffect(() => { if (selectionTextLength > 0) { update?.(); } diff --git a/packages/floating/src/hooks/useVirtualFloating.ts b/packages/floating/src/hooks/useVirtualFloating.ts index 26bffe03f1..0b924b7dda 100644 --- a/packages/floating/src/hooks/useVirtualFloating.ts +++ b/packages/floating/src/hooks/useVirtualFloating.ts @@ -1,4 +1,4 @@ -import { CSSProperties, MutableRefObject, useRef, useState } from 'react'; +import React from 'react'; import { ClientRectObject } from '@floating-ui/core'; import { useIsomorphicLayoutEffect } from '@udecode/plate-common'; @@ -21,8 +21,8 @@ export interface UseVirtualFloatingOptions extends Partial { export interface UseVirtualFloatingReturn< RT extends ReferenceType = ReferenceType, > extends UseFloatingReturn { - virtualElementRef: MutableRefObject; - style: CSSProperties; + virtualElementRef: React.MutableRefObject; + style: React.CSSProperties; } /** @@ -46,8 +46,8 @@ export const useVirtualFloating = ({ getBoundingClientRect = getSelectionBoundingClientRect, ...floatingOptions }: UseVirtualFloatingOptions): UseVirtualFloatingReturn => { - const virtualElementRef = useRef(createVirtualElement() as RT); - const [visible, setVisible] = useState(true); + const virtualElementRef = React.useRef(createVirtualElement() as RT); + const [visible, setVisible] = React.useState(true); const floatingResult = useFloating({ // update on scroll and resize diff --git a/packages/floating/src/utils/createVirtualRef.ts b/packages/floating/src/utils/createVirtualRef.ts index 391c58e1fb..446d342bef 100644 --- a/packages/floating/src/utils/createVirtualRef.ts +++ b/packages/floating/src/utils/createVirtualRef.ts @@ -1,10 +1,12 @@ -import { RefObject } from 'react'; +import React from 'react'; import { TReactEditor, Value } from '@udecode/plate-common'; import { Location } from 'slate'; import { getBoundingClientRect } from './getBoundingClientRect'; -export type VirtualRef = RefObject>; +export type VirtualRef = React.RefObject< + Pick +>; export const createVirtualRef = ( editor: TReactEditor, diff --git a/packages/font/src/hooks/useColorDropdownMenu.ts b/packages/font/src/hooks/useColorDropdownMenu.ts index 30cf032468..537f5e9e86 100644 --- a/packages/font/src/hooks/useColorDropdownMenu.ts +++ b/packages/font/src/hooks/useColorDropdownMenu.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useState } from 'react'; +import React from 'react'; import { focusEditor, getMark, @@ -34,17 +34,17 @@ export const useColorDropdownMenuState = ({ [nodeType] ); - const [selectedColor, setSelectedColor] = useState(); + const [selectedColor, setSelectedColor] = React.useState(); - const [open, setOpen] = useState(false); - const onToggle = useCallback( + const [open, setOpen] = React.useState(false); + const onToggle = React.useCallback( (value = !open) => { setOpen(value); }, [open, setOpen] ); - const updateColor = useCallback( + const updateColor = React.useCallback( (value: string) => { if (editor.selection) { setSelectedColor(value); @@ -58,7 +58,7 @@ export const useColorDropdownMenuState = ({ [editor, nodeType] ); - const updateColorAndClose = useCallback( + const updateColorAndClose = React.useCallback( (value: string) => { updateColor(value); closeOnSelect && onToggle(); @@ -66,7 +66,7 @@ export const useColorDropdownMenuState = ({ [closeOnSelect, onToggle, updateColor] ); - const clearColor = useCallback(() => { + const clearColor = React.useCallback(() => { if (editor.selection) { select(editor, editor.selection); focusEditor(editor); @@ -79,7 +79,7 @@ export const useColorDropdownMenuState = ({ } }, [editor, selectedColor, closeOnSelect, onToggle, nodeType]); - useEffect(() => { + React.useEffect(() => { if (selectionDefined) { setSelectedColor(color); } diff --git a/packages/font/src/hooks/useColorInput.ts b/packages/font/src/hooks/useColorInput.ts index 720e8a3a33..adaa775ee0 100644 --- a/packages/font/src/hooks/useColorInput.ts +++ b/packages/font/src/hooks/useColorInput.ts @@ -1,7 +1,7 @@ -import { useRef } from 'react'; +import React from 'react'; export const useColorInput = () => { - const ref = useRef(null); + const ref = React.useRef(null); const onClick = () => { // force click action on the input to open color picker diff --git a/packages/font/src/hooks/useColorsCustom.ts b/packages/font/src/hooks/useColorsCustom.ts index cbaf904576..5f76fb54e1 100644 --- a/packages/font/src/hooks/useColorsCustom.ts +++ b/packages/font/src/hooks/useColorsCustom.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect, useMemo, useState } from 'react'; +import React from 'react'; import debounce from 'lodash/debounce.js'; export const useColorsCustomState = ({ @@ -12,11 +12,11 @@ export const useColorsCustomState = ({ customColors: any[]; updateCustomColor: (color: string) => void; }) => { - const [customColor, setCustomColor] = useState(); + const [customColor, setCustomColor] = React.useState(); - const [value, setValue] = useState(color || '#000000'); + const [value, setValue] = React.useState(color || '#000000'); - useEffect(() => { + React.useEffect(() => { if ( !color || customColors.some((c) => c.value === color) || @@ -28,7 +28,7 @@ export const useColorsCustomState = ({ setCustomColor(color); }, [color, colors, customColors]); - const computedColors = useMemo( + const computedColors = React.useMemo( () => customColor ? [ @@ -57,7 +57,7 @@ export const useColorsCustom = ({ setValue, }: ReturnType) => { // eslint-disable-next-line react-hooks/exhaustive-deps - const updateCustomColorDebounced = useCallback( + const updateCustomColorDebounced = React.useCallback( debounce(updateCustomColor, 100), [updateCustomColor] ); diff --git a/packages/indent-list/src/injectIndentListComponent.tsx b/packages/indent-list/src/injectIndentListComponent.tsx index 14830c5a2c..cb26bfd15c 100644 --- a/packages/indent-list/src/injectIndentListComponent.tsx +++ b/packages/indent-list/src/injectIndentListComponent.tsx @@ -1,9 +1,9 @@ -import React, { CSSProperties } from 'react'; +import React from 'react'; import { InjectComponentProps, InjectComponentReturnType, } from '@udecode/plate-common'; -import clsx from 'clsx'; +import { clsx } from 'clsx'; import { KEY_LIST_START, KEY_LIST_STYLE_TYPE } from './createIndentListPlugin'; import { ListStyleType } from './types'; @@ -18,7 +18,7 @@ export const injectIndentListComponent = ( if (listStyleType) { let className = clsx(`slate-${KEY_LIST_STYLE_TYPE}-${listStyleType}`); - const style: CSSProperties = { + const style: React.CSSProperties = { padding: 0, margin: 0, listStyleType, diff --git a/packages/link/src/components/FloatingLink/FloatingLinkNewTabInput.tsx b/packages/link/src/components/FloatingLink/FloatingLinkNewTabInput.tsx index 4dbc3c4d38..27db73d576 100644 --- a/packages/link/src/components/FloatingLink/FloatingLinkNewTabInput.tsx +++ b/packages/link/src/components/FloatingLink/FloatingLinkNewTabInput.tsx @@ -1,10 +1,4 @@ -import { - ChangeEventHandler, - useCallback, - useEffect, - useRef, - useState, -} from 'react'; +import React from 'react'; import { createPrimitiveComponent } from '@udecode/plate-common'; import { @@ -15,12 +9,12 @@ import { export const useFloatingLinkNewTabInputState = () => { const updated = useFloatingLinkSelectors().updated(); - const ref = useRef(null); - const [checked, setChecked] = useState( + const ref = React.useRef(null); + const [checked, setChecked] = React.useState( floatingLinkSelectors.newTab() ); - useEffect(() => { + React.useEffect(() => { if (ref.current && updated) { setTimeout(() => { ref.current?.focus(); @@ -40,13 +34,14 @@ export const useFloatingLinkNewTabInput = ({ ref, setChecked, }: ReturnType) => { - const onChange: ChangeEventHandler = useCallback( - (e) => { - setChecked(e.target.checked); - floatingLinkActions.newTab(e.target.checked); - }, - [setChecked] - ); + const onChange: React.ChangeEventHandler = + React.useCallback( + (e) => { + setChecked(e.target.checked); + floatingLinkActions.newTab(e.target.checked); + }, + [setChecked] + ); return { ref, diff --git a/packages/link/src/components/FloatingLink/FloatingLinkUrlInput.tsx b/packages/link/src/components/FloatingLink/FloatingLinkUrlInput.tsx index 5f95be810a..de956218ad 100644 --- a/packages/link/src/components/FloatingLink/FloatingLinkUrlInput.tsx +++ b/packages/link/src/components/FloatingLink/FloatingLinkUrlInput.tsx @@ -1,4 +1,4 @@ -import { ChangeEventHandler, useCallback, useEffect, useRef } from 'react'; +import React from 'react'; import { createPrimitiveComponent } from '@udecode/plate-common'; import { @@ -9,9 +9,9 @@ import { export const useFloatingLinkUrlInputState = () => { const updated = useFloatingLinkSelectors().updated(); - const ref = useRef(null); + const ref = React.useRef(null); - useEffect(() => { + React.useEffect(() => { if (ref.current && updated) { setTimeout(() => { ref.current?.focus(); @@ -27,9 +27,10 @@ export const useFloatingLinkUrlInputState = () => { export const useFloatingLinkUrlInput = ( state: ReturnType ) => { - const onChange: ChangeEventHandler = useCallback((e) => { - floatingLinkActions.url(e.target.value); - }, []); + const onChange: React.ChangeEventHandler = + React.useCallback((e) => { + floatingLinkActions.url(e.target.value); + }, []); return { ref: state.ref, diff --git a/packages/link/src/components/FloatingLink/LinkOpenButton.tsx b/packages/link/src/components/FloatingLink/LinkOpenButton.tsx index de5b57dadb..18557f0223 100644 --- a/packages/link/src/components/FloatingLink/LinkOpenButton.tsx +++ b/packages/link/src/components/FloatingLink/LinkOpenButton.tsx @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import React from 'react'; import { createPrimitiveComponent, findNode, @@ -15,7 +15,7 @@ export const useLinkOpenButtonState = () => { const editor = useEditorRef(); const selection = useEditorSelection(); - const entry = useMemo( + const entry = React.useMemo( () => findNode(editor, { match: { type: getPluginType(editor, ELEMENT_LINK) }, diff --git a/packages/link/src/components/FloatingLink/useFloatingLinkEdit.ts b/packages/link/src/components/FloatingLink/useFloatingLinkEdit.ts index 38f14097f9..d50a40796f 100644 --- a/packages/link/src/components/FloatingLink/useFloatingLinkEdit.ts +++ b/packages/link/src/components/FloatingLink/useFloatingLinkEdit.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect } from 'react'; +import React from 'react'; import { getAboveNode, getEndPoint, @@ -42,7 +42,7 @@ export const useFloatingLinkEditState = ({ const mode = useFloatingLinkSelectors().mode(); const open = useFloatingLinkSelectors().isOpen(editor.id); - const getBoundingClientRect = useCallback(() => { + const getBoundingClientRect = React.useCallback(() => { const entry = getAboveNode(editor, { match: { type: getPluginType(editor, ELEMENT_LINK) }, }); @@ -86,7 +86,7 @@ export const useFloatingLinkEdit = ({ isOpen, readOnly, }: ReturnType) => { - useEffect(() => { + React.useEffect(() => { if ( editor.selection && someNode(editor, { diff --git a/packages/link/src/components/FloatingLink/useFloatingLinkInsert.ts b/packages/link/src/components/FloatingLink/useFloatingLinkInsert.ts index 3b5cc877c2..10f15ccb6c 100644 --- a/packages/link/src/components/FloatingLink/useFloatingLinkInsert.ts +++ b/packages/link/src/components/FloatingLink/useFloatingLinkInsert.ts @@ -1,4 +1,4 @@ -import { ChangeEventHandler, useCallback, useEffect } from 'react'; +import React from 'react'; import { focusEditor, getPluginOptions, @@ -67,9 +67,10 @@ export const useFloatingLinkInsert = ({ isOpen, readOnly, }: ReturnType) => { - const onChange: ChangeEventHandler = useCallback((e) => { - floatingLinkActions.text(e.target.value); - }, []); + const onChange: React.ChangeEventHandler = + React.useCallback((e) => { + floatingLinkActions.text(e.target.value); + }, []); const ref = useOnClickOutside( () => { @@ -84,7 +85,7 @@ export const useFloatingLinkInsert = ({ ); // wait for update before focusing input - useEffect(() => { + React.useEffect(() => { if (isOpen) { floating.update(); floatingLinkActions.updated(true); diff --git a/packages/link/src/createLinkPlugin.ts b/packages/link/src/createLinkPlugin.ts index fc5196ce14..c1c8c8f694 100644 --- a/packages/link/src/createLinkPlugin.ts +++ b/packages/link/src/createLinkPlugin.ts @@ -1,4 +1,3 @@ -import { AnchorHTMLAttributes } from 'react'; import { createPluginFactory, isUrl, @@ -47,7 +46,7 @@ export interface LinkPlugin { * Default HTML attributes for link elements. * @default {} */ - defaultLinkAttributes?: AnchorHTMLAttributes; + defaultLinkAttributes?: React.AnchorHTMLAttributes; /** * Keeps selected text on pasting links by default. diff --git a/packages/media/src/media/FloatingMedia/FloatingMediaEditButton.tsx b/packages/media/src/media/FloatingMedia/FloatingMediaEditButton.tsx index f7f18c20c8..2458a0dda6 100644 --- a/packages/media/src/media/FloatingMedia/FloatingMediaEditButton.tsx +++ b/packages/media/src/media/FloatingMedia/FloatingMediaEditButton.tsx @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import React from 'react'; import { createPrimitiveComponent, useElement } from '@udecode/plate-common'; import { TMediaElement } from '../types'; @@ -9,7 +9,7 @@ export const useFloatingMediaEditButton = () => { return { props: { - onClick: useCallback(() => { + onClick: React.useCallback(() => { floatingMediaActions.url(element.url); floatingMediaActions.isEditing(true); }, [element.url]), diff --git a/packages/media/src/media/FloatingMedia/FloatingMediaUrlInput.tsx b/packages/media/src/media/FloatingMedia/FloatingMediaUrlInput.tsx index f43310c2c2..5fba210aee 100644 --- a/packages/media/src/media/FloatingMedia/FloatingMediaUrlInput.tsx +++ b/packages/media/src/media/FloatingMedia/FloatingMediaUrlInput.tsx @@ -1,4 +1,4 @@ -import { ChangeEventHandler, useCallback } from 'react'; +import React from 'react'; import { createPrimitiveComponent, focusEditor, @@ -58,9 +58,10 @@ export const useFloatingMediaUrlInputState = ({ export const useFloatingMediaUrlInput = ({ defaultValue, }: ReturnType) => { - const onChange: ChangeEventHandler = useCallback((e) => { - floatingMediaActions.url(e.target.value); - }, []); + const onChange: React.ChangeEventHandler = + React.useCallback((e) => { + floatingMediaActions.url(e.target.value); + }, []); return { props: { diff --git a/packages/media/src/media/useMediaState.ts b/packages/media/src/media/useMediaState.ts index 2c6bac5a53..4265b827c8 100644 --- a/packages/media/src/media/useMediaState.ts +++ b/packages/media/src/media/useMediaState.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import React from 'react'; import { useElement } from '@udecode/plate-common'; import { useFocused, useReadOnly, useSelected } from 'slate-react'; @@ -25,7 +25,7 @@ export const useMediaState = ({ const { url, align } = element; - const embed = useMemo(() => { + const embed = React.useMemo(() => { if (!urlParsers) return; for (const parser of urlParsers) { diff --git a/packages/mention/src/handlers/KeyboardEventHandler.ts b/packages/mention/src/handlers/KeyboardEventHandler.ts index 4089f45626..813d186ce7 100644 --- a/packages/mention/src/handlers/KeyboardEventHandler.ts +++ b/packages/mention/src/handlers/KeyboardEventHandler.ts @@ -1,5 +1,7 @@ -import { KeyboardEvent } from 'react'; +import React from 'react'; import { HandlerReturnType } from '@udecode/plate-common'; // TODO: move to core -export type KeyboardEventHandler = (event: KeyboardEvent) => HandlerReturnType; +export type KeyboardEventHandler = ( + event: React.KeyboardEvent +) => HandlerReturnType; diff --git a/packages/plate-utils/README.md b/packages/plate-utils/README.md index d94d4aeaaa..c828d8c3e8 100644 --- a/packages/plate-utils/README.md +++ b/packages/plate-utils/README.md @@ -2,7 +2,7 @@ ## Documentation -WIP +Visit https://platejs.org/docs/api/utils to view the documentation. ## License diff --git a/packages/plate-utils/package.json b/packages/plate-utils/package.json index 1c1a39c937..f1d629252c 100644 --- a/packages/plate-utils/package.json +++ b/packages/plate-utils/package.json @@ -39,8 +39,8 @@ "typecheck": "yarn p:typecheck" }, "dependencies": { - "@radix-ui/react-slot": "^1.0.2", "@udecode/plate-core": "28.0.0", + "@udecode/react-utils": "24.3.0", "@udecode/slate": "25.0.0", "@udecode/slate-react": "25.0.0", "@udecode/slate-utils": "25.0.0", diff --git a/packages/plate-utils/src/components/PlateElement.tsx b/packages/plate-utils/src/PlateElement.tsx similarity index 86% rename from packages/plate-utils/src/components/PlateElement.tsx rename to packages/plate-utils/src/PlateElement.tsx index b60b6ada4a..8c657ca175 100644 --- a/packages/plate-utils/src/components/PlateElement.tsx +++ b/packages/plate-utils/src/PlateElement.tsx @@ -1,10 +1,9 @@ -import React, { ReactElement, RefAttributes } from 'react'; +import React from 'react'; import { PlateRenderElementProps } from '@udecode/plate-core'; +import { Box, BoxProps, useComposedRef } from '@udecode/react-utils'; import { EElement, TElement, Value } from '@udecode/slate'; import { clsx } from 'clsx'; -import { Box, BoxProps, useComposedRef } from '..'; - export type PlateElementProps< V extends Value = Value, N extends TElement = EElement, @@ -53,8 +52,8 @@ const PlateElement = React.forwardRef( return ; } ) as (>( - props: PlateElementProps & RefAttributes -) => ReactElement) & { displayName?: string }; + props: PlateElementProps & React.RefAttributes +) => React.ReactElement) & { displayName?: string }; PlateElement.displayName = 'PlateElement'; export { PlateElement }; diff --git a/packages/plate-utils/src/components/PlateLeaf.tsx b/packages/plate-utils/src/PlateLeaf.tsx similarity index 87% rename from packages/plate-utils/src/components/PlateLeaf.tsx rename to packages/plate-utils/src/PlateLeaf.tsx index a2ac8a9a34..98dc2a5008 100644 --- a/packages/plate-utils/src/components/PlateLeaf.tsx +++ b/packages/plate-utils/src/PlateLeaf.tsx @@ -1,10 +1,9 @@ -import React, { ReactElement, RefAttributes } from 'react'; +import React from 'react'; import { PlateRenderLeafProps } from '@udecode/plate-core'; +import { Text, TextProps, useComposedRef } from '@udecode/react-utils'; import { EText, TText, Value } from '@udecode/slate'; import { clsx } from 'clsx'; -import { Text, TextProps, useComposedRef } from '..'; - export type PlateLeafProps< V extends Value = Value, N extends TText = EText, @@ -53,7 +52,8 @@ const PlateLeaf = React.forwardRef( ) as (>({ className, ...props -}: PlateLeafProps & RefAttributes) => ReactElement) & { +}: PlateLeafProps & + React.RefAttributes) => React.ReactElement) & { displayName?: string; }; PlateLeaf.displayName = 'PlateLeaf'; diff --git a/packages/plate-utils/src/components/Box.tsx b/packages/plate-utils/src/components/Box.tsx deleted file mode 100644 index 049b591a96..0000000000 --- a/packages/plate-utils/src/components/Box.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { ComponentPropsWithRef } from 'react'; - -import { createSlotComponent } from '../utils/createSlotComponent'; - -export const Box = createSlotComponent('div'); - -export type BoxProps = ComponentPropsWithRef; diff --git a/packages/plate-utils/src/components/Text.tsx b/packages/plate-utils/src/components/Text.tsx deleted file mode 100644 index 19c965e3bd..0000000000 --- a/packages/plate-utils/src/components/Text.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { ComponentPropsWithRef } from 'react'; - -import { createSlotComponent } from '../utils'; - -export const Text = createSlotComponent('span'); - -export type TextProps = ComponentPropsWithRef; diff --git a/packages/plate-utils/src/components/index.ts b/packages/plate-utils/src/components/index.ts deleted file mode 100644 index 64a9d8d3cd..0000000000 --- a/packages/plate-utils/src/components/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/** - * @file Automatically generated by barrelsby. - */ - -export * from './Box'; -export * from './PlateElement'; -export * from './PlateLeaf'; -export * from './PortalBody'; -export * from './Text'; diff --git a/packages/plate-utils/src/utils/createNodeHOC.tsx b/packages/plate-utils/src/createNodeHOC.tsx similarity index 77% rename from packages/plate-utils/src/utils/createNodeHOC.tsx rename to packages/plate-utils/src/createNodeHOC.tsx index 258a6a5fe1..37d7c42b29 100644 --- a/packages/plate-utils/src/utils/createNodeHOC.tsx +++ b/packages/plate-utils/src/createNodeHOC.tsx @@ -1,9 +1,9 @@ -import React, { FunctionComponent } from 'react'; +import React from 'react'; import { PlateRenderElementProps } from '@udecode/plate-core'; import { Value } from '@udecode/slate'; export const createNodeHOC = - (HOC: FunctionComponent) => + (HOC: React.FC) => (Component: any, props: T) => function hoc(childrenProps: PlateRenderElementProps) { return ( diff --git a/packages/plate-utils/src/utils/createNodesHOC.tsx b/packages/plate-utils/src/createNodesHOC.tsx similarity index 92% rename from packages/plate-utils/src/utils/createNodesHOC.tsx rename to packages/plate-utils/src/createNodesHOC.tsx index e64f44b8d9..6c3c3f5eba 100644 --- a/packages/plate-utils/src/utils/createNodesHOC.tsx +++ b/packages/plate-utils/src/createNodesHOC.tsx @@ -1,4 +1,3 @@ -import { FunctionComponent } from 'react'; import { AnyObject } from '@udecode/utils'; import castArray from 'lodash/castArray.js'; import merge from 'lodash/merge.js'; @@ -49,7 +48,7 @@ const createHOC = (withHOC: any) => { /** * Create components HOC by plugin key. */ -export const createNodesHOC = (HOC: FunctionComponent) => { +export const createNodesHOC = (HOC: React.FC) => { return createHOC(createNodeHOC(HOC)); }; diff --git a/packages/plate-utils/src/utils/defaultsDeepToNodes.ts b/packages/plate-utils/src/defaultsDeepToNodes.ts similarity index 100% rename from packages/plate-utils/src/utils/defaultsDeepToNodes.ts rename to packages/plate-utils/src/defaultsDeepToNodes.ts diff --git a/packages/plate-utils/src/hooks/index.ts b/packages/plate-utils/src/hooks/index.ts deleted file mode 100644 index e54784819e..0000000000 --- a/packages/plate-utils/src/hooks/index.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * @file Automatically generated by barrelsby. - */ - -export * from './useComposedRef'; -export * from './useMarkToolbarButton'; -export * from './useOnClickOutside'; -export * from './usePlaceholder'; -export * from './useRemoveNodeButton'; -export * from './useStableMemo'; diff --git a/packages/plate-utils/src/index.ts b/packages/plate-utils/src/index.ts index b87bd31235..690eaebde9 100644 --- a/packages/plate-utils/src/index.ts +++ b/packages/plate-utils/src/index.ts @@ -2,10 +2,16 @@ * @file Automatically generated by barrelsby. */ -export * from './components/index'; -export * from './hooks/index'; -export * from './plate/index'; -export * from './queries/index'; -export * from './transforms/index'; +export * from './PlateElement'; +export * from './PlateLeaf'; +export * from './createNodeHOC'; +export * from './createNodesHOC'; +export * from './defaultsDeepToNodes'; +export * from './isType'; +export * from './onKeyDownToggleElement'; +export * from './onKeyDownToggleMark'; +export * from './selectEditor'; +export * from './useMarkToolbarButton'; +export * from './usePlaceholder'; +export * from './useRemoveNodeButton'; export * from './types/index'; -export * from './utils/index'; diff --git a/packages/plate-utils/src/queries/isType.ts b/packages/plate-utils/src/isType.ts similarity index 100% rename from packages/plate-utils/src/queries/isType.ts rename to packages/plate-utils/src/isType.ts diff --git a/packages/plate-utils/src/plate/onKeyDownToggleElement.ts b/packages/plate-utils/src/onKeyDownToggleElement.ts similarity index 100% rename from packages/plate-utils/src/plate/onKeyDownToggleElement.ts rename to packages/plate-utils/src/onKeyDownToggleElement.ts diff --git a/packages/plate-utils/src/plate/onKeyDownToggleMark.ts b/packages/plate-utils/src/onKeyDownToggleMark.ts similarity index 100% rename from packages/plate-utils/src/plate/onKeyDownToggleMark.ts rename to packages/plate-utils/src/onKeyDownToggleMark.ts diff --git a/packages/plate-utils/src/plate/index.ts b/packages/plate-utils/src/plate/index.ts deleted file mode 100644 index 0b2dc12569..0000000000 --- a/packages/plate-utils/src/plate/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -/** - * @file Automatically generated by barrelsby. - */ - -export * from './onKeyDownToggleElement'; -export * from './onKeyDownToggleMark'; diff --git a/packages/plate-utils/src/queries/index.ts b/packages/plate-utils/src/queries/index.ts deleted file mode 100644 index 2af38fce83..0000000000 --- a/packages/plate-utils/src/queries/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -/** - * @file Automatically generated by barrelsby. - */ - -export * from './isType'; diff --git a/packages/plate-utils/src/transforms/selectEditor.spec.tsx b/packages/plate-utils/src/selectEditor.spec.tsx similarity index 100% rename from packages/plate-utils/src/transforms/selectEditor.spec.tsx rename to packages/plate-utils/src/selectEditor.spec.tsx diff --git a/packages/plate-utils/src/transforms/selectEditor.ts b/packages/plate-utils/src/selectEditor.ts similarity index 100% rename from packages/plate-utils/src/transforms/selectEditor.ts rename to packages/plate-utils/src/selectEditor.ts diff --git a/packages/plate-utils/src/transforms/index.ts b/packages/plate-utils/src/transforms/index.ts deleted file mode 100644 index b45445b42a..0000000000 --- a/packages/plate-utils/src/transforms/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -/** - * @file Automatically generated by barrelsby. - */ - -export * from './selectEditor'; diff --git a/packages/plate-utils/src/hooks/useMarkToolbarButton.ts b/packages/plate-utils/src/useMarkToolbarButton.ts similarity index 100% rename from packages/plate-utils/src/hooks/useMarkToolbarButton.ts rename to packages/plate-utils/src/useMarkToolbarButton.ts diff --git a/packages/plate-utils/src/hooks/usePlaceholder.ts b/packages/plate-utils/src/usePlaceholder.ts similarity index 95% rename from packages/plate-utils/src/hooks/usePlaceholder.ts rename to packages/plate-utils/src/usePlaceholder.ts index 56af2aed99..ce56ce1c4c 100644 --- a/packages/plate-utils/src/hooks/usePlaceholder.ts +++ b/packages/plate-utils/src/usePlaceholder.ts @@ -8,7 +8,7 @@ import { import { findNodePath } from '@udecode/slate-react'; import { useFocused, useSelected } from 'slate-react'; -import { PlateElementProps } from '..'; +import { PlateElementProps } from './index'; export interface PlaceholderProps extends PlateElementProps { placeholder: string; diff --git a/packages/plate-utils/src/hooks/useRemoveNodeButton.ts b/packages/plate-utils/src/useRemoveNodeButton.ts similarity index 100% rename from packages/plate-utils/src/hooks/useRemoveNodeButton.ts rename to packages/plate-utils/src/useRemoveNodeButton.ts diff --git a/packages/plate-utils/src/utils/getRootProps.ts b/packages/plate-utils/src/utils/getRootProps.ts deleted file mode 100644 index fa12f8988c..0000000000 --- a/packages/plate-utils/src/utils/getRootProps.ts +++ /dev/null @@ -1,28 +0,0 @@ -/** - * Get Plate component root props. - */ -export const getRootProps = ( - props: T -): Omit< - T, - | 'editor' - | 'attributes' - | 'children' - | 'nodeProps' - | 'element' - | 'leaf' - | 'text' -> => { - const { - editor, - attributes, - children, - nodeProps, - element, - leaf, - text, - ...rootProps - } = props as any; - - return rootProps; -}; diff --git a/packages/plate-utils/src/utils/index.ts b/packages/plate-utils/src/utils/index.ts deleted file mode 100644 index c41e2ea2a1..0000000000 --- a/packages/plate-utils/src/utils/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -/** - * @file Automatically generated by barrelsby. - */ - -export * from './composeEventHandlers'; -export * from './createNodeHOC'; -export * from './createNodesHOC'; -export * from './createPrimitiveComponent'; -export * from './createSlotComponent'; -export * from './defaultsDeepToNodes'; -export * from './getRootProps'; -export * from './withProps'; -export * from './withProviders'; diff --git a/packages/plate-utils/src/utils/withProps.tsx b/packages/plate-utils/src/utils/withProps.tsx deleted file mode 100644 index d2305fa3d5..0000000000 --- a/packages/plate-utils/src/utils/withProps.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React, { FunctionComponent } from 'react'; - -/** - * HOC adding props. - */ -export const withProps: ( - Component: FunctionComponent, - props: Partial -) => FunctionComponent = (Component, props) => - function component(_props) { - return ; - }; diff --git a/packages/react-utils/.npmignore b/packages/react-utils/.npmignore new file mode 100644 index 0000000000..7d3b305b17 --- /dev/null +++ b/packages/react-utils/.npmignore @@ -0,0 +1,3 @@ +__tests__ +__test-utils__ +__mocks__ diff --git a/packages/react-utils/README.md b/packages/react-utils/README.md new file mode 100644 index 0000000000..7303eb37ff --- /dev/null +++ b/packages/react-utils/README.md @@ -0,0 +1,11 @@ +# Udecode React utils + +React utils used by the many packages of the Udecode ecosystem. + +## Documentation + +Visit https://platejs.org/docs/api/react-utils to view the documentation. + +## License + +[MIT](../../LICENSE) diff --git a/packages/react-utils/package.json b/packages/react-utils/package.json new file mode 100644 index 0000000000..bc42077b83 --- /dev/null +++ b/packages/react-utils/package.json @@ -0,0 +1,55 @@ +{ + "name": "@udecode/react-utils", + "version": "24.3.0", + "description": "Udecode React utils", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/udecode/plate.git", + "directory": "packages/react-utils" + }, + "bugs": { + "url": "https://github.com/udecode/plate/issues" + }, + "sideEffects": false, + "main": "dist/index.js", + "module": "dist/index.mjs", + "types": "dist/index.d.ts", + "files": [ + "dist/**/*" + ], + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.mjs", + "module": "./dist/index.mjs", + "require": "./dist/index.js" + } + }, + "scripts": { + "build": "yarn p:build", + "build:watch": "yarn p:build:watch", + "brl": "yarn p:brl", + "clean": "yarn p:clean", + "lint": "yarn p:lint", + "lint:fix": "yarn p:lint:fix", + "test": "yarn p:test", + "test:watch": "yarn p:test:watch", + "typecheck": "yarn p:typecheck" + }, + "dependencies": { + "@radix-ui/react-slot": "^1.0.2", + "@udecode/utils": "24.3.0", + "clsx": "^1.2.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + }, + "keywords": [ + "utils" + ], + "publishConfig": { + "access": "public" + } +} diff --git a/packages/react-utils/src/Box.tsx b/packages/react-utils/src/Box.tsx new file mode 100644 index 0000000000..bbdc61d9ac --- /dev/null +++ b/packages/react-utils/src/Box.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +import { createSlotComponent } from './createSlotComponent'; + +export const Box = createSlotComponent('div'); + +export type BoxProps = React.ComponentPropsWithRef; diff --git a/packages/plate-utils/src/components/PortalBody.tsx b/packages/react-utils/src/PortalBody.tsx similarity index 67% rename from packages/plate-utils/src/components/PortalBody.tsx rename to packages/react-utils/src/PortalBody.tsx index 08c15724b3..1c62d4c0ec 100644 --- a/packages/plate-utils/src/components/PortalBody.tsx +++ b/packages/react-utils/src/PortalBody.tsx @@ -1,12 +1,12 @@ -import React, { ReactNode, ReactPortal } from 'react'; +import React from 'react'; import ReactDOM from 'react-dom'; -export type PortalBodyProps = { children: ReactNode; element?: Element }; +export type PortalBodyProps = { children: React.ReactNode; element?: Element }; export const PortalBody: ({ children, element, -}: PortalBodyProps) => ReactPortal = ({ +}: PortalBodyProps) => React.ReactPortal = ({ children, element, }: PortalBodyProps) => { diff --git a/packages/react-utils/src/Text.tsx b/packages/react-utils/src/Text.tsx new file mode 100644 index 0000000000..c6429a429a --- /dev/null +++ b/packages/react-utils/src/Text.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +import { createSlotComponent } from './createSlotComponent'; + +export const Text = createSlotComponent('span'); + +export type TextProps = React.ComponentPropsWithRef; diff --git a/packages/plate-utils/src/utils/composeEventHandlers.ts b/packages/react-utils/src/composeEventHandlers.ts similarity index 100% rename from packages/plate-utils/src/utils/composeEventHandlers.ts rename to packages/react-utils/src/composeEventHandlers.ts diff --git a/packages/plate-utils/src/utils/createPrimitiveComponent.tsx b/packages/react-utils/src/createPrimitiveComponent.tsx similarity index 94% rename from packages/plate-utils/src/utils/createPrimitiveComponent.tsx rename to packages/react-utils/src/createPrimitiveComponent.tsx index ad265f3ce1..3a6207d156 100644 --- a/packages/plate-utils/src/utils/createPrimitiveComponent.tsx +++ b/packages/react-utils/src/createPrimitiveComponent.tsx @@ -1,11 +1,11 @@ /* eslint-disable react/display-name */ -import React, { CSSProperties } from 'react'; +import React from 'react'; import { isDefined } from '@udecode/utils'; import { clsx } from 'clsx'; -import { useComposedRef } from '../hooks'; import { createSlotComponent } from './createSlotComponent'; +import { useComposedRef } from './useComposedRef'; /** * Primitive component factory. It uses hooks for managing @@ -54,7 +54,7 @@ export const createPrimitiveComponent = < as?: React.ElementType; asChild?: boolean; className?: string; - style?: CSSProperties; + style?: React.CSSProperties; options?: Parameters[0]; state?: Parameters[0]; setProps?: (hookProps: NonNullable['props']>) => P; @@ -74,8 +74,8 @@ export const createPrimitiveComponent = < const state = isDefined(stateProp) ? stateProp : stateHook - ? stateHook(options as any) - : undefined; + ? stateHook(options as any) + : undefined; const { ref: hookRef, props: hookProps, diff --git a/packages/react-utils/src/createPrimitiveElement.tsx b/packages/react-utils/src/createPrimitiveElement.tsx new file mode 100644 index 0000000000..0339b68b08 --- /dev/null +++ b/packages/react-utils/src/createPrimitiveElement.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +export function createPrimitiveElement( + tag: T +) { + return React.forwardRef( + function CreateComponent(props, ref) { + return React.createElement(tag, { ...props, ref }); + } + ); +} diff --git a/packages/plate-utils/src/utils/createSlotComponent.tsx b/packages/react-utils/src/createSlotComponent.tsx similarity index 100% rename from packages/plate-utils/src/utils/createSlotComponent.tsx rename to packages/react-utils/src/createSlotComponent.tsx diff --git a/packages/react-utils/src/index.ts b/packages/react-utils/src/index.ts new file mode 100644 index 0000000000..f223c04585 --- /dev/null +++ b/packages/react-utils/src/index.ts @@ -0,0 +1,17 @@ +/** + * @file Automatically generated by barrelsby. + */ + +export * from './Box'; +export * from './PortalBody'; +export * from './Text'; +export * from './composeEventHandlers'; +export * from './createPrimitiveComponent'; +export * from './createPrimitiveElement'; +export * from './createSlotComponent'; +export * from './useComposedRef'; +export * from './useIsomorphicLayoutEffect'; +export * from './useOnClickOutside'; +export * from './useStableMemo'; +export * from './withProviders'; +export * from './withRef'; diff --git a/packages/plate-utils/src/hooks/useComposedRef.ts b/packages/react-utils/src/useComposedRef.ts similarity index 67% rename from packages/plate-utils/src/hooks/useComposedRef.ts rename to packages/react-utils/src/useComposedRef.ts index 2efff38fa8..43f7425fff 100644 --- a/packages/plate-utils/src/hooks/useComposedRef.ts +++ b/packages/react-utils/src/useComposedRef.ts @@ -1,22 +1,22 @@ -import { MutableRefObject, Ref, useCallback } from 'react'; +import React from 'react'; -type PossibleRef = Ref | undefined; +type PossibleRef = React.Ref | undefined; /** * Set a given ref to a given value - * This utility takes care of different types of refs: callback refs and RefObject(s) + * This utility takes care of different types of refs: callback refs and React.RefObject(s) */ const setRef = (ref: PossibleRef, value: T) => { if (typeof ref === 'function') { ref(value); } else if (ref !== null && ref !== undefined) { - (ref as MutableRefObject).current = value; + (ref as React.MutableRefObject).current = value; } }; /** * A utility to compose multiple refs together - * Accepts callback refs and RefObject(s) + * Accepts callback refs and React.RefObject(s) */ export const composeRefs = (...refs: PossibleRef[]) => @@ -25,9 +25,9 @@ export const composeRefs = /** * A custom hook that composes multiple refs - * Accepts callback refs and RefObject(s) + * Accepts callback refs and React.RefObject(s) */ export const useComposedRef = (...refs: PossibleRef[]) => { // eslint-disable-next-line react-hooks/exhaustive-deps - return useCallback(composeRefs(...refs), refs); + return React.useCallback(composeRefs(...refs), refs); }; diff --git a/packages/slate-react/src/hooks/useIsomorphicLayoutEffect.ts b/packages/react-utils/src/useIsomorphicLayoutEffect.ts similarity index 55% rename from packages/slate-react/src/hooks/useIsomorphicLayoutEffect.ts rename to packages/react-utils/src/useIsomorphicLayoutEffect.ts index 619622e1de..cb0a7e0726 100644 --- a/packages/slate-react/src/hooks/useIsomorphicLayoutEffect.ts +++ b/packages/react-utils/src/useIsomorphicLayoutEffect.ts @@ -1,4 +1,4 @@ -import { useEffect, useLayoutEffect } from 'react'; +import React from 'react'; export const CAN_USE_DOM = typeof window !== 'undefined' && @@ -6,8 +6,8 @@ export const CAN_USE_DOM = window.document.createElement !== undefined; /** - * Prevent warning on SSR by falling back to useEffect when DOM isn't available + * Prevent warning on SSR by falling back to React.useEffect when DOM isn't available */ export const useIsomorphicLayoutEffect = CAN_USE_DOM - ? useLayoutEffect - : useEffect; + ? React.useLayoutEffect + : React.useEffect; diff --git a/packages/plate-utils/src/hooks/useOnClickOutside.ts b/packages/react-utils/src/useOnClickOutside.ts similarity index 93% rename from packages/plate-utils/src/hooks/useOnClickOutside.ts rename to packages/react-utils/src/useOnClickOutside.ts index c53ce45a9e..e459cba287 100644 --- a/packages/plate-utils/src/hooks/useOnClickOutside.ts +++ b/packages/react-utils/src/useOnClickOutside.ts @@ -1,4 +1,4 @@ -import { RefObject, useCallback, useEffect, useRef, useState } from 'react'; +import React from 'react'; const canUsePassiveEvents = (): boolean => { if ( @@ -28,7 +28,7 @@ export interface UseOnClickOutsideCallback { (event: T): void; } type El = HTMLElement; -type Refs = RefObject[]; +type Refs = React.RefObject[]; export interface UseOnClickOutsideOptions { refs?: Refs; disabled?: boolean; @@ -80,16 +80,16 @@ export const useOnClickOutside = ( detectIFrame = true, }: UseOnClickOutsideOptions = {} ): UseOnClickOutsideReturn => { - const [refsState, setRefsState] = useState([]); - const callbackRef = useRef(callback); + const [refsState, setRefsState] = React.useState([]); + const callbackRef = React.useRef(callback); callbackRef.current = callback; - const ref: UseOnClickOutsideReturn = useCallback( + const ref: UseOnClickOutsideReturn = React.useCallback( (el) => setRefsState((prevState) => [...prevState, { current: el }]), [] ); - useEffect( + React.useEffect( () => { if (!refsOpt?.length && refsState.length === 0) return; diff --git a/packages/plate-utils/src/hooks/useStableMemo.ts b/packages/react-utils/src/useStableMemo.ts similarity index 52% rename from packages/plate-utils/src/hooks/useStableMemo.ts rename to packages/react-utils/src/useStableMemo.ts index 63f462c381..ca911644e1 100644 --- a/packages/plate-utils/src/hooks/useStableMemo.ts +++ b/packages/react-utils/src/useStableMemo.ts @@ -1,12 +1,12 @@ -import { DependencyList, useLayoutEffect, useState } from 'react'; +import React from 'react'; export const useStableMemo = ( producer: () => T, - deps?: DependencyList + deps?: React.DependencyList ): T => { - const [value, setValue] = useState(producer); + const [value, setValue] = React.useState(producer); - useLayoutEffect(() => { + React.useLayoutEffect(() => { setValue(producer); // eslint-disable-next-line react-hooks/exhaustive-deps }, deps); diff --git a/packages/plate-utils/src/utils/withProviders.tsx b/packages/react-utils/src/withProviders.tsx similarity index 84% rename from packages/plate-utils/src/utils/withProviders.tsx rename to packages/react-utils/src/withProviders.tsx index 1d27c7e5e1..8ca2d20c6f 100644 --- a/packages/plate-utils/src/utils/withProviders.tsx +++ b/packages/react-utils/src/withProviders.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent } from 'react'; +import React from 'react'; /** * Wrap a component into multiple providers. @@ -7,7 +7,7 @@ import React, { FunctionComponent } from 'react'; */ export const withProviders = (...providers: any[]) => - (WrappedComponent: FunctionComponent) => + (WrappedComponent: React.FC) => (props: T) => providers.reduceRight( (acc, prov) => { diff --git a/packages/react-utils/src/withRef.tsx b/packages/react-utils/src/withRef.tsx new file mode 100644 index 0000000000..25d0aec253 --- /dev/null +++ b/packages/react-utils/src/withRef.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +/** + * Shorter alternative to `React.forwardRef`. + * @generic1 Component type or element type + * @generic2 Extended prop types + */ +export function withRef< + T extends keyof HTMLElementTagNameMap | React.ComponentType, + E = {}, +>( + renderFunction: React.ForwardRefRenderFunction< + React.ElementRef, + React.ComponentPropsWithoutRef & E + > +) { + return React.forwardRef(renderFunction); +} diff --git a/packages/react-utils/tsconfig.json b/packages/react-utils/tsconfig.json new file mode 100644 index 0000000000..425481e027 --- /dev/null +++ b/packages/react-utils/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../config/tsconfig.build.json", + "compilerOptions": { + "declarationDir": "./dist", + "outDir": "./dist" + }, + "include": ["src"] +} diff --git a/packages/resizable/README.md b/packages/resizable/README.md index 9026733353..80d4d73353 100644 --- a/packages/resizable/README.md +++ b/packages/resizable/README.md @@ -1,9 +1,5 @@ # Resizable -## Documentation - -WIP - ## License [MIT](../../LICENSE) diff --git a/packages/resizable/src/components/Resizable.tsx b/packages/resizable/src/components/Resizable.tsx index ca2c48baf6..d7b6a9091d 100644 --- a/packages/resizable/src/components/Resizable.tsx +++ b/packages/resizable/src/components/Resizable.tsx @@ -1,10 +1,4 @@ -import React, { - CSSProperties, - HTMLAttributes, - useCallback, - useEffect, - useRef, -} from 'react'; +import React from 'react'; import { findNodePath, select, @@ -43,7 +37,7 @@ export const useResizableState = ({ const [width, setWidth] = useResizableStore().use.width(); - const setNodeWidth = useCallback( + const setNodeWidth = React.useCallback( (w: number) => { const path = findNodePath(editor, element!); if (!path) return; @@ -58,7 +52,7 @@ export const useResizableState = ({ [editor, element, nodeWidth] ); - useEffect(() => { + React.useEffect(() => { setWidth(nodeWidth); }, [nodeWidth, setWidth]); @@ -80,14 +74,14 @@ export const useResizable = ({ setWidth, width, }: ReturnType) => { - const wrapperRef = useRef(null); + const wrapperRef = React.useRef(null); return { wrapperRef, wrapperProps: { style: { position: 'relative', - } as CSSProperties, + } as React.CSSProperties, }, props: { style: { @@ -95,10 +89,10 @@ export const useResizable = ({ minWidth, maxWidth, position: 'relative', - } as CSSProperties, + } as React.CSSProperties, }, context: { - onResize: useCallback( + onResize: React.useCallback( ({ initialSize, delta, finished, direction }: ResizeEvent) => { const wrapperStaticWidth = wrapperRef.current!.offsetWidth; const deltaFactor = @@ -127,7 +121,7 @@ export const useResizable = ({ const Resizable = React.forwardRef< HTMLDivElement, - HTMLAttributes & { + React.HTMLAttributes & { options: ResizableOptions; } >(({ children, options, ...rest }, ref) => { diff --git a/packages/resizable/src/components/ResizeHandle.tsx b/packages/resizable/src/components/ResizeHandle.tsx index a2ea985db9..a164fc890b 100644 --- a/packages/resizable/src/components/ResizeHandle.tsx +++ b/packages/resizable/src/components/ResizeHandle.tsx @@ -1,9 +1,4 @@ -import React, { - MouseEventHandler, - TouchEventHandler, - useEffect, - useState, -} from 'react'; +import React from 'react'; import { createAtomStore, createPrimitiveComponent, @@ -30,8 +25,8 @@ export type ResizeHandleOptions = { direction?: ResizeDirection; initialSize?: number; onResize?: (event: ResizeEvent) => void; - onMouseDown?: MouseEventHandler; - onTouchStart?: TouchEventHandler; + onMouseDown?: React.MouseEventHandler; + onTouchStart?: React.TouchEventHandler; onHover?: () => void; onHoverEnd?: () => void; }; @@ -48,14 +43,14 @@ export const useResizeHandleState = ({ const onResizeStore = useResizeHandleStore().get.onResize(); const onResize = onResizeProp ?? onResizeStore; - const [isResizing, setIsResizing] = useState(false); - const [initialPosition, setInitialPosition] = useState(0); - const [initialSizeState, setInitialSize] = useState(0); + const [isResizing, setIsResizing] = React.useState(false); + const [initialPosition, setInitialPosition] = React.useState(0); + const [initialSizeState, setInitialSize] = React.useState(0); const initialSize = _initialSize ?? initialSizeState; const isHorizontal = direction === 'left' || direction === 'right'; - useEffect(() => { + React.useEffect(() => { if (!isResizing) return; const sendResizeEvent = ( @@ -134,7 +129,7 @@ export const useResizeHandle = ({ onHover, onHoverEnd, }: ReturnType) => { - const handleMouseDown: MouseEventHandler = (event) => { + const handleMouseDown: React.MouseEventHandler = (event) => { const { clientX, clientY } = event; setInitialPosition(isHorizontal ? clientX : clientY); @@ -146,7 +141,7 @@ export const useResizeHandle = ({ onMouseDown?.(event); }; - const handleTouchStart: TouchEventHandler = (event) => { + const handleTouchStart: React.TouchEventHandler = (event) => { const { touches } = event; const touch = touches[0]; const { clientX, clientY } = touch; diff --git a/packages/resizable/src/components/useResizableStore.ts b/packages/resizable/src/components/useResizableStore.ts index eef4a4a2c3..d0f26b093e 100644 --- a/packages/resizable/src/components/useResizableStore.ts +++ b/packages/resizable/src/components/useResizableStore.ts @@ -1,10 +1,10 @@ -import { CSSProperties } from 'react'; +import React from 'react'; import { createAtomStore } from '@udecode/plate-common'; export const { resizableStore, useResizableStore, ResizableProvider } = createAtomStore( { - width: 0 as CSSProperties['width'], + width: 0 as React.CSSProperties['width'], }, { name: 'resizable' } ); diff --git a/packages/selection/src/components/BlockSelectable.tsx b/packages/selection/src/components/BlockSelectable.tsx index 5c6fa89f79..88b6435177 100644 --- a/packages/selection/src/components/BlockSelectable.tsx +++ b/packages/selection/src/components/BlockSelectable.tsx @@ -1,4 +1,4 @@ -import React, { HTMLAttributes, useMemo } from 'react'; +import React from 'react'; import { findNodePath, getPluginOptions, @@ -27,7 +27,10 @@ export const useBlockSelectableState = ({ }: BlockSelectableOptions) => { const editor = useEditorRef(); - const path = useMemo(() => findNodePath(editor, element), [editor, element]); + const path = React.useMemo( + () => findNodePath(editor, element), + [editor, element] + ); if (!path || isInline(editor, element)) { return { @@ -84,7 +87,7 @@ export function BlockSelectable({ options, children, ...props -}: { options: BlockSelectableOptions } & HTMLAttributes) { +}: { options: BlockSelectableOptions } & React.HTMLAttributes) { const state = useBlockSelectableState(options); const { props: rootProps } = useBlockSelectable(state); diff --git a/packages/selection/src/components/SelectionArea.tsx b/packages/selection/src/components/SelectionArea.tsx index 38e6d977ab..a95601d950 100644 --- a/packages/selection/src/components/SelectionArea.tsx +++ b/packages/selection/src/components/SelectionArea.tsx @@ -1,4 +1,4 @@ -import React, { createRef, useEffect } from 'react'; +import React from 'react'; import VanillaSelectionArea, { SelectionEvents, SelectionOptions, @@ -39,10 +39,10 @@ export function SelectionArea({ getBoundaries = (boundaries) => boundaries, ...props }: SelectionAreaProps) { - const ref = createRef(); + const ref = React.createRef(); /* eslint-disable react-hooks/exhaustive-deps */ - useEffect(() => { + React.useEffect(() => { const opt = { selectionAreaClass, selectionContainerClass, diff --git a/packages/selection/src/useHooksBlockSelection.ts b/packages/selection/src/useHooksBlockSelection.ts index 92f5ad8505..4479508834 100644 --- a/packages/selection/src/useHooksBlockSelection.ts +++ b/packages/selection/src/useHooksBlockSelection.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import React from 'react'; import { findNode, focusEditor, @@ -33,7 +33,7 @@ export const useHooksBlockSelection = < const selectedIds = useBlockSelectionSelectors().selectedIds(); // TODO: test - useEffect(() => { + React.useEffect(() => { const el = document.querySelector('#slate-shadow-input'); if (el) { el.remove(); diff --git a/packages/serializer-html/src/elementToHtml.ts b/packages/serializer-html/src/elementToHtml.ts index f7065e9ba5..9768ab4474 100644 --- a/packages/serializer-html/src/elementToHtml.ts +++ b/packages/serializer-html/src/elementToHtml.ts @@ -1,4 +1,4 @@ -import { ComponentClass, FunctionComponent } from 'react'; +import React from 'react'; import { pipeInjectProps, PlateEditor, @@ -24,7 +24,7 @@ export const elementToHtml = ( props: PlateRenderElementProps; plateProps?: Partial; preserveClassNames?: string[]; - dndWrapper?: string | FunctionComponent | ComponentClass; + dndWrapper?: string | React.FC | React.ComponentClass; } ) => { let html = `
${props.children}
`; diff --git a/packages/serializer-html/src/serializeHtml.ts b/packages/serializer-html/src/serializeHtml.ts index 5978c17557..ed733db3a7 100644 --- a/packages/serializer-html/src/serializeHtml.ts +++ b/packages/serializer-html/src/serializeHtml.ts @@ -1,4 +1,4 @@ -import { ComponentClass, FunctionComponent } from 'react'; +import React from 'react'; import { EDescendant, EElement, @@ -64,7 +64,7 @@ export const serializeHtml = ( /** * Drag and drop component */ - dndWrapper?: string | FunctionComponent | ComponentClass; + dndWrapper?: string | React.FC | React.ComponentClass; } ): string => { let result = nodes diff --git a/packages/serializer-html/src/utils/createElementWithSlate.ts b/packages/serializer-html/src/utils/createElementWithSlate.ts index 053630ad8a..22883e600f 100644 --- a/packages/serializer-html/src/utils/createElementWithSlate.ts +++ b/packages/serializer-html/src/utils/createElementWithSlate.ts @@ -1,4 +1,4 @@ -import React, { ComponentClass, FunctionComponent } from 'react'; +import React from 'react'; import { createPlateEditor, Plate, PlateProps } from '@udecode/plate-common'; /** @@ -6,7 +6,7 @@ import { createPlateEditor, Plate, PlateProps } from '@udecode/plate-common'; */ export const createElementWithSlate = ( plateProps?: Partial, - dndWrapper?: string | FunctionComponent | ComponentClass + dndWrapper?: string | React.FC | React.ComponentClass ) => { const { editor = createPlateEditor(), diff --git a/packages/slate-react/README.md b/packages/slate-react/README.md index 6d03147115..2af32e3421 100644 --- a/packages/slate-react/README.md +++ b/packages/slate-react/README.md @@ -2,7 +2,7 @@ ## Documentation -[Slate](https://platejs.org/docs/api/slate) +Visit https://platejs.org/docs/api/slate-react to view the documentation. ## License diff --git a/packages/slate-react/package.json b/packages/slate-react/package.json index 8ba498230c..cea07b0896 100644 --- a/packages/slate-react/package.json +++ b/packages/slate-react/package.json @@ -39,6 +39,7 @@ "typecheck": "yarn p:typecheck" }, "dependencies": { + "@udecode/react-utils": "24.3.0", "@udecode/slate": "25.0.0", "@udecode/utils": "24.3.0" }, diff --git a/packages/slate-react/src/hooks/index.ts b/packages/slate-react/src/hooks/index.ts deleted file mode 100644 index 7ba277f833..0000000000 --- a/packages/slate-react/src/hooks/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -/** - * @file Automatically generated by barrelsby. - */ - -export * from './useIsomorphicLayoutEffect'; diff --git a/packages/slate-react/src/index.ts b/packages/slate-react/src/index.ts index df925e83d2..5c42c83353 100644 --- a/packages/slate-react/src/index.ts +++ b/packages/slate-react/src/index.ts @@ -2,7 +2,6 @@ * @file Automatically generated by barrelsby. */ -export * from './hooks/index'; export * from './react-editor/index'; export * from './types/index'; export * from './utils/index'; diff --git a/packages/slate-utils/README.md b/packages/slate-utils/README.md index 5d95c9077b..746cc9d62b 100644 --- a/packages/slate-utils/README.md +++ b/packages/slate-utils/README.md @@ -2,7 +2,7 @@ ## Documentation -WIP +Visit https://platejs.org/docs/api/slate-utils to view the documentation. ## License diff --git a/packages/slate/LICENSE.md b/packages/slate/LICENSE.md deleted file mode 100644 index bbba4208b4..0000000000 --- a/packages/slate/LICENSE.md +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) Ziad Beyens, Dylan Schiemann, Joe Anderson, Ian Storm Taylor - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in -all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN -THE SOFTWARE. diff --git a/packages/slate/README.md b/packages/slate/README.md index f66133e103..5617d0f0f7 100644 --- a/packages/slate/README.md +++ b/packages/slate/README.md @@ -2,7 +2,7 @@ ## Documentation -WIP +Visit https://platejs.org/docs/api/slate to view the documentation. ## License diff --git a/packages/suggestion/README.md b/packages/suggestion/README.md index b234a10043..6c0bda17c2 100644 --- a/packages/suggestion/README.md +++ b/packages/suggestion/README.md @@ -1,9 +1,5 @@ # Plate plugin for suggestion -## Documentation - -WIP - ## License [MIT](../../LICENSE) diff --git a/packages/suggestion/src/useHooksSuggestion.ts b/packages/suggestion/src/useHooksSuggestion.ts index 6e45bf7434..802ecfec57 100644 --- a/packages/suggestion/src/useHooksSuggestion.ts +++ b/packages/suggestion/src/useHooksSuggestion.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import React from 'react'; import { PlateEditor, useEditorVersion, @@ -27,7 +27,7 @@ export const useHooksSuggestion = < * suggestion if there are multiple). If there is no selected suggestion, * set the active suggestion to null. */ - useEffect(() => { + React.useEffect(() => { if (!editor.selection) return; const resetActiveSuggestion = () => { diff --git a/packages/tabbable/src/TabbableEffects.tsx b/packages/tabbable/src/TabbableEffects.tsx index 383d5a1e9d..4b92c329b2 100644 --- a/packages/tabbable/src/TabbableEffects.tsx +++ b/packages/tabbable/src/TabbableEffects.tsx @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import React from 'react'; import { findNodePath, focusEditor, @@ -19,7 +19,7 @@ export function TabbableEffects() { const editor = useEditorRef(); const readOnly = useEditorReadOnly(); - useEffect(() => { + React.useEffect(() => { if (readOnly) return; const { query, globalEventListener, insertTabbableEntries, isTabbable } = diff --git a/packages/table/src/components/TableCellElement/useIsCellSelected.ts b/packages/table/src/components/TableCellElement/useIsCellSelected.ts index 38801b6845..0b13684a75 100644 --- a/packages/table/src/components/TableCellElement/useIsCellSelected.ts +++ b/packages/table/src/components/TableCellElement/useIsCellSelected.ts @@ -1,4 +1,4 @@ -import { useMemo } from 'react'; +import React from 'react'; import { TElement } from '@udecode/plate-common'; import { useTableStore } from '../../stores/tableStore'; @@ -6,7 +6,7 @@ import { useTableStore } from '../../stores/tableStore'; export const useIsCellSelected = (element: TElement) => { const selectedCells = useTableStore().get.selectedCells(); - return useMemo( + return React.useMemo( () => !!selectedCells?.includes(element), [element, selectedCells] ); diff --git a/packages/table/src/components/TableCellElement/useTableCellElementResizable.ts b/packages/table/src/components/TableCellElement/useTableCellElementResizable.ts index a4158dbed4..376b5dc14f 100644 --- a/packages/table/src/components/TableCellElement/useTableCellElementResizable.ts +++ b/packages/table/src/components/TableCellElement/useTableCellElementResizable.ts @@ -1,4 +1,4 @@ -import { ComponentPropsWithoutRef, useCallback } from 'react'; +import React from 'react'; import { findNodePath, getPluginOptions, @@ -76,9 +76,9 @@ export const useTableCellElementResizable = ({ stepY, colSpan, }: ReturnType): { - rightProps: ComponentPropsWithoutRef; - bottomProps: ComponentPropsWithoutRef; - leftProps: ComponentPropsWithoutRef; + rightProps: React.ComponentPropsWithoutRef; + bottomProps: React.ComponentPropsWithoutRef; + leftProps: React.ComponentPropsWithoutRef; hiddenLeft: boolean; } => { const editor = useEditorRef(); @@ -107,7 +107,7 @@ export const useTableCellElementResizable = ({ const overrideMarginLeft = useOverrideMarginLeft(); /* eslint-disable @typescript-eslint/no-shadow */ - const setColSize = useCallback( + const setColSize = React.useCallback( (colIndex: number, width: number) => { setTableColSize( editor, @@ -122,7 +122,7 @@ export const useTableCellElementResizable = ({ ); /* eslint-disable @typescript-eslint/no-shadow */ - const setRowSize = useCallback( + const setRowSize = React.useCallback( (rowIndex: number, height: number) => { setTableRowSize( editor, @@ -136,7 +136,7 @@ export const useTableCellElementResizable = ({ [editor, element, overrideRowSize] ); - const setMarginLeft = useCallback( + const setMarginLeft = React.useCallback( (marginLeft: number) => { setTableMarginLeft( editor, @@ -150,7 +150,7 @@ export const useTableCellElementResizable = ({ [editor, element, overrideMarginLeft] ); - const handleResizeRight = useCallback( + const handleResizeRight = React.useCallback( ({ initialSize: currentInitial, delta, finished }: ResizeEvent) => { const nextInitial = colSizesWithoutOverrides[colIndex + 1]; @@ -181,7 +181,7 @@ export const useTableCellElementResizable = ({ ] ); - const handleResizeBottom = useCallback( + const handleResizeBottom = React.useCallback( (event: ResizeEvent) => { const newHeight = roundCellSizeToStep( event.initialSize + event.delta, @@ -197,7 +197,7 @@ export const useTableCellElementResizable = ({ [overrideRowSize, rowIndex, setRowSize, stepY] ); - const handleResizeLeft = useCallback( + const handleResizeLeft = React.useCallback( (event: ResizeEvent) => { const initial = colSizesWithoutOverrides[colIndex]; diff --git a/packages/table/src/components/TableCellElement/useTableCellElementState.ts b/packages/table/src/components/TableCellElement/useTableCellElementState.ts index 95339e5826..12c3a644ff 100644 --- a/packages/table/src/components/TableCellElement/useTableCellElementState.ts +++ b/packages/table/src/components/TableCellElement/useTableCellElementState.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import React from 'react'; import { getPluginOptions, useEditorRef, @@ -146,7 +146,7 @@ export const useTableCellElement = ({ }) => { const setHoveredColIndex = useTableStore().set.hoveredColIndex(); - useEffect(() => { + React.useEffect(() => { setHoveredColIndex(null); }, [element, setHoveredColIndex]); diff --git a/packages/table/src/components/TableElement/useSelectedCells.ts b/packages/table/src/components/TableElement/useSelectedCells.ts index b7f426c710..46bc8d442b 100644 --- a/packages/table/src/components/TableElement/useSelectedCells.ts +++ b/packages/table/src/components/TableElement/useSelectedCells.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import React from 'react'; import { useEditorRef } from '@udecode/plate-common'; import { useReadOnly, useSelected } from 'slate-react'; @@ -18,14 +18,14 @@ export const useSelectedCells = () => { const [selectedCells, setSelectedCells] = useTableStore().use.selectedCells(); const setSelectedTable = useTableStore().set.selectedTable(); - useEffect(() => { + React.useEffect(() => { if (!selected || readOnly) { setSelectedCells(null); setSelectedTable(null); } }, [selected, editor, setSelectedCells, readOnly, setSelectedTable]); - useEffect(() => { + React.useEffect(() => { if (readOnly) return; const tableEntries = getTableGridAbove(editor, { format: 'table' }); diff --git a/packages/table/src/components/TableElement/useTableColSizes.ts b/packages/table/src/components/TableElement/useTableColSizes.ts index dbb31290f1..5ddafc55bd 100644 --- a/packages/table/src/components/TableElement/useTableColSizes.ts +++ b/packages/table/src/components/TableElement/useTableColSizes.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import React from 'react'; import { findNodePath, getPluginOptions, @@ -37,7 +37,7 @@ export const useTableColSizes = ( const colCount = getTableColumnCount(tableNode); - useEffect(() => { + React.useEffect(() => { if ( enableUnsetSingleColSize && colCount < 2 && diff --git a/packages/table/src/components/TableElement/useTableElement.ts b/packages/table/src/components/TableElement/useTableElement.ts index 694f098ffe..3eb07af704 100644 --- a/packages/table/src/components/TableElement/useTableElement.ts +++ b/packages/table/src/components/TableElement/useTableElement.ts @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import React from 'react'; import { collapseSelection, getPluginOptions, @@ -43,7 +43,7 @@ export const useTableElementState = ({ let colSizes = useTableColSizes(element); - useEffect(() => { + React.useEffect(() => { if (enableMerging) { computeAllCellIndices(editor, element); } diff --git a/packages/table/src/index.ts b/packages/table/src/index.ts index 8821555967..8704b7e1ac 100644 --- a/packages/table/src/index.ts +++ b/packages/table/src/index.ts @@ -15,8 +15,8 @@ export * from './withSelectionTable'; export * from './withSetFragmentDataTable'; export * from './withTable'; export * from './components/index'; +export * from './merge/index'; export * from './queries/index'; export * from './stores/index'; export * from './transforms/index'; export * from './utils/index'; -export * from './merge/index'; diff --git a/packages/table/src/merge/getTableGridByRange.ts b/packages/table/src/merge/getTableGridByRange.ts index f832fb170c..a532230b13 100644 --- a/packages/table/src/merge/getTableGridByRange.ts +++ b/packages/table/src/merge/getTableGridByRange.ts @@ -24,18 +24,18 @@ import { import { getCellTypes } from '../utils'; import { getEmptyTableNode } from '../utils/getEmptyTableNode'; -export type FormatType = 'table' | 'cell' | 'all'; +type FormatType = 'table' | 'cell' | 'all'; -export interface TableGridEntries { +interface TableGridEntries { tableEntries: TElementEntry[]; cellEntries: TElementEntry[]; } -export type GetTableGridReturnType = T extends 'all' +type GetTableGridReturnType = T extends 'all' ? TableGridEntries : TElementEntry[]; -export interface GetTableGridByRangeOptions { +interface GetTableGridByRangeOptions { at: Range; /** diff --git a/packages/table/src/merge/index.ts b/packages/table/src/merge/index.ts index 099e84d8fd..ac17e9d34c 100644 --- a/packages/table/src/merge/index.ts +++ b/packages/table/src/merge/index.ts @@ -2,6 +2,18 @@ * @file Automatically generated by barrelsby. */ +export * from './computeCellIndices'; +export * from './createEmptyCell'; +export * from './deleteColumn'; +export * from './deleteRow'; +export * from './findCellByIndexes'; +export * from './getCellIndices'; +export * from './getCellIndicesWithSpans'; +export * from './getCellPath'; +export * from './getTableGridByRange'; +export * from './insertTableColumn'; +export * from './insertTableRow'; +export * from './isTableRectangular'; export * from './mergeTableCells'; export * from './unmergeTableCells'; export * from './useTableMergeState'; diff --git a/packages/table/src/queries/index.ts b/packages/table/src/queries/index.ts index 1028e6270a..480ad64c2e 100644 --- a/packages/table/src/queries/index.ts +++ b/packages/table/src/queries/index.ts @@ -4,9 +4,11 @@ export * from './getCellInNextTableRow'; export * from './getCellInPreviousTableRow'; +export * from './getColSpan'; export * from './getLeftTableCell'; export * from './getNextTableCell'; export * from './getPreviousTableCell'; +export * from './getRowSpan'; export * from './getTableAbove'; export * from './getTableColumnCount'; export * from './getTableColumnIndex'; diff --git a/packages/table/src/stores/tableStore.ts b/packages/table/src/stores/tableStore.ts index 35894bdf24..05c386cdfa 100644 --- a/packages/table/src/stores/tableStore.ts +++ b/packages/table/src/stores/tableStore.ts @@ -1,4 +1,4 @@ -import { useCallback } from 'react'; +import React from 'react'; import { createAtomStore, TElement } from '@udecode/plate-common'; export type TableStoreSizeOverrides = Map; @@ -20,7 +20,7 @@ const useOverrideSizeFactory = ( fn: (overrides: TableStoreSizeOverrides) => TableStoreSizeOverrides ) => void ) => - useCallback( + React.useCallback( (index: number, size: number | null) => { setOverrides((overrides) => { const newOverrides = new Map(overrides); diff --git a/packages/yjs/src/RenderAboveEditableYjs.tsx b/packages/yjs/src/RenderAboveEditableYjs.tsx index f68a592ed9..f823a40fe0 100644 --- a/packages/yjs/src/RenderAboveEditableYjs.tsx +++ b/packages/yjs/src/RenderAboveEditableYjs.tsx @@ -1,23 +1,23 @@ -import React, { FC, ReactNode, useEffect } from 'react'; +import React from 'react'; import { YjsEditor } from '@slate-yjs/core'; import { PlateEditor, useEditorRef, Value } from '@udecode/plate-common'; import { PlateYjsEditorProps } from './withPlateYjs'; import { useYjsSelectors } from './yjsStore'; -export const RenderAboveEditableYjs: FC<{ children: ReactNode }> = ({ - children, -}) => { +export const RenderAboveEditableYjs: React.FC<{ + children: React.ReactNode; +}> = ({ children }) => { const editor = useEditorRef(); const isSynced = useYjsSelectors.isSynced(); - useEffect(() => { + React.useEffect(() => { editor.yjs.provider.connect(); return () => editor.yjs.provider.disconnect(); }, [editor.yjs.provider]); - useEffect(() => { + React.useEffect(() => { YjsEditor.connect(editor as any); return () => YjsEditor.disconnect(editor as any); // eslint-disable-next-line react-hooks/exhaustive-deps diff --git a/scripts/plop/templates/package/README.md.hbs b/scripts/plop/templates/package/README.md.hbs index 63b67aaaa4..5fbafa2197 100644 --- a/scripts/plop/templates/package/README.md.hbs +++ b/scripts/plop/templates/package/README.md.hbs @@ -2,10 +2,6 @@ -## Documentation - -WIP - ## License [MIT](../../LICENSE) diff --git a/templates/plate-playground-template/components.json b/templates/plate-playground-template/components.json index 8917d8dfc0..f9462a138f 100644 --- a/templates/plate-playground-template/components.json +++ b/templates/plate-playground-template/components.json @@ -10,6 +10,6 @@ }, "aliases": { "components": "@/components", - "utils": "@/lib/utils" + "utils": "@udecode/cn" } -} \ No newline at end of file +} diff --git a/templates/plate-playground-template/package.json b/templates/plate-playground-template/package.json index 0a49861d6f..b6690beb5c 100644 --- a/templates/plate-playground-template/package.json +++ b/templates/plate-playground-template/package.json @@ -66,7 +66,6 @@ "@udecode/plate-table": "^24.3.5", "@udecode/plate-trailing-block": "^24.3.5", "class-variance-authority": "0.7.0", - "clsx": "2.0.0", "cmdk": "0.2.0", "date-fns": "^2.30.0", "eslint-plugin-prettier": "^5.0.0", diff --git a/templates/plate-playground-template/src/app/layout.tsx b/templates/plate-playground-template/src/app/layout.tsx index 027fc4c469..46039863d6 100644 --- a/templates/plate-playground-template/src/app/layout.tsx +++ b/templates/plate-playground-template/src/app/layout.tsx @@ -1,6 +1,7 @@ +import { cn } from '@udecode/cn'; + import { siteConfig } from '@/config/site'; import { fontSans } from '@/lib/fonts'; -import { cn } from '@/lib/utils'; import { TooltipProvider } from '@/components/plate-ui/tooltip'; import { SiteHeader } from '@/components/site/site-header'; import { TailwindIndicator } from '@/components/site/tailwind-indicator'; diff --git a/templates/plate-playground-template/src/components/plate-editor.tsx b/templates/plate-playground-template/src/components/plate-editor.tsx index 0b4329801f..981da01748 100644 --- a/templates/plate-playground-template/src/components/plate-editor.tsx +++ b/templates/plate-playground-template/src/components/plate-editor.tsx @@ -1,6 +1,7 @@ 'use client'; import React, { useRef } from 'react'; +import { cn } from '@udecode/cn'; import { CommentsProvider } from '@udecode/plate-comments'; import { Plate } from '@udecode/plate-common'; import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph'; @@ -10,7 +11,6 @@ import { HTML5Backend } from 'react-dnd-html5-backend'; import { commentsUsers, myUserId } from '@/lib/plate/comments'; import { MENTIONABLES } from '@/lib/plate/mentionables'; import { plugins } from '@/lib/plate/plate-plugins'; -import { cn } from '@/lib/utils'; import { CommentsPopover } from '@/components/plate-ui/comments-popover'; import { CursorOverlay } from '@/components/plate-ui/cursor-overlay'; import { Editor } from '@/components/plate-ui/editor'; diff --git a/templates/plate-playground-template/src/components/plate-ui/avatar.tsx b/templates/plate-playground-template/src/components/plate-ui/avatar.tsx index 1346957c31..42da99b6bb 100644 --- a/templates/plate-playground-template/src/components/plate-ui/avatar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/avatar.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import * as AvatarPrimitive from '@radix-ui/react-avatar'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; const Avatar = React.forwardRef< React.ElementRef, diff --git a/templates/plate-playground-template/src/components/plate-ui/blockquote-element.tsx b/templates/plate-playground-template/src/components/plate-ui/blockquote-element.tsx index df481f95da..f7a6281e59 100644 --- a/templates/plate-playground-template/src/components/plate-ui/blockquote-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/blockquote-element.tsx @@ -1,10 +1,9 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateElement, PlateElementProps } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - const BlockquoteElement = React.forwardRef< React.ElementRef, PlateElementProps diff --git a/templates/plate-playground-template/src/components/plate-ui/button.tsx b/templates/plate-playground-template/src/components/plate-ui/button.tsx index 18b0a7f0b7..e5ff8fcafa 100644 --- a/templates/plate-playground-template/src/components/plate-ui/button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/button.tsx @@ -1,9 +1,8 @@ import * as React from 'react'; import { Slot } from '@radix-ui/react-slot'; +import { cn } from '@udecode/cn'; import { cva, VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - const buttonVariants = cva( 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', { diff --git a/templates/plate-playground-template/src/components/plate-ui/caption.tsx b/templates/plate-playground-template/src/components/plate-ui/caption.tsx index 0c4299873d..6bf41dbd5b 100644 --- a/templates/plate-playground-template/src/components/plate-ui/caption.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/caption.tsx @@ -1,12 +1,11 @@ import React, { ComponentProps } from 'react'; +import { cn } from '@udecode/cn'; import { Caption as CaptionPrimitive, CaptionTextarea as CaptionTextareaPrimitive, } from '@udecode/plate-caption'; import { cva, VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - const captionVariants = cva('max-w-full', { variants: { align: { diff --git a/templates/plate-playground-template/src/components/plate-ui/checkbox.tsx b/templates/plate-playground-template/src/components/plate-ui/checkbox.tsx index 24d0596071..f8b5b216e6 100644 --- a/templates/plate-playground-template/src/components/plate-ui/checkbox.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/checkbox.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import * as CheckboxPrimitive from '@radix-ui/react-checkbox'; +import { cn } from '@udecode/cn'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; const Checkbox = React.forwardRef< diff --git a/templates/plate-playground-template/src/components/plate-ui/code-block-combobox.tsx b/templates/plate-playground-template/src/components/plate-ui/code-block-combobox.tsx index b8968dca19..e77c6895f8 100644 --- a/templates/plate-playground-template/src/components/plate-ui/code-block-combobox.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/code-block-combobox.tsx @@ -1,6 +1,7 @@ 'use client'; import React, { useState } from 'react'; +import { cn } from '@udecode/cn'; import { CODE_BLOCK_LANGUAGES, CODE_BLOCK_LANGUAGES_POPULAR, @@ -8,7 +9,6 @@ import { useCodeBlockComboboxState, } from '@udecode/plate-code-block'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { Button } from './button'; diff --git a/templates/plate-playground-template/src/components/plate-ui/code-block-element.tsx b/templates/plate-playground-template/src/components/plate-ui/code-block-element.tsx index 94217a3a9c..23881247ae 100644 --- a/templates/plate-playground-template/src/components/plate-ui/code-block-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/code-block-element.tsx @@ -3,14 +3,13 @@ import './code-block-element.css'; import React, { forwardRef } from 'react'; +import { cn } from '@udecode/cn'; import { TCodeBlockElement, useCodeBlockElementState, } from '@udecode/plate-code-block'; import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - import { CodeBlockCombobox } from './code-block-combobox'; const CodeBlockElement = forwardRef< diff --git a/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx index d29849b671..003210962e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx @@ -1,10 +1,9 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - export function CodeLeaf({ className, children, ...props }: PlateLeafProps) { return ( ({ combobox, index, diff --git a/templates/plate-playground-template/src/components/plate-ui/command.tsx b/templates/plate-playground-template/src/components/plate-ui/command.tsx index b315de4844..1b16559852 100644 --- a/templates/plate-playground-template/src/components/plate-ui/command.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/command.tsx @@ -2,9 +2,9 @@ import * as React from 'react'; import { DialogProps } from '@radix-ui/react-dialog'; +import { cn } from '@udecode/cn'; import { Command as CommandPrimitive } from 'cmdk'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { Dialog, DialogContent } from './dialog'; diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-create-form.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-create-form.tsx index dad7342208..68306cfbf5 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-create-form.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-create-form.tsx @@ -1,13 +1,13 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { CommentNewSubmitButton, CommentNewTextarea, useCommentsSelectors, } from '@udecode/plate-comments'; -import { cn } from '@/lib/utils'; import { buttonVariants } from '@/components/plate-ui/button'; import { inputVariants } from '@/components/plate-ui/input'; diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-leaf.tsx index 4de0a27ef2..d26349b1f6 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-leaf.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-leaf.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { TCommentText, useCommentLeaf, @@ -8,8 +9,6 @@ import { } from '@udecode/plate-comments'; import { PlateLeaf, PlateLeafProps, Value } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - export function CommentLeaf({ className, ...props diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-more-dropdown.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-more-dropdown.tsx index 319f4341a3..ec9bb8835e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-more-dropdown.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-more-dropdown.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { useCommentDeleteButton, useCommentDeleteButtonState, @@ -8,7 +9,6 @@ import { useCommentEditButtonState, } from '@udecode/plate-comments'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { Button } from '@/components/plate-ui/button'; import { diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-resolve-button.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-resolve-button.tsx index 3299236d8f..a83c88ecf3 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-resolve-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-resolve-button.tsx @@ -1,12 +1,12 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { CommentResolveButton as CommentResolveButtonPrimitive, useComment, } from '@udecode/plate-comments'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { buttonVariants } from '@/components/plate-ui/button'; diff --git a/templates/plate-playground-template/src/components/plate-ui/comment-value.tsx b/templates/plate-playground-template/src/components/plate-ui/comment-value.tsx index 81c25084f8..50cdc62dc2 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comment-value.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comment-value.tsx @@ -1,13 +1,13 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { CommentEditActions, CommentEditTextarea, useCommentValue, } from '@udecode/plate-comments'; -import { cn } from '@/lib/utils'; import { buttonVariants } from '@/components/plate-ui/button'; import { inputVariants } from '@/components/plate-ui/input'; diff --git a/templates/plate-playground-template/src/components/plate-ui/comments-popover.tsx b/templates/plate-playground-template/src/components/plate-ui/comments-popover.tsx index 1f5af97f48..19972b800d 100644 --- a/templates/plate-playground-template/src/components/plate-ui/comments-popover.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/comments-popover.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { CommentProvider, CommentsPositioner, @@ -10,7 +11,6 @@ import { } from '@udecode/plate-comments'; import { PortalBody } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; import { popoverVariants } from '@/components/plate-ui/popover'; import { CommentCreateForm } from './comment-create-form'; diff --git a/templates/plate-playground-template/src/components/plate-ui/cursor-overlay.tsx b/templates/plate-playground-template/src/components/plate-ui/cursor-overlay.tsx index ff9cc90283..8ca0661a2c 100644 --- a/templates/plate-playground-template/src/components/plate-ui/cursor-overlay.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/cursor-overlay.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { createStore } from '@udecode/plate-common'; import { CursorData, @@ -7,8 +8,6 @@ import { CursorProps, } from '@udecode/plate-cursor'; -import { cn } from '@/lib/utils'; - export const cursorStore = createStore('cursor')({ cursors: {}, }); diff --git a/templates/plate-playground-template/src/components/plate-ui/dialog.tsx b/templates/plate-playground-template/src/components/plate-ui/dialog.tsx index 1b373a77ff..3eddd100ef 100644 --- a/templates/plate-playground-template/src/components/plate-ui/dialog.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/dialog.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import * as DialogPrimitive from '@radix-ui/react-dialog'; +import { cn } from '@udecode/cn'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; const Dialog = DialogPrimitive.Root; diff --git a/templates/plate-playground-template/src/components/plate-ui/draggable.tsx b/templates/plate-playground-template/src/components/plate-ui/draggable.tsx index 82c4e503b0..d324c6d2c8 100644 --- a/templates/plate-playground-template/src/components/plate-ui/draggable.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/draggable.tsx @@ -1,6 +1,7 @@ 'use client'; import React, { forwardRef } from 'react'; +import { cn } from '@udecode/cn'; import { ClassNames, PlateElementProps, TEditor } from '@udecode/plate-common'; import { DragItemNode, @@ -9,7 +10,6 @@ import { } from '@udecode/plate-dnd'; import { DropTargetMonitor } from 'react-dnd'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip'; diff --git a/templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx b/templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx index a1d2a3da0e..cddf10caf8 100644 --- a/templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/dropdown-menu.tsx @@ -3,9 +3,9 @@ import * as React from 'react'; import { useCallback, useState } from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; +import { cn } from '@udecode/cn'; import { cva, VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; const DropdownMenu = DropdownMenuPrimitive.Root; diff --git a/templates/plate-playground-template/src/components/plate-ui/editor.tsx b/templates/plate-playground-template/src/components/plate-ui/editor.tsx index f3e6197307..a8f971c403 100644 --- a/templates/plate-playground-template/src/components/plate-ui/editor.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/editor.tsx @@ -1,9 +1,8 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateContent } from '@udecode/plate-common'; import { cva } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - import type { PlateContentProps } from '@udecode/plate-common'; import type { VariantProps } from 'class-variance-authority'; diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-content.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-content.tsx index 9ff6b8fed6..fdb7371865 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-content.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-content.tsx @@ -1,4 +1,5 @@ import React, { memo, useCallback } from 'react'; +import { cn } from '@udecode/cn'; import { Emoji, EmojiSettings, @@ -6,8 +7,6 @@ import { UseEmojiPickerType, } from '@udecode/plate-emoji'; -import { cn } from '@/lib/utils'; - export type EmojiPickerContentProps = Pick< UseEmojiPickerType, | 'i18n' diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-navigation.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-navigation.tsx index c1cf60961c..834bb4389c 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-navigation.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-navigation.tsx @@ -1,12 +1,11 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { EmojiCategoryList, IEmojiFloatingLibrary, UseEmojiPickerType, } from '@udecode/plate-emoji'; -import { cn } from '@/lib/utils'; - export type EmojiPickerNavigationProps = Pick< UseEmojiPickerType, 'i18n' | 'emojiLibrary' | 'icons' | 'focusedCategory' diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-and-clear.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-and-clear.tsx index 2869d2b8c2..79dbdb14d7 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-and-clear.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-picker-search-and-clear.tsx @@ -1,7 +1,7 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { UseEmojiPickerType } from '@udecode/plate-emoji'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; export type EmojiPickerSearchAndClearProps = Pick< diff --git a/templates/plate-playground-template/src/components/plate-ui/emoji-picker.tsx b/templates/plate-playground-template/src/components/plate-ui/emoji-picker.tsx index c36b7be758..96a5548186 100644 --- a/templates/plate-playground-template/src/components/plate-ui/emoji-picker.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/emoji-picker.tsx @@ -1,8 +1,7 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { EmojiSettings, UseEmojiPickerType } from '@udecode/plate-emoji'; -import { cn } from '@/lib/utils'; - import { EmojiPickerContent } from './emoji-picker-content'; import { EmojiPickerNavigation } from './emoji-picker-navigation'; import { EmojiPickerPreview } from './emoji-picker-preview'; diff --git a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar.tsx b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar.tsx index 8a8caa9777..4b8eb4a9cc 100644 --- a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar.tsx @@ -1,6 +1,5 @@ import React from 'react'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; import { Toolbar, ToolbarProps } from './toolbar'; diff --git a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx index d7891d72d3..4faf70279e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/floating-toolbar.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { PortalBody, useComposedRef } from '@udecode/plate-common'; import { flip, @@ -10,8 +11,6 @@ import { useFloatingToolbarState, } from '@udecode/plate-floating'; -import { cn } from '@/lib/utils'; - import { Toolbar, ToolbarProps } from './toolbar'; export interface FloatingToolbarProps extends ToolbarProps { diff --git a/templates/plate-playground-template/src/components/plate-ui/highlight-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/highlight-leaf.tsx index 0f43071fba..eb5fd2ffcb 100644 --- a/templates/plate-playground-template/src/components/plate-ui/highlight-leaf.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/highlight-leaf.tsx @@ -1,8 +1,7 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - export function HighlightLeaf({ className, children, diff --git a/templates/plate-playground-template/src/components/plate-ui/hr-element.tsx b/templates/plate-playground-template/src/components/plate-ui/hr-element.tsx index 6e637041a8..a7d654e02f 100644 --- a/templates/plate-playground-template/src/components/plate-ui/hr-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/hr-element.tsx @@ -1,9 +1,8 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateElement, PlateElementProps } from '@udecode/plate-common'; import { useFocused, useSelected } from 'slate-react'; -import { cn } from '@/lib/utils'; - const HrElement = React.forwardRef< React.ElementRef, PlateElementProps diff --git a/templates/plate-playground-template/src/components/plate-ui/image-element.tsx b/templates/plate-playground-template/src/components/plate-ui/image-element.tsx index 4c9c294194..cd9abb7674 100644 --- a/templates/plate-playground-template/src/components/plate-ui/image-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/image-element.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common'; import { ELEMENT_IMAGE, @@ -8,8 +9,6 @@ import { } from '@udecode/plate-media'; import { useResizableStore } from '@udecode/plate-resizable'; -import { cn } from '@/lib/utils'; - import { Caption, CaptionTextarea } from './caption'; import { MediaPopover } from './media-popover'; import { diff --git a/templates/plate-playground-template/src/components/plate-ui/input.tsx b/templates/plate-playground-template/src/components/plate-ui/input.tsx index b4c7598860..b1e79dd948 100644 --- a/templates/plate-playground-template/src/components/plate-ui/input.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/input.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; +import { cn } from '@udecode/cn'; import { cva, VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - export const inputVariants = cva( 'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50', { diff --git a/templates/plate-playground-template/src/components/plate-ui/kbd-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/kbd-leaf.tsx index 4b7b0ee09d..a61f8ab5bf 100644 --- a/templates/plate-playground-template/src/components/plate-ui/kbd-leaf.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/kbd-leaf.tsx @@ -1,8 +1,7 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - export function KbdLeaf({ className, children, ...props }: PlateLeafProps) { return ( , PlateElementProps diff --git a/templates/plate-playground-template/src/components/plate-ui/link-floating-toolbar.tsx b/templates/plate-playground-template/src/components/plate-ui/link-floating-toolbar.tsx index 2fca9fb703..d6a89f4994 100644 --- a/templates/plate-playground-template/src/components/plate-ui/link-floating-toolbar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/link-floating-toolbar.tsx @@ -1,6 +1,7 @@ 'use client'; import React from 'react'; +import { cn } from '@udecode/cn'; import { flip, offset, @@ -16,7 +17,6 @@ import { useFloatingLinkInsertState, } from '@udecode/plate-link'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { buttonVariants } from './button'; diff --git a/templates/plate-playground-template/src/components/plate-ui/list-element.tsx b/templates/plate-playground-template/src/components/plate-ui/list-element.tsx index c13e4e7112..8253d35476 100644 --- a/templates/plate-playground-template/src/components/plate-ui/list-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/list-element.tsx @@ -1,9 +1,8 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateElement, PlateElementProps } from '@udecode/plate-common'; import { cva, VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - const listVariants = cva('m-0 ps-6', { variants: { variant: { diff --git a/templates/plate-playground-template/src/components/plate-ui/media-embed-element.tsx b/templates/plate-playground-template/src/components/plate-ui/media-embed-element.tsx index 6584bb0c2b..8114643ca5 100644 --- a/templates/plate-playground-template/src/components/plate-ui/media-embed-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/media-embed-element.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common'; import { ELEMENT_MEDIA_EMBED, @@ -11,8 +12,6 @@ import { useResizableStore } from '@udecode/plate-resizable'; import LiteYouTubeEmbed from 'react-lite-youtube-embed'; import { Tweet } from 'react-tweet'; -import { cn } from '@/lib/utils'; - import { Caption, CaptionTextarea } from './caption'; import { MediaPopover } from './media-popover'; import { diff --git a/templates/plate-playground-template/src/components/plate-ui/mention-element.tsx b/templates/plate-playground-template/src/components/plate-ui/mention-element.tsx index f475a4d794..b419d313df 100644 --- a/templates/plate-playground-template/src/components/plate-ui/mention-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/mention-element.tsx @@ -1,4 +1,5 @@ import React, { forwardRef } from 'react'; +import { cn } from '@udecode/cn'; import { getHandler, PlateElement, @@ -8,8 +9,6 @@ import { import { TMentionElement } from '@udecode/plate-mention'; import { useFocused, useSelected } from 'slate-react'; -import { cn } from '@/lib/utils'; - export interface MentionElementProps extends PlateElementProps { /** diff --git a/templates/plate-playground-template/src/components/plate-ui/mention-input-element.tsx b/templates/plate-playground-template/src/components/plate-ui/mention-input-element.tsx index 2b3257be1e..b4ebfb5869 100644 --- a/templates/plate-playground-template/src/components/plate-ui/mention-input-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/mention-input-element.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { getHandler, PlateElement, @@ -8,8 +9,6 @@ import { import { TMentionElement } from '@udecode/plate-mention'; import { useFocused, useSelected } from 'slate-react'; -import { cn } from '@/lib/utils'; - export interface MentionInputElementProps extends PlateElementProps { onClick?: (mentionNode: any) => void; diff --git a/templates/plate-playground-template/src/components/plate-ui/paragraph-element.tsx b/templates/plate-playground-template/src/components/plate-ui/paragraph-element.tsx index a5318f8abd..333d891868 100644 --- a/templates/plate-playground-template/src/components/plate-ui/paragraph-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/paragraph-element.tsx @@ -1,8 +1,7 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateElement, PlateElementProps } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - const ParagraphElement = React.forwardRef< React.ElementRef, PlateElementProps diff --git a/templates/plate-playground-template/src/components/plate-ui/placeholder.tsx b/templates/plate-playground-template/src/components/plate-ui/placeholder.tsx index 7ed4dbf2e1..9f62a7aaa6 100644 --- a/templates/plate-playground-template/src/components/plate-ui/placeholder.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/placeholder.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { createNodeHOC, createNodesHOC, @@ -8,8 +9,6 @@ import { import { ELEMENT_H1 } from '@udecode/plate-heading'; import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph'; -import { cn } from '@/lib/utils'; - export const Placeholder = (props: PlaceholderProps) => { const { children, placeholder, nodeProps } = props; diff --git a/templates/plate-playground-template/src/components/plate-ui/popover.tsx b/templates/plate-playground-template/src/components/plate-ui/popover.tsx index 57f42a82bb..8523bc3b03 100644 --- a/templates/plate-playground-template/src/components/plate-ui/popover.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/popover.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import * as PopoverPrimitive from '@radix-ui/react-popover'; +import { cn } from '@udecode/cn'; import { cva } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - const Popover = PopoverPrimitive.Root; const PopoverTrigger = PopoverPrimitive.Trigger; diff --git a/templates/plate-playground-template/src/components/plate-ui/resizable.tsx b/templates/plate-playground-template/src/components/plate-ui/resizable.tsx index 3fe67f0161..8a856307a1 100644 --- a/templates/plate-playground-template/src/components/plate-ui/resizable.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/resizable.tsx @@ -1,14 +1,13 @@ 'use client'; import React, { ComponentProps } from 'react'; +import { cn } from '@udecode/cn'; import { Resizable as ResizablePrimitive, ResizeHandle as ResizeHandlePrimitive, } from '@udecode/plate-resizable'; import { cva, VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - export const mediaResizeHandleVariants = cva( cn( 'top-0 flex w-6 select-none flex-col justify-center', diff --git a/templates/plate-playground-template/src/components/plate-ui/search-highlight-leaf.tsx b/templates/plate-playground-template/src/components/plate-ui/search-highlight-leaf.tsx index b5d391854c..9c40c24130 100644 --- a/templates/plate-playground-template/src/components/plate-ui/search-highlight-leaf.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/search-highlight-leaf.tsx @@ -1,8 +1,7 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateLeaf, PlateLeafProps } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - export function SearchHighlightLeaf({ className, ...props }: PlateLeafProps) { return ; } diff --git a/templates/plate-playground-template/src/components/plate-ui/separator.tsx b/templates/plate-playground-template/src/components/plate-ui/separator.tsx index da040615d4..30db8d2c2e 100644 --- a/templates/plate-playground-template/src/components/plate-ui/separator.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/separator.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import * as SeparatorPrimitive from '@radix-ui/react-separator'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; const Separator = React.forwardRef< React.ElementRef, diff --git a/templates/plate-playground-template/src/components/plate-ui/table-cell-element.tsx b/templates/plate-playground-template/src/components/plate-ui/table-cell-element.tsx index 0effb3e381..0075194251 100644 --- a/templates/plate-playground-template/src/components/plate-ui/table-cell-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/table-cell-element.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common'; import { TTableCellElement, @@ -8,8 +9,6 @@ import { useTableCellElementState, } from '@udecode/plate-table'; -import { cn } from '@/lib/utils'; - import { ResizeHandle } from './resizable'; export interface TableCellElementProps diff --git a/templates/plate-playground-template/src/components/plate-ui/table-element.tsx b/templates/plate-playground-template/src/components/plate-ui/table-element.tsx index 713679f69b..40e3ce51af 100644 --- a/templates/plate-playground-template/src/components/plate-ui/table-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/table-element.tsx @@ -1,6 +1,7 @@ import React, { forwardRef } from 'react'; import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'; import { PopoverAnchor, PopoverContentProps } from '@radix-ui/react-popover'; +import { cn } from '@udecode/cn'; import { isCollapsed, PlateElement, @@ -17,7 +18,6 @@ import { } from '@udecode/plate-table'; import { useReadOnly, useSelected } from 'slate-react'; -import { cn } from '@/lib/utils'; import { Icons, iconVariants } from '@/components/icons'; import { Button } from './button'; diff --git a/templates/plate-playground-template/src/components/plate-ui/table-row-element.tsx b/templates/plate-playground-template/src/components/plate-ui/table-row-element.tsx index e8026ae1f2..508be0388d 100644 --- a/templates/plate-playground-template/src/components/plate-ui/table-row-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/table-row-element.tsx @@ -1,8 +1,7 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateElement, PlateElementProps } from '@udecode/plate-common'; -import { cn } from '@/lib/utils'; - export interface PlateTableRowElementProps extends PlateElementProps { hideBorder?: boolean; } diff --git a/templates/plate-playground-template/src/components/plate-ui/todo-list-element.tsx b/templates/plate-playground-template/src/components/plate-ui/todo-list-element.tsx index 9e03cba164..cfd4fbc29c 100644 --- a/templates/plate-playground-template/src/components/plate-ui/todo-list-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/todo-list-element.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateElement, PlateElementProps, Value } from '@udecode/plate-common'; import { TTodoListItemElement, @@ -6,8 +7,6 @@ import { useTodoListElementState, } from '@udecode/plate-list'; -import { cn } from '@/lib/utils'; - import { Checkbox } from './checkbox'; export type TodoListElementProps = PlateElementProps< diff --git a/templates/plate-playground-template/src/components/plate-ui/toggle.tsx b/templates/plate-playground-template/src/components/plate-ui/toggle.tsx index 3594c18f40..a4691a6b4f 100644 --- a/templates/plate-playground-template/src/components/plate-ui/toggle.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/toggle.tsx @@ -2,10 +2,9 @@ import * as React from 'react'; import * as TogglePrimitive from '@radix-ui/react-toggle'; +import { cn } from '@udecode/cn'; import { cva, VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - const toggleVariants = cva( cn( 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', diff --git a/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx b/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx index 57c64e00e5..e96667161d 100644 --- a/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/toolbar.tsx @@ -3,9 +3,9 @@ import * as React from 'react'; import { ReactNode } from 'react'; import * as ToolbarPrimitive from '@radix-ui/react-toolbar'; +import { cn } from '@udecode/cn'; import { cva, VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; import { Separator } from './separator'; diff --git a/templates/plate-playground-template/src/components/plate-ui/tooltip.tsx b/templates/plate-playground-template/src/components/plate-ui/tooltip.tsx index 0757666e6b..86361f6390 100644 --- a/templates/plate-playground-template/src/components/plate-ui/tooltip.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/tooltip.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import * as TooltipPrimitive from '@radix-ui/react-tooltip'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; const TooltipProvider = TooltipPrimitive.Provider; diff --git a/templates/plate-playground-template/src/components/site/main-nav.tsx b/templates/plate-playground-template/src/components/site/main-nav.tsx index eb1cc0857a..2f2887d0d0 100644 --- a/templates/plate-playground-template/src/components/site/main-nav.tsx +++ b/templates/plate-playground-template/src/components/site/main-nav.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import Link from 'next/link'; +import { cn } from '@udecode/cn'; import { NavItem } from '@/types/nav'; import { siteConfig } from '@/config/site'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; interface MainNavProps { diff --git a/templates/plate-playground-template/src/lib/utils.ts b/templates/plate-playground-template/src/lib/utils.ts index 90ffa14657..fbb7fea2a0 100644 --- a/templates/plate-playground-template/src/lib/utils.ts +++ b/templates/plate-playground-template/src/lib/utils.ts @@ -1,8 +1,6 @@ -import { clsx } from 'clsx'; +import { cx, CxOptions } from 'class-variance-authority'; import { twMerge } from 'tailwind-merge'; -import type { ClassValue } from 'clsx'; - -export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); +export function cn(...inputs: CxOptions) { + return twMerge(cx(inputs)); } diff --git a/templates/plate-template/components.json b/templates/plate-template/components.json index 8917d8dfc0..f9462a138f 100644 --- a/templates/plate-template/components.json +++ b/templates/plate-template/components.json @@ -10,6 +10,6 @@ }, "aliases": { "components": "@/components", - "utils": "@/lib/utils" + "utils": "@udecode/cn" } -} \ No newline at end of file +} diff --git a/templates/plate-template/package.json b/templates/plate-template/package.json index 81d25eeb9f..40911d9629 100644 --- a/templates/plate-template/package.json +++ b/templates/plate-template/package.json @@ -16,7 +16,6 @@ "@radix-ui/react-tooltip": "^1.0.6", "@udecode/plate-common": "^24.3.5", "class-variance-authority": "0.7.0", - "clsx": "2.0.0", "eslint-plugin-prettier": "^5.0.0", "lucide-react": "0.279.0", "next": "^13.4.19", diff --git a/templates/plate-template/src/app/layout.tsx b/templates/plate-template/src/app/layout.tsx index 6f1be9d9d4..e74700eb51 100644 --- a/templates/plate-template/src/app/layout.tsx +++ b/templates/plate-template/src/app/layout.tsx @@ -1,6 +1,7 @@ +import { cn } from '@udecode/cn'; + import { siteConfig } from '@/config/site'; import { fontSans } from '@/lib/fonts'; -import { cn } from '@/lib/utils'; import { TooltipProvider } from '@/components/plate-ui/tooltip'; import { SiteHeader } from '@/components/site/site-header'; import { TailwindIndicator } from '@/components/site/tailwind-indicator'; diff --git a/templates/plate-template/src/components/plate-ui/button.tsx b/templates/plate-template/src/components/plate-ui/button.tsx index d66f66afb5..84eaf06723 100644 --- a/templates/plate-template/src/components/plate-ui/button.tsx +++ b/templates/plate-template/src/components/plate-ui/button.tsx @@ -1,9 +1,8 @@ import * as React from 'react'; import { Slot } from '@radix-ui/react-slot'; +import { cn } from '@udecode/cn'; import { cva, VariantProps } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - const buttonVariants = cva( 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', { diff --git a/templates/plate-template/src/components/plate-ui/editor.tsx b/templates/plate-template/src/components/plate-ui/editor.tsx index f3e6197307..a8f971c403 100644 --- a/templates/plate-template/src/components/plate-ui/editor.tsx +++ b/templates/plate-template/src/components/plate-ui/editor.tsx @@ -1,9 +1,8 @@ import React from 'react'; +import { cn } from '@udecode/cn'; import { PlateContent } from '@udecode/plate-common'; import { cva } from 'class-variance-authority'; -import { cn } from '@/lib/utils'; - import type { PlateContentProps } from '@udecode/plate-common'; import type { VariantProps } from 'class-variance-authority'; diff --git a/templates/plate-template/src/components/plate-ui/tooltip.tsx b/templates/plate-template/src/components/plate-ui/tooltip.tsx index 0757666e6b..86361f6390 100644 --- a/templates/plate-template/src/components/plate-ui/tooltip.tsx +++ b/templates/plate-template/src/components/plate-ui/tooltip.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import * as TooltipPrimitive from '@radix-ui/react-tooltip'; - -import { cn } from '@/lib/utils'; +import { cn } from '@udecode/cn'; const TooltipProvider = TooltipPrimitive.Provider; diff --git a/templates/plate-template/src/components/site/main-nav.tsx b/templates/plate-template/src/components/site/main-nav.tsx index eb1cc0857a..2f2887d0d0 100644 --- a/templates/plate-template/src/components/site/main-nav.tsx +++ b/templates/plate-template/src/components/site/main-nav.tsx @@ -1,9 +1,9 @@ import * as React from 'react'; import Link from 'next/link'; +import { cn } from '@udecode/cn'; import { NavItem } from '@/types/nav'; import { siteConfig } from '@/config/site'; -import { cn } from '@/lib/utils'; import { Icons } from '@/components/icons'; interface MainNavProps { diff --git a/templates/plate-template/src/lib/utils.ts b/templates/plate-template/src/lib/utils.ts index 90ffa14657..fbb7fea2a0 100644 --- a/templates/plate-template/src/lib/utils.ts +++ b/templates/plate-template/src/lib/utils.ts @@ -1,8 +1,6 @@ -import { clsx } from 'clsx'; +import { cx, CxOptions } from 'class-variance-authority'; import { twMerge } from 'tailwind-merge'; -import type { ClassValue } from 'clsx'; - -export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); +export function cn(...inputs: CxOptions) { + return twMerge(cx(inputs)); } diff --git a/yarn.lock b/yarn.lock index 996f957364..6e125809e7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6146,6 +6146,20 @@ __metadata: languageName: node linkType: hard +"@udecode/cn@workspace:packages/cn": + version: 0.0.0-use.local + resolution: "@udecode/cn@workspace:packages/cn" + dependencies: + "@udecode/react-utils": "npm:24.3.0" + clsx: "npm:^1.2.1" + peerDependencies: + class-variance-authority: ">=0.7.0" + react: ">=16.8.0" + react-dom: ">=16.8.0" + tailwind-merge: ">=2.2.0" + languageName: unknown + linkType: soft + "@udecode/plate-alignment@npm:28.0.0, @udecode/plate-alignment@workspace:^, @udecode/plate-alignment@workspace:packages/alignment": version: 0.0.0-use.local resolution: "@udecode/plate-alignment@workspace:packages/alignment" @@ -6329,6 +6343,7 @@ __metadata: dependencies: "@udecode/plate-core": "npm:28.0.0" "@udecode/plate-utils": "npm:28.0.0" + "@udecode/react-utils": "npm:24.3.0" "@udecode/slate": "npm:25.0.0" "@udecode/slate-react": "npm:25.0.0" "@udecode/slate-utils": "npm:25.0.0" @@ -6973,8 +6988,8 @@ __metadata: version: 0.0.0-use.local resolution: "@udecode/plate-utils@workspace:packages/plate-utils" dependencies: - "@radix-ui/react-slot": "npm:^1.0.2" "@udecode/plate-core": "npm:28.0.0" + "@udecode/react-utils": "npm:24.3.0" "@udecode/slate": "npm:25.0.0" "@udecode/slate-react": "npm:25.0.0" "@udecode/slate-utils": "npm:25.0.0" @@ -7061,10 +7076,24 @@ __metadata: languageName: unknown linkType: soft +"@udecode/react-utils@npm:24.3.0, @udecode/react-utils@workspace:packages/react-utils": + version: 0.0.0-use.local + resolution: "@udecode/react-utils@workspace:packages/react-utils" + dependencies: + "@radix-ui/react-slot": "npm:^1.0.2" + "@udecode/utils": "npm:24.3.0" + clsx: "npm:^1.2.1" + peerDependencies: + react: ">=16.8.0" + react-dom: ">=16.8.0" + languageName: unknown + linkType: soft + "@udecode/slate-react@npm:25.0.0, @udecode/slate-react@workspace:^, @udecode/slate-react@workspace:packages/slate-react": version: 0.0.0-use.local resolution: "@udecode/slate-react@workspace:packages/slate-react" dependencies: + "@udecode/react-utils": "npm:24.3.0" "@udecode/slate": "npm:25.0.0" "@udecode/utils": "npm:24.3.0" peerDependencies: @@ -8371,12 +8400,12 @@ __metadata: languageName: node linkType: hard -"class-variance-authority@npm:^0.6.1": - version: 0.6.1 - resolution: "class-variance-authority@npm:0.6.1" +"class-variance-authority@npm:^0.7.0": + version: 0.7.0 + resolution: "class-variance-authority@npm:0.7.0" dependencies: - clsx: "npm:1.2.1" - checksum: 0685b1a92d97fbb26b1031a9dcb9d419c4bbb163aa20a6025a11f3a92ebd6209da277c63f789b294d890a0d500558de285fd842068c824d40b5beda97e01aa1a + clsx: "npm:2.0.0" + checksum: e11c57edf4bf50ef1c97bae41d68885afbaaedba26c48b7cc5dfb033390fed7012147e9532168d8c4f3497fce4dff15e20e6e60b8c9c9a4b0fe26b0e804513db languageName: node linkType: hard @@ -8475,7 +8504,14 @@ __metadata: languageName: node linkType: hard -"clsx@npm:1.2.1, clsx@npm:^1.1.1, clsx@npm:^1.2.1": +"clsx@npm:2.0.0": + version: 2.0.0 + resolution: "clsx@npm:2.0.0" + checksum: c09f43b3144a0b7826b6b11b6a111b2c7440831004eecc02d333533c5e58ef0aa5f2dce071d3b25fbb8c8ea97b45df96c74bcc1d51c8c2027eb981931107b0cd + languageName: node + linkType: hard + +"clsx@npm:^1.1.1, clsx@npm:^1.2.1": version: 1.2.1 resolution: "clsx@npm:1.2.1" checksum: 34dead8bee24f5e96f6e7937d711978380647e936a22e76380290e35486afd8634966ce300fc4b74a32f3762c7d4c0303f442c3e259f4ce02374eb0c82834f27 @@ -21625,7 +21661,7 @@ __metadata: "@vercel/og": "npm:^0.5.8" autoprefixer: "npm:^10.4.14" change-case: "npm:^4.1.2" - class-variance-authority: "npm:^0.6.1" + class-variance-authority: "npm:^0.7.0" clsx: "npm:^1.2.1" cmdk: "npm:^0.2.0" concurrently: "npm:^8.2.0"