refactor

udecode · Dec 14, 2024 · a422876 · a422876
1 parent b9cade8
commit a422876
Show file tree

Hide file tree

Showing 24 changed files with 164 additions and 141 deletions.
diff --git a/apps/www/src/app/(app)/dev/page.tsx b/apps/www/src/app/(app)/dev/page.tsx
@@ -65,63 +65,70 @@ import { kbdValue } from '@/registry/default/example/values/kbd-value';
 import { lineHeightValue } from '@/registry/default/example/values/line-height-value';
 import { linkValue } from '@/registry/default/example/values/link-value';
 import { mediaValue } from '@/registry/default/example/values/media-value';
-import { tableValue } from '@/registry/default/example/values/table-value';
-import { BlockquoteStaticElement } from '@/registry/default/plate-static-ui/blockquote-element';
-import { CodeBlockElementStatic } from '@/registry/default/plate-static-ui/code-block-element';
-import { CodeStaticLeaf } from '@/registry/default/plate-static-ui/code-leaf';
-import { CodeLineStaticElement } from '@/registry/default/plate-static-ui/code-line-element';
-import { CodeSyntaxStaticLeaf } from '@/registry/default/plate-static-ui/code-syntax-leaf';
-import { HeadingStaticElement } from '@/registry/default/plate-static-ui/heading-element';
-import { HrStaticElement } from '@/registry/default/plate-static-ui/hr-element';
-import { ImageStaticElement } from '@/registry/default/plate-static-ui/image-element';
 import {
-  TodoLi,
-  TodoMarker,
-} from '@/registry/default/plate-static-ui/indent-todo-marker';
-import { KbdStaticLeaf } from '@/registry/default/plate-static-ui/kbd-leaf';
-import { LinkStaticElement } from '@/registry/default/plate-static-ui/link-element';
-import { MediaAudioStaticElement } from '@/registry/default/plate-static-ui/media-audio-element';
-import { MediaFileStaticElement } from '@/registry/default/plate-static-ui/media-file-element';
-import { MediaVideoStaticElement } from '@/registry/default/plate-static-ui/media-video-element';
-import { ParagraphStaticElement } from '@/registry/default/plate-static-ui/paragraph-element';
+  tableMergeValue,
+  tableValue,
+} from '@/registry/default/example/values/table-value';
+import { BlockquoteElementStatic } from '@/registry/default/plate-ui/blockquote-element-static';
+import { CodeBlockElementStatic } from '@/registry/default/plate-ui/code-block-element-static';
+import { CodeLeafStatic } from '@/registry/default/plate-ui/code-leaf-static';
+import { CodeLineElementStatic } from '@/registry/default/plate-ui/code-line-element-static';
+import { CodeSyntaxLeafStatic } from '@/registry/default/plate-ui/code-syntax-leaf-static';
+import { HeadingElementStatic } from '@/registry/default/plate-ui/heading-element-static';
+import { HrElementStatic } from '@/registry/default/plate-ui/hr-element-static';
+import { ImageElementStatic } from '@/registry/default/plate-ui/image-element-static';
 import {
+  FireLiComponentStatic,
+  FireMarkerStatic,
+} from '@/registry/default/plate-ui/indent-fire-marker-static';
+import {
+  TodoLiStatic,
+  TodoMarkerStatic,
+} from '@/registry/default/plate-ui/indent-todo-marker-static';
+import { KbdLeafStatic } from '@/registry/default/plate-ui/kbd-leaf-static';
+import { LinkElementStatic } from '@/registry/default/plate-ui/link-element-static';
+import { MediaAudioElementStatic } from '@/registry/default/plate-ui/media-audio-element-static';
+import { MediaFileElementStatic } from '@/registry/default/plate-ui/media-file-element-static';
+import { MediaVideoElementStatic } from '@/registry/default/plate-ui/media-video-element-static';
+import { ParagraphElementStatic } from '@/registry/default/plate-ui/paragraph-element-static';
+import {
+  TableCellElementStatic,
   TableCellHeaderStaticElement,
-  TableCellStaticElement,
-} from '@/registry/default/plate-static-ui/table-cell-element';
-import { TableStaticElement } from '@/registry/default/plate-static-ui/table-element';
-import { TableRowStaticElement } from '@/registry/default/plate-static-ui/table-row-element';
+} from '@/registry/default/plate-ui/table-cell-element-static';
+import { TableElementStatic } from '@/registry/default/plate-ui/table-element-static';
+import { TableRowElementStatic } from '@/registry/default/plate-ui/table-row-element-static';
 
 export default async function DevPage() {
   const staticComponents = {
-    [BaseAudioPlugin.key]: MediaAudioStaticElement,
-    [BaseBlockquotePlugin.key]: BlockquoteStaticElement,
+    [BaseAudioPlugin.key]: MediaAudioElementStatic,
+    [BaseBlockquotePlugin.key]: BlockquoteElementStatic,
     [BaseBoldPlugin.key]: withProps(PlateStaticLeaf, { as: 'strong' }),
     [BaseCodeBlockPlugin.key]: CodeBlockElementStatic,
-    [BaseCodeLinePlugin.key]: CodeLineStaticElement,
-    [BaseCodePlugin.key]: CodeStaticLeaf,
-    [BaseCodeSyntaxPlugin.key]: CodeSyntaxStaticLeaf,
-    [BaseFilePlugin.key]: MediaFileStaticElement,
-    [BaseHorizontalRulePlugin.key]: HrStaticElement,
-    [BaseImagePlugin.key]: ImageStaticElement,
+    [BaseCodeLinePlugin.key]: CodeLineElementStatic,
+    [BaseCodePlugin.key]: CodeLeafStatic,
+    [BaseCodeSyntaxPlugin.key]: CodeSyntaxLeafStatic,
+    [BaseFilePlugin.key]: MediaFileElementStatic,
+    [BaseHorizontalRulePlugin.key]: HrElementStatic,
+    [BaseImagePlugin.key]: ImageElementStatic,
     [BaseItalicPlugin.key]: withProps(PlateStaticLeaf, { as: 'em' }),
-    [BaseKbdPlugin.key]: KbdStaticLeaf,
-    [BaseLinkPlugin.key]: LinkStaticElement,
-    [BaseParagraphPlugin.key]: ParagraphStaticElement,
+    [BaseKbdPlugin.key]: KbdLeafStatic,
+    [BaseLinkPlugin.key]: LinkElementStatic,
+    [BaseParagraphPlugin.key]: ParagraphElementStatic,
     [BaseStrikethroughPlugin.key]: withProps(PlateStaticLeaf, { as: 'del' }),
     [BaseSubscriptPlugin.key]: withProps(PlateStaticLeaf, { as: 'sub' }),
     [BaseSuperscriptPlugin.key]: withProps(PlateStaticLeaf, { as: 'sup' }),
     [BaseTableCellHeaderPlugin.key]: TableCellHeaderStaticElement,
-    [BaseTableCellPlugin.key]: TableCellStaticElement,
-    [BaseTablePlugin.key]: TableStaticElement,
-    [BaseTableRowPlugin.key]: TableRowStaticElement,
+    [BaseTableCellPlugin.key]: TableCellElementStatic,
+    [BaseTablePlugin.key]: TableElementStatic,
+    [BaseTableRowPlugin.key]: TableRowElementStatic,
     [BaseUnderlinePlugin.key]: withProps(PlateStaticLeaf, { as: 'u' }),
-    [BaseVideoPlugin.key]: MediaVideoStaticElement,
-    [HEADING_KEYS.h1]: withProps(HeadingStaticElement, { variant: 'h1' }),
-    [HEADING_KEYS.h2]: withProps(HeadingStaticElement, { variant: 'h2' }),
-    [HEADING_KEYS.h3]: withProps(HeadingStaticElement, { variant: 'h3' }),
-    [HEADING_KEYS.h4]: withProps(HeadingStaticElement, { variant: 'h4' }),
-    [HEADING_KEYS.h5]: withProps(HeadingStaticElement, { variant: 'h5' }),
-    [HEADING_KEYS.h6]: withProps(HeadingStaticElement, { variant: 'h6' }),
+    [BaseVideoPlugin.key]: MediaVideoElementStatic,
+    [HEADING_KEYS.h1]: withProps(HeadingElementStatic, { variant: 'h1' }),
+    [HEADING_KEYS.h2]: withProps(HeadingElementStatic, { variant: 'h2' }),
+    [HEADING_KEYS.h3]: withProps(HeadingElementStatic, { variant: 'h3' }),
+    [HEADING_KEYS.h4]: withProps(HeadingElementStatic, { variant: 'h4' }),
+    [HEADING_KEYS.h5]: withProps(HeadingElementStatic, { variant: 'h5' }),
+    [HEADING_KEYS.h6]: withProps(HeadingElementStatic, { variant: 'h6' }),
   };
 
   const editorStatic = createSlateEditor({
@@ -161,14 +168,14 @@ export default async function DevPage() {
         },
         options: {
           listStyleTypes: {
-            // fire: {
-            //   liComponent: FireLiComponent,
-            //   markerComponent: FireMarker,
-            //   type: 'fire',
-            // },
+            fire: {
+              liComponent: FireLiComponentStatic,
+              markerComponent: FireMarkerStatic,
+              type: 'fire',
+            },
             todo: {
-              liComponent: TodoLi,
-              markerComponent: TodoMarker,
+              liComponent: TodoLiStatic,
+              markerComponent: TodoMarkerStatic,
               type: 'todo',
             },
           },
@@ -212,30 +219,11 @@ export default async function DevPage() {
       ...indentListValue,
       ...mediaValue,
       ...alignValue,
+      ...tableMergeValue,
     ],
   });
 
-  // console.log(
-  //   [
-  //     ...basicNodesValue,
-  //     ...linkValue,
-  //     ...tableValue,
-  //     ...horizontalRuleValue,
-  //     ...fontValue,
-  //     ...highlightValue,
-  //     ...kbdValue,
-  //     ...alignValue,
-  //     ...lineHeightValue,
-  //     ...indentValue,
-  //     ...indentListValue,
-  //     ...mediaValue,
-  //     ...alignValue,
-  //   ],
-  //   'fj'
-  // );
-
   const html = await serializePlateStatic(editorStatic, staticComponents);
-  console.log('🚀 ~ DevPage ~ html:', html);
 
   return (
     <div className="mx-auto w-1/2">

diff --git a/...lt/plate-static-ui/blockquote-element.tsx → ...lt/plate-ui/blockquote-element-static.tsx b/...lt/plate-static-ui/blockquote-element.tsx → ...lt/plate-ui/blockquote-element-static.tsx
@@ -6,7 +6,7 @@ import { PlateStaticElement } from '@udecode/plate-common';
 
 import { cn } from '../lib/utils';
 
-export const BlockquoteStaticElement = ({
+export const BlockquoteElementStatic = ({
   children,
   className,
   ...props

diff --git a/...stry/default/plate-static-ui/checkbox.tsx → ...stry/default/plate-ui/checkbox-static.tsx b/...stry/default/plate-static-ui/checkbox.tsx → ...stry/default/plate-ui/checkbox-static.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { cn } from '@udecode/cn';
 import { Check } from 'lucide-react';
 
-export function StaticCheckbox({
+export function CheckboxStatic({
   className,
   ...props
 }: {

diff --git a/...lt/plate-static-ui/code-block-element.tsx → ...lt/plate-ui/code-block-element-static.tsx b/...lt/plate-static-ui/code-block-element.tsx → ...lt/plate-ui/code-block-element-static.tsx
diff --git a/...try/default/plate-static-ui/code-leaf.tsx → ...try/default/plate-ui/code-leaf-static.tsx b/...try/default/plate-static-ui/code-leaf.tsx → ...try/default/plate-ui/code-leaf-static.tsx
@@ -4,7 +4,7 @@ import type { StaticLeafProps } from '@udecode/plate-common';
 
 import { PlateStaticLeaf } from '@udecode/plate-common';
 
-export const CodeStaticLeaf = ({ children, ...props }: StaticLeafProps) => {
+export const CodeLeafStatic = ({ children, ...props }: StaticLeafProps) => {
   return (
     <PlateStaticLeaf {...props}>
       <code className="whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm">

diff --git a/...ult/plate-static-ui/code-line-element.tsx → ...ult/plate-ui/code-line-element-static.tsx b/...ult/plate-static-ui/code-line-element.tsx → ...ult/plate-ui/code-line-element-static.tsx
@@ -4,7 +4,7 @@ import type { StaticElementProps } from '@udecode/plate-common';
 
 import { PlateStaticElement } from '@udecode/plate-common';
 
-export const CodeLineStaticElement = ({
+export const CodeLineElementStatic = ({
   children,
   ...props
 }: StaticElementProps) => {

diff --git a/...ault/plate-static-ui/code-syntax-leaf.tsx → ...ault/plate-ui/code-syntax-leaf-static.tsx b/...ault/plate-static-ui/code-syntax-leaf.tsx → ...ault/plate-ui/code-syntax-leaf-static.tsx
@@ -4,6 +4,6 @@ import type { StaticLeafProps } from '@udecode/plate-common';
 
 import { PlateStaticLeaf } from '@udecode/plate-common';
 
-export function CodeSyntaxStaticLeaf({ children, ...props }: StaticLeafProps) {
+export function CodeSyntaxLeafStatic({ children, ...props }: StaticLeafProps) {
   return <PlateStaticLeaf {...props}>{children}</PlateStaticLeaf>;
 }
diff --git a/...fault/plate-static-ui/heading-element.tsx → ...fault/plate-ui/heading-element-static.tsx b/...fault/plate-static-ui/heading-element.tsx → ...fault/plate-ui/heading-element-static.tsx
@@ -10,7 +10,7 @@ interface HeadingElementViewProps extends StaticElementProps {
   variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
-export const headingVariants = cva('relative mb-1', {
+const headingVariants = cva('relative mb-1', {
   variants: {
     variant: {
       h1: 'mt-[1.6em] pb-1 font-heading text-4xl font-bold',
@@ -23,7 +23,7 @@ export const headingVariants = cva('relative mb-1', {
   },
 });
 
-export const HeadingStaticElement = ({
+export const HeadingElementStatic = ({
   children,
   className,
   variant = 'h1',

diff --git a/apps/www/src/registry/default/plate-ui/heading-element.tsx b/apps/www/src/registry/default/plate-ui/heading-element.tsx
@@ -3,10 +3,23 @@
 import React from 'react';
 
 import { withRef, withVariants } from '@udecode/cn';
+import { cva } from 'class-variance-authority';
 
-import { headingVariants } from '../plate-static-ui/heading-element';
 import { PlateElement } from './plate-element';
 
+const headingVariants = cva('relative mb-1', {
+  variants: {
+    variant: {
+      h1: 'mt-[1.6em] pb-1 font-heading text-4xl font-bold',
+      h2: 'mt-[1.4em] pb-px font-heading text-2xl font-semibold tracking-tight',
+      h3: 'mt-[1em] pb-px font-heading text-xl font-semibold tracking-tight',
+      h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',
+      h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',
+      h6: 'mt-[0.75em] text-base font-semibold tracking-tight',
+    },
+  },
+});
+
 const HeadingElementVariants = withVariants(PlateElement, headingVariants, [
   'variant',
 ]);

diff --git a/...efault/plate-static-ui/highlight-leaf.tsx → ...efault/plate-ui/highlight-leaf-static.tsx b/...efault/plate-static-ui/highlight-leaf.tsx → ...efault/plate-ui/highlight-leaf-static.tsx
@@ -5,7 +5,7 @@ import type { StaticLeafProps } from '@udecode/plate-core';
 import { cn } from '@udecode/cn';
 import { PlateStaticLeaf } from '@udecode/plate-common';
 
-export function HighlightStaticLeaf({
+export function HighlightLeafStatic({
   children,
   className,
   ...props

diff --git a/...ry/default/plate-static-ui/hr-element.tsx → ...ry/default/plate-ui/hr-element-static.tsx b/...ry/default/plate-static-ui/hr-element.tsx → ...ry/default/plate-ui/hr-element-static.tsx
@@ -5,7 +5,7 @@ import type { StaticElementProps } from '@udecode/plate-core';
 import { cn } from '@udecode/cn';
 import { PlateStaticElement } from '@udecode/plate-common';
 
-export function HrStaticElement({
+export function HrElementStatic({
   children,
   className,
   nodeProps,

diff --git a/...default/plate-static-ui/image-element.tsx → ...default/plate-ui/image-element-static.tsx b/...default/plate-static-ui/image-element.tsx → ...default/plate-ui/image-element-static.tsx
@@ -7,7 +7,7 @@ import type { TImageElement } from '@udecode/plate-media';
 import { cn } from '@udecode/cn';
 import { PlateStaticElement, getNodeString } from '@udecode/plate-common';
 
-export function ImageStaticElement({
+export function ImageElementStatic({
   children,
   className,
   element,

diff --git a/apps/www/src/registry/default/plate-ui/indent-fire-marker-static.tsx b/apps/www/src/registry/default/plate-ui/indent-fire-marker-static.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import type { PlateRenderElementProps } from '@udecode/plate-common/react';
+import type { TIndentElement } from '@udecode/plate-indent';
+
+export function FireMarkerStatic({
+  element,
+}: Omit<PlateRenderElementProps, 'children'>) {
+  return (
+    <div contentEditable={false}>
+      <span style={{ left: -26, position: 'absolute', top: -1 }}>
+        {(element as TIndentElement).indent % 2 === 0 ? '🔥' : '🚀'}
+      </span>
+    </div>
+  );
+}
+
+export function FireLiComponentStatic(props: PlateRenderElementProps) {
+  const { children } = props;
+
+  return <span>{children}</span>;
+}
diff --git a/...lt/plate-static-ui/indent-todo-marker.tsx → ...lt/plate-ui/indent-todo-marker-static.tsx b/...lt/plate-static-ui/indent-todo-marker.tsx → ...lt/plate-ui/indent-todo-marker-static.tsx
@@ -4,22 +4,22 @@ import type { PlateRenderElementProps } from '@udecode/plate-common/react';
 
 import { cn } from '@udecode/cn';
 
-import { StaticCheckbox } from './checkbox';
+import { CheckboxStatic } from './checkbox-static';
 
-export const TodoMarker = ({
+export const TodoMarkerStatic = ({
   element,
 }: Omit<PlateRenderElementProps, 'children'>) => {
   return (
     <div contentEditable={false}>
-      <StaticCheckbox
+      <CheckboxStatic
         style={{ left: -24, position: 'absolute', top: 4 }}
         checked={element.checked as boolean}
       />
     </div>
   );
 };
 
-export const TodoLi = (props: PlateRenderElementProps) => {
+export const TodoLiStatic = (props: PlateRenderElementProps) => {
   const { children, element } = props;
 
   return (

diff --git a/...stry/default/plate-static-ui/kbd-leaf.tsx → ...stry/default/plate-ui/kbd-leaf-static.tsx b/...stry/default/plate-static-ui/kbd-leaf.tsx → ...stry/default/plate-ui/kbd-leaf-static.tsx
@@ -5,7 +5,7 @@ import type { StaticLeafProps } from '@udecode/plate-core';
 import { cn } from '@udecode/cn';
 import { PlateStaticLeaf } from '@udecode/plate-common';
 
-export function KbdStaticLeaf({
+export function KbdLeafStatic({
   children,
   className,
   ...props

diff --git a/.../default/plate-static-ui/link-element.tsx → .../default/plate-ui/link-element-static.tsx b/.../default/plate-static-ui/link-element.tsx → .../default/plate-ui/link-element-static.tsx
@@ -5,7 +5,7 @@ import type { StaticElementProps } from '@udecode/plate-core';
 import { cn } from '@udecode/cn';
 import { PlateStaticElement } from '@udecode/plate-common';
 
-export const LinkStaticElement = ({
+export const LinkElementStatic = ({
   children,
   className,
   element,
@@ -15,7 +15,7 @@ export const LinkStaticElement = ({
     <PlateStaticElement
       as="a"
       className={cn(
-        'text-primary decoration-primary font-medium underline underline-offset-4',
+        'font-medium text-primary underline decoration-primary underline-offset-4',
         className
       )}
       element={element}

diff --git a/...t/plate-static-ui/media-audio-element.tsx → ...t/plate-ui/media-audio-element-static.tsx b/...t/plate-static-ui/media-audio-element.tsx → ...t/plate-ui/media-audio-element-static.tsx
@@ -6,7 +6,7 @@ import type { TAudioElement } from '@udecode/plate-media';
 import { cn } from '@udecode/cn';
 import { PlateStaticElement } from '@udecode/plate-common';
 
-export function MediaAudioStaticElement({
+export function MediaAudioElementStatic({
   children,
   className,
   element,

diff --git a/...lt/plate-static-ui/media-file-element.tsx → ...lt/plate-ui/media-file-element-static.tsx b/...lt/plate-static-ui/media-file-element.tsx → ...lt/plate-ui/media-file-element-static.tsx
@@ -7,7 +7,7 @@ import { cn } from '@udecode/cn';
 import { PlateStaticElement } from '@udecode/plate-common';
 import { FileUp } from 'lucide-react';
 
-export const MediaFileStaticElement = ({
+export const MediaFileElementStatic = ({
   children,
   className,
   element,
@@ -22,7 +22,7 @@ export const MediaFileStaticElement = ({
       {...props}
     >
       <div
-        className="hover:bg-muted group relative m-0 flex cursor-pointer items-center rounded px-0.5 py-[3px]"
+        className="group relative m-0 flex cursor-pointer items-center rounded px-0.5 py-[3px] hover:bg-muted"
         role="button"
       >
         <div className="flex items-center gap-1 p-1">

diff --git a/...t/plate-static-ui/media-video-element.tsx → ...t/plate-ui/media-video-element-static.tsx b/...t/plate-static-ui/media-video-element.tsx → ...t/plate-ui/media-video-element-static.tsx
@@ -7,7 +7,7 @@ import type { TVideoElement } from '@udecode/plate-media';
 import { cn } from '@udecode/cn';
 import { PlateStaticElement, getNodeString } from '@udecode/plate-common';
 
-export function MediaVideoStaticElement({
+export function MediaVideoElementStatic({
   children,
   className,
   element,