Bring back and refactor keymap, add focus trap to plain text editor #7204

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

max-nextcloud merged 12 commits into main from fix/keymap

May 21, 2025

cypress/e2e/viewer.spec.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -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
@@ Expand Down @@

src/EditorFactory.js

-Original file line number
+Diff line change
@@ Expand Up @@
     				defaultLanguage: language,
     				exitOnTripleEnter: false,
     			}),
+    			FocusTrap,
     			...extensions,
     		],
     	})
@@ Expand Down @@

src/components/Editor.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -10,8 +10,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
@@ Expand Down Expand Up / @@ -390,6 +389,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)
@@ Expand All / @@ -413,6 +413,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)
@@ Expand Down Expand Up / @@ -771,6 +772,10 @@ export default { @@
     			this.emit('blur')
     		},
+    		onKeyboardSave() {
+    			this.$syncService.save()
+    		},
     		onAddImageNode() {
     			this.emit('add-image-node')
     		},
@@ Expand Down Expand Up / @@ -893,32 +898,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
@@ Expand Down @@

src/components/Editor/Wrapper.vue

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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'

    @@ -91,6 +92,7 @@ export default {
  
    	},

    	mounted() {

    		subscribe('text:keyboard:outline', this.outlineToggle)

    		this.outline.enable = this.isAbleToShowOutline

    		this.$watch(

    @@ -100,22 +102,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

-Original file line number
+Diff line change
@@ Expand Up / @@ -71,7 +71,7 @@ @@
     				name="newHref"
     				:label="t('text', 'URL')"
     				:value.sync="newHref"
-    				@keypress.enter.prevent="updateLink" />
+    				@keyup.enter.prevent="updateLink" />
     		</div>
     		<!-- link preview -->
@@ Expand Down @@

src/components/Menu/MenuBar.vue

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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') {
@@ Expand Down @@

src/components/PlainTextReader.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -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'
@@ Expand All / @@ -22,7 +20,7 @@ @@
     		renderHtml(content) {
     			return '<pre>' + escapeHtml(content) + '</pre>'
     		},
-    		extensions: () => [PlainText, CodeBlock],
+    		extensions: () => [PlainText],
     	},
     	props: {
@@ Expand Down @@

src/extensions/FocusTrap.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,14 +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()
+    		(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()
@@ Expand Down @@

src/extensions/Keymap.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,35 +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
+    						/**
+    						 * <Mod>-<S>
+    						 * Save editor content
+    						 */
     						if (
     							(event.ctrlKey || event.metaKey)
+    							&& !event.altKey
     							&& !event.shiftKey
-    							&& (key === 'f' || key === 70)
+    							&& event.key === 's'
     						) {
-    							// 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
+    							event.preventDefault()
     							event.stopPropagation()
-    							window.dispatchEvent(event)
+    							emit('text:keyboard:save')
     							return true
     						}
-    						if (event.key === 'Delete' && event.ctrlKey === true) {
-    							// Prevent deleting the file, by core Viewer.vue
+    						/**
+    						 * <Esc>
+    						 * Overwrite Viewer keybinding to close viewer
+    						 */
+    						if (
+    							!event.ctrlKey
+    							&& !event.metaKey
+    							&& !event.altKey
+    							&& !event.shiftKey
+    							&& event.key === 'Escape'
+    						) {
+    							event.preventDefault()
+    							event.stopPropagation()
+    							return true
+    						}
+    						/**
+    						 * <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
     						}
     					},
@@ Expand Down @@

src/extensions/PlainText.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,14 +5,16 @@ @@
     import { Extension } from '@tiptap/core'
+    import CodeBlockPlainText from './../nodes/CodeBlockPlainText.js'
+    import Keymap from './Keymap.js'
+    import PlainTextDocument from './../nodes/PlainTextDocument.js'
     /* eslint-disable import/no-named-as-default */
     import Text from '@tiptap/extension-text'
-    import PlainTextDocument from './../nodes/PlainTextDocument.js'
     export default Extension.create({
     	name: 'PlainText',
     	addExtensions() {
-    		return [PlainTextDocument, Text]
+    		return [CodeBlockPlainText, Keymap, PlainTextDocument, Text]
     	},
     })

src/extensions/RichText.js

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -27,21 +27,22 @@ import HorizontalRule from '@tiptap/extension-horizontal-rule'
  
    import Image from './../nodes/Image.js'

    import ImageInline from './../nodes/ImageInline.js'

    import KeepSyntax from './KeepSyntax.js'

    import LinkPicker from './../extensions/LinkPicker.js'

    import Keymap from './Keymap.js'

    import LinkBubble from './../extensions/LinkBubble.js'

    import LinkPicker from './../extensions/LinkPicker.js'

    import ListItem from '@tiptap/extension-list-item'

    import Markdown from './../extensions/Markdown.js'

    import Mention from './../extensions/Mention.js'

    import Search from './../extensions/Search.js'

    import OrderedList from './../nodes/OrderedList.js'

    import Paragraph from './../nodes/Paragraph.js'

    import Preview from './../nodes/Preview.js'

    import Search from './../extensions/Search.js'

    import Table from './../nodes/Table.js'

    import TaskItem from './../nodes/TaskItem.js'

    import TaskList from './../nodes/TaskList.js'

    import Text from '@tiptap/extension-text'

    import TrailingNode from './../nodes/TrailingNode.js'

    import TextDirection from 'tiptap-text-direction'

    import TrailingNode from './../nodes/TrailingNode.js'

    /* eslint-enable import/no-named-as-default */

    import { Strong, Italic, Strike, Link, Underline } from './../marks/index.js'

    @@ -98,6 +99,7 @@ export default Extension.create({
  
    			Dropcursor,

    			Gapcursor,

    			KeepSyntax,

    			Keymap,

    			FrontMatter,

    			Mention,

    			Search,

src/extensions/index.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,6 @@ @@
     import CollaborationCursor from './CollaborationCursor.js'
     import Emoji from './Emoji.js'
     import FocusTrap from './FocusTrap.js'
-    import Keymap from './Keymap.js'
     import UserColor from './UserColor.js'
     import Markdown from './Markdown.js'
     import PlainText from './PlainText.js'
@@ Expand All / @@ -18,7 +17,6 @@ export { @@
     	CollaborationCursor,
     	Emoji,
     	FocusTrap,
-    	Keymap,
     	UserColor,
     	Markdown,
     	PlainText,
@@ Expand Down @@

src/nodes/CodeBlock.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,8 @@ @@
     import TiptapCodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
     import { VueNodeViewRenderer } from '@tiptap/vue-2'
-    import CodeBlockView from './CodeBlockView.vue'
+    import codeBlockShortcuts from './CodeBlock/codeBlockShortcuts.js'
+    import CodeBlockView from './CodeBlock/CodeBlockView.vue'
     const CodeBlock = TiptapCodeBlockLowlight.extend({
     	parseHTML() {
@@ Expand Down Expand Up / @@ -49,21 +50,7 @@ const CodeBlock = TiptapCodeBlockLowlight.extend({ @@
     	},
     	addKeyboardShortcuts() {
-    		return {
-    			'Mod-a': () => {
-    				if (!this.editor.isActive('codeBlock')) {
-    					return
-    				}
-    				const nodeSize = this.editor.state.selection.$from.node().nodeSize
-    				this.editor.commands.selectParentNode()
-    				const from = this.editor.state.selection.$from.pos
-    				const to = from + nodeSize
-    				this.editor.commands.setTextSelection({ from, to })
-    				return true
-    			},
-    		}
+    		return codeBlockShortcuts
     	},
     })
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bring back and refactor keymap, add focus trap to plain text editor #7204

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Codecov / codecov/patch

Codecov / codecov/patch

Codecov / codecov/patch

Codecov / codecov/patch

Codecov / codecov/patch

Uh oh!

Uh oh!