Merge pull request #57 from mostafaznv/dev

add general-html-support plugin to ckeditor bundle #56
mostafaznv · Jun 28, 2023 · 69bc004 · 69bc004
2 parents f5928e1 + bbc2b73
commit 69bc004
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 32 deletions.
diff --git a/README.md b/README.md
diff --git a/config/nova-ckeditor.php b/config/nova-ckeditor.php
@@ -93,6 +93,26 @@
                 ['title' => 'English', 'languageCode' => 'en']
             ],
 
+            /*
+             * General HTML Support
+             *
+             * @see https://ckeditor.com/docs/ckeditor5/latest/features/html/general-html-support.html#configuration
+             */
+
+            'html-support' => [
+                'allow' => [
+                    [
+                        'name'   => 'div',
+                        'classes' => true,
+                    ],
+                    [
+                        'name' => '/^(div|section|article)$/'
+                    ]
+                ],
+
+                'disallow' => []
+            ],
+
             'should-not-group-when-full' => false,
 
             'browser' => [

diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
         "@ckeditor/ckeditor5-heading": "^35.0.0",
         "@ckeditor/ckeditor5-horizontal-line": "^35.0.0",
         "@ckeditor/ckeditor5-html-embed": "^35.0.0",
+        "@ckeditor/ckeditor5-html-support": "^35.0.0",
         "@ckeditor/ckeditor5-image": "^35.0.0",
         "@ckeditor/ckeditor5-indent": "^35.0.0",
         "@ckeditor/ckeditor5-link": "^35.0.0",

diff --git a/resources/js/ckeditor/ckeditor.js b/resources/js/ckeditor/ckeditor.js
@@ -26,6 +26,7 @@ import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefrom
 import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat'
 import StrikeThrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough'
 import Code from '@ckeditor/ckeditor5-basic-styles/src/code'
+import {GeneralHtmlSupport} from '@ckeditor/ckeditor5-html-support'
 import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript'
 import Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript'
 import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline'
@@ -107,6 +108,7 @@ export default class CkEditor extends ClassicEditorBase {
             Superscript,
             StrikeThrough,
             Code,
+            GeneralHtmlSupport,
             Image,
             ImageStyle,
             ImageUpload,

diff --git a/resources/js/ckeditor/config/html.js b/resources/js/ckeditor/config/html.js
@@ -7,5 +7,9 @@ export default {
                 hasChanged: false
             }
         }
+    },
+    htmlSupport: {
+        allow: [],
+        disallow: []
     }
 }
diff --git a/resources/js/components/editor-field.vue b/resources/js/components/editor-field.vue
@@ -60,6 +60,7 @@ export default {
                 imageBrowser: this.currentField.imageBrowser,
                 videoBrowser: this.currentField.videoBrowser,
                 snippetBrowser: this.currentField.snippetBrowser,
+                htmlSupport: this.normalizeHtmlSupportItems(this.currentField.htmlSupport),
                 isReadOnly: this.currentField.readonly,
                 language: {
                     ui: this.currentField.uiLanguage,
@@ -161,6 +162,53 @@ export default {
             return providers
         },
 
+        normalizeHtmlSupportItems(htmlSupport) {
+            if (htmlSupport) {
+                if (htmlSupport.allow) {
+                    htmlSupport.allow.map(item => {
+                        if (item.name) {
+                            item.name = this.stringToRegex(item.name)
+                        }
+
+                        return item
+                    })
+                }
+                else {
+                    htmlSupport.allow = []
+                }
+
+                if (htmlSupport.disallow) {
+                    htmlSupport.disallow.map(item => {
+                        if (item.name) {
+                            item.name = this.stringToRegex(item.name)
+                        }
+
+                        return item
+                    })
+                }
+                else {
+                    htmlSupport.disallow = []
+                }
+
+                return htmlSupport
+            }
+
+            return {
+                allow: [],
+                disallow: []
+            }
+        },
+
+        stringToRegex(string) {
+            if (typeof string === 'string' && string.startsWith('/') && string.endsWith('/')) {
+                const regexPattern = string.slice(1, -1)
+
+                return new RegExp(regexPattern)
+            }
+
+            return string
+        },
+
         fill(formData) {
             if (this.currentlyIsVisible) {
                 formData.append(this.currentField.attribute, this.value || '')

diff --git a/src/CkEditor.php b/src/CkEditor.php
@@ -30,6 +30,7 @@ class CkEditor extends Field
 
     /**
      * Specifies the toolbar options
+     *
      * @var array
      */
     public array $toolbarOptions;
@@ -62,6 +63,13 @@ class CkEditor extends Field
      */
     public array $textPartLanguage;
 
+    /**
+     * General HTML Support
+     *
+     * @var array
+     */
+    public array $htmlSupport;
+
     /**
      * UI Language
      *
@@ -183,6 +191,19 @@ public function textPartLanguage(array $languages): self
         return $this;
     }
 
+    /**
+     * Set General HTML Support
+     *
+     * @param array $htmlSupport
+     * @return $this
+     */
+    public function htmlSupport(array $htmlSupport): self
+    {
+        $this->htmlSupport = $htmlSupport;
+
+        return $this;
+    }
+
     /**
      * Set Should Not Group When Full
      *
@@ -252,6 +273,7 @@ public function jsonSerialize(): array
             'indexLimit'             => $this->indexLimit,
             'contentLanguage'        => $this->contentLanguage,
             'textPartLanguage'       => $this->textPartLanguage,
+            'htmlSupport'            => $this->htmlSupport,
             'uiLanguage'             => $this->uiLanguage,
             'shouldNotGroupWhenFull' => $this->shouldNotGroupWhenFull,
             'shouldShow'             => $this->shouldBeExpanded(),
@@ -294,11 +316,17 @@ protected function prepareSnippets(array $snippets): array
     private function prepareToolbar(string $toolbar, array $items = null): void
     {
         $toolbar = config('nova-ckeditor.toolbars.' . $toolbar);
+
         $defaultTextPartLanguage = [
             ['title' => 'Farsi', 'languageCode' => 'fa'],
             ['title' => 'English', 'languageCode' => 'en']
         ];
 
+        $defaultHtmlSupport = [
+            'allow'    => [],
+            'disallow' => []
+        ];
+
         $this->toolbar = is_null($items) ? $toolbar['items'] : $items;
         $this->toolbarOptions = $toolbar['options'];
         $this->height = $toolbar['height'];
@@ -307,6 +335,7 @@ private function prepareToolbar(string $toolbar, array $items = null): void
         $this->snippetBrowser = $this->prepareSnippets($toolbar['snippets']);
         $this->contentLanguage = $toolbar['content-lang'];
         $this->textPartLanguage = $toolbar['text-part-language'] ?? $defaultTextPartLanguage;
+        $this->htmlSupport = $toolbar['html-support'] ?? $defaultHtmlSupport;
         $this->uiLanguage = $toolbar['ui-language']['name'] ?? 'en';
         $this->shouldNotGroupWhenFull = $toolbar['should-not-group-when-full'];
     }