[Documentation]: Clear how to overwrite keyboard shortcuts, but not extend them

[chrisdeeming]

What’s the URL to the page you’re sending feedback for?

https://tiptap.dev/guide/custom-extensions#keyboard-shortcuts

What part of the documentation needs improvement?

Not sure if ultimately I'm misunderstanding, the documentation is lacking, or if this is ultimately a feature request, but while it is clear from the documentation how to overwrite all existing keyboard shortcuts for an extension, it isn't clear how to extend (add to) the keyboard shortcuts or overwrite the behaviour of just one keyboard shortcut.

Take this example:

const ExtCodeBlockLowlight = CodeBlockLowlight.extend({
	addKeyboardShortcuts()
	{
		return {
			'Tab': () =>
			{
				if (this.editor.isActive('codeBlock'))
				{
					return this.editor.commands.insertContent('    ');
				}
				return true;
			}
		}
	}
});

This listens to Tab and inserts when active inside a codeBlock.

This works fine, only problem is, it overwrites all of the default keyboard shortcuts:

tiptap/packages/extension-code-block/src/code-block.ts

Line 127 in ccf05b0

addKeyboardShortcuts() {

My preference would be to add Tab to that existing list of shortcuts. For other use cases it might be beneficial to extend or overwrite an individual existing keyboard shortcut.

Currently - and please tell me I'm wrong 🙂 - it seems I'll have to copy/paste the existing behaviours into my code which is duplicative and doesn't scale well.

What is helpful about that part?

The system for adding keyboard shortcuts is great, and the system for extending extensions as-is is great and documented well enough.

What is hard to understand, missing or misleading?

Expanding this to cover other use cases as mentioned above would be useful.

Anything to add? (optional)

No response

[chrisdeeming]

Sorry I think this is the documentation page I was meant to refer to:

https://tiptap.dev/api/keyboard-shortcuts#overwrite-keyboard-shortcuts

Either way, is there a way to extend keyboard shortcuts that I'm missing?

[chrisdeeming]

Okay so this was just my JavaScript naivety showing. I had tried a few ways of referencing the "parent" but I had failed, leading me to believe that just wasn't available.

This works:

const ExtCodeBlockLowlight = CodeBlockLowlight.extend({
	addKeyboardShortcuts()
	{
		return {
			...this.parent?.(),
			'Tab': () =>
			{
				if (this.editor.isActive('codeBlock'))
				{
					return this.editor.commands.insertContent('    ');
				}
				return true;
			}
		}
	}
});

(The addition of ...this.parent?.())

FWIW I'm still leaving this issue open. It would be useful to at least make a passing mention of this approach in the documentation.

[dbalatero]

+1, I saw this.parent?.() mentioned in the addStorage() docs, but it was unclear that it would also work for addKeyboardShortcuts().

Is this.parent() available for all functions to use when overriding? If so, the docs should probably be updated to reflect that clearly.