chore(ckeditor5-keyboard-marker): port source code

packages/ckeditor5-keyboard-marker/src/augmentation.ts

@@ -1,7 +1,9 @@
-import type { KeyboardMarker } from './index.js';
+import type { Kbd, KbdEditing, KbdUI } from './index.js';
 
 declare module 'ckeditor5' {
 	interface PluginsMap {
-		[ KeyboardMarker.pluginName ]: KeyboardMarker;
+		[ Kbd.pluginName ]: Kbd;
+		[ KbdUI.pluginName ]: KbdUI;
+		[ KbdEditing.pluginName ]: KbdEditing;
 	}
 }

packages/ckeditor5-keyboard-marker/src/index.ts

@@ -1,8 +1,10 @@
-import ckeditor from './../theme/icons/ckeditor.svg';
+import kbdIcon from '../theme/icons/kbd.svg';
 import './augmentation.js';
 
-export { default as KeyboardMarker } from './keyboardmarker.js';
+export { default as Kbd } from './kbd.js';
+export { default as KbdEditing } from "./kbdediting.js";
+export { default as KbdUI } from "./kbdui.js";
 
 export const icons = {
-	ckeditor
+	kbdIcon
 };

packages/ckeditor5-keyboard-marker/src/kbd.ts

@@ -0,0 +1,22 @@
+import { Plugin } from 'ckeditor5';
+import KbdEditing from './kbdediting.js';
+import KbdUI from './kbdui.js';
+
+/**
+ * The keyboard shortcut feature.
+ *
+ * Provides a way to semantically mark keyboard shortcuts/hotkeys in the content.
+ *
+ * This is a "glue" plugin which loads the `KbdEditing` and `KbdUI` plugins.
+ */
+export default class Kbd extends Plugin {
+
+	static get requires() {
+		return [ KbdEditing, KbdUI ];
+	}
+
+	public static get pluginName() {
+		return 'Kbd' as const;
+	}
+
+}

packages/ckeditor5-keyboard-marker/src/kbdediting.ts

@@ -0,0 +1,38 @@
+import { AttributeCommand, Plugin } from "ckeditor5";
+
+const KBD = 'kbd';
+
+/**
+ * The keyboard shortcut (`kbd`) editing feature.
+ *
+ * It registers the `'kbd'` command, associated keystroke and introduces the
+ * `kbd` attribute in the model which renders to the view as a `<kbd>` element.
+ */
+export default class KbdEditing extends Plugin {
+
+	public static get pluginName() {
+		return 'KbdEditing' as const;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		// Allow kbd attribute on text nodes.
+		editor.model.schema.extend( '$text', { allowAttributes: KBD } );
+		editor.model.schema.setAttributeProperties( KBD, {
+			isFormatting: true,
+			copyOnEnter: true
+		} );
+
+		editor.conversion.attributeToElement( {
+			model: KBD,
+			view: KBD
+		} );
+
+		editor.commands.add( KBD, new AttributeCommand( editor, KBD ) );
+		editor.keystrokes.set( 'CTRL+ALT+K', KBD );
+	}
+}

packages/ckeditor5-keyboard-marker/src/kbdui.ts

@@ -0,0 +1,45 @@
+import { AttributeCommand, ButtonView, Plugin } from 'ckeditor5';
+import kbdIcon from '../theme/icons/kbd.svg';
+
+const KBD = 'kbd';
+
+/**
+ * The keyboard shortcut UI feature. It brings a proper button.
+ */
+export default class KbdUI extends Plugin {
+
+	public static get pluginName() {
+		return 'KbdUI' as const;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		editor.ui.componentFactory.add( KBD, locale => {
+			const command = editor.commands.get( KBD ) as AttributeCommand;
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Keyboard shortcut' ),
+				icon: kbdIcon,
+				keystroke: 'CTRL+ALT+K',
+				tooltip: true,
+				isToggleable: true
+			} );
+
+			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+
+			// Execute command.
+			this.listenTo( view, 'execute', () => {
+				editor.execute( KBD );
+				editor.editing.view.focus();
+			} );
+
+			return view;
+		} );
+	}
+}

packages/ckeditor5-keyboard-marker/src/keyboardmarker.ts

@@ -1,39 +0,0 @@
-import { Plugin, ButtonView } from 'ckeditor5';
-
-import ckeditor5Icon from '../theme/icons/ckeditor.svg';
-
-export default class KeyboardMarker extends Plugin {
-	public static get pluginName() {
-		return 'KeyboardMarker' as const;
-	}
-
-	public init(): void {
-		const editor = this.editor;
-		const t = editor.t;
-		const model = editor.model;
-
-		// Register the "keyboardMarker" button, so it can be displayed in the toolbar.
-		editor.ui.componentFactory.add( 'keyboardMarker', locale => {
-			const view = new ButtonView( locale );
-
-			view.set( {
-				label: t( 'Keyboard marker' ),
-				icon: ckeditor5Icon,
-				tooltip: true
-			} );
-
-			// Insert a text into the editor after clicking the button.
-			this.listenTo( view, 'execute', () => {
-				model.change( writer => {
-					const textNode = writer.createText( 'Hello CKEditor 5!' );
-
-					model.insertContent( textNode );
-				} );
-
-				editor.editing.view.focus();
-			} );
-
-			return view;
-		} );
-	}
-}