@wordpress/format-library 3.0.19 → 3.1.0

package/build-module/text-color/index.native.js

@@ -0,0 +1,173 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+import { View } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo, useState } from '@wordpress/element';
+import { BlockControls, useSetting } from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { Icon, textColor as textColorIcon } from '@wordpress/icons';
+import { removeFormat } from '@wordpress/rich-text';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+
+import { getActiveColors } from './inline.js';
+import { transparentValue } from './index.js';
+import { default as InlineColorUI } from './inline';
+import styles from './style.scss';
+const name = 'core/text-color';
+
+const title = __('Text color');
+
+const EMPTY_ARRAY = [];
+
+function getComputedStyleProperty(element, property) {
+  const {
+    props: {
+      style = {}
+    }
+  } = element;
+
+  if (property === 'background-color') {
+    var _baseColors$color;
+
+    const {
+      backgroundColor,
+      baseColors
+    } = style;
+
+    if (backgroundColor !== 'transparent') {
+      return backgroundColor;
+    } else if (baseColors && baseColors !== null && baseColors !== void 0 && (_baseColors$color = baseColors.color) !== null && _baseColors$color !== void 0 && _baseColors$color.background) {
+      var _baseColors$color2;
+
+      return baseColors === null || baseColors === void 0 ? void 0 : (_baseColors$color2 = baseColors.color) === null || _baseColors$color2 === void 0 ? void 0 : _baseColors$color2.background;
+    }
+
+    return 'transparent';
+  }
+}
+
+function fillComputedColors(element, _ref) {
+  let {
+    color,
+    backgroundColor
+  } = _ref;
+
+  if (!color && !backgroundColor) {
+    return;
+  }
+
+  return {
+    color: color || getComputedStyleProperty(element, 'color'),
+    backgroundColor: getComputedStyleProperty(element, 'background-color')
+  };
+}
+
+function TextColorEdit(_ref2) {
+  let {
+    value,
+    onChange,
+    isActive,
+    activeAttributes,
+    contentRef
+  } = _ref2;
+  const allowCustomControl = useSetting('color.custom');
+  const colors = useSetting('color.palette') || EMPTY_ARRAY;
+  const [isAddingColor, setIsAddingColor] = useState(false);
+  const enableIsAddingColor = useCallback(() => setIsAddingColor(true), [setIsAddingColor]);
+  const disableIsAddingColor = useCallback(() => setIsAddingColor(false), [setIsAddingColor]);
+  const colorIndicatorStyle = useMemo(() => fillComputedColors(contentRef, getActiveColors(value, name, colors)), [value, colors]);
+  const hasColorsToChoose = !isEmpty(colors) || !allowCustomControl;
+  const onPressButton = useCallback(() => {
+    if (hasColorsToChoose) {
+      enableIsAddingColor();
+    } else {
+      onChange(removeFormat(value, name));
+    }
+  }, [hasColorsToChoose, value]);
+  const outlineStyle = usePreferredColorSchemeStyle(styles['components-inline-color__outline'], styles['components-inline-color__outline--dark']);
+
+  if (!hasColorsToChoose && !isActive) {
+    return null;
+  }
+
+  const isActiveStyle = { ...colorIndicatorStyle,
+    ...(!(colorIndicatorStyle !== null && colorIndicatorStyle !== void 0 && colorIndicatorStyle.backgroundColor) ? {
+      backgroundColor: 'transparent'
+    } : {}),
+    ...styles['components-inline-color--is-active']
+  };
+  const customContainerStyles = styles['components-inline-color__button-container'];
+  return createElement(Fragment, null, createElement(BlockControls, null, createElement(ToolbarGroup, null, isActive && createElement(View, {
+    style: outlineStyle,
+    pointerEvents: "none"
+  }), createElement(ToolbarButton, {
+    name: "text-color",
+    isActive: isActive,
+    icon: createElement(Icon, {
+      icon: textColorIcon,
+      style: (colorIndicatorStyle === null || colorIndicatorStyle === void 0 ? void 0 : colorIndicatorStyle.color) && {
+        color: colorIndicatorStyle.color
+      }
+    }),
+    title: title,
+    extraProps: {
+      isActiveStyle,
+      customContainerStyles
+    } // If has no colors to choose but a color is active remove the color onClick
+    ,
+    onClick: onPressButton
+  }))), isAddingColor && createElement(InlineColorUI, {
+    name: name,
+    onClose: disableIsAddingColor,
+    activeAttributes: activeAttributes,
+    value: value,
+    onChange: onChange,
+    contentRef: contentRef
+  }));
+}
+
+export const textColor = {
+  name,
+  title,
+  tagName: 'mark',
+  className: 'has-inline-color',
+  attributes: {
+    style: 'style',
+    class: 'class'
+  },
+
+  /*
+   * Since this format relies on the <mark> tag, it's important to
+   * prevent the default yellow background color applied by most
+   * browsers. The solution is to detect when this format is used with a
+   * text color but no background color, and in such cases to override
+   * the default styling with a transparent background.
+   *
+   * @see https://github.com/WordPress/gutenberg/pull/35516
+   */
+  __unstableFilterAttributeValue(key, value) {
+    if (key !== 'style') return value; // We need to remove the extra spaces within the styles on mobile
+
+    const newValue = value.replace(/ /g, ''); // We should not add a background-color if it's already set
+
+    if (newValue && newValue.includes('background-color')) return newValue;
+    const addedCSS = ['background-color', transparentValue].join(':'); // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
+    // rules will already include a `;`.
+
+    return newValue ? [addedCSS, newValue].join(';') : addedCSS;
+  },
+
+  edit: TextColorEdit
+};
+//# sourceMappingURL=index.native.js.map

package/build-module/text-color/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/format-library/src/text-color/index.native.js"],"names":["isEmpty","View","__","useCallback","useMemo","useState","BlockControls","useSetting","ToolbarGroup","ToolbarButton","Icon","textColor","textColorIcon","removeFormat","usePreferredColorSchemeStyle","getActiveColors","transparentValue","default","InlineColorUI","styles","name","title","EMPTY_ARRAY","getComputedStyleProperty","element","property","props","style","backgroundColor","baseColors","color","background","fillComputedColors","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","enableIsAddingColor","disableIsAddingColor","colorIndicatorStyle","hasColorsToChoose","onPressButton","outlineStyle","isActiveStyle","customContainerStyles","tagName","className","attributes","class","__unstableFilterAttributeValue","key","newValue","replace","includes","addedCSS","join","edit"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { BlockControls, useSetting } from '@wordpress/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress/components';\nimport { Icon, textColor as textColorIcon } from '@wordpress/icons';\nimport { removeFormat } from '@wordpress/rich-text';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getActiveColors } from './inline.js';\nimport { transparentValue } from './index.js';\nimport { default as InlineColorUI } from './inline';\nimport styles from './style.scss';\n\nconst name = 'core/text-color';\nconst title = __( 'Text color' );\n\nconst EMPTY_ARRAY = [];\n\nfunction getComputedStyleProperty( element, property ) {\n\tconst {\n\t\tprops: { style = {} },\n\t} = element;\n\n\tif ( property === 'background-color' ) {\n\t\tconst { backgroundColor, baseColors } = style;\n\n\t\tif ( backgroundColor !== 'transparent' ) {\n\t\t\treturn backgroundColor;\n\t\t} else if ( baseColors && baseColors?.color?.background ) {\n\t\t\treturn baseColors?.color?.background;\n\t\t}\n\n\t\treturn 'transparent';\n\t}\n}\n\nfunction fillComputedColors( element, { color, backgroundColor } ) {\n\tif ( ! color && ! backgroundColor ) {\n\t\treturn;\n\t}\n\n\treturn {\n\t\tcolor: color || getComputedStyleProperty( element, 'color' ),\n\t\tbackgroundColor: getComputedStyleProperty(\n\t\t\telement,\n\t\t\t'background-color'\n\t\t),\n\t};\n}\n\nfunction TextColorEdit( {\n\tvalue,\n\tonChange,\n\tisActive,\n\tactiveAttributes,\n\tcontentRef,\n} ) {\n\tconst allowCustomControl = useSetting( 'color.custom' );\n\tconst colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [\n\t\tsetIsAddingColor,\n\t] );\n\tconst disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [\n\t\tsetIsAddingColor,\n\t] );\n\tconst colorIndicatorStyle = useMemo(\n\t\t() =>\n\t\t\tfillComputedColors(\n\t\t\t\tcontentRef,\n\t\t\t\tgetActiveColors( value, name, colors )\n\t\t\t),\n\t\t[ value, colors ]\n\t);\n\n\tconst hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;\n\n\tconst onPressButton = useCallback( () => {\n\t\tif ( hasColorsToChoose ) {\n\t\t\tenableIsAddingColor();\n\t\t} else {\n\t\t\tonChange( removeFormat( value, name ) );\n\t\t}\n\t}, [ hasColorsToChoose, value ] );\n\n\tconst outlineStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'components-inline-color__outline' ],\n\t\tstyles[ 'components-inline-color__outline--dark' ]\n\t);\n\n\tif ( ! hasColorsToChoose && ! isActive ) {\n\t\treturn null;\n\t}\n\n\tconst isActiveStyle = {\n\t\t...colorIndicatorStyle,\n\t\t...( ! colorIndicatorStyle?.backgroundColor\n\t\t\t? { backgroundColor: 'transparent' }\n\t\t\t: {} ),\n\t\t...styles[ 'components-inline-color--is-active' ],\n\t};\n\n\tconst customContainerStyles =\n\t\tstyles[ 'components-inline-color__button-container' ];\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t{ isActive && (\n\t\t\t\t\t\t<View style={ outlineStyle } pointerEvents=\"none\" />\n\t\t\t\t\t) }\n\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tname=\"text-color\"\n\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={ textColorIcon }\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tcolorIndicatorStyle?.color && {\n\t\t\t\t\t\t\t\t\t\tcolor: colorIndicatorStyle.color,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\textraProps={ {\n\t\t\t\t\t\t\tisActiveStyle,\n\t\t\t\t\t\t\tcustomContainerStyles,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t// If has no colors to choose but a color is active remove the color onClick\n\t\t\t\t\t\tonClick={ onPressButton }\n\t\t\t\t\t/>\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\t\t\t{ isAddingColor && (\n\t\t\t\t<InlineColorUI\n\t\t\t\t\tname={ name }\n\t\t\t\t\tonClose={ disableIsAddingColor }\n\t\t\t\t\tactiveAttributes={ activeAttributes }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport const textColor = {\n\tname,\n\ttitle,\n\ttagName: 'mark',\n\tclassName: 'has-inline-color',\n\tattributes: {\n\t\tstyle: 'style',\n\t\tclass: 'class',\n\t},\n\t/*\n\t * Since this format relies on the <mark> tag, it's important to\n\t * prevent the default yellow background color applied by most\n\t * browsers. The solution is to detect when this format is used with a\n\t * text color but no background color, and in such cases to override\n\t * the default styling with a transparent background.\n\t *\n\t * @see https://github.com/WordPress/gutenberg/pull/35516\n\t */\n\t__unstableFilterAttributeValue( key, value ) {\n\t\tif ( key !== 'style' ) return value;\n\t\t// We need to remove the extra spaces within the styles on mobile\n\t\tconst newValue = value.replace( / /g, '' );\n\t\t// We should not add a background-color if it's already set\n\t\tif ( newValue && newValue.includes( 'background-color' ) )\n\t\t\treturn newValue;\n\t\tconst addedCSS = [ 'background-color', transparentValue ].join( ':' );\n\t\t// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS\n\t\t// rules will already include a `;`.\n\t\treturn newValue ? [ addedCSS, newValue ].join( ';' ) : addedCSS;\n\t},\n\tedit: TextColorEdit,\n};\n"]}

package/build-module/text-color/inline.js

@@ -33,7 +33,7 @@ function parseCSS() {
   }, {});
 }
 
-function parseClassName() {
+export function parseClassName() {
   let className = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   let colorSettings = arguments.length > 1 ? arguments[1] : undefined;
   return className.split(' ').reduce((accumulator, name) => {
@@ -47,7 +47,6 @@ function parseClassName() {
     return accumulator;
   }, {});
 }
-
 export function getActiveColors(value, name, colorSettings) {
   const activeColorFormat = getActiveFormat(value, name);
 

package/build-module/text-color/inline.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/text-color/inline.js"],"names":["get","useCallback","useMemo","useSelect","applyFormat","removeFormat","getActiveFormat","useAnchorRef","ColorPalette","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","store","blockEditorStore","useCachedTruthy","Popover","TabPanel","__","textColor","settings","transparentValue","parseCSS","css","split","reduce","accumulator","rule","property","value","color","backgroundColor","parseClassName","className","colorSettings","name","startsWith","endsWith","colorSlug","replace","colorObject","getActiveColors","activeColorFormat","attributes","style","class","setColors","colors","styles","classNames","push","join","slug","length","type","ColorPicker","onChange","select","getSettings","onColorChange","activeColors","InlineColorUI","onClose","contentRef","anchorRef","ref","title","tab"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n\tuseAnchorRef,\n} from '@wordpress/rich-text';\nimport {\n\tColorPalette,\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tstore as blockEditorStore,\n\tuseCachedTruthy,\n} from '@wordpress/block-editor';\nimport { Popover, TabPanel } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { textColor as settings, transparentValue } from './index';\n\nfunction parseCSS( css = '' ) {\n\treturn css.split( ';' ).reduce( ( accumulator, rule ) => {\n\t\tif ( rule ) {\n\t\t\tconst [ property, value ] = rule.split( ':' );\n\t\t\tif ( property === 'color' ) accumulator.color = value;\n\t\t\tif ( property === 'background-color' && value !== transparentValue )\n\t\t\t\taccumulator.backgroundColor = value;\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nfunction parseClassName( className = '', colorSettings ) {\n\treturn className.split( ' ' ).reduce( ( accumulator, name ) => {\n\t\t// `colorSlug` could contain dashes, so simply match the start and end.\n\t\tif ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) {\n\t\t\tconst colorSlug = name\n\t\t\t\t.replace( /^has-/, '' )\n\t\t\t\t.replace( /-color$/, '' );\n\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\tcolorSettings,\n\t\t\t\tcolorSlug\n\t\t\t);\n\t\t\taccumulator.color = colorObject.color;\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nexport function getActiveColors( value, name, colorSettings ) {\n\tconst activeColorFormat = getActiveFormat( value, name );\n\n\tif ( ! activeColorFormat ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\t...parseCSS( activeColorFormat.attributes.style ),\n\t\t...parseClassName( activeColorFormat.attributes.class, colorSettings ),\n\t};\n}\n\nfunction setColors( value, name, colorSettings, colors ) {\n\tconst { color, backgroundColor } = {\n\t\t...getActiveColors( value, name, colorSettings ),\n\t\t...colors,\n\t};\n\n\tif ( ! color && ! backgroundColor ) {\n\t\treturn removeFormat( value, name );\n\t}\n\n\tconst styles = [];\n\tconst classNames = [];\n\tconst attributes = {};\n\n\tif ( backgroundColor ) {\n\t\tstyles.push( [ 'background-color', backgroundColor ].join( ':' ) );\n\t} else {\n\t\t// Override default browser color for mark element.\n\t\tstyles.push( [ 'background-color', transparentValue ].join( ':' ) );\n\t}\n\n\tif ( color ) {\n\t\tconst colorObject = getColorObjectByColorValue( colorSettings, color );\n\n\t\tif ( colorObject ) {\n\t\t\tclassNames.push( getColorClassName( 'color', colorObject.slug ) );\n\t\t} else {\n\t\t\tstyles.push( [ 'color', color ].join( ':' ) );\n\t\t}\n\t}\n\n\tif ( styles.length ) attributes.style = styles.join( ';' );\n\tif ( classNames.length ) attributes.class = classNames.join( ' ' );\n\n\treturn applyFormat( value, { type: name, attributes } );\n}\n\nfunction ColorPicker( { name, property, value, onChange } ) {\n\tconst colors = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn get( getSettings(), [ 'colors' ], [] );\n\t}, [] );\n\tconst onColorChange = useCallback(\n\t\t( color ) => {\n\t\t\tonChange(\n\t\t\t\tsetColors( value, name, colors, { [ property ]: color } )\n\t\t\t);\n\t\t},\n\t\t[ colors, onChange, property ]\n\t);\n\tconst activeColors = useMemo(\n\t\t() => getActiveColors( value, name, colors ),\n\t\t[ name, value, colors ]\n\t);\n\n\treturn (\n\t\t<ColorPalette\n\t\t\tvalue={ activeColors[ property ] }\n\t\t\tonChange={ onColorChange }\n\t\t/>\n\t);\n}\n\nexport default function InlineColorUI( {\n\tname,\n\tvalue,\n\tonChange,\n\tonClose,\n\tcontentRef,\n} ) {\n\t/* \n\t As you change the text color by typing a HEX value into a field,\n\t the return value of document.getSelection jumps to the field you're editing,\n\t not the highlighted text. Given that useAnchorRef uses document.getSelection,\n\t it will return null, since it can't find the <mark> element within the HEX input.\n\t This caches the last truthy value of the selection anchor reference.\n\t */\n\tconst anchorRef = useCachedTruthy(\n\t\tuseAnchorRef( { ref: contentRef, value, settings } )\n\t);\n\n\treturn (\n\t\t<Popover\n\t\t\tonClose={ onClose }\n\t\t\tclassName=\"components-inline-color-popover\"\n\t\t\tanchorRef={ anchorRef }\n\t\t>\n\t\t\t<TabPanel\n\t\t\t\ttabs={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'color',\n\t\t\t\t\t\ttitle: __( 'Text' ),\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'backgroundColor',\n\t\t\t\t\t\ttitle: __( 'Background' ),\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\tproperty={ tab.name }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</TabPanel>\n\t\t</Popover>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/text-color/inline.js"],"names":["get","useCallback","useMemo","useSelect","applyFormat","removeFormat","getActiveFormat","useAnchorRef","ColorPalette","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","store","blockEditorStore","useCachedTruthy","Popover","TabPanel","__","textColor","settings","transparentValue","parseCSS","css","split","reduce","accumulator","rule","property","value","color","backgroundColor","parseClassName","className","colorSettings","name","startsWith","endsWith","colorSlug","replace","colorObject","getActiveColors","activeColorFormat","attributes","style","class","setColors","colors","styles","classNames","push","join","slug","length","type","ColorPicker","onChange","select","getSettings","onColorChange","activeColors","InlineColorUI","onClose","contentRef","anchorRef","ref","title","tab"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n\tuseAnchorRef,\n} from '@wordpress/rich-text';\nimport {\n\tColorPalette,\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tstore as blockEditorStore,\n\tuseCachedTruthy,\n} from '@wordpress/block-editor';\nimport { Popover, TabPanel } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { textColor as settings, transparentValue } from './index';\n\nfunction parseCSS( css = '' ) {\n\treturn css.split( ';' ).reduce( ( accumulator, rule ) => {\n\t\tif ( rule ) {\n\t\t\tconst [ property, value ] = rule.split( ':' );\n\t\t\tif ( property === 'color' ) accumulator.color = value;\n\t\t\tif ( property === 'background-color' && value !== transparentValue )\n\t\t\t\taccumulator.backgroundColor = value;\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nexport function parseClassName( className = '', colorSettings ) {\n\treturn className.split( ' ' ).reduce( ( accumulator, name ) => {\n\t\t// `colorSlug` could contain dashes, so simply match the start and end.\n\t\tif ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) {\n\t\t\tconst colorSlug = name\n\t\t\t\t.replace( /^has-/, '' )\n\t\t\t\t.replace( /-color$/, '' );\n\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\tcolorSettings,\n\t\t\t\tcolorSlug\n\t\t\t);\n\t\t\taccumulator.color = colorObject.color;\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nexport function getActiveColors( value, name, colorSettings ) {\n\tconst activeColorFormat = getActiveFormat( value, name );\n\n\tif ( ! activeColorFormat ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\t...parseCSS( activeColorFormat.attributes.style ),\n\t\t...parseClassName( activeColorFormat.attributes.class, colorSettings ),\n\t};\n}\n\nfunction setColors( value, name, colorSettings, colors ) {\n\tconst { color, backgroundColor } = {\n\t\t...getActiveColors( value, name, colorSettings ),\n\t\t...colors,\n\t};\n\n\tif ( ! color && ! backgroundColor ) {\n\t\treturn removeFormat( value, name );\n\t}\n\n\tconst styles = [];\n\tconst classNames = [];\n\tconst attributes = {};\n\n\tif ( backgroundColor ) {\n\t\tstyles.push( [ 'background-color', backgroundColor ].join( ':' ) );\n\t} else {\n\t\t// Override default browser color for mark element.\n\t\tstyles.push( [ 'background-color', transparentValue ].join( ':' ) );\n\t}\n\n\tif ( color ) {\n\t\tconst colorObject = getColorObjectByColorValue( colorSettings, color );\n\n\t\tif ( colorObject ) {\n\t\t\tclassNames.push( getColorClassName( 'color', colorObject.slug ) );\n\t\t} else {\n\t\t\tstyles.push( [ 'color', color ].join( ':' ) );\n\t\t}\n\t}\n\n\tif ( styles.length ) attributes.style = styles.join( ';' );\n\tif ( classNames.length ) attributes.class = classNames.join( ' ' );\n\n\treturn applyFormat( value, { type: name, attributes } );\n}\n\nfunction ColorPicker( { name, property, value, onChange } ) {\n\tconst colors = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn get( getSettings(), [ 'colors' ], [] );\n\t}, [] );\n\tconst onColorChange = useCallback(\n\t\t( color ) => {\n\t\t\tonChange(\n\t\t\t\tsetColors( value, name, colors, { [ property ]: color } )\n\t\t\t);\n\t\t},\n\t\t[ colors, onChange, property ]\n\t);\n\tconst activeColors = useMemo(\n\t\t() => getActiveColors( value, name, colors ),\n\t\t[ name, value, colors ]\n\t);\n\n\treturn (\n\t\t<ColorPalette\n\t\t\tvalue={ activeColors[ property ] }\n\t\t\tonChange={ onColorChange }\n\t\t/>\n\t);\n}\n\nexport default function InlineColorUI( {\n\tname,\n\tvalue,\n\tonChange,\n\tonClose,\n\tcontentRef,\n} ) {\n\t/* \n\t As you change the text color by typing a HEX value into a field,\n\t the return value of document.getSelection jumps to the field you're editing,\n\t not the highlighted text. Given that useAnchorRef uses document.getSelection,\n\t it will return null, since it can't find the <mark> element within the HEX input.\n\t This caches the last truthy value of the selection anchor reference.\n\t */\n\tconst anchorRef = useCachedTruthy(\n\t\tuseAnchorRef( { ref: contentRef, value, settings } )\n\t);\n\n\treturn (\n\t\t<Popover\n\t\t\tonClose={ onClose }\n\t\t\tclassName=\"components-inline-color-popover\"\n\t\t\tanchorRef={ anchorRef }\n\t\t>\n\t\t\t<TabPanel\n\t\t\t\ttabs={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'color',\n\t\t\t\t\t\ttitle: __( 'Text' ),\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'backgroundColor',\n\t\t\t\t\t\ttitle: __( 'Background' ),\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\tproperty={ tab.name }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</TabPanel>\n\t\t</Popover>\n\t);\n}\n"]}

package/build-module/text-color/inline.native.js

@@ -0,0 +1,177 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import { reject } from 'lodash';
+/**
+ * WordPress dependencies
+ */
+
+import { useCallback, useMemo } from '@wordpress/element';
+import { applyFormat, removeFormat, getActiveFormat } from '@wordpress/rich-text';
+import { useSetting, getColorClassName, getColorObjectByColorValue } from '@wordpress/block-editor';
+import { BottomSheet, ColorSettings } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+
+import { textColor as settings } from './index';
+import { transparentValue } from './index.js';
+import { parseClassName } from './inline.js';
+
+function parseCSS() {
+  let css = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return css.split(';').reduce((accumulator, rule) => {
+    if (rule) {
+      const [property, value] = rule.replace(/ /g, '').split(':');
+      if (property === 'color') accumulator.color = value;
+      if (property === 'background-color' && value !== transparentValue) accumulator.backgroundColor = value;
+    }
+
+    return accumulator;
+  }, {});
+}
+
+function getActiveColors(value, name, colorSettings) {
+  const activeColorFormat = getActiveFormat(value, name);
+
+  if (!activeColorFormat) {
+    return {};
+  }
+
+  return { ...parseCSS(activeColorFormat.attributes.style),
+    ...parseClassName(activeColorFormat.attributes.class, colorSettings)
+  };
+}
+
+function setColors(value, name, colorSettings, colors) {
+  const {
+    color,
+    backgroundColor
+  } = { ...getActiveColors(value, name, colorSettings),
+    ...colors
+  };
+
+  if (!color && !backgroundColor) {
+    return removeFormat(value, name);
+  }
+
+  const styles = [];
+  const classNames = [];
+  const attributes = {};
+
+  if (backgroundColor) {
+    styles.push(['background-color', backgroundColor].join(':'));
+  } else {
+    // Override default browser color for mark element.
+    styles.push(['background-color', transparentValue].join(':'));
+  }
+
+  if (color) {
+    const colorObject = getColorObjectByColorValue(colorSettings, color);
+
+    if (colorObject) {
+      classNames.push(getColorClassName('color', colorObject.slug));
+      styles.push(['color', colorObject.color].join(':'));
+    } else {
+      styles.push(['color', color].join(':'));
+    }
+  }
+
+  if (styles.length) attributes.style = styles.join(';');
+  if (classNames.length) attributes.class = classNames.join(' ');
+  const format = {
+    type: name,
+    attributes
+  };
+  const hasNoSelection = value.start === value.end;
+  const isAtTheEnd = value.end === value.text.length;
+  const previousCharacter = value.text.charAt(value.end - 1); // Force formatting due to limitations in the native implementation
+
+  if (hasNoSelection && (value.text.length === 0 || previousCharacter === ' ' && isAtTheEnd)) {
+    // For cases where there's no text selected, there's a space before
+    // the current caret position and it's at the end of the text.
+    return applyFormat(value, format, value.start - 1, value.end + 1);
+  } else if (hasNoSelection && isAtTheEnd) {
+    // If there's no selection and is at the end of the text
+    // manually add the format within the current caret position.
+    const newFormat = applyFormat(value, format);
+    const {
+      activeFormats
+    } = newFormat;
+    newFormat.formats[value.start] = [...reject(activeFormats, {
+      type: format.type
+    }), format];
+    return newFormat;
+  } else if (hasNoSelection) {
+    return removeFormat(value, format);
+  }
+
+  return applyFormat(value, format);
+}
+
+function ColorPicker(_ref) {
+  let {
+    name,
+    value,
+    onChange
+  } = _ref;
+  const property = 'color';
+  const colors = useSetting('color.palette') || settings.colors;
+  const colorSettings = {
+    colors
+  };
+  const onColorChange = useCallback(color => {
+    var _value$text;
+
+    if (color !== '') {
+      onChange(setColors(value, name, colors, {
+        [property]: color
+      })); // Remove formatting if the color was reset, there's no
+      // current selection and the previous character is a space
+    } else if ((value === null || value === void 0 ? void 0 : value.start) === (value === null || value === void 0 ? void 0 : value.end) && ((_value$text = value.text) === null || _value$text === void 0 ? void 0 : _value$text.charAt((value === null || value === void 0 ? void 0 : value.end) - 1)) === ' ') {
+      onChange(removeFormat(value, name, value.end - 1, value.end));
+    } else {
+      onChange(removeFormat(value, name));
+    }
+  }, [colors, onChange, property]);
+  const activeColors = useMemo(() => getActiveColors(value, name, colors), [name, value, colors]);
+  return createElement(ColorSettings, {
+    colorValue: activeColors[property],
+    onColorChange: onColorChange,
+    defaultSettings: colorSettings,
+    hideNavigation: true
+  });
+}
+
+export default function InlineColorUI(_ref2) {
+  let {
+    name,
+    value,
+    onChange,
+    onClose
+  } = _ref2;
+  return createElement(BottomSheet, {
+    isVisible: true,
+    onClose: onClose,
+    hideHeader: true,
+    contentStyle: {
+      paddingLeft: 0,
+      paddingRight: 0
+    },
+    hasNavigation: true,
+    leftButton: null,
+    testID: "inline-text-color-modal"
+  }, createElement(BottomSheet.NavigationContainer, {
+    animate: true,
+    main: true
+  }, createElement(BottomSheet.NavigationScreen, {
+    name: "text-color"
+  }, createElement(ColorPicker, {
+    name: name,
+    value: value,
+    onChange: onChange
+  }))));
+}
+//# sourceMappingURL=inline.native.js.map

package/build-module/text-color/inline.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/format-library/src/text-color/inline.native.js"],"names":["reject","useCallback","useMemo","applyFormat","removeFormat","getActiveFormat","useSetting","getColorClassName","getColorObjectByColorValue","BottomSheet","ColorSettings","textColor","settings","transparentValue","parseClassName","parseCSS","css","split","reduce","accumulator","rule","property","value","replace","color","backgroundColor","getActiveColors","name","colorSettings","activeColorFormat","attributes","style","class","setColors","colors","styles","classNames","push","join","colorObject","slug","length","format","type","hasNoSelection","start","end","isAtTheEnd","text","previousCharacter","charAt","newFormat","activeFormats","formats","ColorPicker","onChange","onColorChange","activeColors","InlineColorUI","onClose","paddingLeft","paddingRight"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n\nimport { reject } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n} from '@wordpress/rich-text';\nimport {\n\tuseSetting,\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n} from '@wordpress/block-editor';\nimport { BottomSheet, ColorSettings } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { textColor as settings } from './index';\nimport { transparentValue } from './index.js';\nimport { parseClassName } from './inline.js';\n\nfunction parseCSS( css = '' ) {\n\treturn css.split( ';' ).reduce( ( accumulator, rule ) => {\n\t\tif ( rule ) {\n\t\t\tconst [ property, value ] = rule.replace( / /g, '' ).split( ':' );\n\t\t\tif ( property === 'color' ) accumulator.color = value;\n\t\t\tif ( property === 'background-color' && value !== transparentValue )\n\t\t\t\taccumulator.backgroundColor = value;\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nfunction getActiveColors( value, name, colorSettings ) {\n\tconst activeColorFormat = getActiveFormat( value, name );\n\n\tif ( ! activeColorFormat ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\t...parseCSS( activeColorFormat.attributes.style ),\n\t\t...parseClassName( activeColorFormat.attributes.class, colorSettings ),\n\t};\n}\n\nfunction setColors( value, name, colorSettings, colors ) {\n\tconst { color, backgroundColor } = {\n\t\t...getActiveColors( value, name, colorSettings ),\n\t\t...colors,\n\t};\n\n\tif ( ! color && ! backgroundColor ) {\n\t\treturn removeFormat( value, name );\n\t}\n\n\tconst styles = [];\n\tconst classNames = [];\n\tconst attributes = {};\n\n\tif ( backgroundColor ) {\n\t\tstyles.push( [ 'background-color', backgroundColor ].join( ':' ) );\n\t} else {\n\t\t// Override default browser color for mark element.\n\t\tstyles.push( [ 'background-color', transparentValue ].join( ':' ) );\n\t}\n\n\tif ( color ) {\n\t\tconst colorObject = getColorObjectByColorValue( colorSettings, color );\n\n\t\tif ( colorObject ) {\n\t\t\tclassNames.push( getColorClassName( 'color', colorObject.slug ) );\n\t\t\tstyles.push( [ 'color', colorObject.color ].join( ':' ) );\n\t\t} else {\n\t\t\tstyles.push( [ 'color', color ].join( ':' ) );\n\t\t}\n\t}\n\n\tif ( styles.length ) attributes.style = styles.join( ';' );\n\tif ( classNames.length ) attributes.class = classNames.join( ' ' );\n\n\tconst format = { type: name, attributes };\n\tconst hasNoSelection = value.start === value.end;\n\tconst isAtTheEnd = value.end === value.text.length;\n\tconst previousCharacter = value.text.charAt( value.end - 1 );\n\n\t// Force formatting due to limitations in the native implementation\n\tif (\n\t\thasNoSelection &&\n\t\t( value.text.length === 0 ||\n\t\t\t( previousCharacter === ' ' && isAtTheEnd ) )\n\t) {\n\t\t// For cases where there's no text selected, there's a space before\n\t\t// the current caret position and it's at the end of the text.\n\t\treturn applyFormat( value, format, value.start - 1, value.end + 1 );\n\t} else if ( hasNoSelection && isAtTheEnd ) {\n\t\t// If there's no selection and is at the end of the text\n\t\t// manually add the format within the current caret position.\n\t\tconst newFormat = applyFormat( value, format );\n\t\tconst { activeFormats } = newFormat;\n\t\tnewFormat.formats[ value.start ] = [\n\t\t\t...reject( activeFormats, { type: format.type } ),\n\t\t\tformat,\n\t\t];\n\t\treturn newFormat;\n\t} else if ( hasNoSelection ) {\n\t\treturn removeFormat( value, format );\n\t}\n\n\treturn applyFormat( value, format );\n}\n\nfunction ColorPicker( { name, value, onChange } ) {\n\tconst property = 'color';\n\tconst colors = useSetting( 'color.palette' ) || settings.colors;\n\tconst colorSettings = {\n\t\tcolors,\n\t};\n\n\tconst onColorChange = useCallback(\n\t\t( color ) => {\n\t\t\tif ( color !== '' ) {\n\t\t\t\tonChange(\n\t\t\t\t\tsetColors( value, name, colors, { [ property ]: color } )\n\t\t\t\t);\n\t\t\t\t// Remove formatting if the color was reset, there's no\n\t\t\t\t// current selection and the previous character is a space\n\t\t\t} else if (\n\t\t\t\tvalue?.start === value?.end &&\n\t\t\t\tvalue.text?.charAt( value?.end - 1 ) === ' '\n\t\t\t) {\n\t\t\t\tonChange(\n\t\t\t\t\tremoveFormat( value, name, value.end - 1, value.end )\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tonChange( removeFormat( value, name ) );\n\t\t\t}\n\t\t},\n\t\t[ colors, onChange, property ]\n\t);\n\tconst activeColors = useMemo(\n\t\t() => getActiveColors( value, name, colors ),\n\t\t[ name, value, colors ]\n\t);\n\n\treturn (\n\t\t<ColorSettings\n\t\t\tcolorValue={ activeColors[ property ] }\n\t\t\tonColorChange={ onColorChange }\n\t\t\tdefaultSettings={ colorSettings }\n\t\t\thideNavigation\n\t\t/>\n\t);\n}\n\nexport default function InlineColorUI( { name, value, onChange, onClose } ) {\n\treturn (\n\t\t<BottomSheet\n\t\t\tisVisible\n\t\t\tonClose={ onClose }\n\t\t\thideHeader\n\t\t\tcontentStyle={ { paddingLeft: 0, paddingRight: 0 } }\n\t\t\thasNavigation\n\t\t\tleftButton={ null }\n\t\t\ttestID=\"inline-text-color-modal\"\n\t\t>\n\t\t\t<BottomSheet.NavigationContainer animate main>\n\t\t\t\t<BottomSheet.NavigationScreen name=\"text-color\">\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t</BottomSheet.NavigationContainer>\n\t\t</BottomSheet>\n\t);\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "3.0.19",
+	"version": "3.1.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,23 +26,23 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.2.4",
-		"@wordpress/block-editor": "^8.0.13",
-		"@wordpress/components": "^19.2.0",
-		"@wordpress/compose": "^5.0.7",
-		"@wordpress/data": "^6.1.5",
-		"@wordpress/dom": "^3.2.7",
-		"@wordpress/element": "^4.0.4",
-		"@wordpress/html-entities": "^3.2.3",
-		"@wordpress/i18n": "^4.2.4",
-		"@wordpress/icons": "^6.1.1",
-		"@wordpress/keycodes": "^3.2.4",
-		"@wordpress/rich-text": "^5.0.7",
-		"@wordpress/url": "^3.3.1",
+		"@wordpress/a11y": "^3.3.0",
+		"@wordpress/block-editor": "^8.1.0",
+		"@wordpress/components": "^19.3.0",
+		"@wordpress/compose": "^5.1.0",
+		"@wordpress/data": "^6.2.0",
+		"@wordpress/dom": "^3.3.0",
+		"@wordpress/element": "^4.1.0",
+		"@wordpress/html-entities": "^3.3.0",
+		"@wordpress/i18n": "^4.3.0",
+		"@wordpress/icons": "^6.2.0",
+		"@wordpress/keycodes": "^3.3.0",
+		"@wordpress/rich-text": "^5.1.0",
+		"@wordpress/url": "^3.4.0",
 		"lodash": "^4.17.21"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f70f4664ac641bd107481c5c67ee6f5556a0a381"
+	"gitHead": "d95ccb9366e249133cdb1d7b25c382446b9ee502"
 }

package/src/default-formats.native.js

@@ -5,5 +5,6 @@ import { bold } from './bold';
 import { italic } from './italic';
 import { link } from './link';
 import { strikethrough } from './strikethrough';
+import { textColor } from './text-color';
 
-export default [ bold, italic, link, strikethrough ];
+export default [ bold, italic, link, strikethrough, textColor ];

package/src/link/index.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { find } from 'lodash';
-import { Clipboard } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 /**
  * WordPress dependencies

package/src/link/modal-screens/link-picker-screen.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Platform, Keyboard } from 'react-native';
+import { Keyboard } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
 import { delay } from 'lodash';
 /**
@@ -20,31 +20,20 @@ const LinkPickerScreen = () => {
 	const navigation = useNavigation();
 	const route = useRoute();
 	const onLinkPicked = ( { url, title } ) => {
-		if ( Platform.OS === 'android' ) {
-			Keyboard.dismiss();
-			delay( () => {
-				navigation.navigate( linkSettingsScreens.settings, {
-					inputValue: url,
-					text: title,
-				} );
-			}, 100 );
-			return;
-		}
-		navigation.navigate( linkSettingsScreens.settings, {
-			inputValue: url,
-			text: title,
-		} );
+		Keyboard.dismiss();
+		delay( () => {
+			navigation.navigate( linkSettingsScreens.settings, {
+				inputValue: url,
+				text: title,
+			} );
+		}, 100 );
 	};
 
 	const onCancel = () => {
-		if ( Platform.OS === 'android' ) {
-			Keyboard.dismiss();
-			delay( () => {
-				navigation.goBack();
-			}, 100 );
-			return;
-		}
-		navigation.goBack();
+		Keyboard.dismiss();
+		delay( () => {
+			navigation.goBack();
+		}, 100 );
 	};
 
 	const { inputValue } = route.params;