Merge Pull Request #41 by @thelostcode

Readme.md

@@ -18,21 +18,131 @@ Publish the config file
 php artisan vendor:publish --provider="Advoor\NovaEditorJs\FieldServiceProvider"
 ```
 
+## Extending
+
+**For the purpose of this section, we will use `editor-js/warning` as an example of extensibility.**
+
+There are two steps to extending the editor. The first consists of creating a JavaScript file and passing it onto Nova.
+The second step allows you to create a blade view file and pass it to the field to allow your block to render in the Nova `show` page.
+
+### Creating the Javascript file
+
+`resources/js/editor-js-plugins/warning.js`
+
+```js
+/*
+ * The editorConfig variable is used by you to add your tools,
+ * or any additional configuration you might want to add to the editor.
+ *
+ * The fieldConfig variable is the VueJS field exposed to you. You may
+ * fetch any value that is contained in your laravel config file from there.
+ */
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    if (fieldConfig.toolSettings.warning.activated === true) {
+        editorConfig.tools.warning = {
+            class: require('@editorjs/warning'),
+            shortcut: fieldConfig.toolSettings.warning.shortcut,
+            config: {
+                titlePlaceholder: fieldConfig.toolSettings.warning.titlePlaceholder,
+                messagePlaceholder: fieldConfig.toolSettings.warning.messagePlaceholder,
+            },
+        }
+    }
+});
+```
+
+`webpack.mix.js`
+
+```js
+const mix = require('laravel-mix');
+
+mix.js('resources/js/editor-js-plugins/warning.js', 'public/js/editor-js-plugins/warning.js');
+```
+
+`app/Providers/NovaServiceProvider.php`
+
+```php
+// ...
+public function boot()
+{
+    parent::boot();
+
+    Nova::serving(function () {
+        Nova::script('editor-js-warning', public_path('js/editor-js-plugins/warning.js'));
+    });
+}
+// ...
+```
+
+`config/nova-editor-js.php`
+
+```php
+return [
+    // ...
+    'toolSettings' => [
+        'warning' => [
+            'activated' => true,
+            'titlePlaceholder' => 'Title',
+            'messagePlaceholder' => 'Message',
+            'shortcut' => 'CMD+SHIFT+L'
+        ],
+    ]
+    // ...
+];
+```
+
+### Creating the blade view file
+
+`resources/views/editorjs/warning.blade.php`
+
+*CSS classes taken from [here](https://github.com/editor-js/warning/blob/master/src/index.css).*
+
+```html
+<div class="editor-js-block">
+    <div class="cdx-warning">
+        <h3 class="cdx-warning__title">{{ $title }}</h3>
+        <p class="cdx-warning__message">{{ $message }}</p>
+    </div>
+</div>
+```
+
+`app/Providers/NovaServiceProvider.php`
+
+```php
+use Advoor\NovaEditorJs\NovaEditorJs;
+
+// ...
+public function boot()
+{
+    parent::boot();
+
+    NovaEditorJs::addRender('warning', function($block) {
+        return view('editorjs.warning', $block['data'])->render();
+    });
+
+    // ...
+}
+// ...
+```
+
+That's it for extending the Nova EditorJS package!
+
+
 ## Upgrade
 If upgrading from v0.4.0, re-publish the config file!
 
 ## Usage:
 
 Add this `use` statement to the top of the your nova resource file:
 
-```
+```php
 use Advoor\NovaEditorJs\NovaEditorJs;
 ```
 
 Use the field as below:
 
-```
-NovaEditorJs::make('FieldName')
+```php
+NovaEditorJs::make('FieldName');
 ```
 
 And boom!
@@ -42,7 +152,7 @@ file along with some other settings so make sure to have a look :)
 
 You can use the built in function to generate the response for the frontend:
 
-```
+```php
 NovaEditorJs::generateHtmlOutput($user->about);
 ```
 
@@ -60,4 +170,4 @@ Each 'block' has it's own view which can be overwritten in `resources/views/vend
 * https://github.com/editor-js/embed
 * https://github.com/editor-js/delimiter
 * https://github.com/editor-js/table
-* https://github.com/editor-js/raw
+* https://github.com/editor-js/raw

resources/js/blocks/checklist.js

@@ -0,0 +1,9 @@
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    if (fieldConfig.toolSettings.checklist.activated === true) {
+        editorConfig.tools.checklist = {
+            class: require('@editorjs/checklist'),
+            inlineToolbar: fieldConfig.toolSettings.checklist.inlineToolbar,
+            shortcut: fieldConfig.toolSettings.checklist.shortcut
+        }
+    }
+});

resources/js/blocks/code.js

@@ -0,0 +1,11 @@
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    if (fieldConfig.toolSettings.code.activated === true) {
+        editorConfig.tools.code = {
+            class: require('@editorjs/code'),
+            shortcut: fieldConfig.toolSettings.code.shortcut,
+            config: {
+                placeholder: fieldConfig.toolSettings.code.placeholder,
+            },
+        }
+    }
+});

resources/js/blocks/delimiter.js

@@ -0,0 +1,7 @@
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    if (fieldConfig.toolSettings.delimiter.activated === true) {
+        editorConfig.tools.delimiter = {
+            class: require('@editorjs/delimiter'),
+        }
+    }
+});

resources/js/blocks/embed.js

@@ -0,0 +1,16 @@
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    if (fieldConfig.toolSettings.embed.activated === true) {
+        editorConfig.tools.embed = {
+            class: require('@editorjs/embed'),
+            inlineToolbar: fieldConfig.toolSettings.embed.inlineToolbar,
+            config: {
+                services: {
+                    codepen: fieldConfig.toolSettings.embed.services.codepen,
+                    imgur: fieldConfig.toolSettings.embed.services.imgur,
+                    vimeo: fieldConfig.toolSettings.embed.services.vimeo,
+                    youtube: fieldConfig.toolSettings.embed.services.youtube,
+                }
+            }
+        }
+    }
+});

resources/js/blocks/heading.js

@@ -0,0 +1,11 @@
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    if (fieldConfig.toolSettings.header.activated === true) {
+        editorConfig.tools.header = {
+            class: require('@editorjs/header'),
+            config: {
+                placeholder: fieldConfig.toolSettings.header.placeholder
+            },
+            shortcut: fieldConfig.toolSettings.header.shortcut
+        }
+    }
+});

resources/js/blocks/image.js

@@ -0,0 +1,16 @@
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    if (fieldConfig.toolSettings.image.activated === true) {
+        editorConfig.tools.image = {
+            class: require('@editorjs/image'),
+            config: {
+                endpoints: {
+                    byFile: fieldConfig.uploadImageByFileEndpoint,
+                    byUrl: fieldConfig.uploadImageByUrlEndpoint,
+                },
+                additionalRequestHeaders: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+                }
+            }
+        }
+    }
+});

resources/js/blocks/inline-code.js

@@ -0,0 +1,8 @@
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    if (fieldConfig.toolSettings.inlineCode.activated === true) {
+        editorConfig.tools.inlineCode = {
+            class: require('@editorjs/inline-code'),
+            shortcut: fieldConfig.toolSettings.inlineCode.shortcut,
+        }
+    }
+});

resources/js/blocks/link.js

@@ -0,0 +1,10 @@
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    if (fieldConfig.toolSettings.link.activated === true) {
+        editorConfig.tools.linkTool = {
+            class: require('@editorjs/link'),
+            config: {
+                endpoint: fieldConfig.fetchUrlEndpoint,
+            }
+        }
+    }
+});

resources/js/blocks/list.js

@@ -0,0 +1,9 @@
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    if (fieldConfig.toolSettings.list.activated === true) {
+        editorConfig.tools.list = {
+            class: require('@editorjs/list'),
+            inlineToolbar: fieldConfig.toolSettings.list.inlineToolbar,
+            shortcut: fieldConfig.toolSettings.list.shortcut
+        }
+    }
+});

resources/js/blocks/marker.js

@@ -0,0 +1,8 @@
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    if (fieldConfig.toolSettings.marker.activated === true) {
+        editorConfig.tools.marker = {
+            class: require('@editorjs/marker'),
+            shortcut: fieldConfig.toolSettings.marker.shortcut
+        }
+    }
+});

resources/js/blocks/paragraph.js

@@ -0,0 +1,6 @@
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    editorConfig.tools.paragraph = {
+        class: require('@editorjs/paragraph'),
+        inlineToolbar: true
+    }
+});

resources/js/blocks/raw.js

@@ -0,0 +1,10 @@
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    if (fieldConfig.toolSettings.raw.activated === true) {
+        editorConfig.tools.raw = {
+            class: require('@editorjs/raw'),
+            config: {
+                placeholder: fieldConfig.toolSettings.raw.placeholder,
+            },
+        }
+    }
+});

resources/js/blocks/table.js

@@ -0,0 +1,8 @@
+NovaEditorJS.booting(function (editorConfig, fieldConfig) {
+    if (fieldConfig.toolSettings.table.activated === true) {
+        editorConfig.tools.table = {
+            class: require('@editorjs/table'),
+            inlineToolbar: fieldConfig.toolSettings.table.inlineToolbar,
+        }
+    }
+});