Merge pull request #122 from contentstack/EB-10-handling-empty-blocks

 Introduced `EmptyBlocks` for handling empty block entries

src/liveEditor/components/emptyBlock.tsx

@@ -0,0 +1,39 @@
+import { CslpData } from "../../cslp/types/cslp.types";
+import liveEditorPostMessage from "../utils/liveEditorPostMessage";
+import { ISchemaFieldMap } from "../utils/types/index.types";
+import { LiveEditorPostMessageEvents } from "../utils/types/postMessage.types";
+
+interface EmptyBlockProps {
+  details: {
+    fieldMetadata: CslpData;
+    fieldSchema: ISchemaFieldMap;
+  }
+}
+
+export function EmptyBlock(props: EmptyBlockProps) {
+
+  const { details } = props
+
+  const blockParentName = details.fieldSchema.display_name;
+
+  function sendAddInstanceEvent() {
+    liveEditorPostMessage?.send(
+      LiveEditorPostMessageEvents.ADD_INSTANCE,
+      {
+          fieldMetadata: details.fieldMetadata,
+          index: 0,
+      }
+    );
+  }
+
+  return (
+    <div className="visual-editor__empty-block">
+      <div className="visual-editor__empty-block-title">
+        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;
+        {blockParentName}
+      </button>
+    </div>);
+}

src/liveEditor/generators/generateEmptyBlock.tsx

@@ -0,0 +1,43 @@
+import { hydrate } from "preact";
+import { EmptyBlock } from "../components/emptyBlock";
+import { extractDetailsFromCslp } from "../../cslp";
+import { FieldSchemaMap } from "../utils/fieldSchemaMap";
+
+
+export async function generateEmptyBlocks(
+    emptyBlockParents: Element[] | []
+): Promise<void> {
+
+  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={{
+      fieldSchema,
+      fieldMetadata
+    }}/>, emptyBlockParent);
+
+  }
+}
+
+export function removeEmptyBlocks(
+  emptyBlockParents: Element[] | []
+): void {
+  emptyBlockParents?.forEach((emptyBlockParent) => {
+
+    const emptyBlock = emptyBlockParent.querySelector(".visual-editor__empty-block");
+
+    if (emptyBlock) {
+      emptyBlock.remove();
+    }
+  })
+}

src/liveEditor/index.ts

@@ -20,10 +20,13 @@ import { LiveEditorPostMessageEvents } from "./utils/types/postMessage.types";
 
 import initUI from "./components";
 import { addEventListeners, removeEventListeners } from "./listeners";
+import { generateEmptyBlocks, removeEmptyBlocks } from "./generators/generateEmptyBlock";
+import { debounce, isEqual } from "lodash-es";
 
 interface VisualEditorGlobalStateImpl {
     previousSelectedEditableDOM: HTMLElement | Element | null;
     previousHoveredTargetDOM: Element | null;
+    previousEmptyBlockParents: Element[] | [];
 }
 
 export class VisualEditor {
@@ -36,6 +39,7 @@ export class VisualEditor {
         signal({
             previousSelectedEditableDOM: null,
             previousHoveredTargetDOM: null,
+            previousEmptyBlockParents: []
         });
 
     private resizeObserver = new ResizeObserver(([entry]) => {
@@ -61,6 +65,30 @@ export class VisualEditor {
         );
     });
 
+    private mutationObserver = new MutationObserver(debounce(async () => {
+
+        const emptyBlockParents = Array.from(document.querySelectorAll(
+            ".visual-editor__empty-block-parent"
+        ));
+
+        const previousEmptyBlockParents = VisualEditor.VisualEditorGlobalState.value.previousEmptyBlockParents as Element[];
+
+        if(!isEqual(emptyBlockParents, previousEmptyBlockParents)) {
+
+            const noMoreEmptyBlockParent = previousEmptyBlockParents.filter(x => !emptyBlockParents.includes(x));
+            const newEmptyBlockParent = emptyBlockParents.filter(x => !previousEmptyBlockParents.includes(x));
+
+            removeEmptyBlocks(noMoreEmptyBlockParent);
+            await generateEmptyBlocks(newEmptyBlockParent);
+
+            VisualEditor.VisualEditorGlobalState.value = {
+                ...VisualEditor.VisualEditorGlobalState.value,
+                previousEmptyBlockParents: emptyBlockParents
+            };
+        }
+    }, 100, { trailing: true }));
+
+
     constructor() {
         initUI({
             resizeObserver: this.resizeObserver,
@@ -109,11 +137,16 @@ export class VisualEditor {
                     customCursor: this.customCursor,
                 });
 
+                this.mutationObserver.observe(document.body , {
+                    childList: true,
+                    subtree: true,
+                });
+
                 liveEditorPostMessage?.on(
                     LiveEditorPostMessageEvents.GET_ENTRY_UID_IN_CURRENT_PAGE,
                     getEntryUidFromCurrentPage
                 );
-
+               
                 // These events are used to sync the data when we made some changes in the entry without invoking live preview module.
                 useHistoryPostMessageEvent();
                 useOnEntryUpdatePostMessageEvent();
@@ -138,6 +171,7 @@ export class VisualEditor {
             customCursor: this.customCursor,
         });
         this.resizeObserver.disconnect();
+        this.mutationObserver.disconnect();
 
         if (this.visualEditorContainer) {
             window.document.body.removeChild(this.visualEditorContainer);

src/liveEditor/listeners/mouseClick.ts

@@ -87,17 +87,20 @@ async function handleEditorInteraction(
         });
     }
 
-    addOverlay({
-        overlayWrapper: params.overlayWrapper,
-        resizeObserver: params.resizeObserver,
-        editableElement: editableElement,
-    });
-
-    addFocusedToolbar({
-        eventDetails: eventDetails,
-        focusedToolbar: params.focusedToolbar,
-    });
-
+    if(!editableElement.classList.contains('visual-editor__empty-block-parent') 
+        && !editableElement.classList.contains('visual-editor__empty-block')){
+        addOverlay({
+            overlayWrapper: params.overlayWrapper,
+            resizeObserver: params.resizeObserver,
+            editableElement: editableElement,
+        });
+
+        addFocusedToolbar({
+            eventDetails: eventDetails,
+            focusedToolbar: params.focusedToolbar,
+        });
+    }
+
     liveEditorPostMessage?.send(LiveEditorPostMessageEvents.FOCUS_FIELD, {
         DOMEditStack: getDOMEditStack(editableElement),
     });

src/styles.css

@@ -416,3 +416,37 @@ div.multiple div.cslp-tooltip-child:hover:before {
 
     display: none;
 }
+
+.visual-editor__empty-block {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 1rem;
+    min-height: 100px;
+  }
+
+  .visual-editor__empty-block-title {
+    font-size: 0.95rem;
+    font-family: Inter;
+    font-weight: 400;
+    line-height: 100%;
+    color: #647696;
+  }
+
+  .visual-editor__empty-block-add-button {
+    height: 32px;
+    border-radius: 4px;
+    background: #F9F8FF;
+    border-color: #6C5CE7;
+    border-width: 1px;
+    padding: 8px 16px 8px 16px;
+    font-size: 0.9rem;
+    font-family: Inter;
+    font-weight: 600;
+    color: #6C5CE7;
+    padding-block: 0px;
+    letter-spacing: 0.01rem;
+  }