Merge pull request #123 from mostafaznv/dev

Dev
mostafaznv · Apr 5, 2024 · 627b6a6 · 627b6a6
2 parents e2b3e62 + c5eac86
commit 627b6a6
Show file tree

Hide file tree

Showing 30 changed files with 521 additions and 139 deletions.
diff --git a/config/nova-ckeditor.php b/config/nova-ckeditor.php
@@ -84,6 +84,17 @@
 
     'audio-naming-method' => 'hash-file',
 
+    /*
+     |--------------------------------------------------------------------------
+     | Naming Method of File
+     |--------------------------------------------------------------------------
+     |
+     | Available methods: hash-file, real-file-name, unique-real-file-name
+     |
+     */
+
+    'file-naming-method' => 'hash-file',
+
     /*
      |--------------------------------------------------------------------------
      | Toolbar
@@ -141,7 +152,8 @@
             'browser' => [
                 'image' => true,
                 'video' => true,
-                'audio' => true
+                'audio' => true,
+                'file'  => true
             ],
 
             'image' => [

diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/docs/README.md b/docs/README.md
@@ -18,7 +18,7 @@ With "Nova Ckeditor," you can seamlessly integrate CKEditor 5 into Laravel Nova
 ### Features:
 
 * **CKEditor 5 Integration**: "Nova Ckeditor" seamlessly integrates CKEditor 5 into Laravel Nova, empowering you with a feature-rich and user-friendly text editing solution.
-* **Custom Media Plugins**: The package includes custom-written plugins that enhance media handling within the editor. These plugins offer convenient options for embedding and managing media elements like image, video and audio in your content.
+* **Custom Media Plugins**: The package includes custom-written plugins that enhance media handling within the editor. These plugins offer convenient options for embedding and managing media elements like image, video, audio and file in your content.
 * **Drag & Drop Uploading in Media Picker**: With the drag and drop uploading feature in the media picker, you can conveniently upload media files directly into the editor, saving time and effort.
 * **Optimize Images:** "Nova Ckeditor" includes functionality to optimize images, reducing file sizes while maintaining visual quality and improving page load times.
 * **Generate Cover for Videos**: Enhance your videos by generating custom covers. "Nova Ckeditor" allows you to generate visually appealing video covers, ensuring an engaging experience for your audience.

diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md
@@ -13,11 +13,12 @@
 * [Usage](basic-usage/usage.md)
 * [Notes](basic-usage/notes.md)
 
-## ⚙ Advanced Usage
+## ⚙️ Advanced Usage
 
 * [Customize ImageStorage](advanced-usage/customize-imagestorage.md)
 * [Integrating NovaFileArtisan (Larupload) with Image Resource](advanced-usage/integrating-novafileartisan-larupload-with-image-resource.md)
 * [Customize AudioStorage](advanced-usage/customize-audiostorage.md)
+* [Customize FileStorage](advanced-usage/customize-audiostorage-1.md)
 * [Multiple Toolbars](advanced-usage/multiple-toolbars.md)
 * [Customize Toolbar Items](advanced-usage/customize-toolbar-items.md)
 * [Media Embed](advanced-usage/media-embed.md)
@@ -32,6 +33,7 @@
   * [Image Browser](advanced-usage/ckeditor-field-options/image-browser.md)
   * [Audio Browser](advanced-usage/ckeditor-field-options/audio-browser.md)
   * [Video Browser](advanced-usage/ckeditor-field-options/video-browser.md)
+  * [File Browser](advanced-usage/ckeditor-field-options/audio-browser-1.md)
   * [Snippets](advanced-usage/ckeditor-field-options/snippets.md)
 * [Configuration](advanced-usage/configuration/README.md)
   * [Video Model](advanced-usage/configuration/video-model.md)
@@ -42,6 +44,7 @@
   * [Image Max Height](advanced-usage/configuration/image-max-height.md)
   * [Image Naming Method](advanced-usage/configuration/image-naming-method.md)
   * [Audio Naming Method](advanced-usage/configuration/audio-naming-method.md)
+  * [File Naming Method](advanced-usage/configuration/audio-naming-method-1.md)
   * [Toolbars](advanced-usage/configuration/toolbars/README.md)
     * [Defualt Toolbar](advanced-usage/configuration/toolbars/defualt-toolbar.md)
     * [Toolbar 1](advanced-usage/configuration/toolbars/toolbar-1/README.md)
@@ -58,6 +61,7 @@
       * [Image Browser](advanced-usage/configuration/toolbars/toolbar-1/image-browser.md)
       * [Audio Browser](advanced-usage/configuration/toolbars/toolbar-1/audio-browser.md)
       * [Video Browser](advanced-usage/configuration/toolbars/toolbar-1/video-browser.md)
+      * [File Browser](advanced-usage/configuration/toolbars/toolbar-1/audio-browser-1.md)
       * [Insert Image Types](advanced-usage/configuration/toolbars/toolbar-1/insert-image-types.md)
       * [Insert Image Size](advanced-usage/configuration/toolbars/toolbar-1/insert-image-size.md)
       * [Snippets](advanced-usage/configuration/toolbars/toolbar-1/snippets.md)

diff --git a/docs/advanced-usage/ckeditor-field-options/audio-browser-1.md b/docs/advanced-usage/ckeditor-field-options/audio-browser-1.md
@@ -0,0 +1,39 @@
+---
+description: fileBrowser
+---
+
+# File Browser
+
+<table><thead><tr><th>Argument</th><th width="140">Type</th><th width="155" data-type="checkbox">Required</th><th>Default</th></tr></thead><tbody><tr><td>enabled</td><td>bool</td><td>false</td><td>true</td></tr></tbody></table>
+
+This method allows you to enable or disable the file picker functionality within the CKEditor field.
+
+By utilizing the `fileBrowser` method, you have control over whether the file picker is enabled or disabled for the CKEditor field. The method accepts a boolean value as the `enabled` argument, where `true` enables the file picker, and `false` disables it.
+
+Enabling the file picker provides a convenient way for users to select and insert file files directly into the CKEditor field. This feature streamlines the file insertion process, enhancing the content creation experience. On the other hand, disabling the file picker removes the option for users to select file files through the CKEditor field, limiting the content to text-only input.
+
+To utilize the `fileBrowser` method, simply pass `true` or `false` as the `status` argument based on whether you want to enable or disable the file picker, respectively.
+
+
+
+```php
+use Mostafaznv\NovaCkEditor\CkEditor;
+
+class Article extends Resource
+{
+    public function fields(Request $request): array
+    {
+        return [
+            CkEditor::make(trans('Content'), 'content')
+                ->fileBrowser()
+        ];
+    }
+}
+```
+
+{% hint style="info" %}
+This feature was introduced in version <mark style="color:red;">7.3.0</mark> of the NovaCKEditor
+{% endhint %}
+
+
+
diff --git a/docs/advanced-usage/configuration/audio-naming-method-1.md b/docs/advanced-usage/configuration/audio-naming-method-1.md
@@ -0,0 +1,28 @@
+---
+description: file-naming-method
+---
+
+# File Naming Method
+
+| Property Name      | Type   | Default                                     |
+| ------------------ | ------ | ------------------------------------------- |
+| file-naming-method | string | <mark style="color:red;">`hash-file`</mark> |
+
+The `file-naming-method` configuration option allows you to specify the naming method for uploaded files within the CKEditor field. This setting determines how the files will be named when they are saved to the storage.
+
+By default, the `file-naming-method` configuration option is set to `hash-file`, which generates a unique hash-based name for each uploaded file. This helps avoid naming conflicts and ensures uniqueness of the file names.
+
+
+
+The available naming methods for the `file-naming-method` configuration option are as follows:
+
+* `hash-file`: This method generates a unique hash-based name for each uploaded file.
+* `real-file-name`: This method retains the original file name of the uploaded file.
+* `unique-real-file-name`: This method retains the original file name but adds a unique identifier to prevent naming conflicts.
+
+To configure the `file-naming-method` option, update the value in the configuration file `config/nova-ckeditor.php` with the desired naming method.
+
+
+
+
+
diff --git a/docs/advanced-usage/configuration/toolbars/toolbar-1/audio-browser-1.md b/docs/advanced-usage/configuration/toolbars/toolbar-1/audio-browser-1.md
@@ -0,0 +1,22 @@
+---
+description: toolbars.toolbar-1.browser.file
+---
+
+# File Browser
+
+<table><thead><tr><th width="340">Property Name</th><th width="158.33333333333331">Type</th><th>Default</th></tr></thead><tbody><tr><td>toolbars.toolbar-1.browser.file</td><td>bool</td><td>false</td></tr></tbody></table>
+
+This option allows you to enable or disable the file picker within the toolbar. By default, this option is set to <mark style="color:red;">`false`</mark>, indicating that the file picker is disabled.
+
+The file picker provides a convenient way to select and insert files into the CKEditor field. However, in some cases, you may want to enable/disable the file picker functionality.
+
+To enable the file picker within Toolbar 1, update the value of `toolbars.toolbar-1.browser.file` in the `config/nova-ckeditor.php` file to `true`.
+
+
+
+{% hint style="info" %}
+This feature was introduced in version <mark style="color:red;">7.3.0</mark> of the NovaCKEditor
+{% endhint %}
+
+
+
diff --git a/docs/advanced-usage/customize-audiostorage-1.md b/docs/advanced-usage/customize-audiostorage-1.md
@@ -0,0 +1,32 @@
+# Customize FileStorage
+
+You have the option to override the `FileStorage` service by binding your own extended version using the following code snippet:
+
+```php
+use Illuminate\Http\Request;
+use Mostafaznv\NovaCkEditor\FileStorage;
+
+
+class MyFileStorage extends FileStorage
+{
+    public function __invoke(Request $request)
+    {
+        // TODO: Change the default implementation.
+    }
+}
+
+$this->app->bind('ckeditor-file-storage', MyFileStorage::class);
+```
+
+By creating a custom `MyFileStorage` class that extends `FileStorage`, you can define your own logic for handling file storage within the `__invoke()` method. Afterward, binding the custom class to the `'ckeditor-file-storage'` key allows Laravel Nova to use your extended implementation instead of the default one.
+
+Within the `__invoke()` method of `MyFileStorage`, you can implement your desired functionality to handle file storage according to your specific requirements.
+
+
+
+{% hint style="info" %}
+This feature was introduced in version <mark style="color:red;">7.3.0</mark> of the NovaCKEditor
+{% endhint %}
+
+
+
diff --git a/resources/js/ckeditor/plugins/MediaBrowser.js b/resources/js/ckeditor/plugins/MediaBrowser.js
@@ -122,6 +122,15 @@ export default class MediaBrowser {
                             controls: 'controls'
                         }
 
+                        break;
+
+                    case 'file':
+                        blockName = 'link'
+                        payload = {
+                            linkHref: item.src,
+                            title: item.name
+                        }
+
                         break;
                 }
 
@@ -136,10 +145,9 @@ export default class MediaBrowser {
 
                 if (blockName) {
                     return this.model.insertContent(
-                        writer.createElement(
-                            blockName,
-                            payload
-                        ),
+                        blockName === 'link'
+                            ? writer.createText(payload.title, payload)
+                            : writer.createElement(blockName, payload),
 
                         // modelFragment
                         this.model.document.selection.getLastPosition()

diff --git a/resources/js/components/icons/FileIcon.vue b/resources/js/components/icons/FileIcon.vue
@@ -0,0 +1,22 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" :fill="fill" :width="width" :height="height" viewBox="0 0 512 512">
+        <path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H288c-10.1 0-19.6-4.7-25.6-12.8L243.2 57.6C231.1 41.5 212.1 32 192 32H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"/>
+    </svg>
+</template>
+
+<script lang="js" setup>
+const props = defineProps({
+    width: {
+        type: [Number, String],
+        default: 18
+    },
+    height: {
+        type: [Number, String],
+        default: 18
+    },
+    fill: {
+        type: String,
+        default: '#475569'
+    }
+})
+</script>
diff --git a/resources/js/components/media-browser/MediaBrowser.vue b/resources/js/components/media-browser/MediaBrowser.vue
@@ -13,6 +13,7 @@
                 :has-image-picker="hasImagePicker"
                 :has-video-picker="hasVideoPicker"
                 :has-audio-picker="hasAudioPicker"
+                :has-file-picker="hasFilePicker"
             />
 
             <div class="relative flex-grow flex flex-col justify-between">
@@ -76,6 +77,19 @@
                             v-bind="listComponentProps"
                             type="audio"
                         />
+
+                        <media-browser-list
+                            v-else-if="type === 'file'"
+                            ref="browserList"
+                            @pick="pickItems"
+                            @play="play"
+                            v-model:pagination="pagination"
+                            v-model:loading="loading"
+                            v-model:selected-items="selectedItems"
+                            v-model:columns="columns"
+                            v-bind="listComponentProps"
+                            type="file"
+                        />
                     </div>
                 </div>
 
@@ -138,6 +152,10 @@ const props = defineProps({
     hasAudioPicker: {
         type: Boolean,
         default: true
+    },
+    hasFilePicker: {
+        type: Boolean,
+        default: false
     }
 })
 
@@ -232,6 +250,9 @@ function init() {
     else if (props.hasAudioPicker) {
         type.value = 'audio'
     }
+    else if (props.hasFilePicker) {
+        type.value = 'file'
+    }
 }
 
 function openModal() {

diff --git a/resources/js/components/media-browser/MediaBrowserDelete.vue b/resources/js/components/media-browser/MediaBrowserDelete.vue
@@ -40,6 +40,7 @@ import {ref, computed} from "vue"
 import modal from "../modal"
 import {useLocalization} from 'laravel-nova'
 import {selectedItemsProp, typeProp} from "../../utils/picker-props"
+import {guessResourceKey} from "../../utils/helpers"
 
 
 // emits
@@ -63,6 +64,10 @@ const modalStatus = ref(false)
 
 
 // computed properties
+const resourceKey = computed(() => {
+    return guessResourceKey(props.type)
+})
+
 const disabled = computed(() => {
     return props.selectedItems.length === 0
 })
@@ -82,14 +87,10 @@ function close() {
 
 function submit() {
     if (!disabled.value) {
-        const payload = {
-            id: props.selectedItems.map(item => item.id),
-            type: props.type
-        }
-
+        const resources = props.selectedItems.map(item => `resources[]=${item.id}`).join('&')
 
         Nova.request()
-            .post('/nova-vendor/nova-ckeditor/delete-assets', payload)
+            .delete(`/nova-api/${resourceKey.value}?${resources}`)
             .then(() => {
                 Nova.success(__('Assets have been deleted successfully.'))
 

diff --git a/resources/js/components/media-browser/MediaBrowserInfo.vue b/resources/js/components/media-browser/MediaBrowserInfo.vue
@@ -174,6 +174,13 @@ const info = computed(() => {
                 value: item.value.height
             })
         }
+
+        if (item.value.mime) {
+            info.push({
+                label: 'MimeType',
+                value: item.value.mime
+            })
+        }
     }
 
     return info

diff --git a/resources/js/components/media-browser/MediaBrowserItem.vue b/resources/js/components/media-browser/MediaBrowserItem.vue
@@ -27,6 +27,12 @@
                     :src="src"
                     muted
                 />
+
+                <file-icon
+                    v-else-if="type === 'file'"
+                    width="32"
+                    height="32"
+                />
             </div>
 
             <figcaption @click.stop="play" class="item__preview--play nova-ckeditor-mobile-none" :title="__('Preview')">
@@ -47,6 +53,7 @@
 <script setup>
 import {computed} from "vue"
 import AudioIcon from "../icons/AudioIcon.vue"
+import FileIcon from "../icons/FileIcon.vue"
 import {typeProp, selectedItemsProp, keepAspectRatioProp, gallerySizeProp} from "../../utils/picker-props"
 
 

diff --git a/resources/js/components/media-browser/MediaBrowserList.vue b/resources/js/components/media-browser/MediaBrowserList.vue
@@ -37,6 +37,7 @@ import {ref, computed, watch} from "vue"
 import useResourceRequest from "../../composables/useResourceRequest"
 import {paginationProp, sortProp, keepAspectRatioProp, typeProp, gallerySizeProp, selectedItemsProp, loadingProp, keywordProp, hasLaruploadTraitProp, orderByProp, columnsProp} from "../../utils/picker-props"
 import MediaBrowserItem from "./MediaBrowserItem.vue"
+import {guessResourceKey} from "../../utils/helpers"
 
 
 // exposes
@@ -84,14 +85,7 @@ const items = ref([])
 
 // computed properties
 const resourceKey = computed(() => {
-    if (props.type === 'image') {
-        return 'images'
-    }
-    else if (props.type === 'video') {
-        return 'videos'
-    }
-
-    return 'audio'
+    return guessResourceKey(props.type)
 })
 
 const filters = computed(() => {