Merge pull request #7242 from nextcloud/backport/7204/stable31

[stable31] Bring back and refactor keymap, add focus trap to plain text editor

Author: mejo-

cypress/e2e/viewer.spec.js

@@ -80,6 +80,11 @@ describe('Open test.md in viewer', function() {
 
 		cy.insertLine('- test')
 
+		// Ignore TypeError thrown by cypress keydown + keyup
+		cy.on('uncaught:exception', (err) => {
+			return !err.message.includes('Cannot read properties of undefined (reading \'toLowerCase\')')
+		})
+
 		// Cypress does not have native tab key support, though this seems to work
 		// for triggering the key handler of tiptap
 		// https://github.com/cypress-io/cypress/issues/311

src/EditorFactory.js

@@ -71,6 +71,7 @@ const createPlainEditor = ({ language, extensions = [] } = {}) => {
 				defaultLanguage: language,
 				exitOnTripleEnter: false,
 			}),
+			FocusTrap,
 			...extensions,
 		],
 	})

src/components/Editor.vue

@@ -9,8 +9,7 @@
 		data-text-el="editor-container"
 		class="text-editor"
 		:class="{ 'is-mobile': isMobile }"
-		tabindex="-1"
-		@keydown.stop="onKeyDown">
+		tabindex="-1">
 		<SkeletonLoading v-if="showLoadingSkeleton" />
 		<CollisionResolveDialog v-if="isResolvingConflict" :sync-error="syncError" />
 		<Wrapper v-if="displayed"
@@ -374,6 +373,7 @@ export default {
 			window.addEventListener('beforeprint', this.preparePrinting)
 			window.addEventListener('afterprint', this.preparePrinting)
 		}
+		subscribe('text:keyboard:save', this.onKeyboardSave)
 		subscribe('text:image-node:add', this.onAddImageNode)
 		subscribe('text:image-node:delete', this.onDeleteImageNode)
 		this.emit('update:loaded', true)
@@ -398,6 +398,7 @@ export default {
 			window.removeEventListener('beforeprint', this.preparePrinting)
 			window.removeEventListener('afterprint', this.preparePrinting)
 		}
+		unsubscribe('text:keyboard:save', this.onKeyboardSave)
 		unsubscribe('text:image-node:add', this.onAddImageNode)
 		unsubscribe('text:image-node:delete', this.onDeleteImageNode)
 		unsubscribe('text:translate-modal:show', this.showTranslateModal)
@@ -728,6 +729,10 @@ export default {
 			this.emit('blur')
 		},
 
+		onKeyboardSave() {
+			this.$syncService.save()
+		},
+
 		onAddImageNode() {
 			this.emit('add-image-node')
 		},
@@ -844,26 +849,6 @@ export default {
 			this.$editor.setEditable(this.editMode)
 		},
 
-		onKeyDown(event) {
-			if (event.key === 'Escape') {
-				event.preventDefault()
-				return
-			}
-
-			if (event.key === 'Tab' && !event.shiftKey && !event.ctrlKey && !event.metaKey && this.$editor.isActive('codeBlock')) {
-				this.$editor.commands.insertContent('\t')
-				this.$editor.commands.focus()
-				event.preventDefault()
-				event.stopPropagation()
-				return
-			}
-
-			if ((event.ctrlKey || event.metaKey) && event.key === 's') {
-				this.$syncService.save()
-				event.preventDefault()
-			}
-		},
-
 		showTranslateModal(e) {
 			this.translateContent = e.content
 			this.translateModal = true

src/components/Editor/Wrapper.vue

@@ -15,6 +15,7 @@
 </template>
 
 <script>
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { useIsRichEditorMixin, useIsRichWorkspaceMixin } from './../Editor.provider.js'
 import { OUTLINE_STATE, OUTLINE_ACTIONS, READ_ONLY_ACTIONS } from './Wrapper.provider.js'
 import useStore from '../../mixins/store.js'
@@ -96,6 +97,7 @@ export default {
 	},
 
 	mounted() {
+		subscribe('text:keyboard:outline', this.outlineToggle)
 		this.outline.enable = this.isAbleToShowOutline
 
 		this.$watch(
@@ -105,22 +107,17 @@ export default {
 				Object.assign(this.outline, { enable })
 			},
 		)
-
-		document.addEventListener('keydown', this.handleKeyDown)
 	},
+
 	beforeDestroy() {
-		document.removeEventListener('keydown', this.handleKeyDown)
+		unsubscribe('text:keyboard:outline', this.outlineToggle)
 	},
+
 	methods: {
 		outlineToggle() {
 			this.outline.visible = !this.outline.visible
 			this.$emit('outline-toggled', this.outline.visible)
 		},
-		handleKeyDown(event) {
-			if (event.ctrlKey && event.altKey && event.key === 'h') {
-				this.outlineToggle()
-			}
-		},
 		readOnlyToggle() {
 			this.$emit('read-only-toggled')
 		},

src/components/Link/LinkBubbleView.vue

@@ -71,7 +71,7 @@
 				name="newHref"
 				:label="t('text', 'URL')"
 				:value.sync="newHref"
-				@keypress.enter.prevent="updateLink" />
+				@keyup.enter.prevent="updateLink" />
 		</div>
 
 		<!-- link preview -->

src/components/Menu/MenuBar.vue

@@ -22,8 +22,8 @@
 			role="toolbar"
 			class="text-menubar__entries"
 			:aria-label="t('text', 'Formatting menu bar')"
-			@keydown.left.stop="handleToolbarNavigation"
-			@keydown.right.stop="handleToolbarNavigation">
+			@keyup.left.stop="handleToolbarNavigation"
+			@keyup.right.stop="handleToolbarNavigation">
 			<!-- The visible inline actions -->
 			<component :is="actionEntry.component ? actionEntry.component : (actionEntry.children ? 'ActionList' : 'ActionSingle')"
 				v-for="(actionEntry, index) in visibleEntries"

src/components/Menu/ToolBarLogic.js

@@ -66,7 +66,7 @@ export default defineComponent({
 
 		/**
 		 * Handle navigation in toolbar
-		 * @param {KeyboardEvent} event The keydown event
+		 * @param {KeyboardEvent} event The keyup event
 		 */
 		handleToolbarNavigation(event) {
 			if (event.key === 'ArrowRight') {

src/components/PlainTextReader.vue

@@ -8,8 +8,6 @@
 </template>
 
 <script>
-/* eslint-disable import/no-named-as-default */
-import CodeBlock from '@tiptap/extension-code-block'
 import escapeHtml from 'escape-html'
 import BaseReader from './BaseReader.vue'
 import { PlainText } from './../extensions/index.js'
@@ -22,7 +20,7 @@ export default {
 		renderHtml(content) {
 			return '<pre>' + escapeHtml(content) + '</pre>'
 		},
-		extensions: () => [PlainText, CodeBlock],
+		extensions: () => [PlainText],
 	},
 
 	props: {

src/extensions/FocusTrap.js

@@ -7,13 +7,29 @@ import { Extension } from '@tiptap/core'
 
 let ownPaused = false
 
+const checkHasExtension = (editor, extensionName) => {
+	return editor.extensionManager.extensions.some(
+		(extension) => extension.name === extensionName,
+	)
+}
+
+const checkHasListExtension = (editor) => {
+	return (
+		checkHasExtension(editor, 'bulletList')
+		|| checkHasExtension(editor, 'orderedList')
+		|| checkHasExtension(editor, 'taskList')
+	)
+}
+
 const toggleFocusTrap = ({ editor }) => {
 	const trapStack = window._nc_focus_trap ?? []
 	const activeTrap = trapStack[trapStack.length - 1]
 
-	const possibleEditorTabCommand = editor.can().sinkListItem('listItem')
-		|| editor.can().goToNextCell()
-		|| editor.can().goToPreviousCell()
+	const possibleEditorTabCommand
+		= (checkHasListExtension(editor) && editor.can().sinkListItem('listItem'))
+		|| (checkHasExtension(editor, 'table') && editor.can().goToNextCell())
+		|| (checkHasExtension(editor, 'table') && editor.can().goToPreviousCell())
+		|| (checkHasExtension(editor, 'codeBlock') && editor.isActive('codeBlock'))
 
 	if (possibleEditorTabCommand) {
 		activeTrap?.pause()

src/extensions/Keymap.js

@@ -5,32 +5,72 @@
 
 import { Extension } from '@tiptap/core'
 import { Plugin } from '@tiptap/pm/state'
+import { emit } from '@nextcloud/event-bus'
 
 const Keymap = Extension.create({
-
-	name: 'customkeymap',
+	name: 'CustomKeymap',
 
 	addKeyboardShortcuts() {
-		return this.options
+		return {
+			/**
+			 * <Mod>-<Alt>-<H>
+			 * Toggle editor outline
+			 */
+			'Mod-Alt-h': () => {
+				emit('text:keyboard:outline')
+				return true
+			},
+		}
 	},
 
 	addProseMirrorPlugins() {
 		return [
 			new Plugin({
 				props: {
 					handleKeyDown(view, event) {
-						const key = event.key || event.keyCode
-						if ((event.ctrlKey || event.metaKey) && !event.shiftKey && (key === 'f' || key === 70)) {
-							// We need to stop propagation and dispatch the event on the window
-							// in order to force triggering the browser native search in the text editor
+						/**
+						 * <Mod>-<S>
+						 * Save editor content
+						 */
+						if (
+							(event.ctrlKey || event.metaKey)
+							&& !event.altKey
+							&& !event.shiftKey
+							&& event.key === 's'
+						) {
+							event.preventDefault()
+							event.stopPropagation()
+							emit('text:keyboard:save')
+							return true
+						}
+
+						/**
+						 * <Esc>
+						 * Overwrite Viewer keybinding to close viewer
+						 */
+						if (
+							!event.ctrlKey
+							&& !event.metaKey
+							&& !event.altKey
+							&& !event.shiftKey
+							&& event.key === 'Escape'
+						) {
+							event.preventDefault()
 							event.stopPropagation()
-							window.dispatchEvent(event)
 							return true
 						}
-						if (event.key === 'Delete' && event.ctrlKey === true) {
-							// Prevent deleting the file, by core Viewer.vue
+
+						/**
+						 * <Mod>-<Del>
+						 * Overwrite Viewer keybinding to delete the file
+						 */
+						if (
+							(event.ctrlKey || event.metaKey)
+							&& !event.altKey
+							&& !event.shiftKey
+							&& event.key === 'Delete'
+						) {
 							event.stopPropagation()
-							window.dispatchEvent(event)
 							return true
 						}
 					},