From db8d50ccb7cc6c7e1647e976d86d45956702b3d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Sat, 7 Nov 2020 13:44:06 +0200
Subject: [PATCH] Format library: add Keyboard Input (<kbd>)

---
 .../format-library/src/default-formats.js     |  2 ++
 packages/format-library/src/keyboard/index.js | 36 +++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 packages/format-library/src/keyboard/index.js

diff --git a/packages/format-library/src/default-formats.js b/packages/format-library/src/default-formats.js
index dfc931ec41e606..412ae23f4b686d 100644
--- a/packages/format-library/src/default-formats.js
+++ b/packages/format-library/src/default-formats.js
@@ -11,6 +11,7 @@ import { underline } from './underline';
 import { textColor } from './text-color';
 import { subscript } from './subscript';
 import { superscript } from './superscript';
+import { keyboard } from './keyboard';
 
 export default [
 	bold,
@@ -23,4 +24,5 @@ export default [
 	textColor,
 	subscript,
 	superscript,
+	keyboard,
 ];
diff --git a/packages/format-library/src/keyboard/index.js b/packages/format-library/src/keyboard/index.js
new file mode 100644
index 00000000000000..45bd784a7954c4
--- /dev/null
+++ b/packages/format-library/src/keyboard/index.js
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { toggleFormat } from '@wordpress/rich-text';
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { button } from '@wordpress/icons';
+
+const name = 'core/keyboard';
+const title = __( 'Keyboard Input' );
+
+export const keyboard = {
+	name,
+	title,
+	tagName: 'kbd',
+	className: null,
+	edit( { isActive, value, onChange, onFocus } ) {
+		function onToggle() {
+			onChange( toggleFormat( value, { type: name } ) );
+		}
+
+		function onClick() {
+			onToggle();
+			onFocus();
+		}
+
+		return (
+			<RichTextToolbarButton
+				icon={ button }
+				title={ title }
+				onClick={ onClick }
+				isActive={ isActive }
+			/>
+		);
+	},
+};