From 30c71b45f7d095d81e7dbd4b5cf204862d5fc849 Mon Sep 17 00:00:00 2001 From: Felix Feng Date: Sun, 15 Dec 2024 16:22:31 +0800 Subject: [PATCH] test --- .../static/__tests__/create-static-editor.ts | 41 ++++++++++++++++--- .../src/lib/static/__tests__/element.spec.ts | 2 +- .../src/lib/static/__tests__/marks.spec.ts | 2 +- .../static/__tests__/node-to-props.spec.ts | 2 +- .../src/lib/static/__tests__/render.spec.tsx | 6 +-- .../static/__tests__/with-attributes.spec.ts | 4 +- .../src/lib/static/components/PlateStatic.tsx | 11 ++++- 7 files changed, 54 insertions(+), 14 deletions(-) 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 ea7d279f02..668f6c613c 100644 --- a/packages/core/src/lib/static/__tests__/create-static-editor.ts +++ b/packages/core/src/lib/static/__tests__/create-static-editor.ts @@ -17,7 +17,9 @@ import { BaseCodeLinePlugin, BaseCodeSyntaxPlugin, } from '@udecode/plate-code-block'; +import { BaseCommentsPlugin } from '@udecode/plate-comments'; import { type Value, PlateStaticLeaf } from '@udecode/plate-common'; +import { BaseDatePlugin } from '@udecode/plate-date'; import { BaseFontBackgroundColorPlugin, BaseFontColorPlugin, @@ -25,6 +27,7 @@ import { } from '@udecode/plate-font'; import { BaseHeadingPlugin, + BaseTocPlugin, HEADING_KEYS, HEADING_LEVELS, } from '@udecode/plate-heading'; @@ -33,6 +36,7 @@ import { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule'; import { BaseIndentPlugin } from '@udecode/plate-indent'; import { BaseIndentListPlugin } from '@udecode/plate-indent-list'; import { BaseKbdPlugin } from '@udecode/plate-kbd'; +import { BaseColumnItemPlugin, BaseColumnPlugin } from '@udecode/plate-layout'; import { BaseLineHeightPlugin } from '@udecode/plate-line-height'; import { BaseLinkPlugin } from '@udecode/plate-link'; import { @@ -42,6 +46,7 @@ import { BaseMediaEmbedPlugin, BaseVideoPlugin, } from '@udecode/plate-media'; +import { BaseMentionPlugin } from '@udecode/plate-mention'; import { BaseTableCellHeaderPlugin, BaseTableCellPlugin, @@ -54,9 +59,17 @@ import { CodeBlockElementStatic } from 'www/src/registry/default/plate-ui/code-b 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 { ColumnElementStatic } from 'www/src/registry/default/plate-ui/column-element-static'; +import { ColumnGroupElementStatic } from 'www/src/registry/default/plate-ui/column-group-element-staic'; +import { CommentLeafStatic } from 'www/src/registry/default/plate-ui/comment-leaf-static'; +import { DateElementStatic } from 'www/src/registry/default/plate-ui/date-element-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 { + FireLiComponentStatic, + FireMarkerStatic, +} from 'www/src/registry/default/plate-ui/indent-fire-marker-static'; import { TodoLiStatic, TodoMarkerStatic, @@ -66,6 +79,7 @@ import { LinkElementStatic } from 'www/src/registry/default/plate-ui/link-elemen 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 { MentionElementStatic } from 'www/src/registry/default/plate-ui/mention-element-static'; import { ParagraphElementStatic } from 'www/src/registry/default/plate-ui/paragraph-element-static'; import { TableCellElementStatic, @@ -73,6 +87,8 @@ import { } 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 { TocElementStatic } from 'www/src/registry/default/plate-ui/toc-element-static'; +import { ToggleElementStatic } from 'www/src/registry/default/plate-ui/toggle-element-static'; import { BaseParagraphPlugin } from '../..'; import { createSlateEditor } from '../../editor'; @@ -80,6 +96,9 @@ import { createSlateEditor } from '../../editor'; export const createStaticEditor = (value: Value) => { return createSlateEditor({ plugins: [ + BaseColumnPlugin, + BaseColumnItemPlugin, + BaseTocPlugin, BaseVideoPlugin, BaseAudioPlugin, BaseParagraphPlugin, @@ -93,6 +112,7 @@ export const createStaticEditor = (value: Value) => { BaseSuperscriptPlugin, BaseUnderlinePlugin, BaseBlockquotePlugin, + BaseDatePlugin, BaseCodeBlockPlugin, BaseIndentPlugin.extend({ inject: { @@ -115,11 +135,11 @@ export const createStaticEditor = (value: Value) => { }, options: { listStyleTypes: { - // fire: { - // liComponent: FireLiComponent, - // markerComponent: FireMarker, - // type: 'fire', - // }, + fire: { + liComponent: FireLiComponentStatic, + markerComponent: FireMarkerStatic, + type: 'fire', + }, todo: { liComponent: TodoLiStatic, markerComponent: TodoMarkerStatic, @@ -151,6 +171,9 @@ export const createStaticEditor = (value: Value) => { BaseHighlightPlugin, BaseFilePlugin, BaseImagePlugin, + BaseMentionPlugin, + BaseCommentsPlugin, + BaseTogglePlugin, ], value, }); @@ -164,12 +187,18 @@ export const staticComponents = { [BaseCodeLinePlugin.key]: CodeLineElementStatic, [BaseCodePlugin.key]: CodeLeafStatic, [BaseCodeSyntaxPlugin.key]: CodeSyntaxLeafStatic, + [BaseColumnItemPlugin.key]: ColumnElementStatic, + [BaseColumnPlugin.key]: ColumnGroupElementStatic, + [BaseCommentsPlugin.key]: CommentLeafStatic, + [BaseDatePlugin.key]: DateElementStatic, [BaseFilePlugin.key]: MediaFileElementStatic, [BaseHorizontalRulePlugin.key]: HrElementStatic, [BaseImagePlugin.key]: ImageElementStatic, [BaseItalicPlugin.key]: withProps(PlateStaticLeaf, { 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' }), @@ -178,6 +207,8 @@ export const staticComponents = { [BaseTableCellPlugin.key]: TableCellElementStatic, [BaseTablePlugin.key]: TableElementStatic, [BaseTableRowPlugin.key]: TableRowElementStatic, + [BaseTocPlugin.key]: TocElementStatic, + [BaseTogglePlugin.key]: ToggleElementStatic, [BaseUnderlinePlugin.key]: withProps(PlateStaticLeaf, { as: 'u' }), [BaseVideoPlugin.key]: MediaVideoElementStatic, [HEADING_KEYS.h1]: withProps(HeadingElementStatic, { variant: 'h1' }), diff --git a/packages/core/src/lib/static/__tests__/element.spec.ts b/packages/core/src/lib/static/__tests__/element.spec.ts index 890776a47a..73b08c5a2c 100644 --- a/packages/core/src/lib/static/__tests__/element.spec.ts +++ b/packages/core/src/lib/static/__tests__/element.spec.ts @@ -1,6 +1,6 @@ import { decode } from 'html-entities'; -import { serializePlateStatic } from '../serializedHtml'; +import { serializePlateStatic } from '../serializePlateStatic'; import { createStaticEditor, staticComponents } from './create-static-editor'; describe('serializePlateStatic', () => { diff --git a/packages/core/src/lib/static/__tests__/marks.spec.ts b/packages/core/src/lib/static/__tests__/marks.spec.ts index aebd1f8fa0..632e246c9a 100644 --- a/packages/core/src/lib/static/__tests__/marks.spec.ts +++ b/packages/core/src/lib/static/__tests__/marks.spec.ts @@ -1,4 +1,4 @@ -import { serializePlateStatic } from '../serializedHtml'; +import { serializePlateStatic } from '../serializePlateStatic'; import { createStaticEditor, staticComponents } from './create-static-editor'; describe('serializePlateStatic marks', () => { diff --git a/packages/core/src/lib/static/__tests__/node-to-props.spec.ts b/packages/core/src/lib/static/__tests__/node-to-props.spec.ts index 8e3fc98d7b..0311411c1e 100644 --- a/packages/core/src/lib/static/__tests__/node-to-props.spec.ts +++ b/packages/core/src/lib/static/__tests__/node-to-props.spec.ts @@ -7,7 +7,7 @@ import { BaseImagePlugin } from '@udecode/plate-media'; import { createSlateEditor } from '../../editor'; import { BaseParagraphPlugin } from '../../plugins'; -import { serializePlateStatic } from '../serializedHtml'; +import { serializePlateStatic } from '../serializePlateStatic'; import { staticComponents } from './create-static-editor'; const plugins = [ diff --git a/packages/core/src/lib/static/__tests__/render.spec.tsx b/packages/core/src/lib/static/__tests__/render.spec.tsx index ceabb0045d..4967272f48 100644 --- a/packages/core/src/lib/static/__tests__/render.spec.tsx +++ b/packages/core/src/lib/static/__tests__/render.spec.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { createSlateEditor } from '../../editor'; import { createTSlatePlugin } from '../../plugin'; -import { serializePlateStatic } from '../serializedHtml'; +import { serializePlateStatic } from '../serializePlateStatic'; import { createStaticEditor, staticComponents } from './create-static-editor'; describe('serializePlateStatic nodes', () => { @@ -44,8 +44,8 @@ describe('serializePlateStatic nodes', () => { stripDataAttributes: true, }); - expect(html).toEqual( - '
' + expect(html).toContain( + '' ); }); diff --git a/packages/core/src/lib/static/__tests__/with-attributes.spec.ts b/packages/core/src/lib/static/__tests__/with-attributes.spec.ts index bb7e639253..e78fe35276 100644 --- a/packages/core/src/lib/static/__tests__/with-attributes.spec.ts +++ b/packages/core/src/lib/static/__tests__/with-attributes.spec.ts @@ -1,4 +1,4 @@ -import { serializePlateStatic } from '../serializedHtml'; +import { serializePlateStatic } from '../serializePlateStatic'; import { createStaticEditor, staticComponents } from './create-static-editor'; describe('serializePlateStatic with attributes', () => { @@ -16,7 +16,7 @@ describe('serializePlateStatic with attributes', () => { }); expect(html).toEqual( - '
Right Aligned Heading
' + '
Right Aligned Heading
' ); }); }); diff --git a/packages/core/src/lib/static/components/PlateStatic.tsx b/packages/core/src/lib/static/components/PlateStatic.tsx index 89b28e687a..cd18f77157 100644 --- a/packages/core/src/lib/static/components/PlateStatic.tsx +++ b/packages/core/src/lib/static/components/PlateStatic.tsx @@ -6,6 +6,7 @@ import { type TText, isElement, } from '@udecode/slate'; +import clsx from 'clsx'; import type { NodeComponent, SlateEditor } from '../../editor'; @@ -107,7 +108,15 @@ export function PlateStatic(props: PlateStaticProps) { const { className, editor, staticComponents, ...rest } = props; return ( -
+
{editor.children}