Merge pull request #21 from mostafaznv/dev

support ui language #20
mostafaznv · Jun 10, 2022 · 4255d04 · 4255d04
2 parents 736fba6 + b177656
commit 4255d04
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 69 deletions.
diff --git a/README.md b/README.md
@@ -27,8 +27,9 @@ Includes custom written plugins for media (video and image), snippet and publish
 
 
 ## Requirements
-- PHP 7.4 or higher
-- Laravel 8.* or higher
+- PHP 8.0.2 or higher
+- Laravel 8.40.* or higher
+- Nova 4
 - FFMPEG (required for larupload usage)
 
 <br><br>
@@ -192,7 +193,7 @@ $this->app->bind('ckeditor-image-storage', MyImageStorage::class);
 | toolbar                | Array   | from config file | Set toolbar items                                                                            |
 | height                 | Integer | from config file | Set editor's height                                                                          |
 | limitOnIndex           | Integer | 85               | Set character limit on index                                                                 |
-| contentLanguage        | Integer | from config file | Language of editor's content. if you want to change text-direction (RTL, LTR), you need this |
+| contentLanguage        | String  | from config file | Language of editor's content. if you want to change text-direction (RTL, LTR), you need this |
 | shouldNotGroupWhenFull | Boolean | from config file | Indicates whether the editor shows 3 dots in overflow mode                                   |
 | imageBrowser           | Boolean | from config file | Enable/Disable image picker                                                                  |
 | videoBrowser           | Boolean | from config file | Enable/Disable video picker                                                                  |
@@ -203,64 +204,27 @@ $this->app->bind('ckeditor-image-storage', MyImageStorage::class);
 ------
 
 ## Configuration
-You can change configuration options in `app/config/nova-ckeditor.php` 
+You can change configuration options in `app/config/nova-ckeditor.php`
+
+
+| key                                | type                       | default          | description                                                                                                                                                                                                                                                           |
+|------------------------------------|----------------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| video-model                        | String                     | App\Models\Video | Path of your video model                                                                                                                                                                                                                                              |
+| memory                             | String                     | 256M             | Max memory (php.ini override) for image resizing                                                                                                                                                                                                                      |
+| max-quality                        | Integer                    | 75               | Max image output quality                                                                                                                                                                                                                                              |
+| max-width                          | Integer                    | 1024             | Image max width                                                                                                                                                                                                                                                       |
+| max-height                         | Integer                    | 768              | Image max height                                                                                                                                                                                                                                                      |
+| toolbar.height                     | Integer                    | 400              | Editor's height.                                                                                                                                                                                                                                                      |
+| toolbar.content-lang               | String `format: ISO 639-1` | en               | Language of editor's content. if you want to change text-direction (RTL, LTR), you need this                                                                                                                                                                          |
+| toolbar.ui-language.name           | String `format: ISO 639-1` | en               | Language of editor's ui.                                                                                                                                                                                                                                              |
+| toolbar.ui-language.script         | String                     | null             | URL of language file to use in editor's ui.<br>example 1: `asset('js/ckeditor-fa.js')`<br>example 2: `https://cdn.ckeditor.com/ckeditor5/34.0.0/decoupled-document/translations/fa.js`                                                                                |
+| toolbar.should-not-group-when-full | Boolean                    | false            | Indicates whether the editor shows 3 dots in overflow mode                                                                                                                                                                                                            |
+| toolbar.browser.image              | Boolean                    | true             | You can disable image picker by changing this flag                                                                                                                                                                                                                    |
+| toolbar.browser.video              | Boolean                    | true             | You can disable video picker by changing this flag                                                                                                                                                                                                                    |
+| toolbar.snippets                   | Array                      |                  | There are some pre-defined snippets in `resources/views/ckeditor`. you can add more snippets if you want. <br> > **Note**: Snippets will only render CkEditor Elements. Standard HTML or Figures (table, image, video), see included views. https://ckeditor.com/docs |
+| toolbar.items                      | Array                      |                  | These are toolbar buttons. you can remove or rearrange them                                                                                                                                                                                                           |
+| toolbar.options                    | Array                      |                  | Options of toolbar items. to see more information, please check the CkEditor's documentation.                                                                                                                                                                         |
 
-### Video Model
-`string` `default: App\Models\Video`
-
-Path of your video model
-
-### Memory
-`string` `default: 256M`
-
-Max memory (php.ini override) for image resizing
-
-### Max Quality
-`integert` `default: 75`
-
-Max image output quality
-
-### Max Width and Height
-`integer` `default width: 1024` `default height: 768`
-
-Image max dimensions
-
-### Toolbar
-#### height
-`integer` `default: 400`
-
-Editor's height.
-
-#### Content Lang
-`string` `default: en` `format: ISO 639-1`
-
-Language of editor's content. if you want to change text-direction (RTL, LTR), you need this
-
-#### Should Not Group When Full
-`boolean` `default: false`
-
-Indicates whether the editor shows 3 dots in overflow mode
-
-#### Browser
-`boolean` `default: true`
-
-You can disable video and image picker by changing these options
-
-#### Snippets
-`array`
-
-There are some pre-defined snippets in `resources/views/ckeditor`. you can add more snippets if you want.
-
-> **Note**: Snippets will only render CkEditor Elements. Standard HTML or Figures (table, image, video), see included views. https://ckeditor.com/docs
-
-#### Items
-`array`
-
-These are toolbar buttons. you can remove or rearrange them
-
-#### Options
-`array`
-Options of toolbar items. to see more information, please check the CkEditor's documentation.
 
 ----
 🚀 If you find this project interesting, please consider supporting me on the open source journey

diff --git a/config/nova-ckeditor.php b/config/nova-ckeditor.php
@@ -64,6 +64,16 @@
 
         'content-lang' => 'en',
 
+        'ui-language' => [
+            'name'   => 'en',
+
+            /**
+             * Example 1: asset('js/ckeditor-fa.js')
+             * Example 2: 'https://cdn.ckeditor.com/ckeditor5/34.0.0/decoupled-document/translations/fa.js'
+             */
+            'script' => null
+        ],
+
         'should-not-group-when-full' => false,
 
         'browser' => [

diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/ckeditor/plugins/MediaBrowser.js b/resources/js/ckeditor/plugins/MediaBrowser.js
@@ -50,10 +50,11 @@ export default class MediaBrowser {
      * @return {ButtonView}
      */
     createButton(locale) {
+        const {t} = locale
         const view = new ButtonView(locale)
 
         view.set({
-            label: this.type === 'imageBrowser' ? 'Insert Image' : 'Insert Video',
+            label: t(this.type === 'imageBrowser' ? 'Insert Image' : 'Insert Video'),
             icon: this.icon,
             tooltip: true,
         })

diff --git a/resources/js/ckeditor/plugins/SnippetBrowser.js b/resources/js/ckeditor/plugins/SnippetBrowser.js
@@ -1,10 +1,6 @@
-/**
- * @var Nova
- */
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'
 
 export default class SnippetBrowser {
-
     constructor(editor) {
         this.editor = editor;
         this.config = editor.config;
@@ -70,12 +66,15 @@ export default class SnippetBrowser {
      * @return {ButtonView}
      */
     createButton(locale) {
+        const {t} = locale
         const view = new ButtonView(locale)
+
         view.set({
-            label: 'Insert Snippet',
+            label: t('Insert Snippet'),
             icon: this.icon,
             tooltip: true,
         })
+
         if (this.isEnabled) {
             view.on('execute', this.openModal.bind(this))
         }

diff --git a/resources/js/components/editor-field.vue b/resources/js/components/editor-field.vue
@@ -65,7 +65,7 @@ export default {
             videoBrowser: this.field.videoBrowser,
             snippetBrowser: this.field.snippetBrowser,
             language: {
-                ui: 'en',
+                ui: this.field.uiLanguage,
                 content: this.field.contentLanguage
             },
             toolbar: {
@@ -112,7 +112,7 @@ export default {
 
 <style lang="sass">
 .ck.ck-reset_all, .ck.ck-reset_all *
-    direction: ltr !important
+    // direction: ltr !important
 
 .ck-content.ck-editor__editable
     resize: vertical

diff --git a/src/CkEditor.php b/src/CkEditor.php
@@ -45,6 +45,13 @@ class CkEditor extends Field
      */
     public string $contentLanguage;
 
+    /**
+     * UI Language
+     *
+     * @var string
+     */
+    public string $uiLanguage = 'en';
+
     /**
      * Indicates whether the editor shows 3 dots in overflow mode
      *
@@ -93,6 +100,7 @@ public function __construct($name, $attribute = null, callable $resolveCallback
         $this->videoBrowser = $config['toolbar']['browser']['video'];
         $this->snippetBrowser = $this->prepareSnippets($config['toolbar']['snippets']);
         $this->contentLanguage = $config['toolbar']['content-lang'];
+        $this->uiLanguage = $config['toolbar']['ui-language']['name'] ?? 'en';
         $this->shouldNotGroupWhenFull = $config['toolbar']['should-not-group-when-full'];
         $this->videoModel = $config['video-model'];
     }
@@ -218,6 +226,7 @@ public function jsonSerialize(): array
             'height'                 => $this->height,
             'indexLimit'             => $this->indexLimit,
             'contentLanguage'        => $this->contentLanguage,
+            'uiLanguage'             => $this->uiLanguage,
             'shouldNotGroupWhenFull' => $this->shouldNotGroupWhenFull,
             'shouldShow'             => $this->shouldBeExpanded(),
             'videoHasLaruploadTrait' => $this->hasLaruploadTrait(),

diff --git a/src/FieldServiceProvider.php b/src/FieldServiceProvider.php
@@ -28,6 +28,10 @@ public function boot(): void
             Nova::provideToScript(['ckeditor' => config('nova-ckeditor', [])]);
             Nova::style('field-ckeditor', __DIR__ . '/../dist/css/field.css');
 
+            if ($langScript = config('nova-ckeditor.toolbar.ui-language.script')) {
+                Nova::script('ckeditor-lang', $langScript);
+            }
+
             // allow hot reloading
             if (App::environment('local') && file_exists(__DIR__ . '/../dist/hot')) {
                 Nova::remoteScript('http://localhost:8080/js/field.js');