Merge pull request #5858 from nextcloud/backport/5856/stable28

[stable28] fix(table): Fix readonly detection in vue components
nextcloud · Jun 3, 2024 · f99f020 · f99f020
2 parents f90be2e + 2a21523
commit f99f020
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 3 deletions.
diff --git a/src/nodes/Table/TableCellView.vue b/src/nodes/Table/TableCellView.vue
@@ -24,7 +24,7 @@
 	<NodeViewWrapper data-text-el="table-cell" as="td" :style="textAlign">
 		<div class="container">
 			<NodeViewContent class="content" />
-			<NcActions v-if="editor.isEditable"
+			<NcActions v-if="isEditable"
 				data-text-table-actions="row">
 				<NcActionButton data-text-table-action="add-row-before"
 					close-after-click
@@ -81,11 +81,22 @@ export default {
 			required: true,
 		},
 	},
+	data() {
+		return {
+			isEditable: false,
+		}
+	},
 	computed: {
 		textAlign() {
 			return { 'text-align': this.node.attrs.textAlign }
 		},
 	},
+	beforeMount() {
+		this.isEditable = this.editor.isEditable
+		this.editor.on('update', ({ editor }) => {
+			this.isEditable = editor.isEditable
+		})
+	},
 	methods: {
 		deleteRow() {
 			this.editor.chain()

diff --git a/src/nodes/Table/TableHeaderView.vue b/src/nodes/Table/TableHeaderView.vue
@@ -25,7 +25,7 @@
 	<NodeViewWrapper data-text-el="table-header" as="th" :style="textAlign">
 		<div>
 			<NodeViewContent class="content" />
-			<NcActions v-if="editor.isEditable"
+			<NcActions v-if="isEditable"
 				ref="menu"
 				data-text-table-actions="header">
 				<NcActionButtonGroup>
@@ -130,11 +130,22 @@ export default {
 			required: true,
 		},
 	},
+	data() {
+		return {
+			isEditable: false,
+		}
+	},
 	computed: {
 		textAlign() {
 			return { 'text-align': this.node.attrs.textAlign }
 		},
 	},
+	beforeMount() {
+		this.isEditable = this.editor.isEditable
+		this.editor.on('update', ({ editor }) => {
+			this.isEditable = editor.isEditable
+		})
+	},
 	methods: {
 		alignCenter() {
 			this.align('center')

diff --git a/src/nodes/Table/TableView.vue b/src/nodes/Table/TableView.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<NodeViewWrapper data-text-el="table-view" class="table-wrapper">
-		<NcActions v-if="editor.isEditable"
+		<NcActions v-if="isEditable"
 			force-menu
 			data-text-table-actions="settings"
 			class="table-settings">
@@ -68,6 +68,17 @@ export default {
 			required: true,
 		},
 	},
+	data() {
+		return {
+			isEditable: false,
+		}
+	},
+	beforeMount() {
+		this.isEditable = this.editor.isEditable
+		this.editor.on('update', ({ editor }) => {
+			this.isEditable = editor.isEditable
+		})
+	},
 }
 </script>