Get emptyBlockParent from fieldSchema

contentstack · May 9, 2024 · a3b0b22 · a3b0b22
1 parent b4c4055
commit a3b0b22
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 18 deletions.
diff --git a/src/liveEditor/components/emptyBlock.tsx b/src/liveEditor/components/emptyBlock.tsx
@@ -1,24 +1,20 @@
 import { CslpData } from "../../cslp/types/cslp.types";
-import { VisualEditorCslpEventDetails } from "../types/liveEditor.types";
 import liveEditorPostMessage from "../utils/liveEditorPostMessage";
+import { ISchemaFieldMap } from "../utils/types/index.types";
 import { LiveEditorPostMessageEvents } from "../utils/types/postMessage.types";
 
 interface EmptyBlockProps {
   details: {
-    editableElement: Element;
-    cslpData: string;
     fieldMetadata: CslpData;
+    fieldSchema: ISchemaFieldMap;
   }
 }
 
 export function EmptyBlock(props: EmptyBlockProps) {
-
+  
   const { details } = props
 
-  const blockParentName = details.fieldMetadata.fieldPath.split('.').at(-1)!.split('_').join(' ')
-  const capitalizedBlockParentName = blockParentName.replace(/\b[a-z]/g, (letter: string) => {
-    return letter.toUpperCase();
-  });
+  const blockParentName = details.fieldSchema.display_name;
 
   function sendAddInstanceEvent() {
     liveEditorPostMessage?.send(
@@ -33,11 +29,11 @@ export function EmptyBlock(props: EmptyBlockProps) {
   return (
     <div className="visual-editor__empty-block">
       <div className="visual-editor__empty-block-title">
-        There are no {blockParentName} to show in this section.
+        There are no {blockParentName.toLowerCase()} to show in this section.
       </div>
       <button className={'visual-editor__empty-block-add-button'} onClick={() => sendAddInstanceEvent()}>
         <i className="fas fa-plus"></i> &nbsp;
-        {capitalizedBlockParentName}
+        {blockParentName}
       </button>
     </div>);
 }
diff --git a/src/liveEditor/generators/generateEmptyBlock.tsx b/src/liveEditor/generators/generateEmptyBlock.tsx
@@ -1,26 +1,32 @@
 import { hydrate } from "preact";
 import { EmptyBlock } from "../components/emptyBlock";
 import { extractDetailsFromCslp } from "../../cslp";
+import { FieldSchemaMap } from "../utils/fieldSchemaMap";
 
 
-export function generateEmptyBlocks(
+export async function generateEmptyBlocks(
     emptyBlockParents: Element[] | []
-): void {
+): Promise<void> {
 
-  emptyBlockParents?.forEach((emptyBlockParent) => {
+  for (const emptyBlockParent of emptyBlockParents) {
 
     const cslpData = emptyBlockParent.getAttribute("data-cslp");
     if (!cslpData) {
       return;
     }
     const fieldMetadata = extractDetailsFromCslp(cslpData);
 
+    const fieldSchema = await FieldSchemaMap.getFieldSchema(
+      fieldMetadata.content_type_uid,
+      fieldMetadata.fieldPath
+    );
+
     hydrate(<EmptyBlock details={{
-      editableElement: emptyBlockParent,
-      cslpData,
+      fieldSchema,
       fieldMetadata
     }}/>, emptyBlockParent);
-  });
+
+  }
 }
 
 export function removeEmptyBlocks(

diff --git a/src/liveEditor/index.ts b/src/liveEditor/index.ts
@@ -65,7 +65,7 @@ export class VisualEditor {
         );
     });
 
-    private mutationObserver = new MutationObserver(debounce(() => {
+    private mutationObserver = new MutationObserver(debounce(async () => {
 
         const emptyBlockParents = Array.from(document.querySelectorAll(
             ".visual-editor__empty-block-parent"
@@ -79,7 +79,7 @@ export class VisualEditor {
             const newEmptyBlockParent = emptyBlockParents.filter(x => !previousEmptyBlockParents.includes(x));
 
             removeEmptyBlocks(noMoreEmptyBlockParent);
-            generateEmptyBlocks(newEmptyBlockParent);
+            await generateEmptyBlocks(newEmptyBlockParent);
 
             VisualEditor.VisualEditorGlobalState.value = {
                 ...VisualEditor.VisualEditorGlobalState.value,