@wordpress/format-library 5.48.0 → 5.48.1
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 +3 -1
- package/build/image/index.cjs +5 -3
- package/build/image/index.cjs.map +3 -3
- package/build/language/index.cjs +6 -4
- package/build/language/index.cjs.map +3 -3
- package/build/link/css-classes-setting.cjs +1 -1
- package/build/link/css-classes-setting.cjs.map +3 -3
- package/build/math/index.cjs +2 -1
- package/build/math/index.cjs.map +3 -3
- package/build/text-color/inline.cjs +6 -7
- package/build/text-color/inline.cjs.map +3 -3
- package/build-module/image/index.mjs +5 -6
- package/build-module/image/index.mjs.map +2 -2
- package/build-module/language/index.mjs +7 -7
- package/build-module/language/index.mjs.map +2 -2
- package/build-module/link/css-classes-setting.mjs +3 -4
- package/build-module/link/css-classes-setting.mjs.map +2 -2
- package/build-module/math/index.mjs +2 -2
- package/build-module/math/index.mjs.map +2 -2
- package/build-module/text-color/inline.mjs +7 -11
- package/build-module/text-color/inline.mjs.map +2 -2
- package/package.json +22 -18
- package/src/image/index.js +8 -9
- package/src/language/index.js +8 -8
- package/src/link/css-classes-setting.js +3 -4
- package/src/math/index.js +3 -3
- package/src/text-color/inline.js +11 -16
- package/src/default-formats.native.js +0 -10
- package/src/link/index.native.js +0 -176
- package/src/link/modal-screens/link-picker-screen.native.js +0 -61
- package/src/link/modal-screens/link-settings-screen.native.js +0 -229
- package/src/link/modal-screens/screens.native.js +0 -4
- package/src/link/modal.native.js +0 -44
- package/src/link/modal.native.scss +0 -16
- package/src/link/test/__snapshots__/modal.native.js.snap +0 -553
- package/src/link/test/index.native.js +0 -145
- package/src/link/test/modal.native.js +0 -18
- package/src/text-color/index.native.js +0 -172
- package/src/text-color/inline.native.js +0 -169
- package/src/text-color/style.native.scss +0 -22
- package/src/text-color/test/__snapshots__/index.native.js.snap +0 -23
- package/src/text-color/test/index.native.js +0 -192
|
@@ -6,9 +6,9 @@ import { RichTextToolbarButton } from "@wordpress/block-editor";
|
|
|
6
6
|
import {
|
|
7
7
|
Popover,
|
|
8
8
|
TextControl,
|
|
9
|
-
__experimentalVStack as VStack,
|
|
10
9
|
privateApis as componentsPrivateApis
|
|
11
10
|
} from "@wordpress/components";
|
|
11
|
+
import { Stack } from "@wordpress/ui";
|
|
12
12
|
import { math as icon } from "@wordpress/icons";
|
|
13
13
|
import { speak } from "@wordpress/a11y";
|
|
14
14
|
import { unlock } from "../lock-unlock.mjs";
|
|
@@ -71,7 +71,7 @@ function InlineUI({
|
|
|
71
71
|
focusOnMount: false,
|
|
72
72
|
anchor: popoverAnchor,
|
|
73
73
|
className: "block-editor-format-toolbar__math-popover",
|
|
74
|
-
children: /* @__PURE__ */ jsx("div", { style: { minWidth: "300px", padding: "4px" }, children: /* @__PURE__ */ jsxs(
|
|
74
|
+
children: /* @__PURE__ */ jsx("div", { style: { minWidth: "300px", padding: "4px" }, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: "xs", children: [
|
|
75
75
|
/* @__PURE__ */ jsx(
|
|
76
76
|
TextControl,
|
|
77
77
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/math/index.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useState, useEffect } from '@wordpress/element';\nimport { insertObject, useAnchor } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport {\n\tPopover,\n\tTextControl,\n\
|
|
5
|
-
"mappings": ";AAGA,SAAS,IAAI,eAAe;AAC5B,SAAS,UAAU,iBAAiB;AACpC,SAAS,cAAc,iBAAiB;AACxC,SAAS,6BAA6B;AACtC;AAAA,EACC;AAAA,EACA;AAAA,EACA,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useState, useEffect } from '@wordpress/element';\nimport { insertObject, useAnchor } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport {\n\tPopover,\n\tTextControl,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\nimport { math as icon } from '@wordpress/icons';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\n\nconst { Badge: WCBadge } = unlock( componentsPrivateApis );\n\nconst name = 'core/math';\nconst title = __( 'Math' );\n\nfunction InlineUI( {\n\tvalue,\n\tonChange,\n\tactiveAttributes,\n\tcontentRef,\n\tlatexToMathML,\n} ) {\n\tconst [ latex, setLatex ] = useState(\n\t\tactiveAttributes?.[ 'data-latex' ] || ''\n\t);\n\tconst [ error, setError ] = useState( null );\n\n\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings: math,\n\t} );\n\n\t// Update the math object in real-time as the user types\n\tconst handleLatexChange = ( newLatex ) => {\n\t\tlet mathML = '';\n\n\t\tsetLatex( newLatex );\n\n\t\tif ( newLatex ) {\n\t\t\ttry {\n\t\t\t\tmathML = latexToMathML( newLatex, { displayMode: false } );\n\t\t\t\tsetError( null );\n\t\t\t} catch ( err ) {\n\t\t\t\tsetError( err.message );\n\t\t\t\tspeak(\n\t\t\t\t\tsprintf(\n\t\t\t\t\t\t/* translators: %s: error message returned when parsing LaTeX. */\n\t\t\t\t\t\t__( 'Error parsing mathematical expression: %s' ),\n\t\t\t\t\t\terr.message\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\tconst newReplacements = value.replacements.slice();\n\t\tnewReplacements[ value.start ] = {\n\t\t\ttype: name,\n\t\t\tattributes: {\n\t\t\t\t'data-latex': newLatex,\n\t\t\t},\n\t\t\tinnerHTML: mathML,\n\t\t};\n\n\t\tonChange( {\n\t\t\t...value,\n\t\t\treplacements: newReplacements,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<Popover\n\t\t\tplacement=\"bottom-start\"\n\t\t\toffset={ 8 }\n\t\t\tfocusOnMount={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\tclassName=\"block-editor-format-toolbar__math-popover\"\n\t\t>\n\t\t\t<div style={ { minWidth: '300px', padding: '4px' } }>\n\t\t\t\t<Stack direction=\"column\" gap=\"xs\">\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tlabel={ __( 'LaTeX math syntax' ) }\n\t\t\t\t\t\tvalue={ latex }\n\t\t\t\t\t\tonChange={ handleLatexChange }\n\t\t\t\t\t\tplaceholder={ __( 'e.g., x^2, \\\\frac{a}{b}' ) }\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\tclassName=\"block-editor-format-toolbar__math-input\"\n\t\t\t\t\t/>\n\t\t\t\t\t{ error && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<WCBadge\n\t\t\t\t\t\t\t\tintent=\"error\"\n\t\t\t\t\t\t\t\tclassName=\"wp-block-math__error\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: error message returned when parsing LaTeX. */\n\t\t\t\t\t\t\t\t\t__( 'Error: %s' ),\n\t\t\t\t\t\t\t\t\terror\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</WCBadge>\n\t\t\t\t\t\t\t<style children=\".wp-block-math__error .components-badge__content{white-space:normal}\" />\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</Stack>\n\t\t\t</div>\n\t\t</Popover>\n\t);\n}\n\nfunction Edit( {\n\tvalue,\n\tonChange,\n\tonFocus,\n\tisObjectActive,\n\tactiveObjectAttributes,\n\tcontentRef,\n} ) {\n\tconst [ latexToMathML, setLatexToMathML ] = useState();\n\n\tuseEffect( () => {\n\t\timport( '@wordpress/latex-to-mathml' ).then( ( module ) => {\n\t\t\tsetLatexToMathML( () => module.default );\n\t\t} );\n\t}, [] );\n\treturn (\n\t\t<>\n\t\t\t<RichTextToolbarButton\n\t\t\t\ticon={ icon }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tconst newValue = insertObject( value, {\n\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t'data-latex': '',\n\t\t\t\t\t\t},\n\t\t\t\t\t\tinnerHTML: '',\n\t\t\t\t\t} );\n\t\t\t\t\tnewValue.start = newValue.end - 1;\n\t\t\t\t\tonChange( newValue );\n\t\t\t\t\tonFocus();\n\t\t\t\t} }\n\t\t\t\tisActive={ isObjectActive }\n\t\t\t/>\n\t\t\t{ isObjectActive && (\n\t\t\t\t<InlineUI\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tactiveAttributes={ activeObjectAttributes }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t\tlatexToMathML={ latexToMathML }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport const math = {\n\tname,\n\ttitle,\n\ttagName: 'math',\n\tclassName: null,\n\tattributes: {\n\t\t'data-latex': 'data-latex',\n\t},\n\tcontentEditable: false,\n\tedit: Edit,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -14,15 +14,11 @@ import {
|
|
|
14
14
|
getColorObjectByAttributeValues,
|
|
15
15
|
store as blockEditorStore
|
|
16
16
|
} from "@wordpress/block-editor";
|
|
17
|
-
import {
|
|
18
|
-
|
|
19
|
-
privateApis as componentsPrivateApis
|
|
20
|
-
} from "@wordpress/components";
|
|
17
|
+
import { Popover } from "@wordpress/components";
|
|
18
|
+
import { Tabs } from "@wordpress/ui";
|
|
21
19
|
import { __ } from "@wordpress/i18n";
|
|
22
20
|
import { textColor as settings, transparentValue } from "./index.mjs";
|
|
23
|
-
import { unlock } from "../lock-unlock.mjs";
|
|
24
21
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
25
|
-
var { Tabs } = unlock(componentsPrivateApis);
|
|
26
22
|
var TABS = [
|
|
27
23
|
{ name: "color", title: __("Text") },
|
|
28
24
|
{ name: "backgroundColor", title: __("Background") }
|
|
@@ -137,13 +133,13 @@ function InlineColorUI({
|
|
|
137
133
|
onClose,
|
|
138
134
|
className: "format-library__inline-color-popover",
|
|
139
135
|
anchor: popoverAnchor,
|
|
140
|
-
children: /* @__PURE__ */ jsxs(Tabs, { children: [
|
|
141
|
-
/* @__PURE__ */ jsx(Tabs.
|
|
136
|
+
children: /* @__PURE__ */ jsxs(Tabs.Root, { defaultValue: TABS[0].name, children: [
|
|
137
|
+
/* @__PURE__ */ jsx(Tabs.List, { children: TABS.map((tab) => /* @__PURE__ */ jsx(Tabs.Tab, { value: tab.name, children: tab.title }, tab.name)) }),
|
|
142
138
|
TABS.map((tab) => /* @__PURE__ */ jsx(
|
|
143
|
-
Tabs.
|
|
139
|
+
Tabs.Panel,
|
|
144
140
|
{
|
|
145
|
-
|
|
146
|
-
|
|
141
|
+
value: tab.name,
|
|
142
|
+
tabIndex: -1,
|
|
147
143
|
children: /* @__PURE__ */ jsx(
|
|
148
144
|
ColorPicker,
|
|
149
145
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/text-color/inline.js"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { 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} from '@wordpress/block-editor';\nimport {
|
|
5
|
-
"mappings": ";AAGA,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AACP
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { 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} from '@wordpress/block-editor';\nimport { Popover } from '@wordpress/components';\nimport { Tabs } from '@wordpress/ui';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { textColor as settings, transparentValue } from './index';\n\nconst TABS = [\n\t{ name: 'color', title: __( 'Text' ) },\n\t{ name: 'backgroundColor', title: __( 'Background' ) },\n];\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' ) {\n\t\t\t\taccumulator.color = value;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tproperty === 'background-color' &&\n\t\t\t\tvalue !== transparentValue\n\t\t\t) {\n\t\t\t\taccumulator.backgroundColor = value;\n\t\t\t}\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 ) {\n\t\tattributes.style = styles.join( ';' );\n\t}\n\tif ( classNames.length ) {\n\t\tattributes.class = classNames.join( ' ' );\n\t}\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 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={ ( 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} }\n\t\t\tenableAlpha\n\t\t\t// Prevent the text and color picker from overlapping.\n\t\t\t__experimentalIsRenderedInSidebar\n\t\t/>\n\t);\n}\n\nexport default function InlineColorUI( {\n\tname,\n\tvalue,\n\tonChange,\n\tonClose,\n\tcontentRef,\n\tisActive,\n} ) {\n\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings: { ...settings, isActive },\n\t} );\n\n\treturn (\n\t\t<Popover\n\t\t\tonClose={ onClose }\n\t\t\tclassName=\"format-library__inline-color-popover\"\n\t\t\tanchor={ popoverAnchor }\n\t\t>\n\t\t\t<Tabs.Root defaultValue={ TABS[ 0 ].name }>\n\t\t\t\t<Tabs.List>\n\t\t\t\t\t{ TABS.map( ( tab ) => (\n\t\t\t\t\t\t<Tabs.Tab value={ tab.name } key={ tab.name }>\n\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t) ) }\n\t\t\t\t</Tabs.List>\n\t\t\t\t{ TABS.map( ( tab ) => (\n\t\t\t\t\t<Tabs.Panel\n\t\t\t\t\t\tvalue={ tab.name }\n\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\tproperty={ tab.name }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Tabs.Panel>\n\t\t\t\t) ) }\n\t\t\t</Tabs.Root>\n\t\t</Popover>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/format-library",
|
|
3
|
-
"version": "5.48.
|
|
3
|
+
"version": "5.48.1",
|
|
4
4
|
"description": "Format library for the WordPress editor.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -39,24 +39,28 @@
|
|
|
39
39
|
},
|
|
40
40
|
"./package.json": "./package.json"
|
|
41
41
|
},
|
|
42
|
-
"react-native": "src/index",
|
|
43
42
|
"wpScript": true,
|
|
44
43
|
"dependencies": {
|
|
45
|
-
"@wordpress/a11y": "^4.48.
|
|
46
|
-
"@wordpress/base-styles": "^
|
|
47
|
-
"@wordpress/block-editor": "^15.21.
|
|
48
|
-
"@wordpress/components": "^35.0.
|
|
49
|
-
"@wordpress/compose": "^8.1.
|
|
50
|
-
"@wordpress/data": "^10.48.
|
|
51
|
-
"@wordpress/element": "^8.0.
|
|
52
|
-
"@wordpress/html-entities": "^4.48.
|
|
53
|
-
"@wordpress/i18n": "^6.21.
|
|
54
|
-
"@wordpress/icons": "^
|
|
55
|
-
"@wordpress/latex-to-mathml": "^1.16.
|
|
56
|
-
"@wordpress/private-apis": "^1.48.
|
|
57
|
-
"@wordpress/rich-text": "^7.48.
|
|
58
|
-
"@wordpress/ui": "^0.15.
|
|
59
|
-
"@wordpress/url": "^4.48.
|
|
44
|
+
"@wordpress/a11y": "^4.48.1",
|
|
45
|
+
"@wordpress/base-styles": "^10.0.1",
|
|
46
|
+
"@wordpress/block-editor": "^15.21.1",
|
|
47
|
+
"@wordpress/components": "^35.0.1",
|
|
48
|
+
"@wordpress/compose": "^8.1.1",
|
|
49
|
+
"@wordpress/data": "^10.48.1",
|
|
50
|
+
"@wordpress/element": "^8.0.1",
|
|
51
|
+
"@wordpress/html-entities": "^4.48.1",
|
|
52
|
+
"@wordpress/i18n": "^6.21.1",
|
|
53
|
+
"@wordpress/icons": "^14.0.1",
|
|
54
|
+
"@wordpress/latex-to-mathml": "^1.16.1",
|
|
55
|
+
"@wordpress/private-apis": "^1.48.1",
|
|
56
|
+
"@wordpress/rich-text": "^7.48.1",
|
|
57
|
+
"@wordpress/ui": "^0.15.1",
|
|
58
|
+
"@wordpress/url": "^4.48.1"
|
|
59
|
+
},
|
|
60
|
+
"devDependencies": {
|
|
61
|
+
"@testing-library/dom": "^10.4.1",
|
|
62
|
+
"@testing-library/react": "^16.3.2",
|
|
63
|
+
"@testing-library/user-event": "^14.6.1"
|
|
60
64
|
},
|
|
61
65
|
"peerDependencies": {
|
|
62
66
|
"react": "^18.0.0",
|
|
@@ -65,5 +69,5 @@
|
|
|
65
69
|
"publishConfig": {
|
|
66
70
|
"access": "public"
|
|
67
71
|
},
|
|
68
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "99df7432c5c7cb83ba41146fd1f57f3c19004305"
|
|
69
73
|
}
|
package/src/image/index.js
CHANGED
|
@@ -6,12 +6,10 @@ import {
|
|
|
6
6
|
SVG,
|
|
7
7
|
Popover,
|
|
8
8
|
Button,
|
|
9
|
-
ExternalLink,
|
|
10
|
-
__experimentalHStack as HStack,
|
|
11
|
-
__experimentalVStack as VStack,
|
|
12
9
|
__experimentalNumberControl as NumberControl,
|
|
13
10
|
TextareaControl,
|
|
14
11
|
} from '@wordpress/components';
|
|
12
|
+
import { Link, Stack } from '@wordpress/ui';
|
|
15
13
|
import { __ } from '@wordpress/i18n';
|
|
16
14
|
import { useState } from '@wordpress/element';
|
|
17
15
|
import { insertObject, useAnchor } from '@wordpress/rich-text';
|
|
@@ -100,7 +98,7 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
|
|
|
100
98
|
event.preventDefault();
|
|
101
99
|
} }
|
|
102
100
|
>
|
|
103
|
-
<
|
|
101
|
+
<Stack direction="column" gap="lg">
|
|
104
102
|
<NumberControl
|
|
105
103
|
__next40pxDefaultSize
|
|
106
104
|
label={ __( 'Width' ) }
|
|
@@ -118,7 +116,8 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
|
|
|
118
116
|
} }
|
|
119
117
|
help={
|
|
120
118
|
<>
|
|
121
|
-
<
|
|
119
|
+
<Link
|
|
120
|
+
openInNewTab
|
|
122
121
|
href={
|
|
123
122
|
// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
|
|
124
123
|
__(
|
|
@@ -129,13 +128,13 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
|
|
|
129
128
|
{ __(
|
|
130
129
|
'Describe the purpose of the image.'
|
|
131
130
|
) }
|
|
132
|
-
</
|
|
131
|
+
</Link>
|
|
133
132
|
<br />
|
|
134
133
|
{ __( 'Leave empty if decorative.' ) }
|
|
135
134
|
</>
|
|
136
135
|
}
|
|
137
136
|
/>
|
|
138
|
-
<
|
|
137
|
+
<Stack justify="right">
|
|
139
138
|
<Button
|
|
140
139
|
disabled={ ! hasChanged }
|
|
141
140
|
accessibleWhenDisabled
|
|
@@ -145,8 +144,8 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
|
|
|
145
144
|
>
|
|
146
145
|
{ __( 'Apply' ) }
|
|
147
146
|
</Button>
|
|
148
|
-
</
|
|
149
|
-
</
|
|
147
|
+
</Stack>
|
|
148
|
+
</Stack>
|
|
150
149
|
</form>
|
|
151
150
|
</Popover>
|
|
152
151
|
);
|
package/src/language/index.js
CHANGED
|
@@ -12,9 +12,8 @@ import {
|
|
|
12
12
|
SelectControl,
|
|
13
13
|
Button,
|
|
14
14
|
Popover,
|
|
15
|
-
__experimentalHStack as HStack,
|
|
16
|
-
__experimentalVStack as VStack,
|
|
17
15
|
} from '@wordpress/components';
|
|
16
|
+
import { Stack } from '@wordpress/ui';
|
|
18
17
|
import { useState } from '@wordpress/element';
|
|
19
18
|
import { applyFormat, removeFormat, useAnchor } from '@wordpress/rich-text';
|
|
20
19
|
import { language as languageIcon } from '@wordpress/icons';
|
|
@@ -83,9 +82,10 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
|
|
|
83
82
|
anchor={ popoverAnchor }
|
|
84
83
|
onClose={ onClose }
|
|
85
84
|
>
|
|
86
|
-
<
|
|
87
|
-
|
|
88
|
-
|
|
85
|
+
<Stack
|
|
86
|
+
render={ <form /> }
|
|
87
|
+
direction="column"
|
|
88
|
+
gap="lg"
|
|
89
89
|
className="block-editor-format-toolbar__language-container-content"
|
|
90
90
|
onSubmit={ ( event ) => {
|
|
91
91
|
event.preventDefault();
|
|
@@ -126,15 +126,15 @@ function InlineLanguageUI( { value, contentRef, onChange, onClose } ) {
|
|
|
126
126
|
] }
|
|
127
127
|
onChange={ ( val ) => setDir( val ) }
|
|
128
128
|
/>
|
|
129
|
-
<
|
|
129
|
+
<Stack justify="right">
|
|
130
130
|
<Button
|
|
131
131
|
__next40pxDefaultSize
|
|
132
132
|
variant="primary"
|
|
133
133
|
type="submit"
|
|
134
134
|
text={ __( 'Apply' ) }
|
|
135
135
|
/>
|
|
136
|
-
</
|
|
137
|
-
</
|
|
136
|
+
</Stack>
|
|
137
|
+
</Stack>
|
|
138
138
|
</Popover>
|
|
139
139
|
);
|
|
140
140
|
}
|
|
@@ -7,9 +7,8 @@ import { __ } from '@wordpress/i18n';
|
|
|
7
7
|
import {
|
|
8
8
|
__experimentalInputControl as InputControl,
|
|
9
9
|
CheckboxControl,
|
|
10
|
-
__experimentalVStack as VStack,
|
|
11
10
|
} from '@wordpress/components';
|
|
12
|
-
import { VisuallyHidden } from '@wordpress/ui';
|
|
11
|
+
import { Stack, VisuallyHidden } from '@wordpress/ui';
|
|
13
12
|
|
|
14
13
|
/**
|
|
15
14
|
* CSSClassesSettingComponent
|
|
@@ -58,7 +57,7 @@ const CSSClassesSettingComponent = ( { setting, value, onChange } ) => {
|
|
|
58
57
|
<VisuallyHidden render={ <legend /> }>
|
|
59
58
|
{ setting.title }
|
|
60
59
|
</VisuallyHidden>
|
|
61
|
-
<
|
|
60
|
+
<Stack direction="column" gap="md">
|
|
62
61
|
<CheckboxControl
|
|
63
62
|
label={ setting.title }
|
|
64
63
|
onChange={ handleCheckboxChange }
|
|
@@ -82,7 +81,7 @@ const CSSClassesSettingComponent = ( { setting, value, onChange } ) => {
|
|
|
82
81
|
/>
|
|
83
82
|
</div>
|
|
84
83
|
) }
|
|
85
|
-
</
|
|
84
|
+
</Stack>
|
|
86
85
|
</fieldset>
|
|
87
86
|
);
|
|
88
87
|
};
|
package/src/math/index.js
CHANGED
|
@@ -8,9 +8,9 @@ import { RichTextToolbarButton } from '@wordpress/block-editor';
|
|
|
8
8
|
import {
|
|
9
9
|
Popover,
|
|
10
10
|
TextControl,
|
|
11
|
-
__experimentalVStack as VStack,
|
|
12
11
|
privateApis as componentsPrivateApis,
|
|
13
12
|
} from '@wordpress/components';
|
|
13
|
+
import { Stack } from '@wordpress/ui';
|
|
14
14
|
import { math as icon } from '@wordpress/icons';
|
|
15
15
|
import { speak } from '@wordpress/a11y';
|
|
16
16
|
|
|
@@ -88,7 +88,7 @@ function InlineUI( {
|
|
|
88
88
|
className="block-editor-format-toolbar__math-popover"
|
|
89
89
|
>
|
|
90
90
|
<div style={ { minWidth: '300px', padding: '4px' } }>
|
|
91
|
-
<
|
|
91
|
+
<Stack direction="column" gap="xs">
|
|
92
92
|
<TextControl
|
|
93
93
|
__next40pxDefaultSize
|
|
94
94
|
hideLabelFromVision
|
|
@@ -114,7 +114,7 @@ function InlineUI( {
|
|
|
114
114
|
<style children=".wp-block-math__error .components-badge__content{white-space:normal}" />
|
|
115
115
|
</>
|
|
116
116
|
) }
|
|
117
|
-
</
|
|
117
|
+
</Stack>
|
|
118
118
|
</div>
|
|
119
119
|
</Popover>
|
|
120
120
|
);
|
package/src/text-color/inline.js
CHANGED
|
@@ -16,19 +16,14 @@ import {
|
|
|
16
16
|
getColorObjectByAttributeValues,
|
|
17
17
|
store as blockEditorStore,
|
|
18
18
|
} from '@wordpress/block-editor';
|
|
19
|
-
import {
|
|
20
|
-
|
|
21
|
-
privateApis as componentsPrivateApis,
|
|
22
|
-
} from '@wordpress/components';
|
|
19
|
+
import { Popover } from '@wordpress/components';
|
|
20
|
+
import { Tabs } from '@wordpress/ui';
|
|
23
21
|
import { __ } from '@wordpress/i18n';
|
|
24
22
|
|
|
25
23
|
/**
|
|
26
24
|
* Internal dependencies
|
|
27
25
|
*/
|
|
28
26
|
import { textColor as settings, transparentValue } from './index';
|
|
29
|
-
import { unlock } from '../lock-unlock';
|
|
30
|
-
|
|
31
|
-
const { Tabs } = unlock( componentsPrivateApis );
|
|
32
27
|
|
|
33
28
|
const TABS = [
|
|
34
29
|
{ name: 'color', title: __( 'Text' ) },
|
|
@@ -168,18 +163,18 @@ export default function InlineColorUI( {
|
|
|
168
163
|
className="format-library__inline-color-popover"
|
|
169
164
|
anchor={ popoverAnchor }
|
|
170
165
|
>
|
|
171
|
-
<Tabs>
|
|
172
|
-
<Tabs.
|
|
166
|
+
<Tabs.Root defaultValue={ TABS[ 0 ].name }>
|
|
167
|
+
<Tabs.List>
|
|
173
168
|
{ TABS.map( ( tab ) => (
|
|
174
|
-
<Tabs.Tab
|
|
169
|
+
<Tabs.Tab value={ tab.name } key={ tab.name }>
|
|
175
170
|
{ tab.title }
|
|
176
171
|
</Tabs.Tab>
|
|
177
172
|
) ) }
|
|
178
|
-
</Tabs.
|
|
173
|
+
</Tabs.List>
|
|
179
174
|
{ TABS.map( ( tab ) => (
|
|
180
|
-
<Tabs.
|
|
181
|
-
|
|
182
|
-
|
|
175
|
+
<Tabs.Panel
|
|
176
|
+
value={ tab.name }
|
|
177
|
+
tabIndex={ -1 }
|
|
183
178
|
key={ tab.name }
|
|
184
179
|
>
|
|
185
180
|
<ColorPicker
|
|
@@ -188,9 +183,9 @@ export default function InlineColorUI( {
|
|
|
188
183
|
value={ value }
|
|
189
184
|
onChange={ onChange }
|
|
190
185
|
/>
|
|
191
|
-
</Tabs.
|
|
186
|
+
</Tabs.Panel>
|
|
192
187
|
) ) }
|
|
193
|
-
</Tabs>
|
|
188
|
+
</Tabs.Root>
|
|
194
189
|
</Popover>
|
|
195
190
|
);
|
|
196
191
|
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Internal dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { bold } from './bold';
|
|
5
|
-
import { italic } from './italic';
|
|
6
|
-
import { link } from './link';
|
|
7
|
-
import { strikethrough } from './strikethrough';
|
|
8
|
-
import { textColor } from './text-color';
|
|
9
|
-
|
|
10
|
-
export default [ bold, italic, link, strikethrough, textColor ];
|
package/src/link/index.native.js
DELETED
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import Clipboard from '@react-native-clipboard/clipboard';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* WordPress dependencies
|
|
8
|
-
*/
|
|
9
|
-
import { __ } from '@wordpress/i18n';
|
|
10
|
-
import { Component } from '@wordpress/element';
|
|
11
|
-
import { withSpokenMessages } from '@wordpress/components';
|
|
12
|
-
import { RichTextToolbarButton } from '@wordpress/block-editor';
|
|
13
|
-
import {
|
|
14
|
-
applyFormat,
|
|
15
|
-
getActiveFormat,
|
|
16
|
-
getTextContent,
|
|
17
|
-
isCollapsed,
|
|
18
|
-
removeFormat,
|
|
19
|
-
slice,
|
|
20
|
-
} from '@wordpress/rich-text';
|
|
21
|
-
import { isURL } from '@wordpress/url';
|
|
22
|
-
import { link as linkIcon } from '@wordpress/icons';
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* Internal dependencies
|
|
26
|
-
*/
|
|
27
|
-
import ModalLinkUI from './modal';
|
|
28
|
-
import { isValidHref } from './utils';
|
|
29
|
-
|
|
30
|
-
const name = 'core/link';
|
|
31
|
-
|
|
32
|
-
export const link = {
|
|
33
|
-
name,
|
|
34
|
-
title: __( 'Link' ),
|
|
35
|
-
tagName: 'a',
|
|
36
|
-
className: null,
|
|
37
|
-
attributes: {
|
|
38
|
-
url: 'href',
|
|
39
|
-
target: 'target',
|
|
40
|
-
rel: 'rel',
|
|
41
|
-
},
|
|
42
|
-
edit: withSpokenMessages(
|
|
43
|
-
class LinkEdit extends Component {
|
|
44
|
-
constructor() {
|
|
45
|
-
super( ...arguments );
|
|
46
|
-
|
|
47
|
-
this.addLink = this.addLink.bind( this );
|
|
48
|
-
this.stopAddingLink = this.stopAddingLink.bind( this );
|
|
49
|
-
this.onRemoveFormat = this.onRemoveFormat.bind( this );
|
|
50
|
-
this.getURLFromClipboard =
|
|
51
|
-
this.getURLFromClipboard.bind( this );
|
|
52
|
-
this.state = {
|
|
53
|
-
addingLink: false,
|
|
54
|
-
};
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
addLink() {
|
|
58
|
-
const { value, onChange } = this.props;
|
|
59
|
-
const text = getTextContent( slice( value ) );
|
|
60
|
-
|
|
61
|
-
if ( text && isURL( text ) && isValidHref( text ) ) {
|
|
62
|
-
const newValue = applyFormat( value, {
|
|
63
|
-
type: name,
|
|
64
|
-
attributes: { url: text },
|
|
65
|
-
} );
|
|
66
|
-
newValue.start = newValue.end;
|
|
67
|
-
newValue.activeFormats = [];
|
|
68
|
-
onChange( { ...newValue, needsSelectionUpdate: true } );
|
|
69
|
-
} else {
|
|
70
|
-
this.setState( { addingLink: true } );
|
|
71
|
-
this.getURLFromClipboard();
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
stopAddingLink() {
|
|
76
|
-
this.setState( { addingLink: false, clipboardURL: undefined } );
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
getLinkSelection() {
|
|
80
|
-
const { value, isActive } = this.props;
|
|
81
|
-
const startFormat = getActiveFormat( value, 'core/link' );
|
|
82
|
-
|
|
83
|
-
// If the link isn't selected, get the link manually by looking around the cursor
|
|
84
|
-
// TODO: handle partly selected links.
|
|
85
|
-
if ( startFormat && isCollapsed( value ) && isActive ) {
|
|
86
|
-
let startIndex = value.start;
|
|
87
|
-
let endIndex = value.end;
|
|
88
|
-
|
|
89
|
-
while (
|
|
90
|
-
value.formats[ startIndex ]?.find(
|
|
91
|
-
( format ) => format?.type === startFormat.type
|
|
92
|
-
)
|
|
93
|
-
) {
|
|
94
|
-
startIndex--;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
endIndex++;
|
|
98
|
-
|
|
99
|
-
while (
|
|
100
|
-
value.formats[ endIndex ]?.find(
|
|
101
|
-
( format ) => format?.type === startFormat.type
|
|
102
|
-
)
|
|
103
|
-
) {
|
|
104
|
-
endIndex++;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
return {
|
|
108
|
-
...value,
|
|
109
|
-
start: startIndex + 1,
|
|
110
|
-
end: endIndex,
|
|
111
|
-
};
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
return value;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
onRemoveFormat() {
|
|
118
|
-
const { onChange, speak, value } = this.props;
|
|
119
|
-
const startFormat = getActiveFormat( value, 'core/link' );
|
|
120
|
-
|
|
121
|
-
// Before we try to remove anything we check if there is something at the caret position to remove.
|
|
122
|
-
if ( isCollapsed( value ) && startFormat === undefined ) {
|
|
123
|
-
return;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
const linkSelection = this.getLinkSelection();
|
|
127
|
-
|
|
128
|
-
onChange( removeFormat( linkSelection, name ) );
|
|
129
|
-
speak( __( 'Link removed.' ), 'assertive' );
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
async getURLFromClipboard() {
|
|
133
|
-
const clipboardText = await Clipboard.getString();
|
|
134
|
-
if ( ! clipboardText ) {
|
|
135
|
-
return;
|
|
136
|
-
}
|
|
137
|
-
// Check if pasted text is URL.
|
|
138
|
-
if ( ! isURL( clipboardText ) ) {
|
|
139
|
-
return;
|
|
140
|
-
}
|
|
141
|
-
this.setState( { clipboardURL: clipboardText } );
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
render() {
|
|
145
|
-
const { isActive, activeAttributes, onChange } = this.props;
|
|
146
|
-
const linkSelection = this.getLinkSelection();
|
|
147
|
-
// If no URL is set and we have a clipboard URL let's use it.
|
|
148
|
-
if ( ! activeAttributes.url && this.state.clipboardURL ) {
|
|
149
|
-
activeAttributes.url = this.state.clipboardURL;
|
|
150
|
-
}
|
|
151
|
-
return (
|
|
152
|
-
<>
|
|
153
|
-
<ModalLinkUI
|
|
154
|
-
isVisible={ this.state.addingLink }
|
|
155
|
-
isActive={ isActive }
|
|
156
|
-
activeAttributes={ activeAttributes }
|
|
157
|
-
onClose={ this.stopAddingLink }
|
|
158
|
-
onChange={ onChange }
|
|
159
|
-
onRemove={ this.onRemoveFormat }
|
|
160
|
-
value={ linkSelection }
|
|
161
|
-
/>
|
|
162
|
-
<RichTextToolbarButton
|
|
163
|
-
name="link"
|
|
164
|
-
icon={ linkIcon }
|
|
165
|
-
title={ __( 'Link' ) }
|
|
166
|
-
onClick={ this.addLink }
|
|
167
|
-
isActive={ isActive }
|
|
168
|
-
shortcutType="primary"
|
|
169
|
-
shortcutCharacter="k"
|
|
170
|
-
/>
|
|
171
|
-
</>
|
|
172
|
-
);
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
),
|
|
176
|
-
};
|