test

packages/core/src/lib/static/__tests__/create-static-editor.ts

@@ -17,14 +17,17 @@ 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,
   BaseFontSizePlugin,
 } 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,20 +79,26 @@ 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,
   TableCellHeaderStaticElement,
 } 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';
 
 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' }),

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', () => {

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', () => {

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 = [

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(
-      '<div><ul><li><span><span><span>test render below</span></span></span></li></ul></div>'
+    expect(html).toContain(
+      '<ul><li><span><span><span>test render below</span></span></span></li></ul>'
     );
   });
 

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(
-      '<div data-slate-node="element"><span data-slate-node="text"><span data-slate-leaf="true"><strong data-slate-leaf="true"><span data-slate-string="true">Right Aligned Heading</span></strong></span></span></div>'
+      '<div aria-multiline="true" data-slate-editor="true" data-slate-node="value" role="textbox" spellcheck="false"><div data-slate-node="element"><span data-slate-node="text"><span data-slate-leaf="true"><strong data-slate-leaf="true"><span data-slate-string="true">Right Aligned Heading</span></strong></span></span></div></div>'
     );
   });
 });

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 (
-    <div className={className} {...rest}>
+    <div
+      className={clsx(className, 'slate-editor')}
+      aria-multiline="true"
+      data-slate-editor="true"
+      data-slate-node="value"
+      role="textbox"
+      spellCheck="false"
+      {...rest}
+    >
       <PlateViewContent editor={editor} staticComponents={staticComponents}>
         {editor.children}
       </PlateViewContent>