fix: improve messaging in the page editor (#3403)

packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/ElementControlHorizontalDropZones.tsx

@@ -6,6 +6,8 @@ import { useEventActionHandler } from "~/editor/hooks/useEventActionHandler";
 import styled from "@emotion/styled";
 import { useRecoilValue } from "recoil";
 import { uiAtom } from "~/editor/recoil/modules";
+import { useSnackbar } from "@webiny/app-admin";
+import { getElementTitle } from "~/editor/contexts/EditorPageElementsProvider/getElementTitle";
 
 interface WrapperDroppableProps {
     below: boolean;
@@ -70,6 +72,7 @@ export const ElementControlHorizontalDropZones = () => {
     const { isDragging } = useRecoilValue(uiAtom);
     const element = getElement();
     const handler = useEventActionHandler();
+    const { showSnackbar } = useSnackbar();
 
     const { type } = element;
 
@@ -81,6 +84,9 @@ export const ElementControlHorizontalDropZones = () => {
         // for which this drop zone is rendered).
         if (Array.isArray(target) && target.length > 0) {
             if (!target.includes(meta.parentElement.type)) {
+                const sourceTitle = getElementTitle(source.type);
+                const targetTitle = getElementTitle(meta.parentElement.type);
+                showSnackbar(`${sourceTitle} cannot be dropped into ${targetTitle}.`);
                 return;
             }
         }

packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/ElementControls.tsx

@@ -9,6 +9,7 @@ import { useRecoilValue } from "recoil";
 import { uiAtom } from "~/editor/recoil/modules";
 import { useElementPlugin } from "~/editor/contexts/EditorPageElementsProvider/useElementPlugin";
 import { useSnackbar } from "@webiny/app-admin";
+import { getElementTitle } from "~/editor/contexts/EditorPageElementsProvider/getElementTitle";
 
 // Provides controls and visual feedback for page elements:
 // - hover / active visual overlays
@@ -61,7 +62,9 @@ export const ElementControls = () => {
         // for which this drop zone is rendered).
         if (Array.isArray(target) && target.length > 0) {
             if (!target.includes(element.type)) {
-                showSnackbar("The currently active page element cannot receive child elements.");
+                const sourceTitle = getElementTitle(source.type);
+                const targetTitle = getElementTitle(element.type);
+                showSnackbar(`${sourceTitle} cannot be dropped into ${targetTitle}.`);
                 return;
             }
         }

packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/ElementControlsOverlay.tsx

@@ -14,6 +14,7 @@ import { disableDraggingMutation, enableDraggingMutation } from "~/editor/recoil
 import { ElementControlsOverlayBorders } from "./ElementControlsOverlay/ElementControlsOverlayBorders";
 import { ConnectDragSource } from "react-dnd";
 import { useElementPlugin } from "~/editor/contexts/EditorPageElementsProvider/useElementPlugin";
+import { getElementTitle } from "~/editor/contexts/EditorPageElementsProvider/getElementTitle";
 
 declare global {
     // eslint-disable-next-line
@@ -84,7 +85,6 @@ const PbElementControlsOverlay = ({
 
 const titleContainerBaseStyles = {
     color: "#fff",
-    textTransform: "lowercase",
     position: "absolute",
     padding: "2px 5px",
     fontSize: "10px",
@@ -238,15 +238,18 @@ export const ElementControlsOverlay: React.FC<Props> = props => {
 
     const title = useMemo(() => {
         if (element.data.blockId) {
-            const blockName = plugins
+            const blockPlugin = plugins
                 .byType<PbEditorBlockPlugin>("pb-editor-block")
-                .find(block => block.id === element.data.blockId)
-                ?.title?.toLowerCase();
+                .find(block => block.id === element.data.blockId);
 
-            return `block | ${blockName}`;
+            if (blockPlugin) {
+                return `block | ${blockPlugin.title}`;
+            }
+
+            return "block | unknown";
         }
 
-        return element.type;
+        return getElementTitle(element.type);
     }, [element.data.blockId]);
 
     // Z-index of element controls overlay depends on the depth of the page element.

packages/app-page-builder/src/editor/contexts/EditorPageElementsProvider/getElementTitle.ts

@@ -0,0 +1,34 @@
+import { PbEditorPageElementPlugin } from "~/types";
+import { plugins } from "@webiny/plugins";
+
+const titlesCache: Record<string, string> = {};
+
+/**
+ * Returns element title from element's plugin. If plugin is not found, it will
+ * return the element type. A simple cache was added to avoid unnecessary lookups.
+ */
+export const getElementTitle = (elementType: string): string => {
+    if (elementType in titlesCache) {
+        return titlesCache[elementType];
+    }
+
+    titlesCache[elementType] = elementType;
+
+    const elementEditorPlugin = plugins
+        .byType<PbEditorPageElementPlugin>("pb-editor-page-element")
+        .find(item => item.elementType === elementType);
+
+    if (!elementEditorPlugin) {
+        return titlesCache[elementType];
+    }
+
+    const toolbarTitle = elementEditorPlugin?.toolbar?.title;
+    if (typeof toolbarTitle === "string") {
+        titlesCache[elementType] = toolbarTitle;
+    } else {
+        // Upper-case first the type.
+        titlesCache[elementType] = elementType.charAt(0).toUpperCase() + elementType.slice(1);
+    }
+
+    return titlesCache[elementType];
+};