Added editor instance event hooks

As per #1721

diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js
index c89a7ad8be87c41673c5e998bdef200f8bbe8f19..de256a8466a727add893f5370167f3db4ef34320 100644 (file)
--- a/resources/js/components/markdown-editor.js
+++ b/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() {

diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js
index c03c0d2aa4e8bba75b8206e7060d50bb4dc26f06..60a6743ea7679bdebb7100bd2c047e1b26101166 100644 (file)
--- a/resources/js/components/wysiwyg-editor.js
+++ b/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});
             }
         };
     }

diff --git a/resources/js/services/code.js b/resources/js/services/code.js
index 1e0e48289d595132a5ef0e08d006d3c249352d3f..ca66bdb5a8a43337e25f272a761bc10823885851 100644 (file)
--- a/resources/js/services/code.js
+++ b/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);
 }
 
 /**

diff --git a/resources/js/services/events.js b/resources/js/services/events.js
index 1f97d0cb8295ccb02774b6c4b8c4faf189fdffd7..fa3ed7fdfcb55ebd341ee44543eafd58b697d14d 100644 (file)
--- a/resources/js/services/events.js
+++ b/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;
\ No newline at end of file