react-email-builder
Version:
A simple React drag and drop email builder.
94 lines (93 loc) • 4.66 kB
JavaScript
import React, { useMemo } from 'react';
import { useBlockAttrsEditor, useBlockEditor, useEmailBuilderConfig, useSelectedBlock, useSetEmailBuilderState } from '../../hooks';
import { FormSection } from '../../controls/FormSection';
import { Field } from '../../controls/Field';
import { ColorPicker } from '../../controls/ColorPicker';
import { PaddingInput } from '../../controls/PaddingInput';
import { Button } from '../../controls/Button';
import { Select } from '../../controls/Select';
export function BlockEditor() {
const { block, column, columns } = useSelectedBlock();
const config = useEmailBuilderConfig();
const type = block?.type;
const blockConfig = useMemo(() => {
return config.blocks.find((b) => b.type === type);
}, [config, type]);
if (block) {
return (React.createElement(Editor, { key: block.id, block: block, blockConfig: blockConfig, column: column, columns: columns }));
}
return null;
}
function Editor({ block, blockConfig, column, columns }) {
const EditorComponent = blockConfig?.editorComponent;
const isPlaceholder = block.type === 'placeholder';
const setState = useSetEmailBuilderState();
const setBlock = useBlockEditor(block.id);
const style = block.style || {};
const setStyle = (newStyle) => {
setBlock((prev) => ({
...prev,
style: {
...prev.style,
...newStyle
}
}));
};
return (React.createElement("div", { style: { paddingBottom: 64 } },
React.createElement("div", { style: { padding: 16 } }, blockConfig ? blockConfig.name : 'No content'),
EditorComponent ? (React.createElement(FormSection, { name: "Attributes", defaultOpen: true },
React.createElement(EditorComponent, { block: block }))) : null,
isPlaceholder ? null : (React.createElement(FormSection, { name: "Block attributes", defaultOpen: true },
block.type !== 'columns' ? (React.createElement(Field, { label: "Background color" },
React.createElement(ColorPicker, { color: style.bgColor, onChange: (bgColor) => {
setStyle({ bgColor });
} }))) : null,
React.createElement(PaddingInput, { value: style.padding, onChange: (padding) => {
setStyle({ padding });
} }))),
isPlaceholder || columns || column ? null : (React.createElement(FormSection, { name: "Section attributes", defaultOpen: true },
React.createElement(Field, { label: "Background color" },
React.createElement(ColorPicker, { color: style.sectionBgColor, onChange: (sectionBgColor) => {
setStyle({ sectionBgColor });
} })),
React.createElement(Field, { label: "Fill parent width" },
React.createElement(Select, { value: style.full || 'yes', options: [
{ value: 'yes', label: 'Yes' },
{ value: 'no', label: 'No' }
], onChange: (full) => {
setStyle({ full: full === 'no' ? 'no' : undefined });
} })))),
columns && column ? (React.createElement(ColumnEditor, { column: column, columns: columns })) : null,
columns ? (React.createElement(FormSection, { name: "Columns attributes", defaultOpen: true },
React.createElement(Button, { onClick: () => {
setState((prev) => ({
...prev,
selectedId: columns.id
}));
} }, "Edit columns"))) : null));
}
function ColumnEditor({ column, columns }) {
const setAttrs = useBlockAttrsEditor(columns);
const setColumnAttrs = (attrs) => {
setAttrs({
columns: columns.attrs.columns.map((col) => col.id === column.id
? {
...col,
attrs: {
...col.attrs,
...attrs
}
}
: col)
});
};
const attrs = column.attrs || {};
return (React.createElement(FormSection, { name: "Column attributes", defaultOpen: true },
React.createElement(Field, { label: "Background color" },
React.createElement(ColorPicker, { color: attrs.bgColor, onChange: (bgColor) => {
setColumnAttrs({ bgColor });
} })),
React.createElement(PaddingInput, { value: attrs.padding, onChange: (padding) => {
setColumnAttrs({ padding });
} })));
}