use UUID instead of field name for editor field

formfcw · Jan 5, 2025 · 0897efa · 0897efa
1 parent e82e436
commit 0897efa
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/interface/composables/use-m2a-store.ts b/src/interface/composables/use-m2a-store.ts
@@ -12,7 +12,7 @@ import type { Ref } from "vue";
 import type { UUID, RelationReference } from "../types";
 import type { Item, PrimaryKey } from "@directus/types";
 
-type EditorField = string | null;
+type EditorField = UUID | null;
 
 export type M2AStoreItem = {
     nodeId: UUID;

diff --git a/src/interface/interface.vue b/src/interface/interface.vue
@@ -40,6 +40,7 @@
     // Imports
     import { ref, toRef, watch, provide, computed } from "vue";
     import { useEditor, EditorContent, type JSONContent } from "@tiptap/vue-3";
+    import { v4 as uuidv4 } from "uuid";
     import Toolbar from "./components/Toolbar.vue";
     import Document from "@tiptap/extension-document";
     import Text from "@tiptap/extension-text";
@@ -174,9 +175,10 @@
     const errors = ref<string[]>([]);
 
     if (props.m2aField) {
+        const uniqueEditorField = ref(uuidv4());
         const m2aRelation = useRelationReference({
             m2aField: toRef(props, "m2aField"),
-            editorField: toRef(props, "field"),
+            editorField: uniqueEditorField,
             itemCollection: toRef(props, "collection"),
             itemPrimaryKey: toRef(props, "primaryKey"),
             updateM2aField: (value) =>
@@ -198,7 +200,7 @@
         } = useSyncRelationNodes({
             m2aRelation,
             editor,
-            editorField: props.field,
+            editorField: uniqueEditorField.value,
         });
         resetRelationNodes = _resetRelationNodes;
         syncRelationNodes = _syncRelationNodes;