JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://alloyui.com/alloy-ui/aui-css/css/bootstrap.min.css">
<link rel="stylesheet" href="https://alloyui.com/alloy-ui/aui-css/css/bootstrap.min.css">
<script src="http://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<div id="diagram-builder-bb">
  <div id="diagram-builder-sn"></div>
</div>

JavaScript

YUI().use(
  'aui-diagram-builder',
  function(Y) {

      Y.MyCustomCellEditor = Y.Component.create({
          NAME: 'MyCustomCellEditor',
          EXTENDS: Y.DropDownCellEditor
      });


      Y.DiagramNodeCustom = Y.Component.create({
          NAME: 'diagram-node',
          ATTRS: {
              type: {
                  value: 'custom'
              },
              customAttr: {
                  validator: Y.Lang.isValue
              }
          },

          EXTENDS: Y.DiagramNodeTask,

          prototype: {
              initializer: function() {
                  this.SERIALIZABLE_ATTRS.push('customAttr');
              },

              getPropertyModel: function () {
                  var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(this, arguments);
                  var ed = new Y.MyCustomCellEditor({options: {
                      apple: 'Apple',
                      banana: 'Banana',
                      cherry: 'Cherry',
                      kiwi: 'Kiwi'
                  }});

                  model.push({
                      attributeName: 'customAttr',
                      // editor: new Y.DropDownCellEditor({options: {
                      //     apple: 'Apple',
                      //     banana: 'Banana',
                      //     cherry: 'Cherry',
                      //     kiwi: 'Kiwi'
                      // }}),
                      editor: ed,
                      name: 'CustomAttr'
                  });

                  return model;
              }
          }
      });

      Y.DiagramBuilder.types['custom'] = Y.DiagramNodeCustom;

    var availableFields = [
      
        {
            iconClass: 'diagram-node-custom-icon',
            label: 'Custom',
            type: 'custom'
        }
    ];

    var diagramBuilder = new Y.DiagramBuilder(
      {
        availableFields: availableFields,
        boundingBox: '#diagram-builder-bb',
        fields: [
          {
            name:...