cleanup of Editor

resources/js/components/SMEditor.vue

@@ -5,10 +5,13 @@
             id="tinymce"
             ref="tinyeditor"
             v-model="editorContent"
-            model-events="change keydown blur focus paste"
+            model-events="change blur focus"
             output-format="html"
             :init="init"
-            @blur="handleBlur" />
+            :disabled="props.disabled"
+            @blur="handleBlur"
+            @focus="handleFocus"
+            @change="handleChange" />
     </div>
 </template>
 
@@ -63,54 +66,15 @@ interface PageList {
 }
 
 const props = defineProps({
-    disabledEditor: {
+    modelValue: {
+        type: String,
+        required: true,
+    },
+    disabled: {
         type: Boolean,
         required: false,
         default: false,
     },
-    srcContent: {
-        type: String,
-        required: false,
-        default: "",
-    },
-    inputId: {
-        type: String,
-        required: false,
-        default: "",
-    },
-    inputName: {
-        type: String,
-        required: false,
-        default: "content",
-    },
-    placeholder: {
-        type: String,
-        required: false,
-        default: "",
-    },
-    label: {
-        type: String,
-        default: "",
-        required: false,
-    },
-    required: {
-        type: Boolean,
-        required: false,
-    },
-    mimeTypes: {
-        type: Array,
-        default() {
-            return [];
-        },
-        required: false,
-    },
-    removeButtons: {
-        type: Array,
-        required: false,
-        default() {
-            return [];
-        },
-    },
 });
 
 const useDarkMode = false; // window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -194,39 +158,34 @@ const init = {
     },
 };
 
-const editorContent = ref(props.srcContent);
-const isActive = ref(false);
+const editorContent = ref(props.modelValue);
 
-const emits = defineEmits(["input", "update", "blur"]);
-
-const handleContentChange = (event) => {
-    editorContent.value = event.srcElement
-        ? event.srcElement.value
-        : event.target.value;
-    emits("input", editorContent.value);
-};
+const emits = defineEmits(["input", "update:modelValue", "blur", "focus"]);
 
+/* Updating value */
 const handleInitialContentChange = (newContent) => {
     newContent = newContent === undefined ? "" : newContent;
     editorContent.value = newContent;
 };
 
-const handleBlur = (event, editor) => {
-    isActive.value = false;
-    console.log("blur", editorContent.value, editor);
-    emits("blur", event);
-};
-
 const initialContent = computed(() => {
-    return props.srcContent;
-});
-
-const isDisabled = computed(() => {
-    return props.disabledEditor;
+    return props.modelValue;
 });
 
 watch(initialContent, handleInitialContentChange);
 
+const handleBlur = (event, editor) => {
+    emits("blur", event);
+};
+
+const handleFocus = (event, editor) => {
+    emits("focus", event);
+};
+
+const handleChange = (event, editor) => {
+    emits("update:modelValue", editor.getContent());
+};
+
 const fetchLinkList = () => {
     const buildPageList = (
         pageList,

resources/js/views/dashboard/PostEdit.vue

@@ -40,14 +40,7 @@
                 </SMRow>
                 <SMRow>
                     <SMColumn>
-                        <SMEditor
-                            v-model:srcContent="form.content.value"
-                            :mime-types="[
-                                'image/png',
-                                'image/jpeg',
-                                'image/gif',
-                            ]"
-                            @trix-attachment-add="attachmentAdd" />
+                        <SMEditor v-model:model-value="form.content.value" />
                     </SMColumn>
                 </SMRow>
                 <SMRow>