FEATURE: Add Ctrl+k keyboard shortcut handler

Neos.Ui/neos-bridge/src/domain/Extensibility/Store.ts

@@ -21,6 +21,14 @@ export interface IState {
             query?: string;
             filterNodeType?: string;
         };
+        contentCanvas?: {
+            formattingUnderCursor?: {
+                link?: string;
+                linkTitle?: string;
+                linkTargetBlank?: boolean;
+                linkRelNofollow?: boolean;
+            };
+        };
     };
     system?: {
         authenticationTimeout?: boolean;

Neos.Ui/plugin/src/manifest.js

@@ -3,6 +3,7 @@ import manifest from '@neos-project/neos-ui-extensibility';
 import {registerLinkTypes, registerDialog, createEditor} from '@sitegeist/archaeopteryx-core';
 import {registerInspectorEditor} from '@sitegeist/archaeopteryx-inspector-editor';
 import {registerLinkButton} from '@sitegeist/archaeopteryx-link-button';
+import {registerShortcutHandler} from '@sitegeist/archaeopteryx-shortcut-handler';
 
 manifest('@sitegeist/archaeopteryx-plugin', {}, (globalRegistry, {store, configuration, routes}) => {
     const editor = createEditor();
@@ -12,4 +13,5 @@ manifest('@sitegeist/archaeopteryx-plugin', {}, (globalRegistry, {store, configu
     registerDialog(neosContextProperties, editor);
     registerInspectorEditor(neosContextProperties, editor);
     registerLinkButton(neosContextProperties, editor);
+    registerShortcutHandler(neosContextProperties, editor);
 });

Neos.Ui/shortcut-handler/.gitignore

@@ -0,0 +1 @@
+lib/

Neos.Ui/shortcut-handler/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "@sitegeist/archaeopteryx-shortcut-handler",
+    "license": "MIT",
+    "version": "0.0.0",
+    "main": "./lib/index.js",
+    "types": "./lib/index.d.ts",
+    "scripts": {
+        "build": "rm -rf lib && tsc -p tsconfig.build.json",
+        "watch": "tsc -w -p tsconfig.build.json"
+    },
+    "dependencies": {
+        "@neos-project/neos-ui-extensibility": "^7.0.2",
+        "@sitegeist/archaeopteryx-neos-bridge": "^0.0.0",
+        "@sitegeist/archaeopteryx-core": "^0.0.0",
+        "react": "^17.0.2"
+    },
+    "devDependencies": {
+        "typescript": "^4.2.4"
+    }
+}

Neos.Ui/shortcut-handler/src/globals.d.ts

@@ -0,0 +1,30 @@
+declare module '@neos-project/neos-ui-redux-store';
+declare class NeosEditor {
+    keystrokes: EditingKeystrokeHandler;
+    execute(command: string, ...args: any[]): void;
+    neos: {
+        editorOptions: {
+            linking?: {
+                anchor?: boolean
+                title?: boolean
+                relNofollow?: boolean
+                targetBlank?: boolean
+                startingPoint?: string
+                'Sitegeist.Archaeopteryx'?: {
+                    linkTypes?: {
+                        [key: string]: object
+                    }
+                }
+            }
+        }
+    };
+    editing: {
+        view: {
+            focus(): void;
+        }
+    }
+}
+declare class EditingKeystrokeHandler {
+    set(keystroke: string | Array<string | number>, callback: EditingKeystrokeCallback, options: object = {}): void
+}
+declare function EditingKeystrokeCallback(_: any, cancel: () => void): void

Neos.Ui/shortcut-handler/src/index.tsx

@@ -0,0 +1,120 @@
+import {INeosContextProperties} from "@sitegeist/archaeopteryx-neos-bridge";
+import {IEditor} from "@sitegeist/archaeopteryx-core";
+import {SynchronousRegistry} from "@neos-project/neos-ui-extensibility";
+import {ILinkOptions} from "@sitegeist/archaeopteryx-core/lib/domain";
+
+export const executeCommand = (editor: NeosEditor, command: string, argument: any, reFocusEditor = true) => {
+    editor.execute(command, argument);
+    if (reFocusEditor) {
+        editor.editing.view.focus();
+    }
+};
+export function registerShortcutHandler (
+    neosContextProperties: INeosContextProperties,
+    editor: IEditor
+): void {
+    const {globalRegistry, store} = neosContextProperties;
+    const ckeditor5Registry = globalRegistry.get('ckEditor5');
+    if (!ckeditor5Registry) {
+        console.warn('[Sitegeist.Archaeopteryx]: Could not find ckeditor5 registry.');
+        console.warn('[Sitegeist.Archaeopteryx]: Skipping registration of keyboard shortcut...');
+        return;
+    }
+
+    const ckeditor5Configuration = ckeditor5Registry.get<SynchronousRegistry<any>>('config')
+    if (!ckeditor5Registry) {
+        console.warn('[Sitegeist.Archaeopteryx]: Could not find ckeditor5 config registry.');
+        console.warn('[Sitegeist.Archaeopteryx]: Skipping registration of keyboard shortcut...');
+        return;
+    }
+
+    ckeditor5Configuration.set('keystrokes', (ckEditorConfiguration: { plugins: ((ckEditorInstance: NeosEditor) => void)[]; }) => {
+        ckEditorConfiguration.plugins.push((ckEditorInstance) => {
+            ckEditorInstance.keystrokes.set('Ctrl+k', async (_: any, cancel: () => void) => {
+                // Cancel keystroke event
+                cancel();
+
+                const inlineEditorOptions = ckEditorInstance.neos.editorOptions;
+                const editorOptions = {
+                    ...inlineEditorOptions?.linking?.['Sitegeist.Archaeopteryx'],
+                    linkTypes: {
+                        ...inlineEditorOptions?.linking?.['Sitegeist.Archaeopteryx']?.linkTypes
+                    }
+                };
+
+                if (inlineEditorOptions?.linking?.startingPoint) {
+                    editorOptions.linkTypes['Sitegeist.Archaeopteryx:Node'] = {
+                        ...editorOptions.linkTypes['Sitegeist.Archaeopteryx:Node'],
+                        startingPoint:
+                            (editorOptions.linkTypes['Sitegeist.Archaeopteryx:Node'] as any).startingPoint
+                            ?? inlineEditorOptions.linking.startingPoint
+                    };
+                }
+
+                const formattingUnderCursor = store.getState()?.ui?.contentCanvas?.formattingUnderCursor
+                const link = (() => {
+                    if (formattingUnderCursor?.link) {
+                        const [href, anchor] = formattingUnderCursor.link.split('#');
+                        return {
+                            href,
+                            options: {
+                                anchor,
+                                title: formattingUnderCursor.linkTitle,
+                                targetBlank: formattingUnderCursor.linkTargetBlank,
+                                relNofollow: formattingUnderCursor.linkRelNofollow
+                            }
+                        };
+                    }
+
+                    return null;
+                })();
+                const enabledLinkOptions = (() => {
+                    const enabledLinkOptions: (keyof ILinkOptions)[] = [];
+
+                    if (ckEditorInstance?.neos?.editorOptions?.linking?.anchor) {
+                        enabledLinkOptions.push('anchor');
+                    }
+
+                    if (ckEditorInstance?.neos?.editorOptions?.linking?.title) {
+                        enabledLinkOptions.push('title');
+                    }
+
+                    if (ckEditorInstance?.neos?.editorOptions?.linking?.relNofollow) {
+                        enabledLinkOptions.push('relNofollow');
+                    }
+
+                    if (ckEditorInstance?.neos?.editorOptions?.linking?.targetBlank) {
+                        enabledLinkOptions.push('targetBlank');
+                    }
+
+                    return enabledLinkOptions;
+                })();
+
+                const result = await editor.tx.editLink(link, enabledLinkOptions, editorOptions);
+
+                if (result.change) {
+                    if (result.value === null) {
+                        executeCommand(ckEditorInstance, 'linkTitle', false, false);
+                        executeCommand(ckEditorInstance, 'linkRelNofollow', false, false);
+                        executeCommand(ckEditorInstance, 'linkTargetBlank', false, false);
+                        executeCommand(ckEditorInstance, 'unlink', undefined, true);
+                    } else {
+                        executeCommand(ckEditorInstance, 'linkTitle', result.value.options?.title || false, false);
+                        executeCommand(ckEditorInstance, 'linkTargetBlank', result.value.options?.targetBlank ?? false, false);
+                        executeCommand(ckEditorInstance, 'linkRelNofollow', result.value.options?.relNofollow ?? false, false);
+
+                        if (result.value.options?.anchor) {
+                            executeCommand(ckEditorInstance, 'link', `${result.value.href}#${result.value.options?.anchor}`, true);
+                        } else {
+                            executeCommand(ckEditorInstance, 'link', result.value.href, true);
+                        }
+                    }
+                } else {
+                    executeCommand(ckEditorInstance, 'undo', undefined, true);
+                    executeCommand(ckEditorInstance, 'redo', undefined, true);
+                }
+            })
+        });
+        return ckEditorConfiguration;
+    })
+}

Neos.Ui/shortcut-handler/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "declaration": true,
+        "outDir": "./lib",
+        "module": "CommonJS"
+    },
+    "include": ["./src/**/*.*"]
+}