From fdea855f3155b1a13da7a206c4cbdc0ec9608bd5 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Tue, 15 Jan 2019 15:21:33 +0000
Subject: [PATCH] Underline text when cmd + u is pressed (#13117)

---
 packages/format-library/src/index.js          |  2 +
 .../format-library/src/underline/index.js     | 40 +++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 packages/format-library/src/underline/index.js

diff --git a/packages/format-library/src/index.js b/packages/format-library/src/index.js
index 387c2666f7e0e..05adec8abf40a 100644
--- a/packages/format-library/src/index.js
+++ b/packages/format-library/src/index.js
@@ -7,6 +7,7 @@ import { image } from './image';
 import { italic } from './italic';
 import { link } from './link';
 import { strikethrough } from './strikethrough';
+import { underline } from './underline';
 
 /**
  * WordPress dependencies
@@ -22,4 +23,5 @@ import {
 	italic,
 	link,
 	strikethrough,
+	underline,
 ].forEach( ( { name, ...settings } ) => registerFormatType( name, settings ) );
diff --git a/packages/format-library/src/underline/index.js b/packages/format-library/src/underline/index.js
new file mode 100644
index 0000000000000..3aee9cf943877
--- /dev/null
+++ b/packages/format-library/src/underline/index.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+import { toggleFormat } from '@wordpress/rich-text';
+import { RichTextShortcut } from '@wordpress/editor';
+
+const name = 'core/underline';
+
+export const underline = {
+	name,
+	title: __( 'Underline' ),
+	tagName: 'span',
+	className: null,
+	attributes: {
+		style: 'style',
+	},
+	edit( { value, onChange } ) {
+		const onToggle = () => {
+			onChange(
+				toggleFormat( value, {
+					type: name,
+					attributes: {
+						style: 'text-decoration: underline;',
+					},
+				} ) );
+		};
+
+		return (
+			<Fragment>
+				<RichTextShortcut
+					type="primary"
+					character="u"
+					onUse={ onToggle }
+				/>
+			</Fragment>
+		);
+	},
+};