refactor

apps/www/src/app/(app)/dev/page.tsx

@@ -18,7 +18,7 @@ import {
 import { BaseCommentsPlugin } from '@udecode/plate-comments';
 import {
   BaseParagraphPlugin,
-  PlateStaticLeaf,
+  PlateLeafStatic,
   createSlateEditor,
 } from '@udecode/plate-common';
 import { BaseDatePlugin } from '@udecode/plate-date';
@@ -133,7 +133,7 @@ export default function DevPage() {
   const staticComponents = {
     [BaseAudioPlugin.key]: MediaAudioElementStatic,
     [BaseBlockquotePlugin.key]: BlockquoteElementStatic,
-    [BaseBoldPlugin.key]: withProps(PlateStaticLeaf, { as: 'strong' }),
+    [BaseBoldPlugin.key]: withProps(PlateLeafStatic, { as: 'strong' }),
     [BaseCodeBlockPlugin.key]: CodeBlockElementStatic,
     [BaseCodeLinePlugin.key]: CodeLineElementStatic,
     [BaseCodePlugin.key]: CodeLeafStatic,
@@ -145,22 +145,22 @@ export default function DevPage() {
     [BaseFilePlugin.key]: MediaFileElementStatic,
     [BaseHorizontalRulePlugin.key]: HrElementStatic,
     [BaseImagePlugin.key]: ImageElementStatic,
-    [BaseItalicPlugin.key]: withProps(PlateStaticLeaf, { as: 'em' }),
+    [BaseItalicPlugin.key]: withProps(PlateLeafStatic, { as: 'em' }),
     [BaseKbdPlugin.key]: KbdLeafStatic,
     [BaseLinkPlugin.key]: LinkElementStatic,
     // [BaseMediaEmbedPlugin.key]: MediaEmbedElementStatic,
     [BaseMentionPlugin.key]: MentionElementStatic,
     [BaseParagraphPlugin.key]: ParagraphElementStatic,
-    [BaseStrikethroughPlugin.key]: withProps(PlateStaticLeaf, { as: 'del' }),
-    [BaseSubscriptPlugin.key]: withProps(PlateStaticLeaf, { as: 'sub' }),
-    [BaseSuperscriptPlugin.key]: withProps(PlateStaticLeaf, { as: 'sup' }),
+    [BaseStrikethroughPlugin.key]: withProps(PlateLeafStatic, { as: 'del' }),
+    [BaseSubscriptPlugin.key]: withProps(PlateLeafStatic, { as: 'sub' }),
+    [BaseSuperscriptPlugin.key]: withProps(PlateLeafStatic, { as: 'sup' }),
     [BaseTableCellHeaderPlugin.key]: TableCellHeaderStaticElement,
     [BaseTableCellPlugin.key]: TableCellElementStatic,
     [BaseTablePlugin.key]: TableElementStatic,
     [BaseTableRowPlugin.key]: TableRowElementStatic,
     [BaseTocPlugin.key]: TocElementStatic,
     [BaseTogglePlugin.key]: ToggleElementStatic,
-    [BaseUnderlinePlugin.key]: withProps(PlateStaticLeaf, { as: 'u' }),
+    [BaseUnderlinePlugin.key]: withProps(PlateLeafStatic, { as: 'u' }),
     [BaseVideoPlugin.key]: MediaVideoElementStatic,
     [HEADING_KEYS.h1]: withProps(HeadingElementStatic, { variant: 'h1' }),
     [HEADING_KEYS.h2]: withProps(HeadingElementStatic, { variant: 'h2' }),

apps/www/src/components/mode-switcher.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import * as React from 'react';
 
 import { MoonIcon, SunIcon } from 'lucide-react';

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

@@ -1,23 +1,22 @@
 import React from 'react';
 
-import type { StaticElementProps } from '@udecode/plate-common';
+import type { PlateElementStaticProps } from '@udecode/plate-common';
 
-import { PlateStaticElement } from '@udecode/plate-common';
-
-import { cn } from '../lib/utils';
+import { cn } from '@udecode/cn';
+import { PlateElementStatic } from '@udecode/plate-common';
 
 export const BlockquoteElementStatic = ({
   children,
   className,
   ...props
-}: StaticElementProps) => {
+}: PlateElementStaticProps) => {
   return (
-    <PlateStaticElement
+    <PlateElementStatic
       as="blockquote"
       className={cn('my-1 border-l-2 pl-6 italic', className)}
       {...props}
     >
       {children}
-    </PlateStaticElement>
+    </PlateElementStatic>
   );
 };

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

@@ -1,4 +1,5 @@
 'use client';
+
 import React from 'react';
 
 import { cn, withRef } from '@udecode/cn';

apps/www/src/registry/default/plate-ui/code-block-element-static.tsx

@@ -1,30 +1,29 @@
 import React from 'react';
 
 import type { TCodeBlockElement } from '@udecode/plate-code-block';
-import type { StaticElementProps } from '@udecode/plate-common';
+import type { PlateElementStaticProps } from '@udecode/plate-common';
 
-import { PlateStaticElement } from '@udecode/plate-common';
-
-import { cn } from '../lib/utils';
+import { cn } from '@udecode/cn';
+import { PlateElementStatic } from '@udecode/plate-common';
 
 export const CodeBlockElementStatic = ({
   children,
-  element,
   ...props
-}: StaticElementProps<TCodeBlockElement>) => {
+}: PlateElementStaticProps<TCodeBlockElement>) => {
+  const { element } = props;
+
   const codeClassName = element?.lang
     ? `${element.lang} language-${element.lang}`
     : '';
 
   return (
-    <PlateStaticElement
+    <PlateElementStatic
       className={cn('relative py-1', codeClassName)}
       {...props}
-      element={element}
     >
       <pre className="overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]">
         <code>{children}</code>
       </pre>
-    </PlateStaticElement>
+    </PlateElementStatic>
   );
 };

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

@@ -1,4 +1,5 @@
 'use client';
+
 import React from 'react';
 
 import { cn, withRef } from '@udecode/cn';

apps/www/src/registry/default/plate-ui/code-leaf-static.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 
-import type { StaticLeafProps } from '@udecode/plate-common';
+import type { PlateLeafStaticProps } from '@udecode/plate-common';
 
-import { PlateStaticLeaf } from '@udecode/plate-common';
+import { PlateLeafStatic } from '@udecode/plate-common';
 
-export const CodeLeafStatic = ({ children, ...props }: StaticLeafProps) => {
+export const CodeLeafStatic = ({ children, ...props }: PlateLeafStaticProps) => {
   return (
-    <PlateStaticLeaf {...props}>
+    <PlateLeafStatic {...props}>
       <code className="whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm">
         {children}
       </code>
-    </PlateStaticLeaf>
+    </PlateLeafStatic>
   );
 };

apps/www/src/registry/default/plate-ui/code-leaf.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import React from 'react';
 
 import { cn, withRef } from '@udecode/cn';

apps/www/src/registry/default/plate-ui/code-line-element-static.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import type { StaticElementProps } from '@udecode/plate-common';
+import type { PlateElementStaticProps } from '@udecode/plate-common';
 
-import { PlateStaticElement } from '@udecode/plate-common';
+import { PlateElementStatic } from '@udecode/plate-common';
 
 export const CodeLineElementStatic = ({
   children,
   ...props
-}: StaticElementProps) => {
-  return <PlateStaticElement {...props}>{children}</PlateStaticElement>;
+}: PlateElementStaticProps) => {
+  return <PlateElementStatic {...props}>{children}</PlateElementStatic>;
 };

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

@@ -1,4 +1,5 @@
 'use client';
+
 import React from 'react';
 
 import { withRef } from '@udecode/cn';

apps/www/src/registry/default/plate-ui/code-syntax-leaf-static.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import type { StaticLeafProps } from '@udecode/plate-common';
+import type { PlateLeafStaticProps } from '@udecode/plate-common';
 
-import { PlateStaticLeaf } from '@udecode/plate-common';
+import { PlateLeafStatic } from '@udecode/plate-common';
 
-export function CodeSyntaxLeafStatic({ children, ...props }: StaticLeafProps) {
-  return <PlateStaticLeaf {...props}>{children}</PlateStaticLeaf>;
+export function CodeSyntaxLeafStatic({ children, ...props }: PlateLeafStaticProps) {
+  return <PlateLeafStatic {...props}>{children}</PlateLeafStatic>;
 }

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

@@ -1,27 +1,27 @@
 import React from 'react';
 
-import type { StaticElementProps } from '@udecode/plate-common';
+import type { PlateElementStaticProps } from '@udecode/plate-common';
 import type { TColumnElement } from '@udecode/plate-layout';
 
 import { cn } from '@udecode/cn';
-import { PlateStaticElement } from '@udecode/plate-common';
+import { PlateElementStatic } from '@udecode/plate-common';
 
 export function ColumnElementStatic({
   children,
   className,
   element,
   ...props
-}: StaticElementProps) {
+}: PlateElementStaticProps) {
   const { width } = element as TColumnElement;
 
   return (
-    <PlateStaticElement
+    <PlateElementStatic
       className={cn('rounded-lg border border-dashed p-1.5', className)}
       style={{ width: width ?? '100%' }}
       element={element}
       {...props}
     >
       {children}
-    </PlateStaticElement>
+    </PlateElementStatic>
   );
 }

apps/www/src/registry/default/plate-ui/column-group-element-staic.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
 
-import type { StaticElementProps } from '@udecode/plate-common';
+import type { PlateElementStaticProps } from '@udecode/plate-common';
 
 import { cn } from '@udecode/cn';
-import { PlateStaticElement } from '@udecode/plate-common';
+import { PlateElementStatic } from '@udecode/plate-common';
 
 export function ColumnGroupElementStatic({
   children,
   className,
   element,
   ...props
-}: StaticElementProps) {
+}: PlateElementStaticProps) {
   return (
-    <PlateStaticElement
+    <PlateElementStatic
       className={cn('my-2', className)}
       element={element}
       {...props}
     >
       <div className={cn('flex size-full gap-4 rounded')}>{children}</div>
-    </PlateStaticElement>
+    </PlateElementStatic>
   );
 }

apps/www/src/registry/default/plate-ui/comment-leaf-static.tsx

@@ -1,25 +1,25 @@
 import React from 'react';
 
 import type { TCommentText } from '@udecode/plate-comments';
-import type { StaticLeafProps } from '@udecode/plate-common';
+import type { PlateLeafStaticProps } from '@udecode/plate-common';
 
 import { cn } from '@udecode/cn';
-import { PlateStaticLeaf } from '@udecode/plate-common';
+import { PlateLeafStatic } from '@udecode/plate-common';
 
 export function CommentLeafStatic({
   children,
   className,
   ...props
-}: StaticLeafProps<TCommentText>) {
+}: PlateLeafStaticProps<TCommentText>) {
   return (
-    <PlateStaticLeaf
+    <PlateLeafStatic
       className={cn(
         'border-b-2 border-b-highlight/35 bg-highlight/15',
         className
       )}
       {...props}
     >
       <>{children}</>
-    </PlateStaticLeaf>
+    </PlateLeafStatic>
   );
 }

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

@@ -1,18 +1,18 @@
 import React from 'react';
 
-import type { StaticElementProps } from '@udecode/plate-common';
+import type { PlateElementStaticProps } from '@udecode/plate-common';
 
 import { cn } from '@udecode/cn';
-import { PlateStaticElement } from '@udecode/plate-common';
+import { PlateElementStatic } from '@udecode/plate-common';
 
 export function DateElementStatic({
   children,
   className,
   element,
   ...props
-}: StaticElementProps) {
+}: PlateElementStaticProps) {
   return (
-    <PlateStaticElement
+    <PlateElementStatic
       className={cn('inline-block', className)}
       element={element}
       {...props}
@@ -51,6 +51,6 @@ export function DateElementStatic({
         )}
       </span>
       {children}
-    </PlateStaticElement>
+    </PlateElementStatic>
   );
 }

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

@@ -1,4 +1,5 @@
 'use client';
+
 import React from 'react';
 
 import { withRef } from '@udecode/cn';

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
-import type { StaticElementProps } from '@udecode/plate-common';
+import type { PlateElementStaticProps } from '@udecode/plate-common';
 
 import { cn } from '@udecode/cn';
-import { PlateStaticElement } from '@udecode/plate-common';
+import { PlateElementStatic } from '@udecode/plate-common';
 import { cva } from 'class-variance-authority';
 
-interface HeadingElementViewProps extends StaticElementProps {
+interface HeadingElementViewProps extends PlateElementStaticProps {
   variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
@@ -30,12 +30,12 @@ export const HeadingElementStatic = ({
   ...props
 }: HeadingElementViewProps) => {
   return (
-    <PlateStaticElement
+    <PlateElementStatic
       as={variant}
       className={cn(className, headingVariants({ variant }))}
       {...props}
     >
       {children}
-    </PlateStaticElement>
+    </PlateElementStatic>
   );
 };

apps/www/src/registry/default/plate-ui/highlight-leaf-static.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
 
-import type { StaticLeafProps } from '@udecode/plate-core';
+import type { PlateLeafStaticProps } from '@udecode/plate-core';
 
 import { cn } from '@udecode/cn';
-import { PlateStaticLeaf } from '@udecode/plate-common';
+import { PlateLeafStatic } from '@udecode/plate-common';
 
 export function HighlightLeafStatic({
   children,
   className,
   ...props
-}: StaticLeafProps) {
+}: PlateLeafStaticProps) {
   return (
-    <PlateStaticLeaf
+    <PlateLeafStatic
       className={cn('bg-highlight/30 text-inherit', className)}
       {...props}
     >
       <mark>{children}</mark>
-    </PlateStaticLeaf>
+    </PlateLeafStatic>
   );
 }