From c66b149093fee30c735c31fc95e3e8a083cd2b1e Mon Sep 17 00:00:00 2001
From: Marek Lewandowski <m.lewandowski@cksource.com>
Date: Thu, 9 Apr 2020 23:40:58 +0200
Subject: [PATCH] Initial implementation of the plugin.

---
 icons/kbd.svg     |  4 ++++
 src/Kbd.js        | 29 +++++++++++++++++++++++++++++
 src/KbdEditing.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
 src/KbdUI.js      | 45 +++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 122 insertions(+)
 create mode 100644 icons/kbd.svg
 create mode 100644 src/Kbd.js
 create mode 100644 src/KbdEditing.js
 create mode 100644 src/KbdUI.js

diff --git a/icons/kbd.svg b/icons/kbd.svg
new file mode 100644
index 000000000..722031cf9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/Kbd.js b/src/Kbd.js
new file mode 100644
index 000000000..d0a0a1f4b
--- /dev/null
+++ b/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';
+	}
+}
diff --git a/src/KbdEditing.js b/src/KbdEditing.js
new file mode 100644
index 000000000..f4e8fd83e
--- /dev/null
+++ b/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 );
+	}
+}
diff --git a/src/KbdUI.js b/src/KbdUI.js
new file mode 100644
index 000000000..be6e55bf8
--- /dev/null
+++ b/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;
+		} );
+	}
+}