Comms console poc

packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx

@@ -5,21 +5,23 @@ import {
  VerticalAlignCenterOutlined,
  VerticalAlignTopOutlined,
 } from '@mui/icons-material';
-import { Stack, ToggleButton } from '@mui/material';
+import { Box, Button, Stack, ToggleButton } from '@mui/material';
 import { ImageProps, ImagePropsSchema } from '@usewaypoint/block-image';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import RadioGroupInput from './helpers/inputs/RadioGroupInput';
 import TextDimensionInput from './helpers/inputs/TextDimensionInput';
 import TextInput from './helpers/inputs/TextInput';
 import MultiStylePropertyPanel from './helpers/style-inputs/MultiStylePropertyPanel';
+import { addImage, useImages } from '../../../../documents/editor/EditorContext';
 
 type ImageSidebarPanelProps = {
  data: ImageProps;
  setData: (v: ImageProps) => void;
 };
 export default function ImageSidebarPanel({ data, setData }: ImageSidebarPanelProps) {
  const [, setErrors] = useState<Zod.ZodError | null>(null);
+ const images = useImages();
 
  const updateData = (d: unknown) => {
  const res = ImagePropsSchema.safeParse(d);
@@ -31,8 +33,39 @@ export default function ImageSidebarPanel({ data, setData }: ImageSidebarPanelPr
  }
  };
 
+ const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const file = event.target.files?.[0];
+ if (!file) {
+ return;
+ }
+
+ const reader = new FileReader();
+ reader.onload = () => {
+ addImage({ base64: reader.result as string, file });
+ };
+ reader.readAsDataURL(file);
+ };
+
+ const handleImageClick = (image: { base64: string; file: File }) => () => {
+ updateData({ ...data, props: { ...data.props, url: image.file.name } });
+ };
+
  return (
  <BaseSidebarPanel title="Image block">
+ <Button component="label">
+ Upload image
+ <input type="file" accept="image/*" hidden onChange={handleFileUpload} />
+ </Button>
+
+ <Box>
+ {images.map((image) => (
+ <Box onClick={handleImageClick(image)}>
+ <img key={image.file.name} src={image.base64} alt="Uploaded" style={{ width: 50 }} />
+ {image.file.name}
+ </Box>
+ ))}
+ </Box>
+
  <TextInput
  label="Source URL"
  defaultValue={data.props?.url ?? ''}

packages/editor-sample/src/App/TemplatePanel/EmailPreview.tsx

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { useEffect, useRef } from 'react';
+import { useImages } from '../../documents/editor/EditorContext';
+
+interface EmailPreviewProps {
+ html: string;
+}
+
+export const EmailPreview = ({ html }: EmailPreviewProps) => {
+ const images = useImages();
+ const iframeRef = useRef<HTMLIFrameElement>(null);
+
+ const content = useMemo(() => {
+ let copy = html;
+ images.forEach((image) => {
+ copy = copy.replaceAll(image.file.name, image.base64);
+ })
+ return copy
+ }, [images]);
+
+ useEffect(() => {
+ if (iframeRef.current && content) {
+ const newChild = new DOMParser().parseFromString(content, 'text/html');
+ iframeRef.current?.contentDocument?.replaceChild(
+ newChild.documentElement,
+ iframeRef.current.contentDocument.documentElement
+ );
+ }
+ }, [iframeRef.current, content]);
+
+ return (
+ <iframe
+ ref={iframeRef}
+ style={{
+ width: '100%',
+ height: '100%',
+ }}
+ title="Email preview"
+ />
+ );
+};

packages/editor-sample/src/App/TemplatePanel/index.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { MonitorOutlined, PhoneIphoneOutlined } from '@mui/icons-material';
 import { Box, Stack, SxProps, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
-import { Reader } from '@usewaypoint/email-builder';
+import { Reader, renderToStaticMarkup } from '@usewaypoint/email-builder';
 
 import EditorBlock from '../../documents/editor/EditorBlock';
 import {
@@ -20,11 +20,13 @@ import ImportJson from './ImportJson';
 import JsonPanel from './JsonPanel';
 import MainTabsGroup from './MainTabsGroup';
 import ShareButton from './ShareButton';
+import { EmailPreview } from './EmailPreview';
 
 export default function TemplatePanel() {
  const document = useDocument();
  const selectedMainTab = useSelectedMainTab();
  const selectedScreenSize = useSelectedScreenSize();
+ const preview = useMemo(() => renderToStaticMarkup(document, { rootBlockId: 'root' }), [document])
 
  let mainBoxSx: SxProps = {
  height: '100%',
@@ -62,7 +64,8 @@ export default function TemplatePanel() {
  case 'preview':
  return (
  <Box sx={mainBoxSx}>
- <Reader document={document} rootBlockId="root" />
+ <EmailPreview html={preview}/>
+ {/* <Reader document={document} rootBlockId="root" /> */}
  </Box>
  );
  case 'html':

packages/editor-sample/src/documents/editor/EditorContext.tsx

@@ -4,6 +4,11 @@ import getConfiguration from '../../getConfiguration';
 
 import { TEditorConfiguration } from './core';
 
+export type FileWithBase64 = {
+ file: File;
+ base64: string;
+};
+
 type TValue = {
  document: TEditorConfiguration;
 
@@ -14,6 +19,8 @@ type TValue = {
 
  inspectorDrawerOpen: boolean;
  samplesDrawerOpen: boolean;
+
+ images: Array<FileWithBase64>;
 };
 
 const editorStateStore = create<TValue>(() => ({
@@ -25,6 +32,7 @@ const editorStateStore = create<TValue>(() => ({
 
  inspectorDrawerOpen: true,
  samplesDrawerOpen: true,
+ images: [],
 }));
 
 export function useDocument() {
@@ -59,6 +67,10 @@ export function useSamplesDrawerOpen() {
  return editorStateStore((s) => s.samplesDrawerOpen);
 }
 
+export function useImages() {
+ return editorStateStore((s) => s.images);
+}
+
 export function setSelectedBlockId(selectedBlockId: TValue['selectedBlockId']) {
  const selectedSidebarTab = selectedBlockId === null ? 'styles' : 'block-configuration';
  const options: Partial<TValue> = {};
@@ -107,3 +119,8 @@ export function toggleSamplesDrawerOpen() {
 export function setSelectedScreenSize(selectedScreenSize: TValue['selectedScreenSize']) {
  return editorStateStore.setState({ selectedScreenSize });
 }
+
+export const addImage = (image: FileWithBase64) => {
+ const images = editorStateStore.getState().images;
+ return editorStateStore.setState({ images: [...images, image] });
+};

packages/editor-sample/src/documents/editor/core.tsx

@@ -22,6 +22,18 @@ import ContainerPropsSchema from '../blocks/Container/ContainerPropsSchema';
 import EmailLayoutEditor from '../blocks/EmailLayout/EmailLayoutEditor';
 import EmailLayoutPropsSchema from '../blocks/EmailLayout/EmailLayoutPropsSchema';
 import EditorBlockWrapper from '../blocks/helpers/block-wrappers/EditorBlockWrapper';
+import { useImages } from './EditorContext';
+
+const CustomImagePropsSchema = ImagePropsSchema.extend({});
+
+const isUrl = (value: string) => {
+ try {
+ new URL(value);
+ return true;
+ } catch {
+ return false;
+ }
+};
 
 const EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
  Avatar: {
@@ -75,13 +87,18 @@ const EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
  Image: {
  schema: ImagePropsSchema,
  Component: (data) => {
+ const images = useImages()
  const props = {
  ...data,
  props: {
  ...data.props,
- url: data.props?.url ?? 'https://placehold.co/600x400@2x/F8F8F8/CCC?text=Your%20image',
+ url: data.props?.url,
  },
  };
+ if (props.props?.url && !isUrl(props.props.url)) {
+ props.props.url = images.find((i) => i.file.name === props.props.url)?.base64 ?? data.props.url;
+ }
+
  return (
  <EditorBlockWrapper>
  <Image {...props} />
@@ -117,6 +134,14 @@ const EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
  </EditorBlockWrapper>
  ),
  },
+ CustomImage: {
+ schema: CustomImagePropsSchema,
+ Component: (props) => (
+ <EditorBlockWrapper>
+ <Image {...props} />
+ </EditorBlockWrapper>
+ ),
+ },
 });
 
 export const EditorBlock = buildBlockComponent(EDITOR_DICTIONARY);