@wordpress/format-library 4.19.2 → 4.19.3

package/build/text-color/inline.js

@@ -118,6 +118,11 @@ function InlineColorUI({
   onClose,
   contentRef
 }) {
+  const popoverAnchor = (0, _richText.useAnchor)({
+    editableContentElement: contentRef.current,
+    settings: _index.textColor
+  });
+
   /*
    As you change the text color by typing a HEX value into a field,
    the return value of document.getSelection jumps to the field you're editing,
@@ -125,10 +130,8 @@ function InlineColorUI({
    it will return null, since it can't find the <mark> element within the HEX input.
    This caches the last truthy value of the selection anchor reference.
    */
-  const popoverAnchor = (0, _blockEditor.useCachedTruthy)((0, _richText.useAnchor)({
-    editableContentElement: contentRef.current,
-    settings: _index.textColor
-  }));
+  const cachedRect = (0, _blockEditor.useCachedTruthy)(popoverAnchor.getBoundingClientRect());
+  popoverAnchor.getBoundingClientRect = () => cachedRect;
   return (0, _element.createElement)(_components.Popover, {
     onClose: onClose,
     className: "components-inline-color-popover",

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_data","_richText","_blockEditor","_components","_i18n","_index","parseCSS","css","split","reduce","accumulator","rule","property","value","color","transparentValue","backgroundColor","parseClassName","className","colorSettings","name","startsWith","endsWith","colorSlug","replace","colorObject","getColorObjectByAttributeValues","getActiveColors","activeColorFormat","getActiveFormat","attributes","style","class","setColors","colors","removeFormat","styles","classNames","push","join","getColorObjectByColorValue","getColorClassName","slug","length","applyFormat","type","ColorPicker","onChange","useSelect","select","_getSettings$colors","getSettings","blockEditorStore","onColorChange","useCallback","activeColors","useMemo","createElement","ColorPalette","InlineColorUI","onClose","contentRef","popoverAnchor","useCachedTruthy","useAnchor","editableContentElement","current","settings","Popover","anchor","TabPanel","tabs","title","__","tab"],"sources":["@wordpress/format-library/src/text-color/inline.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n\tuseAnchor,\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 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 useAnchor 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 popoverAnchor = useCachedTruthy(\n\t\tuseAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t\tsettings,\n\t\t} )\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\tanchor={ popoverAnchor }\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"],"mappings":"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"}
+{"version":3,"names":["_element","require","_data","_richText","_blockEditor","_components","_i18n","_index","parseCSS","css","split","reduce","accumulator","rule","property","value","color","transparentValue","backgroundColor","parseClassName","className","colorSettings","name","startsWith","endsWith","colorSlug","replace","colorObject","getColorObjectByAttributeValues","getActiveColors","activeColorFormat","getActiveFormat","attributes","style","class","setColors","colors","removeFormat","styles","classNames","push","join","getColorObjectByColorValue","getColorClassName","slug","length","applyFormat","type","ColorPicker","onChange","useSelect","select","_getSettings$colors","getSettings","blockEditorStore","onColorChange","useCallback","activeColors","useMemo","createElement","ColorPalette","InlineColorUI","onClose","contentRef","popoverAnchor","useAnchor","editableContentElement","current","settings","cachedRect","useCachedTruthy","getBoundingClientRect","Popover","anchor","TabPanel","tabs","title","__","tab"],"sources":["@wordpress/format-library/src/text-color/inline.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n\tuseAnchor,\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 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\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings,\n\t} );\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 useAnchor 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 cachedRect = useCachedTruthy( popoverAnchor.getBoundingClientRect() );\n\tpopoverAnchor.getBoundingClientRect = () => cachedRect;\n\n\treturn (\n\t\t<Popover\n\t\t\tonClose={ onClose }\n\t\t\tclassName=\"components-inline-color-popover\"\n\t\t\tanchor={ popoverAnchor }\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"],"mappings":"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"}

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

@@ -110,6 +110,11 @@ export default function InlineColorUI({
   onClose,
   contentRef
 }) {
+  const popoverAnchor = useAnchor({
+    editableContentElement: contentRef.current,
+    settings
+  });
+
   /*
    As you change the text color by typing a HEX value into a field,
    the return value of document.getSelection jumps to the field you're editing,
@@ -117,10 +122,8 @@ export default function InlineColorUI({
    it will return null, since it can't find the <mark> element within the HEX input.
    This caches the last truthy value of the selection anchor reference.
    */
-  const popoverAnchor = useCachedTruthy(useAnchor({
-    editableContentElement: contentRef.current,
-    settings
-  }));
+  const cachedRect = useCachedTruthy(popoverAnchor.getBoundingClientRect());
+  popoverAnchor.getBoundingClientRect = () => cachedRect;
   return createElement(Popover, {
     onClose: onClose,
     className: "components-inline-color-popover",

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

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useMemo","useSelect","applyFormat","removeFormat","getActiveFormat","useAnchor","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$colors","getSettings","onColorChange","activeColors","createElement","InlineColorUI","onClose","contentRef","popoverAnchor","editableContentElement","current","anchor","tabs","title","tab"],"sources":["@wordpress/format-library/src/text-color/inline.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n\tuseAnchor,\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 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 useAnchor 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 popoverAnchor = useCachedTruthy(\n\t\tuseAnchor( {\n\t\t\teditableContentElement: contentRef.current,\n\t\t\tsettings,\n\t\t} )\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\tanchor={ popoverAnchor }\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"],"mappings":"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"}
+{"version":3,"names":["useCallback","useMemo","useSelect","applyFormat","removeFormat","getActiveFormat","useAnchor","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$colors","getSettings","onColorChange","activeColors","createElement","InlineColorUI","onClose","contentRef","popoverAnchor","editableContentElement","current","cachedRect","getBoundingClientRect","anchor","tabs","title","tab"],"sources":["@wordpress/format-library/src/text-color/inline.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n\tuseAnchor,\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 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\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings,\n\t} );\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 useAnchor 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 cachedRect = useCachedTruthy( popoverAnchor.getBoundingClientRect() );\n\tpopoverAnchor.getBoundingClientRect = () => cachedRect;\n\n\treturn (\n\t\t<Popover\n\t\t\tonClose={ onClose }\n\t\t\tclassName=\"components-inline-color-popover\"\n\t\t\tanchor={ popoverAnchor }\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"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "4.19.2",
+	"version": "4.19.3",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,17 +26,17 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.42.2",
-		"@wordpress/block-editor": "^12.10.2",
-		"@wordpress/components": "^25.8.2",
-		"@wordpress/compose": "^6.19.2",
-		"@wordpress/data": "^9.12.2",
-		"@wordpress/element": "^5.19.2",
-		"@wordpress/html-entities": "^3.42.2",
-		"@wordpress/i18n": "^4.42.2",
-		"@wordpress/icons": "^9.33.2",
-		"@wordpress/rich-text": "^6.19.2",
-		"@wordpress/url": "^3.43.2"
+		"@wordpress/a11y": "^3.42.3",
+		"@wordpress/block-editor": "^12.10.3",
+		"@wordpress/components": "^25.8.3",
+		"@wordpress/compose": "^6.19.3",
+		"@wordpress/data": "^9.12.3",
+		"@wordpress/element": "^5.19.3",
+		"@wordpress/html-entities": "^3.42.3",
+		"@wordpress/i18n": "^4.42.3",
+		"@wordpress/icons": "^9.33.3",
+		"@wordpress/rich-text": "^6.19.3",
+		"@wordpress/url": "^3.43.3"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5d2e3d07cc97af8090fc32c1e5d5013a2967e752"
+	"gitHead": "6256f93c37705d142f75a99f1fc808540ca7dca8"
 }

package/src/text-color/inline.js

@@ -137,6 +137,11 @@ export default function InlineColorUI( {
 	onClose,
 	contentRef,
 } ) {
+	const popoverAnchor = useAnchor( {
+		editableContentElement: contentRef.current,
+		settings,
+	} );
+
 	/*
 	 As you change the text color by typing a HEX value into a field,
 	 the return value of document.getSelection jumps to the field you're editing,
@@ -144,12 +149,8 @@ export default function InlineColorUI( {
 	 it will return null, since it can't find the <mark> element within the HEX input.
 	 This caches the last truthy value of the selection anchor reference.
 	 */
-	const popoverAnchor = useCachedTruthy(
-		useAnchor( {
-			editableContentElement: contentRef.current,
-			settings,
-		} )
-	);
+	const cachedRect = useCachedTruthy( popoverAnchor.getBoundingClientRect() );
+	popoverAnchor.getBoundingClientRect = () => cachedRect;
 
 	return (
 		<Popover