add nova

nova/resources/js/components/Trix.vue

@@ -0,0 +1,73 @@
+<template>
+  <trix-editor
+    ref="theEditor"
+    @keydown.stop
+    :input="uid"
+    v-bind="$attrs"
+    @trix-change="handleChange"
+    @trix-initialize="initialize"
+    @trix-attachment-add="handleAddFile"
+    @trix-attachment-remove="handleRemoveFile"
+    @trix-file-accept="handleFileAccept"
+    :placeholder="placeholder"
+    class="trix-content prose !max-w-full prose-sm dark:prose-invert"
+  />
+  <input type="hidden" :name="name" :id="uid" :value="value" />
+</template>
+
+<script>
+import { uid } from 'uid/single'
+import Trix from 'trix'
+import 'trix/dist/trix.css'
+
+export default {
+  name: 'trix-vue',
+
+  inheritAttrs: false,
+
+  emits: ['change', 'file-added', 'file-removed'],
+
+  props: {
+    name: { type: String },
+    value: { type: String },
+    placeholder: { type: String },
+    withFiles: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+  },
+
+  data: () => ({
+    uid: uid(),
+    loading: true,
+  }),
+
+  methods: {
+    initialize() {
+      if (this.disabled) {
+        this.$refs.theEditor.setAttribute('contenteditable', false)
+      }
+
+      this.loading = false
+    },
+
+    handleChange() {
+      if (!this.loading) {
+        this.$emit('change', this.$refs.theEditor.value)
+      }
+    },
+
+    handleFileAccept(e) {
+      if (!this.withFiles) {
+        e.preventDefault()
+      }
+    },
+
+    handleAddFile(event) {
+      this.$emit('file-added', event)
+    },
+
+    handleRemoveFile(event) {
+      this.$emit('file-removed', event)
+    },
+  },
+}
+</script>