test

udecode · Dec 13, 2024 · b9f121e · b9f121e
1 parent 298a0ad
commit b9f121e
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 45 deletions.
diff --git a/apps/www/src/registry/default/example/values/media-value.tsx b/apps/www/src/registry/default/example/values/media-value.tsx
@@ -10,6 +10,7 @@ export const imageValue: any = (
     <hp>Add images by either uploading them or providing the image URL:</hp>
     <himg
       align="center"
+      caption={[{ children: [{ text: 'Image caption' }] }]}
       url="https://images.unsplash.com/photo-1712688930249-98e1963af7bd?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
       width="55%"
     >

diff --git a/apps/www/src/registry/default/plate-static-ui/image-element.tsx b/apps/www/src/registry/default/plate-static-ui/image-element.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 
+import type { TCaptionElement } from '@udecode/plate-caption';
 import type { StaticElementProps } from '@udecode/plate-common';
 import type { TImageElement } from '@udecode/plate-media';
 
 import { cn } from '@udecode/cn';
-import { PlateStaticElement } from '@udecode/plate-common';
+import { PlateStaticElement, getNodeString } from '@udecode/plate-common';
 
 export function ImageStaticElement({
   children,
@@ -15,34 +16,31 @@ export function ImageStaticElement({
 }: StaticElementProps) {
   const {
     align = 'center',
+    caption,
     url,
     width,
-  } = element as TImageElement & {
-    width: number;
-  };
+  } = element as TImageElement &
+    TCaptionElement & {
+      width: number;
+    };
 
   return (
     <PlateStaticElement
       className={cn('py-2.5', className)}
       element={element}
       {...props}
     >
-      <figure
-        className="group relative m-0"
-        style={{ textAlign: align, width: width }}
-      >
-        <div style={{ width: width }}>
+      <div style={{ textAlign: align }}>
+        <figure className="group relative m-0 inline-block" style={{ width }}>
           <img
-            className={cn(
-              'inline-block w-full max-w-full object-cover px-0',
-              'rounded-sm'
-            )}
+            className={cn('w-full max-w-full object-cover px-0', 'rounded-sm')}
             alt=""
             src={url}
             {...nodeProps}
           />
-        </div>
-      </figure>
+          {caption && <figcaption>{getNodeString(caption[0])}</figcaption>}
+        </figure>
+      </div>
       {children}
     </PlateStaticElement>
   );

diff --git a/apps/www/src/registry/default/plate-static-ui/media-video-element.tsx b/apps/www/src/registry/default/plate-static-ui/media-video-element.tsx
@@ -1,36 +1,43 @@
 import React from 'react';
 
+import type { TCaptionElement } from '@udecode/plate-caption';
 import type { StaticElementProps } from '@udecode/plate-common';
 import type { TVideoElement } from '@udecode/plate-media';
 
 import { cn } from '@udecode/cn';
-import { PlateStaticElement } from '@udecode/plate-common';
+import { PlateStaticElement, getNodeString } from '@udecode/plate-common';
 
 export function MediaVideoStaticElement({
   children,
   className,
   element,
   ...props
 }: StaticElementProps) {
-  const { align, url, width } = element as TVideoElement & {
-    width: number;
-  };
-
-  console.log('🚀 ~ align:', align);
+  const {
+    align = 'center',
+    caption,
+    url,
+    width,
+  } = element as TVideoElement &
+    TCaptionElement & {
+      width: number;
+    };
 
   return (
     <PlateStaticElement
-      className={cn('relative my-px rounded-sm', className)}
+      className={cn('py-2.5', className)}
       element={element}
       {...props}
     >
       <div style={{ textAlign: align }}>
-        <video
-          className="inline-block"
-          src={url}
-          width={width}
-          controls
-        ></video>
+        <figure className="group relative m-0 inline-block" style={{ width }}>
+          <video
+            className={cn('w-full max-w-full object-cover px-0', 'rounded-sm')}
+            src={url}
+            controls
+          />
+          {caption && <figcaption>{getNodeString(caption[0])}</figcaption>}
+        </figure>
       </div>
       {children}
     </PlateStaticElement>

diff --git a/packages/core/src/lib/static/__tests__/create-static-editor.ts b/packages/core/src/lib/static/__tests__/create-static-editor.ts
@@ -35,7 +35,13 @@ import { BaseIndentListPlugin } from '@udecode/plate-indent-list';
 import { BaseKbdPlugin } from '@udecode/plate-kbd';
 import { BaseLineHeightPlugin } from '@udecode/plate-line-height';
 import { BaseLinkPlugin } from '@udecode/plate-link';
-import { BaseImagePlugin, BaseMediaEmbedPlugin } from '@udecode/plate-media';
+import {
+  BaseAudioPlugin,
+  BaseFilePlugin,
+  BaseImagePlugin,
+  BaseMediaEmbedPlugin,
+  BaseVideoPlugin,
+} from '@udecode/plate-media';
 import {
   BaseTableCellHeaderPlugin,
   BaseTableCellPlugin,
@@ -50,12 +56,16 @@ import { CodeLineStaticElement } from 'www/src/registry/default/plate-static-ui/
 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 {
   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';
 import {
   TableCellHeaderStaticElement,
@@ -70,8 +80,11 @@ import { createSlateEditor } from '../../editor';
 export const createStaticEditor = (value: Value) => {
   return createSlateEditor({
     plugins: [
+      BaseVideoPlugin,
+      BaseAudioPlugin,
       BaseParagraphPlugin,
       BaseHeadingPlugin,
+      BaseMediaEmbedPlugin,
       BaseBoldPlugin,
       BaseCodePlugin,
       BaseItalicPlugin,
@@ -136,19 +149,24 @@ export const createStaticEditor = (value: Value) => {
       }),
       BaseLineHeightPlugin,
       BaseHighlightPlugin,
+      BaseFilePlugin,
+      BaseImagePlugin,
     ],
     value,
   });
 };
 
 export const staticComponents = {
+  [BaseAudioPlugin.key]: MediaAudioStaticElement,
   [BaseBlockquotePlugin.key]: BlockquoteStaticElement,
   [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,
   [BaseItalicPlugin.key]: withProps(PlateStaticLeaf, { as: 'em' }),
   [BaseKbdPlugin.key]: KbdStaticLeaf,
   [BaseLinkPlugin.key]: LinkStaticElement,
@@ -161,6 +179,7 @@ export const staticComponents = {
   [BaseTablePlugin.key]: TableStaticElement,
   [BaseTableRowPlugin.key]: TableRowStaticElement,
   [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' }),

diff --git a/packages/core/src/lib/static/__tests__/element.spec.ts b/packages/core/src/lib/static/__tests__/element.spec.ts
@@ -61,26 +61,23 @@ describe('serializePlateStatic', () => {
       { children: [{ text: ' part.' }], type: 'p' },
     ]);
 
-    const html = await serializePlateStatic(editor, {});
+    const html = await serializePlateStatic(editor, staticComponents);
     expect(html).toContain(decode('href="https://example.com/"'));
     expect(html).toContain('slate-a');
   });
 
-  // it('should serialize image to html', async () => {
-  //   const editor = createSlateEditor({
-  //     plugins: [BaseImagePlugin],
-  //     value: [
-  //       {
-  //         children: [{ text: '' }],
-  //         type: 'img',
-  //         url: 'https://example.com/image.jpg',
-  //       },
-  //     ],
-  //   });
+  it('should serialize image to html', async () => {
+    const editor = createStaticEditor([
+      {
+        children: [{ text: '' }],
+        type: 'img',
+        url: 'https://example.com/image.jpg',
+      },
+    ]);
 
-  //   const html = await serializePlateStatic(editor, {});
-  //   expect(html).toContain('src="https://example.com/image.jpg"');
-  // });
+    const html = await serializePlateStatic(editor, staticComponents);
+    expect(html).toContain('src="https://example.com/image.jpg"');
+  });
 
   it('should serialize table to html', async () => {
     const editor = createStaticEditor([
@@ -98,7 +95,7 @@ describe('serializePlateStatic', () => {
       },
     ]);
 
-    const html = await serializePlateStatic(editor, {});
+    const html = await serializePlateStatic(editor, staticComponents);
     expect(html).toContain('Cell 1');
     expect(html).toContain('Cell 2');
   });