From dea396ff24b8293865a0f2aeb68360c409eb2535 Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Tue, 5 Aug 2025 07:36:21 +0100
Subject: [PATCH 1/6] feat: Inline editing - Rich text

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../ncTable/partials/TableCellEditor.vue      | 100 ++++++++++++++++--
 .../components/ncTable/partials/TableRow.vue  |   1 -
 2 files changed, 92 insertions(+), 9 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellEditor.vue b/src/shared/components/ncTable/partials/TableCellEditor.vue
index f526d691b8..5ceb6b41d3 100644
--- a/src/shared/components/ncTable/partials/TableCellEditor.vue
+++ b/src/shared/components/ncTable/partials/TableCellEditor.vue
@@ -3,23 +3,44 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcEditor v-if="value !== '' && value !== null"
-		:can-edit="false"
-		:text="value"
-		:show-border="false"
-		:show-readonly-bar="false" />
+	<div class="cell-editor">
+		<div v-if="!isEditing" @click="startEditing">
+			<NcEditor v-if="value !== '' && value !== null"
+				:can-edit="false"
+				:text="value"
+				:show-border="false"
+				:show-readonly-bar="false" />
+		</div>
+		<div v-else
+			ref="editingContainer"
+			tabindex="0"
+			@keydown.enter="saveChanges"
+			@keydown.escape="cancelEdit">
+			<NcEditor
+				:can-edit="true"
+				:text.sync="editValue"
+				:show-readonly-bar="false" />
+			<div v-if="localLoading" class="loading-indicator">
+				<div class="icon-loading-small icon-loading-inline" />
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
 import NcEditor from '../../ncEditor/NcEditor.vue'
+import cellEditMixin from '../mixins/cellEditMixin.js'
+import { translate as t } from '@nextcloud/l10n'
 
 export default {
 	name: 'TableCellEditor',
 
 	components: {
-		NcEditor,
+		NcEditor
 	},
 
+	mixins: [cellEditMixin],
+
 	props: {
 		column: {
 			type: Object,
@@ -34,15 +55,79 @@ export default {
 			default: '',
 		},
 	},
+
+	watch: {
+		isEditing(newValue) {
+			if (newValue) {
+				this.$nextTick(() => {
+					// Add click outside listener
+					document.addEventListener('click', this.handleClickOutside)
+				})
+			} else {
+				// Remove click outside listener
+				document.removeEventListener('click', this.handleClickOutside)
+			}
+		},
+	},
+
+	methods: {
+		t,
+		async saveChanges() {
+			if (this.localLoading) {
+				return
+			}
+
+			if (this.editValue === this.value) {
+				this.isEditing = false
+				return
+			}
+
+			const newValue = this.editValue ?? ''
+			const success = await this.updateCellValue(newValue)
+
+			if (!success) {
+				this.cancelEdit()
+			}
+
+			this.localLoading = false
+			this.isEditing = false
+		},
+
+		handleClickOutside(event) {
+			// Check if the click is outside the editing container
+			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
+				this.saveChanges()
+			}
+		},
+	},
 }
 </script>
 
 <style lang="scss" scoped>
+.cell-editor {
+	width: 100%;
+}
+
+.cell-editor > div {
+	cursor: pointer;
+}
+
+.inline-editing-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.editor-buttons {
+	display: flex;
+	gap: 8px;
+	margin-top: 8px;
+	align-items: center;
+}
 
 div {
 	max-width: 670px;
 	max-height: calc(var(--default-line-height) * 6);
-	overflow-y: scroll;
+	overflow-y: hidden;
 	min-width: 100px;
 	margin-top: calc(var(--default-grid-baseline) * 2);
 	margin-bottom: calc(var(--default-grid-baseline) * 2);
@@ -50,7 +135,6 @@ div {
 
 :deep(.text-editor__wrapper div.ProseMirror) {
 	padding: 0px 0px 0px 0px;
-
 }
 
 :deep(div[contenteditable='false']) {
diff --git a/src/shared/components/ncTable/partials/TableRow.vue b/src/shared/components/ncTable/partials/TableRow.vue
index 1c756e213c..19f083d9e6 100644
--- a/src/shared/components/ncTable/partials/TableRow.vue
+++ b/src/shared/components/ncTable/partials/TableRow.vue
@@ -113,7 +113,6 @@ export default {
 		// to be used to trigger the edit modal instead of inline editing
 		nonInlineEditableColumnTypes() {
 			return [
-				ColumnTypes.TextRich,
 			]
 		},
 	},

From f632d8f6de0e0f6106fd6c3c95083c3ce7b23202 Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Fri, 15 Aug 2025 08:23:58 +0100
Subject: [PATCH 2/6] fix: Make inline editing rich text work

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 src/shared/components/ncEditor/NcEditor.vue   |  10 +-
 .../ncTable/partials/RichEditor.vue           | 122 ++++++++++++++++++
 .../ncTable/partials/TableCellEditor.vue      | 102 +++++----------
 3 files changed, 162 insertions(+), 72 deletions(-)
 create mode 100644 src/shared/components/ncTable/partials/RichEditor.vue

diff --git a/src/shared/components/ncEditor/NcEditor.vue b/src/shared/components/ncEditor/NcEditor.vue
index 5005db7d99..b9c1aa7837 100644
--- a/src/shared/components/ncEditor/NcEditor.vue
+++ b/src/shared/components/ncEditor/NcEditor.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="editor-wrapper" :class="{ border: showBorder, 'hide-readonly-bar': !showReadonlyBar, 'height-small': height === 'small' }">
+	<div class="editor-wrapper" :class="{ border: showBorder, 'hide-readonly-bar': !showReadonlyBar, 'height-small': height === 'small', 'hide-menu-bar': !showMenuBar }">
 		<div v-if="textAppAvailable">
 			<div ref="editor" />
 		</div>
@@ -48,6 +48,10 @@ export default {
 		      type: Boolean,
 		      default: true,
 		    },
+		showMenuBar: {
+			  type: Boolean,
+			  default: true,
+		    },
 		height: {
 		      type: String,
 		      default: null, // null, 'small'
@@ -140,6 +144,10 @@ export default {
 		display: none !important;
 	}
 
+	.hide-menu-bar :deep(.text-menubar) {
+		display: none !important;
+	}
+
 	.height-small {
 		max-height: 320px;
 		overflow-y: auto;
diff --git a/src/shared/components/ncTable/partials/RichEditor.vue b/src/shared/components/ncTable/partials/RichEditor.vue
new file mode 100644
index 0000000000..63c766a485
--- /dev/null
+++ b/src/shared/components/ncTable/partials/RichEditor.vue
@@ -0,0 +1,122 @@
+<!--
+  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<div ref="editingContainer"
+		class="rich-editor-edit-mode"
+		@keydown.escape.prevent="canceEdit">
+		<NcEditor
+			:can-edit="true"
+			:text.sync="localValue"
+			:show-border="false"
+			:show-readonly-bar="false"
+			:show-menu-bar="false" />
+		<div v-if="loading" class="loading-indicator">
+			<div class="icon-loading-small icon-loading-inline" />
+		</div>
+	</div>
+</template>
+
+<script>
+import NcEditor from '../../ncEditor/NcEditor.vue'
+import { translate as t } from '@nextcloud/l10n'
+
+export default {
+	name: 'RichEditor',
+
+	components: {
+		NcEditor,
+	},
+
+	props: {
+		value: {
+			type: String,
+			default: '',
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			localValue: this.value || '',
+			ignoreNextClick: true,
+		}
+	},
+
+	watch: {
+		value(newValue) {
+			this.localValue = newValue || ''
+		},
+	},
+
+	mounted() {
+		// Add a small delay to prevent the initial click from immediately triggering save
+		setTimeout(() => {
+			document.addEventListener('click', this.handleClickOutside)
+			this.ignoreNextClick = false
+		}, 200)
+	},
+
+	beforeDestroy() {
+		document.removeEventListener('click', this.handleClickOutside)
+	},
+
+	methods: {
+		t,
+
+		handleClickOutside(event) {
+			// Ignore the first click to prevent immediate save after starting edit
+			if (this.ignoreNextClick) {
+				return
+			}
+
+			// Check if the click is outside our editing container
+			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
+
+				const isEditorRelated = event.target.closest('.text-editor__wrapper')
+										|| event.target.closest('.text-menubar')
+										|| event.target.closest('.ProseMirror')
+										|| event.target.closest('[contenteditable]')
+										|| event.target.closest('.text-editor')
+										|| event.target.closest('.editor-wrapper')
+										|| event.target.closest('.v-popper__popper') // For any tooltips/dropdowns
+										|| event.target.closest('[role="dialog"]') // For any modal dialogs
+
+				if (!isEditorRelated) {
+					this.$emit('save', this.localValue)
+				}
+			}
+		},
+
+		getValue() {
+			return this.localValue
+		},
+
+		canceEdit() {
+			this.$emit('cancel')
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.rich-editor-edit-mode {
+	position: relative;
+	border: 1px solid var(--color-border-maxcontrast);
+}
+
+.loading-indicator {
+	position: absolute;
+	top: 4px;
+	right: 4px;
+}
+
+:deep(.text-editor__wrapper div.ProseMirror) {
+	padding: 8px;
+	min-height: 24px;
+}
+</style>
diff --git a/src/shared/components/ncTable/partials/TableCellEditor.vue b/src/shared/components/ncTable/partials/TableCellEditor.vue
index 5ceb6b41d3..e442ba450a 100644
--- a/src/shared/components/ncTable/partials/TableCellEditor.vue
+++ b/src/shared/components/ncTable/partials/TableCellEditor.vue
@@ -5,30 +5,23 @@
 <template>
 	<div class="cell-editor">
 		<div v-if="!isEditing" @click="startEditing">
-			<NcEditor v-if="value !== '' && value !== null"
+			<NcEditor v-if="value && value.trim()"
 				:can-edit="false"
 				:text="value"
 				:show-border="false"
 				:show-readonly-bar="false" />
 		</div>
-		<div v-else
-			ref="editingContainer"
-			tabindex="0"
-			@keydown.enter="saveChanges"
-			@keydown.escape="cancelEdit">
-			<NcEditor
-				:can-edit="true"
-				:text.sync="editValue"
-				:show-readonly-bar="false" />
-			<div v-if="localLoading" class="loading-indicator">
-				<div class="icon-loading-small icon-loading-inline" />
-			</div>
-		</div>
+		<RichEditor v-else
+			:value="value"
+			:loading="isSaving"
+			@save="saveChanges"
+			@cancel="cancelEdit" />
 	</div>
 </template>
 
 <script>
 import NcEditor from '../../ncEditor/NcEditor.vue'
+import RichEditor from './RichEditor.vue'
 import cellEditMixin from '../mixins/cellEditMixin.js'
 import { translate as t } from '@nextcloud/l10n'
 
@@ -36,7 +29,8 @@ export default {
 	name: 'TableCellEditor',
 
 	components: {
-		NcEditor
+		NcEditor,
+		RichEditor,
 	},
 
 	mixins: [cellEditMixin],
@@ -56,48 +50,41 @@ export default {
 		},
 	},
 
-	watch: {
-		isEditing(newValue) {
-			if (newValue) {
-				this.$nextTick(() => {
-					// Add click outside listener
-					document.addEventListener('click', this.handleClickOutside)
-				})
-			} else {
-				// Remove click outside listener
-				document.removeEventListener('click', this.handleClickOutside)
-			}
-		},
+	data() {
+		return {
+			isSaving: false,
+		}
 	},
 
 	methods: {
 		t,
-		async saveChanges() {
-			if (this.localLoading) {
-				return
-			}
 
-			if (this.editValue === this.value) {
+		async saveChanges(newValue) {
+			if (this.isSaving) return
+
+			if (newValue === this.value) {
 				this.isEditing = false
 				return
 			}
 
-			const newValue = this.editValue ?? ''
-			const success = await this.updateCellValue(newValue)
+			this.isSaving = true
+			const success = await this.updateCellValue(newValue || '')
+			this.isSaving = false
 
-			if (!success) {
+			if (success) {
+				this.isEditing = false
+			} else {
 				this.cancelEdit()
 			}
+		},
 
-			this.localLoading = false
+		cancelEdit() {
 			this.isEditing = false
 		},
 
-		handleClickOutside(event) {
-			// Check if the click is outside the editing container
-			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
-				this.saveChanges()
-			}
+		startEditing() {
+			if (!this.canEditCell()) return false
+			this.isEditing = true
 		},
 	},
 }
@@ -110,43 +97,16 @@ export default {
 
 .cell-editor > div {
 	cursor: pointer;
-}
-
-.inline-editing-container {
-	display: flex;
-	flex-direction: column;
-}
-
-.editor-buttons {
-	display: flex;
-	gap: 8px;
-	margin-top: 8px;
-	align-items: center;
-}
-
-div {
-	max-width: 670px;
-	max-height: calc(var(--default-line-height) * 6);
-	overflow-y: hidden;
-	min-width: 100px;
-	margin-top: calc(var(--default-grid-baseline) * 2);
-	margin-bottom: calc(var(--default-grid-baseline) * 2);
+	min-height: 24px;
 }
 
 :deep(.text-editor__wrapper div.ProseMirror) {
-	padding: 0px 0px 0px 0px;
+	padding: 8px;
+	min-height: 24px;
 }
 
 :deep(div[contenteditable='false']) {
 	background: transparent;
 	color: var(--color-main-text);
-	width: auto;
-	min-height: auto;
-	opacity: 1;
-	font-size: var(--default-font-size);
-}
-
-:deep(.editor__content) {
-	max-width: 100% !important;
 }
 </style>

From 8a27cb51965eae04da42de94d00a19542f6f13fb Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Sun, 17 Aug 2025 14:56:54 +0100
Subject: [PATCH 3/6] fix: Do not switch to edit mode if click on widget

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../ncTable/partials/RichEditor.vue           | 20 ++++++++++++-------
 .../ncTable/partials/TableCellEditor.vue      | 20 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/ncTable/partials/RichEditor.vue b/src/shared/components/ncTable/partials/RichEditor.vue
index 63c766a485..3addb43356 100644
--- a/src/shared/components/ncTable/partials/RichEditor.vue
+++ b/src/shared/components/ncTable/partials/RichEditor.vue
@@ -43,7 +43,7 @@ export default {
 	data() {
 		return {
 			localValue: this.value || '',
-			ignoreNextClick: true,
+			isInitialEditClick: false,
 		}
 	},
 
@@ -54,11 +54,11 @@ export default {
 	},
 
 	mounted() {
-		// Add a small delay to prevent the initial click from immediately triggering save
-		setTimeout(() => {
+		// Add click outside listener after the current event loop
+		// to avoid the same click that triggered editing from closing the editor
+		this.$nextTick(() => {
 			document.addEventListener('click', this.handleClickOutside)
-			this.ignoreNextClick = false
-		}, 200)
+		})
 	},
 
 	beforeDestroy() {
@@ -68,9 +68,14 @@ export default {
 	methods: {
 		t,
 
+		notifyEditingStarted() {
+			this.isInitialEditClick = true
+		},
+
 		handleClickOutside(event) {
-			// Ignore the first click to prevent immediate save after starting edit
-			if (this.ignoreNextClick) {
+			// Ignore the initial click that started editing
+			if (this.isInitialEditClick) {
+				this.isInitialEditClick = false
 				return
 			}
 
@@ -85,6 +90,7 @@ export default {
 										|| event.target.closest('.editor-wrapper')
 										|| event.target.closest('.v-popper__popper') // For any tooltips/dropdowns
 										|| event.target.closest('[role="dialog"]') // For any modal dialogs
+										|| event.target.closest('.widgets--list') // For widgets like images, videos
 
 				if (!isEditorRelated) {
 					this.$emit('save', this.localValue)
diff --git a/src/shared/components/ncTable/partials/TableCellEditor.vue b/src/shared/components/ncTable/partials/TableCellEditor.vue
index e442ba450a..b8ed60e416 100644
--- a/src/shared/components/ncTable/partials/TableCellEditor.vue
+++ b/src/shared/components/ncTable/partials/TableCellEditor.vue
@@ -4,7 +4,7 @@
 -->
 <template>
 	<div class="cell-editor">
-		<div v-if="!isEditing" @click="startEditing">
+		<div v-if="!isEditing" @click="handleStartEditing">
 			<NcEditor v-if="value && value.trim()"
 				:can-edit="false"
 				:text="value"
@@ -12,6 +12,7 @@
 				:show-readonly-bar="false" />
 		</div>
 		<RichEditor v-else
+			ref="richEditor"
 			:value="value"
 			:loading="isSaving"
 			@save="saveChanges"
@@ -59,6 +60,17 @@ export default {
 	methods: {
 		t,
 
+		handleStartEditing(event) {
+			// Don't start editing if clicking on widgets like images
+			if (event.target.closest('.widgets--list')) {
+				return
+			}
+
+			this.startEditing()
+			// Stop the event from propagating to avoid immediate click outside
+			event.stopPropagation()
+		},
+
 		async saveChanges(newValue) {
 			if (this.isSaving) return
 
@@ -85,6 +97,12 @@ export default {
 		startEditing() {
 			if (!this.canEditCell()) return false
 			this.isEditing = true
+
+			this.$nextTick(() => {
+				if (this.$refs.richEditor) {
+					this.$refs.richEditor.notifyEditingStarted()
+				}
+			})
 		},
 	},
 }

From da3c905a2a44a47e2b524e5634eec6db3b20429c Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Sun, 17 Aug 2025 15:44:29 +0100
Subject: [PATCH 4/6] fix: Allow link previews without edit mode

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 src/shared/components/ncTable/partials/RichEditor.vue      | 3 +++
 src/shared/components/ncTable/partials/TableCellEditor.vue | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/ncTable/partials/RichEditor.vue b/src/shared/components/ncTable/partials/RichEditor.vue
index 3addb43356..0000e64fb7 100644
--- a/src/shared/components/ncTable/partials/RichEditor.vue
+++ b/src/shared/components/ncTable/partials/RichEditor.vue
@@ -91,6 +91,9 @@ export default {
 										|| event.target.closest('.v-popper__popper') // For any tooltips/dropdowns
 										|| event.target.closest('[role="dialog"]') // For any modal dialogs
 										|| event.target.closest('.widgets--list') // For widgets like images, videos
+										|| event.target.closest('.tippy-box') // For link preview
+										|| event.target.closest('a') // For links
+										|| event.target.closest('svg') // For icons
 
 				if (!isEditorRelated) {
 					this.$emit('save', this.localValue)
diff --git a/src/shared/components/ncTable/partials/TableCellEditor.vue b/src/shared/components/ncTable/partials/TableCellEditor.vue
index b8ed60e416..17ad3438d2 100644
--- a/src/shared/components/ncTable/partials/TableCellEditor.vue
+++ b/src/shared/components/ncTable/partials/TableCellEditor.vue
@@ -61,8 +61,8 @@ export default {
 		t,
 
 		handleStartEditing(event) {
-			// Don't start editing if clicking on widgets like images
-			if (event.target.closest('.widgets--list')) {
+			// Don't start editing if clicking on widgets like images, links, link preview icon (svg)
+			if (event.target.closest('.widgets--list') || event.target.closest('.ProseMirror-widget') || event.target.closest('.tippy-box') || event.target.closest('a') || event.target.closest('svg')) {
 				return
 			}
 

From 71705c74110177ff6da70fbdd6b1ff538dd2ffdd Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Mon, 18 Aug 2025 17:19:35 +0100
Subject: [PATCH 5/6] fix: typo in function name

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 src/shared/components/ncTable/partials/RichEditor.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/ncTable/partials/RichEditor.vue b/src/shared/components/ncTable/partials/RichEditor.vue
index 0000e64fb7..74d490dbfb 100644
--- a/src/shared/components/ncTable/partials/RichEditor.vue
+++ b/src/shared/components/ncTable/partials/RichEditor.vue
@@ -5,7 +5,7 @@
 <template>
 	<div ref="editingContainer"
 		class="rich-editor-edit-mode"
-		@keydown.escape.prevent="canceEdit">
+		@keydown.escape.prevent="cancelEdit">
 		<NcEditor
 			:can-edit="true"
 			:text.sync="localValue"
@@ -105,7 +105,7 @@ export default {
 			return this.localValue
 		},
 
-		canceEdit() {
+		cancelEdit() {
 			this.$emit('cancel')
 		},
 	},

From 594b45d814ee25cfdafab8f2a05b09a001ac220c Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Mon, 18 Aug 2025 18:52:35 +0100
Subject: [PATCH 6/6] enh: Update saving check

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../components/ncTable/partials/TableCellEditor.vue       | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellEditor.vue b/src/shared/components/ncTable/partials/TableCellEditor.vue
index 17ad3438d2..4845506a8b 100644
--- a/src/shared/components/ncTable/partials/TableCellEditor.vue
+++ b/src/shared/components/ncTable/partials/TableCellEditor.vue
@@ -14,7 +14,7 @@
 		<RichEditor v-else
 			ref="richEditor"
 			:value="value"
-			:loading="isSaving"
+			:loading="localLoading"
 			@save="saveChanges"
 			@cancel="cancelEdit" />
 	</div>
@@ -53,7 +53,6 @@ export default {
 
 	data() {
 		return {
-			isSaving: false,
 		}
 	},
 
@@ -72,22 +71,21 @@ export default {
 		},
 
 		async saveChanges(newValue) {
-			if (this.isSaving) return
+			if (this.localLoading) return
 
 			if (newValue === this.value) {
 				this.isEditing = false
 				return
 			}
 
-			this.isSaving = true
 			const success = await this.updateCellValue(newValue || '')
-			this.isSaving = false
 
 			if (success) {
 				this.isEditing = false
 			} else {
 				this.cancelEdit()
 			}
+			this.localLoading = false
 		},
 
 		cancelEdit() {