feat: Inline editing - Rich text

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;

src/shared/components/ncTable/partials/RichEditor.vue

@@ -0,0 +1,131 @@
+<!--
+  - 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="cancelEdit">
+		<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 || '',
+			isInitialEditClick: false,
+		}
+	},
+
+	watch: {
+		value(newValue) {
+			this.localValue = newValue || ''
+		},
+	},
+
+	mounted() {
+		// 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)
+		})
+	},
+
+	beforeDestroy() {
+		document.removeEventListener('click', this.handleClickOutside)
+	},
+
+	methods: {
+		t,
+
+		notifyEditingStarted() {
+			this.isInitialEditClick = true
+		},
+
+		handleClickOutside(event) {
+			// Ignore the initial click that started editing
+			if (this.isInitialEditClick) {
+				this.isInitialEditClick = false
+				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
+										|| 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)
+				}
+			}
+		},
+
+		getValue() {
+			return this.localValue
+		},
+
+		cancelEdit() {
+			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>

src/shared/components/ncTable/partials/TableCellEditor.vue

@@ -3,23 +3,39 @@
   - 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="handleStartEditing">
+			<NcEditor v-if="value && value.trim()"
+				:can-edit="false"
+				:text="value"
+				:show-border="false"
+				:show-readonly-bar="false" />
+		</div>
+		<RichEditor v-else
+			ref="richEditor"
+			:value="value"
+			:loading="localLoading"
+			@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'
 
 export default {
 	name: 'TableCellEditor',
 
 	components: {
 		NcEditor,
+		RichEditor,
 	},
 
+	mixins: [cellEditMixin],
+
 	props: {
 		column: {
 			type: Object,
@@ -34,35 +50,79 @@ export default {
 			default: '',
 		},
 	},
+
+	data() {
+		return {
+		}
+	},
+
+	methods: {
+		t,
+
+		handleStartEditing(event) {
+			// 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
+			}
+
+			this.startEditing()
+			// Stop the event from propagating to avoid immediate click outside
+			event.stopPropagation()
+		},
+
+		async saveChanges(newValue) {
+			if (this.localLoading) return
+
+			if (newValue === this.value) {
+				this.isEditing = false
+				return
+			}
+
+			const success = await this.updateCellValue(newValue || '')
+
+			if (success) {
+				this.isEditing = false
+			} else {
+				this.cancelEdit()
+			}
+			this.localLoading = false
+		},
+
+		cancelEdit() {
+			this.isEditing = false
+		},
+
+		startEditing() {
+			if (!this.canEditCell()) return false
+			this.isEditing = true
+
+			this.$nextTick(() => {
+				if (this.$refs.richEditor) {
+					this.$refs.richEditor.notifyEditingStarted()
+				}
+			})
+		},
+	},
 }
 </script>
 
 <style lang="scss" scoped>
+.cell-editor {
+	width: 100%;
+}
 
-div {
-	max-width: 670px;
-	max-height: calc(var(--default-line-height) * 6);
-	overflow-y: scroll;
-	min-width: 100px;
-	margin-top: calc(var(--default-grid-baseline) * 2);
-	margin-bottom: calc(var(--default-grid-baseline) * 2);
+.cell-editor > div {
+	cursor: pointer;
+	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>

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,
 			]
 		},
 	},