fix(details): Don't sync open state of details nodes

Signed-off-by: Jonas <[email protected]>
nextcloud · Aug 26, 2024 · 576f7c1 · 576f7c1
1 parent d5c288b
commit 576f7c1
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git a/src/nodes/Details.js b/src/nodes/Details.js
@@ -71,7 +71,7 @@ const Details = Node.create({
 
 	addAttributes() {
 		return {
-			open: {
+			openDetails: {
 				default: false,
 			},
 		}
@@ -122,7 +122,7 @@ const Details = Node.create({
 					}, {
 						type: this.name,
 						attrs: {
-							open: true,
+							openDetails: true,
 						},
 						content: [
 							{ type: 'detailsSummary' },
@@ -175,8 +175,8 @@ const Details = Node.create({
 				}
 
 				const details = detailsParentInfo($from, schema)
-				if (!details.node.attrs.open) {
-					editor.commands.updateAttributes('details', { open: true })
+				if (!details.node.attrs.openDetails) {
+					editor.commands.updateAttributes('details', { openDetails: true })
 				}
 
 				const detailsContent = detailsContentNode(details.node, schema)

diff --git a/src/nodes/DetailsView.vue b/src/nodes/DetailsView.vue
@@ -11,11 +11,11 @@
 			<template #icon>
 				<TriangleSmallDownIcon :size="20"
 					class="button-open"
-					:class="{ 'open': isOpen }"
+					:class="{ 'open': open }"
 					@click="toggleOpen" />
 			</template>
 		</NcButton>
-		<NodeViewContent :class="{ 'is-hidden': !isOpen }" />
+		<NodeViewContent :class="{ 'is-hidden': !open }" />
 	</NodeViewWrapper>
 </template>
 
@@ -34,6 +34,12 @@ export default {
 		TriangleSmallDownIcon,
 	},
 
+	data() {
+		return {
+			open: false,
+		}
+	},
+
 	props: {
 		node: {
 			type: Object,
@@ -45,17 +51,43 @@ export default {
 		},
 	},
 
+	/*
 	computed: {
 		isOpen() {
 			return this.node.attrs.open
 		},
 	},
+	 */
+
+	beforeMount() {
+		if (this.node.attrs.openDetails) {
+			this.open = true
+			this.updateAttributes({
+				openDetails: false
+			})
+		}
+	},
+
+	watch: {
+		'node.attrs.openDetails'(val) {
+			if (val) {
+				console.debug('watch node.attrs.openDetails')
+				this.open = true
+				this.updateAttributes({
+					openDetails: false
+				})
+			}
+		}
+	},
 
 	methods: {
 		toggleOpen() {
+			this.open = !this.open
+			/*
 			this.updateAttributes({
 				open: !this.isOpen,
 			})
+			 */
 		},
 	},
 }