From a422876906d5d5cf3ccf467f42d675b44b94f98a Mon Sep 17 00:00:00 2001 From: Felix Feng Date: Sat, 14 Dec 2024 17:40:31 +0800 Subject: [PATCH] refactor --- apps/www/src/app/(app)/dev/page.tsx | 128 ++++++++---------- .../blockquote-element-static.tsx} | 2 +- .../checkbox-static.tsx} | 2 +- .../code-block-element-static.tsx} | 0 .../code-leaf-static.tsx} | 2 +- .../code-line-element-static.tsx} | 2 +- .../code-syntax-leaf-static.tsx} | 2 +- .../heading-element-static.tsx} | 4 +- .../default/plate-ui/heading-element.tsx | 15 +- .../highlight-leaf-static.tsx} | 2 +- .../hr-element-static.tsx} | 2 +- .../image-element-static.tsx} | 2 +- .../plate-ui/indent-fire-marker-static.tsx | 22 +++ .../indent-todo-marker-static.tsx} | 8 +- .../kbd-leaf-static.tsx} | 2 +- .../link-element-static.tsx} | 4 +- .../media-audio-element-static.tsx} | 2 +- .../media-file-element-static.tsx} | 4 +- .../media-video-element-static.tsx} | 2 +- .../paragraph-element-static.tsx} | 2 +- .../table-cell-element-static.tsx} | 4 +- .../table-element-static.tsx} | 2 +- .../table-row-element-static.tsx} | 2 +- .../static/__tests__/create-static-editor.ts | 88 ++++++------ 24 files changed, 164 insertions(+), 141 deletions(-) rename apps/www/src/registry/default/{plate-static-ui/blockquote-element.tsx => plate-ui/blockquote-element-static.tsx} (91%) rename apps/www/src/registry/default/{plate-static-ui/checkbox.tsx => plate-ui/checkbox-static.tsx} (96%) rename apps/www/src/registry/default/{plate-static-ui/code-block-element.tsx => plate-ui/code-block-element-static.tsx} (100%) rename apps/www/src/registry/default/{plate-static-ui/code-leaf.tsx => plate-ui/code-leaf-static.tsx} (85%) rename apps/www/src/registry/default/{plate-static-ui/code-line-element.tsx => plate-ui/code-line-element-static.tsx} (87%) rename apps/www/src/registry/default/{plate-static-ui/code-syntax-leaf.tsx => plate-ui/code-syntax-leaf-static.tsx} (78%) rename apps/www/src/registry/default/{plate-static-ui/heading-element.tsx => plate-ui/heading-element-static.tsx} (92%) rename apps/www/src/registry/default/{plate-static-ui/highlight-leaf.tsx => plate-ui/highlight-leaf-static.tsx} (91%) rename apps/www/src/registry/default/{plate-static-ui/hr-element.tsx => plate-ui/hr-element-static.tsx} (94%) rename apps/www/src/registry/default/{plate-static-ui/image-element.tsx => plate-ui/image-element-static.tsx} (96%) create mode 100644 apps/www/src/registry/default/plate-ui/indent-fire-marker-static.tsx rename apps/www/src/registry/default/{plate-static-ui/indent-todo-marker.tsx => plate-ui/indent-todo-marker-static.tsx} (77%) rename apps/www/src/registry/default/{plate-static-ui/kbd-leaf.tsx => plate-ui/kbd-leaf-static.tsx} (96%) rename apps/www/src/registry/default/{plate-static-ui/link-element.tsx => plate-ui/link-element-static.tsx} (82%) rename apps/www/src/registry/default/{plate-static-ui/media-audio-element.tsx => plate-ui/media-audio-element-static.tsx} (94%) rename apps/www/src/registry/default/{plate-static-ui/media-file-element.tsx => plate-ui/media-file-element-static.tsx} (83%) rename apps/www/src/registry/default/{plate-static-ui/media-video-element.tsx => plate-ui/media-video-element-static.tsx} (96%) rename apps/www/src/registry/default/{plate-static-ui/paragraph-element.tsx => plate-ui/paragraph-element-static.tsx} (91%) rename apps/www/src/registry/default/{plate-static-ui/table-cell-element.tsx => plate-ui/table-cell-element-static.tsx} (95%) rename apps/www/src/registry/default/{plate-static-ui/table-element.tsx => plate-ui/table-element-static.tsx} (96%) rename apps/www/src/registry/default/{plate-static-ui/table-row-element.tsx => plate-ui/table-row-element-static.tsx} (92%) diff --git a/apps/www/src/app/(app)/dev/page.tsx b/apps/www/src/app/(app)/dev/page.tsx index 8381d0e922..5d9c889ec2 100644 --- 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 (
diff --git a/apps/www/src/registry/default/plate-static-ui/blockquote-element.tsx b/apps/www/src/registry/default/plate-ui/blockquote-element-static.tsx similarity index 91% rename from apps/www/src/registry/default/plate-static-ui/blockquote-element.tsx rename to apps/www/src/registry/default/plate-ui/blockquote-element-static.tsx index 697575e4b3..d85b698f66 100644 --- a/apps/www/src/registry/default/plate-static-ui/blockquote-element.tsx +++ b/apps/www/src/registry/default/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/apps/www/src/registry/default/plate-static-ui/checkbox.tsx b/apps/www/src/registry/default/plate-ui/checkbox-static.tsx similarity index 96% rename from apps/www/src/registry/default/plate-static-ui/checkbox.tsx rename to apps/www/src/registry/default/plate-ui/checkbox-static.tsx index e49bd7b2b9..d3eb8f1c48 100644 --- a/apps/www/src/registry/default/plate-static-ui/checkbox.tsx +++ b/apps/www/src/registry/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/apps/www/src/registry/default/plate-static-ui/code-block-element.tsx b/apps/www/src/registry/default/plate-ui/code-block-element-static.tsx similarity index 100% rename from apps/www/src/registry/default/plate-static-ui/code-block-element.tsx rename to apps/www/src/registry/default/plate-ui/code-block-element-static.tsx diff --git a/apps/www/src/registry/default/plate-static-ui/code-leaf.tsx b/apps/www/src/registry/default/plate-ui/code-leaf-static.tsx similarity index 85% rename from apps/www/src/registry/default/plate-static-ui/code-leaf.tsx rename to apps/www/src/registry/default/plate-ui/code-leaf-static.tsx index 78d139dfd3..15e3f38492 100644 --- a/apps/www/src/registry/default/plate-static-ui/code-leaf.tsx +++ b/apps/www/src/registry/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 ( diff --git a/apps/www/src/registry/default/plate-static-ui/code-line-element.tsx b/apps/www/src/registry/default/plate-ui/code-line-element-static.tsx similarity index 87% rename from apps/www/src/registry/default/plate-static-ui/code-line-element.tsx rename to apps/www/src/registry/default/plate-ui/code-line-element-static.tsx index 58f05d9b9a..4dbde7586f 100644 --- a/apps/www/src/registry/default/plate-static-ui/code-line-element.tsx +++ b/apps/www/src/registry/default/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/apps/www/src/registry/default/plate-static-ui/code-syntax-leaf.tsx b/apps/www/src/registry/default/plate-ui/code-syntax-leaf-static.tsx similarity index 78% rename from apps/www/src/registry/default/plate-static-ui/code-syntax-leaf.tsx rename to apps/www/src/registry/default/plate-ui/code-syntax-leaf-static.tsx index 14b9c1b1b3..4757acce3b 100644 --- a/apps/www/src/registry/default/plate-static-ui/code-syntax-leaf.tsx +++ b/apps/www/src/registry/default/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 {children}; } diff --git a/apps/www/src/registry/default/plate-static-ui/heading-element.tsx b/apps/www/src/registry/default/plate-ui/heading-element-static.tsx similarity index 92% rename from apps/www/src/registry/default/plate-static-ui/heading-element.tsx rename to apps/www/src/registry/default/plate-ui/heading-element-static.tsx index 45c4540def..c78440d495 100644 --- a/apps/www/src/registry/default/plate-static-ui/heading-element.tsx +++ b/apps/www/src/registry/default/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 index e5dcea1a9e..9386d1df2d 100644 --- 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/apps/www/src/registry/default/plate-static-ui/highlight-leaf.tsx b/apps/www/src/registry/default/plate-ui/highlight-leaf-static.tsx similarity index 91% rename from apps/www/src/registry/default/plate-static-ui/highlight-leaf.tsx rename to apps/www/src/registry/default/plate-ui/highlight-leaf-static.tsx index f38e7f1b8a..2447a3f392 100644 --- a/apps/www/src/registry/default/plate-static-ui/highlight-leaf.tsx +++ b/apps/www/src/registry/default/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/apps/www/src/registry/default/plate-static-ui/hr-element.tsx b/apps/www/src/registry/default/plate-ui/hr-element-static.tsx similarity index 94% rename from apps/www/src/registry/default/plate-static-ui/hr-element.tsx rename to apps/www/src/registry/default/plate-ui/hr-element-static.tsx index 413a6e6894..52d59b2fc9 100644 --- a/apps/www/src/registry/default/plate-static-ui/hr-element.tsx +++ b/apps/www/src/registry/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/apps/www/src/registry/default/plate-static-ui/image-element.tsx b/apps/www/src/registry/default/plate-ui/image-element-static.tsx similarity index 96% rename from apps/www/src/registry/default/plate-static-ui/image-element.tsx rename to apps/www/src/registry/default/plate-ui/image-element-static.tsx index abbf582aaf..f79844838c 100644 --- a/apps/www/src/registry/default/plate-static-ui/image-element.tsx +++ b/apps/www/src/registry/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 new file mode 100644 index 0000000000..f7114f06a1 --- /dev/null +++ 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) { + return ( +
+ + {(element as TIndentElement).indent % 2 === 0 ? '🔥' : '🚀'} + +
+ ); +} + +export function FireLiComponentStatic(props: PlateRenderElementProps) { + const { children } = props; + + return {children}; +} diff --git a/apps/www/src/registry/default/plate-static-ui/indent-todo-marker.tsx b/apps/www/src/registry/default/plate-ui/indent-todo-marker-static.tsx similarity index 77% rename from apps/www/src/registry/default/plate-static-ui/indent-todo-marker.tsx rename to apps/www/src/registry/default/plate-ui/indent-todo-marker-static.tsx index 5155469beb..ec8692a5da 100644 --- a/apps/www/src/registry/default/plate-static-ui/indent-todo-marker.tsx +++ b/apps/www/src/registry/default/plate-ui/indent-todo-marker-static.tsx @@ -4,14 +4,14 @@ 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) => { return (
- @@ -19,7 +19,7 @@ export const TodoMarker = ({ ); }; -export const TodoLi = (props: PlateRenderElementProps) => { +export const TodoLiStatic = (props: PlateRenderElementProps) => { const { children, element } = props; return ( diff --git a/apps/www/src/registry/default/plate-static-ui/kbd-leaf.tsx b/apps/www/src/registry/default/plate-ui/kbd-leaf-static.tsx similarity index 96% rename from apps/www/src/registry/default/plate-static-ui/kbd-leaf.tsx rename to apps/www/src/registry/default/plate-ui/kbd-leaf-static.tsx index d11222357d..5bd7572f4f 100644 --- a/apps/www/src/registry/default/plate-static-ui/kbd-leaf.tsx +++ b/apps/www/src/registry/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/apps/www/src/registry/default/plate-static-ui/link-element.tsx b/apps/www/src/registry/default/plate-ui/link-element-static.tsx similarity index 82% rename from apps/www/src/registry/default/plate-static-ui/link-element.tsx rename to apps/www/src/registry/default/plate-ui/link-element-static.tsx index cefa916ddf..b7a0fcd16b 100644 --- a/apps/www/src/registry/default/plate-static-ui/link-element.tsx +++ b/apps/www/src/registry/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 = ({
diff --git a/apps/www/src/registry/default/plate-static-ui/media-video-element.tsx b/apps/www/src/registry/default/plate-ui/media-video-element-static.tsx similarity index 96% rename from apps/www/src/registry/default/plate-static-ui/media-video-element.tsx rename to apps/www/src/registry/default/plate-ui/media-video-element-static.tsx index 69b2b8526e..7ea42528a8 100644 --- a/apps/www/src/registry/default/plate-static-ui/media-video-element.tsx +++ b/apps/www/src/registry/default/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, diff --git a/apps/www/src/registry/default/plate-static-ui/paragraph-element.tsx b/apps/www/src/registry/default/plate-ui/paragraph-element-static.tsx similarity index 91% rename from apps/www/src/registry/default/plate-static-ui/paragraph-element.tsx rename to apps/www/src/registry/default/plate-ui/paragraph-element-static.tsx index a0f1d1ce71..415a2362b1 100644 --- a/apps/www/src/registry/default/plate-static-ui/paragraph-element.tsx +++ b/apps/www/src/registry/default/plate-ui/paragraph-element-static.tsx @@ -5,7 +5,7 @@ import type { StaticElementProps } from '@udecode/plate-common'; import { cn } from '@udecode/cn'; import { PlateStaticElement } from '@udecode/plate-common'; -export const ParagraphStaticElement = ({ +export const ParagraphElementStatic = ({ children, className, element, diff --git a/apps/www/src/registry/default/plate-static-ui/table-cell-element.tsx b/apps/www/src/registry/default/plate-ui/table-cell-element-static.tsx similarity index 95% rename from apps/www/src/registry/default/plate-static-ui/table-cell-element.tsx rename to apps/www/src/registry/default/plate-ui/table-cell-element-static.tsx index fcac26a3f4..be423a76f5 100644 --- a/apps/www/src/registry/default/plate-static-ui/table-cell-element.tsx +++ b/apps/www/src/registry/default/plate-ui/table-cell-element-static.tsx @@ -11,7 +11,7 @@ import { } from '@udecode/plate-common'; import { getTableCellBorders } from '@udecode/plate-table'; -export function TableCellStaticElement({ +export function TableCellElementStatic({ children, className, editor, @@ -70,5 +70,5 @@ export function TableCellStaticElement({ } export function TableCellHeaderStaticElement(props: StaticElementProps) { - return ; + return ; } diff --git a/apps/www/src/registry/default/plate-static-ui/table-element.tsx b/apps/www/src/registry/default/plate-ui/table-element-static.tsx similarity index 96% rename from apps/www/src/registry/default/plate-static-ui/table-element.tsx rename to apps/www/src/registry/default/plate-ui/table-element-static.tsx index 75fe184a9a..6b16c93510 100644 --- a/apps/www/src/registry/default/plate-static-ui/table-element.tsx +++ b/apps/www/src/registry/default/plate-ui/table-element-static.tsx @@ -6,7 +6,7 @@ import type { TTableElement } from '@udecode/plate-table'; import { cn } from '@udecode/cn'; import { PlateStaticElement } from '@udecode/plate-common'; -export const TableStaticElement = ({ +export const TableElementStatic = ({ children, className, element, diff --git a/apps/www/src/registry/default/plate-static-ui/table-row-element.tsx b/apps/www/src/registry/default/plate-ui/table-row-element-static.tsx similarity index 92% rename from apps/www/src/registry/default/plate-static-ui/table-row-element.tsx rename to apps/www/src/registry/default/plate-ui/table-row-element-static.tsx index a5f9b4c155..f1c02d6555 100644 --- a/apps/www/src/registry/default/plate-static-ui/table-row-element.tsx +++ b/apps/www/src/registry/default/plate-ui/table-row-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 TableRowStaticElement({ +export function TableRowElementStatic({ children, className, element, diff --git a/packages/core/src/lib/static/__tests__/create-static-editor.ts b/packages/core/src/lib/static/__tests__/create-static-editor.ts index ade62ff34d..ea7d279f02 100644 --- a/packages/core/src/lib/static/__tests__/create-static-editor.ts +++ b/packages/core/src/lib/static/__tests__/create-static-editor.ts @@ -49,30 +49,30 @@ import { BaseTableRowPlugin, } from '@udecode/plate-table'; import { BaseTogglePlugin } from '@udecode/plate-toggle'; -import { BlockquoteStaticElement } from 'www/src/registry/default/plate-static-ui/blockquote-element'; -import { CodeBlockElementStatic } from 'www/src/registry/default/plate-static-ui/code-block-element'; -import { CodeStaticLeaf } from 'www/src/registry/default/plate-static-ui/code-leaf'; -import { CodeLineStaticElement } from 'www/src/registry/default/plate-static-ui/code-line-element'; -import { CodeSyntaxStaticLeaf } from 'www/src/registry/default/plate-static-ui/code-syntax-leaf'; -import { HeadingStaticElement } from 'www/src/registry/default/plate-static-ui/heading-element'; -import { HrStaticElement } from 'www/src/registry/default/plate-static-ui/hr-element'; -import { ImageStaticElement } from 'www/src/registry/default/plate-static-ui/image-element'; +import { BlockquoteElementStatic } from 'www/src/registry/default/plate-ui/blockquote-element-static'; +import { CodeBlockElementStatic } from 'www/src/registry/default/plate-ui/code-block-element-static'; +import { CodeLeafStatic } from 'www/src/registry/default/plate-ui/code-leaf-static'; +import { CodeLineElementStatic } from 'www/src/registry/default/plate-ui/code-line-element-static'; +import { CodeSyntaxLeafStatic } from 'www/src/registry/default/plate-ui/code-syntax-leaf-static'; +import { HeadingElementStatic } from 'www/src/registry/default/plate-ui/heading-element-static'; +import { HrElementStatic } from 'www/src/registry/default/plate-ui/hr-element-static'; +import { ImageElementStatic } from 'www/src/registry/default/plate-ui/image-element-static'; import { - TodoLi, - TodoMarker, -} from 'www/src/registry/default/plate-static-ui/indent-todo-marker'; -import { KbdStaticLeaf } from 'www/src/registry/default/plate-static-ui/kbd-leaf'; -import { LinkStaticElement } from 'www/src/registry/default/plate-static-ui/link-element'; -import { MediaAudioStaticElement } from 'www/src/registry/default/plate-static-ui/media-audio-element'; -import { MediaFileStaticElement } from 'www/src/registry/default/plate-static-ui/media-file-element'; -import { MediaVideoStaticElement } from 'www/src/registry/default/plate-static-ui/media-video-element'; -import { ParagraphStaticElement } from 'www/src/registry/default/plate-static-ui/paragraph-element'; + TodoLiStatic, + TodoMarkerStatic, +} from 'www/src/registry/default/plate-ui/indent-todo-marker-static'; +import { KbdLeafStatic } from 'www/src/registry/default/plate-ui/kbd-leaf-static'; +import { LinkElementStatic } from 'www/src/registry/default/plate-ui/link-element-static'; +import { MediaAudioElementStatic } from 'www/src/registry/default/plate-ui/media-audio-element-static'; +import { MediaFileElementStatic } from 'www/src/registry/default/plate-ui/media-file-element-static'; +import { MediaVideoElementStatic } from 'www/src/registry/default/plate-ui/media-video-element-static'; +import { ParagraphElementStatic } from 'www/src/registry/default/plate-ui/paragraph-element-static'; import { + TableCellElementStatic, TableCellHeaderStaticElement, - TableCellStaticElement, -} from 'www/src/registry/default/plate-static-ui/table-cell-element'; -import { TableStaticElement } from 'www/src/registry/default/plate-static-ui/table-element'; -import { TableRowStaticElement } from 'www/src/registry/default/plate-static-ui/table-row-element'; +} from 'www/src/registry/default/plate-ui/table-cell-element-static'; +import { TableElementStatic } from 'www/src/registry/default/plate-ui/table-element-static'; +import { TableRowElementStatic } from 'www/src/registry/default/plate-ui/table-row-element-static'; import { BaseParagraphPlugin } from '../..'; import { createSlateEditor } from '../../editor'; @@ -121,8 +121,8 @@ export const createStaticEditor = (value: Value) => { // type: 'fire', // }, todo: { - liComponent: TodoLi, - markerComponent: TodoMarker, + liComponent: TodoLiStatic, + markerComponent: TodoMarkerStatic, type: 'todo', }, }, @@ -157,33 +157,33 @@ export const createStaticEditor = (value: Value) => { }; export 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' }), };