@wordpress/format-library 4.31.0 → 4.33.0

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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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["__","toggleFormat","RichTextShortcut","__unstableRichTextInputEvent","name","title","underline","tagName","className","attributes","style","edit","value","onChange","onToggle","type","createElement","Fragment","character","onUse","inputType","onInput"],"sources":["@wordpress/format-library/src/underline/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport {\n\tRichTextShortcut,\n\t__unstableRichTextInputEvent,\n} from '@wordpress/block-editor';\n\nconst name = 'core/underline';\nconst title = __( 'Underline' );\n\nexport const underline = {\n\tname,\n\ttitle,\n\ttagName: 'span',\n\tclassName: null,\n\tattributes: {\n\t\tstyle: 'style',\n\t},\n\tedit( { value, onChange } ) {\n\t\tconst onToggle = () => {\n\t\t\tonChange(\n\t\t\t\ttoggleFormat( value, {\n\t\t\t\t\ttype: name,\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tstyle: 'text-decoration: underline;',\n\t\t\t\t\t},\n\t\t\t\t\ttitle,\n\t\t\t\t} )\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<RichTextShortcut\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\tcharacter=\"u\"\n\t\t\t\t\tonUse={ onToggle }\n\t\t\t\t/>\n\t\t\t\t<__unstableRichTextInputEvent\n\t\t\t\t\tinputType=\"formatUnderline\"\n\t\t\t\t\tonInput={ onToggle }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,YAAY,QAAQ,sBAAsB;AACnD,SACCC,gBAAgB,EAChBC,4BAA4B,QACtB,yBAAyB;AAEhC,MAAMC,IAAI,GAAG,gBAAgB;AAC7B,MAAMC,KAAK,GAAGL,EAAE,CAAE,WAAY,CAAC;AAE/B,OAAO,MAAMM,SAAS,GAAG;EACxBF,IAAI;EACJC,KAAK;EACLE,OAAO,EAAE,MAAM;EACfC,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE;IACXC,KAAK,EAAE;EACR,CAAC;EACDC,IAAIA,CAAE;IAAEC,KAAK;IAAEC;EAAS,CAAC,EAAG;IAC3B,MAAMC,QAAQ,GAAGA,CAAA,KAAM;MACtBD,QAAQ,CACPZ,YAAY,CAAEW,KAAK,EAAE;QACpBG,IAAI,EAAEX,IAAI;QACVK,UAAU,EAAE;UACXC,KAAK,EAAE;QACR,CAAC;QACDL;MACD,CAAE,CACH,CAAC;IACF,CAAC;IAED,OACCW,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACd,gBAAgB;MAChBa,IAAI,EAAC,SAAS;MACdG,SAAS,EAAC,GAAG;MACbC,KAAK,EAAGL;IAAU,CAClB,CAAC,EACFE,aAAA,CAACb,4BAA4B;MAC5BiB,SAAS,EAAC,iBAAiB;MAC3BC,OAAO,EAAGP;IAAU,CACpB,CACA,CAAC;EAEL;AACD,CAAC"}
+{"version":3,"names":["__","toggleFormat","RichTextShortcut","__unstableRichTextInputEvent","name","title","underline","tagName","className","attributes","style","edit","value","onChange","onToggle","type","createElement","Fragment","character","onUse","inputType","onInput"],"sources":["@wordpress/format-library/src/underline/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport {\n\tRichTextShortcut,\n\t__unstableRichTextInputEvent,\n} from '@wordpress/block-editor';\n\nconst name = 'core/underline';\nconst title = __( 'Underline' );\n\nexport const underline = {\n\tname,\n\ttitle,\n\ttagName: 'span',\n\tclassName: null,\n\tattributes: {\n\t\tstyle: 'style',\n\t},\n\tedit( { value, onChange } ) {\n\t\tconst onToggle = () => {\n\t\t\tonChange(\n\t\t\t\ttoggleFormat( value, {\n\t\t\t\t\ttype: name,\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tstyle: 'text-decoration: underline;',\n\t\t\t\t\t},\n\t\t\t\t\ttitle,\n\t\t\t\t} )\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<RichTextShortcut\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\tcharacter=\"u\"\n\t\t\t\t\tonUse={ onToggle }\n\t\t\t\t/>\n\t\t\t\t<__unstableRichTextInputEvent\n\t\t\t\t\tinputType=\"formatUnderline\"\n\t\t\t\t\tonInput={ onToggle }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,YAAY,QAAQ,sBAAsB;AACnD,SACCC,gBAAgB,EAChBC,4BAA4B,QACtB,yBAAyB;AAEhC,MAAMC,IAAI,GAAG,gBAAgB;AAC7B,MAAMC,KAAK,GAAGL,EAAE,CAAE,WAAY,CAAC;AAE/B,OAAO,MAAMM,SAAS,GAAG;EACxBF,IAAI;EACJC,KAAK;EACLE,OAAO,EAAE,MAAM;EACfC,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE;IACXC,KAAK,EAAE;EACR,CAAC;EACDC,IAAIA,CAAE;IAAEC,KAAK;IAAEC;EAAS,CAAC,EAAG;IAC3B,MAAMC,QAAQ,GAAGA,CAAA,KAAM;MACtBD,QAAQ,CACPZ,YAAY,CAAEW,KAAK,EAAE;QACpBG,IAAI,EAAEX,IAAI;QACVK,UAAU,EAAE;UACXC,KAAK,EAAE;QACR,CAAC;QACDL;MACD,CAAE,CACH,CAAC;IACF,CAAC;IAED,OACCW,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACd,gBAAgB;MAChBa,IAAI,EAAC,SAAS;MACdG,SAAS,EAAC,GAAG;MACbC,KAAK,EAAGL;IAAU,CAClB,CAAC,EACFE,aAAA,CAACb,4BAA4B;MAC5BiB,SAAS,EAAC,iBAAiB;MAC3BC,OAAO,EAAGP;IAAU,CACpB,CACA,CAAC;EAEL;AACD,CAAC","ignoreList":[]}

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","ignoreList":[]}

package/build-style/style-rtl.css

@@ -96,7 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: #9747ff;
+  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {

package/build-style/style.css

@@ -96,7 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
-  --wp-bound-block-color: #9747ff;
+  --wp-bound-block-color: var(--wp-block-synced-color);
 }
 @media (min-resolution: 192dpi) {
   :root {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "4.31.0",
+	"version": "4.33.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.56.0",
+		"@wordpress/block-editor": "^12.24.0",
+		"@wordpress/components": "^27.4.0",
+		"@wordpress/compose": "^6.33.0",
+		"@wordpress/data": "^9.26.0",
+		"@wordpress/element": "^5.33.0",
+		"@wordpress/html-entities": "^3.56.0",
+		"@wordpress/i18n": "^4.56.0",
+		"@wordpress/icons": "^9.47.0",
+		"@wordpress/private-apis": "^0.38.0",
+		"@wordpress/rich-text": "^6.33.0",
+		"@wordpress/url": "^3.57.0"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ffc07735d0abfb3f69e91d48f25b7fe8d1ef92d2"
+	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
 }

package/src/link/index.js

@@ -38,36 +38,17 @@ function Edit( {
 	onFocus,
 	contentRef,
 } ) {
-	const [ editingLink, setEditingLink ] = useState( false );
-	const [ creatingLink, setCreatingLink ] = useState( false );
+	const [ addingLink, setAddingLink ] = useState( false );
 
 	// We only need to store the button element that opened the popover. We can ignore the other states, as they will be handled by the onFocus prop to return to the rich text field.
 	const [ openedBy, setOpenedBy ] = useState( null );
 
-	// Manages whether the Link UI popover should autofocus when shown.
-	const [ shouldAutoFocus, setShouldAutoFocus ] = useState( true );
-
-	function setIsEditingLink( isEditing, { autoFocus = true } = {} ) {
-		setEditingLink( isEditing );
-		setShouldAutoFocus( autoFocus );
-	}
-
-	function setIsCreatingLink( isCreating ) {
-		// Don't add a new link if there is already an active link.
-		// The two states are mutually exclusive.
-		if ( isCreating === true && isActive ) {
-			return;
-		}
-		setCreatingLink( isCreating );
-	}
-
 	useEffect( () => {
 		// When the link becomes inactive (i.e. isActive is false), reset the editingLink state
 		// and the creatingLink state. This means that if the Link UI is displayed and the link
 		// becomes inactive (e.g. used arrow keys to move cursor outside of link bounds), the UI will close.
 		if ( ! isActive ) {
-			setEditingLink( false );
-			setCreatingLink( false );
+			setAddingLink( false );
 		}
 	}, [ isActive ] );
 
@@ -84,15 +65,19 @@ function Edit( {
 			// This causes the `editingLink` state to be set to `true` and the link UI
 			// to be rendered in "creating" mode. We need to check isActive to see if
 			// we have an active link format.
+			const link = event.target.closest( '[contenteditable] a' );
 			if (
-				! event.target.closest( '[contenteditable] a' ) || // other formats (e.g. bold) may be nested within the link.
+				! link || // other formats (e.g. bold) may be nested within the link.
 				! isActive
 			) {
-				setIsEditingLink( false );
 				return;
 			}
 
-			setIsEditingLink( true, { autoFocus: false } );
+			setAddingLink( true );
+			setOpenedBy( {
+				el: link,
+				action: 'click',
+			} );
 		}
 
 		editableContentElement.addEventListener( 'click', handleClick );
@@ -103,7 +88,6 @@ function Edit( {
 	}, [ contentRef, isActive ] );
 
 	function addLink( target ) {
-		setShouldAutoFocus( true );
 		const text = getTextContent( slice( value ) );
 
 		if ( ! isActive && text && isURL( text ) && isValidHref( text ) ) {
@@ -122,13 +106,12 @@ function Edit( {
 			);
 		} else {
 			if ( target ) {
-				setOpenedBy( target );
-			}
-			if ( ! isActive ) {
-				setIsCreatingLink( true );
-			} else {
-				setIsEditingLink( true );
+				setOpenedBy( {
+					el: target,
+					action: null, // We don't need to distinguish between click or keyboard here
+				} );
 			}
+			setAddingLink( true );
 		}
 	}
 
@@ -147,12 +130,11 @@ function Edit( {
 		// Otherwise, we rely on the passed in onFocus to return focus to the rich text field.
 
 		// Close the popover
-		setIsEditingLink( false );
-		setIsCreatingLink( false );
+		setAddingLink( false );
 
 		// Return focus to the toolbar button or the rich text field
-		if ( openedBy?.tagName === 'BUTTON' ) {
-			openedBy.focus();
+		if ( openedBy?.el?.tagName === 'BUTTON' ) {
+			openedBy.el.focus();
 		} else {
 			onFocus();
 		}
@@ -167,8 +149,7 @@ function Edit( {
 	// 4. Press Escape
 	// 5. Focus should be on the Options button
 	function onFocusOutside() {
-		setIsEditingLink( false );
-		setIsCreatingLink( false );
+		setAddingLink( false );
 		setOpenedBy( null );
 	}
 
@@ -177,7 +158,10 @@ function Edit( {
 		speak( __( 'Link removed.' ), 'assertive' );
 	}
 
-	const isEditingActiveLink = editingLink && isActive;
+	// Only autofocus if we have clicked a link within the editor
+	const shouldAutoFocus = ! (
+		openedBy?.el?.tagName === 'A' && openedBy?.action === 'click'
+	);
 
 	return (
 		<>
@@ -194,13 +178,13 @@ function Edit( {
 				onClick={ ( event ) => {
 					addLink( event.currentTarget );
 				} }
-				isActive={ isActive || editingLink }
+				isActive={ isActive || addingLink }
 				shortcutType="primary"
 				shortcutCharacter="k"
 				aria-haspopup="true"
-				aria-expanded={ editingLink }
+				aria-expanded={ addingLink }
 			/>
-			{ ( isEditingActiveLink || creatingLink ) && (
+			{ addingLink && (
 				<InlineLinkUI
 					stopAddingLink={ stopAddingLink }
 					onFocusOutside={ onFocusOutside }

package/src/link/inline.js

@@ -252,10 +252,11 @@ function InlineLinkUI( {
 	return (
 		<Popover
 			anchor={ popoverAnchor }
+			animate={ false }
 			onClose={ stopAddingLink }
 			onFocusOutside={ onFocusOutside }
 			placement="bottom"
-			offset={ 10 }
+			offset={ 8 }
 			shift
 			focusOnMount={ focusOnMount }
 			constrainTabbing

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>