Format Library: add subscript and superscript (WordPress#21819)

* Format Library: add subscript and superscript * Add icons
kirilzh · Apr 27, 2020 · ef6efd7 · ef6efd7
1 parent ee58c81
commit ef6efd7
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 0 deletions.
diff --git a/packages/format-library/src/default-formats.js b/packages/format-library/src/default-formats.js
@@ -9,6 +9,8 @@ import { link } from './link';
 import { strikethrough } from './strikethrough';
 import { underline } from './underline';
 import { textColor } from './text-color';
+import { subscript } from './subscript';
+import { superscript } from './superscript';
 
 export default [
 	bold,
@@ -19,4 +21,6 @@ export default [
 	strikethrough,
 	underline,
 	textColor,
+	subscript,
+	superscript,
 ];
diff --git a/packages/format-library/src/subscript/index.js b/packages/format-library/src/subscript/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 { subscript as subscriptIcon } from '@wordpress/icons';
+
+const name = 'core/subscript';
+const title = __( 'Subscript' );
+
+export const subscript = {
+	name,
+	title,
+	tagName: 'sub',
+	className: null,
+	edit( { isActive, value, onChange, onFocus } ) {
+		function onToggle() {
+			onChange( toggleFormat( value, { type: name } ) );
+		}
+
+		function onClick() {
+			onToggle();
+			onFocus();
+		}
+
+		return (
+			<RichTextToolbarButton
+				icon={ subscriptIcon }
+				title={ title }
+				onClick={ onClick }
+				isActive={ isActive }
+			/>
+		);
+	},
+};
diff --git a/packages/format-library/src/superscript/index.js b/packages/format-library/src/superscript/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 { superscript as superscriptIcon } from '@wordpress/icons';
+
+const name = 'core/superscript';
+const title = __( 'Superscript' );
+
+export const superscript = {
+	name,
+	title,
+	tagName: 'sup',
+	className: null,
+	edit( { isActive, value, onChange, onFocus } ) {
+		function onToggle() {
+			onChange( toggleFormat( value, { type: name } ) );
+		}
+
+		function onClick() {
+			onToggle();
+			onFocus();
+		}
+
+		return (
+			<RichTextToolbarButton
+				icon={ superscriptIcon }
+				title={ title }
+				onClick={ onClick }
+				isActive={ isActive }
+			/>
+		);
+	},
+};
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
@@ -120,6 +120,8 @@ export { default as starHalf } from './library/star-half';
 export { default as stretchFullWidth } from './library/stretch-full-width';
 export { default as shipping } from './library/shipping';
 export { default as stretchWide } from './library/stretch-wide';
+export { default as subscript } from './library/subscript';
+export { default as superscript } from './library/superscript';
 export { default as tableColumnAfter } from './library/table-column-after';
 export { default as tableColumnBefore } from './library/table-column-before';
 export { default as tableColumnDelete } from './library/table-column-delete';

diff --git a/packages/icons/src/library/subscript.js b/packages/icons/src/library/subscript.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const subscript = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M16.9 18.3l.8-1.2c.4-.6.7-1.2.9-1.6.2-.4.3-.8.3-1.2 0-.3-.1-.7-.2-1-.1-.3-.4-.5-.6-.7-.3-.2-.6-.3-1-.3s-.8.1-1.1.2c-.3.1-.7.3-1 .6l.2 1.3c.3-.3.5-.5.8-.6s.6-.2.9-.2c.3 0 .5.1.7.2.2.2.2.4.2.7 0 .3-.1.5-.2.8-.1.3-.4.7-.8 1.3L15 19.4h4.3v-1.2h-2.4zM14.1 7.2h-2L9.5 11 6.9 7.2h-2l3.6 5.3L4.7 18h2l2.7-4 2.7 4h2l-3.8-5.5 3.8-5.3z" />
+	</SVG>
+);
+
+export default subscript;
diff --git a/packages/icons/src/library/superscript.js b/packages/icons/src/library/superscript.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const superscript = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M16.9 10.3l.8-1.3c.4-.6.7-1.2.9-1.6.2-.4.3-.8.3-1.2 0-.3-.1-.7-.2-1-.2-.2-.4-.4-.7-.6-.3-.2-.6-.3-1-.3s-.8.1-1.1.2c-.3.1-.7.3-1 .6l.1 1.3c.3-.3.5-.5.8-.6s.6-.2.9-.2c.3 0 .5.1.7.2.2.2.2.4.2.7 0 .3-.1.5-.2.8-.1.3-.4.7-.8 1.3l-1.8 2.8h4.3v-1.2h-2.2zm-2.8-3.1h-2L9.5 11 6.9 7.2h-2l3.6 5.3L4.7 18h2l2.7-4 2.7 4h2l-3.8-5.5 3.8-5.3z" />
+	</SVG>
+);
+
+export default superscript;