Append support to use within Nova Repeater

.gitignore

@@ -2,6 +2,7 @@
 /vendor
 /node_modules
 package-lock.json
+auth.json
 composer.phar
 composer.lock
 phpunit.xml

dist/js/field.js.LICENSE.txt

@@ -1,5 +1,14 @@
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
 /*!
  * vuex v4.1.0
  * (c) 2022 Evan You
  * @license MIT
  */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */

dist/mix-manifest.json

@@ -1,3 +1,4 @@
 {
-    "/js/field.js": "/js/field.js"
+    "/js/field.js": "/js/field.js",
+    "/css/field.css": "/css/field.css"
 }

nova.mix.js

@@ -27,7 +27,7 @@ class NovaExtension {
       ...(webpackConfig.resolve.alias || {}),
       'laravel-nova': path.join(
         __dirname,
-        '../../vendor/laravel/nova/resources/js/mixins/packages.js'
+        'vendor/laravel/nova/resources/js/mixins/packages.js'
       ),
     }
 

package.json

@@ -8,7 +8,7 @@
     "hot": "mix watch --hot",
     "prod": "npm run production",
     "production": "mix --production",
-    "nova:install": "npm --prefix='../../vendor/laravel/nova' ci",
+    "nova:install": "npm --prefix='vendor/laravel/nova' ci",
     "lint": "eslint --ext .vue resources/js/components",
     "lint:fix": "eslint --fix --ext .vue resources/js/components"
   },

resources/css/field.css

@@ -1 +1 @@
-/* Nova Field CSS */
+/* Nova Field CSS */

resources/js/components/FormField.vue

@@ -3,7 +3,7 @@
                 :show-help-text="showHelpText">
     <template #field>
       <editor
-          :id="currentField.attribute"
+          :id="fieldId"
           v-model="value"
           :api-key="currentField.options.apiKey"
           :cloud-channel="currentField.options.cloudChannel ?? 6"
@@ -21,6 +21,7 @@
 <script>
 import { DependentFormField, HandlesValidationErrors } from 'laravel-nova'
 import Editor from '@tinymce/tinymce-vue'
+import {uuid} from "@tinymce/tinymce-vue/lib/es2015/main/ts/Utils";
 
 export default {
   mixins: [DependentFormField, HandlesValidationErrors],
@@ -36,7 +37,14 @@ export default {
     this.setEditorTheme()
   },
 
+  computed: {
+    fieldId () {
+      return this.field.attribute + '-' + uuid('nova-4-tinymce')
+    }
+  },
+
   methods: {
+    uuid,
     setupProtectContent () {
       if (this.field.options.init.protect) {
         this.field.options.init.protect = this.field.options.init.protect.map((regex) => {

webpack.mix.js

@@ -2,9 +2,11 @@ let mix = require('laravel-mix')
 let path = require('path')
 
 require('./nova.mix')
+mix.disableNotifications()
 
 mix
   .setPublicPath('dist')
+  .css('resources/css/field.css', 'css')
   .js('resources/js/field.js', 'js')
   .vue({ version: 3 })
   .nova('murdercode/nova4-tinymce-editor')