Added editor instance event hooks

As per #1721

resources/js/components/markdown-editor.js

@@ -30,6 +30,12 @@ class MarkdownEditor {
             this.displayDoc = this.display.contentDocument;
             this.init();
         });
+
+        window.$events.emitPublic(elem, 'editor-markdown::setup', {
+            markdownIt: this.markdown,
+            displayEl: this.display,
+            codeMirrorInstance: this.cm,
+        });
     }
 
     init() {

resources/js/components/wysiwyg-editor.js

@@ -412,6 +412,7 @@ class WysiwygEditor {
         this.loadPlugins();
 
         this.tinyMceConfig = this.getTinyMceConfig();
+        window.$events.emitPublic(elem, 'editor-tinymce::pre-init', {config: this.tinyMceConfig});
         window.tinymce.init(this.tinyMceConfig);
     }
 
@@ -654,6 +655,8 @@ class WysiwygEditor {
                 // Paste image-uploads
                 editor.on('paste', event => editorPaste(event, editor, context));
 
+                // Custom handler hook
+                window.$events.emitPublic(context.elem, 'editor-tinymce::setup', {editor});
             }
         };
     }

resources/js/services/code.js

@@ -240,24 +240,27 @@ function setContent(cmInstance, codeContent) {
 }
 
 /**
- * Get a CodeMirror instace to use for the markdown editor.
+ * Get a CodeMirror instance to use for the markdown editor.
  * @param {HTMLElement} elem
  * @returns {*}
  */
 function markdownEditor(elem) {
-    let content = elem.textContent;
-
-    return CodeMirror(function (elt) {
-        elem.parentNode.insertBefore(elt, elem);
-        elem.style.display = 'none';
-    }, {
+    const content = elem.textContent;
+    const config = {
         value: content,
         mode: "markdown",
         lineNumbers: true,
         theme: getTheme(),
         lineWrapping: true,
         scrollPastEnd: true,
-    });
+    };
+
+    window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
+
+    return CodeMirror(function (elt) {
+        elem.parentNode.insertBefore(elt, elem);
+        elem.style.display = 'none';
+    }, config);
 }
 
 /**

resources/js/services/events.js

@@ -7,6 +7,12 @@ class Events {
         this.stack = [];
     }
 
+    /**
+     * Emit a custom event for any handlers to pick-up.
+     * @param {String} eventName
+     * @param {*} eventData
+     * @returns {Events}
+     */
     emit(eventName, eventData) {
         this.stack.push({name: eventName, data: eventData});
         if (typeof this.listeners[eventName] === 'undefined') return this;
@@ -18,11 +24,32 @@ class Events {
         return this;
     }
 
+    /**
+     * Listen to a custom event and run the given callback when that event occurs.
+     * @param {String} eventName
+     * @param {Function} callback
+     * @returns {Events}
+     */
     listen(eventName, callback) {
         if (typeof this.listeners[eventName] === 'undefined') this.listeners[eventName] = [];
         this.listeners[eventName].push(callback);
         return this;
     }
+
+    /**
+     * Emit an event for public use.
+     * Sends the event via the native DOM event handling system.
+     * @param {Element} targetElement
+     * @param {String} eventName
+     * @param {Object} eventData
+     */
+    emitPublic(targetElement, eventName, eventData) {
+        const event = new CustomEvent(eventName, {
+            detail: eventData,
+            bubbles: true
+        });
+        targetElement.dispatchEvent(event);
+    }
 }
 
 export default Events;