Minor fixes throughout the system.

client/public/editor.js

@@ -0,0 +1,112 @@
+unlayer.registerPropertyEditor({
+  name: "my_color_picker",
+  layout: "bottom",
+  Widget: unlayer.createWidget({
+    render(value) {
+      return `
+        <input class="color-value" value=${value} />
+        <button class="red">Red</button>
+        <button class="green">Green</button>
+        <button class="blue">Blue</button>
+      `;
+    },
+    mount(node, value, updateValue) {
+      var input = node.getElementsByClassName("color-value")[0];
+      input.onchange = function (event) {
+        updateValue(event.target.value);
+      };
+
+      var redButton = node.getElementsByClassName("red")[0];
+      redButton.onclick = function () {
+        updateValue("#f00");
+      };
+
+      var greenButton = node.getElementsByClassName("green")[0];
+      greenButton.onclick = function () {
+        updateValue("#0f0");
+      };
+
+      var blueButton = node.getElementsByClassName("blue")[0];
+      blueButton.onclick = function () {
+        updateValue("#00f");
+      };
+    },
+  }),
+});
+
+unlayer.registerTool({
+  type: "whatever",
+  category: "contents",
+  label: "My Tool",
+  icon: "fa-smile",
+  values: {},
+  options: {
+    default: {
+      title: null,
+    },
+    text: {
+      title: "Text",
+      position: 1,
+      options: {
+        color: {
+          label: "Color",
+          defaultValue: "#000",
+          widget: "my_color_picker",
+        },
+      },
+    },
+  },
+  renderer: {
+    Viewer: unlayer.createViewer({
+      render(values) {
+        return `
+          <div style="color: ${values.color};">I am a custom tool.</div>
+        `;
+      },
+    }),
+    exporters: {
+      web: function () {},
+      email: function () {},
+    },
+  },
+});
+
+unlayer.registerColumns([2, 2, 2, 2, 2, 2]);
+unlayer.registerColumns([1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+
+unlayer.registerTool({
+  type: "whatever",
+  category: "contents",
+  label: "Begin Repeater",
+  icon: "fa-smile",
+  values: {},
+  options: {
+    default: {
+      title: "BeginRepeater",
+    },
+    text: {
+      title: "Text",
+      position: 1,
+      options: {
+        field: {
+          label: "Field",
+          defaultValue: "Field Name...",
+          widget: "my_color_picker",
+        },
+      },
+    },
+  },
+  renderer: {
+    Viewer: unlayer.createViewer({
+      render(values) {
+        return `
+          <div style="color: ${values.color};">{{${values.field}}}</div>
+        `;
+      },
+    }),
+    exporters: {
+      web: function () {},
+      email: function () {},
+    },
+  },
+});