@yape/plugin-browser-user-task-payload-editor/src/index.js

Yape Plugin to support exclusive gateways configured with the camunda modeler

import { Plugins } from '@yape/engine';

class UserTaskPayloadEditor extends Plugins.UserTask {
  onActive(definition, processInstance) {
    const editorContainer = document.createElement('div');
    document.body.appendChild(editorContainer);

    const editor = CodeMirror(editorContainer, {
      lineNumbers: true,
      mode: 'javascript',
      json: true,
      tabSize: 2,
      value: js_beautify(JSON.stringify(processInstance.payload), {
        indent_size: 2,
      }),
    });

    const title = document.createElement('h3');
    title.innerHTML = definition.name;
    title.style.margin = 0;
    title.style.background = '#444';
    title.style.color = '#FFF';
    title.style.padding = '12px';
    title.style.fontFamily = 'Arial';

    editor.doc.cm.display.wrapper.prepend(title);

    editor.addKeyMap({
      'Cmd-Enter': () => {
        // eslint-disable-next-line
        processInstance.payload = JSON.parse(editor.getValue());

        editor.doc.cm.display.wrapper.remove();
        document.body.removeChild(editorContainer);
        editorContainer.remove();

        processInstance.run();
      },
    });
  }
}

export default UserTaskPayloadEditor;

if (typeof Yape !== 'undefined' && Yape.Plugins) {
  Yape.Plugins['browser-user-task-payload-editor'] = UserTaskPayloadEditor;
}