Refactor 'media upload' integration in campaign visual editor.

Author: knadh

frontend/email-builder/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import {
   VerticalAlignBottomOutlined,
   VerticalAlignCenterOutlined,
@@ -42,6 +42,13 @@ export default function ImageSidebarPanel({ data, setData }: ImageSidebarPanelPr
           updateData({ ...data, props: { ...data.props, url } });
         }}
       />
+      <a href="#" class="select-media"
+        style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', marginTop: '5px' }}
+        onClick={(e) => {
+        // @ts-ignore
+        window.parent.postMessage('visualeditor.select-media', '*');
+        e.preventDefault();
+      }}><CloudUploadIcon style={{fontSize: '1rem'}} /> Select media</a>
 
       <TextInput
         label="Alt text"

frontend/email-builder/src/App/InspectorDrawer/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 
-import { Box, Drawer, Tab, Tabs } from '@mui/material';
+import {
+  Box, Drawer, Tab, Tabs,
+} from '@mui/material';
 
 import { setSidebarTab, useInspectorDrawerOpen, useSelectedSidebarTab } from '../../documents/editor/EditorContext';
 
@@ -26,6 +28,7 @@ export default function InspectorDrawer() {
     <Drawer
       variant="persistent"
       anchor="right"
+      className="sidebar"
       open={inspectorDrawerOpen}
       sx={{
         width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0,
@@ -34,10 +37,13 @@ export default function InspectorDrawer() {
       PaperProps={{ style: { position: 'absolute', zIndex: 0 } }}
       ModalProps={{
         container: document.querySelector('.email-builder-container'),
-        style: { position: 'absolute', zIndex: 0 }
+        style: { position: 'absolute', zIndex: 0 },
       }}
     >
-      <Box sx={{ width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: 'divider' }}>
+      <Box sx={{
+        width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: 'divider',
+      }}
+      >
         <Box px={2}>
           <Tabs value={selectedSidebarTab} onChange={(_, v) => setSidebarTab(v)}>
             <Tab value="styles" label="Styles" />

frontend/email-builder/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx

@@ -27,7 +27,7 @@ export const BUTTONS: TButtonProps[] = [
     block: () => ({
       type: 'Heading',
       data: {
-        props: { text: 'Hello friend' },
+        props: { text: 'Heading' },
         style: {
           padding: { top: 16, bottom: 16, left: 24, right: 24 },
         },

frontend/src/components/VisualEditor.vue

@@ -70,6 +70,7 @@ export default {
       });
     },
 
+    // Inject media URL into the image URL input field in the visual edior sidebar.
     onMediaSelect(media) {
       const iframe = this.$refs.visualEditor;
       const input = iframe.contentDocument.querySelector('.image-url input');
@@ -87,34 +88,14 @@ export default {
 
     // Observe DOM changes in the iframe to inject media selector
     // into the image URL input fields.
-    setupInjectMediaObserver(iframe) {
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          mutation.addedNodes.forEach((node) => {
-            node.querySelectorAll('.image-url').forEach((img) => {
-              // Create anchor tag
-              const anchor = document.createElement('a');
-              anchor.href = '#';
-              anchor.className = 'open-media-selector';
-              anchor.textContent = 'Select Image';
-              anchor.style.marginTop = '5px';
-              anchor.addEventListener('click', (e) => {
-                e.preventDefault();
-                this.isMediaVisible = true;
-              });
-              if (img.parentNode) {
-                img.parentNode.insertBefore(anchor, img.nextSibling);
-              }
-            });
-          });
-        });
-      });
+    onSidebarMount(msg) {
+      if (!msg.data) {
+        return;
+      }
 
-      // Start observing.
-      observer.observe(iframe.contentDocument.querySelector('#visual-editor-container'), {
-        childList: true,
-        subtree: true,
-      });
+      if (msg.data === 'visualeditor.select-media') {
+        this.isMediaVisible = true;
+      }
     },
   },
 
@@ -142,12 +123,17 @@ export default {
     iframe.onload = () => {
       this.loadScript().then(() => {
         this.initEditor();
-        this.setupInjectMediaObserver(iframe);
       }).catch((error) => {
         /* eslint-disable-next-line no-console */
         console.error('Failed to load email-builer script:', error);
       });
     };
+
+    window.addEventListener('message', this.onSidebarMount, false);
+  },
+
+  unmounted() {
+    window.removeEventListener('message', this.onSidebarMount, false);
   },
 
   watch: {