@wordpress/format-library 3.16.1-next.4d3b314fd5.0 → 3.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -91,7 +91,7 @@ function TextColorEdit(_ref2) {
|
|
|
91
91
|
className: "format-library-text-color-button",
|
|
92
92
|
isActive: isActive,
|
|
93
93
|
icon: (0, _element.createElement)(_icons.Icon, {
|
|
94
|
-
icon: _icons.textColor,
|
|
94
|
+
icon: Object.keys(activeAttributes).length ? _icons.textColor : _icons.color,
|
|
95
95
|
style: colorIndicatorStyle
|
|
96
96
|
}),
|
|
97
97
|
title: title // If has no colors to choose but a color is active remove the color onClick.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/format-library/src/text-color/index.js"],"names":["transparentValue","name","title","EMPTY_ARRAY","getComputedStyleProperty","element","property","ownerDocument","defaultView","style","getComputedStyle","value","getPropertyValue","parentElement","fillComputedColors","color","backgroundColor","TextColorEdit","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","enableIsAddingColor","disableIsAddingColor","colorIndicatorStyle","current","hasColorsToChoose","length","textColorIcon","textColor","tagName","className","attributes","class","__unstableFilterAttributeValue","key","includes","addedCSS","join","edit"],"mappings":";;;;;;;AAIA;;AADA;;AAEA;;AACA;;
|
|
1
|
+
{"version":3,"sources":["@wordpress/format-library/src/text-color/index.js"],"names":["transparentValue","name","title","EMPTY_ARRAY","getComputedStyleProperty","element","property","ownerDocument","defaultView","style","getComputedStyle","value","getPropertyValue","parentElement","fillComputedColors","color","backgroundColor","TextColorEdit","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","enableIsAddingColor","disableIsAddingColor","colorIndicatorStyle","current","hasColorsToChoose","length","Object","keys","textColorIcon","colorIcon","textColor","tagName","className","attributes","class","__unstableFilterAttributeValue","key","includes","addedCSS","join","edit"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { RichTextToolbarButton, useSetting } from '@wordpress/block-editor';\nimport {\n\tIcon,\n\tcolor as colorIcon,\n\ttextColor as textColorIcon,\n} from '@wordpress/icons';\nimport { removeFormat } from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport { default as InlineColorUI, getActiveColors } from './inline';\n\nexport const transparentValue = 'rgba(0, 0, 0, 0)';\n\nconst name = 'core/text-color';\nconst title = __( 'Highlight' );\n\nconst EMPTY_ARRAY = [];\n\nfunction getComputedStyleProperty( element, property ) {\n\tconst { ownerDocument } = element;\n\tconst { defaultView } = ownerDocument;\n\tconst style = defaultView.getComputedStyle( element );\n\tconst value = style.getPropertyValue( property );\n\n\tif (\n\t\tproperty === 'background-color' &&\n\t\tvalue === transparentValue &&\n\t\telement.parentElement\n\t) {\n\t\treturn getComputedStyleProperty( element.parentElement, property );\n\t}\n\n\treturn value;\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:\n\t\t\tbackgroundColor === transparentValue\n\t\t\t\t? getComputedStyleProperty( element, 'background-color' )\n\t\t\t\t: backgroundColor,\n\t};\n}\n\nfunction TextColorEdit( {\n\tvalue,\n\tonChange,\n\tisActive,\n\tactiveAttributes,\n\tcontentRef,\n} ) {\n\tconst allowCustomControl = useSetting( 'color.custom' );\n\tconst colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst enableIsAddingColor = useCallback(\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.current,\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\tif ( ! hasColorsToChoose && ! isActive ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<RichTextToolbarButton\n\t\t\t\tclassName=\"format-library-text-color-button\"\n\t\t\t\tisActive={ isActive }\n\t\t\t\ticon={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\tObject.keys( activeAttributes ).length\n\t\t\t\t\t\t\t\t? textColorIcon\n\t\t\t\t\t\t\t\t: colorIcon\n\t\t\t\t\t\t}\n\t\t\t\t\t\tstyle={ colorIndicatorStyle }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\ttitle={ title }\n\t\t\t\t// If has no colors to choose but a color is active remove the color onClick.\n\t\t\t\tonClick={\n\t\t\t\t\thasColorsToChoose\n\t\t\t\t\t\t? enableIsAddingColor\n\t\t\t\t\t\t: () => onChange( removeFormat( value, name ) )\n\t\t\t\t}\n\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t/>\n\t\t\t{ isAddingColor && (\n\t\t\t\t<InlineColorUI\n\t\t\t\t\tname={ name }\n\t\t\t\t\tonClose={ disableIsAddingColor }\n\t\t\t\t\tactiveAttributes={ activeAttributes }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport const textColor = {\n\tname,\n\ttitle,\n\ttagName: 'mark',\n\tclassName: 'has-inline-color',\n\tattributes: {\n\t\tstyle: 'style',\n\t\tclass: 'class',\n\t},\n\t/*\n\t * Since this format relies on the <mark> tag, it's important to\n\t * prevent the default yellow background color applied by most\n\t * browsers. The solution is to detect when this format is used with a\n\t * text color but no background color, and in such cases to override\n\t * the default styling with a transparent background.\n\t *\n\t * @see https://github.com/WordPress/gutenberg/pull/35516\n\t */\n\t__unstableFilterAttributeValue( key, value ) {\n\t\tif ( key !== 'style' ) return value;\n\t\t// We should not add a background-color if it's already set.\n\t\tif ( value && value.includes( 'background-color' ) ) return value;\n\t\tconst addedCSS = [ 'background-color', transparentValue ].join( ':' );\n\t\t// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS\n\t\t// rules will already include a `;`.\n\t\treturn value ? [ addedCSS, value ].join( ';' ) : addedCSS;\n\t},\n\tedit: TextColorEdit,\n};\n"]}
|
|
@@ -6,7 +6,7 @@ import { createElement, Fragment } from "@wordpress/element";
|
|
|
6
6
|
import { __ } from '@wordpress/i18n';
|
|
7
7
|
import { useCallback, useMemo, useState } from '@wordpress/element';
|
|
8
8
|
import { RichTextToolbarButton, useSetting } from '@wordpress/block-editor';
|
|
9
|
-
import { Icon, textColor as textColorIcon } from '@wordpress/icons';
|
|
9
|
+
import { Icon, color as colorIcon, textColor as textColorIcon } from '@wordpress/icons';
|
|
10
10
|
import { removeFormat } from '@wordpress/rich-text';
|
|
11
11
|
/**
|
|
12
12
|
* Internal dependencies
|
|
@@ -77,7 +77,7 @@ function TextColorEdit(_ref2) {
|
|
|
77
77
|
className: "format-library-text-color-button",
|
|
78
78
|
isActive: isActive,
|
|
79
79
|
icon: createElement(Icon, {
|
|
80
|
-
icon: textColorIcon,
|
|
80
|
+
icon: Object.keys(activeAttributes).length ? textColorIcon : colorIcon,
|
|
81
81
|
style: colorIndicatorStyle
|
|
82
82
|
}),
|
|
83
83
|
title: title // If has no colors to choose but a color is active remove the color onClick.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/format-library/src/text-color/index.js"],"names":["__","useCallback","useMemo","useState","RichTextToolbarButton","useSetting","Icon","textColor","textColorIcon","removeFormat","default","InlineColorUI","getActiveColors","transparentValue","name","title","EMPTY_ARRAY","getComputedStyleProperty","element","property","ownerDocument","defaultView","style","getComputedStyle","value","getPropertyValue","parentElement","fillComputedColors","
|
|
1
|
+
{"version":3,"sources":["@wordpress/format-library/src/text-color/index.js"],"names":["__","useCallback","useMemo","useState","RichTextToolbarButton","useSetting","Icon","color","colorIcon","textColor","textColorIcon","removeFormat","default","InlineColorUI","getActiveColors","transparentValue","name","title","EMPTY_ARRAY","getComputedStyleProperty","element","property","ownerDocument","defaultView","style","getComputedStyle","value","getPropertyValue","parentElement","fillComputedColors","backgroundColor","TextColorEdit","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","enableIsAddingColor","disableIsAddingColor","colorIndicatorStyle","current","hasColorsToChoose","length","Object","keys","tagName","className","attributes","class","__unstableFilterAttributeValue","key","includes","addedCSS","join","edit"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { RichTextToolbarButton, useSetting } from '@wordpress/block-editor';\nimport {\n\tIcon,\n\tcolor as colorIcon,\n\ttextColor as textColorIcon,\n} from '@wordpress/icons';\nimport { removeFormat } from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport { default as InlineColorUI, getActiveColors } from './inline';\n\nexport const transparentValue = 'rgba(0, 0, 0, 0)';\n\nconst name = 'core/text-color';\nconst title = __( 'Highlight' );\n\nconst EMPTY_ARRAY = [];\n\nfunction getComputedStyleProperty( element, property ) {\n\tconst { ownerDocument } = element;\n\tconst { defaultView } = ownerDocument;\n\tconst style = defaultView.getComputedStyle( element );\n\tconst value = style.getPropertyValue( property );\n\n\tif (\n\t\tproperty === 'background-color' &&\n\t\tvalue === transparentValue &&\n\t\telement.parentElement\n\t) {\n\t\treturn getComputedStyleProperty( element.parentElement, property );\n\t}\n\n\treturn value;\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:\n\t\t\tbackgroundColor === transparentValue\n\t\t\t\t? getComputedStyleProperty( element, 'background-color' )\n\t\t\t\t: backgroundColor,\n\t};\n}\n\nfunction TextColorEdit( {\n\tvalue,\n\tonChange,\n\tisActive,\n\tactiveAttributes,\n\tcontentRef,\n} ) {\n\tconst allowCustomControl = useSetting( 'color.custom' );\n\tconst colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst enableIsAddingColor = useCallback(\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.current,\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\tif ( ! hasColorsToChoose && ! isActive ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<RichTextToolbarButton\n\t\t\t\tclassName=\"format-library-text-color-button\"\n\t\t\t\tisActive={ isActive }\n\t\t\t\ticon={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\tObject.keys( activeAttributes ).length\n\t\t\t\t\t\t\t\t? textColorIcon\n\t\t\t\t\t\t\t\t: colorIcon\n\t\t\t\t\t\t}\n\t\t\t\t\t\tstyle={ colorIndicatorStyle }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\ttitle={ title }\n\t\t\t\t// If has no colors to choose but a color is active remove the color onClick.\n\t\t\t\tonClick={\n\t\t\t\t\thasColorsToChoose\n\t\t\t\t\t\t? enableIsAddingColor\n\t\t\t\t\t\t: () => onChange( removeFormat( value, name ) )\n\t\t\t\t}\n\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t/>\n\t\t\t{ isAddingColor && (\n\t\t\t\t<InlineColorUI\n\t\t\t\t\tname={ name }\n\t\t\t\t\tonClose={ disableIsAddingColor }\n\t\t\t\t\tactiveAttributes={ activeAttributes }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport const textColor = {\n\tname,\n\ttitle,\n\ttagName: 'mark',\n\tclassName: 'has-inline-color',\n\tattributes: {\n\t\tstyle: 'style',\n\t\tclass: 'class',\n\t},\n\t/*\n\t * Since this format relies on the <mark> tag, it's important to\n\t * prevent the default yellow background color applied by most\n\t * browsers. The solution is to detect when this format is used with a\n\t * text color but no background color, and in such cases to override\n\t * the default styling with a transparent background.\n\t *\n\t * @see https://github.com/WordPress/gutenberg/pull/35516\n\t */\n\t__unstableFilterAttributeValue( key, value ) {\n\t\tif ( key !== 'style' ) return value;\n\t\t// We should not add a background-color if it's already set.\n\t\tif ( value && value.includes( 'background-color' ) ) return value;\n\t\tconst addedCSS = [ 'background-color', transparentValue ].join( ':' );\n\t\t// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS\n\t\t// rules will already include a `;`.\n\t\treturn value ? [ addedCSS, value ].join( ';' ) : addedCSS;\n\t},\n\tedit: TextColorEdit,\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/format-library",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.18.0",
|
|
4
4
|
"description": "Format library for the WordPress editor.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -26,17 +26,17 @@
|
|
|
26
26
|
"react-native": "src/index",
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@babel/runtime": "^7.16.0",
|
|
29
|
-
"@wordpress/a11y": "^3.
|
|
30
|
-
"@wordpress/block-editor": "^10.
|
|
31
|
-
"@wordpress/components": "^21.
|
|
32
|
-
"@wordpress/compose": "^5.
|
|
33
|
-
"@wordpress/data": "^7.
|
|
34
|
-
"@wordpress/element": "^4.
|
|
35
|
-
"@wordpress/html-entities": "^3.
|
|
36
|
-
"@wordpress/i18n": "^4.
|
|
37
|
-
"@wordpress/icons": "^9.
|
|
38
|
-
"@wordpress/rich-text": "^5.
|
|
39
|
-
"@wordpress/url": "^3.
|
|
29
|
+
"@wordpress/a11y": "^3.20.0",
|
|
30
|
+
"@wordpress/block-editor": "^10.3.0",
|
|
31
|
+
"@wordpress/components": "^21.3.0",
|
|
32
|
+
"@wordpress/compose": "^5.18.0",
|
|
33
|
+
"@wordpress/data": "^7.4.0",
|
|
34
|
+
"@wordpress/element": "^4.18.0",
|
|
35
|
+
"@wordpress/html-entities": "^3.20.0",
|
|
36
|
+
"@wordpress/i18n": "^4.20.0",
|
|
37
|
+
"@wordpress/icons": "^9.11.0",
|
|
38
|
+
"@wordpress/rich-text": "^5.18.0",
|
|
39
|
+
"@wordpress/url": "^3.21.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"react": "^17.0.0",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
|
|
49
49
|
}
|
package/src/text-color/index.js
CHANGED
|
@@ -4,7 +4,11 @@
|
|
|
4
4
|
import { __ } from '@wordpress/i18n';
|
|
5
5
|
import { useCallback, useMemo, useState } from '@wordpress/element';
|
|
6
6
|
import { RichTextToolbarButton, useSetting } from '@wordpress/block-editor';
|
|
7
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
Icon,
|
|
9
|
+
color as colorIcon,
|
|
10
|
+
textColor as textColorIcon,
|
|
11
|
+
} from '@wordpress/icons';
|
|
8
12
|
import { removeFormat } from '@wordpress/rich-text';
|
|
9
13
|
|
|
10
14
|
/**
|
|
@@ -89,7 +93,11 @@ function TextColorEdit( {
|
|
|
89
93
|
isActive={ isActive }
|
|
90
94
|
icon={
|
|
91
95
|
<Icon
|
|
92
|
-
icon={
|
|
96
|
+
icon={
|
|
97
|
+
Object.keys( activeAttributes ).length
|
|
98
|
+
? textColorIcon
|
|
99
|
+
: colorIcon
|
|
100
|
+
}
|
|
93
101
|
style={ colorIndicatorStyle }
|
|
94
102
|
/>
|
|
95
103
|
}
|