{ isSelected && ! inlineToolbar && (
- { formatToolbar }
+
) }
{ isSelected && inlineToolbar && (
- { formatToolbar }
+
) }
{ isSelected &&
@@ -921,6 +912,7 @@ export class RichText extends Component {
}
{ isSelected &&
}
+ { isSelected &&
}
) }
@@ -930,7 +922,7 @@ export class RichText extends Component {
}
RichText.defaultProps = {
- formattingControls: FORMATTING_CONTROLS.map( ( { format } ) => format ),
+ formattingControls: [ 'bold', 'italic', 'link', 'strikethrough' ],
format: 'rich-text',
};
diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js
index 617f5f0ea04b34..6caee12d50a18d 100644
--- a/packages/editor/src/components/rich-text/index.native.js
+++ b/packages/editor/src/components/rich-text/index.native.js
@@ -15,11 +15,34 @@ import { Component, RawHTML } from '@wordpress/element';
import { withInstanceId, compose } from '@wordpress/compose';
import { toHTMLString } from '@wordpress/rich-text';
import { Toolbar } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
-import { FORMATTING_CONTROLS } from './formatting-controls';
+
+const FORMATTING_CONTROLS = [
+ {
+ icon: 'editor-bold',
+ title: __( 'Bold' ),
+ format: 'bold',
+ },
+ {
+ icon: 'editor-italic',
+ title: __( 'Italic' ),
+ format: 'italic',
+ },
+ {
+ icon: 'admin-links',
+ title: __( 'Link' ),
+ format: 'link',
+ },
+ {
+ icon: 'editor-strikethrough',
+ title: __( 'Strikethrough' ),
+ format: 'strikethrough',
+ },
+];
const isRichTextValueEmpty = ( value ) => {
return ! value || ! value.length;
diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
index f6e6b8e586e66a..218cc3c417e8bd 100644
--- a/packages/editor/src/style.scss
+++ b/packages/editor/src/style.scss
@@ -36,6 +36,7 @@
@import "./components/post-title/style.scss";
@import "./components/post-trash/style.scss";
@import "./components/rich-text/core-tokens/image/style.scss";
+@import "./components/rich-text/format-controls/link/style.scss";
@import "./components/rich-text/format-toolbar/style.scss";
@import "./components/rich-text/style.scss";
@import "./components/rich-text/tokens/ui/style.scss";
diff --git a/packages/rich-text-value/src/toggle-format.js b/packages/rich-text-value/src/toggle-format.js
new file mode 100644
index 00000000000000..21278a8ccdaf6f
--- /dev/null
+++ b/packages/rich-text-value/src/toggle-format.js
@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+
+import { getActiveFormat } from './get-active-format';
+import { removeFormat } from './remove-format';
+import { applyFormat } from './apply-format';
+
+/**
+ * Toggle a format object to a Rich Text value at the current selection.
+ *
+ * @param {Object} value Value to modify.
+ * @param {Object} format Format to apply or remove.
+ *
+ * @return {Object} A new value with the format applied or removed.
+ */
+export function toggleFormat(
+ value,
+ format
+) {
+ if ( getActiveFormat( value, format.type ) ) {
+ return removeFormat( value, format.type );
+ }
+
+ return applyFormat( value, format );
+}
diff --git a/packages/rich-text/src/index.js b/packages/rich-text/src/index.js
index 61f149cc047677..a6ff05ad1cc251 100644
--- a/packages/rich-text/src/index.js
+++ b/packages/rich-text/src/index.js
@@ -14,3 +14,4 @@ export { slice } from './slice';
export { split } from './split';
export { apply, toDom as unstableToDom } from './to-dom';
export { toHTMLString } from './to-html-string';
+export { toggleFormat } from './toggle-format';
diff --git a/packages/rich-text/src/toggle-format.js b/packages/rich-text/src/toggle-format.js
new file mode 100644
index 00000000000000..21278a8ccdaf6f
--- /dev/null
+++ b/packages/rich-text/src/toggle-format.js
@@ -0,0 +1,26 @@
+/**
+ * Internal dependencies
+ */
+
+import { getActiveFormat } from './get-active-format';
+import { removeFormat } from './remove-format';
+import { applyFormat } from './apply-format';
+
+/**
+ * Toggle a format object to a Rich Text value at the current selection.
+ *
+ * @param {Object} value Value to modify.
+ * @param {Object} format Format to apply or remove.
+ *
+ * @return {Object} A new value with the format applied or removed.
+ */
+export function toggleFormat(
+ value,
+ format
+) {
+ if ( getActiveFormat( value, format.type ) ) {
+ return removeFormat( value, format.type );
+ }
+
+ return applyFormat( value, format );
+}