JSFiddle - React, Tailwind, and code Playground

by Andrea Bogazzi

HTML

<script src="https://s.picdn.net/editor/image/assets/integration.js"></script>
<main id="container">
   <div id="template-user">
      <button id="switch-creator" onclick="switchcreator()" >Switch to template creator</button>
  </div>
    <div id="template-creator">
      <button id="switch-consumer" onclick="switchconsumer()" >Switch to template consumer</button>
  </div>
</main>

CSS

body {
  margin: 0;
  padding: 0;
}

iframe {
  border: none;
}

#container {
  width: 100%;
}

#template-creator {
  position: absolute;
  width: 100%;
  height: 100%;
}

#template-user {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

#switch-consumer, #switch-creator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  margin: 12px;
  background-color: red;
  font-size: 16px;
  color: white;
  padding: 5px;
  border: none;
}

JavaScript

var HIGH = 100;
var LOW = 10;
function switchconsumer() {
  myBackendApi.fetchTemplates().then(data => {
   window.editorUser.setCustomTemplates(data);
    document.getElementById('template-creator').style.zIndex = LOW;
    document.getElementById('template-user').style.zIndex = HIGH;
  });
  
}

function switchcreator() {
    document.getElementById('template-creator').style.zIndex = HIGH;
    document.getElementById('template-user').style.zIndex = LOW;
}

function getDefaultConfig() {
  return {
    apiKey: 'eJrUUsMD418TVMaQa5m2u8Kk',
    initialPanel: 'none',
    env: 'prod',
  };
}

let id = 0;

const data = [];

const myBackendApi = {
  fetchTemplates: () => Promise.resolve(data.map(t => ({
    id: t.id,
    width: t.width,
    height: t.height,
    previewUrl: t.previewUrl,
  }))),
  pushTemplate: (tData) => {
    id += 1;
    data.push({
      ...tData,
      id,
    });
  },
  fetchTemplate: (id) => Promise.resolve(data.find(t => t.id === id)),
}

// integrator utility code

window.editorTemplates = editorT = window.Editor({
  ...getDefaultConfig(),
  primaryActionText: 'SAVE-TEMPLATE',
  primaryActionBackgroundColor: 'green',
  container: document.getElementById('template-creator'),
});
editorT.launch().then(() => {
  editorT.config.enableFeature('templates');
});
editorT.on('primaryAction', () => {
  Promise.all([editorT.getDesign(), editorT.getThumbnail()]).then(([design, thumbnail]) => {
    const template = {
      state: design,
      previewUrl: URL.createObjectURL(thumbnail),
      width: design.state.pages[0].width,
      height: design.state.pages[0].height,
    };
    myBackendApi.pushTemplate(template);
  });

});

// final integration code

window.editorUser = editorU = window.Editor({
  ...getDefaultConfig(),
  primaryActionText: 'DOWNLOAD',
  primaryActionBackgroundColor: 'blue',
  theme: 2,
  container: document.getElementById('template-user'),
});
editorU.on('templateRequest', ({ id }) => {
  editorU.ui.showActivityIndicator();
 ...