fix(cms): rich text editor admin config schema changes

ntuscds · Aug 30, 2024 · 932b8d0 · 932b8d0
1 parent bc39163
commit 932b8d0
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 71 deletions.
diff --git a/apps/cms/src/blocks/Media.ts b/apps/cms/src/blocks/Media.ts
@@ -1,4 +1,5 @@
 import { Block } from 'payload/types';
+import { slateEditor } from "@payloadcms/richtext-slate";
 
 export const MediaBlock: Block = {
   slug: 'media',
@@ -74,11 +75,13 @@ export const MediaBlock: Block = {
       name: 'caption',
       label: 'Caption',
       type: 'richText',
-      admin: {
-        elements: [
-          'link',
-        ],
-      },
+      editor: slateEditor({
+        admin: {
+          elements: [
+            'link',
+          ],
+        },
+      })
     },
   ],
 };
diff --git a/apps/cms/src/fields/richText/richtext.ts b/apps/cms/src/fields/richText/richtext.ts
@@ -1,93 +1,101 @@
-import { RichTextElement, RichTextField, RichTextLeaf } from 'payload/dist/fields/config/types';
-import deepMerge from '../../utilities/deepMerge';
+import { RichTextField } from "payload/dist/fields/config/types";
+import {
+  slateEditor,
+  RichTextElement,
+  RichTextLeaf,
+} from "@payloadcms/richtext-slate";
+import deepMerge from "../../utilities/deepMerge";
 // import elements from './elements';
 // import leaves from './leaves';
 // import link from '../link';
 
 type RichText = (
   overrides?: Partial<RichTextField>,
   additions?: {
-    elements?: RichTextElement[]
-    leaves?: RichTextLeaf[]
-  }
-) => RichTextField
+    elements?: RichTextElement[];
+    leaves?: RichTextLeaf[];
+  },
+) => RichTextField;
 
 const richText: RichText = (
   overrides,
   _additions = {
     elements: [],
     leaves: [],
   },
-) => deepMerge<RichTextField, Partial<RichTextField>>(
-  {
-    name: 'richText',
-    type: 'richText',
-    admin: {
-      upload: {
-        collections: {
-          media: {
-            fields: [
-              {
-                type: 'richText',
-                name: 'caption',
-                label: 'Caption',
-                // admin: {
-                //   elements: [
-                //     ...elements,
-                //   ],
-                //   leaves: [
-                //     ...leaves,
-                //   ],
-                // },
-              },
-              {
-                type: 'radio',
-                name: 'alignment',
-                label: 'Alignment',
-                options: [
+) =>
+  deepMerge<RichTextField, Partial<RichTextField>>(
+    {
+      name: "richText",
+      type: "richText",
+      editor: slateEditor({
+        admin: {
+          upload: {
+            collections: {
+              media: {
+                fields: [
                   {
-                    label: 'Left',
-                    value: 'left',
+                    type: "richText",
+                    name: "caption",
+                    label: "Caption",
+                    // admin: {
+                    //   elements: [
+                    //     ...elements,
+                    //   ],
+                    //   leaves: [
+                    //     ...leaves,
+                    //   ],
+                    // },
                   },
                   {
-                    label: 'Center',
-                    value: 'center',
+                    type: "radio",
+                    name: "alignment",
+                    label: "Alignment",
+                    options: [
+                      {
+                        label: "Left",
+                        value: "left",
+                      },
+                      {
+                        label: "Center",
+                        value: "center",
+                      },
+                      {
+                        label: "Right",
+                        value: "right",
+                      },
+                    ],
                   },
                   {
-                    label: 'Right',
-                    value: 'right',
+                    name: "enableLink",
+                    type: "checkbox",
+                    label: "Enable Link",
                   },
+                  // link({
+                  //   appearances: false,
+                  //   disableLabel: true,
+                  //   overrides: {
+                  //     admin: {
+                  //       condition: (_, data) => Boolean(data?.enableLink),
+                  //     },
+                  //   },
+                  // }),
                 ],
               },
-              {
-                name: 'enableLink',
-                type: 'checkbox',
-                label: 'Enable Link',
-              },
-              // link({
-              //   appearances: false,
-              //   disableLabel: true,
-              //   overrides: {
-              //     admin: {
-              //       condition: (_, data) => Boolean(data?.enableLink),
-              //     },
-              //   },
-              // }),
-            ],
+            },
           },
+          // elements: [
+          //   ...elements,
+          //   ...additions.elements || [],
+          // ],
+          // leaves: [
+          //   ...leaves,
+          //   ...additions.leaves || [],
+          // ],
         },
-      },
-      // elements: [
-      //   ...elements,
-      //   ...additions.elements || [],
-      // ],
-      // leaves: [
-      //   ...leaves,
-      //   ...additions.leaves || [],
-      // ],
+      }),
     },
-  },
-  overrides,
-);
+    overrides,
+  );
 
 export default richText;