add unique event names

add unique event names to support repeating fields.
bayareawebpro · Aug 18, 2021 · 2264022 · 2264022
1 parent c515a90
commit 2264022
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 30 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/dist/js/field.js.map b/dist/js/field.js.map
diff --git a/resources/js/ckeditor/config/image.js b/resources/js/ckeditor/config/image.js
@@ -15,10 +15,10 @@ export default {
             'imageTextAlternative',
         ],
         styles: [
+            'full',
             'alignLeft',
             'alignCenter',
             'alignRight',
-            'full',
         ]
     }
 }
diff --git a/resources/js/ckeditor/plugins/MediaBrowser.js b/resources/js/ckeditor/plugins/MediaBrowser.js
@@ -67,6 +67,7 @@ export default class MediaBrowser{
      */
     openModal(){
         this.saveSelection()
+
         Nova.$emit(`ckeditor:media:${this.attribute}`)
     }
 
@@ -105,7 +106,7 @@ export default class MediaBrowser{
      * @return {Boolean}
      */
     get hasSelectedWidget(){
-        return (this.selected && this.selected.name === 'image')
+        return (this.selected && this.selected.name === 'imageBlock')
     }
 
     /**
@@ -117,14 +118,15 @@ export default class MediaBrowser{
         this.model.change((writer) => {
             items.forEach(({file, url}, index) => {
                 if(index === 0 && this.hasSelectedWidget) {
-                    return writer.setAttributes({src: url, alt: file, imageCaption: file}, selected)
+                    return writer.setAttributes({src: url, alt: file, imageCaption: file}, this.selected)
                 }
                 return this.model.insertContent(
                     writer.createElement('imageBlock', {src: url, alt: file, imageCaption: file}),
                     this.model.document.selection.getLastPosition()
                 )
             })
         })
+        this.clearSelection()
     }
 
     /**

diff --git a/resources/js/components/editor-field.vue b/resources/js/components/editor-field.vue
@@ -3,10 +3,11 @@
     import SnippetBrowser from "./snippet-browser"
     import MediaBrowser from "./media-browser"
     import LinkBrowser from "./link-browser"
+    import HasUUID from "./mixins/HasUUID"
     import {FormField, HandlesValidationErrors} from 'laravel-nova'
     export default {
         components: {SnippetBrowser, LinkBrowser,MediaBrowser},
-        mixins: [FormField, HandlesValidationErrors],
+        mixins: [FormField, HandlesValidationErrors,HasUUID],
         props: ['resourceName', 'resourceId', 'field','toolbar'],
         methods: {
             setInitialValue() {
@@ -25,17 +26,21 @@
             },
             handleEditorSync(){
                 this.handleChange(this.$options.editor.getData())
-            }
+            },
+        },
+        created() {
+            this.$options.uuid = this.uuid()
         },
         mounted() {
             CkEditor.create(this.$refs.editor,{
-                attribute: this.field.attribute,
+                attribute: this.$options.uuid,
                 linkBrowser: this.field.linkBrowser,
                 mediaBrowser: this.field.mediaBrowser,
                 snippetBrowser: this.field.snippetBrowser,
                 toolbar:{items: this.field.toolbar}
             }).then((editor) => {
                     const {editing, model} = this.$options.editor = editor
+
                     //Prevent QuestionMark & Slash from triggering Nova Search.
                     editing.view.document.on('keydown', this.handleEditorEvents, {
                         priority: 'highest'
@@ -72,14 +77,15 @@
                 :value="value"
             />
             <link-browser
-                :attribute="field.attribute"
+                :field-key="$options.uuid"
             />
             <media-browser
-                :attribute="field.attribute"
+                @select="$options.editor.execute('mediaBrowser', $event)"
+                :field-key="$options.uuid"
                 :multiple="true"
             />
             <snippet-browser
-                :attribute="field.attribute"
+                :field-key="$options.uuid"
                 :snippets="field.snippetBrowser"
             />
         </template>

diff --git a/resources/js/components/link-browser.vue b/resources/js/components/link-browser.vue
@@ -7,7 +7,7 @@
         name: "link-browser",
         mixins:[interactsWithResources],
         components: {loading, modal},
-        props: {attribute: {default: ()=>'content'}},
+        props: {fieldKey: {default: ()=>'content'}},
         data() {
             return {
                 searchTerm: '',
@@ -18,7 +18,7 @@
         },
         computed:{
             event(){
-                return `ckeditor:link:${this.attribute}`
+                return `ckeditor:link:${this.fieldKey}`
             },
         },
         methods: {
@@ -66,16 +66,15 @@
              * Close the Modal
              * If the user focuses another instance of the editor, close the modal.
              */
-            close(field) {
-                if(field !== this.attribute){
+            close(fieldKey) {
+                if(fieldKey !== this.fieldKey){
                     this.isVisible = false
                 }
             },
         },
         created() {
             Nova.$on(this.event, this.open)
             Nova.$on(`ckeditor:focused`, this.close)
-            //this.toggle()
         },
         beforeDestroy() {
             Nova.$off(this.event, this.open)

diff --git a/resources/js/components/media-browser.vue b/resources/js/components/media-browser.vue
@@ -10,7 +10,7 @@
         components: {loading, modal},
         mixins: [interactsWithResources],
         props: {
-            attribute: {default: () => 'content'},
+            fieldKey: {default: () => 'content'},
             multiple: {default: () => true},
         },
         data: () => ({
@@ -27,7 +27,7 @@
         }),
         computed: {
             event() {
-                return `ckeditor:media:${this.attribute}`
+                return `ckeditor:media:${this.fieldKey}`
             }
         },
         methods: {
@@ -141,8 +141,8 @@
              * Close the Modal
              * If the user focuses another instance of the editor, close the modal.
              */
-            close(field) {
-                if(field !== this.attribute){
+            close(fieldKey) {
+                if(fieldKey !== this.fieldKey){
                     this.isVisible = false
                 }
             },

diff --git a/resources/js/components/media-field.vue b/resources/js/components/media-field.vue
@@ -1,16 +1,17 @@
 <script>
 import spinner from './../assets/spinner'
 import MediaBrowser from "./media-browser"
+import HasUUID from "./mixins/HasUUID"
 import interactsWithResources from "./mixins/interactsWithResources"
 import { FormField, HandlesValidationErrors } from 'laravel-nova'
 export default {
     props: ['resourceName', 'resourceId', 'field'],
-    mixins: [FormField, HandlesValidationErrors,interactsWithResources],
+    mixins: [FormField, HandlesValidationErrors,interactsWithResources, HasUUID],
     components: {MediaBrowser},
     data: ()=>({preview: null}),
     computed: {
         event(){
-            return `ckeditor:media:${this.field.attribute}`
+            return `ckeditor:media:${this.$options.uuid}`
         },
     },
     methods: {
@@ -37,10 +38,9 @@ export default {
             Nova.$emit(this.event)
         },
     },
-    beforeCreate() {
-        this.$options.spinner = spinner
-    },
     created(){
+        this.$options.spinner = spinner
+        this.$options.uuid = this.uuid()
         Nova.$on(`${this.event}:write`, this.handleChange)
     },
     beforeDestroy(){
@@ -81,7 +81,7 @@ export default {
             <p v-if="hasError" class="my-2 text-danger">
                 {{ firstError }}
             </p>
-            <media-browser :attribute="field.attribute" :multiple="false"/>
+            <media-browser :field-key="$options.uuid" :multiple="false"/>
         </template>
     </default-field>
 </template>
diff --git a/resources/js/components/mixins/hasUUID.js b/resources/js/components/mixins/hasUUID.js
@@ -0,0 +1,7 @@
+export default {
+    methods:{
+        uuid() {
+            return crypto.getRandomValues(new Uint32Array(4)).join('-')
+        },
+    },
+}
diff --git a/resources/js/components/snippet-browser.vue b/resources/js/components/snippet-browser.vue
@@ -5,7 +5,7 @@ export default {
     name: "snippet-browser",
     components: {modal},
     props: {
-        attribute: {default: () => 'content'},
+        fieldKey: {default: () => 'content'},
         snippets: {default: () => ([])},
     },
     data: () => ({
@@ -14,7 +14,7 @@ export default {
     }),
     computed: {
         event() {
-            return `ckeditor:snippets:${this.attribute}`
+            return `ckeditor:snippets:${this.fieldKey}`
         }
     },
     methods: {
@@ -37,8 +37,8 @@ export default {
          * Close the Modal
          * If the user focuses another instance of the editor, close the modal.
          */
-        close(field) {
-            if (field !== this.attribute) {
+        close(fieldKey) {
+            if (fieldKey !== this.fieldKey) {
                 this.isVisible = false
             }
         },