1.9.0: Added event to extend editorjs config right before render

Plugin.php

@@ -489,6 +489,16 @@ public function registerEditorBlocks()
         ];
     }
 
+    public function registerEditorTunes()
+    {
+        return [];
+    }
+
+    public function registerEditorInlineToolbar()
+    {
+        return [];
+    }
+
     /**
      * @throws \Illuminate\Contracts\Container\BindingResolutionException
      */

composer.json

@@ -3,8 +3,9 @@
     "type": "october-plugin",
     "description": "Most powerful, next generation block styled editor with multilingual support.",
     "require": {
-        "codex-team/editor.js": "^2.0",
-        "composer/installers": "~1.0"
+        "ext-json": "*",
+        "composer/installers": "~1.0",
+        "codex-team/editor.js": "^2.0"
     },
     "license": "MIT",
     "authors": [

formwidgets/EditorJS.php

@@ -1,8 +1,7 @@
 <?php namespace ReaZzon\Editor\FormWidgets;
 
-use Config, Event;
+use Event;
 use System\Classes\PluginManager;
-use October\Rain\Support\Collection;
 use Backend\Classes\FormWidgetBase;
 
 /**
@@ -12,16 +11,24 @@
  */
 class EditorJS extends FormWidgetBase
 {
+    const EVENT_CONFIG_BUILT = 'reazzon.editorjs.config.built';
+
     /**
      * @inheritDoc
      */
     protected $defaultAlias = 'editorjs';
 
-    public $placeholder;
-
     public $stretch;
 
-    public $toolSettings;
+    public $settings = [];
+
+    public $blocksSettings = [];
+
+    public $tunesSettings = [];
+
+    public $inlineToolbarSettings = [];
+
+    public $blocksScripts = [];
 
     /**
      * @inheritDoc
@@ -36,7 +43,7 @@ public function init()
     public function render()
     {
         $this->fillFromConfig([
-            'placeholder',
+            'settings'
         ]);
         $this->prepareVars();
         return $this->makePartial('editorjs');
@@ -47,11 +54,13 @@ public function render()
      */
     public function prepareVars()
     {
-        $this->vars['placeholder'] = $this->placeholder;
         $this->vars['name'] = $this->formField->getName();
         $this->vars['value'] = $this->getLoadValue();
         $this->vars['model'] = $this->model;
-        $this->vars['toolSettings'] = e(json_encode($this->toolSettings));
+        $this->vars['settings'] = e(json_encode($this->settings));
+        $this->vars['blockSettings'] = e(json_encode($this->blocksSettings));
+        $this->vars['tunesSettings'] = e(json_encode($this->tunesSettings));
+        $this->vars['inlineToolbarSettings'] = e(json_encode($this->inlineToolbarSettings));
     }
 
     /**
@@ -85,7 +94,7 @@ protected function prepareBlocks()
             }
 
             $editorPlugins = $plugin->registerEditorBlocks();
-            if (!is_array($editorPlugins)) {
+            if (!is_array($editorPlugins) && !empty($editorPlugins)) {
                 continue;
             }
 
@@ -96,15 +105,71 @@ protected function prepareBlocks()
             foreach ($editorPlugins as $block => $sections) {
                 foreach ($sections as $name => $section) {
                     if ($name === 'settings') {
-                        $this->toolSettings = array_add($this->toolSettings, $block, $section);
+                        $this->blocksSettings = array_add($this->blocksSettings, $block, $section);
                     }
                     if ($name === 'scripts') {
                         foreach ($section as $script) {
-                            $this->addJs($script);
+                            $this->blocksScripts[] = $script;
                         }
                     }
                 }
             }
+
+            $editorTunes = $plugin->registerEditorTunes();
+            if (!empty($editorTunes) && is_array($editorTunes)) {
+                foreach ($editorTunes as $tune) {
+                    $this->tunesSettings[] = $tune;
+                }
+            }
+
+            $inlineToolbarSettings = $plugin->registerEditorInlineToolbar();
+            if (!empty($inlineToolbarSettings) && is_array($inlineToolbarSettings)) {
+                foreach ($inlineToolbarSettings as $inlineToolbarSetting) {
+                    $this->inlineToolbarSettings[] = $inlineToolbarSetting;
+                }
+            }
+
+            /**
+             * Extend config, add your own settings to already existing plugins.
+             *
+             * Event::listen(\ReaZzon\Editor\FormWidgets\EditorJS::EVENT_CONFIG_BUILT, function($blocks) {
+             *
+             *     foreach($blocks['settings'] as $settings) {
+             *          // ..
+             *     }
+             *
+             *     foreach($blocks['scripts'] as $script) {
+             *         // ..
+             *     }
+             *
+             *     foreach($blocks['tunes'] as $tuneItem) {
+             *         // ..
+             *     }
+             *
+             *     foreach($blocks['inlineToolbar'] as $inlineToolbarItem) {
+             *         // ..
+             *     }
+             *
+             *     return $blocks;
+             * });
+             */
+            $eventBlocks = Event::fire(self::EVENT_CONFIG_BUILT, [
+                'settings' => $this->blocksSettings,
+                'scripts' => $this->blocksScripts,
+                'tunes' => $this->tunesSettings,
+                'inlineToolbar' => $this->inlineToolbarSettings
+            ]);
+
+            if (!empty($eventBlocks)) {
+                $this->blocksSettings = $eventBlocks['settings'];
+                $this->blocksScripts = $eventBlocks['scripts'];
+                $this->tunesSettings = $eventBlocks['tunes'];
+                $this->inlineToolbarSettings = $eventBlocks['inlineToolbar'];
+            }
+
+            foreach ($this->blocksScripts as $script) {
+                $this->addJs($script);
+            }
         }
     }
 }

formwidgets/editorjs/assets/js/editor.js

@@ -27,7 +27,10 @@ if("function" == typeof define && define.amd) {
         this.$form = this.$el.closest('form')
         this.$textarea = this.$el.find('>textarea:first')
         this.$editor = null
-        this.toolSettings = this.$el.data('settings')
+        this.settings = this.$el.data('settings')
+        this.blockSettings = this.$el.data('blocks-settings')
+        this.tunesSettings = this.$el.data('tunes-settings')
+        this.inlineToolbarSettings = this.$el.data('inlineToolbar-settings')
 
         $.oc.foundation.controlUtils.markDisposable(element)
         Base.call(this)
@@ -46,15 +49,20 @@ if("function" == typeof define && define.amd) {
     Editor.prototype.initEditorJS = function () {
 
         // Init all plugin classes from config
-        for (let [key, value] of Object.entries(this.toolSettings)) {
+        for (let [key, value] of Object.entries(this.blockSettings)) {
             value.class = window[value.class];
         }
 
         // Parameters for EditorJS
         let parameters = {
             holder: this.$el.attr('id'),
-            placeholder: this.$el.data('placeholder') ? this.$el.data('placeholder') : 'Tell your story...',
-            tools: this.toolSettings,
+            placeholder: this.settings.placeholder ? this.settings.placeholder : 'Tell your story...',
+            defaultBlock: this.settings.defaultBlock ? this.settings.defaultBlock : 'paragraph',
+            autofocus: this.settings.autofocus,
+            i18n: this.settings.i18n,
+            tools: this.blockSettings,
+            tunes: this.tunesSettings,
+            inlineToolbar: this.inlineToolbarSettings,
             onChange: () => {
                 this.syncContent()
             },
@@ -63,11 +71,13 @@ if("function" == typeof define && define.amd) {
             },
         }
 
+        console.log(parameters)
+
         // Parsing already existing data from textarea
         if (this.$textarea.val().length > 0 && this.isJson(this.$textarea.val()) === true) {
             parameters.data = JSON.parse(this.$textarea.val())
         }
-        console.log('editor.js Init')
+
         this.$editor = new EditorJS(parameters);
     }
 
@@ -80,7 +90,11 @@ if("function" == typeof define && define.amd) {
         this.$el = null;
         this.$form = null;
         this.$textarea = null;
-        this.toolSettings = null;
+        this.settings = null;
+        this.blockSettings = null;
+        this.blockSettings = null;
+        this.tunesSettings = null;
+        this.inlineToolbarSettings = null;
         this.$editor = null;
 
         BaseProto.dispose.call(this)

formwidgets/editorjs/partials/_editorjs.htm

@@ -10,10 +10,11 @@
         class="editorjs-wrapper"
         data-control="editorjs"
         id="<?= $this->getId() ?>"
-        data-placeholder="<?= $placeholder ?>"
-        data-settings="<?= $toolSettings ?>">
+        data-settings="<?= $settings ?>"
+        data-blocks-settings="<?= $blockSettings ?>"
+        data-tunes-settings="<?= $tunesSettings ?>"
+        data-inlineToolbar-settings="<?= $inlineToolbarSettings ?>">
         <textarea
-            type="hidden"
             style="display: none"
             name="<?= $name ?>"
             id="<?= $this->getId('textarea') ?>"><?= $value ?></textarea>

formwidgets/mleditorjs/assets/js/mleditorjs.js

@@ -23,7 +23,6 @@
         this.$form = this.$el.closest('form')
         this.$textarea = $(options.textareaElement)
         this.$editorjs = $('[data-control=editorjs]:first', this.$el)
-        this.toolSettings = this.$el.data('settings')
         this.$locale = $('[data-editor-active-locale]', this.$el)
         this.oldLocale = null;
         this.currentLocale = this.$locale.val();

formwidgets/mleditorjs/partials/_mleditorjs.htm

@@ -10,7 +10,6 @@
         id="<?= $this->getId('mlControl') ?>"
         data-control="mleditorjs"
         data-textarea-element="#<?= $this->getId('textarea') ?>"
-        data-settings="<?= $toolSettings ?>"
         data-default-locale="<?= $defaultLocale->code ?>"
         class="field-multilingual field-multilingual-textarea field-multilingual-editorjs dropdown"
         >

updates/version.yaml

@@ -34,3 +34,4 @@
 1.7.9: Changed composer dependency version for editor-js-php
 1.8.0: Added support to override block views from theme partials. Fixed StaticPage support, fixed Rainlab.Blog support.
 1.8.1: Fixed bug with blocknames. Thanks @sergeitoroptsev
+1.9.0: Added event to extend editorjs config right before render