diff --git a/admin-panel/body-page-editor/element-editor.jsx b/admin-panel/body-page-editor/element-editor.jsx --- a/admin-panel/body-page-editor/element-editor.jsx +++ b/admin-panel/body-page-editor/element-editor.jsx @@ -10,18 +10,22 @@ function createControls() { let controls = []; - for (const prop in components[componentName].propsControls) { - let formControlName = components[componentName].propsControls[prop]; + let propsControls = components[componentName].propsControls(); + for (const prop in propsControls) { + let { control: formControlName, label } = propsControls[prop]; controls.push( - formControls[formControlName]({ - name: prop, - key: prop, - value: componentProps[prop] || '', - onChange: newValue => { - onChange({ ...componentProps, [prop]: newValue }); - }, - }) + ); } diff --git a/admin-panel/body-page-editor/preview.jsx b/admin-panel/body-page-editor/preview.jsx --- a/admin-panel/body-page-editor/preview.jsx +++ b/admin-panel/body-page-editor/preview.jsx @@ -1,35 +1,37 @@ const React = require('react'); const { useState, useEffect } = React; +const uuidv4 = require('uuid/v4'); -async function generateRenderedHTML(elements) { +async function generateRenderedHTML(uuid, elements) { return await fetch('/api/v1/render', { method: 'POST', headers: { 'Content-Type': 'application/json', }, - body: JSON.stringify({ body: elements }), + body: JSON.stringify({ uuid, body: elements }), }).then(response => response.text()); } module.exports = function Preview({ elements }) { - const [html, setHtml] = useState(''); + const [previewUrl, setPreviewUrl] = useState(''); + const [uuid] = useState(uuidv4()); useEffect(() => { - generateRenderedHTML(elements).then(data => setHtml(data)); - }, [elements]); + generateRenderedHTML(uuid, elements).then(url => setPreviewUrl(url)); + }, [JSON.stringify(elements)]); - return React.createElement('div', { - style: { - backgroundColor: '#f1f1f1', - display: 'flex', - flexFlow: 'column', - height: 'auto', - margin: '1rem', - padding: '1rem', - width: '30rem', - }, - dangerouslySetInnerHTML: { - __html: html, - }, - }); + return ( +