Allow the textarea.quill control to be configured by passing in optio…

…ns in the controlConfig object

create utility function to split an object based on an array of keys

src/js/control/README.md

@@ -42,6 +42,8 @@ This option expects an object with keys for the names of controls to specify an
 Have a look at `src/js/control/textarea.tinymce.js` for an example of a control that supports configuring. Rich text editors regularly require this type of configuration - customising toolbars, adding in plugins etc.
 
 ```javascript
+// inside the tinymce control class this is available as this.classConfig.paste_data_images
+
 var renderOpts = {
   controlConfig: {
     'textarea.tinymce': {
@@ -50,7 +52,16 @@ var renderOpts = {
   }
 };
 
-// inside the tinymce control class this is available as this.classConfig.paste_data_images
+// load a different version of Quill
+
+var renderOpts = {
+  controlConfig: {
+    'textarea.quill': {
+      js: '//cdn.quilljs.com/1.3.4/quill.js',
+      css: '//cdn.quilljs.com/1.3.4/quill.snow.css',
+    }
+  }
+}
 
 ```
 

src/js/control/textarea.quill.js

@@ -1,4 +1,5 @@
 import controlTextarea from './textarea';
+import utils from '../utils';
 
 /**
  * Quill rich text editor element
@@ -10,8 +11,36 @@ export default class controlQuill extends controlTextarea {
    * configure the quill editor requirements
    */
   configure() {
-    this.js = '//cdn.quilljs.com/1.2.4/quill.js';
-    this.css = '//cdn.quilljs.com/1.2.4/quill.snow.css';
+    const defaultClassConfig = {
+      js: '//cdn.quilljs.com/1.2.4/quill.js',
+      css: '//cdn.quilljs.com/1.2.4/quill.snow.css',
+    }
+
+    const defaultEditorConfig = {
+      modules: {
+        toolbar: [
+          [{'header': [1, 2, false]}],
+          ['bold', 'italic', 'underline'],
+          ['code-block']
+        ]
+      },
+      placeholder: this.config.placeholder || '',
+      theme: 'snow'
+    }
+
+    const [customClassConfig, customEditorConfig] = utils.splitObject(this.classConfig, ['css', 'js'])
+
+    // Allow for customization of the control
+    Object.assign(this, {
+      ...defaultClassConfig,
+      ...customClassConfig,
+    })
+
+    // Allow for customization of the editor
+    this.editorConfig = {
+      ...defaultEditorConfig,
+      ...customEditorConfig,
+    }
   }
 
   /**
@@ -34,17 +63,7 @@ export default class controlQuill extends controlTextarea {
     const Delta = window.Quill.import('delta');
     window.fbEditors.quill[this.id] = {};
     const editor = window.fbEditors.quill[this.id];
-    editor.instance = new window.Quill(this.field, {
-      modules: {
-        toolbar: [
-          [{'header': [1, 2, false]}],
-          ['bold', 'italic', 'underline'],
-          ['code-block']
-        ]
-      },
-      placeholder: this.config.placeholder || '',
-      theme: 'snow'
-    });
+    editor.instance = new window.Quill(this.field, this.editorConfig);
     editor.data = new Delta();
     if (value) {
       editor.instance.setContents(window.JSON.parse(this.parsedHtml(value)));

src/js/utils.js

@@ -631,4 +631,30 @@ const utils = {
   validAttr,
 }
 
+/**
+ * Splits an object based on array of keys
+ *
+ * @param {Object} obj Object to be split
+ * @param {Array}  keys Array of keys to use when splitting Object
+ *
+ * @return {Array} returns an array of Objects, the first where the keys matched,
+ *                 the second where they did not
+ */
+utils.splitObject = (obj, keys) => {
+  // reducer for recreating the initial object after splitting via keys
+  // provide a function so I don't reference the original obj
+  const reconstructObj = initialObj => (result, key) => {
+    result[key] = initialObj[key]
+    return result
+  }
+
+  const kept = Object.keys(obj)
+                     .filter(key => keys.includes(key))
+                     .reduce(reconstructObj(obj), {})
+  const rest = Object.keys(obj)
+                     .filter(key => !keys.includes(key))
+                     .reduce(reconstructObj(obj), {})
+  return [kept, rest]
+}
+
 export default utils