Initial implementation of the plugin.

icons/kbd.svg

@@ -0,0 +1,4 @@
+<!-- Came from IceMoon's free package (https://icomoon.io/#preview-free) licensed under CC BY 4.0 -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 32">
+<path d="M34 4h-32c-1.1 0-2 0.9-2 2v20c0 1.1 0.9 2 2 2h32c1.1 0 2-0.9 2-2v-20c0-1.1-0.9-2-2-2zM20 8h4v4h-4v-4zM26 14v4h-4v-4h4zM14 8h4v4h-4v-4zM20 14v4h-4v-4h4zM8 8h4v4h-4v-4zM14 14v4h-4v-4h4zM4 8h2v4h-2v-4zM4 14h4v4h-4v-4zM6 24h-2v-4h2v4zM24 24h-16v-4h16v4zM32 24h-6v-4h6v4zM32 18h-4v-4h4v4zM32 12h-6v-4h6v4z"></path>
+</svg>

src/Kbd.js

@@ -0,0 +1,29 @@
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import KbdEditing from './KbdEditing';
+import KbdUI from './KbdUI';
+
+/**
+ * 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.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class Kbd extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ KbdEditing, KbdUI ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'Kbd';
+	}
+}

src/KbdEditing.js

@@ -0,0 +1,44 @@
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import AttributeCommand from '@ckeditor/ckeditor5-basic-styles/src/attributecommand';
+
+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.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class KbdEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'KbdEditing';
+	}
+
+	/**
+	 * @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( 'ALT+SHIFT+K', KBD );
+	}
+}

src/KbdUI.js

@@ -0,0 +1,45 @@
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+
+import kbdIcon from '../icons/kbd.svg';
+
+const KBD = 'kbd';
+
+/**
+ * The keyboard shortcut UI feature. It brings a proper button.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class KbdUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		editor.ui.componentFactory.add( KBD, locale => {
+			const command = editor.commands.get( KBD );
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'Keyboard shortcut' ),
+				icon: kbdIcon,
+				keystroke: 'ALT+SHIFT+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;
+		} );
+	}
+}