FEATURE: Add Ctrl+k keyboard shortcut handler

sitegeist · Jul 24, 2024 · 3bcf37f · 3bcf37f
1 parent a1f2e50
commit 3bcf37f
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 1 deletion.
diff --git a/Neos.Ui/neos-bridge/src/domain/Extensibility/Store.ts b/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;

diff --git a/Neos.Ui/plugin/src/manifest.js b/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);
 });
diff --git a/Neos.Ui/shortcut-handler/.gitignore b/Neos.Ui/shortcut-handler/.gitignore
@@ -0,0 +1 @@
+lib/
diff --git a/Neos.Ui/shortcut-handler/package.json b/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"
+    }
+}
diff --git a/Neos.Ui/shortcut-handler/src/globals.d.ts b/Neos.Ui/shortcut-handler/src/globals.d.ts
@@ -0,0 +1,19 @@
+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
+            }
+        }
+    };
+}
+declare class EditingKeystrokeHandler {
+    set(keystroke: string | Array<string | number>, callback: EditingKeystrokeCallback, options: object = {}): void
+}
+declare function EditingKeystrokeCallback(_: any, cancel: () => void): void
diff --git a/Neos.Ui/shortcut-handler/src/index.tsx b/Neos.Ui/shortcut-handler/src/index.tsx
@@ -0,0 +1,99 @@
+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 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 formattingUnderCursor = selectors.UI.ContentCanvas.formattingUnderCursor(store.getState());
+                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, ckEditorInstance.neos.editorOptions);
+
+                console.log(editor, ckEditorInstance, result);
+                if (result.change) {
+                    if (result.value === null) {
+                        ckEditorInstance.execute('linkTitle', false, false);
+                        ckEditorInstance.execute('linkRelNofollow', false, false);
+                        ckEditorInstance.execute('linkTargetBlank', false, false);
+                        ckEditorInstance.execute('unlink', undefined, true);
+                    } else {
+                        ckEditorInstance.execute('linkTitle', result.value.options?.title || false, false);
+                        ckEditorInstance.execute('linkTargetBlank', result.value.options?.targetBlank ?? false, false);
+                        ckEditorInstance.execute('linkRelNofollow', result.value.options?.relNofollow ?? false, false);
+
+                        if (result.value.options?.anchor) {
+                            ckEditorInstance.execute('link', `${result.value.href}#${result.value.options?.anchor}`, true);
+                        } else {
+                            ckEditorInstance.execute('link', result.value.href, true);
+                        }
+                    }
+                } else {
+                    ckEditorInstance.execute('undo', undefined, true);
+                    ckEditorInstance.execute('redo', undefined, true);
+                }
+            })
+        });
+        return ckEditorConfiguration;
+    })
+}
diff --git a/Neos.Ui/shortcut-handler/tsconfig.build.json b/Neos.Ui/shortcut-handler/tsconfig.build.json
@@ -0,0 +1,9 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "declaration": true,
+        "outDir": "./lib",
+        "module": "CommonJS"
+    },
+    "include": ["./src/**/*.*"]
+}
diff --git a/Resources/Public/JavaScript/Plugin.js b/Resources/Public/JavaScript/Plugin.js