mostafaznv · mostafaznv · Oct 5, 2023 · Sep 29, 2023 · Sep 29, 2023 · Sep 29, 2023
diff --git a/composer.json b/composer.json
@@ -8,6 +8,7 @@
         "media picker",
         "image picker",
         "video picker",
+        "audio picker",
         "snippets",
         "rich text editor",
         "WYSIWYG Editor",

diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/docs/other/migration.md b/docs/other/migration.md
@@ -1,26 +1,52 @@
 # Migration
 
-**From 5.3.0 to 5.4.0**
+### **From 5.3.0 to 5.4.0**
 
 The `AudioPicker` feature has been introduced to the ckeditor field.
 
-To activate this functionality, you need to republish the configuration, migrations, models and resources.
+To activate this functionality, you need to republish the migrations, models and resources.
 
 Execute the following command:
 
 ```sh
 php artisan vendor:publish --provider="Mostafaznv\NovaCkEditor\FieldServiceProvider"
 ```
 
-This command will generate two classes for Audio in `Models` and `App\Nova\Resources` directories, along with a migration file for the audio table.\
-Additionally, a new `config/nova-ckeditor.php` will be created, including audio-related configurations such as `audio-naming-method`, `toolbars.toolbar-1.browser.audio`, `toolbars.toolbar-1.items.audioBrowser`.\
+This command will generate two classes for Audio in `Models` and `App\Nova\Resources` directories, along with a migration file for the audio table.
 
 
-**From 5.1.0 to 5.1.1**
+
+After running the `php artisan migrate` command to create the audio table, follow these additional steps:
+
+1. Add the following properties to `config/nova-ckeditor.php` file (Check [the latest](https://github.com/mostafaznv/nova-ckeditor/blob/master/config/nova-ckeditor.php) version of the config for reference):
+   * audio-naming-method
+   * toolbars.toolbar-1.browser.audio
+   * toolbars.toolbar-1.items.audioBrowser
+2. Create a disk drive in your `filesystems.php`
+
+{% code title="config/filesystems.php" %}
+```php
+'disks' => [
+    'audio' => [
+        'driver'     => 'local',
+        'root'       => public_path('uploads/audio'),
+        'url'        => env('APP_URL') . '/uploads/audio',
+    ]
+]
+```
+{% endcode %}
+
+
+
+That's it. You're done.
+
+
+
+### **From 5.1.0 to 5.1.1**
 
 * `html-support` has been added to the toolbar properties in `config/nova-ckeditor.php`.
 
-**From 4.1.2 to 5.0.0**
+### **From 4.1.2 to 5.0.0**
 
 There were some backward incompatible changes made to the configuration file. Please review the updated config file for changes and make corresponding updates to ensure compatibility.
 
@@ -29,7 +55,7 @@ There were some backward incompatible changes made to the configuration file. Pl
 * `toolbar` property of config file moved to `toolbars.toolbar-1`.
 * the arguments of `toolbar` method have changed. now you can pass toolbar name as first argument and toolbar items as second argument.
 
-**From 3.1.1 to 3.2.0**
+### **From 3.1.1 to 3.2.0**
 
 * Please add `removeFormat` to `toolbar.items` in config file ([config/nova-ckeditor.php](https://github.com/mostafaznv/nova-ckeditor/blob/master/config/nova-ckeditor.php)).
 

diff --git a/package.json b/package.json
@@ -8,34 +8,34 @@
         "prod": "mix --production"
     },
     "devDependencies": {
-        "@ckeditor/ckeditor5-alignment": "^39.0.1",
-        "@ckeditor/ckeditor5-autoformat": "^39.0.1",
-        "@ckeditor/ckeditor5-basic-styles": "^39.0.1",
-        "@ckeditor/ckeditor5-block-quote": "^39.0.1",
-        "@ckeditor/ckeditor5-code-block": "^39.0.1",
-        "@ckeditor/ckeditor5-dev-utils": "^38.4.1",
+        "@ckeditor/ckeditor5-alignment": "^40.0.0",
+        "@ckeditor/ckeditor5-autoformat": "^40.0.0",
+        "@ckeditor/ckeditor5-basic-styles": "^40.0.0",
+        "@ckeditor/ckeditor5-block-quote": "^40.0.0",
+        "@ckeditor/ckeditor5-code-block": "^40.0.0",
+        "@ckeditor/ckeditor5-dev-utils": "^39.1.0",
         "@ckeditor/ckeditor5-dev-webpack-plugin": "^31.1.13",
-        "@ckeditor/ckeditor5-editor-classic": "^39.0.1",
-        "@ckeditor/ckeditor5-essentials": "^39.0.1",
-        "@ckeditor/ckeditor5-font": "^39.0.1",
-        "@ckeditor/ckeditor5-heading": "^39.0.1",
-        "@ckeditor/ckeditor5-horizontal-line": "^39.0.1",
-        "@ckeditor/ckeditor5-html-embed": "^39.0.1",
-        "@ckeditor/ckeditor5-html-support": "^39.0.1",
-        "@ckeditor/ckeditor5-image": "^39.0.1",
-        "@ckeditor/ckeditor5-indent": "^39.0.1",
-        "@ckeditor/ckeditor5-language": "^39.0.1",
-        "@ckeditor/ckeditor5-link": "^39.0.1",
-        "@ckeditor/ckeditor5-list": "^39.0.1",
-        "@ckeditor/ckeditor5-media-embed": "^39.0.1",
-        "@ckeditor/ckeditor5-paragraph": "^39.0.1",
-        "@ckeditor/ckeditor5-paste-from-office": "^39.0.1",
-        "@ckeditor/ckeditor5-remove-format": "^39.0.1",
-        "@ckeditor/ckeditor5-show-blocks": "^39.0.1",
-        "@ckeditor/ckeditor5-source-editing": "^39.0.1",
-        "@ckeditor/ckeditor5-table": "^39.0.1",
-        "@ckeditor/ckeditor5-theme-lark": "^39.0.1",
-        "@ckeditor/ckeditor5-ui": "^39.0.1",
+        "@ckeditor/ckeditor5-editor-classic": "^40.0.0",
+        "@ckeditor/ckeditor5-essentials": "^40.0.0",
+        "@ckeditor/ckeditor5-font": "^40.0.0",
+        "@ckeditor/ckeditor5-heading": "^40.0.0",
+        "@ckeditor/ckeditor5-horizontal-line": "^40.0.0",
+        "@ckeditor/ckeditor5-html-embed": "^40.0.0",
+        "@ckeditor/ckeditor5-html-support": "^40.0.0",
+        "@ckeditor/ckeditor5-image": "^40.0.0",
+        "@ckeditor/ckeditor5-indent": "^40.0.0",
+        "@ckeditor/ckeditor5-language": "^40.0.0",
+        "@ckeditor/ckeditor5-link": "^40.0.0",
+        "@ckeditor/ckeditor5-list": "^40.0.0",
+        "@ckeditor/ckeditor5-media-embed": "^40.0.0",
+        "@ckeditor/ckeditor5-paragraph": "^40.0.0",
+        "@ckeditor/ckeditor5-paste-from-office": "^40.0.0",
+        "@ckeditor/ckeditor5-remove-format": "^40.0.0",
+        "@ckeditor/ckeditor5-show-blocks": "^40.0.0",
+        "@ckeditor/ckeditor5-source-editing": "^40.0.0",
+        "@ckeditor/ckeditor5-table": "^40.0.0",
+        "@ckeditor/ckeditor5-theme-lark": "^40.0.0",
+        "@ckeditor/ckeditor5-ui": "^40.0.0",
         "@vue/compiler-sfc": "^3.3.4",
         "cross-env": "^7.0.3",
         "laravel-mix": "^6.0.49",

diff --git a/resources/js/components/editor-field.vue b/resources/js/components/editor-field.vue
@@ -103,6 +103,16 @@ export default {
                         });
                     }
 
+                    editor.editing.view.change((writer) => {
+                        // set the height of the editor when editing
+                        if (this.currentField.height > 1) {
+                            writer.setStyle('height', `${this.currentField.height}px`, editor.editing.view.document.getRoot());
+                        }
+
+                        this.editorResizeFix(editor, writer)
+                    });
+
+
                     if (this.currentField.readonly) {
                         editor.enableReadOnlyMode(this.$options[this.editorUUID]);
                     }
@@ -237,6 +247,23 @@ export default {
                 this.handleChange(editor.getData())
             }
         },
+
+        // fix for keeping editor height on resize
+        editorResizeFix(editor, writer) {
+            const resizeObserver = new ResizeObserver(
+                debounce((element) => {
+                    const height = element[0].target.offsetHeight
+
+                    writer.setStyle('height', `${height}px`, editor.editing.view.document.getRoot())
+                }, 100),
+            )
+
+            const innerEditor = editor.ui.view.element.getElementsByClassName('ck-editor__editable')
+
+            if (innerEditor?.length) {
+                resizeObserver.observe(innerEditor[0])
+            }
+        }
     },
     created() {
         this.$options[this.editorUUID] = this.uuid()

diff --git a/resources/js/components/media-browser.vue b/resources/js/components/media-browser.vue
@@ -122,18 +122,34 @@
         </transition>
 
         <template #footer>
-            <div class="flex p-2">
-                <div>
-                    <button @click.prevent="insert" :disabled="!selected.length" class="bg h-9 shadow bg-primary-500 hover:bg-primary-400 text-white dark:text-gray-900 cursor-pointer rounded inline-flex items-center justify-center px-3 shadow relative">
-                        <span v-if="selected.length < 2">{{ __(pickerLabel) }}</span>
-                        <span v-else-if="isImagePicker">{{ __('Insert :count Images', {count: selected.length}) }}</span>
-                        <span v-else-if="isVideoPicker">{{ __('Insert :count Videos', {count: selected.length}) }}</span>
-                        <span v-else>{{ __('Insert :count Audios', {count: selected.length}) }}</span>
-                    </button>
+            <div class="flex justify-between p-2">
+                <div class="flex">
+                    <div>
+                        <button @click.prevent="insert" :disabled="!selected.length" class="bg h-9 shadow bg-primary-500 hover:bg-primary-400 text-white dark:text-gray-900 cursor-pointer rounded inline-flex items-center justify-center px-3 shadow relative">
+                            <span v-if="selected.length < 2">{{ __(pickerLabel) }}</span>
+                            <span v-else-if="isImagePicker">{{ __('Insert :count Images', {count: selected.length}) }}</span>
+                            <span v-else-if="isVideoPicker">{{ __('Insert :count Videos', {count: selected.length}) }}</span>
+                            <span v-else>{{ __('Insert :count Audios', {count: selected.length}) }}</span>
+                        </button>
+                    </div>
+
+                    <div class="inline-flex flex-grow text-primary-600 self-center items-center ml-3" v-if="selected.length > 1">
+                        <span>{{ __(':count Items Selected', {count: selected.length}) }}</span>
+                    </div>
                 </div>
 
-                <div class="inline-flex flex-grow text-primary-600 self-center items-center ml-3" v-if="selected.length > 1">
-                    <span>{{ __(':count Items Selected', {count: selected.length}) }}</span>
+                <div class="file-input">
+                    <input
+                        @change="onSelectFiles"
+                        type="file"
+                        :id="fileInputId"
+                        :accept="acceptedMimeTypes"
+                        multiple
+                    />
+
+                    <label :for="fileInputId" class="focus:outline-none focus:ring rounded border-2 border-primary-300 dark:border-gray-500 hover:border-primary-500 active:border-primary-400 dark:hover:border-gray-400 dark:active:border-gray-300 bg-white dark:bg-transparent text-primary-500 dark:text-gray-400 px-3 h-9 inline-flex items-center font-bold">
+                        <span>{{ __('Choose Files') }}</span>
+                    </label>
                 </div>
             </div>
         </template>
@@ -178,6 +194,7 @@ export default {
             dragCounter: 0,
             introKey: introKey,
             intro: localStorage.getItem(introKey) === 'true',
+            fileInputId: `${this.type}-input-` + Date.now(),
             isVisible: false,
             isLoading: false,
             isUploading: false,
@@ -225,13 +242,24 @@ export default {
 
         pickerLabel() {
             if (this.isImagePicker) {
-                return 'Choose Image'
+                return 'Insert Image'
+            }
+            if (this.isVideoPicker) {
+                return 'Insert Video'
+            }
+
+            return 'Insert Audio'
+        },
+
+        acceptedMimeTypes() {
+            if (this.isImagePicker) {
+                return 'image/*'
             }
             if (this.isVideoPicker) {
-                return 'Choose Video'
+                return 'video/*'
             }
 
-            return 'Choose Audio'
+            return 'audio/*'
         },
 
         resourceKey() {
@@ -304,6 +332,25 @@ export default {
                 })
         },
 
+
+        /**
+         * Handle File Selection
+         *
+         * @param e {Event}
+         */
+        onSelectFiles(e) {
+            if (e.target?.files?.length) {
+                const data = {
+                    dataTransfer: {
+                        files: e.target.files
+                    }
+                }
+
+                this.handleUploads(data)
+            }
+        },
+
+
         /**
          * Handle Dropped File Uploads
          *
@@ -556,6 +603,21 @@ export default {
         border-color: rgba(var(--colors-primary-400));
     }
 }
+
+.file-input {
+    position: relative;
+    z-index: 1;
+
+    input {
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        width: 0;
+        height: 0;
+        z-index: -1;
+    }
+}
 </style>
 
 <style lang="scss">