@wordpress/format-library 4.31.0 → 4.32.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 4.32.0 (2024-04-03)
+
 ## 4.31.0 (2024-03-21)
 
 ## 4.30.0 (2024-03-06)

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

@@ -14,8 +14,8 @@ var _components = require("@wordpress/components");
 var _icons = require("@wordpress/icons");
 var _richText = require("@wordpress/rich-text");
 var _compose = require("@wordpress/compose");
-var _inline = require("./inline.js");
-var _inline2 = _interopRequireDefault(require("./inline"));
+var _inlineNative = require("./inline.native.js");
+var _inline = _interopRequireDefault(require("./inline"));
 var _style = _interopRequireDefault(require("./style.scss"));
 /**
  * External dependencies
@@ -71,7 +71,7 @@ function TextColorEdit({
   const [isAddingColor, setIsAddingColor] = (0, _element.useState)(false);
   const enableIsAddingColor = (0, _element.useCallback)(() => setIsAddingColor(true), [setIsAddingColor]);
   const disableIsAddingColor = (0, _element.useCallback)(() => setIsAddingColor(false), [setIsAddingColor]);
-  const colorIndicatorStyle = (0, _element.useMemo)(() => fillComputedColors(contentRef, (0, _inline.getActiveColors)(value, name, colors)), [value, colors]);
+  const colorIndicatorStyle = (0, _element.useMemo)(() => fillComputedColors(contentRef, (0, _inlineNative.getActiveColors)(value, name, colors)), [value, colors]);
   const hasColorsToChoose = colors.length || !allowCustomControl;
   const onPressButton = (0, _element.useCallback)(() => {
     if (hasColorsToChoose) {
@@ -114,7 +114,7 @@ function TextColorEdit({
     // If has no colors to choose but a color is active remove the color onClick
     ,
     onClick: onPressButton
-  }))), isAddingColor && (0, _react.createElement)(_inline2.default, {
+  }))), isAddingColor && (0, _react.createElement)(_inline.default, {
     name: name,
     onClose: disableIsAddingColor,
     activeAttributes: activeAttributes,

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

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_i18n","_element","_blockEditor","_components","_icons","_richText","_compose","_inline","_inline2","_interopRequireDefault","_style","name","title","__","getComputedStyleProperty","element","property","_element$props$style","style","props","backgroundColor","baseColors","color","background","fillComputedColors","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","useSettings","colors","useMobileGlobalStylesColors","isAddingColor","setIsAddingColor","useState","enableIsAddingColor","useCallback","disableIsAddingColor","colorIndicatorStyle","useMemo","getActiveColors","hasColorsToChoose","length","onPressButton","removeFormat","outlineStyle","usePreferredColorSchemeStyle","styles","borderWidth","StyleSheet","hairlineWidth","isActiveStyle","customContainerStyles","_react","createElement","Fragment","BlockControls","ToolbarGroup","View","pointerEvents","ToolbarButton","icon","Icon","Object","keys","textColorIcon","colorIcon","extraProps","onClick","default","onClose","textColor","exports","tagName","className","attributes","class","edit"],"sources":["@wordpress/format-library/src/text-color/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { StyleSheet, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { BlockControls, useSettings } from '@wordpress/block-editor';\nimport {\n\tToolbarGroup,\n\tToolbarButton,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\nimport {\n\tIcon,\n\tcolor as colorIcon,\n\ttextColor as textColorIcon,\n} 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 { default as InlineColorUI } from './inline';\nimport styles from './style.scss';\n\nconst name = 'core/text-color';\nconst title = __( 'Text color' );\n\nfunction getComputedStyleProperty( element, property ) {\n\tconst style = element?.props?.style ?? {};\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 ] = useSettings( 'color.custom' );\n\tconst colors = useMobileGlobalStylesColors();\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst enableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( true ),\n\t\t[ setIsAddingColor ]\n\t);\n\tconst disableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( false ),\n\t\t[ setIsAddingColor ]\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 = colors.length || ! 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 = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-inline-color__outline' ],\n\t\t\tstyles[ 'components-inline-color__outline--dark' ]\n\t\t),\n\t\t{ borderWidth: StyleSheet.hairlineWidth },\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={\n\t\t\t\t\t\t\t\t\tObject.keys( activeAttributes ).length\n\t\t\t\t\t\t\t\t\t\t? textColorIcon\n\t\t\t\t\t\t\t\t\t\t: colorIcon\n\t\t\t\t\t\t\t\t}\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\tedit: TextColorEdit,\n};\n"],"mappings":"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"}
+{"version":3,"names":["_reactNative","require","_i18n","_element","_blockEditor","_components","_icons","_richText","_compose","_inlineNative","_inline","_interopRequireDefault","_style","name","title","__","getComputedStyleProperty","element","property","_element$props$style","style","props","backgroundColor","baseColors","color","background","fillComputedColors","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","useSettings","colors","useMobileGlobalStylesColors","isAddingColor","setIsAddingColor","useState","enableIsAddingColor","useCallback","disableIsAddingColor","colorIndicatorStyle","useMemo","getActiveColors","hasColorsToChoose","length","onPressButton","removeFormat","outlineStyle","usePreferredColorSchemeStyle","styles","borderWidth","StyleSheet","hairlineWidth","isActiveStyle","customContainerStyles","_react","createElement","Fragment","BlockControls","ToolbarGroup","View","pointerEvents","ToolbarButton","icon","Icon","Object","keys","textColorIcon","colorIcon","extraProps","onClick","default","onClose","textColor","exports","tagName","className","attributes","class","edit"],"sources":["@wordpress/format-library/src/text-color/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { StyleSheet, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { BlockControls, useSettings } from '@wordpress/block-editor';\nimport {\n\tToolbarGroup,\n\tToolbarButton,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\nimport {\n\tIcon,\n\tcolor as colorIcon,\n\ttextColor as textColorIcon,\n} from '@wordpress/icons';\nimport { removeFormat } from '@wordpress/rich-text';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getActiveColors } from './inline.native.js';\nimport { default as InlineColorUI } from './inline';\nimport styles from './style.scss';\n\nconst name = 'core/text-color';\nconst title = __( 'Text color' );\n\nfunction getComputedStyleProperty( element, property ) {\n\tconst style = element?.props?.style ?? {};\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 ] = useSettings( 'color.custom' );\n\tconst colors = useMobileGlobalStylesColors();\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst enableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( true ),\n\t\t[ setIsAddingColor ]\n\t);\n\tconst disableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( false ),\n\t\t[ setIsAddingColor ]\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 = colors.length || ! 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 = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-inline-color__outline' ],\n\t\t\tstyles[ 'components-inline-color__outline--dark' ]\n\t\t),\n\t\t{ borderWidth: StyleSheet.hairlineWidth },\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={\n\t\t\t\t\t\t\t\t\tObject.keys( activeAttributes ).length\n\t\t\t\t\t\t\t\t\t\t? textColorIcon\n\t\t\t\t\t\t\t\t\t\t: colorIcon\n\t\t\t\t\t\t\t\t}\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\tedit: TextColorEdit,\n};\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAKA,IAAAK,MAAA,GAAAL,OAAA;AAKA,IAAAM,SAAA,GAAAN,OAAA;AACA,IAAAO,QAAA,GAAAP,OAAA;AAKA,IAAAQ,aAAA,GAAAR,OAAA;AACA,IAAAS,OAAA,GAAAC,sBAAA,CAAAV,OAAA;AACA,IAAAW,MAAA,GAAAD,sBAAA,CAAAV,OAAA;AA7BA;AACA;AACA;;AAGA;AACA;AACA;;AAiBA;AACA;AACA;;AAKA,MAAMY,IAAI,GAAG,iBAAiB;AAC9B,MAAMC,KAAK,GAAG,IAAAC,QAAE,EAAE,YAAa,CAAC;AAEhC,SAASC,wBAAwBA,CAAEC,OAAO,EAAEC,QAAQ,EAAG;EAAA,IAAAC,oBAAA;EACtD,MAAMC,KAAK,IAAAD,oBAAA,GAAGF,OAAO,EAAEI,KAAK,EAAED,KAAK,cAAAD,oBAAA,cAAAA,oBAAA,GAAI,CAAC,CAAC;EAEzC,IAAKD,QAAQ,KAAK,kBAAkB,EAAG;IACtC,MAAM;MAAEI,eAAe;MAAEC;IAAW,CAAC,GAAGH,KAAK;IAE7C,IAAKE,eAAe,KAAK,aAAa,EAAG;MACxC,OAAOA,eAAe;IACvB,CAAC,MAAM,IAAKC,UAAU,IAAIA,UAAU,EAAEC,KAAK,EAAEC,UAAU,EAAG;MACzD,OAAOF,UAAU,EAAEC,KAAK,EAAEC,UAAU;IACrC;IAEA,OAAO,aAAa;EACrB;AACD;AAEA,SAASC,kBAAkBA,CAAET,OAAO,EAAE;EAAEO,KAAK;EAAEF;AAAgB,CAAC,EAAG;EAClE,IAAK,CAAEE,KAAK,IAAI,CAAEF,eAAe,EAAG;IACnC;EACD;EAEA,OAAO;IACNE,KAAK,EAAEA,KAAK,IAAIR,wBAAwB,CAAEC,OAAO,EAAE,OAAQ,CAAC;IAC5DK,eAAe,EAAEN,wBAAwB,CACxCC,OAAO,EACP,kBACD;EACD,CAAC;AACF;AAEA,SAASU,aAAaA,CAAE;EACvBC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,gBAAgB;EAChBC;AACD,CAAC,EAAG;EACH,MAAM,CAAEC,kBAAkB,CAAE,GAAG,IAAAC,wBAAW,EAAE,cAAe,CAAC;EAC5D,MAAMC,MAAM,GAAG,IAAAC,uCAA2B,EAAC,CAAC;EAC5C,MAAM,CAAEC,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAC7D,MAAMC,mBAAmB,GAAG,IAAAC,oBAAW,EACtC,MAAMH,gBAAgB,CAAE,IAAK,CAAC,EAC9B,CAAEA,gBAAgB,CACnB,CAAC;EACD,MAAMI,oBAAoB,GAAG,IAAAD,oBAAW,EACvC,MAAMH,gBAAgB,CAAE,KAAM,CAAC,EAC/B,CAAEA,gBAAgB,CACnB,CAAC;EACD,MAAMK,mBAAmB,GAAG,IAAAC,gBAAO,EAClC,MACClB,kBAAkB,CACjBM,UAAU,EACV,IAAAa,6BAAe,EAAEjB,KAAK,EAAEf,IAAI,EAAEsB,MAAO,CACtC,CAAC,EACF,CAAEP,KAAK,EAAEO,MAAM,CAChB,CAAC;EAED,MAAMW,iBAAiB,GAAGX,MAAM,CAACY,MAAM,IAAI,CAAEd,kBAAkB;EAE/D,MAAMe,aAAa,GAAG,IAAAP,oBAAW,EAAE,MAAM;IACxC,IAAKK,iBAAiB,EAAG;MACxBN,mBAAmB,CAAC,CAAC;IACtB,CAAC,MAAM;MACNX,QAAQ,CAAE,IAAAoB,sBAAY,EAAErB,KAAK,EAAEf,IAAK,CAAE,CAAC;IACxC;EACD,CAAC,EAAE,CAAEiC,iBAAiB,EAAElB,KAAK,CAAG,CAAC;EAEjC,MAAMsB,YAAY,GAAG,CACpB,IAAAC,qCAA4B,EAC3BC,cAAM,CAAE,kCAAkC,CAAE,EAC5CA,cAAM,CAAE,wCAAwC,CACjD,CAAC,EACD;IAAEC,WAAW,EAAEC,uBAAU,CAACC;EAAc,CAAC,CACzC;EAED,IAAK,CAAET,iBAAiB,IAAI,CAAEhB,QAAQ,EAAG;IACxC,OAAO,IAAI;EACZ;EAEA,MAAM0B,aAAa,GAAG;IACrB,GAAGb,mBAAmB;IACtB,IAAK,CAAEA,mBAAmB,EAAErB,eAAe,GACxC;MAAEA,eAAe,EAAE;IAAc,CAAC,GAClC,CAAC,CAAC,CAAE;IACP,GAAG8B,cAAM,CAAE,oCAAoC;EAChD,CAAC;EAED,MAAMK,qBAAqB,GAC1BL,cAAM,CAAE,2CAA2C,CAAE;EAEtD,OACC,IAAAM,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACC,IAAAF,MAAA,CAAAC,aAAA,EAACvD,YAAA,CAAAyD,aAAa,QACb,IAAAH,MAAA,CAAAC,aAAA,EAACtD,WAAA,CAAAyD,YAAY,QACVhC,QAAQ,IACT,IAAA4B,MAAA,CAAAC,aAAA,EAAC3D,YAAA,CAAA+D,IAAI;IAAC3C,KAAK,EAAG8B,YAAc;IAACc,aAAa,EAAC;EAAM,CAAE,CACnD,EAED,IAAAN,MAAA,CAAAC,aAAA,EAACtD,WAAA,CAAA4D,aAAa;IACbpD,IAAI,EAAC,YAAY;IACjBiB,QAAQ,EAAGA,QAAU;IACrBoC,IAAI,EACH,IAAAR,MAAA,CAAAC,aAAA,EAACrD,MAAA,CAAA6D,IAAI;MACJD,IAAI,EACHE,MAAM,CAACC,IAAI,CAAEtC,gBAAiB,CAAC,CAACgB,MAAM,GACnCuB,gBAAa,GACbC,YACH;MACDnD,KAAK,EACJuB,mBAAmB,EAAEnB,KAAK,IAAI;QAC7BA,KAAK,EAAEmB,mBAAmB,CAACnB;MAC5B;IACA,CACD,CACD;IACDV,KAAK,EAAGA,KAAO;IACf0D,UAAU,EAAG;MACZhB,aAAa;MACbC;IACD;IACA;IAAA;IACAgB,OAAO,EAAGzB;EAAe,CACzB,CACY,CACA,CAAC,EACdX,aAAa,IACd,IAAAqB,MAAA,CAAAC,aAAA,EAACjD,OAAA,CAAAgE,OAAa;IACb7D,IAAI,EAAGA,IAAM;IACb8D,OAAO,EAAGjC,oBAAsB;IAChCX,gBAAgB,EAAGA,gBAAkB;IACrCH,KAAK,EAAGA,KAAO;IACfC,QAAQ,EAAGA,QAAU;IACrBG,UAAU,EAAGA;EAAY,CACzB,CAED,CAAC;AAEL;AAEO,MAAM4C,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG;EACxB/D,IAAI;EACJC,KAAK;EACLgE,OAAO,EAAE,MAAM;EACfC,SAAS,EAAE,kBAAkB;EAC7BC,UAAU,EAAE;IACX5D,KAAK,EAAE,OAAO;IACd6D,KAAK,EAAE;EACR,CAAC;EACDC,IAAI,EAAEvD;AACP,CAAC"}

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = InlineColorUI;
+exports.getActiveColors = getActiveColors;
 var _react = require("react");
 var _element = require("@wordpress/element");
 var _richText = require("@wordpress/rich-text");
@@ -39,7 +40,7 @@ function getActiveColors(value, name, colorSettings) {
     ...(0, _inline.parseClassName)(activeColorFormat.attributes.class, colorSettings)
   };
 }
-function setColors(value, name, colorSettings, colors) {
+function setColors(value, name, colorSettings, colors, contentRef) {
   const {
     color,
     backgroundColor
@@ -47,7 +48,8 @@ function setColors(value, name, colorSettings, colors) {
     ...getActiveColors(value, name, colorSettings),
     ...colors
   };
-  if (!color && !backgroundColor) {
+  if (!color) {
+    contentRef?.onRemoveMarkFormatting();
     return (0, _richText.removeFormat)(value, name);
   }
   const styles = [];
@@ -75,55 +77,30 @@ function setColors(value, name, colorSettings, colors) {
     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 (0, _richText.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 = (0, _richText.applyFormat)(value, format);
-    const {
-      activeFormats
-    } = newFormat;
-    newFormat.formats[value.start] = [...(activeFormats?.filter(({
-      type
-    }) => type !== format.type) || []), format];
-    return newFormat;
-  } else if (hasNoSelection) {
-    return (0, _richText.removeFormat)(value, format);
+  if (hasNoSelection) {
+    contentRef?.onMarkFormatting(color);
   }
   return (0, _richText.applyFormat)(value, format);
 }
 function ColorPicker({
   name,
   value,
-  onChange
+  onChange,
+  contentRef
 }) {
   const property = 'color';
   const colors = (0, _components.useMobileGlobalStylesColors)();
   const colorSettings = (0, _blockEditor.useMultipleOriginColorsAndGradients)();
   const onColorChange = (0, _element.useCallback)(color => {
-    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?.start === value?.end && value.text?.charAt(value?.end - 1) === ' ') {
-      onChange((0, _richText.removeFormat)(value, name, value.end - 1, value.end));
-    } else {
-      onChange((0, _richText.removeFormat)(value, name));
-    }
-  }, [colors, onChange, property]);
+    onChange(setColors(value, name, colors, {
+      [property]: color
+    }, contentRef));
+  }, [colors, contentRef, name, onChange, value]);
   const activeColors = (0, _element.useMemo)(() => getActiveColors(value, name, colors), [name, value, colors]);
   return (0, _react.createElement)(_components.ColorSettings, {
     colorValue: activeColors[property],
     onColorChange: onColorChange,
+    onColorCleared: onColorChange,
     defaultSettings: colorSettings,
     hideNavigation: true
   });
@@ -132,7 +109,8 @@ function InlineColorUI({
   name,
   value,
   onChange,
-  onClose
+  onClose,
+  contentRef
 }) {
   return (0, _react.createElement)(_components.BottomSheet, {
     isVisible: true,
@@ -153,7 +131,8 @@ function InlineColorUI({
   }, (0, _react.createElement)(ColorPicker, {
     name: name,
     value: value,
-    onChange: onChange
+    onChange: onChange,
+    contentRef: contentRef
   }))));
 }
 //# sourceMappingURL=inline.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_richText","_blockEditor","_components","_index","_inline","parseCSS","css","split","reduce","accumulator","rule","property","value","replace","color","transparentValue","backgroundColor","getActiveColors","name","colorSettings","activeColorFormat","getActiveFormat","attributes","style","parseClassName","class","setColors","colors","removeFormat","styles","classNames","push","join","colorObject","getColorObjectByColorValue","getColorClassName","slug","length","format","type","hasNoSelection","start","end","isAtTheEnd","text","previousCharacter","charAt","applyFormat","newFormat","activeFormats","formats","filter","ColorPicker","onChange","useMobileGlobalStylesColors","useMultipleOriginColorsAndGradients","onColorChange","useCallback","activeColors","useMemo","_react","createElement","ColorSettings","colorValue","defaultSettings","hideNavigation","InlineColorUI","onClose","BottomSheet","isVisible","hideHeader","contentStyle","paddingLeft","paddingRight","hasNavigation","leftButton","testID","NavigationContainer","animate","main","NavigationScreen"],"sources":["@wordpress/format-library/src/text-color/inline.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n} from '@wordpress/rich-text';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tuseMultipleOriginColorsAndGradients,\n} from '@wordpress/block-editor';\nimport {\n\tBottomSheet,\n\tColorSettings,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\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...( activeFormats?.filter(\n\t\t\t\t( { type } ) => type !== format.type\n\t\t\t) || [] ),\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 = useMobileGlobalStylesColors();\n\tconst colorSettings = useMultipleOriginColorsAndGradients();\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"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AAKA,IAAAE,YAAA,GAAAF,OAAA;AAKA,IAAAG,WAAA,GAAAH,OAAA;AASA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAxBA;AACA;AACA;;AAkBA;AACA;AACA;;AAIA,SAASM,QAAQA,CAAEC,GAAG,GAAG,EAAE,EAAG;EAC7B,OAAOA,GAAG,CAACC,KAAK,CAAE,GAAI,CAAC,CAACC,MAAM,CAAE,CAAEC,WAAW,EAAEC,IAAI,KAAM;IACxD,IAAKA,IAAI,EAAG;MACX,MAAM,CAAEC,QAAQ,EAAEC,KAAK,CAAE,GAAGF,IAAI,CAACG,OAAO,CAAE,IAAI,EAAE,EAAG,CAAC,CAACN,KAAK,CAAE,GAAI,CAAC;MACjE,IAAKI,QAAQ,KAAK,OAAO,EAAGF,WAAW,CAACK,KAAK,GAAGF,KAAK;MACrD,IAAKD,QAAQ,KAAK,kBAAkB,IAAIC,KAAK,KAAKG,uBAAgB,EACjEN,WAAW,CAACO,eAAe,GAAGJ,KAAK;IACrC;IACA,OAAOH,WAAW;EACnB,CAAC,EAAE,CAAC,CAAE,CAAC;AACR;AAEA,SAASQ,eAAeA,CAAEL,KAAK,EAAEM,IAAI,EAAEC,aAAa,EAAG;EACtD,MAAMC,iBAAiB,GAAG,IAAAC,yBAAe,EAAET,KAAK,EAAEM,IAAK,CAAC;EAExD,IAAK,CAAEE,iBAAiB,EAAG;IAC1B,OAAO,CAAC,CAAC;EACV;EAEA,OAAO;IACN,GAAGf,QAAQ,CAAEe,iBAAiB,CAACE,UAAU,CAACC,KAAM,CAAC;IACjD,GAAG,IAAAC,sBAAc,EAAEJ,iBAAiB,CAACE,UAAU,CAACG,KAAK,EAAEN,aAAc;EACtE,CAAC;AACF;AAEA,SAASO,SAASA,CAAEd,KAAK,EAAEM,IAAI,EAAEC,aAAa,EAAEQ,MAAM,EAAG;EACxD,MAAM;IAAEb,KAAK;IAAEE;EAAgB,CAAC,GAAG;IAClC,GAAGC,eAAe,CAAEL,KAAK,EAAEM,IAAI,EAAEC,aAAc,CAAC;IAChD,GAAGQ;EACJ,CAAC;EAED,IAAK,CAAEb,KAAK,IAAI,CAAEE,eAAe,EAAG;IACnC,OAAO,IAAAY,sBAAY,EAAEhB,KAAK,EAAEM,IAAK,CAAC;EACnC;EAEA,MAAMW,MAAM,GAAG,EAAE;EACjB,MAAMC,UAAU,GAAG,EAAE;EACrB,MAAMR,UAAU,GAAG,CAAC,CAAC;EAErB,IAAKN,eAAe,EAAG;IACtBa,MAAM,CAACE,IAAI,CAAE,CAAE,kBAAkB,EAAEf,eAAe,CAAE,CAACgB,IAAI,CAAE,GAAI,CAAE,CAAC;EACnE,CAAC,MAAM;IACN;IACAH,MAAM,CAACE,IAAI,CAAE,CAAE,kBAAkB,EAAEhB,uBAAgB,CAAE,CAACiB,IAAI,CAAE,GAAI,CAAE,CAAC;EACpE;EAEA,IAAKlB,KAAK,EAAG;IACZ,MAAMmB,WAAW,GAAG,IAAAC,uCAA0B,EAAEf,aAAa,EAAEL,KAAM,CAAC;IAEtE,IAAKmB,WAAW,EAAG;MAClBH,UAAU,CAACC,IAAI,CAAE,IAAAI,8BAAiB,EAAE,OAAO,EAAEF,WAAW,CAACG,IAAK,CAAE,CAAC;MACjEP,MAAM,CAACE,IAAI,CAAE,CAAE,OAAO,EAAEE,WAAW,CAACnB,KAAK,CAAE,CAACkB,IAAI,CAAE,GAAI,CAAE,CAAC;IAC1D,CAAC,MAAM;MACNH,MAAM,CAACE,IAAI,CAAE,CAAE,OAAO,EAAEjB,KAAK,CAAE,CAACkB,IAAI,CAAE,GAAI,CAAE,CAAC;IAC9C;EACD;EAEA,IAAKH,MAAM,CAACQ,MAAM,EAAGf,UAAU,CAACC,KAAK,GAAGM,MAAM,CAACG,IAAI,CAAE,GAAI,CAAC;EAC1D,IAAKF,UAAU,CAACO,MAAM,EAAGf,UAAU,CAACG,KAAK,GAAGK,UAAU,CAACE,IAAI,CAAE,GAAI,CAAC;EAElE,MAAMM,MAAM,GAAG;IAAEC,IAAI,EAAErB,IAAI;IAAEI;EAAW,CAAC;EACzC,MAAMkB,cAAc,GAAG5B,KAAK,CAAC6B,KAAK,KAAK7B,KAAK,CAAC8B,GAAG;EAChD,MAAMC,UAAU,GAAG/B,KAAK,CAAC8B,GAAG,KAAK9B,KAAK,CAACgC,IAAI,CAACP,MAAM;EAClD,MAAMQ,iBAAiB,GAAGjC,KAAK,CAACgC,IAAI,CAACE,MAAM,CAAElC,KAAK,CAAC8B,GAAG,GAAG,CAAE,CAAC;;EAE5D;EACA,IACCF,cAAc,KACZ5B,KAAK,CAACgC,IAAI,CAACP,MAAM,KAAK,CAAC,IACtBQ,iBAAiB,KAAK,GAAG,IAAIF,UAAY,CAAE,EAC7C;IACD;IACA;IACA,OAAO,IAAAI,qBAAW,EAAEnC,KAAK,EAAE0B,MAAM,EAAE1B,KAAK,CAAC6B,KAAK,GAAG,CAAC,EAAE7B,KAAK,CAAC8B,GAAG,GAAG,CAAE,CAAC;EACpE,CAAC,MAAM,IAAKF,cAAc,IAAIG,UAAU,EAAG;IAC1C;IACA;IACA,MAAMK,SAAS,GAAG,IAAAD,qBAAW,EAAEnC,KAAK,EAAE0B,MAAO,CAAC;IAC9C,MAAM;MAAEW;IAAc,CAAC,GAAGD,SAAS;IACnCA,SAAS,CAACE,OAAO,CAAEtC,KAAK,CAAC6B,KAAK,CAAE,GAAG,CAClC,IAAKQ,aAAa,EAAEE,MAAM,CACzB,CAAE;MAAEZ;IAAK,CAAC,KAAMA,IAAI,KAAKD,MAAM,CAACC,IACjC,CAAC,IAAI,EAAE,CAAE,EACTD,MAAM,CACN;IACD,OAAOU,SAAS;EACjB,CAAC,MAAM,IAAKR,cAAc,EAAG;IAC5B,OAAO,IAAAZ,sBAAY,EAAEhB,KAAK,EAAE0B,MAAO,CAAC;EACrC;EAEA,OAAO,IAAAS,qBAAW,EAAEnC,KAAK,EAAE0B,MAAO,CAAC;AACpC;AAEA,SAASc,WAAWA,CAAE;EAAElC,IAAI;EAAEN,KAAK;EAAEyC;AAAS,CAAC,EAAG;EACjD,MAAM1C,QAAQ,GAAG,OAAO;EACxB,MAAMgB,MAAM,GAAG,IAAA2B,uCAA2B,EAAC,CAAC;EAC5C,MAAMnC,aAAa,GAAG,IAAAoC,gDAAmC,EAAC,CAAC;EAE3D,MAAMC,aAAa,GAAG,IAAAC,oBAAW,EAC9B3C,KAAK,IAAM;IACZ,IAAKA,KAAK,KAAK,EAAE,EAAG;MACnBuC,QAAQ,CACP3B,SAAS,CAAEd,KAAK,EAAEM,IAAI,EAAES,MAAM,EAAE;QAAE,CAAEhB,QAAQ,GAAIG;MAAM,CAAE,CACzD,CAAC;MACD;MACA;IACD,CAAC,MAAM,IACNF,KAAK,EAAE6B,KAAK,KAAK7B,KAAK,EAAE8B,GAAG,IAC3B9B,KAAK,CAACgC,IAAI,EAAEE,MAAM,CAAElC,KAAK,EAAE8B,GAAG,GAAG,CAAE,CAAC,KAAK,GAAG,EAC3C;MACDW,QAAQ,CACP,IAAAzB,sBAAY,EAAEhB,KAAK,EAAEM,IAAI,EAAEN,KAAK,CAAC8B,GAAG,GAAG,CAAC,EAAE9B,KAAK,CAAC8B,GAAI,CACrD,CAAC;IACF,CAAC,MAAM;MACNW,QAAQ,CAAE,IAAAzB,sBAAY,EAAEhB,KAAK,EAAEM,IAAK,CAAE,CAAC;IACxC;EACD,CAAC,EACD,CAAES,MAAM,EAAE0B,QAAQ,EAAE1C,QAAQ,CAC7B,CAAC;EACD,MAAM+C,YAAY,GAAG,IAAAC,gBAAO,EAC3B,MAAM1C,eAAe,CAAEL,KAAK,EAAEM,IAAI,EAAES,MAAO,CAAC,EAC5C,CAAET,IAAI,EAAEN,KAAK,EAAEe,MAAM,CACtB,CAAC;EAED,OACC,IAAAiC,MAAA,CAAAC,aAAA,EAAC3D,WAAA,CAAA4D,aAAa;IACbC,UAAU,EAAGL,YAAY,CAAE/C,QAAQ,CAAI;IACvC6C,aAAa,EAAGA,aAAe;IAC/BQ,eAAe,EAAG7C,aAAe;IACjC8C,cAAc;EAAA,CACd,CAAC;AAEJ;AAEe,SAASC,aAAaA,CAAE;EAAEhD,IAAI;EAAEN,KAAK;EAAEyC,QAAQ;EAAEc;AAAQ,CAAC,EAAG;EAC3E,OACC,IAAAP,MAAA,CAAAC,aAAA,EAAC3D,WAAA,CAAAkE,WAAW;IACXC,SAAS;IACTF,OAAO,EAAGA,OAAS;IACnBG,UAAU;IACVC,YAAY,EAAG;MAAEC,WAAW,EAAE,CAAC;MAAEC,YAAY,EAAE;IAAE,CAAG;IACpDC,aAAa;IACbC,UAAU,EAAG,IAAM;IACnBC,MAAM,EAAC;EAAyB,GAEhC,IAAAhB,MAAA,CAAAC,aAAA,EAAC3D,WAAA,CAAAkE,WAAW,CAACS,mBAAmB;IAACC,OAAO;IAACC,IAAI;EAAA,GAC5C,IAAAnB,MAAA,CAAAC,aAAA,EAAC3D,WAAA,CAAAkE,WAAW,CAACY,gBAAgB;IAAC9D,IAAI,EAAC;EAAY,GAC9C,IAAA0C,MAAA,CAAAC,aAAA,EAACT,WAAW;IACXlC,IAAI,EAAGA,IAAM;IACbN,KAAK,EAAGA,KAAO;IACfyC,QAAQ,EAAGA;EAAU,CACrB,CAC4B,CACE,CACrB,CAAC;AAEhB"}
+{"version":3,"names":["_element","require","_richText","_blockEditor","_components","_index","_inline","parseCSS","css","split","reduce","accumulator","rule","property","value","replace","color","transparentValue","backgroundColor","getActiveColors","name","colorSettings","activeColorFormat","getActiveFormat","attributes","style","parseClassName","class","setColors","colors","contentRef","onRemoveMarkFormatting","removeFormat","styles","classNames","push","join","colorObject","getColorObjectByColorValue","getColorClassName","slug","length","format","type","hasNoSelection","start","end","onMarkFormatting","applyFormat","ColorPicker","onChange","useMobileGlobalStylesColors","useMultipleOriginColorsAndGradients","onColorChange","useCallback","activeColors","useMemo","_react","createElement","ColorSettings","colorValue","onColorCleared","defaultSettings","hideNavigation","InlineColorUI","onClose","BottomSheet","isVisible","hideHeader","contentStyle","paddingLeft","paddingRight","hasNavigation","leftButton","testID","NavigationContainer","animate","main","NavigationScreen"],"sources":["@wordpress/format-library/src/text-color/inline.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n} from '@wordpress/rich-text';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tuseMultipleOriginColorsAndGradients,\n} from '@wordpress/block-editor';\nimport {\n\tBottomSheet,\n\tColorSettings,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\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\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, contentRef ) {\n\tconst { color, backgroundColor } = {\n\t\t...getActiveColors( value, name, colorSettings ),\n\t\t...colors,\n\t};\n\n\tif ( ! color ) {\n\t\tcontentRef?.onRemoveMarkFormatting();\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\n\tif ( hasNoSelection ) {\n\t\tcontentRef?.onMarkFormatting( color );\n\t}\n\treturn applyFormat( value, format );\n}\n\nfunction ColorPicker( { name, value, onChange, contentRef } ) {\n\tconst property = 'color';\n\tconst colors = useMobileGlobalStylesColors();\n\tconst colorSettings = useMultipleOriginColorsAndGradients();\n\n\tconst onColorChange = useCallback(\n\t\t( color ) => {\n\t\t\tonChange(\n\t\t\t\tsetColors(\n\t\t\t\t\tvalue,\n\t\t\t\t\tname,\n\t\t\t\t\tcolors,\n\t\t\t\t\t{ [ property ]: color },\n\t\t\t\t\tcontentRef\n\t\t\t\t)\n\t\t\t);\n\t\t},\n\t\t[ colors, contentRef, name, onChange, value ]\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\tonColorCleared={ onColorChange }\n\t\t\tdefaultSettings={ colorSettings }\n\t\t\thideNavigation\n\t\t/>\n\t);\n}\n\nexport default function InlineColorUI( {\n\tname,\n\tvalue,\n\tonChange,\n\tonClose,\n\tcontentRef,\n} ) {\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\tcontentRef={ contentRef }\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"],"mappings":"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"}

package/build/unknown/index.js

@@ -15,6 +15,15 @@ var _icons = require("@wordpress/icons");
 
 const name = 'core/unknown';
 const title = (0, _i18n.__)('Clear Unknown Formatting');
+function selectionContainsUnknownFormats(value) {
+  if ((0, _richText.isCollapsed)(value)) {
+    return false;
+  }
+  const selectedValue = (0, _richText.slice)(value);
+  return selectedValue.formats.some(formats => {
+    return formats.some(format => format.type === name);
+  });
+}
 const unknown = exports.unknown = {
   name,
   title,
@@ -26,17 +35,13 @@ const unknown = exports.unknown = {
     onChange,
     onFocus
   }) {
+    if (!isActive && !selectionContainsUnknownFormats(value)) {
+      return null;
+    }
     function onClick() {
       onChange((0, _richText.removeFormat)(value, name));
       onFocus();
     }
-    const selectedValue = (0, _richText.slice)(value);
-    const hasUnknownFormats = selectedValue.formats.some(formats => {
-      return formats.some(format => format.type === name);
-    });
-    if (!isActive && !hasUnknownFormats) {
-      return null;
-    }
     return (0, _react.createElement)(_blockEditor.RichTextToolbarButton, {
       name: "unknown",
       icon: _icons.help,

package/build/unknown/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_richText","_blockEditor","_icons","name","title","__","unknown","exports","tagName","className","edit","isActive","value","onChange","onFocus","onClick","removeFormat","selectedValue","slice","hasUnknownFormats","formats","some","format","type","_react","createElement","RichTextToolbarButton","icon","help"],"sources":["@wordpress/format-library/src/unknown/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { removeFormat, slice } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { help } from '@wordpress/icons';\n\nconst name = 'core/unknown';\nconst title = __( 'Clear Unknown Formatting' );\n\nexport const unknown = {\n\tname,\n\ttitle,\n\ttagName: '*',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tfunction onClick() {\n\t\t\tonChange( removeFormat( value, name ) );\n\t\t\tonFocus();\n\t\t}\n\n\t\tconst selectedValue = slice( value );\n\t\tconst hasUnknownFormats = selectedValue.formats.some( ( formats ) => {\n\t\t\treturn formats.some( ( format ) => format.type === name );\n\t\t} );\n\n\t\tif ( ! isActive && ! hasUnknownFormats ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\tname=\"unknown\"\n\t\t\t\ticon={ help }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive\n\t\t\t/>\n\t\t);\n\t},\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AANA;AACA;AACA;;AAMA,MAAMI,IAAI,GAAG,cAAc;AAC3B,MAAMC,KAAK,GAAG,IAAAC,QAAE,EAAE,0BAA2B,CAAC;AAEvC,MAAMC,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG;EACtBH,IAAI;EACJC,KAAK;EACLI,OAAO,EAAE,GAAG;EACZC,SAAS,EAAE,IAAI;EACfC,IAAIA,CAAE;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC;EAAQ,CAAC,EAAG;IAC9C,SAASC,OAAOA,CAAA,EAAG;MAClBF,QAAQ,CAAE,IAAAG,sBAAY,EAAEJ,KAAK,EAAET,IAAK,CAAE,CAAC;MACvCW,OAAO,CAAC,CAAC;IACV;IAEA,MAAMG,aAAa,GAAG,IAAAC,eAAK,EAAEN,KAAM,CAAC;IACpC,MAAMO,iBAAiB,GAAGF,aAAa,CAACG,OAAO,CAACC,IAAI,CAAID,OAAO,IAAM;MACpE,OAAOA,OAAO,CAACC,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACC,IAAI,KAAKpB,IAAK,CAAC;IAC1D,CAAE,CAAC;IAEH,IAAK,CAAEQ,QAAQ,IAAI,CAAEQ,iBAAiB,EAAG;MACxC,OAAO,IAAI;IACZ;IAEA,OACC,IAAAK,MAAA,CAAAC,aAAA,EAACxB,YAAA,CAAAyB,qBAAqB;MACrBvB,IAAI,EAAC,SAAS;MACdwB,IAAI,EAAGC,WAAM;MACbxB,KAAK,EAAGA,KAAO;MACfW,OAAO,EAAGA,OAAS;MACnBJ,QAAQ;IAAA,CACR,CAAC;EAEJ;AACD,CAAC"}
+{"version":3,"names":["_i18n","require","_richText","_blockEditor","_icons","name","title","__","selectionContainsUnknownFormats","value","isCollapsed","selectedValue","slice","formats","some","format","type","unknown","exports","tagName","className","edit","isActive","onChange","onFocus","onClick","removeFormat","_react","createElement","RichTextToolbarButton","icon","help"],"sources":["@wordpress/format-library/src/unknown/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { removeFormat, slice, isCollapsed } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { help } from '@wordpress/icons';\n\nconst name = 'core/unknown';\nconst title = __( 'Clear Unknown Formatting' );\n\nfunction selectionContainsUnknownFormats( value ) {\n\tif ( isCollapsed( value ) ) {\n\t\treturn false;\n\t}\n\n\tconst selectedValue = slice( value );\n\treturn selectedValue.formats.some( ( formats ) => {\n\t\treturn formats.some( ( format ) => format.type === name );\n\t} );\n}\n\nexport const unknown = {\n\tname,\n\ttitle,\n\ttagName: '*',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tif ( ! isActive && ! selectionContainsUnknownFormats( value ) ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tfunction onClick() {\n\t\t\tonChange( removeFormat( value, name ) );\n\t\t\tonFocus();\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\tname=\"unknown\"\n\t\t\t\ticon={ help }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive\n\t\t\t/>\n\t\t);\n\t},\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AANA;AACA;AACA;;AAMA,MAAMI,IAAI,GAAG,cAAc;AAC3B,MAAMC,KAAK,GAAG,IAAAC,QAAE,EAAE,0BAA2B,CAAC;AAE9C,SAASC,+BAA+BA,CAAEC,KAAK,EAAG;EACjD,IAAK,IAAAC,qBAAW,EAAED,KAAM,CAAC,EAAG;IAC3B,OAAO,KAAK;EACb;EAEA,MAAME,aAAa,GAAG,IAAAC,eAAK,EAAEH,KAAM,CAAC;EACpC,OAAOE,aAAa,CAACE,OAAO,CAACC,IAAI,CAAID,OAAO,IAAM;IACjD,OAAOA,OAAO,CAACC,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACC,IAAI,KAAKX,IAAK,CAAC;EAC1D,CAAE,CAAC;AACJ;AAEO,MAAMY,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG;EACtBZ,IAAI;EACJC,KAAK;EACLa,OAAO,EAAE,GAAG;EACZC,SAAS,EAAE,IAAI;EACfC,IAAIA,CAAE;IAAEC,QAAQ;IAAEb,KAAK;IAAEc,QAAQ;IAAEC;EAAQ,CAAC,EAAG;IAC9C,IAAK,CAAEF,QAAQ,IAAI,CAAEd,+BAA+B,CAAEC,KAAM,CAAC,EAAG;MAC/D,OAAO,IAAI;IACZ;IAEA,SAASgB,OAAOA,CAAA,EAAG;MAClBF,QAAQ,CAAE,IAAAG,sBAAY,EAAEjB,KAAK,EAAEJ,IAAK,CAAE,CAAC;MACvCmB,OAAO,CAAC,CAAC;IACV;IAEA,OACC,IAAAG,MAAA,CAAAC,aAAA,EAACzB,YAAA,CAAA0B,qBAAqB;MACrBxB,IAAI,EAAC,SAAS;MACdyB,IAAI,EAAGC,WAAM;MACbzB,KAAK,EAAGA,KAAO;MACfmB,OAAO,EAAGA,OAAS;MACnBH,QAAQ;IAAA,CACR,CAAC;EAEJ;AACD,CAAC"}

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

@@ -18,7 +18,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { getActiveColors } from './inline.js';
+import { getActiveColors } from './inline.native.js';
 import { default as InlineColorUI } from './inline';
 import styles from './style.scss';
 const name = 'core/text-color';

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

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","View","__","useCallback","useMemo","useState","BlockControls","useSettings","ToolbarGroup","ToolbarButton","useMobileGlobalStylesColors","Icon","color","colorIcon","textColor","textColorIcon","removeFormat","usePreferredColorSchemeStyle","getActiveColors","default","InlineColorUI","styles","name","title","getComputedStyleProperty","element","property","_element$props$style","style","props","backgroundColor","baseColors","background","fillComputedColors","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","enableIsAddingColor","disableIsAddingColor","colorIndicatorStyle","hasColorsToChoose","length","onPressButton","outlineStyle","borderWidth","hairlineWidth","isActiveStyle","customContainerStyles","createElement","Fragment","pointerEvents","icon","Object","keys","extraProps","onClick","onClose","tagName","className","attributes","class","edit"],"sources":["@wordpress/format-library/src/text-color/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { StyleSheet, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { BlockControls, useSettings } from '@wordpress/block-editor';\nimport {\n\tToolbarGroup,\n\tToolbarButton,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\nimport {\n\tIcon,\n\tcolor as colorIcon,\n\ttextColor as textColorIcon,\n} 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 { default as InlineColorUI } from './inline';\nimport styles from './style.scss';\n\nconst name = 'core/text-color';\nconst title = __( 'Text color' );\n\nfunction getComputedStyleProperty( element, property ) {\n\tconst style = element?.props?.style ?? {};\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 ] = useSettings( 'color.custom' );\n\tconst colors = useMobileGlobalStylesColors();\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst enableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( true ),\n\t\t[ setIsAddingColor ]\n\t);\n\tconst disableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( false ),\n\t\t[ setIsAddingColor ]\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 = colors.length || ! 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 = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-inline-color__outline' ],\n\t\t\tstyles[ 'components-inline-color__outline--dark' ]\n\t\t),\n\t\t{ borderWidth: StyleSheet.hairlineWidth },\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={\n\t\t\t\t\t\t\t\t\tObject.keys( activeAttributes ).length\n\t\t\t\t\t\t\t\t\t\t? textColorIcon\n\t\t\t\t\t\t\t\t\t\t: colorIcon\n\t\t\t\t\t\t\t\t}\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\tedit: TextColorEdit,\n};\n"],"mappings":"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"}
+{"version":3,"names":["StyleSheet","View","__","useCallback","useMemo","useState","BlockControls","useSettings","ToolbarGroup","ToolbarButton","useMobileGlobalStylesColors","Icon","color","colorIcon","textColor","textColorIcon","removeFormat","usePreferredColorSchemeStyle","getActiveColors","default","InlineColorUI","styles","name","title","getComputedStyleProperty","element","property","_element$props$style","style","props","backgroundColor","baseColors","background","fillComputedColors","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","enableIsAddingColor","disableIsAddingColor","colorIndicatorStyle","hasColorsToChoose","length","onPressButton","outlineStyle","borderWidth","hairlineWidth","isActiveStyle","customContainerStyles","createElement","Fragment","pointerEvents","icon","Object","keys","extraProps","onClick","onClose","tagName","className","attributes","class","edit"],"sources":["@wordpress/format-library/src/text-color/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { StyleSheet, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { BlockControls, useSettings } from '@wordpress/block-editor';\nimport {\n\tToolbarGroup,\n\tToolbarButton,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\nimport {\n\tIcon,\n\tcolor as colorIcon,\n\ttextColor as textColorIcon,\n} from '@wordpress/icons';\nimport { removeFormat } from '@wordpress/rich-text';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getActiveColors } from './inline.native.js';\nimport { default as InlineColorUI } from './inline';\nimport styles from './style.scss';\n\nconst name = 'core/text-color';\nconst title = __( 'Text color' );\n\nfunction getComputedStyleProperty( element, property ) {\n\tconst style = element?.props?.style ?? {};\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 ] = useSettings( 'color.custom' );\n\tconst colors = useMobileGlobalStylesColors();\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst enableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( true ),\n\t\t[ setIsAddingColor ]\n\t);\n\tconst disableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( false ),\n\t\t[ setIsAddingColor ]\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 = colors.length || ! 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 = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-inline-color__outline' ],\n\t\t\tstyles[ 'components-inline-color__outline--dark' ]\n\t\t),\n\t\t{ borderWidth: StyleSheet.hairlineWidth },\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={\n\t\t\t\t\t\t\t\t\tObject.keys( activeAttributes ).length\n\t\t\t\t\t\t\t\t\t\t? textColorIcon\n\t\t\t\t\t\t\t\t\t\t: colorIcon\n\t\t\t\t\t\t\t\t}\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\tedit: TextColorEdit,\n};\n"],"mappings":"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"}

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

@@ -22,7 +22,7 @@ function parseCSS(css = '') {
     return accumulator;
   }, {});
 }
-function getActiveColors(value, name, colorSettings) {
+export function getActiveColors(value, name, colorSettings) {
   const activeColorFormat = getActiveFormat(value, name);
   if (!activeColorFormat) {
     return {};
@@ -32,7 +32,7 @@ function getActiveColors(value, name, colorSettings) {
     ...parseClassName(activeColorFormat.attributes.class, colorSettings)
   };
 }
-function setColors(value, name, colorSettings, colors) {
+function setColors(value, name, colorSettings, colors, contentRef) {
   const {
     color,
     backgroundColor
@@ -40,7 +40,8 @@ function setColors(value, name, colorSettings, colors) {
     ...getActiveColors(value, name, colorSettings),
     ...colors
   };
-  if (!color && !backgroundColor) {
+  if (!color) {
+    contentRef?.onRemoveMarkFormatting();
     return removeFormat(value, name);
   }
   const styles = [];
@@ -68,55 +69,30 @@ function setColors(value, name, colorSettings, colors) {
     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] = [...(activeFormats?.filter(({
-      type
-    }) => type !== format.type) || []), format];
-    return newFormat;
-  } else if (hasNoSelection) {
-    return removeFormat(value, format);
+  if (hasNoSelection) {
+    contentRef?.onMarkFormatting(color);
   }
   return applyFormat(value, format);
 }
 function ColorPicker({
   name,
   value,
-  onChange
+  onChange,
+  contentRef
 }) {
   const property = 'color';
   const colors = useMobileGlobalStylesColors();
   const colorSettings = useMultipleOriginColorsAndGradients();
   const onColorChange = useCallback(color => {
-    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?.start === value?.end && value.text?.charAt(value?.end - 1) === ' ') {
-      onChange(removeFormat(value, name, value.end - 1, value.end));
-    } else {
-      onChange(removeFormat(value, name));
-    }
-  }, [colors, onChange, property]);
+    onChange(setColors(value, name, colors, {
+      [property]: color
+    }, contentRef));
+  }, [colors, contentRef, name, onChange, value]);
   const activeColors = useMemo(() => getActiveColors(value, name, colors), [name, value, colors]);
   return createElement(ColorSettings, {
     colorValue: activeColors[property],
     onColorChange: onColorChange,
+    onColorCleared: onColorChange,
     defaultSettings: colorSettings,
     hideNavigation: true
   });
@@ -125,7 +101,8 @@ export default function InlineColorUI({
   name,
   value,
   onChange,
-  onClose
+  onClose,
+  contentRef
 }) {
   return createElement(BottomSheet, {
     isVisible: true,
@@ -146,7 +123,8 @@ export default function InlineColorUI({
   }, createElement(ColorPicker, {
     name: name,
     value: value,
-    onChange: onChange
+    onChange: onChange,
+    contentRef: contentRef
   }))));
 }
 //# sourceMappingURL=inline.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useMemo","applyFormat","removeFormat","getActiveFormat","getColorClassName","getColorObjectByColorValue","useMultipleOriginColorsAndGradients","BottomSheet","ColorSettings","useMobileGlobalStylesColors","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","filter","ColorPicker","onChange","onColorChange","activeColors","createElement","colorValue","defaultSettings","hideNavigation","InlineColorUI","onClose","isVisible","hideHeader","contentStyle","paddingLeft","paddingRight","hasNavigation","leftButton","testID","NavigationContainer","animate","main","NavigationScreen"],"sources":["@wordpress/format-library/src/text-color/inline.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n} from '@wordpress/rich-text';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tuseMultipleOriginColorsAndGradients,\n} from '@wordpress/block-editor';\nimport {\n\tBottomSheet,\n\tColorSettings,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\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...( activeFormats?.filter(\n\t\t\t\t( { type } ) => type !== format.type\n\t\t\t) || [] ),\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 = useMobileGlobalStylesColors();\n\tconst colorSettings = useMultipleOriginColorsAndGradients();\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"],"mappings":"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"}
+{"version":3,"names":["useCallback","useMemo","applyFormat","removeFormat","getActiveFormat","getColorClassName","getColorObjectByColorValue","useMultipleOriginColorsAndGradients","BottomSheet","ColorSettings","useMobileGlobalStylesColors","transparentValue","parseClassName","parseCSS","css","split","reduce","accumulator","rule","property","value","replace","color","backgroundColor","getActiveColors","name","colorSettings","activeColorFormat","attributes","style","class","setColors","colors","contentRef","onRemoveMarkFormatting","styles","classNames","push","join","colorObject","slug","length","format","type","hasNoSelection","start","end","onMarkFormatting","ColorPicker","onChange","onColorChange","activeColors","createElement","colorValue","onColorCleared","defaultSettings","hideNavigation","InlineColorUI","onClose","isVisible","hideHeader","contentStyle","paddingLeft","paddingRight","hasNavigation","leftButton","testID","NavigationContainer","animate","main","NavigationScreen"],"sources":["@wordpress/format-library/src/text-color/inline.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n} from '@wordpress/rich-text';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tuseMultipleOriginColorsAndGradients,\n} from '@wordpress/block-editor';\nimport {\n\tBottomSheet,\n\tColorSettings,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\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\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, contentRef ) {\n\tconst { color, backgroundColor } = {\n\t\t...getActiveColors( value, name, colorSettings ),\n\t\t...colors,\n\t};\n\n\tif ( ! color ) {\n\t\tcontentRef?.onRemoveMarkFormatting();\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\n\tif ( hasNoSelection ) {\n\t\tcontentRef?.onMarkFormatting( color );\n\t}\n\treturn applyFormat( value, format );\n}\n\nfunction ColorPicker( { name, value, onChange, contentRef } ) {\n\tconst property = 'color';\n\tconst colors = useMobileGlobalStylesColors();\n\tconst colorSettings = useMultipleOriginColorsAndGradients();\n\n\tconst onColorChange = useCallback(\n\t\t( color ) => {\n\t\t\tonChange(\n\t\t\t\tsetColors(\n\t\t\t\t\tvalue,\n\t\t\t\t\tname,\n\t\t\t\t\tcolors,\n\t\t\t\t\t{ [ property ]: color },\n\t\t\t\t\tcontentRef\n\t\t\t\t)\n\t\t\t);\n\t\t},\n\t\t[ colors, contentRef, name, onChange, value ]\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\tonColorCleared={ onColorChange }\n\t\t\tdefaultSettings={ colorSettings }\n\t\t\thideNavigation\n\t\t/>\n\t);\n}\n\nexport default function InlineColorUI( {\n\tname,\n\tvalue,\n\tonChange,\n\tonClose,\n\tcontentRef,\n} ) {\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\tcontentRef={ contentRef }\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"],"mappings":"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"}

package/build-module/unknown/index.js

@@ -3,11 +3,20 @@ import { createElement } from "react";
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { removeFormat, slice } from '@wordpress/rich-text';
+import { removeFormat, slice, isCollapsed } from '@wordpress/rich-text';
 import { RichTextToolbarButton } from '@wordpress/block-editor';
 import { help } from '@wordpress/icons';
 const name = 'core/unknown';
 const title = __('Clear Unknown Formatting');
+function selectionContainsUnknownFormats(value) {
+  if (isCollapsed(value)) {
+    return false;
+  }
+  const selectedValue = slice(value);
+  return selectedValue.formats.some(formats => {
+    return formats.some(format => format.type === name);
+  });
+}
 export const unknown = {
   name,
   title,
@@ -19,17 +28,13 @@ export const unknown = {
     onChange,
     onFocus
   }) {
+    if (!isActive && !selectionContainsUnknownFormats(value)) {
+      return null;
+    }
     function onClick() {
       onChange(removeFormat(value, name));
       onFocus();
     }
-    const selectedValue = slice(value);
-    const hasUnknownFormats = selectedValue.formats.some(formats => {
-      return formats.some(format => format.type === name);
-    });
-    if (!isActive && !hasUnknownFormats) {
-      return null;
-    }
     return createElement(RichTextToolbarButton, {
       name: "unknown",
       icon: help,

package/build-module/unknown/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","removeFormat","slice","RichTextToolbarButton","help","name","title","unknown","tagName","className","edit","isActive","value","onChange","onFocus","onClick","selectedValue","hasUnknownFormats","formats","some","format","type","createElement","icon"],"sources":["@wordpress/format-library/src/unknown/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { removeFormat, slice } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { help } from '@wordpress/icons';\n\nconst name = 'core/unknown';\nconst title = __( 'Clear Unknown Formatting' );\n\nexport const unknown = {\n\tname,\n\ttitle,\n\ttagName: '*',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tfunction onClick() {\n\t\t\tonChange( removeFormat( value, name ) );\n\t\t\tonFocus();\n\t\t}\n\n\t\tconst selectedValue = slice( value );\n\t\tconst hasUnknownFormats = selectedValue.formats.some( ( formats ) => {\n\t\t\treturn formats.some( ( format ) => format.type === name );\n\t\t} );\n\n\t\tif ( ! isActive && ! hasUnknownFormats ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\tname=\"unknown\"\n\t\t\t\ticon={ help }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive\n\t\t\t/>\n\t\t);\n\t},\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,YAAY,EAAEC,KAAK,QAAQ,sBAAsB;AAC1D,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,MAAMC,IAAI,GAAG,cAAc;AAC3B,MAAMC,KAAK,GAAGN,EAAE,CAAE,0BAA2B,CAAC;AAE9C,OAAO,MAAMO,OAAO,GAAG;EACtBF,IAAI;EACJC,KAAK;EACLE,OAAO,EAAE,GAAG;EACZC,SAAS,EAAE,IAAI;EACfC,IAAIA,CAAE;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC;EAAQ,CAAC,EAAG;IAC9C,SAASC,OAAOA,CAAA,EAAG;MAClBF,QAAQ,CAAEZ,YAAY,CAAEW,KAAK,EAAEP,IAAK,CAAE,CAAC;MACvCS,OAAO,CAAC,CAAC;IACV;IAEA,MAAME,aAAa,GAAGd,KAAK,CAAEU,KAAM,CAAC;IACpC,MAAMK,iBAAiB,GAAGD,aAAa,CAACE,OAAO,CAACC,IAAI,CAAID,OAAO,IAAM;MACpE,OAAOA,OAAO,CAACC,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACC,IAAI,KAAKhB,IAAK,CAAC;IAC1D,CAAE,CAAC;IAEH,IAAK,CAAEM,QAAQ,IAAI,CAAEM,iBAAiB,EAAG;MACxC,OAAO,IAAI;IACZ;IAEA,OACCK,aAAA,CAACnB,qBAAqB;MACrBE,IAAI,EAAC,SAAS;MACdkB,IAAI,EAAGnB,IAAM;MACbE,KAAK,EAAGA,KAAO;MACfS,OAAO,EAAGA,OAAS;MACnBJ,QAAQ;IAAA,CACR,CAAC;EAEJ;AACD,CAAC"}
+{"version":3,"names":["__","removeFormat","slice","isCollapsed","RichTextToolbarButton","help","name","title","selectionContainsUnknownFormats","value","selectedValue","formats","some","format","type","unknown","tagName","className","edit","isActive","onChange","onFocus","onClick","createElement","icon"],"sources":["@wordpress/format-library/src/unknown/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { removeFormat, slice, isCollapsed } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { help } from '@wordpress/icons';\n\nconst name = 'core/unknown';\nconst title = __( 'Clear Unknown Formatting' );\n\nfunction selectionContainsUnknownFormats( value ) {\n\tif ( isCollapsed( value ) ) {\n\t\treturn false;\n\t}\n\n\tconst selectedValue = slice( value );\n\treturn selectedValue.formats.some( ( formats ) => {\n\t\treturn formats.some( ( format ) => format.type === name );\n\t} );\n}\n\nexport const unknown = {\n\tname,\n\ttitle,\n\ttagName: '*',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tif ( ! isActive && ! selectionContainsUnknownFormats( value ) ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tfunction onClick() {\n\t\t\tonChange( removeFormat( value, name ) );\n\t\t\tonFocus();\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\tname=\"unknown\"\n\t\t\t\ticon={ help }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive\n\t\t\t/>\n\t\t);\n\t},\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,YAAY,EAAEC,KAAK,EAAEC,WAAW,QAAQ,sBAAsB;AACvE,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,MAAMC,IAAI,GAAG,cAAc;AAC3B,MAAMC,KAAK,GAAGP,EAAE,CAAE,0BAA2B,CAAC;AAE9C,SAASQ,+BAA+BA,CAAEC,KAAK,EAAG;EACjD,IAAKN,WAAW,CAAEM,KAAM,CAAC,EAAG;IAC3B,OAAO,KAAK;EACb;EAEA,MAAMC,aAAa,GAAGR,KAAK,CAAEO,KAAM,CAAC;EACpC,OAAOC,aAAa,CAACC,OAAO,CAACC,IAAI,CAAID,OAAO,IAAM;IACjD,OAAOA,OAAO,CAACC,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACC,IAAI,KAAKR,IAAK,CAAC;EAC1D,CAAE,CAAC;AACJ;AAEA,OAAO,MAAMS,OAAO,GAAG;EACtBT,IAAI;EACJC,KAAK;EACLS,OAAO,EAAE,GAAG;EACZC,SAAS,EAAE,IAAI;EACfC,IAAIA,CAAE;IAAEC,QAAQ;IAAEV,KAAK;IAAEW,QAAQ;IAAEC;EAAQ,CAAC,EAAG;IAC9C,IAAK,CAAEF,QAAQ,IAAI,CAAEX,+BAA+B,CAAEC,KAAM,CAAC,EAAG;MAC/D,OAAO,IAAI;IACZ;IAEA,SAASa,OAAOA,CAAA,EAAG;MAClBF,QAAQ,CAAEnB,YAAY,CAAEQ,KAAK,EAAEH,IAAK,CAAE,CAAC;MACvCe,OAAO,CAAC,CAAC;IACV;IAEA,OACCE,aAAA,CAACnB,qBAAqB;MACrBE,IAAI,EAAC,SAAS;MACdkB,IAAI,EAAGnB,IAAM;MACbE,KAAK,EAAGA,KAAO;MACfe,OAAO,EAAGA,OAAS;MACnBH,QAAQ;IAAA,CACR,CAAC;EAEJ;AACD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "4.31.0",
+	"version": "4.32.0",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,18 +26,18 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.54.0",
-		"@wordpress/block-editor": "^12.22.0",
-		"@wordpress/components": "^27.2.0",
-		"@wordpress/compose": "^6.31.0",
-		"@wordpress/data": "^9.24.0",
-		"@wordpress/element": "^5.31.0",
-		"@wordpress/html-entities": "^3.54.0",
-		"@wordpress/i18n": "^4.54.0",
-		"@wordpress/icons": "^9.45.0",
-		"@wordpress/private-apis": "^0.36.0",
-		"@wordpress/rich-text": "^6.31.0",
-		"@wordpress/url": "^3.55.0"
+		"@wordpress/a11y": "^3.55.0",
+		"@wordpress/block-editor": "^12.23.0",
+		"@wordpress/components": "^27.3.0",
+		"@wordpress/compose": "^6.32.0",
+		"@wordpress/data": "^9.25.0",
+		"@wordpress/element": "^5.32.0",
+		"@wordpress/html-entities": "^3.55.0",
+		"@wordpress/i18n": "^4.55.0",
+		"@wordpress/icons": "^9.46.0",
+		"@wordpress/private-apis": "^0.37.0",
+		"@wordpress/rich-text": "^6.32.0",
+		"@wordpress/url": "^3.56.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ffc07735d0abfb3f69e91d48f25b7fe8d1ef92d2"
+	"gitHead": "ac2b13783c28f959770cf029a797a712f59e1958"
 }

package/src/text-color/index.native.js

@@ -25,7 +25,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { getActiveColors } from './inline.js';
+import { getActiveColors } from './inline.native.js';
 import { default as InlineColorUI } from './inline';
 import styles from './style.scss';
 

package/src/text-color/inline.native.js

@@ -36,7 +36,7 @@ function parseCSS( css = '' ) {
 	}, {} );
 }
 
-function getActiveColors( value, name, colorSettings ) {
+export function getActiveColors( value, name, colorSettings ) {
 	const activeColorFormat = getActiveFormat( value, name );
 
 	if ( ! activeColorFormat ) {
@@ -49,13 +49,14 @@ function getActiveColors( value, name, colorSettings ) {
 	};
 }
 
-function setColors( value, name, colorSettings, colors ) {
+function setColors( value, name, colorSettings, colors, contentRef ) {
 	const { color, backgroundColor } = {
 		...getActiveColors( value, name, colorSettings ),
 		...colors,
 	};
 
-	if ( ! color && ! backgroundColor ) {
+	if ( ! color ) {
+		contentRef?.onRemoveMarkFormatting();
 		return removeFormat( value, name );
 	}
 
@@ -86,62 +87,31 @@ function setColors( value, name, colorSettings, colors ) {
 
 	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 ] = [
-			...( activeFormats?.filter(
-				( { type } ) => type !== format.type
-			) || [] ),
-			format,
-		];
-		return newFormat;
-	} else if ( hasNoSelection ) {
-		return removeFormat( value, format );
-	}
 
+	if ( hasNoSelection ) {
+		contentRef?.onMarkFormatting( color );
+	}
 	return applyFormat( value, format );
 }
 
-function ColorPicker( { name, value, onChange } ) {
+function ColorPicker( { name, value, onChange, contentRef } ) {
 	const property = 'color';
 	const colors = useMobileGlobalStylesColors();
 	const colorSettings = useMultipleOriginColorsAndGradients();
 
 	const onColorChange = useCallback(
 		( color ) => {
-			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?.start === value?.end &&
-				value.text?.charAt( value?.end - 1 ) === ' '
-			) {
-				onChange(
-					removeFormat( value, name, value.end - 1, value.end )
-				);
-			} else {
-				onChange( removeFormat( value, name ) );
-			}
+			onChange(
+				setColors(
+					value,
+					name,
+					colors,
+					{ [ property ]: color },
+					contentRef
+				)
+			);
 		},
-		[ colors, onChange, property ]
+		[ colors, contentRef, name, onChange, value ]
 	);
 	const activeColors = useMemo(
 		() => getActiveColors( value, name, colors ),
@@ -152,13 +122,20 @@ function ColorPicker( { name, value, onChange } ) {
 		<ColorSettings
 			colorValue={ activeColors[ property ] }
 			onColorChange={ onColorChange }
+			onColorCleared={ onColorChange }
 			defaultSettings={ colorSettings }
 			hideNavigation
 		/>
 	);
 }
 
-export default function InlineColorUI( { name, value, onChange, onClose } ) {
+export default function InlineColorUI( {
+	name,
+	value,
+	onChange,
+	onClose,
+	contentRef,
+} ) {
 	return (
 		<BottomSheet
 			isVisible
@@ -175,6 +152,7 @@ export default function InlineColorUI( { name, value, onChange, onClose } ) {
 						name={ name }
 						value={ value }
 						onChange={ onChange }
+						contentRef={ contentRef }
 					/>
 				</BottomSheet.NavigationScreen>
 			</BottomSheet.NavigationContainer>

package/src/text-color/test/__snapshots__/index.native.js.snap

@@ -6,12 +6,6 @@ exports[`Text color allows toggling the highlight color feature to selected text
 <!-- /wp:paragraph -->"
 `;
 
-exports[`Text color allows toggling the highlight color feature to type new text 1`] = `
-"<!-- wp:paragraph -->
-<p><mark style="background-color:rgba(0, 0, 0, 0);color:#f78da7" class="has-inline-color has-pale-pink-color"></mark></p>
-<!-- /wp:paragraph -->"
-`;
-
 exports[`Text color creates a paragraph block with the text color format 1`] = `
 "<!-- wp:paragraph -->
 <p>Hello <mark style="background-color:rgba(0,0,0,0);color:#cf2e2e" class="has-inline-color has-vivid-red-color">this is a test</mark></p>

package/src/text-color/test/index.native.js

@@ -64,45 +64,6 @@ describe( 'Text color', () => {
 		expect( textColorButton ).toBeDefined();
 	} );
 
-	it( 'allows toggling the highlight color feature to type new text', async () => {
-		const screen = await initializeEditor();
-
-		// Wait for the editor placeholder
-		const paragraphPlaceholder = await screen.findByLabelText(
-			'Add paragraph block'
-		);
-		expect( paragraphPlaceholder ).toBeDefined();
-		fireEvent.press( paragraphPlaceholder );
-
-		// Wait for the block to be created
-		const [ paragraphBlock ] = await screen.findAllByLabelText(
-			/Paragraph Block\. Row 1/
-		);
-		expect( paragraphBlock ).toBeDefined();
-
-		// Look for the highlight text color button
-		const textColorButton = await screen.findByLabelText( 'Text color' );
-		expect( textColorButton ).toBeDefined();
-		fireEvent.press( textColorButton );
-
-		// Wait for Inline color modal to be visible
-		const inlineTextColorModal = screen.getByTestId(
-			'inline-text-color-modal'
-		);
-		await waitFor( () => inlineTextColorModal.props.isVisible );
-
-		// Look for the pink color button
-		const pinkColorButton = await screen.findByA11yHint( COLOR_PINK );
-		expect( pinkColorButton ).toBeDefined();
-		fireEvent.press( pinkColorButton );
-		// TODO(jest-console): Fix the warning and remove the expect below.
-		expect( console ).toHaveWarnedWith(
-			`Non-serializable values were found in the navigation state. Check:\n\ntext-color > Palette > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
-		);
-
-		expect( getEditorHtml() ).toMatchSnapshot();
-	} );
-
 	it( 'allows toggling the highlight color feature to selected text', async () => {
 		const screen = await initializeEditor();
 		const text = 'Hello this is a test';
@@ -145,6 +106,10 @@ describe( 'Text color', () => {
 		const pinkColorButton = await screen.findByA11yHint( COLOR_PINK );
 		expect( pinkColorButton ).toBeDefined();
 		fireEvent.press( pinkColorButton );
+		// TODO(jest-console): Fix the warning and remove the expect below.
+		expect( console ).toHaveWarnedWith(
+			`Non-serializable values were found in the navigation state. Check:\n\ntext-color > Palette > params.onColorChange (Function)\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`
+		);
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );

package/src/unknown/index.js

@@ -2,33 +2,39 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { removeFormat, slice } from '@wordpress/rich-text';
+import { removeFormat, slice, isCollapsed } from '@wordpress/rich-text';
 import { RichTextToolbarButton } from '@wordpress/block-editor';
 import { help } from '@wordpress/icons';
 
 const name = 'core/unknown';
 const title = __( 'Clear Unknown Formatting' );
 
+function selectionContainsUnknownFormats( value ) {
+	if ( isCollapsed( value ) ) {
+		return false;
+	}
+
+	const selectedValue = slice( value );
+	return selectedValue.formats.some( ( formats ) => {
+		return formats.some( ( format ) => format.type === name );
+	} );
+}
+
 export const unknown = {
 	name,
 	title,
 	tagName: '*',
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
+		if ( ! isActive && ! selectionContainsUnknownFormats( value ) ) {
+			return null;
+		}
+
 		function onClick() {
 			onChange( removeFormat( value, name ) );
 			onFocus();
 		}
 
-		const selectedValue = slice( value );
-		const hasUnknownFormats = selectedValue.formats.some( ( formats ) => {
-			return formats.some( ( format ) => format.type === name );
-		} );
-
-		if ( ! isActive && ! hasUnknownFormats ) {
-			return null;
-		}
-
 		return (
 			<RichTextToolbarButton
 				name="unknown"