From 2a21523d263c637f44658e95ccf14af0279bcffb Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Mon, 3 Jun 2024 17:50:50 +0200
Subject: [PATCH] fix(table): Fix readonly detection in vue components
Signed-off-by: Jonas <jonas@freesources.org>
---
src/nodes/Table/TableCellView.vue | 13 ++++++++++++-
src/nodes/Table/TableHeaderView.vue | 13 ++++++++++++-
src/nodes/Table/TableView.vue | 13 ++++++++++++-
3 files changed, 36 insertions(+), 3 deletions(-)
diff --git a/src/nodes/Table/TableCellView.vue b/src/nodes/Table/TableCellView.vue
index 5e97e668a99..88a65f2b8a7 100644
--- 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
index 8209c2f7696..fb2d44f4b72 100644
--- 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
index 4e2167e2ae5..926e06d2b29 100644
--- 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>